mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #220 from IBM/chore

Browse source 
Add JSDoc type annotations to component props
This commit is contained in:
Eric Liu 2020-07-26 18:24:58 -07:00 • committed by GitHub
commit 4b8373effa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
132 changed files with 3752 additions and 392 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/Accordion/Accordion.Skeleton.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Specify the number of accordion items to render
* @type {number} [count=4]
*/
export let count = 4;
/**
* Set to `false` to close the first accordion item
* @type {boolean} [open=true]
*/
export let open = true;
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";

11
src/Accordion/Accordion.svelte
View file

@ -1,5 +1,14 @@
<script>
export let align = "end"; // "start" | "end"
/**
* Specify alignment of accordion item chevron icon
* @type {"start" | "end"} [align="end"]
*/
export let align = "end";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
import AccordionSkeleton from "./Accordion.Skeleton.svelte";

15
src/Accordion/AccordionItem.svelte
View file

@ -1,6 +1,21 @@
<script>
/**
* Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
* @type {string} [title="title"]
*/
export let title = "title";
/**
* Set to `true` to open the first accordion item
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Specify the ARIA label for the accordion item chevron icon
* @type {string} [iconDescription="Expand/Collapse"]
*/
export let iconDescription = "Expand/Collapse";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";

17
src/Breadcrumb/Breadcrumb.Skeleton.svelte
View file

@ -1,12 +1,27 @@
<script>
/**
* Set to `true` to hide the breadcrumb trailing slash
* @type {boolean} [noTrailingSlash=false]
*/
export let noTrailingSlash = false;
/**
* Specify the number of breadcrumb items to render
* @type {number} [count=3]
*/
export let count = 3;
</script>
<div
class:bx--breadcrumb={true}
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
class:bx--skeleton={true}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#each [0, 1, 2] as item, i (item)}
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
<div class:bx--breadcrumb-item={true}>
<span class:bx--link={true}>&nbsp;</span>
</div>

2
src/Breadcrumb/Breadcrumb.Story.svelte
View file

@ -24,7 +24,7 @@
<BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
{:else if story === 'skeleton'}
<BreadcrumbSkeleton />
<BreadcrumbSkeleton {noTrailingSlash} {...$$restProps} />
{:else}
<Breadcrumb {noTrailingSlash}>
<BreadcrumbItem let:props>

8
src/Breadcrumb/Breadcrumb.stories.js
View file

@ -1,4 +1,4 @@
import { withKnobs, boolean } from "@storybook/addon-knobs";
import { withKnobs, boolean, number } from "@storybook/addon-knobs";
import Component from "./Breadcrumb.Story.svelte";
export default { title: "Breadcrumb", decorators: [withKnobs] };
@ -12,7 +12,11 @@ export const Default = () => ({
export const Skeleton = () => ({
Component,
props: { story: "skeleton" },
props: {
story: "skeleton",
noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
count: number("Number of breadcrumb items (count)", 3),
},
});
export const CurrentPage = () => ({

9
src/Breadcrumb/Breadcrumb.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` to hide the breadcrumb trailing slash
* @type {boolean} [noTrailingSlash=false]
*/
export let noTrailingSlash = false;
/**
* Set to `true` to display skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";

9
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set the `href` to use an anchor link
* @type {string} [href]
*/
export let href = undefined;
/**
* Set to `true` if the breadcrumb item represents the current page
* @type {boolean} [isCurrentPage=false]
*/
export let isCurrentPage = false;
import { Link } from "../Link";

9
src/Button/Button.Skeleton.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set the `href` to use an anchor link
* @type {string} [href]
*/
export let href = undefined;
/**
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
export let small = false;
</script>

1
src/Button/Button.stories.js
View file

@ -6,6 +6,7 @@ export default { title: "Button", decorators: [withKnobs] };
const kinds = {
"Primary button (primary)": "primary",
"Secondary button (secondary)": "secondary",
"Tertiary button (tertiary)": "tertiary",
"Danger button (danger)": "danger",
"Ghost button (ghost)": "ghost",
};

87
src/Button/Button.svelte
View file

@ -1,17 +1,88 @@
<script>
export let as = undefined;
export let skeleton = false;
export let disabled = false;
export let href = undefined;
export let icon = undefined;
export let iconDescription = undefined;
export let hasIconOnly = false;
/**
* Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
*/
export let kind = "primary";
/**
* Specify the size of button
* @type {"default" | "field" | "small"} [size="default"]
*/
export let size = "default";
export let tabindex = "0";
/**
* Set to `true` for the icon-only variant
* @type {boolean} [hasIconOnly=false]
*/
export let hasIconOnly = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
*/
export let icon = undefined;
/**
* Specify the ARIA label for the button icon
* @type {string} [iconDescription]
*/
export let iconDescription = undefined;
/**
* Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true`
* @type {"start" | "center" | "end"} [tooltipAlignment]
*/
export let tooltipAlignment = undefined;
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
*/
export let tooltipPosition = undefined;
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
* @type {boolean} [as=false]
*/
export let as = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Set to `true` to disable the button
* @type [boolean] [disabled=false]
*/
export let disabled = false;
/**
* Set the `href` to use an anchor link
* @type {string} [href]
*/
export let href = undefined;
/**
* Specify the tabindex
* @type {string} [tabindex="0"]
*/
export let tabindex = "0";
/**
* Specify the `type` attribute for the button element
* @type {string} [type="button"]
*/
export let type = "button";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { getContext } from "svelte";

64
src/Checkbox/Checkbox.svelte
View file

@ -1,14 +1,68 @@
<script>
export let skeleton = false;
export let indeterminate = false;
export let readonly = false;
/**
* Specify whether the checkbox is checked
* @type {boolean} [checked=false]
*/
export let checked = false;
/**
* Specify whether the checkbox is indeterminate
* @type {boolean} [indeterminate=false]
*/
export let indeterminate = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Set to `true` for the checkbox to be read-only
* @type {boolean} [readonly=false]
*/
export let readonly = false;
/**
* Set to `true` to disable the checkbox
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
export let id = "ccs-" + Math.random().toString(36);
/**
* Set a name for the input element
* @type {string} [name=""]
*/
export let name = "";
/**
* Specify the title attribute for the label element
* @type {string} [title]
*/
export let title = undefined;
/**
* Set an id for the input label
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher } from "svelte";
@ -49,7 +103,7 @@
on:change={() => {
checked = !checked;
}} />
<label class:bx--checkbox-label={true} for={id} {title}>
<label for={id} {title} class:bx--checkbox-label={true}>
<span
class:bx--checkbox-label-text={true}
class:bx--visually-hidden={hideLabel}>

6
src/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -1,5 +1,9 @@
<script>
export let type = "single"; // "single" | "multi"
/**
* Set the type of code snippet
* @type {"single" | "inline" | "multi"} [type="single"]
*/
export let type = "single";
</script>
<div

76
src/CodeSnippet/CodeSnippet.svelte
View file

@ -1,17 +1,89 @@
<script>
export let type = "single"; // "single" | "inline" | "multi"
/**
* Set the type of code snippet
* @type {"single" | "inline" | "multi"} [type="single"]
*/
export let type = "single";
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
* @type {string} [code]
*/
export let code = undefined;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @type {boolean} [expanded=false]
*/
export let expanded = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Specify the ARIA label for the copy button icon
* @type {string} [copyButtonDescription]
*/
export let copyButtonDescription = undefined;
/**
* Specify the ARIA label of the copy button
* @type {string} [copyLabel]
*/
export let copyLabel = undefined;
/**
* Specify the feedback text displayed when clicking the snippet
* @type {string} [feedback="Copied!"]
*/
export let feedback = "Copied!";
/**
* Set the timeout duration (ms) to display feedback text
* @type {number} [feedbackTimeout=2000]
*/
export let feedbackTimeout = 2000;
/**
* Specify the show less text
* `type` must be "multi"
* @type {string} [showLessText="Show less"]
*/
export let showLessText = "Show less";
/**
* Specify the show more text
* `type` must be "multi"
* @type {string} [showLessText="Show more"]
*/
export let showMoreText = "Show more";
/**
* Set to `true` to enable the show more/less button
* @type {boolean} [showMoreLess=false]
*/
export let showMoreLess = false;
/**
* Set an id for the code element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the pre HTML element
* @type {null | HTMLPreElement} [ref=null]
*/
export let ref = null;
import { afterUpdate } from "svelte";
@ -48,7 +120,7 @@
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}"
{...$$restProps}
on:clicks
on:click
on:mouseover
on:mouseenter
on:mouseleave>

125
src/ComboBox/ComboBox.svelte
View file

@ -1,21 +1,114 @@
<script>
export let disabled = false;
export let helperText = "";
export let id = "ccs-" + Math.random().toString(36);
export let invalid = false;
export let invalidText = "";
/**
* @typedef {{ id: string; text: string; }} ComboBoxItem
*/
/**
* Set the combobox items
* @type {ComboBoxItem[]} [items=[]]
*/
export let items = [];
export let itemToString = item => item.text || item.id;
export let light = false;
export let open = false;
export let placeholder = "";
/**
* Override the display of a combobox item
* @type {(item: ComboBoxItem) => string;} [itemToString = (item: ComboBoxItem) => string;]
*/
export let itemToString = (item) => item.text || item.id;
/**
* Set the selected item by value index
* @type {number} [selectedIndex=-1]
*/
export let selectedIndex = -1;
export let shouldFilterItem = () => true;
export let size = undefined;
export let titleText = "";
export let translateWithId = undefined;
/**
* Specify the selected combobox value
* @type {string} [value=""]
*/
export let value = "";
/**
* Set the size of the combobox
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Set to `true` to disable the combobox
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the title text of the combobox
* @type {string} [titleText=""]
*/
export let titleText = "";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to open the combobox menu dropdown
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Determine if an item should be filtered given the current combobox value
* @type {(item: ComboBoxItem, value: string) => boolean} [shouldFilterItem=() => true]
*/
export let shouldFilterItem = () => true;
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
*/
export let translateWithId = undefined;
/**
* Set an id for the list box component
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { afterUpdate } from "svelte";
@ -26,7 +119,7 @@
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection
ListBoxSelection,
} from "../ListBox";
let selectedId = undefined;
@ -48,7 +141,7 @@
afterUpdate(() => {
if (open) {
ref.focus();
filteredItems = items.filter(item => shouldFilterItem(item, value));
filteredItems = items.filter((item) => shouldFilterItem(item, value));
} else {
highlightedIndex = -1;
inputValue = selectedItem ? selectedItem.text : "";
@ -61,7 +154,7 @@
$: highlightedId = items[highlightedIndex]
? items[highlightedIndex].id
: undefined;
$: filteredItems = items.filter(item => shouldFilterItem(item, value));
$: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: selectedItem = items[selectedIndex];
$: inputValue = selectedItem ? selectedItem.text : undefined;
$: value = inputValue;

37
src/ComposedModal/ComposedModal.svelte
View file

@ -1,9 +1,38 @@
<script>
/**
* Set the size of the composed modal
* @type {"xs" | "sm" | "lg"} [size]
*/
export let size = undefined;
/**
* Set to `true` to open the modal
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
export let danger = false;
export let size = undefined; // "xs" | "sm" | "lg"
/**
* Specify a class for the inner modal
* @type {string} [containerClass=""]
*/
export let containerClass = "";
/**
* Specify a selector to be focused when opening the modal
* @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
*/
export let selectorPrimaryFocus = "[data-modal-primary-focus]";
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
*/
export let ref = null;
import {
@ -11,7 +40,7 @@
tick,
setContext,
onMount,
afterUpdate
afterUpdate,
} from "svelte";
const dispatch = createEventDispatcher();
@ -26,9 +55,9 @@
submit: () => {
dispatch("submit");
},
declareRef: ref => {
declareRef: (ref) => {
buttonRef = ref;
}
},
});
function focus(element) {

9
src/ComposedModal/ModalBody.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` if the modal contains form elements
* @type {boolean} [hasForm=false]
*/
export let hasForm = false;
/**
* Set to `true` if the modal contains scrolling content
* @type {boolean} [hasScrollingContent=false]
*/
export let hasScrollingContent = false;
</script>

33
src/ComposedModal/ModalFooter.svelte
View file

@ -1,9 +1,38 @@
<script>
export let primaryClass = undefined;
/**
* Specify the primary button text
* @type {string} [primaryButtonText=""]
*/
export let primaryButtonText = "";
/**
* Set to `true` to disable the primary button
* @type {boolean} [primaryButtonDisabled=false]
*/
export let primaryButtonDisabled = false;
export let secondaryClass = undefined;
/**
* Specify a class for the primary button
* @type {string} [primaryClass]
*/
export let primaryClass = undefined;
/**
* Specify the secondary button text
* @type {string} [secondaryButtonText=""]
*/
export let secondaryButtonText = "";
/**
* Specify a class for the secondary button
* @type {string} [secondaryClass]
*/
export let secondaryClass = undefined;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
export let danger = false;
import { getContext } from "svelte";

34
src/ComposedModal/ModalHeader.svelte
View file

@ -1,10 +1,44 @@
<script>
/**
* Specify the modal title
* @type {string} [title=""]
*/
export let title = "";
/**
* Specify the modal label
* @type {string} [label=""]
*/
export let label = "";
/**
* Specify the label class
* @type {string} [labelClass=""]
*/
export let labelClass = "";
/**
* Specify the title class
* @type {string} [titleClass=""]
*/
export let titleClass = "";
/**
* Specify the close class
* @type {string} [closeClass=""]
*/
export let closeClass = "";
/**
* Specify the close icon class
* @type {string} [closeIconClass=""]
*/
export let closeIconClass = "";
/**
* Specify the ARIA label for the close icon
* @type {string} [iconDescription="Close"]
*/
export let iconDescription = "Close";
import { getContext } from "svelte";

4
src/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -1,5 +1,9 @@
<script>
export let story = undefined;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
import ContentSwitcher from "./ContentSwitcher.svelte";

15
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set the selected index of the switch item
* @type {number} [selectedIndex=0]
*/
export let selectedIndex = 0;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
@ -24,10 +33,10 @@
switches = [...switches, { id, text, selected }];
},
update: id => {
update: (id) => {
selectedIndex = switches.map(({ id }) => id).indexOf(id);
},
change: direction => {
change: (direction) => {
let index = currentIndex + direction;
if (index < 0) {
@ -37,7 +46,7 @@
}
selectedIndex = index;
}
},
});
afterUpdate(() => {

27
src/ContentSwitcher/Switch.svelte
View file

@ -1,8 +1,33 @@
<script>
/**
* Specify the switch text
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
* @type {string} [text="Provide text"]
*/
export let text = "Provide text";
/**
* Set to `true` for the switch to be selected
* @type {boolean} [selected=false]
*/
export let selected = false;
/**
* Set to `true` to disable the switch
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set an id for the button element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { afterUpdate, getContext, onDestroy } from "svelte";
@ -11,7 +36,7 @@
ctx.add({ id, text, selected });
const unsubscribe = ctx.currentId.subscribe($ => {
const unsubscribe = ctx.currentId.subscribe(($) => {
selected = $ === id;
});

16
src/Copy/Copy.svelte
View file

@ -1,6 +1,20 @@
<script>
/**
* Set the feedback text shown after clicking the button
* @type {string} [feedback="Copied!"]
*/
export let feedback = "Copied!";
/**
* Set the timeout duration (ms) to display feedback text
* @type {number} [feedbackTimeout=2000]
*/
export let feedbackTimeout = 2000;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { onMount } from "svelte";
@ -8,8 +22,6 @@
let animation = undefined;
let timeout = undefined;
$: showFeedback = timeout !== undefined;
onMount(() => {
return () => {
clearTimeout(timeout);

4
src/CopyButton/CopyButton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set the title and ARIA label for the copy button
* @type {string} [iconDescription="Copy to clipboard"]
*/
export let iconDescription = "Copy to clipboard";
import { Copy } from "../Copy";

70
src/DataTable/DataTable.svelte
View file

@ -1,13 +1,53 @@
<script>
export let size = undefined; // "compact" | "short" | "tall"
export let title = "";
export let description = "";
export let zebra = false;
export let sortable = false;
export let stickyHeader = false;
export let rows = [];
/**
* Specify the data table headers
* @type {{key: string; value: string;}} [headers=[]]
*/
export let headers = [];
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @type {Object[]} [rows=[]]
*/
export let rows = [];
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"} [size]
*/
export let size = undefined;
/**
* Specify the title of the data table
* @type {string} [title=""]
*/
export let title = "";
/**
* Specify the description of the data table
* @type {string} [description=""]
*/
export let description = "";
/**
* Set to `true` to use zebra styles
* @type {boolean} [zebra=false]
*/
export let zebra = false;
/**
* Set to `true` for the sortable variant
* @type {boolean} [sortable=false]
*/
export let sortable = false;
/**
* Set to `true` to enable a sticky header
* @type {boolean} [stickyHeader=false]
*/
export let stickyHeader = false;
import { createEventDispatcher, setContext } from "svelte";
import { writable, derived } from "svelte/store";
import Table from "./Table.svelte";
@ -21,7 +61,7 @@
const sortDirectionMap = {
none: "ascending",
ascending: "descending",
descending: "none"
descending: "none",
};
const dispatch = createEventDispatcher();
const tableSortable = writable(sortable);
@ -36,16 +76,16 @@
setContext("DataTable", {
sortHeader,
tableSortable,
add: id => {
headerItems.update(_ => [..._, id]);
}
add: (id) => {
headerItems.update((_) => [..._, id]);
},
});
$: tableSortable.set(sortable);
$: headerKeys = headers.map(({ key }) => key);
$: rows = rows.map(row => ({
$: rows = rows.map((row) => ({
...row,
cells: headerKeys.map(key => ({ key, value: row[key] }))
cells: headerKeys.map((key) => ({ key, value: row[key] })),
}));
$: sortedRows = rows;
$: ascending = $sortHeader.sortDirection === "ascending";
@ -71,7 +111,7 @@
}
$: props = {
headers,
rows
rows,
};
</script>
@ -91,7 +131,7 @@
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sortDirection
sortDirection,
});
}}>
{header.value}

31
src/DataTable/Table.svelte
View file

@ -1,9 +1,38 @@
<script>
export let size = undefined; // "compact" | "short" | "tall"
/**
* Set the size of the table
* @type {"compact" | "short" | "tall"} [size]
*/
export let size = undefined;
/**
* Set to `true` to use zebra styles
* @type {boolean} [zebra=false]
*/
export let zebra = false;
/**
* Set to `true` to use static width
* @type {boolean} [useStaticWidth=false]
*/
export let useStaticWidth = false;
/**
* Set to `true` for the bordered variant
* @type {boolean} [shouldShowBorder=false]
*/
export let shouldShowBorder = false;
/**
* Set to `true` for the sortable variant
* @type {boolean} [sortable=false]
*/
export let sortable = false;
/**
* Set to `true` to enable a sticky header
* @type {boolean} [stickyHeader=false]
*/
export let stickyHeader = false;
</script>

16
src/DataTable/TableContainer.svelte
View file

@ -1,7 +1,21 @@
<script>
export let stickyHeader = false;
/**
* Specify the title of the data table
* @type {string} [title=""]
*/
export let title = "";
/**
* Specify the description of the data table
* @type {string} [description=""]
*/
export let description = "";
/**
* Set to `true` to enable a sticky header
* @type {boolean} [stickyHeader=false]
*/
export let stickyHeader = false;
</script>
<div

16
src/DataTable/TableHeader.svelte
View file

@ -1,6 +1,20 @@
<script>
/**
* Specify the `scope` attribute
* @type {string} [scope="col"]
*/
export let scope = "col";
/**
* Override the default id translations
* @type {() => string;} [translateWithId = () => "";]
*/
export let translateWithId = () => "";
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";
@ -20,6 +34,7 @@
<th
aria-sort={active ? $sortHeader.sortDirection : 'none'}
{scope}
{id}
{...$$restProps}
on:mouseover
on:mouseenter
@ -41,6 +56,7 @@
{:else}
<th
{scope}
{id}
{...$$restProps}
on:click
on:mouseover

4
src/DataTable/TableRow.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to select the row
* @type {boolean} [isSelected=false]
*/
export let isSelected = false;
// TODO: include ariaLabel, onExpand, isExpanded, isSelected

25
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -1,8 +1,33 @@
<script>
/**
* Specify the number of columns
* @type {number} [columns=5]
*/
export let columns = 5;
/**
* Specify the number of rows
* @type {number} [rows=5]
*/
export let rows = 5;
/**
* Set to `true` to use the compact variant
* @type {boolean} [compact=false]
*/
export let compact = false;
/**
* Set to `true` to apply zebra styles to the datatable rows
* @type {boolean} [zebra=false]
*/
export let zebra = false;
/**
* Set the column headers
* If `headers` has one more items, `count` is ignored
* @type {string[]} [headers=[]]
*/
export let headers = [];
$: cols = Array.from(

9
src/DatePicker/DatePicker.Skeleton.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` to use the range variant
* @type {boolean} [range=false]
*/
export let range = false;
/**
* Set an id to be used by the label element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
</script>

95
src/DatePicker/DatePicker.svelte
View file

@ -1,35 +1,84 @@
<script>
export let appendTo = document.body;
export let dateFormat = "m/d/Y";
/**
* Specify the date picker type
* @type {"simple" | "single" | "range"} [datePickerType="simple"]
*/
export let datePickerType = "simple";
export let id = "ccs-" + Math.random().toString(36);
export let light = false;
export let locale = "en";
export let maxDate = null;
export let minDate = null;
export let short = false;
/**
* Specify the date picker input value
* @type {string} [value=""]
*/
export let value = "";
/**
* Specify the element to append the calendar to
* @type {HTMLElement} [appendTo=document.body]
*/
export let appendTo = document.body;
/**
* Specify the date format
* @type {string} [dateFormat="m/d/Y"]
*/
export let dateFormat = "m/d/Y";
/**
* Specify the maximum date
* @type {null | string | Date} [maxDate=null]
*/
export let maxDate = null;
/**
* Specify the minimum date
* @type {null | string | Date} [minDate=null]
*/
export let minDate = null;
/**
* Specify the locale
* @type {string} [locale="en"]
*/
export let locale = "en";
/**
* Set to `true` to use the short variant
* @type {boolean} [short=false]
*/
export let short = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set an id for the date picker element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import {
createEventDispatcher,
setContext,
afterUpdate,
onDestroy
onDestroy,
} from "svelte";
import { writable, derived } from "svelte/store";
import { createCalendar } from "./createCalendar";
const dispatch = createEventDispatcher();
const inputs = writable([]);
const inputIds = derived(inputs, _ => _.map(({ id }) => id));
const inputIds = derived(inputs, (_) => _.map(({ id }) => id));
const labelTextEmpty = derived(
inputs,
_ => _.filter(({ labelText }) => !!labelText).length === 0
(_) => _.filter(({ labelText }) => !!labelText).length === 0
);
const inputValue = writable(value);
const mode = writable(datePickerType);
const range = derived(mode, _ => _ === "range");
const hasCalendar = derived(mode, _ => _ === "single" || _ === "range");
const range = derived(mode, (_) => _ === "range");
const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range");
let calendar = undefined;
let datePickerRef = undefined;
@ -40,8 +89,8 @@
range,
inputValue,
hasCalendar,
add: data => {
inputs.update(_ => [..._, data]);
add: (data) => {
inputs.update((_) => [..._, data]);
},
declareRef: ({ id, ref }) => {
if ($inputIds.indexOf(id) === 0) {
@ -59,7 +108,7 @@
dispatch("change", value);
}
},
blurInput: relatedTarget => {
blurInput: (relatedTarget) => {
if (calendar && !calendar.calendarContainer.contains(relatedTarget)) {
calendar.close();
}
@ -74,7 +123,7 @@
calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") ||
calendar.calendarContainer
).focus();
}
},
});
afterUpdate(() => {
@ -87,24 +136,24 @@
locale,
maxDate,
minDate,
mode: $mode
mode: $mode,
},
base: inputRef,
input: inputRefTo,
dispatch: event => {
dispatch: (event) => {
const detail = { selectedDates: calendar.selectedDates };
if ($range) {
detail.dateStr = {
from: inputRef.value,
to: inputRefTo.value
to: inputRefTo.value,
};
} else {
detail.dateStr = inputRef.value;
}
return dispatch(event, detail);
}
},
});
}
@ -149,8 +198,8 @@
class:bx--date-picker={true}
class:bx--date-picker--short={short}
class:bx--date-picker--light={light}
class="{datePickerType && `--date-picker--${datePickerType}`}
{datePickerType === 'range' && $labelTextEmpty && '--date-picker--nolabel'}">
class="{datePickerType && `bx--date-picker--${datePickerType}`}
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
<slot />
</div>
</div>

44
src/DatePicker/DatePickerInput.svelte
View file

@ -1,16 +1,56 @@
<script>
export let size = undefined; // "sm" | "xl"
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the input type
* @type {string} [type="text"]
*/
export let type = "text";
/**
* Specify the input placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
export let disabled = false;
/**
* Specify the ARIA label for the calendar icon
* @type {string} [iconDescription=""]
*/
export let iconDescription = "";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
export let labelText = "";
export let hideLabel = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { getContext, onMount } from "svelte";
@ -25,7 +65,7 @@
blurInput,
openCalendar,
focusCalendar,
inputValue
inputValue,
} = getContext("DatePicker");
add({ id, labelText });

4
src/Dropdown/Dropdown.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to use the inline variant
* @type {boolean} [inline=false]
*/
export let inline = false;
</script>

125
src/Dropdown/Dropdown.svelte
View file

@ -1,21 +1,116 @@
<script>
export let selectedIndex = -1;
export let open = false;
export let inline = false;
export let light = false;
export let disabled = false;
export let invalid = false;
/**
* @typedef {string} DropdownItemId
* @typedef {string} DropdownItemText
* @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
*/
/**
* Set the dropdown items
* @type {DropdownItem[]} [items=[]]
*/
export let items = [];
export let itemToString = item => item.text || item.id;
export let type = "default"; // "default" | "inline"
export let size = undefined; // "sm" | "lg" | "xl"
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
export let invalidText = "";
export let helperText = "";
export let label = undefined;
/**
* Override the display of a dropdown item
* @type {(item: DropdownItem) => string;} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId;]
*/
export let itemToString = (item) => item.text || item.id;
/**
* Specify the selected item index
* @type {number} [selectedIndex=-1]
*/
export let selectedIndex = -1;
/**
* Specify the type of dropdown
* @type {"default" | "inline"} [type="default"]
*/
export let type = "default";
/**
* Specify the size of the dropdown field
* @type {"sm" | "lg" | "xl"} [size]
*/
export let size = undefined;
/**
* Set to `true` to open the dropdown
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Set to `true` to use the inline variant
* @type {boolean} [inline=false]
*/
export let inline = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the dropdown
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the title text
* @type {string} [titleText=""]
*/
export let titleText = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Specify the list box label
* @type {string} [label]
*/
export let label = undefined;
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
*/
export let translateWithId = undefined;
/**
* Set an id for the list box component
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the list box
* @type {string} [name]
*/
export let name = undefined;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { setContext } from "svelte";
@ -24,7 +119,7 @@
ListBox,
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem
ListBoxMenuItem,
} from "../ListBox";
let selectedId = undefined;

75
src/FileUploader/FileUploader.svelte
View file

@ -1,14 +1,70 @@
<script>
export let status = "uploading"; // "uploading" | "edit" | "complete"
/**
* Specify the file uploader status
* @type {"uploading" | "edit" | "complete"} [status="uploading"]
*/
export let status = "uploading";
/**
* Specify the accepted file types
* @type {string[]} [accept=[]]
*/
export let accept = [];
/**
* Obtain the uploaded file names
* @type {string[]} [files=[]]
*/
export let files = [];
export const clearFiles = () => (files = []);
export let buttonLabel = "";
export let iconDescription = "Provide icon description";
export let kind = "primary";
export let labelDescription = "";
export let labelTitle = "";
/**
* Set to `true` to allow multiple files
* @type {boolean} [multiple=false]
*/
export let multiple = false;
/**
* Override the default behavior of clearing the array of uploaded files
* @type {() => any;} [clearFiles = () => void;]
*/
export const clearFiles = () => {
files = [];
};
/**
* Specify the label description
* @type {string} [labelDescription=""]
*/
export let labelDescription = "";
/**
* Specify the label title
* @type {string} [labelTitle=""]
*/
export let labelTitle = "";
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
*/
export let kind = "primary";
/**
* Specify the button label
* @type {string} [buttonLabel=""]
*/
export let buttonLabel = "";
/**
* Specify the ARIA label used for the status icons
* @type {string} [iconDescription=""]
*/
export let iconDescription = "Provide icon description";
/**
* Specify a name attribute for the file button uploader input
* @type {string} [name]
*/
export let name = "";
import { createEventDispatcher, afterUpdate } from "svelte";
@ -23,7 +79,10 @@
if (files.length > prevFiles.length) {
dispatch("add", files);
} else {
dispatch("remove", prevFiles.filter(_ => !files.includes(_)));
dispatch(
"remove",
prevFiles.filter((_) => !files.includes(_))
);
}
prevFiles = [...files];

56
src/FileUploader/FileUploaderButton.svelte
View file

@ -1,14 +1,68 @@
<script>
/**
* Specify the accepted file types
* @type {string[]} [accept=[]]
*/
export let accept = [];
/**
* Set to `true` to allow multiple files
* @type {boolean} [multiple=false]
*/
export let multiple = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set to `true` to disable label changes
* @type {boolean} [disableLabelChanges=false]
*/
export let disableLabelChanges = false;
export let kind = "primary"; // Button.kind
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
*/
export let kind = "primary";
/**
* Specify the label text
* @type {string} [labelText="Add file"]
*/
export let labelText = "Add file";
/**
* Specify the label role
* @type {string} [role="button"]
*/
export let role = "button";
/**
* Specify `tabindex` attribute
* @type {string} [tabindex="0"]
*/
export let tabindex = "0";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
</script>

58
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -1,13 +1,67 @@
<script>
/**
* @typedef {string[]} Files
*/
/**
* Specify the accepted file types
* @type {string[]} [accept=[]]
*/
export let accept = [];
export let disabled = false;
/**
* Set to `true` to allow multiple files
* @type {boolean} [multiple=false]
*/
export let multiple = false;
export let validateFiles = files => files;
/**
* Override the default behavior of validating uploaded files
* The default behavior does not validate files
* @type {(files: Files) => Files} [validateFiles = (files: Files) => Files;]
*/
export let validateFiles = (files) => files;
/**
* Specify the label text
* @type {string} [labelText="Add file"]
*/
export let labelText = "Add file";
/**
* Specify the `role` attribute of the drop container
* @type {string} [role="button"]
*/
export let role = "button";
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify `tabindex` attribute
* @type {string} [tabindex="0"]
*/
export let tabindex = "0";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name=""]
*/
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher } from "svelte";

47
src/FileUploader/FileUploaderItem.svelte
View file

@ -1,12 +1,46 @@
<script>
export let errorBody = "";
export let errorSubject = "";
export let iconDescription = "";
export let id = "ccs-" + Math.random().toString(36);
export let invalid = false;
export let name = "";
/**
* Specify the file uploader status
* @type {"uploading" | "edit" | "complete"} [status="uploading"]
*/
export let status = "uploading";
/**
* Specify the ARIA label used for the status icons
* @type {string} [iconDescription=""]
*/
export let iconDescription = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the error subject text
* @type {string} [errorSubject=""]
*/
export let errorSubject = "";
/**
* Specify the error body text
* @type {string} [errorBody=""]
*/
export let errorBody = "";
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify the file uploader name
* @type {string} [name=""]
*/
export let name = "";
import { createEventDispatcher } from "svelte";
import Filename from "./Filename.svelte";
@ -14,6 +48,7 @@
</script>
<span
{id}
class:bx--file__selected-file={true}
class:bx--file__selected-file--invalid={invalid}
{...$$restProps}

16
src/FileUploader/Filename.svelte
View file

@ -1,7 +1,21 @@
<script>
/**
* Specify the file name status
* @type {"uploading" | "edit" | "complete"} [status="uploading"]
*/
export let status = "uploading";
/**
* Specify the ARIA label used for the status icons
* @type {string} [iconDescription=""]
*/
export let iconDescription = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
export let status = "uploading"; // "uploading" | "edit" | "complete"
import Close16 from "carbon-icons-svelte/lib/Close16";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";

7
src/FormGroup/FormGroup.svelte
View file

@ -1,8 +1,13 @@
<script>
export let legendText = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
export let message = false;
export let messageText = "";
export let legendText = "";
</script>
<fieldset

4
src/FormLabel/FormLabel.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set an id to be used by the label element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
</script>

46
src/Grid/Column.svelte
View file

@ -1,37 +1,61 @@
<script>
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
* @type {boolean} [as=false]
*/
export let as = false;
/**
* Set to `true` to remove the gutter
* @type {boolean} [noGutter=false]
*/
export let noGutter = false;
/**
* Set to `true` to remove the left gutter
* @type {boolean} [noGutterLeft=false]
*/
export let noGutterLeft = false;
/**
* Set to `true` to remove the right gutter
* @type {boolean} [noGutterRight=false]
*/
export let noGutterRight = false;
/**
* Aspect ratio of the column
* @type {("2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1")} [aspectRatio]
* Specify the aspect ratio of the column
* @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} [aspectRatio]
*/
export let aspectRatio = undefined;
/**
* @typedef {(boolean | number)} ColumnSize
* @typedef {Object} ColumnSizeDescriptor
* @property {ColumnSize} [ColumnSizeDescriptor.span] Column size
* @property {number} [ColumnSizeDescriptor.offset] Column offset
* @typedef {boolean | number} ColumnSize
* @typedef {{span?: ColumnSize: offset: number;}} ColumnSizeDescriptor
* @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
*/
/** @type {ColumnSize|ColumnSizeDescriptor} [sm] */
/** @type {ColumnBreakpoint} [sm] */
export let sm = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [md] */
/** @type {ColumnBreakpoint} [md] */
export let md = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [lg] */
/** @type {ColumnBreakpoint} [lg] */
export let lg = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [xlg] */
/** @type {ColumnBreakpoint} [xlg] */
export let xlg = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [max] */
/** @type {ColumnBreakpoint} [max] */
export let max = undefined;
/**
* Column breakpoints
* @constant
* @type {string[]}
*/
const breakpoints = ["sm", "md", "lg", "xlg", "max"];
$: columnClass = [sm, md, lg, xlg, max]

35
src/Grid/Grid.svelte
View file

@ -1,10 +1,45 @@
<script>
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
* @type {boolean} [as=false]
*/
export let as = false;
/**
* Set to `true` to use the condensed variant
* @type {boolean} [condensed=false]
*/
export let condensed = false;
/**
* Set to `true` to use the narrow variant
* @type {boolean} [narrow=false]
*/
export let narrow = false;
/**
* Set to `true` to use the fullWidth variant
* @type {boolean} [fullWidth=false]
*/
export let fullWidth = false;
/**
* Set to `true` to remove the gutter
* @type {boolean} [noGutter=false]
*/
export let noGutter = false;
/**
* Set to `true` to remove the left gutter
* @type {boolean} [noGutterLeft=false]
*/
export let noGutterLeft = false;
/**
* Set to `true` to remove the right gutter
* @type {boolean} [noGutterRight=false]
*/
export let noGutterRight = false;
$: props = {

30
src/Grid/Row.svelte
View file

@ -1,9 +1,39 @@
<script>
/**
* Set to `true` to render a custom HTML element
* Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
* @type {boolean} [as=false]
*/
export let as = false;
/**
* Set to `true` to use the condensed variant
* @type {boolean} [condensed=false]
*/
export let condensed = false;
/**
* Set to `true` to use the narrow variant
* @type {boolean} [narrow=false]
*/
export let narrow = false;
/**
* Set to `true` to remove the gutter
* @type {boolean} [noGutter=false]
*/
export let noGutter = false;
/**
* Set to `true` to remove the left gutter
* @type {boolean} [noGutterLeft=false]
*/
export let noGutterLeft = false;
/**
* Set to `true` to remove the right gutter
* @type {boolean} [noGutterRight=false]
*/
export let noGutterRight = false;
$: props = {

4
src/Icon/Icon.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set the size of the icon
* @type {number} [size=16]
*/
export let size = 16;
</script>

10
src/Icon/Icon.svelte
View file

@ -1,5 +1,15 @@
<script>
/**
* Specify the icon from `carbon-icons-svelte` to render
* Icon size must be 16px (e.g. `Add16`, `Task16`)
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [render]
*/
export let render = undefined;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
import IconSkeleton from "./Icon.Skeleton.svelte";

21
src/InlineLoading/InlineLoading.svelte
View file

@ -1,7 +1,26 @@
<script>
export let status = "active"; // "active" | "inactive" | "finished" | "error"
/**
* Set the loading status
* @type {"active" | "inactive" | "finished" | "error"} [status="active"]
*/
export let status = "active";
/**
* Set the loading description
* @type {string} [description]
*/
export let description = undefined;
/**
* Specify the ARIA label for the loading icon
* @type {string} [iconDescription="Expand/Collapse"]
*/
export let iconDescription = undefined;
/**
* Specify the timeout delay (ms) after `status` is set to "success"
* @type {number} [successDelay=1500]
*/
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte";

14
src/Link/Link.svelte
View file

@ -1,6 +1,20 @@
<script>
/**
* Set to `true` to use the inline variant
* @type {boolean} [inline=false]
*/
export let inline = false;
/**
* Set to `true` to disable the checkbox
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLAnchorElement | HTMLParagraphElement} [ref=null]
*/
export let ref = null;
</script>

40
src/ListBox/ListBox.svelte
View file

@ -1,10 +1,44 @@
<script>
export let size = undefined; // "sm" | "xl"
export let type = "default"; // "default" | "inline"
/**
* Set the size of the list box
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Set the type of the list box
* @type {"default" | "inline"} [type="default"]
*/
export let type = "default";
/**
* Set to `true` to open the list box
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the list box
* @type {boolean} [disable=false]
*/
export let disabled = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
</script>
@ -21,7 +55,7 @@
class="{size && `bx--list-box--${size}`}
{$$restProps.class}"
on:keydown
on:keydown={e => {
on:keydown={(e) => {
if (e.key === 'Escape') {
e.stopPropagation();
}

43
src/ListBox/ListBoxField.svelte
View file

@ -1,17 +1,56 @@
<script>
/**
* Set to `true` to disable the list box field
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the role attribute
* @type {string} [role="combobox"]
*/
export let role = "combobox";
/**
* Specify the tabindex
* @type {string} [tabindex="-1"]
*/
export let tabindex = "-1";
/**
* @typedef {"close" | "open"} ListBoxFieldTranslationId
*/
/**
* Default translation ids
* @constant
* @type {{ close: "close"; open: "open"; }}
*/
export const translationIds = { close: "close", open: "open" };
export let translateWithId = id => defaultTranslations[id];
/**
* Override the default translation ids
* @type {(id: ListBoxFieldTranslationId) => string;} [translateWithId = (id) => string;]
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
*/
export let ref = null;
import { getContext } from "svelte";
const defaultTranslations = {
[translationIds.close]: "Close menu",
[translationIds.open]: "Open menu"
[translationIds.open]: "Open menu",
};
const ctx = getContext("MultiSelect");

8
src/ListBox/ListBoxMenu.svelte
View file

@ -1,12 +1,14 @@
<script>
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
$: menuId = `menu-${id}`;
</script>
<div
role="listbox"
id={menuId}
id="menu-{id}"
class:bx--list-box__menu={true}
{...$$restProps}>
<slot />

25
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -1,13 +1,32 @@
<script>
export const translationIds = { close: "close", open: "open" };
/**
* Set to `true` to open the list box menu icon
* @type {boolean} [open=false]
*/
export let open = false;
export let translateWithId = id => defaultTranslations[id];
/**
* Default translation ids
* @constant
* @type {{ close: "close"; open: "open" }}
*/
export const translationIds = { close: "close", open: "open" };
/**
* @typedef {"close" | "open"} ListBoxMenuIconTranslationId
*/
/**
* Override the default translation ids
* @type {(id: ListBoxMenuIconTranslationId) => string;} [translateWithId = (id) => string;]
*/
export let translateWithId = (id) => defaultTranslations[id];
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
const defaultTranslations = {
[translationIds.close]: "Close menu",
[translationIds.open]: "Open menu"
[translationIds.open]: "Open menu",
};
$: description = open ? translateWithId("close") : translateWithId("open");

9
src/ListBox/ListBoxMenuItem.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` to enable the active state
* @type {boolean} [active=false]
*/
export let active = false;
/**
* Set to `true` to enable the highlighted state
* @type {boolean} [highlighted=false]
*/
export let highlighted = false;
</script>

43
src/ListBox/ListBoxSelection.svelte
View file

@ -1,11 +1,40 @@
<script>
/**
* Specify the number of selected items
* @type {*} [selectionCount]
*/
export let selectionCount = undefined;
/**
* Set to `true` to disable the list box selection
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
*/
/**
* Default translation ids
* @constant
* @type {{ clearAll: "clearAll"; clearSelection: "clearSelection" }}
*/
export const translationIds = {
clearAll: "clearAll",
clearSelection: "clearSelection"
clearSelection: "clearSelection",
};
export let disabled = false;
export let selectionCount = undefined;
export let translateWithId = id => defaultTranslations[id];
/**
* Override the default translation ids
* @type {(id: ListBoxSelectionTranslationId) => string;} [translateWithId = (id) => string;]
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher, getContext } from "svelte";
@ -13,7 +42,7 @@
const defaultTranslations = {
[translationIds.clearAll]: "Clear all selected items",
[translationIds.clearSelection]: "Clear selected item"
[translationIds.clearSelection]: "Clear selected item",
};
const dispatch = createEventDispatcher();
const ctx = getContext("MultiSelect");
@ -37,12 +66,12 @@
class:bx--tag--filter={selectionCount}
class:bx--list-box__selection--multi={selectionCount}
{...$$restProps}
on:click|preventDefault|stopPropagation={e => {
on:click|preventDefault|stopPropagation={(e) => {
if (!disabled) {
dispatch('clear', e);
}
}}
on:keydown|stopPropagation={e => {
on:keydown|stopPropagation={(e) => {
if (!disabled && e.key === 'Enter') {
dispatch('clear', e);
}

24
src/Loading/Loading.svelte
View file

@ -1,8 +1,32 @@
<script>
/**
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
export let small = false;
/**
* Set to `false` to disable the active state
* @type {boolean} [active=true]
*/
export let active = true;
/**
* Set to `false` to disable the overlay
* @type {boolean} [withOverlay=false]
*/
export let withOverlay = true;
/**
* Specify the label description
* @type {string} [description="Active loading indicator"]
*/
export let description = "Active loading indicator";
/**
* Set an id for the label element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5";

98
src/Modal/Modal.svelte
View file

@ -1,20 +1,104 @@
<script>
export let size = undefined; // "xs" | "sm" | "lg"
/**
* Set the size of the modal
* @type {"xs" | "sm" | "lg"} [size]
*/
export let size = undefined;
/**
* Set to `true` to open the modal
* @type {boolean} [open=false]
*/
export let open = false;
export let passiveModal = false;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
export let danger = false;
export let hasForm = false;
export let hasScrollingContent = false;
export let primaryButtonDisabled = false;
export let shouldSubmitOnEnter = true;
export let modalAriaLabel = undefined;
/**
* Set to `true` to use the passive variant
* @type {boolean} [passiveModal=false]
*/
export let passiveModal = false;
/**
* Specify the modal heading
* @type {string} [modalHeading]
*/
export let modalHeading = undefined;
/**
* Specify the modal label
* @type {string} [modalLabel]
*/
export let modalLabel = undefined;
/**
* Specify the ARIA label for the modal
* @type {string} [modalAriaLabel]
*/
export let modalAriaLabel = undefined;
/**
* Specify the ARIA label for the close icon
* @type {string} [iconDescription="Close the modal"]
*/
export let iconDescription = "Close the modal";
/**
* Set to `true` if the modal contains form elements
* @type {boolean} [hasForm=false]
*/
export let hasForm = false;
/**
* Set to `true` if the modal contains scrolling content
* @type {boolean} [hasScrollingContent=false]
*/
export let hasScrollingContent = false;
/**
* Specify the primary button text
* @type {string} [primaryButtonText=""]
*/
export let primaryButtonText = "";
/**
* Set to `true` to disable the primary button
* @type {boolean} [primaryButtonDisabled=false]
*/
export let primaryButtonDisabled = false;
/**
* Set to `true` for the primary button to be triggered when pressing "Enter"
* @type {boolean} [shouldSubmitOnEnter=true]
*/
export let shouldSubmitOnEnter = true;
/**
* Specify the secondary button text
* @type {string} [secondaryButtonText=""]
*/
export let secondaryButtonText = "";
/**
* Specify a selector to be focused when opening the modal
* @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
*/
export let selectorPrimaryFocus = "[data-modal-primary-focus]";
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte";

176
src/MultiSelect/MultiSelect.svelte
View file

@ -1,31 +1,157 @@
<script>
export let size = undefined; // "sm" | "lg" | "xl"
export let type = "default"; // "default" | "inline"
export let selectionFeedback = "top-after-reopen"; // "top" | "fixed" | "top-after-reopen"
/**
* @typedef {string} MultiSelectItemId
* @typedef {string} MultiSelectItemText
* @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
*/
/**
* Set the multiselect items
* @type {MultiSelectItem[]} [items=[]]
*/
export let items = [];
/**
* Override the display of a multiselect item
* @type {(item: MultiSelectItem) => string;} [itemToString = (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId;]
*/
export let itemToString = (item) => item.text || item.id;
/**
* Set the selected ids
* @type {MultiSelectItemId[]} [selectedIds=[]]
*/
export let selectedIds = [];
/**
* Specify the multiselect value
* @type {string} [value=""]
*/
export let value = "";
/**
* Set the size of the combobox
* @type {"sm" | "lg" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the type of multiselect
* @type {"default" | "inline"} [type="default"]
*/
export let type = "default";
/**
* Specify the selection feedback after selecting items
* @type {"top" | "fixed" | "top-after-reopen"} [selectionFeedback="top-after-reopen"]
*/
export let selectionFeedback = "top-after-reopen";
/**
* Set to `true` to disable the dropdown
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set to `true` to filter items
* @type {boolean} [filterable=false]
*/
export let filterable = false;
/**
* Override the filtering logic
* The default filtering is an exact string comparison
* @type {(item: MultiSelectItem, value: string) => string;} [filterItem = ((item: MultiSelectItem, value: string) => string;)]
*/
export let filterItem = (item, value) =>
item.text.toLowerCase().includes(value.toLowerCase());
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
export let invalid = false;
export let invalidText = "";
export let helperText = "";
export let items = [];
export let itemToString = item => item.text || item.id;
export let label = "";
export let light = false;
export let locale = "en";
/**
* Set to `true` to open the dropdown
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Specify the locale
* @type {string} [locale="en"]
*/
export let locale = "en";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
export let selectedIds = [];
/**
* Override the sorting logic
* The default sorting compare the item text value
* @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
*/
export let sortItem = (a, b) =>
a.text.localeCompare(b.text, locale, { numeric: true });
export let titleText = "";
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
*/
export let translateWithId = undefined;
/**
* Specify the title text
* @type {string} [titleText=""]
*/
export let titleText = "";
/**
* Set to `true` to pass the item to `itemToString` in the checkbox
* @type {boolean} [useTitleInItem=false]
*/
export let useTitleInItem = false;
export let value = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Specify the list box label
* @type {string} [label]
*/
export let label = "";
/**
* Set an id for the list box component
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the select
* @type {string} [name]
*/
export let name = undefined;
import { afterUpdate, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
@ -36,7 +162,7 @@
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection
ListBoxSelection,
} from "../ListBox";
let multiSelectRef = null;
@ -59,7 +185,7 @@
selectionRef = ref;
break;
}
}
},
});
function change(direction) {
@ -77,7 +203,7 @@
function sort() {
return [
...(checked.length > 1 ? checked.sort(sortItem) : checked),
...unchecked.sort(sortItem)
...unchecked.sort(sortItem),
];
}
@ -106,13 +232,13 @@
$: menuId = `menu-${id}`;
$: inline = type === "inline";
$: ariaLabel = $$props["aria-label"] || "Choose an item";
$: sortedItems = items.map(item => ({
$: sortedItems = items.map((item) => ({
...item,
checked: selectedIds.includes(item.id)
checked: selectedIds.includes(item.id),
}));
$: checked = sortedItems.filter(({ checked }) => checked);
$: unchecked = sortedItems.filter(({ checked }) => !checked);
$: filteredItems = sortedItems.filter(item => filterItem(item, value));
$: filteredItems = sortedItems.filter((item) => filterItem(item, value));
$: highlightedId = sortedItems[highlightedIndex]
? sortedItems[highlightedIndex].id
: undefined;
@ -210,9 +336,9 @@
<ListBoxSelection
selectionCount={checked.length}
on:clear={() => {
sortedItems = sortedItems.map(item => ({
sortedItems = sortedItems.map((item) => ({
...item,
checked: false
checked: false,
}));
fieldRef.blur();
}}
@ -294,7 +420,7 @@
active={item.checked}
highlighted={highlightedIndex === i}
on:click={() => {
sortedItems = sortedItems.map(_ =>
sortedItems = sortedItems.map((_) =>
_.id === item.id ? { ..._, checked: !_.checked } : _
);
fieldRef.focus();

49
src/Notification/InlineNotification.svelte
View file

@ -1,13 +1,52 @@
<script>
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "inline";
export let kind = "error"; // "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"
export let role = "alert";
export let title = "provide a title";
export let subtitle = "";
export let iconDescription = "closes notification";
/**
* Specify the kind of notification
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
/**
* Set to `true` to use the low contrast variant
* @type {boolean} [lowContrast=false]
*/
export let lowContrast = false;
/**
* Set the `role` attribute
* @type {string} [role="alert"]
*/
export let role = "alert";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
/**
* Set to `true` to hide the close button
* @type {boolean} [hideCloseButton=false]
*/
export let hideCloseButton = false;
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
import { createEventDispatcher } from "svelte";
import NotificationIcon from "./NotificationIcon.svelte";
import NotificationTextDetails from "./NotificationTextDetails.svelte";

25
src/Notification/NotificationButton.svelte
View file

@ -1,17 +1,34 @@
<script>
export let notificationType = "toast"; // "toast" | "inline"
export let iconDescription = "close icon";
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [renderIcon]
*/
export let renderIcon = Close20;
/**
* Specify the title of the icon
*/
export let title = undefined;
export let type = "button";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Close icon"]
*/
export let iconDescription = "Close icon";
import Close20 from "carbon-icons-svelte/lib/Close20";
</script>
<button
type="button"
aria-label={iconDescription}
title={iconDescription}
{type}
class:bx--toast-notification__close-button={notificationType === 'toast'}
class:bx--inline-notification__close-button={notificationType === 'inline'}
{...$$restProps}

18
src/Notification/NotificationIcon.svelte
View file

@ -1,7 +1,21 @@
<script>
/**
* Specify the kind of notification icon
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
export let iconDescription = "closes notification";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
@ -16,7 +30,7 @@
info: InformationFilled20,
success: CheckmarkFilled20,
warning: WarningFilled20,
"warning-alt": WarningAltFilled20
"warning-alt": WarningAltFilled20,
};
</script>

25
src/Notification/NotificationTextDetails.svelte
View file

@ -1,8 +1,27 @@
<script>
export let notificationType = "toast"; // "toast" | "inline"
export let title = "title";
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
export let caption = "caption";
/**
* Specify the caption text
* @type {string} [caption="Caption"]
*/
export let caption = "Caption";
</script>
{#if notificationType === 'toast'}

59
src/Notification/ToastNotification.svelte
View file

@ -1,14 +1,63 @@
<script>
export let iconDescription = "closes notification";
export let notificationType = "toast"; // "toast" | "inline"
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
*/
export let notificationType = "toast";
/**
* Specify the kind of notification
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
*/
export let kind = "error";
export let hideCloseButton = false;
/**
* Set to `true` to use the low contrast variant
* @type {boolean} [lowContrast=false]
*/
export let lowContrast = false;
/**
* Set the timeout duration (ms) to hide the notification after closing it
* @type {number} [timeout=0]
*/
export let timeout = 0;
/**
* Set the `role` attribute
* @type {string} [role="alert"]
*/
export let role = "alert";
export let title = "provide a title";
/**
* Specify the title text
* @type {string} [title="Title"]
*/
export let title = "Title";
/**
* Specify the subtitle text
* @type {string} [subtitle=""]
*/
export let subtitle = "";
export let caption = "provide a caption";
/**
* Specify the caption text
* @type {string} [caption="Caption"]
*/
export let caption = "Caption";
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Closes notification"]
*/
export let iconDescription = "Closes notification";
/**
* Set to `true` to hide the close button
* @type {boolean} [hideCloseButton=false]
*/
export let hideCloseButton = false;
import { createEventDispatcher, onMount } from "svelte";
import NotificationButton from "./NotificationButton.svelte";

4
src/NumberInput/NumberInput.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
</script>

127
src/NumberInput/NumberInput.svelte
View file

@ -1,29 +1,140 @@
<script>
export let size = undefined; // "sm" | "xl"
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the input value
* @type {string} [value=""]
*/
export let value = "";
/**
* Specify the step increment
* @type {number} [step=1]
*/
export let step = 1;
/**
* Specify the maximum value
* @type {number} [max]
*/
export let max = undefined;
/**
* Specify the minimum value
* @type {number} [min]
*/
export let min = undefined;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` for the input to be read-only
* @type {boolean} [readonly=false]
*/
export let readonly = false;
/**
* Set to `true` to enable the mobile variant
* @type {boolean} [mobile=false]
*/
export let mobile = false;
/**
* Set to `true` to allow for an empty value
* @type {boolean} [allowEmpty=false]
*/
export let allowEmpty = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the ARIA label for the increment icons
* @type {string} [iconDescription=""]
*/
export let iconDescription = "";
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
export let invalidText = "Provide invalidText";
/**
* Specify the invalid state text
* @type {string} [invalidText="Provide invalidText"]
*/
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Specify the label text
* @type {string} [label=""]
*/
export let label = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
export let ref = null;
export let translateWithId = id => defaultTranslations[id];
/**
* @typedef {"increment" | "decrement"} NumberInputTranslationId
*/
/**
* Override the default translation ids
* @type {(id: NumberInputTranslationId) => string;} [translateWithId = (id: NumberInputTranslationId) => string;]
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Default translation ids
* @constant
* @type {{ increment: "increment"; decrement: "decrement" }}
*/
export const translationIds = {
increment: "increment",
decrement: "decrement"
decrement: "decrement",
};
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher, afterUpdate } from "svelte";
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
@ -31,7 +142,7 @@
const defaultTranslations = {
[translationIds.increment]: "Increment number",
[translationIds.decrement]: "Decrement number"
[translationIds.decrement]: "Decrement number",
};
const dispatch = createEventDispatcher();

4
src/OrderedList/OrderedList.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to use the nested variant
* @type {boolean} [nested=false]
*/
export let nested = false;
</script>

69
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,15 +1,58 @@
<script>
/**
* Specify the direction of the overflow menu relative to the button
* @type {"top" | "bottom"} [direction="bottom"]
*/
export let direction = "bottom";
/**
* Set to `true` to open the menu
* @type {boolean} [open=false]
*/
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to flip the menu relative to the button
* @type {boolean} [flipped=false]
*/
export let flipped = false;
export let direction = "bottom"; // "top" | "bottom"
export let tabindex = "0";
export let icon = OverflowMenuVertical16;
export let iconClass = undefined;
export let iconDescription = "Open and close list of options";
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify the menu options class
* @type {string} [menuOptionsClass]
*/
export let menuOptionsClass = undefined;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
*/
export let icon = OverflowMenuVertical16;
/**
* Specify the icon class
* @type {string} [iconClass]
*/
export let iconClass = undefined;
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Open and close list of options"]
*/
export let iconDescription = "Open and close list of options";
/**
* Set an id for the button element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
@ -29,7 +72,7 @@
setContext("OverflowMenu", {
focusedId,
add: ({ id, text, primaryFocus }) => {
items.update(_ => {
items.update((_) => {
if (primaryFocus) {
currentIndex.set(_.length);
}
@ -37,10 +80,10 @@
return [..._, { id, text, primaryFocus, index: _.length }];
});
},
update: id => {
update: (id) => {
currentId.set(id);
},
change: direction => {
change: (direction) => {
// TODO: skip disabled
let index = $currentIndex + direction;
@ -51,12 +94,12 @@
}
currentIndex.set(index);
}
},
});
afterUpdate(() => {
if ($currentId) {
const { index, text } = $items.filter(_ => _.id === $currentId)[0];
const { index, text } = $items.filter((_) => _.id === $currentId)[0];
dispatch("close", { index, text });
open = false;
}
@ -117,11 +160,11 @@
<button
bind:this={buttonRef}
tabindex="0"
aria-haspopup
aria-expanded={open}
aria-label={ariaLabel}
{id}
{tabindex}
class:bx--overflow-menu={true}
class:bx--overflow-menu--open={open}
class:bx--overflow-menu--light={light}
@ -136,7 +179,7 @@
on:mouseenter
on:mouseleave
on:keydown
on:keydown={e => {
on:keydown={(e) => {
if (open) {
if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
e.preventDefault();

60
src/OverflowMenu/OverflowMenuItem.svelte
View file

@ -1,12 +1,57 @@
<script>
export let danger = false;
export let disabled = false;
export let hasDivider = false;
export let href = "";
export let primaryFocus = false;
export let requireTitle = true;
/**
* Specify the item text
* Alternatively, use the default slot for a custom element
* @type {string} [text="Provide text"]
*/
export let text = "Provide text";
/**
* Specify the `href` attribute if the item is a link
* @type {string} [href=""]
*/
export let href = "";
/**
* Set to `true` if the item should be focused when opening the menu
* @type {boolean} [primaryFocus=false]
*/
export let primaryFocus = false;
/**
* Set to `true` to disable the item
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set to `true` to include a divider
* @type {boolean} [hasDivider=false]
*/
export let hasDivider = false;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
export let danger = false;
/**
* Set to `false` to omit the button `title` attribute
* @type {boolean} [requireTitle=false]
*/
export let requireTitle = true;
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
*/
export let ref = null;
import { getContext, afterUpdate } from "svelte";
@ -27,12 +72,13 @@
title: requireTitle ? text : undefined,
class: "bx--overflow-menu-options__btn",
disabled: href ? undefined : disabled,
href: href ? href : undefined
href: href ? href : undefined,
};
</script>
<li
role="menuitem"
{id}
class:bx--overflow-menu-options__option={true}
class:bx--overflow-menu--divider={hasDivider}
class:bx--overflow-menu-options__option--danger={danger}

86
src/Pagination/Pagination.svelte
View file

@ -1,19 +1,93 @@
<script>
/**
* Specify the current page index
* @type {number} [page=1]
*/
export let page = 1;
/**
* Specify the total number of items
* @type {number} [total=0]
*/
export let totalItems = 0;
/**
* Set to `true` to disable the pagination
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the forward button text
* @type {string} [forwardText="Next page"]
*/
export let forwardText = "Next page";
/**
* Specify the backward button text
* @type {string} [backwardText="Previous page"]
*/
export let backwardText = "Previous page";
/**
* Specify the items per page text
* @type {string} [itemsPerPageText="Items per page:"]
*/
export let itemsPerPageText = "Items per page:";
/**
* Override the item text
* @type {(min: number, max: number) => string;} [itemText = (min: number, max: number) => string;]
*/
export let itemText = (min, max) => `${min}–${max} items`;
/**
* Override the item range text
* @type {(min: number, max: number, total: number) => string;} [itemRangeText = (min: number, max: number, total: number) => string;]
*/
export let itemRangeText = (min, max, total) =>
`${min}–${max} of ${total} items`;
export let itemsPerPageText = "Items per page:";
export let itemText = (min, max) => `${min}–${max} items`;
export let page = 1;
/**
* Set to `true` to disable the page input
* @type {boolean} [pageInputDisabled=false]
*/
export let pageInputDisabled = false;
export let pageRangeText = (current, total) => `of ${total} pages`;
/**
* Specify the number of items to display in a page
* @type {number} [pageSize=10]
*/
export let pageSize = 10;
/**
* Specify the available page sizes
* @type {number[]} [pageSizes=[10]]
*/
export let pageSizes = [10];
/**
* Set to `true` if the number of pages is unknown
* @type {boolean} [pagesUnknown=false]
*/
export let pagesUnknown = false;
export let pageText = page => `page ${page}`;
/**
* Override the page text
* @type {(page: number) => string;} [pageText = (current: number) => string;]
*/
export let pageText = (page) => `page ${page}`;
/**
* Override the page range text
* @type {(current: number, total: number) => string;} [pageRangeText = (current: number, total: number) => string;]
*/
export let pageRangeText = (current, total) => `of ${total} pages`;
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
@ -33,7 +107,7 @@
$: forwardButtonDisabled = disabled || page === totalPages;
</script>
<div class:bx--pagination={true} {...$$restProps}>
<div {id} class:bx--pagination={true} {...$$restProps}>
<div class:bx--pagination__left={true}>
<label
id="bx--pagination-select-{id}-count-label"

9
src/PaginationNav/PaginationItem.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Specify the current page index
* @type {number} [page=0]
*/
export let page = 0;
/**
* Set to `true` to use the active state
* @type {boolean} [active=false]
*/
export let active = false;
</script>

37
src/PaginationNav/PaginationNav.svelte
View file

@ -1,9 +1,38 @@
<script>
/**
* Specify the current page index
* @type {number} [page=0]
*/
export let page = 0;
/**
* Specify the total number of pages
* @type {number} [total=10]
*/
export let total = 10;
/**
* Specify the total number of pages to show
* @type {number} [shown=10]
*/
export let shown = 10;
/**
* Set to `true` to loop the navigation
* @type {boolean} [loop=false]
*/
export let loop = false;
/**
* Specify the forward button text
* @type {string} [forwardText="Next page"]
*/
export let forwardText = "Next page";
/**
* Specify the backward button text
* @type {string} [backwardText="Next page"]
*/
export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte";
@ -14,7 +43,13 @@
import { Button } from "../Button";
const dispatch = createEventDispatcher();
const MIN = 4; // minimum items shown
/**
* Minimum number of items to be shown
* @constant
* @type {4}
*/
const MIN = 4;
afterUpdate(() => {
dispatch("change", { page });

9
src/PaginationNav/PaginationOverflow.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Specify the pivot start index
* @type {number} [fromIndex=0]
*/
export let fromIndex = 0;
/**
* Specify the pivot end index
* @type {number} [count=0]
*/
export let count = 0;
import { createEventDispatcher } from "svelte";

3
src/ProgressIndicator/ProgressIndicator.Skeleton.svelte
View file

@ -1,4 +1,7 @@
<script>
/**
* Set to `true` to use the vertical variant
*/
export let vertical = false;
</script>

22
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -1,5 +1,13 @@
<script>
/**
* Specify the current step index
* @type {number} [currentIndex=0]
*/
export let currentIndex = 0;
/**
* Set to `true` to use the vertical variant
*/
export let vertical = false;
import { createEventDispatcher, setContext } from "svelte";
@ -7,27 +15,27 @@
const dispatch = createEventDispatcher();
const steps = writable([]);
const stepsById = derived(steps, $ =>
const stepsById = derived(steps, ($) =>
$.reduce((a, c) => ({ ...a, [c.id]: c }), {})
);
setContext("ProgressIndicator", {
steps,
stepsById,
add: step => {
steps.update(_ => [
add: (step) => {
steps.update((_) => [
..._,
{
...step,
index: _.length,
current: _.length === currentIndex,
complete: _.length <= currentIndex
}
complete: _.length <= currentIndex,
},
]);
},
change: index => {
change: (index) => {
dispatch("change", index);
}
},
});
</script>

42
src/ProgressIndicator/ProgressStep.svelte
View file

@ -1,11 +1,50 @@
<script>
/**
* Set to `true` for the complete variant
* @type {boolean} [complete=false]
*/
export let complete = false;
/**
* Set to `true` to use the current variant
* @type {boolean} [current=false]
*/
export let current = false;
/**
* Set to `true` to disable the progress step
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the step description
* @type {string} [descripton=""]
*/
export let description = "";
/**
* Specify the step label
* @type {string} [label=""]
*/
export let label = "";
/**
* Specify the step secondary label
* @type {string} [secondaryLabel=""]
*/
export let secondaryLabel = "";
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";
@ -25,6 +64,7 @@
<li
aria-disabled={disabled}
{id}
class:bx--progress-step={true}
class:bx--progress-step--current={current}
class:bx--progress-step--complete={complete}
@ -43,7 +83,7 @@
on:mouseenter
on:mouseleave
on:keydown
on:keydown={e => {
on:keydown={(e) => {
if (e.key === ' ' || e.key === 'Enter') {
change(step.index);
}

50
src/RadioButton/RadioButton.svelte
View file

@ -1,13 +1,58 @@
<script>
/**
* Specify the value of the radio button
* @type {string} [value=""]
*/
export let value = "";
/**
* Set to `true` to check the radio button
* @type {boolean} [checked=false]
*/
export let checked = false;
/**
* Set to `true` to disable the radio button
* @type {boolean} [disabled=false]
*/
export let disabled = false;
export let id = "ccs-" + Math.random().toString(36);
export let labelPosition = "right"; // "left" | "right"
/**
* Specify the label position
* @type {"right" | "left"} [labelPosition="right"]
*/
export let labelPosition = "right";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the checkbox input
* @type {string} [name=""]
*/
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { getContext } from "svelte";
import { writable } from "svelte/store";
@ -28,6 +73,7 @@
class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
{...$$restProps}>
<input
bind:this={ref}
type="radio"
{id}
{name}

27
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,8 +1,27 @@
<script>
/**
* Set the selected radio button value
* @type {string} [selected]
*/
export let selected = undefined;
/**
* Set to `true` to disable the radio buttons
* @type {boolean} [disabled=false]
*/
export let disabled = false;
export let labelPosition = "right"; // "right" | "left"
export let orientation = "horizontal"; // "horizontal" | "vertical"
/**
* Specify the label position
* @type {"right" | "left"} [labelPosition="right"]
*/
export let labelPosition = "right";
/**
* Specify the orientation of the radio buttons
* @type {"horizontal" | "vertical"} [orientation="horizontal"]
*/
export let orientation = "horizontal";
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
@ -17,9 +36,9 @@
selectedValue.set(value);
}
},
update: value => {
update: (value) => {
selectedValue.set(value);
}
},
});
$: selected = $selectedValue;

4
src/Search/Search.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
export let small = false;
</script>

91
src/Search/Search.svelte
View file

@ -1,16 +1,80 @@
<script>
export let autocomplete = "off";
export let autofocus = false;
export let closeButtonLabelText = "Clear search input";
export let id = "ccs-" + Math.random().toString(36);
export let type = "text";
export let value = "";
export let labelText = "";
export let placeholder = "Search...";
export let skeleton = false;
export let light = false;
/**
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
export let small = false;
/**
* Specify the size of the search input
* @type {"sm" | "lg"} [size]
*/
export let size = small ? "sm" : "xl";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Specify the value of the search input
* @type {string} [value="text"]
*/
export let value = "";
/**
* Specify the `type` attribute of the search input
* @type {string} [type="text"]
*/
export let type = "text";
/**
* Specify the `placeholder` attribute of the search input
* @type {string} [placeholder="Search..."]
*/
export let placeholder = "Search...";
/**
* Specify the `autocomplete` attribute
* @type {"on" | "off"} [autocomplete="off"]
*/
export let autocomplete = "off";
/**
* Set to `true` to auto focus the search element
* @type {boolean} [autofocus=false]
*/
export let autofocus = false;
/**
* Specify the close button label text
* @type {string} [closeButtonLabelText="Clear search input"]
*/
export let closeButtonLabelText = "Clear search input";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import Close16 from "carbon-icons-svelte/lib/Close16";
@ -30,11 +94,12 @@
{:else}
<div
class:bx--search={true}
class="bx--search--{size}"
class:bx--search--light={light}
{...$$restProps}>
{...$$restProps}
class="bx--search--{size}
{$$restProps.class}">
<Search16 class="bx--search-magnifier" />
<label class:bx--label={true} for={id}>{labelText}</label>
<label for={id} class:bx--label={true}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={ref}

4
src/Select/Select.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
</script>

71
src/Select/Select.svelte
View file

@ -1,17 +1,86 @@
<script>
export let size = undefined; // "sm" | "xl"
/**
* Specify the selected item value
* @type {string} [selected]
*/
export let selected = undefined;
/**
* Set the size of the select input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Set to `true` to use the inline variant
* @type {boolean} [inline=false]
*/
export let inline = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the select element
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set an id for the select element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the select element
* @type {string} [name]
*/
export let name = undefined;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Set to `true` to not render a label
* @type {boolean} [noLabel=false]
*/
export let noLabel = false;
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
/**
* Obtain a reference to the select HTML element
* @type {null | HTMLSelectElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";

2
src/Select/SelectItem.svelte
View file

@ -10,7 +10,7 @@
let selected = false;
const unsubscribe = ctx.selectedValue.subscribe($ => {
const unsubscribe = ctx.selectedValue.subscribe(($) => {
selected = $ === value;
});

9
src/Select/SelectItemGroup.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` to disable the optgroup element
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the label attribute of the optgroup element
* @type {string} [label="Provide label"]
*/
export let label = "Provide label";
</script>

28
src/SkeletonText/SkeletonText.svelte
View file

@ -1,10 +1,34 @@
<script>
/**
* Specify the number of lines to render
* @type {number} [lines=3]
*/
export let lines = 3;
/**
* Set to `true` to use the heading size variant
* @type {boolean} [heading=false]
*/
export let heading = false;
/**
* Set to `true` to use the paragraph size variant
* @type {boolean} [paragraph=false]
*/
export let paragraph = false;
/**
* Specify the width of the text (% or px)
* @type {string} [width="100%"]
*/
export let width = "100%";
const randoms = [0.973, 0.153, 0.567];
/**
* Array of random numbers
* @constant
* @type {number[]}
*/
const RANDOM = [0.973, 0.153, 0.567];
$: rows = [];
$: widthNum = parseInt(width, 10);
@ -13,7 +37,7 @@
for (let i = 0; i < lines; i++) {
const min = widthPx ? widthNum - 75 : 0;
const max = widthPx ? widthNum : 75;
const rand = Math.floor(randoms[i % 3] * (max - min + 1)) + min + "px";
const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
}
}

4
src/Slider/Slider.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
</script>

31
src/Slider/Slider.svelte
View file

@ -1,20 +1,51 @@
<script>
export let disabled = false;
export let hideTextInput = false;
/**
* Set an id for the slider div element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
export let inputType = "number";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
export let max = 100;
export let maxLabel = "";
export let min = 0;
export let minLabel = "";
/**
* Set a name for the slider element
* @type {string} [name=""]
*/
export let name = "";
export let required = false;
export let step = 1;
export let stepMultiplier = 4;
export let value = "";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLElement} [ref=null]
*/
export let ref = null;
import { createEventDispatcher, afterUpdate } from "svelte";

11
src/StructuredList/StructuredList.Skeleton.svelte
View file

@ -1,6 +1,15 @@
<script>
export let border = false;
/**
* Specify the number of rows
* @type {number} [rows=5]
*/
export let rows = 5;
/**
* Set to `true` to use the bordered variant
* @type {boolean} [border=false]
*/
export let border = false;
</script>
<section

14
src/StructuredList/StructuredList.svelte
View file

@ -1,6 +1,20 @@
<script>
/**
* Specify the selected structured list row value
* @type {string} [selected]
*/
export let selected = undefined;
/**
* Set to `true` to use the bordered variant
* @type {boolean} [border=false]
*/
export let border = false;
/**
* Set to `true` to use the selection variant
* @type {boolean} [selection=false]
*/
export let selection = false;
import { createEventDispatcher, setContext } from "svelte";

9
src/StructuredList/StructuredListCell.svelte
View file

@ -1,5 +1,14 @@
<script>
/**
* Set to `true` to use as a header
* @type {boolean} [head=false]
*/
export let head = false;
/**
* Set to `true` to prevent wrapping
* @type {boolean} [noWrap=false]
*/
export let noWrap = false;
</script>

29
src/StructuredList/StructuredListInput.svelte
View file

@ -1,9 +1,38 @@
<script>
/**
* Set to `true` to check the input
* @type {boolean} [checked=false]
*/
export let checked = false;
/**
* Specify the title of the input
* @type {string} [title="title"]
*/
export let title = "title";
/**
* Specify the value of the input
* @type {string} [value="value"]
*/
export let value = "value";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name=""]
*/
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import { getContext } from "svelte";

14
src/StructuredList/StructuredListRow.svelte
View file

@ -1,6 +1,20 @@
<script>
/**
* Set to `true` to use as a header
* @type {boolean} [head=false]
*/
export let head = false;
/**
* Set to `true` to render a label slot
* @type {boolean} [label=false]
*/
export let label = false;
/**
* Specify the tabindex
* @type {string} [tabindex="0"]
*/
export let tabindex = "0";
</script>

6
src/Tabs/Tab.svelte
View file

@ -4,6 +4,11 @@
export let label = "";
export let role = "presentation";
export let tabindex = "0";
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
export let ref = null;
@ -22,6 +27,7 @@
<li
tabindex="-1"
{role}
{id}
class:bx--tabs__nav-item={true}
class:bx--tabs__nav-item--disabled={disabled}
class:bx--tabs__nav-item--selected={selected}

7
src/Tabs/TabContent.svelte
View file

@ -1,5 +1,10 @@
<script>
/**
* Set an id for the top-level element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";
const { selectedContent, addContent } = getContext("Tabs");
@ -12,6 +17,8 @@
<div
aria-hidden={!selected}
hidden={!selected}
{id}
{...$$restProps}
class:bx--tab-content={true}
class={$$restProps.class}
style={$$restProps.style}>

16
src/Tabs/Tabs.svelte
View file

@ -13,7 +13,7 @@
let dropdownHidden = true;
let tabs = writable([]);
let tabsById = derived(tabs, _ =>
let tabsById = derived(tabs, (_) =>
_.reduce((a, c) => ({ ...a, [c.id]: c }), {})
);
let currentIndex = selected;
@ -24,16 +24,16 @@
setContext("Tabs", {
selectedTab,
selectedContent,
add: data => {
tabs.update(_ => [..._, { ...data, index: _.length }]);
add: (data) => {
tabs.update((_) => [..._, { ...data, index: _.length }]);
},
addContent: data => {
content.update(_ => [..._, { ...data, index: _.length }]);
addContent: (data) => {
content.update((_) => [..._, { ...data, index: _.length }]);
},
update: id => {
update: (id) => {
currentIndex = $tabsById[id].index;
},
change: direction => {
change: (direction) => {
let index = currentIndex + direction;
if (index < 0) {
@ -57,7 +57,7 @@
}
currentIndex = index;
}
},
});
afterUpdate(() => {

42
src/Tag/Tag.svelte
View file

@ -1,13 +1,52 @@
<script>
export let type = undefined; // "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"
/**
* Specify the type of tag
* @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
*/
export let type = undefined;
/**
* Set to `true` to use filterable variant
* @type {boolean} [filter=false]
*/
export let filter = false;
/**
* Set to `true` to disable a filterable tag
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
export let skeleton = false;
/**
* Set the title for the close button in a filterable tag
* @type {string} [title="Clear filter"]
*/
export let title = "Clear filter";
/**
* Set an id for the filterable tag
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
import Close16 from "carbon-icons-svelte/lib/Close16";
import TagSkeleton from "./Tag.Skeleton.svelte";
</script>
{#if skeleton}
<TagSkeleton
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else}
{#if filter}
<div
aria-label={title}
@ -47,3 +86,4 @@
<slot />
</span>
{/if}
{/if}

4
src/TextArea/TextArea.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
</script>

77
src/TextArea/TextArea.svelte
View file

@ -1,17 +1,86 @@
<script>
/**
* Specify the textarea value
* @type {string} [value=""]
*/
export let value = "";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
/**
* Specify the number of cols
* @type {number} [cols=50]
*/
export let cols = 50;
/**
* Specify the number of rows
* @type {number} [rows=4]
*/
export let rows = 4;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
export let invalid = false;
export let invalidText = "";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the text for the invalid state
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Set an id for the textarea element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = undefined;
/**
* Obtain a reference to the textarea HTML element
* @type {null | HTMLTextAreaElement} [ref=null]
*/
export let ref = null;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

113
src/TextInput/PasswordInput.svelte
View file

@ -1,21 +1,110 @@
<script>
export let size = undefined; // "sm" | "xl"
export let type = "password";
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the input value
* @type {string} [value=""]
*/
export let value = "";
export let hidePasswordLabel = "Hide password";
export let showPasswordLabel = "Show password";
export let light = false;
export let disabled = false;
/**
* Specify the input type
* @type {string} [type="password"]
*/
export let type = "password";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
/**
* Specify the hide password label text
* @type {string} [hidePasswordLabel="Hide password"]
*/
export let hidePasswordLabel = "Hide password";
/**
* Specify the show password label text
* @type {string} [showPasswordLabel="Show password"]
*/
export let showPasswordLabel = "Show password";
/**
* Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"} [tooltipAlignment="center"]
*/
export let tooltipAlignment = undefined;
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} [tooltipPosition="bottom"]
*/
export let tooltipPosition = undefined;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
export let invalid = false;
export let invalidText = "";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
export let tooltipAlignment = "center";
export let tooltipPosition = "bottom";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the text for the invalid state
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

4
src/TextInput/TextInput.Skeleton.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* Set to `true` to hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
</script>

77
src/TextInput/TextInput.svelte
View file

@ -1,17 +1,86 @@
<script>
export let size = undefined; // "sm" | "xl"
export let type = "";
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the input value
* @type {string} [value=""]
*/
export let value = "";
/**
* Specify the input type
* @type {string} [type=""]
*/
export let type = "";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
export let placeholder = "";
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
export let disabled = false;
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
export let helperText = "";
/**
* Set an id for the input element
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
*/
export let name = undefined;
/**
* Specify the label text
* @type {string} [labelText=""]
*/
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
export let hideLabel = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
export let invalidText = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
*/
export let ref = null;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";

Some files were not shown because too many files have changed in this diff Show more