Merge branch 'master' of github.com:IBM/carbon-components-svelte

This commit is contained in:
Richard O'flynn 2020-11-27 17:05:37 +00:00
commit 36987b202f
15 changed files with 122 additions and 112 deletions

View file

@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
<!-- ## Unreleased --> <!-- ## Unreleased -->
## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27
**Features**
- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/IBM/carbon-components-svelte/pull/420), [issue #410](https://github.com/IBM/carbon-components-svelte/issues/410))
- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384))
**Fixes**
- fix `Files` type for FileUploader ([PR #422](https://github.com/IBM/carbon-components-svelte/pull/422), [issue #421](https://github.com/IBM/carbon-components-svelte/issues/421))
- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384))
**Documentation**
- add ["Padded columns"](https://carbon-svelte.vercel.app/components/Grid#padded-columns) example to Grid docs
- demo different transitions in ["Header with app switcher"](https://carbon-svelte.vercel.app/components/UIShell#header-with-app-switcher) example in UI Shell
- describe use case for [using native styles in OrderedList](https://carbon-svelte.vercel.app/components/OrderedList#native-list-styles)
**Housekeeping**
- pin development dependency `sveld` to version 0.3.0
---
**Contributors**
- [@ispyinternet](https://github.com/ispyinternet)
- [@miedzikd](https://github.com/miedzikd)
## [0.24.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26 ## [0.24.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26
**Features** **Features**

View file

@ -1,6 +1,6 @@
# Component Index # Component Index
> 155 components exported from carbon-components-svelte@0.24.0. > 155 components exported from carbon-components-svelte@0.25.0.
## Components ## Components
@ -1054,19 +1054,13 @@ None.
## `FileUploader` ## `FileUploader`
### Types
```ts
export type Files = string[];
```
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- |
| files | <code>let</code> | Yes | <code>Files</code> | <code>[]</code> | Obtain the uploaded file names | | files | <code>let</code> | Yes | <code>FileList</code> | <code>[]</code> | Obtain the uploaded file names |
| status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| accept | <code>let</code> | No | <code>Files</code> | <code>[]</code> | Specify the accepted file types | | accept | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Override the default behavior of clearing the array of uploaded files | | clearFiles | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Override the default behavior of clearing the array of uploaded files |
| labelDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description | | labelDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description |
@ -1083,9 +1077,9 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----------------- | | :--------- | :--------- | :-------------------- |
| add | dispatched | <code>Files</code> | | add | dispatched | <code>FileList</code> |
| remove | dispatched | <code>Files</code> | | remove | dispatched | <code>FileList</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
@ -1095,19 +1089,13 @@ None.
## `FileUploaderButton` ## `FileUploaderButton`
### Types
```ts
export type Files = string[];
```
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- | | :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text | | labelText | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| accept | <code>let</code> | No | <code>Files</code> | <code>[]</code> | Specify the accepted file types | | accept | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| disableLabelChanges | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes | | disableLabelChanges | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes |
@ -1131,20 +1119,14 @@ None.
## `FileUploaderDropContainer` ## `FileUploaderDropContainer`
### Types
```ts
export type Files = string[];
```
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | | :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| accept | <code>let</code> | No | <code>Files</code> | <code>[]</code> | Specify the accepted file types | | accept | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types |
| multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | <code>let</code> | No | <code>(files: Files) => Files</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files | | validateFiles | <code>let</code> | No | <code>(files: FileList) => FileList</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
| labelText | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container | | role | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
@ -1159,8 +1141,8 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----------------- | | :--------- | :--------- | :-------------------- |
| add | dispatched | <code>Files</code> | | add | dispatched | <code>FileList</code> |
| dragover | forwarded | -- | | dragover | forwarded | -- |
| dragleave | forwarded | -- | | dragleave | forwarded | -- |
| drop | forwarded | -- | | drop | forwarded | -- |

View file

@ -5,13 +5,25 @@
![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge) ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
[![Build][build]][build-badge] [![Build][build]][build-badge]
carbon-components-svelte is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM. Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility. Design systems facilitate design and development through reuse, consistency, and extensibility.
The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 5800+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 600+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
## [Documentation](http://ibm.biz/carbon-svelte) ## [Documentation](http://ibm.biz/carbon-svelte)
<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="32px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a> <a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="34px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples. Other forms of documentation are auto-generated:
- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
- **[TypeScript definitions](types)**: Component TypeScript definitions
- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
## Getting started ## Getting started

View file

@ -3998,7 +3998,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "Files", "type": "string[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4111,9 +4111,7 @@
{ "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "click", "element": "input" } { "type": "forwarded", "name": "click", "element": "input" }
], ],
"typedefs": [ "typedefs": [],
{ "type": "string[]", "name": "Files", "ts": "type Files = string[]" }
],
"rest_props": { "type": "Element", "name": "input" } "rest_props": { "type": "Element", "name": "input" }
}, },
{ {
@ -4134,7 +4132,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "Files", "type": "string[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4144,7 +4142,7 @@
"name": "files", "name": "files",
"kind": "let", "kind": "let",
"description": "Obtain the uploaded file names", "description": "Obtain the uploaded file names",
"type": "Files", "type": "FileList",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4233,8 +4231,8 @@
], ],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "dispatched", "name": "add", "detail": "Files" }, { "type": "dispatched", "name": "add", "detail": "FileList" },
{ "type": "dispatched", "name": "remove", "detail": "Files" }, { "type": "dispatched", "name": "remove", "detail": "FileList" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
@ -4246,9 +4244,7 @@
}, },
{ "type": "forwarded", "name": "keydown", "element": "Filename" } { "type": "forwarded", "name": "keydown", "element": "Filename" }
], ],
"typedefs": [ "typedefs": [],
{ "type": "string[]", "name": "Files", "ts": "type Files = string[]" }
],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{ {
@ -4344,7 +4340,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "Files", "type": "string[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4364,7 +4360,7 @@
"name": "validateFiles", "name": "validateFiles",
"kind": "let", "kind": "let",
"description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files",
"type": "(files: Files) => Files", "type": "(files: FileList) => FileList",
"value": "(files) => files", "value": "(files) => files",
"isFunction": true, "isFunction": true,
"constant": false, "constant": false,
@ -4443,7 +4439,7 @@
], ],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "dispatched", "name": "add", "detail": "Files" }, { "type": "dispatched", "name": "add", "detail": "FileList" },
{ "type": "forwarded", "name": "dragover", "element": "div" }, { "type": "forwarded", "name": "dragover", "element": "div" },
{ "type": "forwarded", "name": "dragleave", "element": "div" }, { "type": "forwarded", "name": "dragleave", "element": "div" },
{ "type": "forwarded", "name": "drop", "element": "div" }, { "type": "forwarded", "name": "drop", "element": "div" },
@ -4451,9 +4447,7 @@
{ "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "click", "element": "input" } { "type": "forwarded", "name": "click", "element": "input" }
], ],
"typedefs": [ "typedefs": [],
{ "type": "string[]", "name": "Files", "ts": "type Files = string[]" }
],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{ {

View file

@ -138,7 +138,10 @@
{#if prop.description} {#if prop.description}
{#each prop.description.split('\n') as line} {#each prop.description.split('\n') as line}
<div class="description"> <div class="description">
{@html line.replace(/`(.*?)`/g, '<code>$1</code>')}. {@html line
.replace(/\</g, '&lt;')
.replace(/\>/g, '&gt;')
.replace(/`(.*?)`/g, '<code>$1</code>')}.
</div> </div>
{/each} {/each}
{:else} {:else}

View file

@ -51,6 +51,8 @@ components: ["OrderedList", "ListItem"]
### Native list styles ### Native list styles
Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
<OrderedList native> <OrderedList native>
<ListItem> <ListItem>
Ordered list level 1 Ordered list level 1

View file

@ -25,7 +25,7 @@
<Column> <Column>
<h1>Carbon Components Svelte</h1> <h1>Carbon Components Svelte</h1>
<p class="big-paragraph"> <p class="big-paragraph">
carbon-components-svelte is a Carbon Components Svelte is a
<Link <Link
inline inline
class="big-link" class="big-link"
@ -44,8 +44,8 @@
by IBM. by IBM.
</p> </p>
<p> <p>
A design system can facilitate frontend development and prototyping Design systems facilitate design and development through reuse,
because it encourages reuse, consistency, and extensibility. consistency, and extensibility.
</p> </p>
</Column> </Column>
</Row> </Row>
@ -74,8 +74,8 @@
<Column> <Column>
<h3>Portfolio</h3> <h3>Portfolio</h3>
<p> <p>
The broader Carbon Svelte effort extends to the icons, pictograms, and The broader Carbon Svelte effort includes libraries for icons,
data visualization libraries. pictograms, and data visualization.
</p> </p>
</Column> </Column>
</Row> </Row>
@ -94,7 +94,7 @@
<TileCard <TileCard
borderBottom borderBottom
title="Carbon Icons Svelte" title="Carbon Icons Svelte"
subtitle="5000+ icons" subtitle="5800+ icons"
target="_blank" target="_blank"
href="https://github.com/IBM/carbon-icons-svelte" href="https://github.com/IBM/carbon-icons-svelte"
/> />
@ -113,7 +113,7 @@
<Column xlg="{5}" lg="{8}" md="{4}"> <Column xlg="{5}" lg="{8}" md="{4}">
<TileCard <TileCard
title="Carbon Charts Svelte" title="Carbon Charts Svelte"
subtitle="13 chart types, powered by d3" subtitle="16 chart types, powered by d3"
target="_blank" target="_blank"
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte" href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
/> />

View file

@ -1,6 +1,6 @@
{ {
"name": "carbon-components-svelte", "name": "carbon-components-svelte",
"version": "0.24.0", "version": "0.25.0",
"license": "Apache-2.0", "license": "Apache-2.0",
"author": "IBM", "author": "IBM",
"description": "Svelte implementation of the Carbon Design System", "description": "Svelte implementation of the Carbon Design System",
@ -39,7 +39,7 @@
"rollup": "^2.33.3", "rollup": "^2.33.3",
"rollup-plugin-svelte": "^6.1.1", "rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sveld": "^0.3.0", "sveld": "0.3.0",
"svelte": "^3.29.7", "svelte": "^3.29.7",
"svelte-check": "^1.1.15", "svelte-check": "^1.1.15",
"svelte-loader": "^2.13.6", "svelte-loader": "^2.13.6",

View file

@ -1,8 +1,7 @@
<script> <script>
/** /**
* @typedef {string[]} Files * @event {FileList} add
* @event {Files} add * @event {FileList} remove
* @event {Files} remove
*/ */
/** /**
@ -13,13 +12,13 @@
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {Files} * @type {string[]}
*/ */
export let accept = []; export let accept = [];
/** /**
* Obtain the uploaded file names * Obtain the uploaded file names
* @type {Files} * @type {FileList}
*/ */
export let files = []; export let files = [];

View file

@ -1,11 +1,7 @@
<script> <script>
/**
* @typedef {string[]} Files
*/
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {Files} * @type {string[]}
*/ */
export let accept = []; export let accept = [];

View file

@ -1,12 +1,11 @@
<script> <script>
/** /**
* @typedef {string[]} Files * @event {FileList} add
* @event {Files} add
*/ */
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {Files} * @type {string[]}
*/ */
export let accept = []; export let accept = [];
@ -16,7 +15,7 @@
/** /**
* Override the default behavior of validating uploaded files * Override the default behavior of validating uploaded files
* The default behavior does not validate files * The default behavior does not validate files
* @type {(files: Files) => Files} * @type {(files: FileList) => FileList}
*/ */
export let validateFiles = (files) => files; export let validateFiles = (files) => files;

View file

@ -1,7 +1,5 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export type Files = string[];
export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the file uploader status * Specify the file uploader status
@ -13,13 +11,13 @@ export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElement
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: Files; accept?: string[];
/** /**
* Obtain the uploaded file names * Obtain the uploaded file names
* @default [] * @default []
*/ */
files?: Files; files?: FileList;
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files
@ -75,8 +73,8 @@ export default class FileUploader {
$$prop_def: FileUploaderProps; $$prop_def: FileUploaderProps;
$$slot_def: {}; $$slot_def: {};
$on(eventname: "add", cb: (event: CustomEvent<Files>) => void): () => void; $on(eventname: "add", cb: (event: CustomEvent<FileList>) => void): () => void;
$on(eventname: "remove", cb: (event: CustomEvent<Files>) => void): () => void; $on(eventname: "remove", cb: (event: CustomEvent<FileList>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;

View file

@ -1,13 +1,11 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export type Files = string[];
export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: Files; accept?: string[];
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files

View file

@ -1,13 +1,11 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export type Files = string[];
export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: Files; accept?: string[];
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files
@ -20,7 +18,7 @@ export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttribute
* The default behavior does not validate files * The default behavior does not validate files
* @default (files) => files * @default (files) => files
*/ */
validateFiles?: (files: Files) => Files; validateFiles?: (files: FileList) => FileList;
/** /**
* Specify the label text * Specify the label text
@ -69,7 +67,7 @@ export default class FileUploaderDropContainer {
$$prop_def: FileUploaderDropContainerProps; $$prop_def: FileUploaderDropContainerProps;
$$slot_def: {}; $$slot_def: {};
$on(eventname: "add", cb: (event: CustomEvent<Files>) => void): () => void; $on(eventname: "add", cb: (event: CustomEvent<FileList>) => void): () => void;
$on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void; $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void;
$on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void; $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void;
$on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void; $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void;

View file

@ -2728,7 +2728,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies: dependencies:
has-flag "^4.0.0" has-flag "^4.0.0"
sveld@^0.3.0: sveld@0.3.0:
version "0.3.0" version "0.3.0"
resolved "https://registry.npmjs.org/sveld/-/sveld-0.3.0.tgz#a1a8c188511a8d5674c72fd8b2987278fae0d062" resolved "https://registry.npmjs.org/sveld/-/sveld-0.3.0.tgz#a1a8c188511a8d5674c72fd8b2987278fae0d062"
integrity sha512-aEuxRaeN11P+k0DvQ+32lEzRQNzv+dFO5qRC4wSM0p5MW9i6sxgPmnYV3xy5TSzaYXVmSI9JJRSMDd3C1ayw0w== integrity sha512-aEuxRaeN11P+k0DvQ+32lEzRQNzv+dFO5qRC4wSM0p5MW9i6sxgPmnYV3xy5TSzaYXVmSI9JJRSMDd3C1ayw0w==