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

refactor: update/fix JSDoc props

Browse source
This commit is contained in:
Eric Liu 2020-11-04 06:04:25 -08:00
commit d38e6d8be6
204 changed files with 992 additions and 2359 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/Accordion/Accordion.svelte
View file

@ -1,31 +1,25 @@
<script>
/**
* Specify alignment of accordion item chevron icon
* @type {"start" | "end"} [align="end"]
* @type {"start" | "end"}
*/
export let align = "end";
/**
* Specify the size of the accordion
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Set to `true` to disable the accordion
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the accordion */
export let disabled = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
import { setContext } from "svelte";
import { writable } from "svelte/store";
import AccordionSkeleton from "./Accordion.Skeleton.svelte";
import AccordionSkeleton from "./AccordionSkeleton.svelte";
const disableItems = writable(disabled);

16
src/Accordion/AccordionItem.svelte
View file

@ -2,26 +2,16 @@
/**
* 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]
*/
/** Set to `true` to open the first accordion item */
export let open = false;
/**
* Set to `true` to disable the accordion item
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the accordion item */
export let disabled = false;
/**
* Specify the ARIA label for the accordion item chevron icon
* @type {string} [iconDescription="Expand/Collapse"]
*/
/** Specify the ARIA label for the accordion item chevron icon */
export let iconDescription = "Expand/Collapse";
import { onMount, getContext } from "svelte";

14
src/Accordion/Accordion.Skeleton.svelte → src/Accordion/AccordionSkeleton.svelte
View file

@ -1,26 +1,20 @@
<script>
/**
* Specify the number of accordion items to render
* @type {number} [count=4]
*/
/** Specify the number of accordion items to render */
export let count = 4;
/**
* Specify alignment of accordion item chevron icon
* @type {"start" | "end"} [align="end"]
* @type {"start" | "end"}
*/
export let align = "end";
/**
* Specify the size of the accordion
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Set to `false` to close the first accordion item
* @type {boolean} [open=true]
*/
/** Set to `false` to close the first accordion item */
export let open = true;
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";

2
src/Accordion/index.js
View file

@ -1,3 +1,3 @@
export { default as Accordion } from "./Accordion.svelte";
export { default as AccordionItem } from "./AccordionItem.svelte";
export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte";
export { default as AccordionSkeleton } from "./AccordionSkeleton.svelte";

2
src/AspectRatio/AspectRatio.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the aspect ratio
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} [ratio="2x1"]
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
*/
export let ratio = "2x1";
</script>

12
src/Breadcrumb/Breadcrumb.svelte
View file

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

7
src/Breadcrumb/BreadcrumbItem.svelte
View file

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

10
src/Breadcrumb/Breadcrumb.Skeleton.svelte → src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

@ -1,14 +1,8 @@
<script>
/**
* Set to `true` to hide the breadcrumb trailing slash
* @type {boolean} [noTrailingSlash=false]
*/
/** Set to `true` to hide the breadcrumb trailing slash */
export let noTrailingSlash = false;
/**
* Specify the number of breadcrumb items to render
* @type {number} [count=3]
*/
/** Specify the number of breadcrumb items to render */
export let count = 3;
</script>

2
src/Breadcrumb/index.js
View file

@ -1,3 +1,3 @@
export { default as Breadcrumb } from "./Breadcrumb.svelte";
export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte";
export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte";

44
src/Button/Button.svelte
View file

@ -1,92 +1,76 @@
<script>
/**
* Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} [kind="primary"]
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
*/
export let kind = "primary";
/**
* Specify the size of button
* @type {"default" | "field" | "small"} [size="default"]
* @type {"default" | "field" | "small"}
*/
export let size = "default";
/**
* Set to `true` for the icon-only variant
* @type {boolean} [hasIconOnly=false]
*/
/** Set to `true` for the icon-only variant */
export let hasIconOnly = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
*/
export let icon = undefined;
/**
* Specify the ARIA label for the button icon
* @type {string} [iconDescription]
* @type {string}
*/
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]
* @type {"start" | "center" | "end"}
*/
export let tooltipAlignment = undefined;
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
* @type {"top" | "right" | "bottom" | "left"}
*/
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]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/**
* Set to `true` to disable the button
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the button */
export let disabled = false;
/**
* Set the `href` to use an anchor link
* @type {string} [href]
* @type {string}
*/
export let href = undefined;
/**
* Specify the tabindex
* @type {string} [tabindex="0"]
*/
/** Specify the tabindex */
export let tabindex = "0";
/**
* Specify the `type` attribute for the button element
* @type {string} [type="button"]
*/
/** Specify the `type` attribute for the button element */
export let type = "button";
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
* @type {null | HTMLAnchorElement | HTMLButtonElement}
*/
export let ref = null;
import { getContext } from "svelte";
import ButtonSkeleton from "./Button.Skeleton.svelte";
import ButtonSkeleton from "./ButtonSkeleton.svelte";
const ctx = getContext("ComposedModal");

5
src/Button/ButtonSet.svelte
View file

@ -1,8 +1,5 @@
<script>
/**
* Set to `true` to stack the buttons vertically
* @type {boolean} [stacked=false]
*/
/** Set to `true` to stack the buttons vertically */
export let stacked = false;
</script>

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

@ -1,20 +1,17 @@
<script>
/**
* Set the `href` to use an anchor link
* @type {string} [href]
* @type {string}
*/
export let href = undefined;
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small"} [size="default"]
* @type {"default" | "field" | "small"}
*/
export let size = "default";
/**
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
/** Set to `true` to use the small variant */
export let small = false;
</script>

2
src/Button/index.js
View file

@ -1,3 +1,3 @@
export { default as Button } from "./Button.svelte";
export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";
export { default as ButtonSet } from "./ButtonSet.svelte";

48
src/Checkbox/Checkbox.svelte
View file

@ -1,72 +1,52 @@
<script>
/**
* Specify whether the checkbox is checked
* @type {boolean} [checked=false]
* @event {boolean} check
*/
/** Specify whether the checkbox is checked */
export let checked = false;
/**
* Specify whether the checkbox is indeterminate
* @type {boolean} [indeterminate=false]
*/
/** Specify whether the checkbox is indeterminate */
export let indeterminate = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/**
* Set to `true` for the checkbox to be read-only
* @type {boolean} [readonly=false]
*/
/** Set to `true` for the checkbox to be read-only */
export let readonly = false;
/**
* Set to `true` to disable the checkbox
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the checkbox */
export let disabled = false;
/**
* Specify the label text
* @type {string} [labelText=""]
*/
/** Specify the label text */
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Set a name for the input element
* @type {string} [name=""]
*/
/** Set a name for the input element */
export let name = "";
/**
* Specify the title attribute for the label element
* @type {string} [title]
* @type {string}
*/
export let title = undefined;
/**
* Set an id for the input label
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;
import { createEventDispatcher } from "svelte";
import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
import CheckboxSkeleton from "./CheckboxSkeleton.svelte";
const dispatch = createEventDispatcher();

0
src/Checkbox/Checkbox.Skeleton.svelte → src/Checkbox/CheckboxSkeleton.svelte
View file

16
src/Checkbox/InlineCheckbox.svelte
View file

@ -1,31 +1,25 @@
<script>
/**
* Specify whether the checkbox is checked
* @type {boolean} [checked=false]
*/
/** Specify whether the checkbox is checked */
export let checked = false;
/**
* Specify whether the checkbox is indeterminate
* @type {boolean} [indeterminate=false]
*/
/** Specify whether the checkbox is indeterminate */
export let indeterminate = false;
/**
* Specify the title attribute for the label element
* @type {string} [title]
* @type {string}
*/
export let title = undefined;
/**
* Set an id for the input label
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;
</script>

2
src/Checkbox/index.js
View file

@ -1,3 +1,3 @@
export { default as Checkbox } from "./Checkbox.svelte";
export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
export { default as CheckboxSkeleton } from "./CheckboxSkeleton.svelte";
export { default as InlineCheckbox } from "./InlineCheckbox.svelte";

52
src/CodeSnippet/CodeSnippet.svelte
View file

@ -1,101 +1,77 @@
<script>
/**
* Set the type of code snippet
* @type {"single" | "inline" | "multi"} [type="single"]
* @type {"single" | "inline" | "multi"}
*/
export let type = "single";
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
* @type {string} [code]
* @type {string}
*/
export let code = undefined;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @type {boolean} [expanded=false]
*/
/** Set to `true` to expand a multi-line code snippet (type="multi") */
export let expanded = false;
/**
* Set to `true` to hide the copy button
* @type {boolean} [hideCopyButton=false]
*/
/** Set to `true` to hide the copy button */
export let hideCopyButton = false;
/**
* Set to `true` to wrap the text
* Note that `type` must be "multi"
* @type {boolean} [wrapText=false]
*/
export let wrapText = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/**
* Specify the ARIA label for the copy button icon
* @type {string} [copyButtonDescription]
* @type {string}
*/
export let copyButtonDescription = undefined;
/**
* Specify the ARIA label of the copy button
* @type {string} [copyLabel]
* @type {string}
*/
export let copyLabel = undefined;
/**
* Specify the feedback text displayed when clicking the snippet
* @type {string} [feedback="Copied!"]
*/
/** Specify the feedback text displayed when clicking the snippet */
export let feedback = "Copied!";
/**
* Set the timeout duration (ms) to display feedback text
* @type {number} [feedbackTimeout=2000]
*/
/** Set the timeout duration (ms) to display feedback text */
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]
*/
/** Set to `true` to enable the show more/less button */
export let showMoreLess = false;
/**
* Set an id for the code element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the pre HTML element
* @type {null | HTMLPreElement} [ref=null]
* @type {null | HTMLPreElement}
*/
export let ref = null;
@ -104,7 +80,7 @@
import { Button } from "../Button";
import { Copy } from "../Copy";
import { CopyButton } from "../CopyButton";
import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
function setShowMoreLess() {
const { height } = ref.getBoundingClientRect();

2
src/CodeSnippet/CodeSnippet.Skeleton.svelte → src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

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

2
src/CodeSnippet/index.js
View file

@ -1,2 +1,2 @@
export { default as CodeSnippet } from "./CodeSnippet.svelte";
export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte";
export { default as CodeSnippetSkeleton } from "./CodeSnippetSkeleton.svelte";

74
src/ComboBox/ComboBox.svelte
View file

@ -1,122 +1,96 @@
<script>
/**
* @typedef {{ id: string; text: string; }} ComboBoxItem
* @event {{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }} select
*/
/**
* Set the combobox items
* @type {ComboBoxItem[]} [items=[]]
* @type {ComboBoxItem[]}
*/
export let items = [];
/**
* Override the display of a combobox item
* @type {(item: ComboBoxItem) => string} [itemToString = (item: ComboBoxItem) => string]
* @type {(item: ComboBoxItem) => string}
*/
export let itemToString = (item) => item.text || item.id;
/**
* Set the selected item by value index
* @type {number} [selectedIndex=-1]
* @type {number}
*/
export let selectedIndex = -1;
/**
* Specify the selected combobox value
* @type {string} [value=""]
*/
/** Specify the selected combobox value */
export let value = "";
/**
* Set the size of the combobox
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Set to `true` to disable the combobox
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the combobox */
export let disabled = false;
/**
* Specify the title text of the combobox
* @type {string} [titleText=""]
*/
/** Specify the title text of the combobox */
export let titleText = "";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
/** Specify the placeholder text */
export let placeholder = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
/** Specify the helper text */
export let helperText = "";
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
/** Specify the invalid state text */
export let invalidText = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to open the combobox menu dropdown
* @type {boolean} [open=false]
*/
/** Set to `true` to open the combobox menu dropdown */
export let open = false;
/**
* Determine if an item should be filtered given the current combobox value
* @type {(item: ComboBoxItem, value: string) => boolean} [shouldFilterItem=() => true]
* @type {(item: ComboBoxItem, value: string) => boolean}
*/
export let shouldFilterItem = () => true;
/**
* Override the default translation ids
* @type {(id: any) => string} [translateWithId]
* @type {(id: any) => string}
*/
export let translateWithId = undefined;
/**
* Set an id for the list box component
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
* @type {string}
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;
/**
* Obtain a reference to the list HTML element
* @type {null | HTMLDivElement} [ref=null]
* @type {null | HTMLDivElement}
*/
export let listRef = null;
/**
* @typedef {{ id: string; text: string; }} ComboBoxItem
*/
import { createEventDispatcher, afterUpdate } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import {

29
src/ComposedModal/ComposedModal.svelte
View file

@ -1,43 +1,28 @@
<script>
/**
* Set the size of the composed modal
* @type {"xs" | "sm" | "lg"} [size]
* @type {"xs" | "sm" | "lg"}
*/
export let size = undefined;
/**
* Set to `true` to open the modal
* @type {boolean} [open=false]
*/
/** Set to `true` to open the modal */
export let open = false;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
/** Set to `true` to use the danger variant */
export let danger = false;
/**
* Set to `true` to prevent the modal from closing when clicking outside
* @type {boolean} [preventCloseOnClickOutside=false]
*/
/** Set to `true` to prevent the modal from closing when clicking outside */
export let preventCloseOnClickOutside = false;
/**
* Specify a class for the inner modal
* @type {string} [containerClass=""]
*/
/** Specify a class for the inner modal */
export let containerClass = "";
/**
* Specify a selector to be focused when opening the modal
* @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
*/
/** Specify a selector to be focused when opening the modal */
export let selectorPrimaryFocus = "[data-modal-primary-focus]";
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
* @type {null | HTMLDivElement}
*/
export let ref = null;

10
src/ComposedModal/ModalBody.svelte
View file

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

24
src/ComposedModal/ModalFooter.svelte
View file

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

35
src/ComposedModal/ModalHeader.svelte
View file

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

12
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -1,19 +1,17 @@
<script>
/**
* Set the selected index of the switch item
* @type {number} [selectedIndex=0]
* @event {number} change
*/
/** Set the selected index of the switch item */
export let selectedIndex = 0;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Specify the size of the content switcher
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;

15
src/ContentSwitcher/Switch.svelte
View file

@ -2,31 +2,24 @@
/**
* 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]
*/
/** Set to `true` for the switch to be selected */
export let selected = false;
/**
* Set to `true` to disable the switch
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the switch */
export let disabled = false;
/**
* Set an id for the button element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
* @type {null | HTMLButtonElement}
*/
export let ref = null;

12
src/Copy/Copy.svelte
View file

@ -1,19 +1,13 @@
<script>
/**
* Set the feedback text shown after clicking the button
* @type {string} [feedback="Copied!"]
*/
/** Set the feedback text shown after clicking the button */
export let feedback = "Copied!";
/**
* Set the timeout duration (ms) to display feedback text
* @type {number} [feedbackTimeout=2000]
*/
/** Set the timeout duration (ms) to display feedback text */
export let feedbackTimeout = 2000;
/**
* Obtain a reference to the button HTML element
* @type {null | HTMLButtonElement} [ref=null]
* @type {null | HTMLButtonElement}
*/
export let ref = null;

5
src/CopyButton/CopyButton.svelte
View file

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

64
src/DataTable/DataTable.svelte
View file

@ -1,95 +1,87 @@
<script>
/**
* @typedef {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }} Header
* @typedef {Header[]} Headers
* @slot {{ row: Object; }} expanded-row
* @slot {{ header: Header}} cell-header
* @slot {{ row: Object; cell: Object; }} cell
* @event {{ header?: Header; row?: Object; cell?: Object; }} click
* @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: Header; sortDirection: "ascending" | "descending" | "none" }} click:header
* @event {Object} click:row
* @event {Object} mouseenter:row
* @event {Object} mouseleave:row
* @event {{ expanded: boolean; row: Object; }} click:row--expand
* @event {Object} click:cell
*/
/**
* Specify the data table headers
* @type {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]} [headers=[]]
* @type {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=[]]
* @type {Object[]}
*/
export let rows = [];
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"} [size]
* @type {"compact" | "short" | "tall"}
*/
export let size = undefined;
/**
* Specify the title of the data table
* @type {string} [title=""]
*/
/** Specify the title of the data table */
export let title = "";
/**
* Specify the description of the data table
* @type {string} [description=""]
*/
/** Specify the description of the data table */
export let description = "";
/**
* Set to `true` to use zebra styles
* @type {boolean} [zebra=false]
*/
/** Set to `true` to use zebra styles */
export let zebra = false;
/**
* Set to `true` for the sortable variant
* @type {boolean} [sortable=false]
*/
/** Set to `true` for the sortable variant */
export let sortable = false;
/**
* Set to `true` for the expandable variant
* Automatically set to `true` if `batchExpansion` is `true`
* @type {boolean} [expandable=false]
*/
export let expandable = false;
/**
* Set to `true` to enable batch expansion
* @type {boolean} [batchExpansion=false]
*/
export let batchExpansion = false;
/**
* Specify the row ids to be expanded
* @type {string[]} [expandedRowIds=[]]
* @type {string[]}
*/
export let expandedRowIds = [];
/**
* Set to `true` for the radio selection variant
* @type {boolean} [radio=false]
*/
/** Set to `true` for the radio selection variant */
export let radio = false;
/**
* Set to `true` for the selectable variant
* Automatically set to `true` if `radio` or `batchSelection` are `true`
* @type {boolean} [selectable=false]
*/
export let selectable = false;
/**
* Set to `true` to enable batch selection
* @type {boolean} [batchSelection=false]
*/
/** Set to `true` to enable batch selection */
export let batchSelection = false;
/**
* Specify the row ids to be selected
* @type {string[]} [selectedRowIds=[]]
* @type {string[]}
*/
export let selectedRowIds = [];
/**
* Set to `true` to enable a sticky header
* @type {boolean} [stickyHeader=false]
*/
/** Set to `true` to enable a sticky header */
export let stickyHeader = false;
import { createEventDispatcher, setContext } from "svelte";

27
src/DataTable/Table.svelte
View file

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

15
src/DataTable/TableContainer.svelte
View file

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

9
src/DataTable/TableHeader.svelte
View file

@ -1,19 +1,16 @@
<script>
/**
* Specify the `scope` attribute
* @type {string} [scope="col"]
*/
/** Specify the `scope` attribute */
export let scope = "col";
/**
* Override the default id translations
* @type {() => string} [translateWithId = () => ""]
* @type {() => string}
*/
export let translateWithId = () => "";
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);

2
src/DataTable/Toolbar.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the toolbar size
* @type {"sm" | "default"} [size="default"]
* @type {"sm" | "default"}
*/
export let size = "default";

2
src/DataTable/ToolbarBatchActions.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Override the total items selected text
* @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
* @type {(totalSelected: number) => string}
*/
export let formatTotalSelected = (totalSelected) =>
`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;

22
src/DataTable/ToolbarSearch.svelte
View file

@ -1,31 +1,19 @@
<script>
/**
* Specify the value of the search input
* @type {string} [value=""]
*/
/** Specify the value of the search input */
export let value = "";
/**
* Set to `true` to expand the search bar
* @type {boolean} [expanded=false]
*/
/** Set to `true` to expand the search bar */
export let expanded = false;
/**
* Set to `true` to keep the search bar expanded
* @type {boolean} [persistent=false]
*/
/** Set to `true` to keep the search bar expanded */
export let persistent = false;
/**
* Specify the tabindex
* @type {string} [tabindex="0"]
*/
/** Specify the tabindex */
export let tabindex = "0";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;

29
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -1,45 +1,30 @@
<script>
/**
* Specify the number of columns
* @type {number} [columns=5]
*/
/** Specify the number of columns */
export let columns = 5;
/**
* Specify the number of rows
* @type {number} [rows=5]
*/
/** Specify the number of rows */
export let rows = 5;
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"} [size]
* @type {"compact" | "short" | "tall"}
*/
export let size = undefined;
/**
* Set to `true` to apply zebra styles to the datatable rows
* @type {boolean} [zebra=false]
*/
/** Set to `true` to apply zebra styles to the datatable rows */
export let zebra = false;
/**
* Set to `false` to hide the header
* @type {boolean} [showHeader=true]
*/
/** Set to `false` to hide the header */
export let showHeader = true;
/**
* Set the column headers
* If `headers` has one more items, `count` is ignored
* @type {string[]} [headers=[]]
* @type {string[]}
*/
export let headers = [];
/**
* Set to `false` to hide the toolbar
* @type {boolean} [showToolbar=true]
*/
/** Set to `false` to hide the toolbar */
export let showToolbar = true;
$: cols = Array.from(

39
src/DatePicker/DatePicker.svelte
View file

@ -1,61 +1,50 @@
<script>
/**
* @dispatch {string} change
*/
/**
* Specify the date picker type
* @type {"simple" | "single" | "range"} [datePickerType="simple"]
* @type {"simple" | "single" | "range"}
*/
export let datePickerType = "simple";
/**
* Specify the date picker input value
* @type {string} [value=""]
*/
/** Specify the date picker input value */
export let value = "";
/**
* Specify the element to append the calendar to
* @type {HTMLElement} [appendTo=document.body]
* @type {HTMLElement}
*/
export let appendTo = document.body;
/**
* Specify the date format
* @type {string} [dateFormat="m/d/Y"]
*/
/** Specify the date format */
export let dateFormat = "m/d/Y";
/**
* Specify the maximum date
* @type {null | string | Date} [maxDate=null]
* @type {null | string | Date}
*/
export let maxDate = null;
/**
* Specify the minimum date
* @type {null | string | Date} [minDate=null]
* @type {null | string | Date}
*/
export let minDate = null;
/**
* Specify the locale
* @type {string} [locale="en"]
*/
/** Specify the locale */
export let locale = "en";
/**
* Set to `true` to use the short variant
* @type {boolean} [short=false]
*/
/** Set to `true` to use the short variant */
export let short = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set an id for the date picker element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);

53
src/DatePicker/DatePickerInput.svelte
View file

@ -1,79 +1,52 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Specify the input type
* @type {string} [type="text"]
*/
/** Specify the input type */
export let type = "text";
/**
* Specify the input placeholder text
* @type {string} [placeholder=""]
*/
/** Specify the input placeholder text */
export let placeholder = "";
/**
* Specify the Regular Expression for the input value
* @type {string} [placeholder="\\d{1,2}\\/\\d{1,2}\\/\\d{4}"]
*/
/** Specify the Regular Expression for the input value */
export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the input */
export let disabled = false;
/**
* Specify the ARIA label for the calendar icon
* @type {string} [iconDescription=""]
*/
/** Specify the ARIA label for the calendar icon */
export let iconDescription = "";
/**
* Set an id for the input element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify the label text
* @type {string} [labelText=""]
*/
/** Specify the label text */
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
/** Specify the invalid state text */
export let invalidText = "";
/**
* Set a name for the input element
* @type {string} [name=""]
* @type {string}
*/
export let name = undefined;
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;

7
src/DatePicker/DatePicker.Skeleton.svelte → src/DatePicker/DatePickerSkeleton.svelte
View file

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

2
src/DatePicker/index.js
View file

@ -1,3 +1,3 @@
export { default as DatePicker } from "./DatePicker.svelte";
export { default as DatePickerInput } from "./DatePickerInput.svelte";
export { default as DatePickerSkeleton } from "./DatePicker.Skeleton.svelte";
export { default as DatePickerSkeleton } from "./DatePickerSkeleton.svelte";

73
src/Dropdown/Dropdown.svelte
View file

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

5
src/Dropdown/Dropdown.Skeleton.svelte → src/Dropdown/DropdownSkeleton.svelte
View file

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

2
src/Dropdown/index.js
View file

@ -1,2 +1,2 @@
export { default as Dropdown } from "./Dropdown.svelte";
export { default as DropdownSkeleton } from "./Dropdown.Skeleton.svelte";
export { default as DropdownSkeleton } from "./DropdownSkeleton.svelte";

46
src/FileUploader/FileUploader.svelte
View file

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

47
src/FileUploader/FileUploaderButton.svelte
View file

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

49
src/FileUploader/FileUploaderDropContainer.svelte
View file

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

33
src/FileUploader/FileUploaderItem.svelte
View file

@ -1,44 +1,33 @@
<script>
/**
* @event {string} delete
*/
/**
* Specify the file uploader status
* @type {"uploading" | "edit" | "complete"} [status="uploading"]
* @type {"uploading" | "edit" | "complete"}
*/
export let status = "uploading";
/**
* Specify the ARIA label used for the status icons
* @type {string} [iconDescription=""]
*/
/** Specify the ARIA label used for the status icons */
export let iconDescription = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the error subject text
* @type {string} [errorSubject=""]
*/
/** Specify the error subject text */
export let errorSubject = "";
/**
* Specify the error body text
* @type {string} [errorBody=""]
*/
/** Specify the error body text */
export let errorBody = "";
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify the file uploader name
* @type {string} [name=""]
*/
/** Specify the file uploader name */
export let name = "";
import { createEventDispatcher } from "svelte";

0
src/FileUploader/FileUploader.Skeleton.svelte → src/FileUploader/FileUploaderSkeleton.svelte
View file

12
src/FileUploader/Filename.svelte
View file

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

2
src/FileUploader/index.js
View file

@ -3,4 +3,4 @@ export { default as FileUploaderButton } from "./FileUploaderButton.svelte";
export { default as FileUploaderItem } from "./FileUploaderItem.svelte";
export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte";
export { default as Filename } from "./Filename.svelte";
export { default as FileUploaderSkeleton } from "./FileUploader.Skeleton.svelte";
export { default as FileUploaderSkeleton } from "./FileUploaderSkeleton.svelte";

20
src/FormGroup/FormGroup.svelte
View file

@ -1,26 +1,14 @@
<script>
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Set to `true` to render a form requirement
* @type {boolean} [message=false]
*/
/** Set to `true` to render a form requirement */
export let message = false;
/**
* Specify the message text
* @type {string} [messageText=""]
*/
/** Specify the message text */
export let messageText = "";
/**
* Specify the legend text
* @type {string} [legendText=""]
*/
/** Specify the legend text */
export let legendText = "";
</script>

2
src/FormLabel/FormLabel.svelte
View file

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

117
src/Grid/Column.svelte
View file

@ -1,65 +1,4 @@
<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;
/**
* Specify the aspect ratio of the column
* @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} [aspectRatio]
*/
export let aspectRatio = undefined;
/**
* Set the small breakpoint
* @type {ColumnBreakpoint} [sm]
*/
export let sm = undefined;
/**
* Set the medium breakpoint
* @type {ColumnBreakpoint} [md]
*/
export let md = undefined;
/**
* Set the large breakpoint
* @type {ColumnBreakpoint} [lg]
*/
export let lg = undefined;
/**
* Set the extra large breakpoint
* @type {ColumnBreakpoint} [xlg]
*/
export let xlg = undefined;
/**
* Set the maximum breakpoint
* @type {ColumnBreakpoint} [max]
*/
export let max = undefined;
/**
* @typedef {boolean | number} ColumnSize
* @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
@ -67,10 +6,60 @@
*/
/**
* Column breakpoints
* @constant
* @type {string[]}
* @slot {{ props?: { class: string; } }}
*/
/**
* 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>)
*/
export let as = false;
/** Set to `true` to remove the gutter */
export let noGutter = false;
/** Set to `true` to remove the left gutter */
export let noGutterLeft = false;
/** Set to `true` to remove the right gutter */
export let noGutterRight = false;
/**
* Specify the aspect ratio of the column
* @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"}
*/
export let aspectRatio = undefined;
/**
* Set the small breakpoint
* @type {ColumnBreakpoint}
*/
export let sm = undefined;
/**
* Set the medium breakpoint
* @type {ColumnBreakpoint}
*/
export let md = undefined;
/**
* Set the large breakpoint
* @type {ColumnBreakpoint}
*/
export let lg = undefined;
/**
* Set the extra large breakpoint
* @type {ColumnBreakpoint}
*/
export let xlg = undefined;
/**
* Set the maximum breakpoint
* @type {ColumnBreakpoint}
*/
export let max = undefined;
const breakpoints = ["sm", "md", "lg", "xlg", "max"];
$: columnClass = [sm, md, lg, xlg, max]

35
src/Grid/Grid.svelte
View file

@ -1,45 +1,30 @@
<script>
/**
* @slot {{ props?: { class: string; } }}
*/
/**
* 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]
*/
/** Set to `true` to use the condensed variant */
export let condensed = false;
/**
* Set to `true` to use the narrow variant
* @type {boolean} [narrow=false]
*/
/** Set to `true` to use the narrow variant */
export let narrow = false;
/**
* Set to `true` to use the fullWidth variant
* @type {boolean} [fullWidth=false]
*/
/** Set to `true` to use the fullWidth variant */
export let fullWidth = false;
/**
* Set to `true` to remove the gutter
* @type {boolean} [noGutter=false]
*/
/** Set to `true` to remove the gutter */
export let noGutter = false;
/**
* Set to `true` to remove the left gutter
* @type {boolean} [noGutterLeft=false]
*/
/** Set to `true` to remove the left gutter */
export let noGutterLeft = false;
/**
* Set to `true` to remove the right gutter
* @type {boolean} [noGutterRight=false]
*/
/** Set to `true` to remove the right gutter */
export let noGutterRight = false;
$: props = {

30
src/Grid/Row.svelte
View file

@ -1,39 +1,27 @@
<script>
/**
* @slot {{ props?: { class: string; } }}
*/
/**
* 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]
*/
/** Set to `true` to use the condensed variant */
export let condensed = false;
/**
* Set to `true` to use the narrow variant
* @type {boolean} [narrow=false]
*/
/** Set to `true` to use the narrow variant */
export let narrow = false;
/**
* Set to `true` to remove the gutter
* @type {boolean} [noGutter=false]
*/
/** Set to `true` to remove the gutter */
export let noGutter = false;
/**
* Set to `true` to remove the left gutter
* @type {boolean} [noGutterLeft=false]
*/
/** Set to `true` to remove the left gutter */
export let noGutterLeft = false;
/**
* Set to `true` to remove the right gutter
* @type {boolean} [noGutterRight=false]
*/
/** Set to `true` to remove the right gutter */
export let noGutterRight = false;
$: props = {

9
src/Icon/Icon.svelte
View file

@ -2,17 +2,14 @@
/**
* 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]
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
*/
export let render = undefined;
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
import IconSkeleton from "./Icon.Skeleton.svelte";
import IconSkeleton from "./IconSkeleton.svelte";
</script>
{#if skeleton}

5
src/Icon/Icon.Skeleton.svelte → src/Icon/IconSkeleton.svelte
View file

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

2
src/Icon/index.js
View file

@ -1,2 +1,2 @@
export { default as Icon } from "./Icon.svelte";
export { default as IconSkeleton } from "./Icon.Skeleton.svelte";
export { default as IconSkeleton } from "./IconSkeleton.svelte";

11
src/InlineLoading/InlineLoading.svelte
View file

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

21
src/Link/Link.svelte
View file

@ -1,37 +1,28 @@
<script>
/**
* Specify the size of the link
* @type {"sm" | "lg"} [size]
* @type {"sm" | "lg"}
*/
export let size = undefined;
/**
* Specify the href value
* @type {string} [href]
* @type {string}
*/
export let href = undefined;
/**
* Set to `true` to use the inline variant
* @type {boolean} [inline=false]
*/
/** Set to `true` to use the inline variant */
export let inline = false;
/**
* Set to `true` to disable the checkbox
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the checkbox */
export let disabled = false;
/**
* Set to `true` to allow visited styles
* @type {boolean} [visited=false]
*/
/** Set to `true` to allow visited styles */
export let visited = false;
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLAnchorElement | HTMLParagraphElement} [ref=null]
* @type {null | HTMLAnchorElement | HTMLParagraphElement}
*/
export let ref = null;
</script>

29
src/ListBox/ListBox.svelte
View file

@ -1,44 +1,29 @@
<script>
/**
* Set the size of the list box
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Set the type of the list box
* @type {"default" | "inline"} [type="default"]
* @type {"default" | "inline"}
*/
export let type = "default";
/**
* Set to `true` to open the list box
* @type {boolean} [open=false]
*/
/** Set to `true` to open the list box */
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to disable the list box
* @type {boolean} [disable=false]
*/
/** Set to `true` to disable the list box */
export let disabled = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
/** Specify the invalid state text */
export let invalidText = "";
</script>

31
src/ListBox/ListBoxField.svelte
View file

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

6
src/ListBox/ListBoxMenu.svelte
View file

@ -1,13 +1,13 @@
<script>
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLDivElement} [ref=null]
* Obtain a reference to the HTML element
* @type {null | HTMLDivElement}
*/
export let ref = null;
</script>

17
src/ListBox/ListBoxMenuIcon.svelte
View file

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

10
src/ListBox/ListBoxMenuItem.svelte
View file

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

25
src/ListBox/ListBoxSelection.svelte
View file

@ -1,21 +1,18 @@
<script>
/**
* @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
*/
/**
* Specify the number of selected items
* @type {any} [selectionCount]
* @type {any}
*/
export let selectionCount = undefined;
/**
* Set to `true` to disable the list box selection
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the list box selection */
export let disabled = false;
/**
* Default translation ids
* @constant
* @type {{ clearAll: "clearAll"; clearSelection: "clearSelection" }}
*/
/** Default translation ids */
export const translationIds = {
clearAll: "clearAll",
clearSelection: "clearSelection",
@ -23,20 +20,16 @@
/**
* Override the default translation ids
* @type {(id: ListBoxSelectionTranslationId) => string} [translateWithId = (id) => string]
* @type {(id: ListBoxSelectionTranslationId) => string}
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Obtain a reference to the top-level HTML element
* @type {null | HTMLElement} [ref=null]
* @type {null | HTMLElement}
*/
export let ref = null;
/**
* @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
*/
import { createEventDispatcher, getContext } from "svelte";
import Close16 from "carbon-icons-svelte/lib/Close16";

22
src/Loading/Loading.svelte
View file

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

77
src/Modal/Modal.svelte
View file

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

87
src/MultiSelect/MultiSelect.svelte
View file

@ -1,149 +1,110 @@
<script>
/**
* Set the multiselect items
* @type {MultiSelectItem[]} [items=[]]
* @type {MultiSelectItem[]}
*/
export let items = [];
/**
* Override the display of a multiselect item
* @type {(item: MultiSelectItem) => string} [itemToString = (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId]
* @type {(item: MultiSelectItem) => string}
*/
export let itemToString = (item) => item.text || item.id;
/**
* Set the selected ids
* @type {MultiSelectItemId[]} [selectedIds=[]]
* @type {MultiSelectItemId[]}
*/
export let selectedIds = [];
/**
* Specify the multiselect value
* @type {string} [value=""]
*/
/** Specify the multiselect value */
export let value = "";
/**
* Set the size of the combobox
* @type {"sm" | "lg" | "xl"} [size]
* @type {"sm" | "lg" | "xl"}
*/
export let size = undefined;
/**
* Specify the type of multiselect
* @type {"default" | "inline"} [type="default"]
* @type {"default" | "inline"}
*/
export let type = "default";
/**
* Specify the selection feedback after selecting items
* @type {"top" | "fixed" | "top-after-reopen"} [selectionFeedback="top-after-reopen"]
* @type {"top" | "fixed" | "top-after-reopen"}
*/
export let selectionFeedback = "top-after-reopen";
/**
* Set to `true` to disable the dropdown
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the dropdown */
export let disabled = false;
/**
* Set to `true` to filter items
* @type {boolean} [filterable=false]
*/
/** Set to `true` to filter items */
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]
* @type {(item: MultiSelectItem, value: string) => string}
*/
export let filterItem = (item, value) =>
item.text.toLowerCase().includes(value.toLowerCase());
/**
* Set to `true` to open the dropdown
* @type {boolean} [open=false]
*/
/** Set to `true` to open the dropdown */
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Specify the locale
* @type {string} [locale="en"]
*/
/** Specify the locale */
export let locale = "en";
/**
* Specify the placeholder text
* @type {string} [placeholder=""]
*/
/** Specify the placeholder text */
export let placeholder = "";
/**
* Override the sorting logic
* The default sorting compare the item text value
* @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
* @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem}
*/
export let sortItem = (a, b) =>
a.text.localeCompare(b.text, locale, { numeric: true });
/**
* Override the default translation ids
* @type {(id: any) => string} [translateWithId]
* @type {(id: any) => string}
*/
export let translateWithId = undefined;
/**
* Specify the title text
* @type {string} [titleText=""]
*/
/** Specify the title text */
export let titleText = "";
/**
* Set to `true` to pass the item to `itemToString` in the checkbox
* @type {boolean} [useTitleInItem=false]
*/
/** Set to `true` to pass the item to `itemToString` in the checkbox */
export let useTitleInItem = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText=""]
*/
/** Specify the invalid state text */
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
/** Specify the helper text */
export let helperText = "";
/**
* Specify the list box label
* @type {string} [label]
*/
/** Specify the list box label */
export let label = "";
/**
* Set an id for the list box component
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the select
* @type {string} [name]
* @type {string}
*/
export let name = undefined;

39
src/Notification/InlineNotification.svelte
View file

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

11
src/Notification/NotificationButton.svelte
View file

@ -1,26 +1,23 @@
<script>
/**
* Set the type of notification
* @type {"toast" | "inline"} [notificationType="toast"]
* @type {"toast" | "inline"}
*/
export let notificationType = "toast";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [renderIcon]
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
*/
export let renderIcon = Close20;
/**
* Specify the title of the icon
* @type {string} [title]
* @type {string}
*/
export let title = undefined;
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Close icon"]
*/
/** Specify the ARIA label for the icon */
export let iconDescription = "Close icon";
import Close20 from "carbon-icons-svelte/lib/Close20";

9
src/Notification/NotificationIcon.svelte
View file

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

17
src/Notification/NotificationTextDetails.svelte
View file

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

44
src/Notification/ToastNotification.svelte
View file

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

78
src/NumberInput/NumberInput.svelte
View file

@ -1,109 +1,69 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Specify the input value
* @type {string} [value=""]
*/
/** Specify the input value */
export let value = "";
/**
* Specify the step increment
* @type {number} [step=1]
*/
/** Specify the step increment */
export let step = 1;
/**
* Specify the maximum value
* @type {number} [max]
* @type {number}
*/
export let max = undefined;
/**
* Specify the minimum value
* @type {number} [min]
* @type {number}
*/
export let min = undefined;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` for the input to be read-only
* @type {boolean} [readonly=false]
*/
/** Set to `true` for the input to be read-only */
export let readonly = false;
/**
* Set to `true` to enable the mobile variant
* @type {boolean} [mobile=false]
*/
/** Set to `true` to enable the mobile variant */
export let mobile = false;
/**
* Set to `true` to allow for an empty value
* @type {boolean} [allowEmpty=false]
*/
/** Set to `true` to allow for an empty value */
export let allowEmpty = false;
/**
* Set to `true` to disable the input
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the input */
export let disabled = false;
/**
* Specify the ARIA label for the increment icons
* @type {string} [iconDescription=""]
*/
/** Specify the ARIA label for the increment icons */
export let iconDescription = "";
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the invalid state text
* @type {string} [invalidText="Provide invalidText"]
*/
/** Specify the invalid state text */
export let invalidText = "";
/**
* Specify the helper text
* @type {string} [helperText=""]
*/
/** Specify the helper text */
export let helperText = "";
/**
* Specify the label text
* @type {string} [label=""]
*/
/** Specify the label text */
export let label = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Override the default translation ids
* @type {(id: NumberInputTranslationId) => string} [translateWithId = (id: NumberInputTranslationId) => string]
* @type {(id: NumberInputTranslationId) => string}
*/
export let translateWithId = (id) => defaultTranslations[id];
/**
* Default translation ids
* @constant
* @type {{ increment: "increment"; decrement: "decrement" }}
*/
export const translationIds = {
@ -113,13 +73,13 @@
/**
* Set an id for the input element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string} [name]
* @type {string}
*/
export let name = undefined;

5
src/NumberInput/NumberInput.Skeleton.svelte → src/NumberInput/NumberInputSkeleton.svelte
View file

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

2
src/NumberInput/index.js
View file

@ -1,2 +1,2 @@
export { default as NumberInput } from "./NumberInput.svelte";
export { default as NumberInputSkeleton } from "./NumberInput.Skeleton.svelte";
export { default as NumberInputSkeleton } from "./NumberInputSkeleton.svelte";

10
src/OrderedList/OrderedList.svelte
View file

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

36
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,73 +1,61 @@
<script>
/**
* Specify the size of the overflow menu
* @type {"sm" | "xl"} [size]
* @type {"sm" | "xl"}
*/
export let size = undefined;
/**
* Specify the direction of the overflow menu relative to the button
* @type {"top" | "bottom"} [direction="bottom"]
* @type {"top" | "bottom"}
*/
export let direction = "bottom";
/**
* Set to `true` to open the menu
* @type {boolean} [open=false]
*/
/** Set to `true` to open the menu */
export let open = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to flip the menu relative to the button
* @type {boolean} [flipped=false]
*/
/** Set to `true` to flip the menu relative to the button */
export let flipped = false;
/**
* Specify the menu options class
* @type {string} [menuOptionsClass]
* @type {string}
*/
export let menuOptionsClass = undefined;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
*/
export let icon = OverflowMenuVertical16;
/**
* Specify the icon class
* @type {string} [iconClass]
* @type {string}
*/
export let iconClass = undefined;
/**
* Specify the ARIA label for the icon
* @type {string} [iconDescription="Open and close list of options"]
*/
/** Specify the ARIA label for the icon */
export let iconDescription = "Open and close list of options";
/**
* Set an id for the button element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the trigger button element
* @type {null | HTMLButtonElement} [ref=null]
* @type {null | HTMLButtonElement}
*/
export let buttonRef = null;
/**
* Obtain a reference to the overflow menu element
* @type {null | HTMLUListElement} [ref=null]
* @type {null | HTMLUListElement}
*/
export let menuRef = null;

35
src/OverflowMenu/OverflowMenuItem.svelte
View file

@ -2,55 +2,36 @@
/**
* 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=""]
*/
/** Specify the `href` attribute if the item is a link */
export let href = "";
/**
* Set to `true` if the item should be focused when opening the menu
* @type {boolean} [primaryFocus=false]
*/
/** Set to `true` if the item should be focused when opening the menu */
export let primaryFocus = false;
/**
* Set to `true` to disable the item
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the item */
export let disabled = false;
/**
* Set to `true` to include a divider
* @type {boolean} [hasDivider=false]
*/
/** Set to `true` to include a divider */
export let hasDivider = false;
/**
* Set to `true` to use the danger variant
* @type {boolean} [danger=false]
*/
/** Set to `true` to use the danger variant */
export let danger = false;
/**
* Set to `false` to omit the button `title` attribute
* @type {boolean} [requireTitle=false]
*/
/** Set to `false` to omit the button `title` attribute */
export let requireTitle = true;
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the HTML element
* @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
* @type {null | HTMLAnchorElement | HTMLButtonElement}
*/
export let ref = null;

62
src/Pagination/Pagination.svelte
View file

@ -1,99 +1,69 @@
<script>
/**
* Specify the current page index
* @type {number} [page=1]
*/
/** Specify the current page index */
export let page = 1;
/**
* Specify the total number of items
* @type {number} [total=0]
*/
/** Specify the total number of items */
export let totalItems = 0;
/**
* Set to `true` to disable the pagination
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the pagination */
export let disabled = false;
/**
* Specify the forward button text
* @type {string} [forwardText="Next page"]
*/
/** Specify the forward button text */
export let forwardText = "Next page";
/**
* Specify the backward button text
* @type {string} [backwardText="Previous page"]
*/
/** Specify the backward button text */
export let backwardText = "Previous page";
/**
* Specify the items per page text
* @type {string} [itemsPerPageText="Items per page:"]
*/
/** Specify the items per page text */
export let itemsPerPageText = "Items per page:";
/**
* Override the item text
* @type {(min: number, max: number) => string} [itemText = (min: number, max: number) => string]
* @type {(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]
* @type {(min: number, max: number, total: number) => string}
*/
export let itemRangeText = (min, max, total) =>
`${min}–${max} of ${total} items`;
/**
* Set to `true` to disable the page input
* @type {boolean} [pageInputDisabled=false]
*/
/** Set to `true` to disable the page input */
export let pageInputDisabled = false;
/**
* Set to `true` to disable the page size input
* @type {boolean} [pageSizeInputDisabled=false]
*/
/** Set to `true` to disable the page size input */
export let pageSizeInputDisabled = false;
/**
* Specify the number of items to display in a page
* @type {number} [pageSize=10]
*/
/** Specify the number of items to display in a page */
export let pageSize = 10;
/**
* Specify the available page sizes
* @type {number[]} [pageSizes=[10]]
* @type {number[]}
*/
export let pageSizes = [10];
/**
* Set to `true` if the number of pages is unknown
* @type {boolean} [pagesUnknown=false]
*/
/** Set to `true` if the number of pages is unknown */
export let pagesUnknown = false;
/**
* Override the page text
* @type {(page: number) => string} [pageText = (current: number) => string]
* @type {(page: 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]
* @type {(current: number, total: number) => string}
*/
export let pageRangeText = (current, total) =>
`of ${total} page${total === 1 ? "" : "s"}`;
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);

0
src/Pagination/Pagination.Skeleton.svelte → src/Pagination/PaginationSkeleton.svelte
View file

2
src/Pagination/index.js
View file

@ -1,2 +1,2 @@
export { default as Pagination } from "./Pagination.svelte";
export { default as PaginationSkeleton } from "./Pagination.Skeleton.svelte";
export { default as PaginationSkeleton } from "./PaginationSkeleton.svelte";

10
src/PaginationNav/PaginationItem.svelte
View file

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

36
src/PaginationNav/PaginationNav.svelte
View file

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

10
src/PaginationNav/PaginationOverflow.svelte
View file

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

20
src/ProgressIndicator/ProgressIndicator.svelte
View file

@ -1,26 +1,14 @@
<script>
/**
* Specify the current step index
* @type {number} [currentIndex=0]
*/
/** Specify the current step index */
export let currentIndex = 0;
/**
* Set to `true` to use the vertical variant
* @type {boolean} [vertical=false]
*/
/** Set to `true` to use the vertical variant */
export let vertical = false;
/**
* Set to `true` to specify whether the progress steps should be split equally in size in the div
* @type {boolean} [spaceEqually=false]
*/
/** Set to `true` to specify whether the progress steps should be split equally in size in the div */
export let spaceEqually = false;
/**
* Set to `true` to prevent updating `currentIndex`
* @type {boolean} [preventChangeOnClick=false]
*/
/** Set to `true` to prevent updating `currentIndex` */
export let preventChangeOnClick = false;
import { createEventDispatcher, setContext } from "svelte";

10
src/ProgressIndicator/ProgressIndicator.Skeleton.svelte → src/ProgressIndicator/ProgressIndicatorSkeleton.svelte
View file

@ -1,14 +1,8 @@
<script>
/**
* Set to `true` to use the vertical variant
* @type {boolean} [vertical=false]
*/
/** Set to `true` to use the vertical variant */
export let vertical = false;
/**
* Specify the number of steps to render
* @type {number} [count=4]
*/
/** Specify the number of steps to render */
export let count = 4;
</script>

37
src/ProgressIndicator/ProgressStep.svelte
View file

@ -1,49 +1,28 @@
<script>
/**
* Set to `true` for the complete variant
* @type {boolean} [complete=false]
*/
/** Set to `true` for the complete variant */
export let complete = false;
/**
* Set to `true` to use the current variant
* @type {boolean} [current=false]
*/
/** Set to `true` to use the current variant */
export let current = false;
/**
* Set to `true` to disable the progress step
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the progress step */
export let disabled = false;
/**
* Set to `true` to indicate an invalid state
* @type {boolean} [invalid=false]
*/
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/**
* Specify the step description
* @type {string} [descripton=""]
*/
/** Specify the step description */
export let description = "";
/**
* Specify the step label
* @type {string} [label=""]
*/
/** Specify the step label */
export let label = "";
/**
* Specify the step secondary label
* @type {string} [secondaryLabel=""]
*/
/** Specify the step secondary label */
export let secondaryLabel = "";
/**
* Set an id for the top-level element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);

2
src/ProgressIndicator/index.js
View file

@ -1,3 +1,3 @@
export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator.Skeleton.svelte";
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicatorSkeleton.svelte";
export { default as ProgressStep } from "./ProgressStep.svelte";

36
src/RadioButton/RadioButton.svelte
View file

@ -1,55 +1,37 @@
<script>
/**
* Specify the value of the radio button
* @type {string} [value=""]
*/
/** Specify the value of the radio button */
export let value = "";
/**
* Set to `true` to check the radio button
* @type {boolean} [checked=false]
*/
/** Set to `true` to check the radio button */
export let checked = false;
/**
* Set to `true` to disable the radio button
* @type {boolean} [disabled=false]
*/
/** et to `true` to disable the radio button */
export let disabled = false;
/**
* Specify the label position
* @type {"right" | "left"} [labelPosition="right"]
* @type {"right" | "left"}
*/
export let labelPosition = "right";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
/** Specify the label text */
export let labelText = "";
/**
* Set to `true` to visually hide the label text
* @type {boolean} [hideLabel=false]
*/
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Set an id for the input element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the checkbox input
* @type {string} [name=""]
*/
/** Specify a name attribute for the checkbox input */
export let name = "";
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;

0
src/RadioButton/RadioButton.Skeleton.svelte → src/RadioButton/RadioButtonSkeleton.svelte
View file

2
src/RadioButton/index.js
View file

@ -1,2 +1,2 @@
export { default as RadioButton } from "./RadioButton.svelte";
export { default as RadioButtonSkeleton } from "./RadioButton.Skeleton.svelte";
export { default as RadioButtonSkeleton } from "./RadioButtonSkeleton.svelte";

15
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,33 +1,30 @@
<script>
/**
* Set the selected radio button value
* @type {string} [selected]
* @type {string}
*/
export let selected = undefined;
/**
* Set to `true` to disable the radio buttons
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the radio buttons */
export let disabled = false;
/**
* Specify the label position
* @type {"right" | "left"} [labelPosition="right"]
* @type {"right" | "left"}
*/
export let labelPosition = "right";
/**
* Specify the orientation of the radio buttons
* @type {"horizontal" | "vertical"} [orientation="horizontal"]
* @type {"horizontal" | "vertical"}
*/
export let orientation = "horizontal";
/**
* Set an id for the container div element
* @type {string} [id]
* @type {string}
*/
export let id;
export let id = undefined;
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";

23
src/Search/Search.svelte
View file

@ -50,37 +50,28 @@
/**
* Specify the `autocomplete` attribute
* @type {"on" | "off"} [autocomplete="off"]
* @type {"on" | "off"}
*/
export let autocomplete = "off";
/**
* Set to `true` to auto focus the search element
* @type {boolean} [autofocus=false]
*/
/** Set to `true` to auto focus the search element */
export let autofocus = false;
/**
* Specify the close button label text
* @type {string} [closeButtonLabelText="Clear search input"]
*/
/** Specify the close button label text */
export let closeButtonLabelText = "Clear search input";
/**
* Specify the label text
* @type {string} [labelText=""]
*/
/** Specify the label text */
export let labelText = "";
/**
* Set an id for the input element
* @type {string} [id]
* @type {string}
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the input HTML element
* @type {null | HTMLInputElement} [ref=null]
* @type {null | HTMLInputElement}
*/
export let ref = null;
@ -88,7 +79,7 @@
import Close16 from "carbon-icons-svelte/lib/Close16";
import Close20 from "carbon-icons-svelte/lib/Close20";
import Search16 from "carbon-icons-svelte/lib/Search16";
import SearchSkeleton from "./Search.Skeleton.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher();
</script>

3
src/Search/Search.Skeleton.svelte → src/Search/SearchSkeleton.svelte
View file

@ -2,13 +2,12 @@
/**
* @deprecated this prop will be removed in the next major release
* 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" | "xl"} [size="xl"]
* @type {"sm" | "lg" | "xl"}
*/
export let size = "xl";
</script>

2
src/Search/index.js
View file

@ -1,2 +1,2 @@
export { default as Search } from "./Search.svelte";
export { default as SearchSkeleton } from "./Search.Skeleton.svelte";
export { default as SearchSkeleton } from "./SearchSkeleton.svelte";

58
src/Select/Select.svelte
View file

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

20
src/Select/SelectItem.svelte
View file

@ -1,26 +1,14 @@
<script>
/**
* Specify the option value
* @type {string} [value=""]
*/
/** Specify the option value */
export let value = "";
/**
* Specify the option text
* @type {string} [text=""]
*/
/** Specify the option text */
export let text = "";
/**
* Set to `true` to hide the option
* @type {boolean} [hidden=false]
*/
/** Set to `true` to hide the option */
export let hidden = false;
/**
* Set to `true` to disable the option
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the option */
export let disabled = false;
import { getContext, onDestroy } from "svelte";

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