mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
Run npm run lint
This commit is contained in:
parent
b982387a8c
commit
2031cb7585
480 changed files with 8985 additions and 9048 deletions
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion disabled>
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Natural Language Classifier",
|
||||
description:
|
||||
"Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
|
||||
},
|
||||
{
|
||||
title: "Natural Language Understanding",
|
||||
description:
|
||||
"Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
|
||||
},
|
||||
{
|
||||
title: "Language Translator",
|
||||
description:
|
||||
"Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
|
||||
},
|
||||
];
|
||||
const items = [
|
||||
{
|
||||
title: "Natural Language Classifier",
|
||||
description:
|
||||
"Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
|
||||
},
|
||||
{
|
||||
title: "Natural Language Understanding",
|
||||
description:
|
||||
"Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
|
||||
},
|
||||
{
|
||||
title: "Language Translator",
|
||||
description:
|
||||
"Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
|
||||
},
|
||||
];
|
||||
|
||||
let open = false;
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="ghost" size="field" on:click={() => (open = !open)}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Accordion } from "carbon-components-svelte";
|
||||
import { Accordion } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion skeleton />
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion>
|
||||
|
|
|
@ -1,94 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { TreeView as TreeViewNav } from "carbon-components-svelte";
|
||||
import AspectRatio from "./AspectRatio/AspectRatio.test.svelte";
|
||||
import Accordion from "./Accordion/Accordion.test.svelte";
|
||||
import AccordionProgrammatic from "./Accordion/Accordion.programmatic.test.svelte";
|
||||
import AccordionDisabled from "./Accordion/Accordion.disabled.test.svelte";
|
||||
import DuplicateDataTables from "./DataTable/DuplicateDataTables.test.svelte";
|
||||
import TreeView from "./TreeView/TreeView.test.svelte";
|
||||
import TreeViewHierarchy from "./TreeView/TreeView.hierarchy.test.svelte";
|
||||
import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
|
||||
import RecursiveListHierarchy from "./RecursiveList/RecursiveList.hierarchy.test.svelte";
|
||||
import Tag from "./Tag/Tag.test.svelte";
|
||||
import OverflowMenu from "./OverflowMenu/OverflowMenu.test.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { TreeView as TreeViewNav } from "carbon-components-svelte";
|
||||
import AspectRatio from "./AspectRatio/AspectRatio.test.svelte";
|
||||
import Accordion from "./Accordion/Accordion.test.svelte";
|
||||
import AccordionProgrammatic from "./Accordion/Accordion.programmatic.test.svelte";
|
||||
import AccordionDisabled from "./Accordion/Accordion.disabled.test.svelte";
|
||||
import DuplicateDataTables from "./DataTable/DuplicateDataTables.test.svelte";
|
||||
import TreeView from "./TreeView/TreeView.test.svelte";
|
||||
import TreeViewHierarchy from "./TreeView/TreeView.hierarchy.test.svelte";
|
||||
import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
|
||||
import RecursiveListHierarchy from "./RecursiveList/RecursiveList.hierarchy.test.svelte";
|
||||
import Tag from "./Tag/Tag.test.svelte";
|
||||
import OverflowMenu from "./OverflowMenu/OverflowMenu.test.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/aspect-ratio",
|
||||
name: "AspectRatio",
|
||||
component: AspectRatio,
|
||||
},
|
||||
{
|
||||
path: "/accordion",
|
||||
name: "Accordion",
|
||||
component: Accordion,
|
||||
},
|
||||
{
|
||||
path: "/accordion-programmatic",
|
||||
name: "AccordionProgrammatic",
|
||||
component: AccordionProgrammatic,
|
||||
},
|
||||
{
|
||||
path: "/accordion-disabled",
|
||||
name: "AccordionDisabled",
|
||||
component: AccordionDisabled,
|
||||
},
|
||||
{
|
||||
path: "/data-table",
|
||||
name: "DataTable",
|
||||
component: DuplicateDataTables,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list",
|
||||
name: "RecursiveList",
|
||||
component: RecursiveList,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list-hierarchy",
|
||||
name: "RecursiveListHierarchy",
|
||||
component: RecursiveListHierarchy,
|
||||
},
|
||||
{
|
||||
path: "/treeview",
|
||||
name: "TreeView",
|
||||
component: TreeView,
|
||||
},
|
||||
{
|
||||
path: "/treeview-hierarchy",
|
||||
name: "TreeViewHierarchy",
|
||||
component: TreeViewHierarchy,
|
||||
},
|
||||
{
|
||||
path: "/tag",
|
||||
name: "Tag",
|
||||
component: Tag,
|
||||
},
|
||||
{
|
||||
path: "/overflow-menu",
|
||||
name: "OverflowMenu",
|
||||
component: OverflowMenu,
|
||||
},
|
||||
] as const;
|
||||
const routes = [
|
||||
{
|
||||
path: "/aspect-ratio",
|
||||
name: "AspectRatio",
|
||||
component: AspectRatio,
|
||||
},
|
||||
{
|
||||
path: "/accordion",
|
||||
name: "Accordion",
|
||||
component: Accordion,
|
||||
},
|
||||
{
|
||||
path: "/accordion-programmatic",
|
||||
name: "AccordionProgrammatic",
|
||||
component: AccordionProgrammatic,
|
||||
},
|
||||
{
|
||||
path: "/accordion-disabled",
|
||||
name: "AccordionDisabled",
|
||||
component: AccordionDisabled,
|
||||
},
|
||||
{
|
||||
path: "/data-table",
|
||||
name: "DataTable",
|
||||
component: DuplicateDataTables,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list",
|
||||
name: "RecursiveList",
|
||||
component: RecursiveList,
|
||||
},
|
||||
{
|
||||
path: "/recursive-list-hierarchy",
|
||||
name: "RecursiveListHierarchy",
|
||||
component: RecursiveListHierarchy,
|
||||
},
|
||||
{
|
||||
path: "/treeview",
|
||||
name: "TreeView",
|
||||
component: TreeView,
|
||||
},
|
||||
{
|
||||
path: "/treeview-hierarchy",
|
||||
name: "TreeViewHierarchy",
|
||||
component: TreeViewHierarchy,
|
||||
},
|
||||
{
|
||||
path: "/tag",
|
||||
name: "Tag",
|
||||
component: Tag,
|
||||
},
|
||||
{
|
||||
path: "/overflow-menu",
|
||||
name: "OverflowMenu",
|
||||
component: OverflowMenu,
|
||||
},
|
||||
] as const;
|
||||
|
||||
let currentPath = window.location.pathname;
|
||||
let currentPath = window.location.pathname;
|
||||
|
||||
function navigate(path: string) {
|
||||
history.pushState({}, "", path);
|
||||
currentPath = path;
|
||||
}
|
||||
function navigate(path: string) {
|
||||
history.pushState({}, "", path);
|
||||
currentPath = path;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const handlePopState = () => {
|
||||
currentPath = window.location.pathname;
|
||||
};
|
||||
onMount(() => {
|
||||
const handlePopState = () => {
|
||||
currentPath = window.location.pathname;
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
};
|
||||
});
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div style:display="flex">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { AspectRatio } from "carbon-components-svelte";
|
||||
import { AspectRatio } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<AspectRatio>2x1</AspectRatio>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
|
||||
type BreadcrumbItemType = { href?: string; text: string };
|
||||
type BreadcrumbItemType = { href?: string; text: string };
|
||||
|
||||
export let items: BreadcrumbItemType[] = [
|
||||
{ href: "/", text: "Dashboard" },
|
||||
{ href: "/reports", text: "Annual reports" },
|
||||
{ href: "/reports/2019", text: "2019" },
|
||||
];
|
||||
export let items: BreadcrumbItemType[] = [
|
||||
{ href: "/", text: "Dashboard" },
|
||||
{ href: "/reports", text: "Annual reports" },
|
||||
{ href: "/reports/2019", text: "2019" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<Breadcrumb>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Breadcrumb noTrailingSlash>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Breadcrumb } from "carbon-components-svelte";
|
||||
import { Breadcrumb } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Breadcrumb skeleton count={3} />
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Breadcrumb>
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { Breakpoint } from "carbon-components-svelte";
|
||||
import type { BreakpointSize } from "carbon-components-svelte/Breakpoint/breakpoints";
|
||||
import { Breakpoint } from "carbon-components-svelte";
|
||||
import type { BreakpointSize } from "carbon-components-svelte/Breakpoint/breakpoints";
|
||||
|
||||
export let size: BreakpointSize | undefined = undefined;
|
||||
export let sizes: Record<BreakpointSize, boolean> = {
|
||||
sm: false,
|
||||
md: false,
|
||||
lg: false,
|
||||
xlg: false,
|
||||
max: false,
|
||||
};
|
||||
export let size: BreakpointSize | undefined = undefined;
|
||||
export let sizes: Record<BreakpointSize, boolean> = {
|
||||
sm: false,
|
||||
md: false,
|
||||
lg: false,
|
||||
xlg: false,
|
||||
max: false,
|
||||
};
|
||||
</script>
|
||||
|
||||
<Breakpoint
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { breakpointObserver } from "carbon-components-svelte";
|
||||
import { breakpointObserver } from "carbon-components-svelte";
|
||||
|
||||
export let smallerThanMd = false;
|
||||
export let largerThanMd = false;
|
||||
export let smallerThanMd = false;
|
||||
export let largerThanMd = false;
|
||||
|
||||
const observer = breakpointObserver();
|
||||
const smallerThan = observer.smallerThan("md");
|
||||
const largerThan = observer.largerThan("md");
|
||||
const observer = breakpointObserver();
|
||||
const smallerThan = observer.smallerThan("md");
|
||||
const largerThan = observer.largerThan("md");
|
||||
|
||||
smallerThan.subscribe((value) => {
|
||||
smallerThanMd = value;
|
||||
});
|
||||
smallerThan.subscribe((value) => {
|
||||
smallerThanMd = value;
|
||||
});
|
||||
|
||||
largerThan.subscribe((value) => {
|
||||
largerThanMd = value;
|
||||
});
|
||||
largerThan.subscribe((value) => {
|
||||
largerThanMd = value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div data-testid="smaller-than-md">{smallerThanMd}</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { breakpoints } from "carbon-components-svelte";
|
||||
import { breakpoints } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<div data-testid="sm">{breakpoints.sm}</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { Button } from "carbon-components-svelte";
|
||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
||||
import { Button } from "carbon-components-svelte";
|
||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
||||
</script>
|
||||
|
||||
<Button>primary</Button>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { Button, ButtonSet } from "carbon-components-svelte";
|
||||
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
||||
import { Button, ButtonSet } from "carbon-components-svelte";
|
||||
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
||||
</script>
|
||||
|
||||
<ButtonSet>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
|
||||
export let group = ["option-2"];
|
||||
export let group = ["option-2"];
|
||||
|
||||
$: console.log(group);
|
||||
$: console.log(group);
|
||||
</script>
|
||||
|
||||
<Checkbox
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Checkbox skeleton data-testid="checkbox-skeleton" />
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Checkbox data-testid="checkbox-slot">
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
import { Checkbox } from "carbon-components-svelte";
|
||||
|
||||
export let checked = false;
|
||||
export let indeterminate = false;
|
||||
export let disabled = false;
|
||||
export let hideLabel = false;
|
||||
export let labelText = "Checkbox label";
|
||||
export let checked = false;
|
||||
export let indeterminate = false;
|
||||
export let disabled = false;
|
||||
export let hideLabel = false;
|
||||
export let labelText = "Checkbox label";
|
||||
</script>
|
||||
|
||||
<Checkbox
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet type="single" code="npm install --save @carbon/icons" />
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
|
||||
let copyCount = 0;
|
||||
let copyCount = 0;
|
||||
|
||||
function handleCopy() {
|
||||
copyCount += 1;
|
||||
}
|
||||
function handleCopy() {
|
||||
copyCount += 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
Copy events: {copyCount}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet type="inline" code="npm install -g @carbon/cli" />
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
|
|
|
@ -1,31 +1,31 @@
|
|||
<script lang="ts">
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let items: ComponentProps<ComboBox>["items"] = [
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
];
|
||||
export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
|
||||
export let value = "";
|
||||
export let disabled = false;
|
||||
export let invalid = false;
|
||||
export let warn = false;
|
||||
export let light = false;
|
||||
export let open = false;
|
||||
export let titleText = "Contact";
|
||||
export let placeholder = "Select contact method";
|
||||
export let invalidText = "";
|
||||
export let warnText = "";
|
||||
export let helperText = "";
|
||||
export let size: "sm" | "xl" | undefined = undefined;
|
||||
export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = (
|
||||
item,
|
||||
value,
|
||||
) => item.text.toLowerCase().includes(value.toLowerCase());
|
||||
export let translateWithIdSelection: ComponentProps<ComboBox>["translateWithIdSelection"] =
|
||||
undefined;
|
||||
export let items: ComponentProps<ComboBox>["items"] = [
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
];
|
||||
export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
|
||||
export let value = "";
|
||||
export let disabled = false;
|
||||
export let invalid = false;
|
||||
export let warn = false;
|
||||
export let light = false;
|
||||
export let open = false;
|
||||
export let titleText = "Contact";
|
||||
export let placeholder = "Select contact method";
|
||||
export let invalidText = "";
|
||||
export let warnText = "";
|
||||
export let helperText = "";
|
||||
export let size: "sm" | "xl" | undefined = undefined;
|
||||
export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = (
|
||||
item,
|
||||
value,
|
||||
) => item.text.toLowerCase().includes(value.toLowerCase());
|
||||
export let translateWithIdSelection: ComponentProps<ComboBox>["translateWithIdSelection"] =
|
||||
undefined;
|
||||
</script>
|
||||
|
||||
<ComboBox
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import type { ComboBoxItem } from "carbon-components-svelte/ComboBox/ComboBox.svelte";
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import type { ComboBoxItem } from "carbon-components-svelte/ComboBox/ComboBox.svelte";
|
||||
|
||||
let comboBoxRef: ComboBox;
|
||||
let comboBoxRef: ComboBox;
|
||||
|
||||
export let items: ComboBoxItem[] = [
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax", disabled: true },
|
||||
];
|
||||
export let selectedId: string | undefined = undefined;
|
||||
export let direction: "top" | "bottom" = "bottom";
|
||||
export let clearOptions: { focus?: boolean } = {};
|
||||
export let shouldFilterItem = (item: ComboBoxItem, value: string) =>
|
||||
item.text.toLowerCase().includes(value.toLowerCase());
|
||||
export let itemToString = (item: ComboBoxItem) => item.text;
|
||||
export let items: ComboBoxItem[] = [
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax", disabled: true },
|
||||
];
|
||||
export let selectedId: string | undefined = undefined;
|
||||
export let direction: "top" | "bottom" = "bottom";
|
||||
export let clearOptions: { focus?: boolean } = {};
|
||||
export let shouldFilterItem = (item: ComboBoxItem, value: string) =>
|
||||
item.text.toLowerCase().includes(value.toLowerCase());
|
||||
export let itemToString = (item: ComboBoxItem) => item.text;
|
||||
</script>
|
||||
|
||||
<ComboBox
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
ComposedModal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Checkbox,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
ComposedModal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Checkbox,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let checked = false;
|
||||
let checked = false;
|
||||
</script>
|
||||
|
||||
<ComposedModal open on:close on:click:button--primary>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid condensed>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
|
||||
export let selectedIndex = 1;
|
||||
export let selectedIndex = 1;
|
||||
</script>
|
||||
|
||||
<ContentSwitcher {selectedIndex}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher size="sm">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher>
|
||||
|
|
|
@ -1,20 +1,20 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuDivider,
|
||||
ContextMenuOption,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuGroup,
|
||||
} from "carbon-components-svelte";
|
||||
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
|
||||
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuDivider,
|
||||
ContextMenuOption,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuGroup,
|
||||
} from "carbon-components-svelte";
|
||||
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
|
||||
import Cut from "carbon-icons-svelte/lib/Cut.svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
let ref: HTMLElement;
|
||||
let selectedId = "0";
|
||||
let selectedIds: ComponentProps<ContextMenuGroup>["selectedIds"] = [];
|
||||
let ref: HTMLElement;
|
||||
let selectedId = "0";
|
||||
let selectedIds: ComponentProps<ContextMenuGroup>["selectedIds"] = [];
|
||||
|
||||
$: console.log("selectedId", selectedId);
|
||||
$: console.log("selectedId", selectedId);
|
||||
</script>
|
||||
|
||||
<div bind:this={ref}></div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { CopyButton } from "carbon-components-svelte";
|
||||
import { CopyButton } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CopyButton
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
|
||||
|
|
|
@ -1,75 +1,75 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
DataTable,
|
||||
DataTableSkeleton,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
ToolbarMenu,
|
||||
ToolbarMenuItem,
|
||||
Button,
|
||||
Link,
|
||||
} from "carbon-components-svelte";
|
||||
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import {
|
||||
DataTable,
|
||||
DataTableSkeleton,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
ToolbarMenu,
|
||||
ToolbarMenuItem,
|
||||
Button,
|
||||
Link,
|
||||
} from "carbon-components-svelte";
|
||||
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule", sort: false },
|
||||
] as const;
|
||||
const rows = [
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
];
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule", sort: false },
|
||||
] as const;
|
||||
const rows = [
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
];
|
||||
|
||||
function sort(a: any, b: any) {
|
||||
if (new Date(a) > new Date(b)) return 1;
|
||||
return 0;
|
||||
}
|
||||
function sort(a: any, b: any) {
|
||||
if (new Date(a) > new Date(b)) return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
let filteredRowIds: ComponentProps<ToolbarSearch>["filteredRowIds"] = [];
|
||||
let filteredRowIds: ComponentProps<ToolbarSearch>["filteredRowIds"] = [];
|
||||
</script>
|
||||
|
||||
<DataTable
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "id", value: "id" },
|
||||
{ key: "contact.company", value: "Company name" },
|
||||
] as const;
|
||||
const headers = [
|
||||
{ key: "id", value: "id" },
|
||||
{ key: "contact.company", value: "Company name" },
|
||||
] as const;
|
||||
|
||||
const rows = [
|
||||
{ id: "1", contact: { company: "Company 1" } },
|
||||
{ id: "2", contact: { company: "Company 2" } },
|
||||
];
|
||||
const rows = [
|
||||
{ id: "1", contact: { company: "Company 1" } },
|
||||
{ id: "2", contact: { company: "Company 2" } },
|
||||
];
|
||||
</script>
|
||||
|
||||
<DataTable inputName="radio-select" radio {headers} {rows} />
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
DataTable,
|
||||
OverflowMenu,
|
||||
OverflowMenuItem,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
DataTable,
|
||||
OverflowMenu,
|
||||
OverflowMenuItem,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
{ key: "overflow", empty: true },
|
||||
] as const;
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
{ key: "overflow", empty: true },
|
||||
] as const;
|
||||
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<DataTable sortable {headers} {rows}>
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
|
||||
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
</script>
|
||||
|
||||
<DataTable batchSelection bind:selectedRowIds {headers} {rows} />
|
||||
|
|
|
@ -1,34 +1,34 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
DataTable,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
ToolbarMenu,
|
||||
ToolbarMenuItem,
|
||||
ToolbarBatchActions,
|
||||
Button,
|
||||
} from "carbon-components-svelte";
|
||||
import Save from "carbon-icons-svelte/lib/Save.svelte";
|
||||
import {
|
||||
DataTable,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
ToolbarMenu,
|
||||
ToolbarMenuItem,
|
||||
ToolbarBatchActions,
|
||||
Button,
|
||||
} from "carbon-components-svelte";
|
||||
import Save from "carbon-icons-svelte/lib/Save.svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
|
||||
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||
let selectedRowIds = [rows[0].id, rows[1].id];
|
||||
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
</script>
|
||||
|
||||
<DataTable batchSelection bind:selectedRowIds {headers} {rows}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { DataTable } from "../types";
|
||||
import { DataTable } from "../types";
|
||||
</script>
|
||||
|
||||
<DataTable
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
DatePicker,
|
||||
DatePickerSkeleton,
|
||||
DatePickerInput,
|
||||
} from "carbon-components-svelte";
|
||||
import { Russian } from "flatpickr/dist/l10n/ru.js";
|
||||
import {
|
||||
DatePicker,
|
||||
DatePickerSkeleton,
|
||||
DatePickerInput,
|
||||
} from "carbon-components-svelte";
|
||||
import { Russian } from "flatpickr/dist/l10n/ru.js";
|
||||
</script>
|
||||
|
||||
<DatePicker
|
||||
|
|
|
@ -1,29 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { Dropdown } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { Dropdown } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let items: ComponentProps<Dropdown>["items"] = [];
|
||||
export let itemToString: ComponentProps<Dropdown>["itemToString"] = undefined;
|
||||
export let selectedId: ComponentProps<Dropdown>["selectedId"] = undefined;
|
||||
export let type: ComponentProps<Dropdown>["type"] = "default";
|
||||
export let direction: ComponentProps<Dropdown>["direction"] = "bottom";
|
||||
export let size: ComponentProps<Dropdown>["size"] = undefined;
|
||||
export let open: ComponentProps<Dropdown>["open"] = false;
|
||||
export let light: ComponentProps<Dropdown>["light"] = false;
|
||||
export let disabled: ComponentProps<Dropdown>["disabled"] = false;
|
||||
export let titleText: ComponentProps<Dropdown>["titleText"] = "";
|
||||
export let invalid: ComponentProps<Dropdown>["invalid"] = false;
|
||||
export let invalidText: ComponentProps<Dropdown>["invalidText"] = "";
|
||||
export let warn: ComponentProps<Dropdown>["warn"] = false;
|
||||
export let warnText: ComponentProps<Dropdown>["warnText"] = "";
|
||||
export let helperText: ComponentProps<Dropdown>["helperText"] = "";
|
||||
export let label: ComponentProps<Dropdown>["label"] = undefined;
|
||||
export let hideLabel: ComponentProps<Dropdown>["hideLabel"] = false;
|
||||
export let translateWithId: ComponentProps<Dropdown>["translateWithId"] =
|
||||
undefined;
|
||||
export let id: ComponentProps<Dropdown>["id"] = "test-dropdown";
|
||||
export let name: ComponentProps<Dropdown>["name"] = undefined;
|
||||
export let ref: ComponentProps<Dropdown>["ref"] = null;
|
||||
export let items: ComponentProps<Dropdown>["items"] = [];
|
||||
export let itemToString: ComponentProps<Dropdown>["itemToString"] = undefined;
|
||||
export let selectedId: ComponentProps<Dropdown>["selectedId"] = undefined;
|
||||
export let type: ComponentProps<Dropdown>["type"] = "default";
|
||||
export let direction: ComponentProps<Dropdown>["direction"] = "bottom";
|
||||
export let size: ComponentProps<Dropdown>["size"] = undefined;
|
||||
export let open: ComponentProps<Dropdown>["open"] = false;
|
||||
export let light: ComponentProps<Dropdown>["light"] = false;
|
||||
export let disabled: ComponentProps<Dropdown>["disabled"] = false;
|
||||
export let titleText: ComponentProps<Dropdown>["titleText"] = "";
|
||||
export let invalid: ComponentProps<Dropdown>["invalid"] = false;
|
||||
export let invalidText: ComponentProps<Dropdown>["invalidText"] = "";
|
||||
export let warn: ComponentProps<Dropdown>["warn"] = false;
|
||||
export let warnText: ComponentProps<Dropdown>["warnText"] = "";
|
||||
export let helperText: ComponentProps<Dropdown>["helperText"] = "";
|
||||
export let label: ComponentProps<Dropdown>["label"] = undefined;
|
||||
export let hideLabel: ComponentProps<Dropdown>["hideLabel"] = false;
|
||||
export let translateWithId: ComponentProps<Dropdown>["translateWithId"] =
|
||||
undefined;
|
||||
export let id: ComponentProps<Dropdown>["id"] = "test-dropdown";
|
||||
export let name: ComponentProps<Dropdown>["name"] = undefined;
|
||||
export let ref: ComponentProps<Dropdown>["ref"] = null;
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { Dropdown } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { Dropdown } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let items: ComponentProps<Dropdown>["items"] = [
|
||||
{ id: "0", text: "Option 1" },
|
||||
{ id: "1", text: "Option 2" },
|
||||
{ id: "2", text: "Option 3" },
|
||||
];
|
||||
export let selectedId: ComponentProps<Dropdown>["selectedId"] = "0";
|
||||
export let id: ComponentProps<Dropdown>["id"] = "test-dropdown-slot";
|
||||
export let items: ComponentProps<Dropdown>["items"] = [
|
||||
{ id: "0", text: "Option 1" },
|
||||
{ id: "1", text: "Option 2" },
|
||||
{ id: "2", text: "Option 3" },
|
||||
];
|
||||
export let selectedId: ComponentProps<Dropdown>["selectedId"] = "0";
|
||||
export let id: ComponentProps<Dropdown>["id"] = "test-dropdown-slot";
|
||||
</script>
|
||||
|
||||
<Dropdown
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { ExpandableTile } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { ExpandableTile } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let expanded: ComponentProps<ExpandableTile>["expanded"] = false;
|
||||
export let light: ComponentProps<ExpandableTile>["light"] = false;
|
||||
export let tileMaxHeight: ComponentProps<ExpandableTile>["tileMaxHeight"] = 0;
|
||||
export let tilePadding: ComponentProps<ExpandableTile>["tilePadding"] = 0;
|
||||
export let tileCollapsedIconText: ComponentProps<ExpandableTile>["tileCollapsedIconText"] =
|
||||
"Interact to expand Tile";
|
||||
export let tileExpandedIconText: ComponentProps<ExpandableTile>["tileExpandedIconText"] =
|
||||
"Interact to collapse Tile";
|
||||
export let tileExpandedLabel: ComponentProps<ExpandableTile>["tileExpandedLabel"] =
|
||||
"";
|
||||
export let tileCollapsedLabel: ComponentProps<ExpandableTile>["tileCollapsedLabel"] =
|
||||
"";
|
||||
export let tabindex: ComponentProps<ExpandableTile>["tabindex"] = "0";
|
||||
export let id: ComponentProps<ExpandableTile>["id"] = "ccs-test";
|
||||
export let ref: ComponentProps<ExpandableTile>["ref"] = null;
|
||||
export let expanded: ComponentProps<ExpandableTile>["expanded"] = false;
|
||||
export let light: ComponentProps<ExpandableTile>["light"] = false;
|
||||
export let tileMaxHeight: ComponentProps<ExpandableTile>["tileMaxHeight"] = 0;
|
||||
export let tilePadding: ComponentProps<ExpandableTile>["tilePadding"] = 0;
|
||||
export let tileCollapsedIconText: ComponentProps<ExpandableTile>["tileCollapsedIconText"] =
|
||||
"Interact to expand Tile";
|
||||
export let tileExpandedIconText: ComponentProps<ExpandableTile>["tileExpandedIconText"] =
|
||||
"Interact to collapse Tile";
|
||||
export let tileExpandedLabel: ComponentProps<ExpandableTile>["tileExpandedLabel"] =
|
||||
"";
|
||||
export let tileCollapsedLabel: ComponentProps<ExpandableTile>["tileCollapsedLabel"] =
|
||||
"";
|
||||
export let tabindex: ComponentProps<ExpandableTile>["tabindex"] = "0";
|
||||
export let id: ComponentProps<ExpandableTile>["id"] = "ccs-test";
|
||||
export let ref: ComponentProps<ExpandableTile>["ref"] = null;
|
||||
</script>
|
||||
|
||||
<ExpandableTile
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { ExpandableTile, Button } from "carbon-components-svelte";
|
||||
import { ExpandableTile, Button } from "carbon-components-svelte";
|
||||
|
||||
export let buttonClicked = false;
|
||||
export let linkClicked = false;
|
||||
export let buttonClicked = false;
|
||||
export let linkClicked = false;
|
||||
</script>
|
||||
|
||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
FileUploaderButton,
|
||||
FileUploader,
|
||||
FileUploaderDropContainer,
|
||||
FileUploaderItem,
|
||||
FileUploaderSkeleton,
|
||||
} from "carbon-components-svelte";
|
||||
import type { FileUploaderProps } from "carbon-components-svelte/FileUploader/FileUploader.svelte";
|
||||
import {
|
||||
FileUploaderButton,
|
||||
FileUploader,
|
||||
FileUploaderDropContainer,
|
||||
FileUploaderItem,
|
||||
FileUploaderSkeleton,
|
||||
} from "carbon-components-svelte";
|
||||
import type { FileUploaderProps } from "carbon-components-svelte/FileUploader/FileUploader.svelte";
|
||||
|
||||
let fileUploader: FileUploader;
|
||||
let files: FileUploaderProps["files"] = [];
|
||||
let fileUploader: FileUploader;
|
||||
let files: FileUploaderProps["files"] = [];
|
||||
|
||||
$: {
|
||||
// @ts-expect-error
|
||||
files[0] = null;
|
||||
}
|
||||
$: {
|
||||
// @ts-expect-error
|
||||
files[0] = null;
|
||||
}
|
||||
|
||||
$: fileUploader?.clearFiles();
|
||||
$: fileUploader?.clearFiles();
|
||||
</script>
|
||||
|
||||
<FileUploaderButton
|
||||
|
|
|
@ -1,9 +1,5 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
FluidForm,
|
||||
TextInput,
|
||||
PasswordInput,
|
||||
} from "carbon-components-svelte";
|
||||
import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<FluidForm action="" method="get">
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Form,
|
||||
FormGroup,
|
||||
Checkbox,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
Select,
|
||||
SelectItem,
|
||||
Button,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
Form,
|
||||
FormGroup,
|
||||
Checkbox,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
Select,
|
||||
SelectItem,
|
||||
Button,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let ref: HTMLFormElement;
|
||||
let ref: HTMLFormElement;
|
||||
</script>
|
||||
|
||||
<Form on:submit bind:ref>
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { Grid } from "carbon-components-svelte";
|
||||
import { Grid } from "carbon-components-svelte";
|
||||
|
||||
export let condensed = false;
|
||||
export let narrow = false;
|
||||
export let fullWidth = false;
|
||||
export let noGutter = false;
|
||||
export let noGutterLeft = false;
|
||||
export let noGutterRight = false;
|
||||
export let padding = false;
|
||||
export let as = false;
|
||||
export let condensed = false;
|
||||
export let narrow = false;
|
||||
export let fullWidth = false;
|
||||
export let noGutter = false;
|
||||
export let noGutterLeft = false;
|
||||
export let noGutterRight = false;
|
||||
export let padding = false;
|
||||
export let as = false;
|
||||
</script>
|
||||
|
||||
{#if as}
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isSideNavOpen = false;
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
|
@ -1,58 +1,58 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderSearch,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderSearch,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
|
||||
let ref: ComponentProps<HeaderSearch>["ref"] = null;
|
||||
let active = false;
|
||||
let value = "";
|
||||
let selectedResultIndex = 1;
|
||||
let ref: ComponentProps<HeaderSearch>["ref"] = null;
|
||||
let active = false;
|
||||
let value = "";
|
||||
let selectedResultIndex = 1;
|
||||
|
||||
$: results =
|
||||
value.length > 2
|
||||
? [
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 1",
|
||||
description: "Result description",
|
||||
},
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 2",
|
||||
description: "Result description",
|
||||
},
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 3",
|
||||
description: "Result description",
|
||||
},
|
||||
]
|
||||
: [];
|
||||
$: results =
|
||||
value.length > 2
|
||||
? [
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 1",
|
||||
description: "Result description",
|
||||
},
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 2",
|
||||
description: "Result description",
|
||||
},
|
||||
{
|
||||
href: "/",
|
||||
text: "Result 3",
|
||||
description: "Result description",
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
$: console.log("ref", ref);
|
||||
$: console.log("active", active);
|
||||
$: console.log("value", value);
|
||||
$: console.log("selectedResultIndex", selectedResultIndex);
|
||||
$: console.log("ref", ref);
|
||||
$: console.log("active", active);
|
||||
$: console.log("value", value);
|
||||
$: console.log("selectedResultIndex", selectedResultIndex);
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
|
@ -1,28 +1,28 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderGlobalAction,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import {
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderAction,
|
||||
HeaderGlobalAction,
|
||||
HeaderPanelLinks,
|
||||
HeaderPanelDivider,
|
||||
HeaderPanelLink,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
|
||||
import { quintOut } from "svelte/easing";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = false;
|
||||
let isOpen = false;
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
|
||||
let toggled = false;
|
||||
let toggled = false;
|
||||
|
||||
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
|
||||
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
{#if toggled}
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import { ImageLoader, InlineLoading } from "carbon-components-svelte";
|
||||
import { ImageLoader, InlineLoading } from "carbon-components-svelte";
|
||||
|
||||
// Valid image URL for testing successful loads
|
||||
const validImageSrc =
|
||||
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
|
||||
// Invalid image URL for testing error states
|
||||
const invalidImageSrc = "https://invalid-url/nonexistent.png";
|
||||
// Valid image URL for testing successful loads
|
||||
const validImageSrc =
|
||||
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
|
||||
// Invalid image URL for testing error states
|
||||
const invalidImageSrc = "https://invalid-url/nonexistent.png";
|
||||
|
||||
export let imageLoader: ImageLoader;
|
||||
export let imageLoader: ImageLoader;
|
||||
</script>
|
||||
|
||||
<!-- Default image loader -->
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { InlineLoading } from "carbon-components-svelte";
|
||||
import { InlineLoading } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<!-- Default inline loading -->
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { InlineNotification } from "carbon-components-svelte";
|
||||
import { InlineNotification } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { InlineNotification } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { InlineNotification } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let kind: ComponentProps<InlineNotification>["kind"] = "error";
|
||||
export let lowContrast = false;
|
||||
export let timeout = 0;
|
||||
export let role = "alert";
|
||||
export let title = "Error:";
|
||||
export let subtitle = "An internal server error occurred.";
|
||||
export let hideCloseButton = false;
|
||||
export let statusIconDescription = "";
|
||||
export let closeButtonDescription = "";
|
||||
export let kind: ComponentProps<InlineNotification>["kind"] = "error";
|
||||
export let lowContrast = false;
|
||||
export let timeout = 0;
|
||||
export let role = "alert";
|
||||
export let title = "Error:";
|
||||
export let subtitle = "An internal server error occurred.";
|
||||
export let hideCloseButton = false;
|
||||
export let statusIconDescription = "";
|
||||
export let closeButtonDescription = "";
|
||||
</script>
|
||||
|
||||
<InlineNotification
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
InlineNotification,
|
||||
NotificationActionButton,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
InlineNotification,
|
||||
NotificationActionButton,
|
||||
} from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification kind="warning">
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import { Link } from "carbon-components-svelte";
|
||||
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
|
||||
import { Link } from "carbon-components-svelte";
|
||||
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
|
||||
</script>
|
||||
|
||||
<!-- Default link -->
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Loading } from "carbon-components-svelte";
|
||||
import { Loading } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<!-- Default loading (with overlay) -->
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
|
||||
// Example values for testing
|
||||
const primitiveValue = "test-value";
|
||||
const objectValue = { theme: "dark", fontSize: 16 };
|
||||
// Example values for testing
|
||||
const primitiveValue = "test-value";
|
||||
const objectValue = { theme: "dark", fontSize: 16 };
|
||||
</script>
|
||||
|
||||
<!-- Default local storage -->
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
|
||||
const objectValue = { theme: "dark", fontSize: 16 };
|
||||
const objectValue = { theme: "dark", fontSize: 16 };
|
||||
</script>
|
||||
|
||||
<div data-testid="object-storage">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
import { LocalStorage } from "carbon-components-svelte";
|
||||
|
||||
const primitiveValue = "test-value";
|
||||
const primitiveValue = "test-value";
|
||||
</script>
|
||||
|
||||
<div data-testid="primitive-storage">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { MultiSelect } from "carbon-components-svelte";
|
||||
import type { MultiSelectProps } from "carbon-components-svelte/MultiSelect/MultiSelect.svelte";
|
||||
import { MultiSelect } from "carbon-components-svelte";
|
||||
import type { MultiSelectProps } from "carbon-components-svelte/MultiSelect/MultiSelect.svelte";
|
||||
|
||||
let selectedIds: MultiSelectProps["selectedIds"] = [0];
|
||||
let selectedIds: MultiSelectProps["selectedIds"] = [0];
|
||||
|
||||
$: {
|
||||
// @ts-expect-error
|
||||
selectedIds[0] = [0];
|
||||
}
|
||||
$: {
|
||||
// @ts-expect-error
|
||||
selectedIds[0] = [0];
|
||||
}
|
||||
</script>
|
||||
|
||||
<MultiSelect
|
||||
|
|
|
@ -1,28 +1,28 @@
|
|||
<script lang="ts">
|
||||
import { NumberInput } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { NumberInput } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let value: ComponentProps<NumberInput>["value"] = 0;
|
||||
export let step: ComponentProps<NumberInput>["step"] = 1;
|
||||
export let min: ComponentProps<NumberInput>["min"] = undefined;
|
||||
export let max: ComponentProps<NumberInput>["max"] = undefined;
|
||||
export let size: ComponentProps<NumberInput>["size"] = undefined;
|
||||
export let light = false;
|
||||
export let readonly = false;
|
||||
export let allowEmpty = false;
|
||||
export let disabled = false;
|
||||
export let hideSteppers = false;
|
||||
export let iconDescription = "";
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let warn = false;
|
||||
export let warnText = "";
|
||||
export let helperText = "";
|
||||
export let label = "Clusters";
|
||||
export let hideLabel = false;
|
||||
export let id = "ccs-test";
|
||||
export let name: ComponentProps<NumberInput>["name"] = undefined;
|
||||
export let ref: ComponentProps<NumberInput>["ref"] = null;
|
||||
export let value: ComponentProps<NumberInput>["value"] = 0;
|
||||
export let step: ComponentProps<NumberInput>["step"] = 1;
|
||||
export let min: ComponentProps<NumberInput>["min"] = undefined;
|
||||
export let max: ComponentProps<NumberInput>["max"] = undefined;
|
||||
export let size: ComponentProps<NumberInput>["size"] = undefined;
|
||||
export let light = false;
|
||||
export let readonly = false;
|
||||
export let allowEmpty = false;
|
||||
export let disabled = false;
|
||||
export let hideSteppers = false;
|
||||
export let iconDescription = "";
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let warn = false;
|
||||
export let warnText = "";
|
||||
export let helperText = "";
|
||||
export let label = "Clusters";
|
||||
export let hideLabel = false;
|
||||
export let id = "ccs-test";
|
||||
export let name: ComponentProps<NumberInput>["name"] = undefined;
|
||||
export let ref: ComponentProps<NumberInput>["ref"] = null;
|
||||
</script>
|
||||
|
||||
<NumberInput
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { NumberInput } from "carbon-components-svelte";
|
||||
import { NumberInput } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<NumberInput label="Custom label" value={0}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid>
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import { OrderedList, ListItem } from "carbon-components-svelte";
|
||||
import { OrderedList, ListItem } from "carbon-components-svelte";
|
||||
|
||||
export let nested = false;
|
||||
export let native = false;
|
||||
export let expressive = false;
|
||||
export let items: string[] = ["Item 1", "Item 2", "Item 3"];
|
||||
export let nestedItems: string[] = [];
|
||||
export let nested = false;
|
||||
export let native = false;
|
||||
export let expressive = false;
|
||||
export let items: string[] = ["Item 1", "Item 2", "Item 3"];
|
||||
export let nestedItems: string[] = [];
|
||||
</script>
|
||||
|
||||
<div data-testid="list-wrapper">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
||||
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<OverflowMenu
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid padding>
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { Pagination } from "carbon-components-svelte";
|
||||
import { Pagination } from "carbon-components-svelte";
|
||||
|
||||
export let page = 1;
|
||||
export let totalItems = 0;
|
||||
export let disabled = false;
|
||||
export let forwardText = "Next page";
|
||||
export let backwardText = "Previous page";
|
||||
export let itemsPerPageText = "Items per page:";
|
||||
export let pageInputDisabled = false;
|
||||
export let pageSizeInputDisabled = false;
|
||||
export let pageSize = 10;
|
||||
export let pageSizes: ReadonlyArray<number> = [10];
|
||||
export let pagesUnknown = false;
|
||||
export let page = 1;
|
||||
export let totalItems = 0;
|
||||
export let disabled = false;
|
||||
export let forwardText = "Next page";
|
||||
export let backwardText = "Previous page";
|
||||
export let itemsPerPageText = "Items per page:";
|
||||
export let pageInputDisabled = false;
|
||||
export let pageSizeInputDisabled = false;
|
||||
export let pageSize = 10;
|
||||
export let pageSizes: ReadonlyArray<number> = [10];
|
||||
export let pagesUnknown = false;
|
||||
</script>
|
||||
|
||||
<Pagination
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
<script lang="ts">
|
||||
import { PaginationNav } from "carbon-components-svelte";
|
||||
import { PaginationNav } from "carbon-components-svelte";
|
||||
|
||||
export let page = 1;
|
||||
export let total = 10;
|
||||
export let shown = 10;
|
||||
export let loop = false;
|
||||
export let forwardText = "Next page";
|
||||
export let backwardText = "Previous page";
|
||||
export let tooltipPosition:
|
||||
| "top"
|
||||
| "right"
|
||||
| "bottom"
|
||||
| "left"
|
||||
| "outside"
|
||||
| "inside" = "bottom";
|
||||
export let page = 1;
|
||||
export let total = 10;
|
||||
export let shown = 10;
|
||||
export let loop = false;
|
||||
export let forwardText = "Next page";
|
||||
export let backwardText = "Previous page";
|
||||
export let tooltipPosition:
|
||||
| "top"
|
||||
| "right"
|
||||
| "bottom"
|
||||
| "left"
|
||||
| "outside"
|
||||
| "inside" = "bottom";
|
||||
</script>
|
||||
|
||||
<PaginationNav
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
|
||||
|
|
|
@ -1,27 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { PasswordInput } from "carbon-components-svelte";
|
||||
import { PasswordInput } from "carbon-components-svelte";
|
||||
|
||||
export let size: "sm" | "xl" | undefined = undefined;
|
||||
export let value: string | number = "";
|
||||
export let type: "text" | "password" = "password";
|
||||
export let placeholder = "";
|
||||
export let hidePasswordLabel = "Hide password";
|
||||
export let showPasswordLabel = "Show password";
|
||||
export let tooltipAlignment: "start" | "center" | "end" = "center";
|
||||
export let tooltipPosition: "top" | "right" | "bottom" | "left" = "bottom";
|
||||
export let light = false;
|
||||
export let disabled = false;
|
||||
export let helperText = "";
|
||||
export let labelText = "";
|
||||
export let hideLabel = false;
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let warn = false;
|
||||
export let warnText = "";
|
||||
export let inline = false;
|
||||
export let id = "test-password-input";
|
||||
export let name = "";
|
||||
export let ref: HTMLInputElement | null = null;
|
||||
export let size: "sm" | "xl" | undefined = undefined;
|
||||
export let value: string | number = "";
|
||||
export let type: "text" | "password" = "password";
|
||||
export let placeholder = "";
|
||||
export let hidePasswordLabel = "Hide password";
|
||||
export let showPasswordLabel = "Show password";
|
||||
export let tooltipAlignment: "start" | "center" | "end" = "center";
|
||||
export let tooltipPosition: "top" | "right" | "bottom" | "left" = "bottom";
|
||||
export let light = false;
|
||||
export let disabled = false;
|
||||
export let helperText = "";
|
||||
export let labelText = "";
|
||||
export let hideLabel = false;
|
||||
export let invalid = false;
|
||||
export let invalidText = "";
|
||||
export let warn = false;
|
||||
export let warnText = "";
|
||||
export let inline = false;
|
||||
export let id = "test-password-input";
|
||||
export let name = "";
|
||||
export let ref: HTMLInputElement | null = null;
|
||||
</script>
|
||||
|
||||
<PasswordInput
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import {
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
let isSideNavOpen = false;
|
||||
</script>
|
||||
|
||||
<Header
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { Popover } from "carbon-components-svelte";
|
||||
import { Popover } from "carbon-components-svelte";
|
||||
|
||||
export let open = false;
|
||||
export let align:
|
||||
| "top"
|
||||
| "top-left"
|
||||
| "top-right"
|
||||
| "bottom"
|
||||
| "bottom-left"
|
||||
| "bottom-right"
|
||||
| "left"
|
||||
| "left-bottom"
|
||||
| "left-top"
|
||||
| "right"
|
||||
| "right-bottom"
|
||||
| "right-top" = "top";
|
||||
export let caret = false;
|
||||
export let light = false;
|
||||
export let highContrast = false;
|
||||
export let relative = false;
|
||||
export let closeOnOutsideClick = false;
|
||||
export let open = false;
|
||||
export let align:
|
||||
| "top"
|
||||
| "top-left"
|
||||
| "top-right"
|
||||
| "bottom"
|
||||
| "bottom-left"
|
||||
| "bottom-right"
|
||||
| "left"
|
||||
| "left-bottom"
|
||||
| "left-top"
|
||||
| "right"
|
||||
| "right-bottom"
|
||||
| "right-top" = "top";
|
||||
export let caret = false;
|
||||
export let light = false;
|
||||
export let highContrast = false;
|
||||
export let relative = false;
|
||||
export let closeOnOutsideClick = false;
|
||||
</script>
|
||||
|
||||
<div data-testid="parent">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { ProgressBar } from "carbon-components-svelte";
|
||||
import { ProgressBar } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<ProgressBar status="active" data-testid="indeterminate-progress" />
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
|
||||
import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
|
||||
|
||||
export let currentIndex = 0;
|
||||
export let vertical = false;
|
||||
export let spaceEqually = false;
|
||||
export let preventChangeOnClick = false;
|
||||
export let steps: Array<{
|
||||
label: string;
|
||||
description: string;
|
||||
complete: boolean;
|
||||
invalid?: boolean;
|
||||
disabled?: boolean;
|
||||
}> = [];
|
||||
export let currentIndex = 0;
|
||||
export let vertical = false;
|
||||
export let spaceEqually = false;
|
||||
export let preventChangeOnClick = false;
|
||||
export let steps: Array<{
|
||||
label: string;
|
||||
description: string;
|
||||
complete: boolean;
|
||||
invalid?: boolean;
|
||||
disabled?: boolean;
|
||||
}> = [];
|
||||
</script>
|
||||
|
||||
<ProgressIndicator
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
<script lang="ts">
|
||||
import { RadioButton } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { RadioButton } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let value: ComponentProps<RadioButton>["value"] = "";
|
||||
export let checked: ComponentProps<RadioButton>["checked"] = false;
|
||||
export let disabled: ComponentProps<RadioButton>["disabled"] = false;
|
||||
export let required: ComponentProps<RadioButton>["required"] = false;
|
||||
export let labelPosition: ComponentProps<RadioButton>["labelPosition"] =
|
||||
"right";
|
||||
export let labelText: ComponentProps<RadioButton>["labelText"] = "Option 1";
|
||||
export let hideLabel: ComponentProps<RadioButton>["hideLabel"] = false;
|
||||
export let id: ComponentProps<RadioButton>["id"] = "ccs-test";
|
||||
export let name: ComponentProps<RadioButton>["name"] = "test-group";
|
||||
export let ref: ComponentProps<RadioButton>["ref"] = null;
|
||||
export let value: ComponentProps<RadioButton>["value"] = "";
|
||||
export let checked: ComponentProps<RadioButton>["checked"] = false;
|
||||
export let disabled: ComponentProps<RadioButton>["disabled"] = false;
|
||||
export let required: ComponentProps<RadioButton>["required"] = false;
|
||||
export let labelPosition: ComponentProps<RadioButton>["labelPosition"] =
|
||||
"right";
|
||||
export let labelText: ComponentProps<RadioButton>["labelText"] = "Option 1";
|
||||
export let hideLabel: ComponentProps<RadioButton>["hideLabel"] = false;
|
||||
export let id: ComponentProps<RadioButton>["id"] = "ccs-test";
|
||||
export let name: ComponentProps<RadioButton>["name"] = "test-group";
|
||||
export let ref: ComponentProps<RadioButton>["ref"] = null;
|
||||
</script>
|
||||
|
||||
<RadioButton
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { RadioButton } from "carbon-components-svelte";
|
||||
import { RadioButton } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<RadioButton labelText="Custom label" value="custom" name="test-group">
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
import { DataTable } from "carbon-components-svelte";
|
||||
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
const headers = [
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
] as const;
|
||||
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
const rows = [
|
||||
{ id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
|
||||
{ id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
|
||||
{ id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
|
||||
{ id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
|
||||
{ id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
|
||||
{ id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
|
||||
];
|
||||
|
||||
let selectedRowIds = [rows[1].id];
|
||||
let selectedRowIds = [rows[1].id];
|
||||
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
</script>
|
||||
|
||||
<DataTable radio bind:selectedRowIds {headers} {rows} />
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { TileGroup, RadioTile, Button } from "carbon-components-svelte";
|
||||
import { TileGroup, RadioTile, Button } from "carbon-components-svelte";
|
||||
|
||||
const values = ["Lite plan", "Standard plan", "Plus plan"];
|
||||
const values = ["Lite plan", "Standard plan", "Plus plan"];
|
||||
|
||||
let selected = values[1];
|
||||
let selected = values[1];
|
||||
</script>
|
||||
|
||||
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { RadioTile } from "carbon-components-svelte";
|
||||
import { RadioTile } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<RadioTile name="custom-name" value="test">
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import { RadioTile, TileGroup } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
import { RadioTile, TileGroup } from "carbon-components-svelte";
|
||||
import type { ComponentProps } from "svelte";
|
||||
|
||||
export let checked: ComponentProps<RadioTile>["checked"] = false;
|
||||
export let light: ComponentProps<RadioTile>["light"] = false;
|
||||
export let disabled: ComponentProps<RadioTile>["disabled"] = false;
|
||||
export let required: ComponentProps<RadioTile>["required"] = false;
|
||||
export let value: ComponentProps<RadioTile>["value"] = "test";
|
||||
export let tabindex: ComponentProps<RadioTile>["tabindex"] = "0";
|
||||
export let iconDescription: ComponentProps<RadioTile>["iconDescription"] =
|
||||
"Tile checkmark";
|
||||
export let id: ComponentProps<RadioTile>["id"] = "ccs-test";
|
||||
export let name: ComponentProps<RadioTile>["name"] = "test-group";
|
||||
export let checked: ComponentProps<RadioTile>["checked"] = false;
|
||||
export let light: ComponentProps<RadioTile>["light"] = false;
|
||||
export let disabled: ComponentProps<RadioTile>["disabled"] = false;
|
||||
export let required: ComponentProps<RadioTile>["required"] = false;
|
||||
export let value: ComponentProps<RadioTile>["value"] = "test";
|
||||
export let tabindex: ComponentProps<RadioTile>["tabindex"] = "0";
|
||||
export let iconDescription: ComponentProps<RadioTile>["iconDescription"] =
|
||||
"Tile checkmark";
|
||||
export let id: ComponentProps<RadioTile>["id"] = "ccs-test";
|
||||
export let name: ComponentProps<RadioTile>["name"] = "test-group";
|
||||
</script>
|
||||
|
||||
<TileGroup
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { RadioTile, TileGroup } from "carbon-components-svelte";
|
||||
import { RadioTile, TileGroup } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<TileGroup legend="Test group" name="test-group" selected="test">
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
import toHierarchy from "../../src/utils/toHierarchy";
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
import toHierarchy from "../../src/utils/toHierarchy";
|
||||
|
||||
let nodes = toHierarchy(
|
||||
[
|
||||
{ id: 1, text: "Item 1" },
|
||||
{ id: 2, text: "Item 1a", pid: 1 },
|
||||
{ id: 3, html: "<h5>HTML content</h5>", pid: 2 },
|
||||
{ id: 4, text: "Item 2" },
|
||||
{ id: 5, href: "https://svelte.dev/", pid: 4 },
|
||||
{
|
||||
id: 6,
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
pid: 4,
|
||||
},
|
||||
{ id: 7, text: "Item 3" },
|
||||
],
|
||||
(node) => node.pid,
|
||||
);
|
||||
let nodes = toHierarchy(
|
||||
[
|
||||
{ id: 1, text: "Item 1" },
|
||||
{ id: 2, text: "Item 1a", pid: 1 },
|
||||
{ id: 3, html: "<h5>HTML content</h5>", pid: 2 },
|
||||
{ id: 4, text: "Item 2" },
|
||||
{ id: 5, href: "https://svelte.dev/", pid: 4 },
|
||||
{
|
||||
id: 6,
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
pid: 4,
|
||||
},
|
||||
{ id: 7, text: "Item 3" },
|
||||
],
|
||||
(node) => node.pid,
|
||||
);
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered" {nodes} />
|
||||
|
|
|
@ -1,28 +1,28 @@
|
|||
<script lang="ts">
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
import { RecursiveList } from "carbon-components-svelte";
|
||||
|
||||
const nodes = [
|
||||
{
|
||||
text: "Item 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Item 1a",
|
||||
nodes: [{ html: "<h5>HTML content</h5>" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 2",
|
||||
nodes: [
|
||||
{ href: "https://svelte.dev/" },
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ text: "Item 3" },
|
||||
];
|
||||
const nodes = [
|
||||
{
|
||||
text: "Item 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Item 1a",
|
||||
nodes: [{ html: "<h5>HTML content</h5>" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Item 2",
|
||||
nodes: [
|
||||
{ href: "https://svelte.dev/" },
|
||||
{
|
||||
href: "https://svelte.dev/",
|
||||
text: "Link with custom text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ text: "Item 3" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered" {nodes} />
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue