diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 58506edc..052c625c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -921,6 +921,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | | iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | | text | let | No | string | undefined | Specify the text to copy | | copy | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | @@ -3163,8 +3165,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the value of the search input | | expanded | let | Yes | boolean | false | Set to `true to expand the search input | +| value | let | Yes | any | "" | Specify the value of the search input | | small | let | No | boolean | false | -- | | size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | searchClass | let | No | string | "" | Specify the class name passed to the outer div element | @@ -3172,7 +3174,6 @@ None. | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the search input | | expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| type | let | No | string | "text" | Specify the `type` attribute of the search input | | placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | | autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | | autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 0c1e3f74..f7698d84 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2180,6 +2180,28 @@ "moduleName": "CopyButton", "filePath": "src/CopyButton/CopyButton.svelte", "props": [ + { + "name": "feedback", + "kind": "let", + "description": "Set the feedback text shown after clicking the button", + "type": "string", + "value": "\"Copied!\"", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, + { + "name": "feedbackTimeout", + "kind": "let", + "description": "Set the timeout duration (ms) to display feedback text", + "type": "number", + "value": "2000", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", @@ -2216,16 +2238,12 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "Copy" }, - { "type": "forwarded", "name": "animationend", "element": "Copy" }, + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "animationend", "element": "button" }, { "type": "dispatched", "name": "copy" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "Copy" }, - "extends": { - "interface": "CopyProps", - "import": "\"../Copy/Copy.svelte\"" - } + "rest_props": { "type": "Element", "name": "button" } }, { "moduleName": "DataTable", @@ -9221,6 +9239,17 @@ "moduleName": "Search", "filePath": "src/Search/Search.svelte", "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the search input", + "type": "any", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": true + }, { "name": "small", "kind": "let", @@ -9308,28 +9337,6 @@ "constant": false, "reactive": true }, - { - "name": "value", - "kind": "let", - "description": "Specify the value of the search input", - "type": "string", - "value": "\"\"", - "isFunction": false, - "isFunctionDeclaration": false, - "constant": false, - "reactive": true - }, - { - "name": "type", - "kind": "let", - "description": "Specify the `type` attribute of the search input", - "type": "string", - "value": "\"text\"", - "isFunction": false, - "isFunctionDeclaration": false, - "constant": false, - "reactive": false - }, { "name": "placeholder", "kind": "let", diff --git a/docs/src/pages/components/Form.svx b/docs/src/pages/components/Form.svx index 5d66a2dd..1f007664 100644 --- a/docs/src/pages/components/Form.svx +++ b/docs/src/pages/components/Form.svx @@ -60,3 +60,17 @@ components: ["Form", "FormGroup"] + +### Prevent default behavior + +The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior. + +``` +
{ + e.preventDefault(); + console.log("submit", e); +}}> + + + +``` diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index 64add0c3..1ab20730 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -88,15 +88,18 @@ /** Obtain a reference to the pre HTML element */ export let ref = null; - import { createEventDispatcher, tick } from "svelte"; + import { createEventDispatcher, tick, onMount } from "svelte"; import ChevronDown16 from "../icons/ChevronDown16.svelte"; import Button from "../Button/Button.svelte"; - import Copy from "../Copy/Copy.svelte"; import CopyButton from "../CopyButton/CopyButton.svelte"; import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte"; const dispatch = createEventDispatcher(); + /** @type {"fade-in" | "fade-out"} */ + let animation = undefined; + let timeout = undefined; + function setShowMoreLess() { const { height } = ref.getBoundingClientRect(); if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255; @@ -114,6 +117,10 @@ if (code === undefined) setShowMoreLess(); if (code) tick().then(setShowMoreLess); } + + onMount(() => { + return () => clearTimeout(timeout); + }); @@ -144,20 +151,35 @@ {:else} - {code} - + + {/if} {:else}
- /** @extends {"../Copy/Copy.svelte"} CopyProps */ + /** Set the feedback text shown after clicking the button */ + export let feedback = "Copied!"; + + /** Set the timeout duration (ms) to display feedback text */ + export let feedbackTimeout = 2000; /** Set the title and ARIA label for the copy button */ export let iconDescription = "Copy to clipboard"; @@ -22,15 +26,28 @@ } }; - import Copy from "../Copy/Copy.svelte"; + import { createEventDispatcher, onMount } from "svelte"; import Copy16 from "../icons/Copy16.svelte"; - import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); + + /** @type {"fade-in" | "fade-out"} */ + let animation = undefined; + let timeout = undefined; + + onMount(() => { + return () => clearTimeout(timeout); + }); - { + animation = 'fade-out'; + }, feedbackTimeout); }}" on:animationend + on:animationend="{({ animationName }) => { + if (animationName === 'hide-feedback') { + animation = undefined; + } + }}" > - + + diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte index 502ae9e3..5c5e1d9f 100644 --- a/src/Form/Form.svelte +++ b/src/Form/Form.svelte @@ -13,7 +13,7 @@ on:mouseover on:mouseenter on:mouseleave - on:submit|preventDefault + on:submit > diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 0658f266..b073377c 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -4,6 +4,12 @@ * @event {null} collapse */ + /** + * Specify the value of the search input + * @type {any} + */ + export let value = ""; + /** * @deprecated this prop will be removed in the next major release * Use size="sm" instead @@ -34,12 +40,6 @@ /** Set to `true to expand the search input */ export let expanded = false; - /** Specify the value of the search input */ - export let value = ""; - - /** Specify the `type` attribute of the search input */ - export let type = "text"; - /** Specify the `placeholder` attribute of the search input */ export let placeholder = "Search..."; @@ -125,6 +125,8 @@ import { SvelteComponentTyped } from "svelte"; -import { CopyProps } from "../Copy/Copy.svelte"; -export interface CopyButtonProps extends CopyProps { +export interface CopyButtonProps + extends svelte.JSX.HTMLAttributes { + /** + * 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; + /** * Set the title and ARIA label for the copy button * @default "Copy to clipboard" diff --git a/types/Search/Search.svelte.d.ts b/types/Search/Search.svelte.d.ts index c340ae05..44b5b19c 100644 --- a/types/Search/Search.svelte.d.ts +++ b/types/Search/Search.svelte.d.ts @@ -2,6 +2,12 @@ import { SvelteComponentTyped } from "svelte"; export interface SearchProps { + /** + * Specify the value of the search input + * @default "" + */ + value?: any; + /** * @default false */ @@ -49,18 +55,6 @@ export interface SearchProps { */ expanded?: boolean; - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Specify the `type` attribute of the search input - * @default "text" - */ - type?: string; - /** * Specify the `placeholder` attribute of the search input * @default "Search..."