mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props
This commit is contained in:
parent
d38e6d8be6
commit
75d4b4cf03
219 changed files with 5168 additions and 5259 deletions
|
@ -16,7 +16,7 @@
|
|||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
|
@ -63,10 +63,7 @@
|
|||
/** Specify the `type` attribute for the button element */
|
||||
export let type = "button";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @type {null | HTMLAnchorElement | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -33,16 +33,10 @@
|
|||
*/
|
||||
export let title = undefined;
|
||||
|
||||
/**
|
||||
* Set an id for the input label
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input label */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -11,16 +11,10 @@
|
|||
*/
|
||||
export let title = undefined;
|
||||
|
||||
/**
|
||||
* Set an id for the input label
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input label */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -63,16 +63,10 @@
|
|||
/** Set to `true` to enable the show more/less button */
|
||||
export let showMoreLess = false;
|
||||
|
||||
/**
|
||||
* Set an id for the code element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the code element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the pre HTML element
|
||||
* @type {null | HTMLPreElement}
|
||||
*/
|
||||
/** Obtain a reference to the pre HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { tick } from "svelte";
|
||||
|
|
|
@ -16,10 +16,7 @@
|
|||
*/
|
||||
export let itemToString = (item) => item.text || item.id;
|
||||
|
||||
/**
|
||||
* Set the selected item by value index
|
||||
* @type {number}
|
||||
*/
|
||||
/** Set the selected item by value index */
|
||||
export let selectedIndex = -1;
|
||||
|
||||
/** Specify the selected combobox value */
|
||||
|
@ -67,10 +64,7 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -79,10 +73,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/**
|
||||
|
|
|
@ -20,10 +20,7 @@
|
|||
/** 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 | HTMLDivElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import {
|
||||
|
|
|
@ -11,16 +11,10 @@
|
|||
/** Set to `true` to disable the switch */
|
||||
export let disabled = false;
|
||||
|
||||
/**
|
||||
* Set an id for the button element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the button element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { afterUpdate, getContext, onDestroy } from "svelte";
|
||||
|
|
|
@ -5,10 +5,7 @@
|
|||
/** Set the timeout duration (ms) to display feedback text */
|
||||
export let feedbackTimeout = 2000;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { onMount } from "svelte";
|
||||
|
|
|
@ -8,10 +8,7 @@
|
|||
*/
|
||||
export let translateWithId = () => "";
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -42,10 +42,7 @@
|
|||
/** Set to `true` to enable the light variant */
|
||||
export let light = false;
|
||||
|
||||
/**
|
||||
* Set an id for the date picker element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the date picker element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import {
|
||||
|
|
|
@ -20,10 +20,7 @@
|
|||
/** Specify the ARIA label for the calendar icon */
|
||||
export let iconDescription = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify the label text */
|
||||
|
@ -44,10 +41,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext, onMount } from "svelte";
|
||||
|
|
|
@ -2,10 +2,7 @@
|
|||
/** Set to `true` to use the range variant */
|
||||
export let range = false;
|
||||
|
||||
/**
|
||||
* Set an id to be used by the label element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id to be used by the label element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
|
|
|
@ -18,10 +18,7 @@
|
|||
*/
|
||||
export let itemToString = (item) => item.text || item.id;
|
||||
|
||||
/**
|
||||
* Specify the selected item index
|
||||
* @type {number}
|
||||
*/
|
||||
/** Specify the selected item index */
|
||||
export let selectedIndex = -1;
|
||||
|
||||
/**
|
||||
|
@ -72,10 +69,7 @@
|
|||
*/
|
||||
export let translateWithId = undefined;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -84,10 +78,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -33,19 +33,13 @@
|
|||
/** Specify `tabindex` attribute */
|
||||
export let tabindex = "0";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify a name attribute for the input */
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -32,19 +32,13 @@
|
|||
/** Specify `tabindex` attribute */
|
||||
export let tabindex = "0";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify a name attribute for the input */
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -21,10 +21,7 @@
|
|||
/** Specify the error body text */
|
||||
export let errorBody = "";
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify the file uploader name */
|
||||
|
|
|
@ -1,8 +1,5 @@
|
|||
<script>
|
||||
/**
|
||||
* Set an id to be used by the label element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id to be used by the label element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
/**
|
||||
* 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}
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let render = undefined;
|
||||
|
||||
|
|
|
@ -20,10 +20,7 @@
|
|||
/** Set to `true` to allow visited styles */
|
||||
export let visited = false;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @type {null | HTMLAnchorElement | HTMLParagraphElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level HTML element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -21,16 +21,10 @@
|
|||
*/
|
||||
export let translateWithId = (id) => defaultTranslations[id];
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @type {null | HTMLDivElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -1,14 +1,8 @@
|
|||
<script>
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @type {null | HTMLDivElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -24,10 +24,7 @@
|
|||
*/
|
||||
export let translateWithId = (id) => defaultTranslations[id];
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @type {null | HTMLElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, getContext } from "svelte";
|
||||
|
|
|
@ -11,10 +11,7 @@
|
|||
/** Specify the label description */
|
||||
export let description = "Active loading indicator";
|
||||
|
||||
/**
|
||||
* Set an id for the label element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the label element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
$: spinnerRadius = small ? "26.8125" : "37.5";
|
||||
|
|
|
@ -62,16 +62,10 @@
|
|||
/** 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}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @type {null | HTMLDivElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, onMount, afterUpdate } from "svelte";
|
||||
|
|
|
@ -96,10 +96,7 @@
|
|||
/** Specify the list box label */
|
||||
export let label = "";
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let renderIcon = Close20;
|
||||
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
<script>
|
||||
/**
|
||||
* @typedef {"increment" | "decrement"} NumberInputTranslationId
|
||||
*/
|
||||
|
||||
/**
|
||||
* Set the size of the input
|
||||
* @type {"sm" | "xl"}
|
||||
|
@ -71,10 +75,7 @@
|
|||
decrement: "decrement",
|
||||
};
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -83,16 +84,9 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement} [ref=null]
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/**
|
||||
* @typedef {"increment" | "decrement"} NumberInputTranslationId
|
||||
*/
|
||||
|
||||
import { createEventDispatcher, afterUpdate } from "svelte";
|
||||
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
|
||||
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = OverflowMenuVertical16;
|
||||
|
||||
|
@ -41,22 +41,13 @@
|
|||
/** 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}
|
||||
*/
|
||||
/** Set an id for the button element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the trigger button element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the trigger button element */
|
||||
export let buttonRef = null;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the overflow menu element
|
||||
* @type {null | HTMLUListElement}
|
||||
*/
|
||||
/** Obtain a reference to the overflow menu element */
|
||||
export let menuRef = null;
|
||||
|
||||
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
|
||||
|
|
|
@ -23,16 +23,10 @@
|
|||
/** Set to `false` to omit the button `title` attribute */
|
||||
export let requireTitle = true;
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @type {null | HTMLAnchorElement | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext, afterUpdate } from "svelte";
|
||||
|
|
|
@ -61,10 +61,7 @@
|
|||
export let pageRangeText = (current, total) =>
|
||||
`of ${total} page${total === 1 ? "" : "s"}`;
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -20,10 +20,7 @@
|
|||
/** Specify the step secondary label */
|
||||
export let secondaryLabel = "";
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -20,19 +20,13 @@
|
|||
/** Set to `true` to visually hide the label text */
|
||||
export let hideLabel = false;
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify a name attribute for the checkbox input */
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -63,16 +63,10 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -17,10 +17,7 @@
|
|||
/** Set to `true` to disable the select element */
|
||||
export let disabled = false;
|
||||
|
||||
/**
|
||||
* Set an id for the select element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the select element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -47,10 +44,7 @@
|
|||
/** Set to `true` to visually hide the label text */
|
||||
export let hideLabel = false;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the select HTML element
|
||||
* @type {null | HTMLSelectElement}
|
||||
*/
|
||||
/** Obtain a reference to the select HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
|
||||
|
|
|
@ -35,10 +35,7 @@
|
|||
/** Set to `true` to hide the text input */
|
||||
export let hideTextInput = false;
|
||||
|
||||
/**
|
||||
* Set an id for the slider div element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the slider div element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Set to `true` to indicate an invalid state */
|
||||
|
@ -50,10 +47,7 @@
|
|||
/** Set a name for the slider element */
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @type {null | HTMLElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -8,19 +8,13 @@
|
|||
/** Specify the value of the input */
|
||||
export let value = "value";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify a name attribute for the input */
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -14,16 +14,10 @@
|
|||
/** Specify the tabindex */
|
||||
export let tabindex = "0";
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the anchor HTML element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the anchor HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -1,8 +1,5 @@
|
|||
<script>
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -29,10 +29,7 @@
|
|||
*/
|
||||
export let title = "Clear filter";
|
||||
|
||||
/**
|
||||
* Set an id for the filterable tag
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the filterable tag */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
import Close16 from "carbon-icons-svelte/lib/Close16";
|
||||
|
|
|
@ -32,10 +32,7 @@
|
|||
/** Specify the text for the invalid state */
|
||||
export let invalidText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the textarea element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the textarea element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -44,10 +41,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the textarea HTML element
|
||||
* @type {null | HTMLTextAreaElement}
|
||||
*/
|
||||
/** Obtain a reference to the textarea HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
|
||||
|
|
|
@ -53,10 +53,7 @@
|
|||
/** Specify the text for the invalid state */
|
||||
export let invalidText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -65,10 +62,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
|
|
@ -23,10 +23,7 @@
|
|||
/** Specify the helper text */
|
||||
export let helperText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -53,10 +50,7 @@
|
|||
/** Specify the warning state text */
|
||||
export let warnText = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/** Set to `true` to mark the field as required */
|
||||
|
|
|
@ -20,16 +20,10 @@
|
|||
/** Specify the tabindex */
|
||||
export let tabindex = "0";
|
||||
|
||||
/**
|
||||
* Set an id for the top-level div element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the top-level div element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level element
|
||||
* @type {null | HTMLDivElement}
|
||||
*/
|
||||
/** Obtain a reference to the top-level element */
|
||||
export let ref = null;
|
||||
|
||||
import { afterUpdate } from "svelte";
|
||||
|
|
|
@ -14,10 +14,7 @@
|
|||
/** Specify the ARIA label for the radio tile checkmark icon */
|
||||
export let iconDescription = "Tile checkmark";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Specify a name attribute for the input */
|
||||
|
|
|
@ -17,10 +17,7 @@
|
|||
/** Specify the ARIA label for the selectable tile checkmark icon */
|
||||
export let iconDescription = "Tile checkmark";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -29,10 +26,7 @@
|
|||
*/
|
||||
export let name = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -44,10 +44,7 @@
|
|||
/** Specify the invalid state text */
|
||||
export let invalidText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -56,10 +53,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @type {null | HTMLInputElement}
|
||||
*/
|
||||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -17,10 +17,7 @@
|
|||
*/
|
||||
export let hideLabel = true;
|
||||
|
||||
/**
|
||||
* Set an id for the select element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the select element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
@ -29,10 +26,7 @@
|
|||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the select HTML element
|
||||
* @type {null | HTMLSelectElement}
|
||||
*/
|
||||
/** Obtain a reference to the select HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { setContext } from "svelte";
|
||||
|
|
|
@ -14,10 +14,7 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
|
|
@ -2,10 +2,7 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
|
|
|
@ -14,10 +14,7 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
|
|
|
@ -2,10 +2,7 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
|
||||
* Icon size must be 16px (e.g. `Add16`, `Task16`)
|
||||
* @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon=Information16]
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon} [icon=Information16]
|
||||
*/
|
||||
export let icon = Information16;
|
||||
|
||||
|
@ -48,22 +48,13 @@
|
|||
/** Set the tooltip button text */
|
||||
export let triggerText = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the trigger text HTML element
|
||||
* @type {null | HTMLElement}
|
||||
*/
|
||||
/** Obtain a reference to the trigger text HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the tooltip HTML element
|
||||
* @type {null | HTMLElement}
|
||||
*/
|
||||
/** Obtain a reference to the tooltip HTML element */
|
||||
export let refTooltip = null;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the icon HTML element
|
||||
* @type {null | HTMLElement}
|
||||
*/
|
||||
/** Obtain a reference to the icon HTML element */
|
||||
export let refIcon = null;
|
||||
|
||||
import { createEventDispatcher, afterUpdate } from "svelte";
|
||||
|
|
|
@ -14,16 +14,10 @@
|
|||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Set an id for the tooltip div element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the tooltip div element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
let visible = false;
|
||||
|
|
|
@ -14,16 +14,10 @@
|
|||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Set an id for the span element
|
||||
* @type {string}
|
||||
*/
|
||||
/** Set an id for the span element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement} [ref=null]
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
let hidden = false;
|
||||
|
|
|
@ -29,10 +29,7 @@
|
|||
*/
|
||||
export let platformName = "";
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
/**
|
||||
* Specify the icon props
|
||||
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
|
||||
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
|
@ -15,10 +15,7 @@
|
|||
*/
|
||||
export let text = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
|
|
@ -10,14 +10,11 @@
|
|||
|
||||
/**
|
||||
* Specify the icon props
|
||||
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
|
||||
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
import { Icon } from "../../Icon";
|
||||
|
|
|
@ -11,10 +11,7 @@
|
|||
*/
|
||||
export let text = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -11,10 +11,7 @@
|
|||
*/
|
||||
export let text = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
/** Specify the ARIA label for the chevron icon */
|
||||
|
|
|
@ -5,10 +5,7 @@
|
|||
*/
|
||||
export let href = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -4,14 +4,11 @@
|
|||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("carbon-icons-svelte/lib/Add16").default}
|
||||
* @type {import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML button element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
|
@ -8,10 +8,7 @@
|
|||
/** Set to `true` to toggle the open state */
|
||||
export let isOpen = false;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML button element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
|
||||
import { fly } from "svelte/transition";
|
||||
|
|
|
@ -16,14 +16,11 @@
|
|||
|
||||
/**
|
||||
* Specify the icon props
|
||||
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
|
||||
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
|
||||
import { Icon } from "../../Icon";
|
||||
|
|
|
@ -10,14 +10,11 @@
|
|||
|
||||
/**
|
||||
* Specify the icon props
|
||||
* @type {{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }}
|
||||
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML button element
|
||||
* @type {null | HTMLButtonElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML button element */
|
||||
export let ref = null;
|
||||
|
||||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
|
||||
|
|
|
@ -17,10 +17,7 @@
|
|||
*/
|
||||
export let text = undefined;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML anchor element
|
||||
* @type {null | HTMLAnchorElement}
|
||||
*/
|
||||
/** Obtain a reference to the HTML anchor element */
|
||||
export let ref = null;
|
||||
</script>
|
||||
|
||||
|
|
51
types/Accordion/Accordion.d.ts
vendored
51
types/Accordion/Accordion.d.ts
vendored
|
@ -1,31 +1,32 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface AccordionProps {
|
||||
/**
|
||||
* Specify alignment of accordion item chevron icon
|
||||
* @default "end"
|
||||
*/
|
||||
align?: "start" | "end";
|
||||
|
||||
/**
|
||||
* Specify the size of the accordion
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the accordion
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
}
|
||||
|
||||
export default class Accordion {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
|
||||
/**
|
||||
* Specify alignment of accordion item chevron icon
|
||||
* @default "end"
|
||||
*/
|
||||
align?: "start" | "end";
|
||||
|
||||
/**
|
||||
* Specify the size of the accordion
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the accordion
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: AccordionProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
55
types/Accordion/AccordionItem.d.ts
vendored
55
types/Accordion/AccordionItem.d.ts
vendored
|
@ -1,33 +1,34 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
|
||||
/**
|
||||
* Specify the title of the accordion item heading
|
||||
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
|
||||
* @default "title"
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to open the first accordion item
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the accordion item
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the accordion item chevron icon
|
||||
* @default "Expand/Collapse"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
}
|
||||
|
||||
export default class AccordionItem {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
|
||||
/**
|
||||
* Specify the title of the accordion item heading
|
||||
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
|
||||
* @default "title"
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to open the first accordion item
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the accordion item
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the accordion item chevron icon
|
||||
* @default "Expand/Collapse"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
};
|
||||
|
||||
$$prop_def: AccordionItemProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
title: {};
|
||||
|
|
51
types/Accordion/AccordionSkeleton.d.ts
vendored
51
types/Accordion/AccordionSkeleton.d.ts
vendored
|
@ -1,31 +1,32 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
|
||||
/**
|
||||
* Specify the number of accordion items to render
|
||||
* @default 4
|
||||
*/
|
||||
count?: number;
|
||||
|
||||
/**
|
||||
* Specify alignment of accordion item chevron icon
|
||||
* @default "end"
|
||||
*/
|
||||
align?: "start" | "end";
|
||||
|
||||
/**
|
||||
* Specify the size of the accordion
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `false` to close the first accordion item
|
||||
* @default true
|
||||
*/
|
||||
open?: boolean;
|
||||
}
|
||||
|
||||
export default class AccordionSkeleton {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
|
||||
/**
|
||||
* Specify the number of accordion items to render
|
||||
* @default 4
|
||||
*/
|
||||
count?: number;
|
||||
|
||||
/**
|
||||
* Specify alignment of accordion item chevron icon
|
||||
* @default "end"
|
||||
*/
|
||||
align?: "start" | "end";
|
||||
|
||||
/**
|
||||
* Specify the size of the accordion
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `false` to close the first accordion item
|
||||
* @default true
|
||||
*/
|
||||
open?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: AccordionSkeletonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
17
types/AspectRatio/AspectRatio.d.ts
vendored
17
types/AspectRatio/AspectRatio.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class AspectRatio {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Specify the aspect ratio
|
||||
* @default "2x1"
|
||||
*/
|
||||
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
|
||||
};
|
||||
export interface AspectRatioProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Specify the aspect ratio
|
||||
* @default "2x1"
|
||||
*/
|
||||
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
|
||||
}
|
||||
|
||||
export default class AspectRatio {
|
||||
$$prop_def: AspectRatioProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
29
types/Breadcrumb/Breadcrumb.d.ts
vendored
29
types/Breadcrumb/Breadcrumb.d.ts
vendored
|
@ -1,20 +1,21 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface BreadcrumbProps {
|
||||
/**
|
||||
* Set to `true` to hide the breadcrumb trailing slash
|
||||
* @default false
|
||||
*/
|
||||
noTrailingSlash?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
}
|
||||
|
||||
export default class Breadcrumb {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> & {
|
||||
/**
|
||||
* Set to `true` to hide the breadcrumb trailing slash
|
||||
* @default false
|
||||
*/
|
||||
noTrailingSlash?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: BreadcrumbProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
27
types/Breadcrumb/BreadcrumbItem.d.ts
vendored
27
types/Breadcrumb/BreadcrumbItem.d.ts
vendored
|
@ -1,19 +1,20 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` if the breadcrumb item represents the current page
|
||||
* @default false
|
||||
*/
|
||||
isCurrentPage?: boolean;
|
||||
}
|
||||
|
||||
export default class BreadcrumbItem {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` if the breadcrumb item represents the current page
|
||||
* @default false
|
||||
*/
|
||||
isCurrentPage?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: BreadcrumbItemProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
29
types/Breadcrumb/BreadcrumbSkeleton.d.ts
vendored
29
types/Breadcrumb/BreadcrumbSkeleton.d.ts
vendored
|
@ -1,20 +1,21 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to hide the breadcrumb trailing slash
|
||||
* @default false
|
||||
*/
|
||||
noTrailingSlash?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the number of breadcrumb items to render
|
||||
* @default 3
|
||||
*/
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export default class BreadcrumbSkeleton {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set to `true` to hide the breadcrumb trailing slash
|
||||
* @default false
|
||||
*/
|
||||
noTrailingSlash?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the number of breadcrumb items to render
|
||||
* @default 3
|
||||
*/
|
||||
count?: number;
|
||||
};
|
||||
|
||||
$$prop_def: BreadcrumbSkeletonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
167
types/Button/Button.d.ts
vendored
167
types/Button/Button.d.ts
vendored
|
@ -1,89 +1,90 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ButtonProps {
|
||||
/**
|
||||
* Specify the kind of button
|
||||
* @default "primary"
|
||||
*/
|
||||
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
|
||||
|
||||
/**
|
||||
* Specify the size of button
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small";
|
||||
|
||||
/**
|
||||
* Set to `true` for the icon-only variant
|
||||
* @default false
|
||||
*/
|
||||
hasIconOnly?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
*/
|
||||
icon?: import("carbon-icons-svelte").CarbonIcon;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the button icon
|
||||
*/
|
||||
iconDescription?: string;
|
||||
|
||||
/**
|
||||
* Set the alignment of the tooltip relative to the icon
|
||||
* `hasIconOnly` must be set to `true`
|
||||
*/
|
||||
tooltipAlignment?: "start" | "center" | "end";
|
||||
|
||||
/**
|
||||
* Set the position of the tooltip relative to the icon
|
||||
*/
|
||||
tooltipPosition?: "top" | "right" | "bottom" | "left";
|
||||
|
||||
/**
|
||||
* 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>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the button
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Specify the tabindex
|
||||
* @default "0"
|
||||
*/
|
||||
tabindex?: string;
|
||||
|
||||
/**
|
||||
* Specify the `type` attribute for the button element
|
||||
* @default "button"
|
||||
*/
|
||||
type?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLAnchorElement | HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class Button {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Specify the kind of button
|
||||
* @default "primary"
|
||||
*/
|
||||
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
|
||||
|
||||
/**
|
||||
* Specify the size of button
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small";
|
||||
|
||||
/**
|
||||
* Set to `true` for the icon-only variant
|
||||
* @default false
|
||||
*/
|
||||
hasIconOnly?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
*/
|
||||
icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the button icon
|
||||
*/
|
||||
iconDescription?: string;
|
||||
|
||||
/**
|
||||
* Set the alignment of the tooltip relative to the icon
|
||||
* `hasIconOnly` must be set to `true`
|
||||
*/
|
||||
tooltipAlignment?: "start" | "center" | "end";
|
||||
|
||||
/**
|
||||
* Set the position of the tooltip relative to the icon
|
||||
*/
|
||||
tooltipPosition?: "top" | "right" | "bottom" | "left";
|
||||
|
||||
/**
|
||||
* 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>)
|
||||
* @default false
|
||||
*/
|
||||
as?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the button
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Specify the tabindex
|
||||
* @default "0"
|
||||
*/
|
||||
tabindex?: string;
|
||||
|
||||
/**
|
||||
* Specify the `type` attribute for the button element
|
||||
* @default "button"
|
||||
*/
|
||||
type?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLAnchorElement | HTMLButtonElement;
|
||||
};
|
||||
|
||||
$$prop_def: ButtonProps;
|
||||
$$slot_def: {
|
||||
default: { props: undefined };
|
||||
};
|
||||
|
|
17
types/Button/ButtonSet.d.ts
vendored
17
types/Button/ButtonSet.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class ButtonSet {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set to `true` to stack the buttons vertically
|
||||
* @default false
|
||||
*/
|
||||
stacked?: boolean;
|
||||
};
|
||||
export interface ButtonSetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to stack the buttons vertically
|
||||
* @default false
|
||||
*/
|
||||
stacked?: boolean;
|
||||
}
|
||||
|
||||
export default class ButtonSet {
|
||||
$$prop_def: ButtonSetProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
39
types/Button/ButtonSkeleton.d.ts
vendored
39
types/Button/ButtonSkeleton.d.ts
vendored
|
@ -1,25 +1,26 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Specify the size of button skeleton
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small";
|
||||
|
||||
/**
|
||||
* Set to `true` to use the small variant
|
||||
* @default false
|
||||
*/
|
||||
small?: boolean;
|
||||
}
|
||||
|
||||
export default class ButtonSkeleton {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the `href` to use an anchor link
|
||||
*/
|
||||
href?: string;
|
||||
|
||||
/**
|
||||
* Specify the size of button skeleton
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small";
|
||||
|
||||
/**
|
||||
* Set to `true` to use the small variant
|
||||
* @default false
|
||||
*/
|
||||
small?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: ButtonSkeletonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
134
types/Checkbox/Checkbox.d.ts
vendored
134
types/Checkbox/Checkbox.d.ts
vendored
|
@ -1,72 +1,74 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface CheckboxProps {
|
||||
/**
|
||||
* Specify whether the checkbox is checked
|
||||
* @default false
|
||||
*/
|
||||
checked?: boolean;
|
||||
|
||||
/**
|
||||
* Specify whether the checkbox is indeterminate
|
||||
* @default false
|
||||
*/
|
||||
indeterminate?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the checkbox to be read-only
|
||||
* @default false
|
||||
*/
|
||||
readonly?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the checkbox
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to visually hide the label text
|
||||
* @default false
|
||||
*/
|
||||
hideLabel?: boolean;
|
||||
|
||||
/**
|
||||
* Set a name for the input element
|
||||
* @default ""
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Specify the title attribute for the label element
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Set an id for the input label
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
}
|
||||
|
||||
export default class Checkbox {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Specify whether the checkbox is checked
|
||||
* @default false
|
||||
*/
|
||||
checked?: boolean;
|
||||
|
||||
/**
|
||||
* Specify whether the checkbox is indeterminate
|
||||
* @default false
|
||||
*/
|
||||
indeterminate?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the checkbox to be read-only
|
||||
* @default false
|
||||
*/
|
||||
readonly?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the checkbox
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to visually hide the label text
|
||||
* @default false
|
||||
*/
|
||||
hideLabel?: boolean;
|
||||
|
||||
/**
|
||||
* Set a name for the input element
|
||||
* @default ""
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Specify the title attribute for the label element
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Set an id for the input label
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
};
|
||||
|
||||
$$prop_def: CheckboxProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "check", cb: (event: CustomEvent<boolean>) => void): () => void;
|
||||
|
|
5
types/Checkbox/CheckboxSkeleton.d.ts
vendored
5
types/Checkbox/CheckboxSkeleton.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class CheckboxSkeleton {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
|
||||
export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
|
||||
|
||||
export default class CheckboxSkeleton {
|
||||
$$prop_def: CheckboxSkeletonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
198
types/CodeSnippet/CodeSnippet.d.ts
vendored
198
types/CodeSnippet/CodeSnippet.d.ts
vendored
|
@ -1,104 +1,106 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface CodeSnippetProps {
|
||||
/**
|
||||
* Set the type of code snippet
|
||||
* @default "single"
|
||||
*/
|
||||
type?: "single" | "inline" | "multi";
|
||||
|
||||
/**
|
||||
* Set the code snippet text
|
||||
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
*/
|
||||
code?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to expand a multi-line code snippet (type="multi")
|
||||
* @default false
|
||||
*/
|
||||
expanded?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to hide the copy button
|
||||
* @default false
|
||||
*/
|
||||
hideCopyButton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to wrap the text
|
||||
* Note that `type` must be "multi"
|
||||
* @default false
|
||||
*/
|
||||
wrapText?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the copy button icon
|
||||
*/
|
||||
copyButtonDescription?: string;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label of the copy button
|
||||
*/
|
||||
copyLabel?: string;
|
||||
|
||||
/**
|
||||
* Specify the feedback text displayed when clicking the snippet
|
||||
* @default "Copied!"
|
||||
*/
|
||||
feedback?: string;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to display feedback text
|
||||
* @default 2000
|
||||
*/
|
||||
feedbackTimeout?: number;
|
||||
|
||||
/**
|
||||
* Specify the show less text
|
||||
* `type` must be "multi"
|
||||
* @default "Show less"
|
||||
*/
|
||||
showLessText?: string;
|
||||
|
||||
/**
|
||||
* Specify the show more text
|
||||
* `type` must be "multi"
|
||||
* @default "Show more"
|
||||
*/
|
||||
showMoreText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the show more/less button
|
||||
* @default false
|
||||
*/
|
||||
showMoreLess?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the code element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the pre HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLPreElement;
|
||||
}
|
||||
|
||||
export default class CodeSnippet {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the type of code snippet
|
||||
* @default "single"
|
||||
*/
|
||||
type?: "single" | "inline" | "multi";
|
||||
|
||||
/**
|
||||
* Set the code snippet text
|
||||
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
|
||||
*/
|
||||
code?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to expand a multi-line code snippet (type="multi")
|
||||
* @default false
|
||||
*/
|
||||
expanded?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to hide the copy button
|
||||
* @default false
|
||||
*/
|
||||
hideCopyButton?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to wrap the text
|
||||
* Note that `type` must be "multi"
|
||||
* @default false
|
||||
*/
|
||||
wrapText?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to display the skeleton state
|
||||
* @default false
|
||||
*/
|
||||
skeleton?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the copy button icon
|
||||
*/
|
||||
copyButtonDescription?: string;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label of the copy button
|
||||
*/
|
||||
copyLabel?: string;
|
||||
|
||||
/**
|
||||
* Specify the feedback text displayed when clicking the snippet
|
||||
* @default "Copied!"
|
||||
*/
|
||||
feedback?: string;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to display feedback text
|
||||
* @default 2000
|
||||
*/
|
||||
feedbackTimeout?: number;
|
||||
|
||||
/**
|
||||
* Specify the show less text
|
||||
* `type` must be "multi"
|
||||
* @default "Show less"
|
||||
*/
|
||||
showLessText?: string;
|
||||
|
||||
/**
|
||||
* Specify the show more text
|
||||
* `type` must be "multi"
|
||||
* @default "Show more"
|
||||
*/
|
||||
showMoreText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the show more/less button
|
||||
* @default false
|
||||
*/
|
||||
showMoreLess?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the code element
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the pre HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLPreElement;
|
||||
};
|
||||
|
||||
$$prop_def: CodeSnippetProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
17
types/CodeSnippet/CodeSnippetSkeleton.d.ts
vendored
17
types/CodeSnippet/CodeSnippetSkeleton.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class CodeSnippetSkeleton {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the type of code snippet
|
||||
* @default "single"
|
||||
*/
|
||||
type?: "single" | "inline" | "multi";
|
||||
};
|
||||
export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set the type of code snippet
|
||||
* @default "single"
|
||||
*/
|
||||
type?: "single" | "inline" | "multi";
|
||||
}
|
||||
|
||||
export default class CodeSnippetSkeleton {
|
||||
$$prop_def: CodeSnippetSkeletonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
225
types/ComboBox/ComboBox.d.ts
vendored
225
types/ComboBox/ComboBox.d.ts
vendored
|
@ -5,118 +5,121 @@ interface ComboBoxItem {
|
|||
text: string;
|
||||
}
|
||||
|
||||
export interface ComboBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set the combobox items
|
||||
* @default []
|
||||
*/
|
||||
items?: ComboBoxItem[];
|
||||
|
||||
/**
|
||||
* Override the display of a combobox item
|
||||
* @default (item) => item.text || item.id
|
||||
*/
|
||||
itemToString?: (item: ComboBoxItem) => string;
|
||||
|
||||
/**
|
||||
* Set the selected item by value index
|
||||
* @default -1
|
||||
*/
|
||||
selectedIndex?: number;
|
||||
|
||||
/**
|
||||
* Specify the selected combobox value
|
||||
* @default ""
|
||||
*/
|
||||
value?: string;
|
||||
|
||||
/**
|
||||
* Set the size of the combobox
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the combobox
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the title text of the combobox
|
||||
* @default ""
|
||||
*/
|
||||
titleText?: string;
|
||||
|
||||
/**
|
||||
* Specify the placeholder text
|
||||
* @default ""
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* Specify the helper text
|
||||
* @default ""
|
||||
*/
|
||||
helperText?: string;
|
||||
|
||||
/**
|
||||
* Specify the invalid state text
|
||||
* @default ""
|
||||
*/
|
||||
invalidText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to indicate an invalid state
|
||||
* @default false
|
||||
*/
|
||||
invalid?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to open the combobox menu dropdown
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Determine if an item should be filtered given the current combobox value
|
||||
* @default () => true
|
||||
*/
|
||||
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
|
||||
|
||||
/**
|
||||
* Override the default translation ids
|
||||
*/
|
||||
translateWithId?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the input
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the list HTML element
|
||||
* @default null
|
||||
*/
|
||||
listRef?: null | HTMLDivElement;
|
||||
}
|
||||
|
||||
export default class ComboBox {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the combobox items
|
||||
* @default []
|
||||
*/
|
||||
items?: ComboBoxItem[];
|
||||
|
||||
/**
|
||||
* Override the display of a combobox item
|
||||
* @default (item) => item.text || item.id
|
||||
*/
|
||||
itemToString?: (item: ComboBoxItem) => string;
|
||||
|
||||
/**
|
||||
* Set the selected item by value index
|
||||
*/
|
||||
selectedIndex?: number;
|
||||
|
||||
/**
|
||||
* Specify the selected combobox value
|
||||
* @default ""
|
||||
*/
|
||||
value?: string;
|
||||
|
||||
/**
|
||||
* Set the size of the combobox
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the combobox
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the title text of the combobox
|
||||
* @default ""
|
||||
*/
|
||||
titleText?: string;
|
||||
|
||||
/**
|
||||
* Specify the placeholder text
|
||||
* @default ""
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* Specify the helper text
|
||||
* @default ""
|
||||
*/
|
||||
helperText?: string;
|
||||
|
||||
/**
|
||||
* Specify the invalid state text
|
||||
* @default ""
|
||||
*/
|
||||
invalidText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to indicate an invalid state
|
||||
* @default false
|
||||
*/
|
||||
invalid?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to open the combobox menu dropdown
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Determine if an item should be filtered given the current combobox value
|
||||
* @default () => true
|
||||
*/
|
||||
shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
|
||||
|
||||
/**
|
||||
* Override the default translation ids
|
||||
*/
|
||||
translateWithId?: (id: any) => string;
|
||||
|
||||
/**
|
||||
* Set an id for the list box component
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the input
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the list HTML element
|
||||
* @default null
|
||||
*/
|
||||
listRef?: null | HTMLDivElement;
|
||||
};
|
||||
|
||||
$$prop_def: ComboBoxProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(
|
||||
|
|
87
types/ComposedModal/ComposedModal.d.ts
vendored
87
types/ComposedModal/ComposedModal.d.ts
vendored
|
@ -1,49 +1,50 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set the size of the composed modal
|
||||
*/
|
||||
size?: "xs" | "sm" | "lg";
|
||||
|
||||
/**
|
||||
* Set to `true` to open the modal
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the danger variant
|
||||
* @default false
|
||||
*/
|
||||
danger?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to prevent the modal from closing when clicking outside
|
||||
* @default false
|
||||
*/
|
||||
preventCloseOnClickOutside?: boolean;
|
||||
|
||||
/**
|
||||
* Specify a class for the inner modal
|
||||
* @default ""
|
||||
*/
|
||||
containerClass?: string;
|
||||
|
||||
/**
|
||||
* Specify a selector to be focused when opening the modal
|
||||
* @default "[data-modal-primary-focus]"
|
||||
*/
|
||||
selectorPrimaryFocus?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLDivElement;
|
||||
}
|
||||
|
||||
export default class ComposedModal {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the size of the composed modal
|
||||
*/
|
||||
size?: "xs" | "sm" | "lg";
|
||||
|
||||
/**
|
||||
* Set to `true` to open the modal
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the danger variant
|
||||
* @default false
|
||||
*/
|
||||
danger?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to prevent the modal from closing when clicking outside
|
||||
* @default false
|
||||
*/
|
||||
preventCloseOnClickOutside?: boolean;
|
||||
|
||||
/**
|
||||
* Specify a class for the inner modal
|
||||
* @default ""
|
||||
*/
|
||||
containerClass?: string;
|
||||
|
||||
/**
|
||||
* Specify a selector to be focused when opening the modal
|
||||
* @default "[data-modal-primary-focus]"
|
||||
*/
|
||||
selectorPrimaryFocus?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the top-level HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLDivElement;
|
||||
};
|
||||
|
||||
$$prop_def: ComposedModalProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
29
types/ComposedModal/ModalBody.d.ts
vendored
29
types/ComposedModal/ModalBody.d.ts
vendored
|
@ -1,20 +1,21 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ModalBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` if the modal contains form elements
|
||||
* @default false
|
||||
*/
|
||||
hasForm?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` if the modal contains scrolling content
|
||||
* @default false
|
||||
*/
|
||||
hasScrollingContent?: boolean;
|
||||
}
|
||||
|
||||
export default class ModalBody {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set to `true` if the modal contains form elements
|
||||
* @default false
|
||||
*/
|
||||
hasForm?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` if the modal contains scrolling content
|
||||
* @default false
|
||||
*/
|
||||
hasScrollingContent?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: ModalBodyProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
73
types/ComposedModal/ModalFooter.d.ts
vendored
73
types/ComposedModal/ModalFooter.d.ts
vendored
|
@ -1,42 +1,43 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ModalFooterProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Specify the primary button text
|
||||
* @default ""
|
||||
*/
|
||||
primaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the primary button
|
||||
* @default false
|
||||
*/
|
||||
primaryButtonDisabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify a class for the primary button
|
||||
*/
|
||||
primaryClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the secondary button text
|
||||
* @default ""
|
||||
*/
|
||||
secondaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* Specify a class for the secondary button
|
||||
*/
|
||||
secondaryClass?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the danger variant
|
||||
* @default false
|
||||
*/
|
||||
danger?: boolean;
|
||||
}
|
||||
|
||||
export default class ModalFooter {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Specify the primary button text
|
||||
* @default ""
|
||||
*/
|
||||
primaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the primary button
|
||||
* @default false
|
||||
*/
|
||||
primaryButtonDisabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify a class for the primary button
|
||||
*/
|
||||
primaryClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the secondary button text
|
||||
* @default ""
|
||||
*/
|
||||
secondaryButtonText?: string;
|
||||
|
||||
/**
|
||||
* Specify a class for the secondary button
|
||||
*/
|
||||
secondaryClass?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the danger variant
|
||||
* @default false
|
||||
*/
|
||||
danger?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: ModalFooterProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
89
types/ComposedModal/ModalHeader.d.ts
vendored
89
types/ComposedModal/ModalHeader.d.ts
vendored
|
@ -1,50 +1,51 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Specify the modal title
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the modal label
|
||||
* @default ""
|
||||
*/
|
||||
label?: string;
|
||||
|
||||
/**
|
||||
* Specify the label class
|
||||
* @default ""
|
||||
*/
|
||||
labelClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the title class
|
||||
* @default ""
|
||||
*/
|
||||
titleClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the close class
|
||||
* @default ""
|
||||
*/
|
||||
closeClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the close icon class
|
||||
* @default ""
|
||||
*/
|
||||
closeIconClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the close icon
|
||||
* @default "Close"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
}
|
||||
|
||||
export default class ModalHeader {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Specify the modal title
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the modal label
|
||||
* @default ""
|
||||
*/
|
||||
label?: string;
|
||||
|
||||
/**
|
||||
* Specify the label class
|
||||
* @default ""
|
||||
*/
|
||||
labelClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the title class
|
||||
* @default ""
|
||||
*/
|
||||
titleClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the close class
|
||||
* @default ""
|
||||
*/
|
||||
closeClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the close icon class
|
||||
* @default ""
|
||||
*/
|
||||
closeIconClass?: string;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the close icon
|
||||
* @default "Close"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
};
|
||||
|
||||
$$prop_def: ModalHeaderProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
39
types/ContentSwitcher/ContentSwitcher.d.ts
vendored
39
types/ContentSwitcher/ContentSwitcher.d.ts
vendored
|
@ -1,25 +1,26 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set the selected index of the switch item
|
||||
* @default 0
|
||||
*/
|
||||
selectedIndex?: number;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the size of the content switcher
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
}
|
||||
|
||||
export default class ContentSwitcher {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Set the selected index of the switch item
|
||||
* @default 0
|
||||
*/
|
||||
selectedIndex?: number;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the size of the content switcher
|
||||
*/
|
||||
size?: "sm" | "xl";
|
||||
};
|
||||
|
||||
$$prop_def: ContentSwitcherProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
66
types/ContentSwitcher/Switch.d.ts
vendored
66
types/ContentSwitcher/Switch.d.ts
vendored
|
@ -1,38 +1,40 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Specify the switch text
|
||||
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
|
||||
* @default "Provide text"
|
||||
*/
|
||||
text?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` for the switch to be selected
|
||||
* @default false
|
||||
*/
|
||||
selected?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the switch
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the button element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class Switch {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
|
||||
/**
|
||||
* Specify the switch text
|
||||
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
|
||||
* @default "Provide text"
|
||||
*/
|
||||
text?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` for the switch to be selected
|
||||
* @default false
|
||||
*/
|
||||
selected?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the switch
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the button element
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
};
|
||||
|
||||
$$prop_def: SwitchProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
41
types/Copy/Copy.d.ts
vendored
41
types/Copy/Copy.d.ts
vendored
|
@ -1,26 +1,27 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface CopyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Set the feedback text shown after clicking the button
|
||||
* @default "Copied!"
|
||||
*/
|
||||
feedback?: string;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to display feedback text
|
||||
* @default 2000
|
||||
*/
|
||||
feedbackTimeout?: number;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class Copy {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
|
||||
/**
|
||||
* Set the feedback text shown after clicking the button
|
||||
* @default "Copied!"
|
||||
*/
|
||||
feedback?: string;
|
||||
|
||||
/**
|
||||
* Set the timeout duration (ms) to display feedback text
|
||||
* @default 2000
|
||||
*/
|
||||
feedbackTimeout?: number;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the button HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLButtonElement;
|
||||
};
|
||||
|
||||
$$prop_def: CopyProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
17
types/CopyButton/CopyButton.d.ts
vendored
17
types/CopyButton/CopyButton.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class CopyButton {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Set the title and ARIA label for the copy button
|
||||
* @default "Copy to clipboard"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
};
|
||||
export interface CopyButtonProps {
|
||||
/**
|
||||
* Set the title and ARIA label for the copy button
|
||||
* @default "Copy to clipboard"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
}
|
||||
|
||||
export default class CopyButton {
|
||||
$$prop_def: CopyButtonProps;
|
||||
$$slot_def: {};
|
||||
|
||||
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
|
||||
|
|
193
types/DataTable/DataTable.d.ts
vendored
193
types/DataTable/DataTable.d.ts
vendored
|
@ -11,106 +11,107 @@ interface Header {
|
|||
|
||||
type Headers = Header[];
|
||||
|
||||
export interface DataTableProps {
|
||||
/**
|
||||
* Specify the data table headers
|
||||
* @default []
|
||||
*/
|
||||
headers?: Headers;
|
||||
|
||||
/**
|
||||
* Specify the rows the data table should render
|
||||
* keys defined in `headers` are used for the row ids
|
||||
* @default []
|
||||
*/
|
||||
rows?: Object[];
|
||||
|
||||
/**
|
||||
* Set the size of the data table
|
||||
*/
|
||||
size?: "compact" | "short" | "tall";
|
||||
|
||||
/**
|
||||
* Specify the title of the data table
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the description of the data table
|
||||
* @default ""
|
||||
*/
|
||||
description?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use zebra styles
|
||||
* @default false
|
||||
*/
|
||||
zebra?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the sortable variant
|
||||
* @default false
|
||||
*/
|
||||
sortable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the expandable variant
|
||||
* Automatically set to `true` if `batchExpansion` is `true`
|
||||
* @default false
|
||||
*/
|
||||
expandable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable batch expansion
|
||||
* @default false
|
||||
*/
|
||||
batchExpansion?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the row ids to be expanded
|
||||
* @default []
|
||||
*/
|
||||
expandedRowIds?: string[];
|
||||
|
||||
/**
|
||||
* Set to `true` for the radio selection variant
|
||||
* @default false
|
||||
*/
|
||||
radio?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the selectable variant
|
||||
* Automatically set to `true` if `radio` or `batchSelection` are `true`
|
||||
* @default false
|
||||
*/
|
||||
selectable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable batch selection
|
||||
* @default false
|
||||
*/
|
||||
batchSelection?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the row ids to be selected
|
||||
* @default []
|
||||
*/
|
||||
selectedRowIds?: string[];
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
}
|
||||
|
||||
export default class DataTable {
|
||||
$$prop_def: {
|
||||
/**
|
||||
* Specify the data table headers
|
||||
* @default []
|
||||
*/
|
||||
headers?: Headers;
|
||||
|
||||
/**
|
||||
* Specify the rows the data table should render
|
||||
* keys defined in `headers` are used for the row ids
|
||||
* @default []
|
||||
*/
|
||||
rows?: Object[];
|
||||
|
||||
/**
|
||||
* Set the size of the data table
|
||||
*/
|
||||
size?: "compact" | "short" | "tall";
|
||||
|
||||
/**
|
||||
* Specify the title of the data table
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the description of the data table
|
||||
* @default ""
|
||||
*/
|
||||
description?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use zebra styles
|
||||
* @default false
|
||||
*/
|
||||
zebra?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the sortable variant
|
||||
* @default false
|
||||
*/
|
||||
sortable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the expandable variant
|
||||
* Automatically set to `true` if `batchExpansion` is `true`
|
||||
* @default false
|
||||
*/
|
||||
expandable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable batch expansion
|
||||
* @default false
|
||||
*/
|
||||
batchExpansion?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the row ids to be expanded
|
||||
* @default []
|
||||
*/
|
||||
expandedRowIds?: string[];
|
||||
|
||||
/**
|
||||
* Set to `true` for the radio selection variant
|
||||
* @default false
|
||||
*/
|
||||
radio?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the selectable variant
|
||||
* Automatically set to `true` if `radio` or `batchSelection` are `true`
|
||||
* @default false
|
||||
*/
|
||||
selectable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable batch selection
|
||||
* @default false
|
||||
*/
|
||||
batchSelection?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the row ids to be selected
|
||||
* @default []
|
||||
*/
|
||||
selectedRowIds?: string[];
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: DataTableProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
["expanded-row"]: { row: Object };
|
||||
["cell-header"]: { header: Header };
|
||||
cell: { row: Object; cell: Object };
|
||||
["cell-header"]: { header: Header };
|
||||
["expanded-row"]: { row: Object };
|
||||
};
|
||||
|
||||
$on(
|
||||
|
|
75
types/DataTable/Table.d.ts
vendored
75
types/DataTable/Table.d.ts
vendored
|
@ -1,43 +1,44 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
|
||||
/**
|
||||
* Set the size of the table
|
||||
*/
|
||||
size?: "compact" | "short" | "tall";
|
||||
|
||||
/**
|
||||
* Set to `true` to use zebra styles
|
||||
* @default false
|
||||
*/
|
||||
zebra?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use static width
|
||||
* @default false
|
||||
*/
|
||||
useStaticWidth?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the bordered variant
|
||||
* @default false
|
||||
*/
|
||||
shouldShowBorder?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the sortable variant
|
||||
* @default false
|
||||
*/
|
||||
sortable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
}
|
||||
|
||||
export default class Table {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
|
||||
/**
|
||||
* Set the size of the table
|
||||
*/
|
||||
size?: "compact" | "short" | "tall";
|
||||
|
||||
/**
|
||||
* Set to `true` to use zebra styles
|
||||
* @default false
|
||||
*/
|
||||
zebra?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use static width
|
||||
* @default false
|
||||
*/
|
||||
useStaticWidth?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the bordered variant
|
||||
* @default false
|
||||
*/
|
||||
shouldShowBorder?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` for the sortable variant
|
||||
* @default false
|
||||
*/
|
||||
sortable?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: TableProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/TableBody.d.ts
vendored
5
types/DataTable/TableBody.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class TableBody {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
|
||||
export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
|
||||
|
||||
export default class TableBody {
|
||||
$$prop_def: TableBodyProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/TableCell.d.ts
vendored
5
types/DataTable/TableCell.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class TableCell {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
|
||||
export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
|
||||
|
||||
export default class TableCell {
|
||||
$$prop_def: TableCellProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
41
types/DataTable/TableContainer.d.ts
vendored
41
types/DataTable/TableContainer.d.ts
vendored
|
@ -1,26 +1,27 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Specify the title of the data table
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the description of the data table
|
||||
* @default ""
|
||||
*/
|
||||
description?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
}
|
||||
|
||||
export default class TableContainer {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Specify the title of the data table
|
||||
* @default ""
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* Specify the description of the data table
|
||||
* @default ""
|
||||
*/
|
||||
description?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable a sticky header
|
||||
* @default false
|
||||
*/
|
||||
stickyHeader?: boolean;
|
||||
};
|
||||
|
||||
$$prop_def: TableContainerProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/TableHead.d.ts
vendored
5
types/DataTable/TableHead.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class TableHead {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
|
||||
export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
|
||||
|
||||
export default class TableHead {
|
||||
$$prop_def: TableHeadProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
40
types/DataTable/TableHeader.d.ts
vendored
40
types/DataTable/TableHeader.d.ts
vendored
|
@ -1,25 +1,27 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
|
||||
/**
|
||||
* Specify the `scope` attribute
|
||||
* @default "col"
|
||||
*/
|
||||
scope?: string;
|
||||
|
||||
/**
|
||||
* Override the default id translations
|
||||
* @default () => ""
|
||||
*/
|
||||
translateWithId?: () => string;
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export default class TableHeader {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
|
||||
/**
|
||||
* Specify the `scope` attribute
|
||||
* @default "col"
|
||||
*/
|
||||
scope?: string;
|
||||
|
||||
/**
|
||||
* Override the default id translations
|
||||
* @default () => ""
|
||||
*/
|
||||
translateWithId?: () => string;
|
||||
|
||||
/**
|
||||
* Set an id for the top-level element
|
||||
*/
|
||||
id?: string;
|
||||
};
|
||||
|
||||
$$prop_def: TableHeaderProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/TableRow.d.ts
vendored
5
types/DataTable/TableRow.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class TableRow {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
|
||||
export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
|
||||
|
||||
export default class TableRow {
|
||||
$$prop_def: TableRowProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
17
types/DataTable/Toolbar.d.ts
vendored
17
types/DataTable/Toolbar.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class Toolbar {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
|
||||
/**
|
||||
* Specify the toolbar size
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "sm" | "default";
|
||||
};
|
||||
export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
|
||||
/**
|
||||
* Specify the toolbar size
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "sm" | "default";
|
||||
}
|
||||
|
||||
export default class Toolbar {
|
||||
$$prop_def: ToolbarProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
17
types/DataTable/ToolbarBatchActions.d.ts
vendored
17
types/DataTable/ToolbarBatchActions.d.ts
vendored
|
@ -1,14 +1,15 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class ToolbarBatchActions {
|
||||
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
|
||||
/**
|
||||
* Override the total items selected text
|
||||
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
|
||||
*/
|
||||
formatTotalSelected?: (totalSelected: number) => string;
|
||||
};
|
||||
export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Override the total items selected text
|
||||
* @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
|
||||
*/
|
||||
formatTotalSelected?: (totalSelected: number) => string;
|
||||
}
|
||||
|
||||
export default class ToolbarBatchActions {
|
||||
$$prop_def: ToolbarBatchActionsProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/ToolbarContent.d.ts
vendored
5
types/DataTable/ToolbarContent.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class ToolbarContent {
|
||||
$$prop_def: {};
|
||||
export interface ToolbarContentProps {}
|
||||
|
||||
export default class ToolbarContent {
|
||||
$$prop_def: ToolbarContentProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
5
types/DataTable/ToolbarMenu.d.ts
vendored
5
types/DataTable/ToolbarMenu.d.ts
vendored
|
@ -1,8 +1,9 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export default class ToolbarMenu {
|
||||
$$prop_def: {};
|
||||
export interface ToolbarMenuProps {}
|
||||
|
||||
export default class ToolbarMenu {
|
||||
$$prop_def: ToolbarMenuProps;
|
||||
$$slot_def: {
|
||||
default: {};
|
||||
};
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue