Run npm run lint

This commit is contained in:
Eric Liu 2025-03-23 11:26:25 -07:00
commit 2031cb7585
480 changed files with 8985 additions and 9048 deletions

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Accordion, AccordionItem } from "carbon-components-svelte";
import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>
<Accordion disabled>

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Accordion } from "carbon-components-svelte";
import { Accordion } from "carbon-components-svelte";
</script>
<Accordion skeleton />

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Accordion, AccordionItem } from "carbon-components-svelte";
import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>
<Accordion>

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { AspectRatio } from "carbon-components-svelte";
import { AspectRatio } from "carbon-components-svelte";
</script>
<AspectRatio>2x1</AspectRatio>

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
</script>
<Breadcrumb noTrailingSlash>

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Breadcrumb } from "carbon-components-svelte";
import { Breadcrumb } from "carbon-components-svelte";
</script>
<Breadcrumb skeleton count={3} />

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
</script>
<Breadcrumb>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CodeSnippet } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import { ContentSwitcher, Switch } from "carbon-components-svelte";
</script>
<ContentSwitcher>

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import { ContentSwitcher, Switch } from "carbon-components-svelte";
</script>
<ContentSwitcher>

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { ContentSwitcher, Switch } from "carbon-components-svelte";
import { ContentSwitcher, Switch } from "carbon-components-svelte";
</script>
<ContentSwitcher>

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { CopyButton } from "carbon-components-svelte";
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { DataTable } from "../types";
import { DataTable } from "../types";
</script>
<DataTable

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { InlineLoading } from "carbon-components-svelte";
import { InlineLoading } from "carbon-components-svelte";
</script>
<!-- Default inline loading -->

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { InlineNotification } from "carbon-components-svelte";
import { InlineNotification } from "carbon-components-svelte";
</script>
<InlineNotification

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Loading } from "carbon-components-svelte";
import { Loading } from "carbon-components-svelte";
</script>
<!-- Default loading (with overlay) -->

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Modal } from "carbon-components-svelte";
import { Modal } from "carbon-components-svelte";
</script>
<Modal

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Modal } from "carbon-components-svelte";
import { Modal } from "carbon-components-svelte";
</script>
<Modal

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Modal } from "carbon-components-svelte";
import { Modal } from "carbon-components-svelte";
</script>
<Modal

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Modal } from "carbon-components-svelte";
import { Modal } from "carbon-components-svelte";
</script>
<Modal

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
</script>
<OverflowMenu

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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