mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
chore: remove Truncate since it does not exist in Carbon v11
This commit is contained in:
parent
90a0baf676
commit
5833536199
13 changed files with 3 additions and 191 deletions
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 164 components exported from carbon-components-svelte@0.82.7.
|
> 163 components exported from carbon-components-svelte@0.82.7.
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
|
@ -166,7 +166,6 @@
|
||||||
- [`TooltipFooter`](#tooltipfooter)
|
- [`TooltipFooter`](#tooltipfooter)
|
||||||
- [`TooltipIcon`](#tooltipicon)
|
- [`TooltipIcon`](#tooltipicon)
|
||||||
- [`TreeView`](#treeview)
|
- [`TreeView`](#treeview)
|
||||||
- [`Truncate`](#truncate)
|
|
||||||
- [`UnorderedList`](#unorderedlist)
|
- [`UnorderedList`](#unorderedlist)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
@ -4690,24 +4689,6 @@ export interface TreeNode {
|
||||||
| focus | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
|
| focus | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
|
||||||
| keydown | forwarded | -- |
|
| keydown | forwarded | -- |
|
||||||
|
|
||||||
## `Truncate`
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
|
||||||
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
|
|
||||||
| clamp | No | <code>let</code> | No | <code>"end" | "front"</code> | <code>"end"</code> | -- |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
|
||||||
| :-------- | :------ | :---- | :------- |
|
|
||||||
| -- | Yes | -- | -- |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
None.
|
|
||||||
|
|
||||||
## `UnorderedList`
|
## `UnorderedList`
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"total": 164,
|
"total": 163,
|
||||||
"components": [
|
"components": [
|
||||||
{
|
{
|
||||||
"moduleName": "Accordion",
|
"moduleName": "Accordion",
|
||||||
|
@ -14625,28 +14625,6 @@
|
||||||
],
|
],
|
||||||
"rest_props": { "type": "Element", "name": "ul" }
|
"rest_props": { "type": "Element", "name": "ul" }
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"moduleName": "Truncate",
|
|
||||||
"filePath": "src/Truncate/Truncate.svelte",
|
|
||||||
"props": [
|
|
||||||
{
|
|
||||||
"name": "clamp",
|
|
||||||
"kind": "let",
|
|
||||||
"type": "\"end\" | \"front\"",
|
|
||||||
"value": "\"end\"",
|
|
||||||
"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" }
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"moduleName": "UnorderedList",
|
"moduleName": "UnorderedList",
|
||||||
"filePath": "src/UnorderedList/UnorderedList.svelte",
|
"filePath": "src/UnorderedList/UnorderedList.svelte",
|
||||||
|
|
|
@ -1,34 +0,0 @@
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Truncate, truncate } from "carbon-components-svelte";
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) 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.
|
|
||||||
|
|
||||||
<Truncate>
|
|
||||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
|
||||||
</Truncate>
|
|
||||||
|
|
||||||
## Clamp front
|
|
||||||
|
|
||||||
Set `clamp` to `"front"` to clamp the text from the front.
|
|
||||||
|
|
||||||
<Truncate clamp="front">
|
|
||||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
|
||||||
</Truncate>
|
|
||||||
|
|
||||||
## use:truncate
|
|
||||||
|
|
||||||
The `truncate` action can be used on plain HTML elements.
|
|
||||||
|
|
||||||
<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>
|
|
|
@ -1,12 +0,0 @@
|
||||||
<script>
|
|
||||||
/** @type {"end" | "front"}*/
|
|
||||||
export let clamp = "end";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p
|
|
||||||
class:bx--text-truncate--end="{clamp === 'end'}"
|
|
||||||
class:bx--text-truncate--front="{clamp === 'front'}"
|
|
||||||
{...$$restProps}
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</p>
|
|
|
@ -1,2 +0,0 @@
|
||||||
export { default as Truncate } from "./Truncate.svelte";
|
|
||||||
export { truncate } from "./truncate";
|
|
12
src/Truncate/truncate.d.ts
vendored
12
src/Truncate/truncate.d.ts
vendored
|
@ -1,12 +0,0 @@
|
||||||
interface TruncateOptions {
|
|
||||||
clamp?: "end" | "front";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TruncateAction(
|
|
||||||
node: HTMLElement,
|
|
||||||
options?: TruncateOptions
|
|
||||||
): {
|
|
||||||
update: (options?: TruncateOptions) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TruncateAction;
|
|
|
@ -1,29 +0,0 @@
|
||||||
/**
|
|
||||||
* 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;
|
|
|
@ -127,8 +127,6 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
|
||||||
export { TooltipDefinition } from "./TooltipDefinition";
|
export { TooltipDefinition } from "./TooltipDefinition";
|
||||||
export { TooltipIcon } from "./TooltipIcon";
|
export { TooltipIcon } from "./TooltipIcon";
|
||||||
export { TreeView } from "./TreeView";
|
export { TreeView } from "./TreeView";
|
||||||
export { Truncate } from "./Truncate";
|
|
||||||
export { default as truncate } from "./Truncate/truncate";
|
|
||||||
export {
|
export {
|
||||||
Header,
|
Header,
|
||||||
HeaderAction,
|
HeaderAction,
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Truncate } from "../types";
|
|
||||||
import { truncate } from "../types";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Truncate>
|
|
||||||
Carbon Components Svelte is a Svelte component library that implements the
|
|
||||||
Carbon Design System, an open source design system by IBM.
|
|
||||||
</Truncate>
|
|
||||||
|
|
||||||
<Truncate clamp="front">
|
|
||||||
Carbon Components Svelte is a Svelte component library that implements the
|
|
||||||
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>
|
|
|
@ -2,7 +2,7 @@
|
||||||
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<title>truncate</title>
|
<title>truncate</title>
|
||||||
<g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="Truncate…" transform="translate(131.264000, 86.624000)" fill="#161616" fill-rule="nonzero">
|
<g id="Truncate…" transform="translate(131.264000, 86.624000)" fill="#fefefe" fill-rule="nonzero">
|
||||||
<polygon id="Path" points="3.672 0.888 3.672 8.376 2.664 8.376 2.664 0.888 0 0.888 0 0 6.336 0 6.336 0.888"></polygon>
|
<polygon id="Path" points="3.672 0.888 3.672 8.376 2.664 8.376 2.664 0.888 0 0.888 0 0 6.336 0 6.336 0.888"></polygon>
|
||||||
<path d="M7.62,8.376 L7.62,2.184 L8.58,2.184 L8.58,3.324 L8.64,3.324 C8.752,3.028 8.952,2.764 9.24,2.532 C9.528,2.3 9.924,2.184 10.428,2.184 L10.8,2.184 L10.8,3.144 L10.236,3.144 C9.716,3.144 9.31,3.242 9.018,3.438 C8.726,3.634 8.58,3.88 8.58,4.176 L8.58,8.376 L7.62,8.376 Z" id="Path"></path>
|
<path d="M7.62,8.376 L7.62,2.184 L8.58,2.184 L8.58,3.324 L8.64,3.324 C8.752,3.028 8.952,2.764 9.24,2.532 C9.528,2.3 9.924,2.184 10.428,2.184 L10.8,2.184 L10.8,3.144 L10.236,3.144 C9.716,3.144 9.31,3.242 9.018,3.438 C8.726,3.634 8.58,3.88 8.58,4.176 L8.58,8.376 L7.62,8.376 Z" id="Path"></path>
|
||||||
<path d="M15.84,7.368 L15.792,7.368 C15.728,7.512 15.65,7.654 15.558,7.794 C15.466,7.934 15.352,8.058 15.216,8.166 C15.08,8.274 14.916,8.36 14.724,8.424 C14.532,8.488 14.308,8.52 14.052,8.52 C13.412,8.52 12.904,8.314 12.528,7.902 C12.152,7.49 11.964,6.908 11.964,6.156 L11.964,2.184 L12.924,2.184 L12.924,5.988 C12.924,7.1 13.396,7.656 14.34,7.656 C14.532,7.656 14.718,7.632 14.898,7.584 C15.078,7.536 15.238,7.464 15.378,7.368 C15.518,7.272 15.63,7.15 15.714,7.002 C15.798,6.854 15.84,6.676 15.84,6.468 L15.84,2.184 L16.8,2.184 L16.8,8.376 L15.84,8.376 L15.84,7.368 Z" id="Path"></path>
|
<path d="M15.84,7.368 L15.792,7.368 C15.728,7.512 15.65,7.654 15.558,7.794 C15.466,7.934 15.352,8.058 15.216,8.166 C15.08,8.274 14.916,8.36 14.724,8.424 C14.532,8.488 14.308,8.52 14.052,8.52 C13.412,8.52 12.904,8.314 12.528,7.902 C12.152,7.49 11.964,6.908 11.964,6.156 L11.964,2.184 L12.924,2.184 L12.924,5.988 C12.924,7.1 13.396,7.656 14.34,7.656 C14.532,7.656 14.718,7.632 14.898,7.584 C15.078,7.536 15.238,7.464 15.378,7.368 C15.518,7.272 15.63,7.15 15.714,7.002 C15.798,6.854 15.84,6.676 15.84,6.468 L15.84,2.184 L16.8,2.184 L16.8,8.376 L15.84,8.376 L15.84,7.368 Z" id="Path"></path>
|
||||||
|
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
19
types/Truncate/Truncate.svelte.d.ts
vendored
19
types/Truncate/Truncate.svelte.d.ts
vendored
|
@ -1,19 +0,0 @@
|
||||||
import type { SvelteComponentTyped } from "svelte";
|
|
||||||
import type { SvelteHTMLElements } from "svelte/elements";
|
|
||||||
|
|
||||||
type RestProps = SvelteHTMLElements["p"];
|
|
||||||
|
|
||||||
export interface TruncateProps extends RestProps {
|
|
||||||
/**
|
|
||||||
* @default "end"
|
|
||||||
*/
|
|
||||||
clamp?: "end" | "front";
|
|
||||||
|
|
||||||
[key: `data-${string}`]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Truncate extends SvelteComponentTyped<
|
|
||||||
TruncateProps,
|
|
||||||
Record<string, any>,
|
|
||||||
{ default: {} }
|
|
||||||
> {}
|
|
12
types/Truncate/truncate.d.ts
vendored
12
types/Truncate/truncate.d.ts
vendored
|
@ -1,12 +0,0 @@
|
||||||
interface TruncateOptions {
|
|
||||||
clamp?: "end" | "front";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TruncateAction(
|
|
||||||
node: HTMLElement,
|
|
||||||
options?: TruncateOptions
|
|
||||||
): {
|
|
||||||
update: (options?: TruncateOptions) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TruncateAction;
|
|
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
|
@ -142,8 +142,6 @@ export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
|
||||||
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
|
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
|
||||||
export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
|
export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
|
||||||
export { default as TreeView } from "./TreeView/TreeView.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 Header } from "./UIShell/Header.svelte";
|
||||||
export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
|
export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
|
||||||
export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";
|
export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue