mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
breaking(actions): move truncate
action to src/Truncate (#1224)
* breaking: move truncate action to src/Truncate * docs: update truncate docs
This commit is contained in:
parent
62735d6275
commit
9143e50244
10 changed files with 39 additions and 19 deletions
29
src/Truncate/truncate.js
Normal file
29
src/Truncate/truncate.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* Svelte action that applies single-line text truncation to an element
|
||||
* @typedef {{ clamp?: "end" | "front" }} TruncateOptions
|
||||
* @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
|
||||
* @example
|
||||
* <h1 use:truncate>...</h1>
|
||||
* <h1 use:truncate={{ clamp: "front" }}>...</h1>
|
||||
*/
|
||||
export function truncate(node, options = {}) {
|
||||
const prefix = "bx--text-truncate--";
|
||||
|
||||
function toggleClass(front = false) {
|
||||
const classes = [...node.classList]
|
||||
.filter((name) => !name.startsWith(prefix))
|
||||
.join(" ");
|
||||
|
||||
node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
|
||||
}
|
||||
|
||||
toggleClass(options.clamp === "front");
|
||||
|
||||
return {
|
||||
update(options) {
|
||||
toggleClass(options.clamp === "front");
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default truncate;
|
Loading…
Add table
Add a link
Reference in a new issue