mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(file-uploader): make labelTitle, labelDescription slottable (#1780)
This commit is contained in:
Eric Liu
GitHub
parent
7ef8b73252
commit
239f1b10e5
4 changed files with 64 additions and 36 deletions
|
|
@ -1250,24 +1250,27 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
|
||||
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
|
||||
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
|
||||
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
|
||||
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
|
||||
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
|
||||
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description |
|
||||
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | <code>"primary"</code> | Specify the kind of file uploader button |
|
||||
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
|
||||
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
|
||||
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
|
||||
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
|
||||
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
|
||||
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) |
|
||||
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger"</code> | <code>"primary"</code> | Specify the kind of file uploader button |
|
||||
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :--------------- | :------ | :---- | :------------------------------ |
|
||||
| labelDescription | No | -- | <code>{labelDescription}</code> |
|
||||
| labelTitle | No | -- | <code>{labelTitle}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
|||
|
|
@ -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., `<span slot=\"labelTitle\">...</span>`)",
|
||||
"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., `<span slot=\"labelDescription\">...</span>`)",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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., `<span slot="labelTitle">...</span>`)
|
||||
*/
|
||||
export let labelTitle = "";
|
||||
|
||||
/**
|
||||
* Specify the label description.
|
||||
* Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
|
||||
*/
|
||||
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}
|
||||
<p
|
||||
class:bx--file--label="{true}"
|
||||
class:bx--label-description--disabled="{disabled}"
|
||||
>
|
||||
{labelTitle}
|
||||
<slot name="labelTitle">
|
||||
{labelTitle}
|
||||
</slot>
|
||||
</p>
|
||||
{/if}
|
||||
{#if labelDescription}
|
||||
{#if labelDescription || $$slots.labelDescription}
|
||||
<p
|
||||
class:bx--label-description="{true}"
|
||||
class:bx--label-description--disabled="{disabled}"
|
||||
>
|
||||
{labelDescription}
|
||||
<slot name="labelDescription">
|
||||
{labelDescription}
|
||||
</slot>
|
||||
</p>
|
||||
{/if}
|
||||
<FileUploaderButton
|
||||
|
|
|
|||
18
types/FileUploader/FileUploader.svelte.d.ts
vendored
18
types/FileUploader/FileUploader.svelte.d.ts
vendored
|
|
@ -35,17 +35,19 @@ export interface FileUploaderProps extends RestProps {
|
|||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the label description
|
||||
* @default ""
|
||||
*/
|
||||
labelDescription?: string;
|
||||
|
||||
/**
|
||||
* Specify the label title
|
||||
* Specify the label title.
|
||||
* Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`)
|
||||
* @default ""
|
||||
*/
|
||||
labelTitle?: string;
|
||||
|
||||
/**
|
||||
* Specify the label description.
|
||||
* Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
|
||||
* @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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue