diff --git a/actions/index.js b/actions/index.js deleted file mode 100644 index 6a270efa..00000000 --- a/actions/index.js +++ /dev/null @@ -1 +0,0 @@ -export { truncate } from "./truncate"; diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx index 41c0ce4a..071ec970 100644 --- a/docs/src/pages/components/Truncate.svx +++ b/docs/src/pages/components/Truncate.svx @@ -1,7 +1,6 @@ @@ -25,9 +24,7 @@ Set `clamp` to `"front"` to clamp the text from the front. ### use:truncate -The `truncate` action can be used on other HTML elements. - -Import path: `import { truncate } from "carbon-components-svelte/actions";` +The `truncate` action can be used on plain HTML elements.

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. diff --git a/package.json b/package.json index a9a11dc4..aaf2414d 100644 --- a/package.json +++ b/package.json @@ -75,8 +75,7 @@ "lib", "src", "types", - "css", - "actions" + "css" ], "contributors": [ "Eric Liu (https://github.com/metonym)", diff --git a/src/Truncate/index.js b/src/Truncate/index.js index ae315be0..803c92f2 100644 --- a/src/Truncate/index.js +++ b/src/Truncate/index.js @@ -1 +1,2 @@ export { default as Truncate } from "./Truncate.svelte"; +export { truncate } from "./truncate"; diff --git a/src/Truncate/truncate.d.ts b/src/Truncate/truncate.d.ts new file mode 100644 index 00000000..35557fc0 --- /dev/null +++ b/src/Truncate/truncate.d.ts @@ -0,0 +1,12 @@ +interface TruncateOptions { + clamp?: "end" | "front"; +} + +export function TruncateAction( + node: HTMLElement, + options?: TruncateOptions +): { + update: (options?: TruncateOptions) => void; +}; + +export default TruncateAction; diff --git a/actions/truncate.js b/src/Truncate/truncate.js similarity index 56% rename from actions/truncate.js rename to src/Truncate/truncate.js index 51fdfb9e..42723c09 100644 --- a/actions/truncate.js +++ b/src/Truncate/truncate.js @@ -1,16 +1,12 @@ /** * Svelte action that applies single-line text truncation to an element - * @param {HTMLElement} node - * @param {{ clamp?: "end" | "front" }} params + * @typedef {{ clamp?: "end" | "front" }} TruncateOptions + * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }} * @example - * - * *

...

*

...

*/ -export function truncate(node, params = {}) { +export function truncate(node, options = {}) { const prefix = "bx--text-truncate--"; function toggleClass(front = false) { @@ -21,11 +17,13 @@ export function truncate(node, params = {}) { node.className = `${classes} ${prefix}${front ? "front" : "end"}`; } - toggleClass(params.clamp === "front"); + toggleClass(options.clamp === "front"); return { - update(params) { - toggleClass(params.clamp === "front"); + update(options) { + toggleClass(options.clamp === "front"); }, }; } + +export default truncate; diff --git a/src/index.js b/src/index.js index eab6202d..ea1a84cf 100644 --- a/src/index.js +++ b/src/index.js @@ -128,6 +128,7 @@ export { TooltipDefinition } from "./TooltipDefinition"; export { TooltipIcon } from "./TooltipIcon"; export { TreeView } from "./TreeView"; export { Truncate } from "./Truncate"; +export { default as truncate } from "./Truncate/truncate"; export { Header, HeaderAction, diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte index 35e90c8b..4e8adc65 100644 --- a/tests/Truncate.test.svelte +++ b/tests/Truncate.test.svelte @@ -1,6 +1,6 @@ diff --git a/types/Truncate/truncate.d.ts b/types/Truncate/truncate.d.ts new file mode 100644 index 00000000..35557fc0 --- /dev/null +++ b/types/Truncate/truncate.d.ts @@ -0,0 +1,12 @@ +interface TruncateOptions { + clamp?: "end" | "front"; +} + +export function TruncateAction( + node: HTMLElement, + options?: TruncateOptions +): { + update: (options?: TruncateOptions) => void; +}; + +export default TruncateAction; diff --git a/types/index.d.ts b/types/index.d.ts index 598b9f0b..1174ce26 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -144,6 +144,7 @@ export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinit export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte"; export { default as TreeView } from "./TreeView/TreeView.svelte"; export { default as Truncate } from "./Truncate/Truncate.svelte"; +export { default as truncate } from "./Truncate/truncate"; export { default as Header } from "./UIShell/Header.svelte"; export { default as HeaderAction } from "./UIShell/HeaderAction.svelte"; export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";