feat(truncate): integrate Truncate with v11 (#1958)

COMPONENT_INDEX.md

@@ -4730,8 +4730,9 @@ export interface TreeNode {
 ### Props
 
 | Prop name | Required | Kind             | Reactive | Type                                     | Default value      | Description                      |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ------------------ | -------------------------------- |
-| clamp     | No       | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
+| clamp     | No       | <code>let</code> | No       | <code>"end" &#124; "front"</code>        | <code>"end"</code> | Specify the truncation direction |
+| tag       | No       | <code>let</code> | No       | <code>keyof HTMLElementTagNameMap</code> | <code>"p"</code>   | Specify the tag name             |
 
 ### Slots
 

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",

src/Truncate/Truncate.svelte

@@ -1,12 +1,24 @@
 <script>
-  /** @type {"end" | "front"}*/
+  // @ts-check
+  
+  /**
+   * Specify the truncation direction
+   * @type {"end" | "front"}
+   */
   export let clamp = "end";
+
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "p";
 </script>
 
-<p
+<svelte:element
+  this="{tag}"
   class:bx--text-truncate-end="{clamp === 'end'}"
   class:bx--text-truncate-front="{clamp === 'front'}"
   {...$$restProps}
 >
   <slot />
-</p>
+</svelte:element>

src/Truncate/truncate.d.ts

@@ -1,12 +1,9 @@
+import type { Action } from "svelte/action";
+
 interface TruncateOptions {
   clamp?: "end" | "front";
 }
 
-export function TruncateAction(
+export declare const truncate: Action<HTMLElement, TruncateOptions>;
-  node: HTMLElement,
-  options?: TruncateOptions
-): {
-  update: (options?: TruncateOptions) => void;
-};
 
-export default TruncateAction;
+export default truncate;

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<HTMLElement, TruncateOptions>}
  * @example
  * <h1 use:truncate>...</h1>
  * <h1 use:truncate={{ clamp: "front" }}>...</h1>

tests/Truncate.test.svelte

@@ -1,23 +1,10 @@
 <script lang="ts">
-  import { Truncate } from "../types";
+  import { Truncate, truncate } from "../types";
-  import { truncate } from "../types";
 </script>
 
-<Truncate>
+<Truncate tag="div" clamp="front" aria-label="">
-  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Components Svelte is a Svelte component library.
-  Carbon Design System, an open source design system by IBM.
 </Truncate>
 
-<Truncate clamp="front">
+<div use:truncate></div>
-  Carbon Components Svelte is a Svelte component library that implements the
+<div use:truncate="{{ clamp: 'front' }}"></div>
-  Carbon Design System, an open source design system by IBM.
-</Truncate>
-
-<h4 use:truncate>
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</h4>
-<h4 use:truncate="{{ clamp: 'front' }}">
-  Carbon Components Svelte is a Svelte component library that implements the
-  Carbon Design System, an open source design system by IBM.
-</h4>

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;
 }
 

types/Truncate/truncate.d.ts

@@ -1,12 +1,9 @@
+import type { Action } from "svelte/action";
+
 interface TruncateOptions {
   clamp?: "end" | "front";
 }
 
-export function TruncateAction(
+export declare const truncate: Action<HTMLElement, TruncateOptions>;
-  node: HTMLElement,
-  options?: TruncateOptions
-): {
-  update: (options?: TruncateOptions) => void;
-};
 
-export default TruncateAction;
+export default truncate;