diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3e67fd12..b7ef82be 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 157 components exported from carbon-components-svelte@0.28.0. +> 158 components exported from carbon-components-svelte@0.28.0. ## Components @@ -160,6 +160,7 @@ - [`Tooltip`](#tooltip) - [`TooltipDefinition`](#tooltipdefinition) - [`TooltipIcon`](#tooltipicon) +- [`Truncate`](#truncate) - [`UnorderedList`](#unorderedlist) --- @@ -4278,6 +4279,24 @@ None. | mouseleave | forwarded | -- | | focus | forwarded | -- | +## `Truncate` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- | +| direction | let | No | "end" | "front" | "end" | -- | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + ## `UnorderedList` ### Props diff --git a/actions/index.js b/actions/index.js new file mode 100644 index 00000000..6a270efa --- /dev/null +++ b/actions/index.js @@ -0,0 +1 @@ +export { truncate } from "./truncate"; diff --git a/actions/truncate.js b/actions/truncate.js new file mode 100644 index 00000000..d9a4841f --- /dev/null +++ b/actions/truncate.js @@ -0,0 +1,24 @@ +/** + * Svelte action that applies single-line text truncation to an element + * @param {HTMLElement} node + * @param {{ direction?: "end" | "front" }} params + * @example + * + * + *

...

+ */ +export function truncate(node, params = {}) { + function toggleClass(front = false) { + node.className = `bx--text-truncate--${front ? "front" : "end"}`; + } + + toggleClass(params.direction === "front"); + + return { + update(params) { + toggleClass(params.direction === "front"); + }, + }; +} diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 0bbfa839..95e3aca9 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1,5 +1,5 @@ { - "total": 157, + "total": 158, "components": [ { "moduleName": "Accordion", @@ -10664,6 +10664,25 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "button" } }, + { + "moduleName": "Truncate", + "filePath": "src/Truncate/Truncate.svelte", + "props": [ + { + "name": "direction", + "kind": "let", + "type": "\"end\" | \"front\"", + "value": "\"end\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, { "moduleName": "UnorderedList", "filePath": "src/UnorderedList/UnorderedList.svelte", diff --git a/docs/src/pages/components/Truncate.svx b/docs/src/pages/components/Truncate.svx new file mode 100644 index 00000000..8f15b19b --- /dev/null +++ b/docs/src/pages/components/Truncate.svx @@ -0,0 +1,37 @@ + + + +This is a utility component that wraps the `.bx--text-truncate--*` CSS selector from `carbon-components` for single line text truncation. + +### Default + +By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements. + + + Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. + + +### Direction (front) + +Set `direction` to `"front"` to clamp the text from the front. + + + Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. + + +### use:truncate + +The `truncate` action can be used on other HTML elements. + +Import path: `import { truncate } from "carbon-components-svelte/actions";` + +

+ Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. +

+

+ Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. +

\ No newline at end of file diff --git a/docs/svelte.config.js b/docs/svelte.config.js index cad6f06f..fbf33fcb 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -38,6 +38,9 @@ function createImports(source) { const ccs_imports = Array.from(inlineComponents.keys()); const icon_imports = Array.from(icons.keys()); + if (ccs_imports.length === 0) return ""; + // TODO: determine if action is used, and generate import accordingly + return ` + +

+ +

diff --git a/src/Truncate/index.js b/src/Truncate/index.js new file mode 100644 index 00000000..ae315be0 --- /dev/null +++ b/src/Truncate/index.js @@ -0,0 +1 @@ +export { default as Truncate } from "./Truncate.svelte"; diff --git a/src/index.js b/src/index.js index 3896ed92..2217ff9f 100644 --- a/src/index.js +++ b/src/index.js @@ -114,6 +114,7 @@ export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall"; export { Tooltip } from "./Tooltip"; export { TooltipDefinition } from "./TooltipDefinition"; export { TooltipIcon } from "./TooltipIcon"; +export { Truncate } from "./Truncate"; export { Header, HeaderAction, diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte new file mode 100644 index 00000000..9e34961a --- /dev/null +++ b/tests/Truncate.test.svelte @@ -0,0 +1,23 @@ + + + + Carbon Components Svelte is a Svelte component library that implements the + Carbon Design System, an open source design system by IBM. + + + + Carbon Components Svelte is a Svelte component library that implements the + Carbon Design System, an open source design system by IBM. + + +

+ Carbon Components Svelte is a Svelte component library that implements the + Carbon Design System, an open source design system by IBM. +

+

+ Carbon Components Svelte is a Svelte component library that implements the + Carbon Design System, an open source design system by IBM. +

diff --git a/types/Truncate/Truncate.d.ts b/types/Truncate/Truncate.d.ts new file mode 100644 index 00000000..9a2c1ef3 --- /dev/null +++ b/types/Truncate/Truncate.d.ts @@ -0,0 +1,16 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface TruncateProps + extends svelte.JSX.HTMLAttributes { + /** + * @default "end" + */ + direction?: "end" | "front"; +} + +export default class Truncate extends SvelteComponentTyped< + TruncateProps, + {}, + { default: {} } +> {} diff --git a/types/index.d.ts b/types/index.d.ts index 33ba3d7b..9addddc7 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -133,6 +133,7 @@ export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleto export { default as Tooltip } from "./Tooltip/Tooltip"; export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; +export { default as Truncate } from "./Truncate/Truncate"; export { default as Header } from "./UIShell/GlobalHeader/Header"; export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction"; export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink";