mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
chore(prettier): use svelteStrictMode
This commit is contained in:
Eric Liu
parent
322b238cf0
commit
42b8159b1c
182 changed files with 2020 additions and 1912 deletions
|
|
@ -4,7 +4,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -19,36 +19,36 @@
|
|||
{:else if story === 'drop container'}
|
||||
<FileUploaderDropContainer
|
||||
{...$$props}
|
||||
on:add={({ detail }) => {
|
||||
on:add="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}} />
|
||||
}}" />
|
||||
{:else if story === 'item'}
|
||||
<FileUploaderItem
|
||||
{...$$props}
|
||||
on:delete={({ detail }) => {
|
||||
on:delete="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}}
|
||||
on:click={() => {
|
||||
}}"
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}} />
|
||||
}}" />
|
||||
{:else if story === 'uploader'}
|
||||
<div class="bx--file__container">
|
||||
<FileUploader
|
||||
bind:this={fileUploader}
|
||||
bind:this="{fileUploader}"
|
||||
{...$$props}
|
||||
bind:files
|
||||
on:add={({ detail }) => {
|
||||
on:add="{({ detail }) => {
|
||||
console.log('add', detail);
|
||||
}}
|
||||
on:remove={({ detail }) => {
|
||||
}}"
|
||||
on:remove="{({ detail }) => {
|
||||
console.log('remove', detail);
|
||||
}} />
|
||||
}}" />
|
||||
<Button
|
||||
kind="secondary"
|
||||
size="small"
|
||||
style="margin-top: 1rem"
|
||||
{disabled}
|
||||
on:click={fileUploader.clearFiles}>
|
||||
disabled="{disabled}"
|
||||
on:click="{fileUploader.clearFiles}">
|
||||
Clear File{files.length === 1 ? '' : 's'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,43 +90,43 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<strong class:bx--file--label={true}>{labelTitle}</strong>
|
||||
<p class:bx--label-description={true}>{labelDescription}</p>
|
||||
<strong class:bx--file--label="{true}">{labelTitle}</strong>
|
||||
<p class:bx--label-description="{true}">{labelDescription}</p>
|
||||
<FileUploaderButton
|
||||
disableLabelChanges
|
||||
labelText={buttonLabel}
|
||||
{accept}
|
||||
{name}
|
||||
{multiple}
|
||||
{kind}
|
||||
labelText="{buttonLabel}"
|
||||
accept="{accept}"
|
||||
name="{name}"
|
||||
multiple="{multiple}"
|
||||
kind="{kind}"
|
||||
on:change
|
||||
on:change={({ target }) => {
|
||||
on:change="{({ target }) => {
|
||||
files = [...target.files].map(({ name }) => name);
|
||||
}} />
|
||||
<div class:bx--file-container={true}>
|
||||
}}" />
|
||||
<div class:bx--file-container="{true}">
|
||||
{#each files as name, i (name)}
|
||||
<span class:bx--file__selected-file={true}>
|
||||
<p class:bx--file-filename={true}>{name}</p>
|
||||
<span class:bx--file__state-container={true}>
|
||||
<span class:bx--file__selected-file="{true}">
|
||||
<p class:bx--file-filename="{true}">{name}</p>
|
||||
<span class:bx--file__state-container="{true}">
|
||||
<Filename
|
||||
{iconDescription}
|
||||
{status}
|
||||
iconDescription="{iconDescription}"
|
||||
status="{status}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
files = files.filter((_, index) => index !== i);
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
files = files.filter((_, index) => index !== i);
|
||||
}} />
|
||||
}}" />
|
||||
</span>
|
||||
</span>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -67,41 +67,41 @@
|
|||
</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}`}
|
||||
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 }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}>
|
||||
<span {role}>{labelText}</span>
|
||||
}}">
|
||||
<span role="{role}">{labelText}</span>
|
||||
</label>
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="file"
|
||||
tabindex="-1"
|
||||
{accept}
|
||||
{disabled}
|
||||
{id}
|
||||
{multiple}
|
||||
{name}
|
||||
class:bx--visually-hidden={true}
|
||||
accept="{accept}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
multiple="{multiple}"
|
||||
name="{name}"
|
||||
class:bx--visually-hidden="{true}"
|
||||
{...$$restProps}
|
||||
on:change|stopPropagation
|
||||
on:change|stopPropagation={({ target }) => {
|
||||
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 }) => {
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}} />
|
||||
}}" />
|
||||
|
|
|
|||
|
|
@ -72,63 +72,63 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--file={true}
|
||||
class:bx--file="{true}"
|
||||
{...$$restProps}
|
||||
on:dragover
|
||||
on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = true;
|
||||
dataTransfer.dropEffect = 'copy';
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:dragleave
|
||||
on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = false;
|
||||
dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:drop
|
||||
on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = false;
|
||||
dispatch('add', validateFiles(dataTransfer.files));
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<label
|
||||
for={id}
|
||||
{tabindex}
|
||||
class:bx--file-browse-btn={true}
|
||||
class:bx--file-browse-btn--disabled={disabled}
|
||||
for="{id}"
|
||||
tabindex="{tabindex}"
|
||||
class:bx--file-browse-btn="{true}"
|
||||
class:bx--file-browse-btn--disabled="{disabled}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<div
|
||||
{role}
|
||||
class:bx--file__drop-container={true}
|
||||
class:bx--file__drop-container--drag-over={over}>
|
||||
role="{role}"
|
||||
class:bx--file__drop-container="{true}"
|
||||
class:bx--file__drop-container--drag-over="{over}">
|
||||
{labelText}
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="file"
|
||||
tabindex="-1"
|
||||
{id}
|
||||
{disabled}
|
||||
{accept}
|
||||
{name}
|
||||
{multiple}
|
||||
class:bx--file-input={true}
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
accept="{accept}"
|
||||
name="{name}"
|
||||
multiple="{multiple}"
|
||||
class:bx--file-input="{true}"
|
||||
on:change
|
||||
on:change={({ target }) => {
|
||||
on:change="{({ target }) => {
|
||||
dispatch('add', validateFiles(target.files));
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}} />
|
||||
}}" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,33 +48,33 @@
|
|||
</script>
|
||||
|
||||
<span
|
||||
{id}
|
||||
class:bx--file__selected-file={true}
|
||||
class:bx--file__selected-file--invalid={invalid}
|
||||
id="{id}"
|
||||
class:bx--file__selected-file="{true}"
|
||||
class:bx--file__selected-file--invalid="{invalid}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<p class:bx--file-filename={true}>{name}</p>
|
||||
<span class:bx--file__state-container={true}>
|
||||
<p class:bx--file-filename="{true}">{name}</p>
|
||||
<span class:bx--file__state-container="{true}">
|
||||
<Filename
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
dispatch('delete', id);
|
||||
}
|
||||
}}
|
||||
on:click={() => {
|
||||
}}"
|
||||
on:click="{() => {
|
||||
dispatch('delete', id);
|
||||
}}
|
||||
{iconDescription}
|
||||
{status}
|
||||
{invalid} />
|
||||
}}"
|
||||
iconDescription="{iconDescription}"
|
||||
status="{status}"
|
||||
invalid="{invalid}" />
|
||||
</span>
|
||||
{#if invalid && errorSubject}
|
||||
<div class:bx--form-requirement={true}>
|
||||
<div class:bx--form-requirement__title={true}>{errorSubject}</div>
|
||||
<div class:bx--form-requirement="{true}">
|
||||
<div class:bx--form-requirement__title="{true}">{errorSubject}</div>
|
||||
{#if errorBody}
|
||||
<p class:bx--form-requirement__supplement={true}>{errorBody}</p>
|
||||
<p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
|
||||
{#if status === 'uploading'}
|
||||
<Loading
|
||||
description={iconDescription}
|
||||
description="{iconDescription}"
|
||||
{...$$restProps}
|
||||
small
|
||||
withOverlay={false} />
|
||||
withOverlay="{false}" />
|
||||
{/if}
|
||||
|
||||
{#if status === 'edit'}
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
<WarningFilled16 class="bx--file-invalid" />
|
||||
{/if}
|
||||
<Close16
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-close"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
|
||||
{#if status === 'complete'}
|
||||
<CheckmarkFilled16
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-complete"
|
||||
{...$$restProps} />
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue