mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
14e714fa61* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
25 lines
635 B
JavaScript
25 lines
635 B
JavaScript
/**
|
|
* Svelte action that applies single-line text truncation to an element
|
|
* @param {HTMLElement} node
|
|
* @param {{ clamp?: "end" | "front" }} params
|
|
* @example
|
|
* <script>
|
|
* import { truncate } from "carbon-components-svelte/actions";
|
|
* </script>
|
|
*
|
|
* <h1 use:truncate>...</h1>
|
|
* <h1 use:truncate={{ clamp: "front" }}>...</h1>
|
|
*/
|
|
export function truncate(node, params = {}) {
|
|
function toggleClass(front = false) {
|
|
node.className = `bx--text-truncate--${front ? "front" : "end"}`;
|
|
}
|
|
|
|
toggleClass(params.clamp === "front");
|
|
|
|
return {
|
|
update(params) {
|
|
toggleClass(params.clamp === "front");
|
|
},
|
|
};
|
|
}
|