diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c48ec72e..c204b6b9 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1250,24 +1250,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- | -| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | -| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | -| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | -| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files | -| labelDescription | No | let | No | string | "" | Specify the label description | -| labelTitle | No | let | No | string | "" | Specify the label title | -| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | -| buttonLabel | No | let | No | string | "" | Specify the button label | -| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | -| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files | +| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| buttonLabel | No | let | No | string | "" | Specify the button label | +| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :--------------- | :------ | :---- | :------------------------------ | +| labelDescription | No | -- | {labelDescription} | +| labelTitle | No | -- | {labelTitle} | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 381a6bcc..e5b079ce 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3795,9 +3795,9 @@ "reactive": false }, { - "name": "labelDescription", + "name": "labelTitle", "kind": "let", - "description": "Specify the label description", + "description": "Specify the label title.\nAlternatively, use the named slot \"labelTitle\" (e.g., `...`)", "type": "string", "value": "\"\"", "isFunction": false, @@ -3807,9 +3807,9 @@ "reactive": false }, { - "name": "labelTitle", + "name": "labelDescription", "kind": "let", - "description": "Specify the label title", + "description": "Specify the label description.\nAlternatively, use the named slot \"labelDescription\" (e.g., `...`)", "type": "string", "value": "\"\"", "isFunction": false, @@ -3868,7 +3868,20 @@ } ], "moduleExports": [], - "slots": [], + "slots": [ + { + "name": "labelDescription", + "default": false, + "fallback": "{labelDescription}", + "slot_props": "{}" + }, + { + "name": "labelTitle", + "default": false, + "fallback": "{labelTitle}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte index 168bbaa1..dc887999 100644 --- a/src/FileUploader/FileUploader.svelte +++ b/src/FileUploader/FileUploader.svelte @@ -37,12 +37,18 @@ files = []; }; - /** Specify the label description */ - export let labelDescription = ""; - - /** Specify the label title */ + /** + * Specify the label title. + * Alternatively, use the named slot "labelTitle" (e.g., `...`) + */ export let labelTitle = ""; + /** + * Specify the label description. + * Alternatively, use the named slot "labelDescription" (e.g., `...`) + */ + export let labelDescription = ""; + /** * Specify the kind of file uploader button * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} @@ -103,20 +109,24 @@ on:mouseenter on:mouseleave > - {#if labelTitle} + {#if labelTitle || $$slots.labelTitle}

- {labelTitle} + + {labelTitle} +

{/if} - {#if labelDescription} + {#if labelDescription || $$slots.labelDescription}

- {labelDescription} + + {labelDescription} +

{/if} ...`) * @default "" */ labelTitle?: string; + /** + * Specify the label description. + * Alternatively, use the named slot "labelDescription" (e.g., `...`) + * @default "" + */ + labelDescription?: string; + /** * Specify the kind of file uploader button * @default "primary" @@ -85,7 +87,7 @@ export default class FileUploader extends SvelteComponentTyped< mouseleave: WindowEventMap["mouseleave"]; keydown: WindowEventMap["keydown"]; }, - {} + { labelDescription: {}; labelTitle: {} } > { /** * Programmatically clear the uploaded files