chore: remove Truncate since it does not exist in Carbon v11

This commit is contained in:
Gregor Wassmann 2023-03-31 23:04:23 +02:00 committed by Enrico Sacchetti
commit 5833536199
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
13 changed files with 3 additions and 191 deletions

View file

@ -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" &#124; "front"</code> | <code>"end"</code> | -- |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `UnorderedList` ## `UnorderedList`
### Props ### Props

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -1,2 +0,0 @@
export { default as Truncate } from "./Truncate.svelte";
export { truncate } from "./truncate";

View file

@ -1,12 +0,0 @@
interface TruncateOptions {
clamp?: "end" | "front";
}
export function TruncateAction(
node: HTMLElement,
options?: TruncateOptions
): {
update: (options?: TruncateOptions) => void;
};
export default TruncateAction;

View file

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

View file

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

View file

@ -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>

View file

@ -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

Before After
Before After

View file

@ -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: {} }
> {}

View file

@ -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
View file

@ -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";