diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 41c2730b..29a61239 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4729,9 +4729,10 @@ export interface TreeNode { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- | -| clamp | No | let | No | "end" | "front" | "end" | -- | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ------------------ | -------------------------------- | +| clamp | No | let | No | "end" | "front" | "end" | Specify the truncation direction | +| tag | No | let | No | keyof HTMLElementTagNameMap | "p" | Specify the tag name | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 015716aa..8dc9f9bd 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -14723,6 +14723,7 @@ { "name": "clamp", "kind": "let", + "description": "Specify the truncation direction", "type": "\"end\" | \"front\"", "value": "\"end\"", "isFunction": false, @@ -14730,13 +14731,25 @@ "isRequired": false, "constant": false, "reactive": false + }, + { + "name": "tag", + "kind": "let", + "description": "Specify the tag name", + "type": "keyof HTMLElementTagNameMap", + "value": "\"p\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false } ], "moduleExports": [], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [], "typedefs": [], - "rest_props": { "type": "Element", "name": "p" } + "rest_props": { "type": "Element", "name": "svelte:element" } }, { "moduleName": "UnorderedList", diff --git a/src/Truncate/Truncate.svelte b/src/Truncate/Truncate.svelte index f9853f06..fa3778c5 100644 --- a/src/Truncate/Truncate.svelte +++ b/src/Truncate/Truncate.svelte @@ -1,12 +1,24 @@ -

-

+ diff --git a/src/Truncate/truncate.d.ts b/src/Truncate/truncate.d.ts index 35557fc0..a63770d7 100644 --- a/src/Truncate/truncate.d.ts +++ b/src/Truncate/truncate.d.ts @@ -1,12 +1,9 @@ +import type { Action } from "svelte/action"; + interface TruncateOptions { clamp?: "end" | "front"; } -export function TruncateAction( - node: HTMLElement, - options?: TruncateOptions -): { - update: (options?: TruncateOptions) => void; -}; +export declare const truncate: Action; -export default TruncateAction; +export default truncate; diff --git a/src/Truncate/truncate.js b/src/Truncate/truncate.js index c737b317..814a8424 100644 --- a/src/Truncate/truncate.js +++ b/src/Truncate/truncate.js @@ -1,7 +1,9 @@ +// @ts-check + /** * 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; }} + * @type {import ("svelte/action").Action} * @example *

...

*

...

diff --git a/tests/Truncate.test.svelte b/tests/Truncate.test.svelte index 4e8adc65..b19b195e 100644 --- a/tests/Truncate.test.svelte +++ b/tests/Truncate.test.svelte @@ -1,23 +1,10 @@ - - 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. - - 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.svelte.d.ts b/types/Truncate/Truncate.svelte.d.ts index d7231742..3184e6ec 100644 --- a/types/Truncate/Truncate.svelte.d.ts +++ b/types/Truncate/Truncate.svelte.d.ts @@ -1,14 +1,21 @@ import type { SvelteComponentTyped } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; -type RestProps = SvelteHTMLElements["p"]; +type RestProps = SvelteHTMLElements["svelte:element"]; export interface TruncateProps extends RestProps { /** + * Specify the truncation direction * @default "end" */ clamp?: "end" | "front"; + /** + * Specify the tag name + * @default "p" + */ + tag?: keyof HTMLElementTagNameMap; + [key: `data-${string}`]: any; } diff --git a/types/Truncate/truncate.d.ts b/types/Truncate/truncate.d.ts index 35557fc0..a63770d7 100644 --- a/types/Truncate/truncate.d.ts +++ b/types/Truncate/truncate.d.ts @@ -1,12 +1,9 @@ +import type { Action } from "svelte/action"; + interface TruncateOptions { clamp?: "end" | "front"; } -export function TruncateAction( - node: HTMLElement, - options?: TruncateOptions -): { - update: (options?: TruncateOptions) => void; -}; +export declare const truncate: Action; -export default TruncateAction; +export default truncate;