mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 11:59:34 +00:00
8ddf2def8b* chore(deps-dev): upgrade carbon-components to v10.36.0 * feat(structured-list): add condensed, flush props * fix(structured-list): deprecate the border prop * fix(code-snippet): set min/max height for multi-line code snippet #656 Fixes #656 * fix(image-loader): make SSR compatible using a window type check guard * docs(tag): add separate disabled example for filterable/interactive tags * docs: update number of supported chart types * feat(side-nav): support rail variant * feat(ui-shell): add isSelected prop to HeaderNavItem * fix(ui-shell): default isSelected to false in SideNavMenuItem * fix(text-area): forward missing keydown event #665 Fixes #665 * feat: forward keyup event to components with inputs * feat(checkbox): make labelText slottable #563 Closes #563 * feat: make labelText slottable Related #563 * docs(component-api): account for undefined type * docs(ui-shell): link to correct rail source * fix(ui-shell): default isSelected in HeaderNavItem to false
86 lines
1.9 KiB
Svelte
86 lines
1.9 KiB
Svelte
<script>
|
|
/**
|
|
* Specify the accepted file types
|
|
* @type {string[]}
|
|
*/
|
|
export let accept = [];
|
|
|
|
/** Set to `true` to allow multiple files */
|
|
export let multiple = false;
|
|
|
|
/** Set to `true` to disable the input */
|
|
export let disabled = false;
|
|
|
|
/** Set to `true` to disable label changes */
|
|
export let disableLabelChanges = false;
|
|
|
|
/**
|
|
* Specify the kind of file uploader button
|
|
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}]
|
|
*/
|
|
export let kind = "primary";
|
|
|
|
/** Specify the label text */
|
|
export let labelText = "Add file";
|
|
|
|
/** Specify the label role */
|
|
export let role = "button";
|
|
|
|
/** Specify `tabindex` attribute */
|
|
export let tabindex = "0";
|
|
|
|
/** 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 */
|
|
export let ref = null;
|
|
</script>
|
|
|
|
<label
|
|
aria-disabled="{disabled}"
|
|
for="{id}"
|
|
tabindex="{disabled ? '-1' : tabindex}"
|
|
class:bx--btn="{true}"
|
|
class:bx--btn--sm="{true}"
|
|
class:bx--btn--disabled="{disabled}"
|
|
class="{kind && `bx--btn--${kind}`}"
|
|
on:keydown
|
|
on:keydown="{({ key }) => {
|
|
if (key === ' ' || key === 'Enter') {
|
|
ref.click();
|
|
}
|
|
}}"
|
|
>
|
|
<span role="{role}">
|
|
<slot name="labelText">
|
|
{labelText}
|
|
</slot>
|
|
</span>
|
|
</label>
|
|
<input
|
|
bind:this="{ref}"
|
|
type="file"
|
|
tabindex="-1"
|
|
accept="{accept}"
|
|
disabled="{disabled}"
|
|
id="{id}"
|
|
multiple="{multiple}"
|
|
name="{name}"
|
|
class:bx--visually-hidden="{true}"
|
|
{...$$restProps}
|
|
on:change|stopPropagation
|
|
on:change|stopPropagation="{({ target }) => {
|
|
const files = target.files;
|
|
const length = files.length;
|
|
if (files && !disableLabelChanges) {
|
|
labelText = length > 1 ? `${length} files` : files[0].name;
|
|
}
|
|
}}"
|
|
on:click
|
|
on:click="{({ target }) => {
|
|
target.value = null;
|
|
}}"
|
|
/>
|