@vielzeug/refine 2.4.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -18
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js.map +1 -1
- package/dist/async.cjs +1 -1
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +3 -3
- package/dist/async.js.map +1 -1
- package/dist/box.cjs.map +1 -1
- package/dist/box.js.map +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +2 -2
- package/dist/card.js.map +1 -1
- package/dist/checkbox-group.cjs +1 -1
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.js.map +1 -1
- package/dist/combobox.cjs +2 -2
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +7 -3
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +1 -1
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +6 -2
- package/dist/command-palette.js.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/card/card.d.ts +2 -2
- package/dist/content/card/card.d.ts.map +1 -1
- package/dist/content/pagination/pagination.css.cjs +1 -1
- package/dist/content/pagination/pagination.css.cjs.map +1 -1
- package/dist/content/pagination/pagination.css.js +1 -1
- package/dist/content/pagination/pagination.css.js.map +1 -1
- package/dist/core/field-base.cjs +1 -1
- package/dist/core/field-base.cjs.map +1 -1
- package/dist/core/field-base.d.ts +1 -1
- package/dist/core/field-base.js +1 -1
- package/dist/core/field-base.js.map +1 -1
- package/dist/core/nav.cjs +1 -1
- package/dist/core/nav.cjs.map +1 -1
- package/dist/core/nav.d.ts +4 -1
- package/dist/core/nav.d.ts.map +1 -1
- package/dist/core/nav.js +41 -28
- package/dist/core/nav.js.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +30 -28
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/slider.cjs +1 -1
- package/dist/core/slider.cjs.map +1 -1
- package/dist/core/slider.js +1 -1
- package/dist/core/slider.js.map +1 -1
- package/dist/core/spinner.cjs +1 -1
- package/dist/core/spinner.cjs.map +1 -1
- package/dist/core/spinner.js +1 -1
- package/dist/core/spinner.js.map +1 -1
- package/dist/custom-elements.json +215 -17
- package/dist/datagrid.cjs +73 -73
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +331 -332
- package/dist/datagrid.js.map +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs.map +1 -1
- package/dist/disclosure/accordion/accordion.css.js +1 -1
- package/dist/disclosure/accordion/accordion.css.js.map +1 -1
- package/dist/disclosure/accordion/accordion.d.ts +5 -5
- package/dist/disclosure/accordion/accordion.d.ts.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.d.ts +3 -3
- package/dist/disclosure/accordion-item/accordion-item.d.ts.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts +3 -3
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts +5 -5
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +1 -1
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/file-input.cjs +1 -1
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +2 -2
- package/dist/file-input.js.map +1 -1
- package/dist/frameworks/elements.d.ts +4 -86
- package/dist/frameworks/react.d.ts +5 -4
- package/dist/frameworks/vue.d.ts +4 -4
- package/dist/grid.cjs +2 -2
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +21 -18
- package/dist/grid.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +12 -1
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +24 -32
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
- package/dist/inputs/file-input/file-input-upload.js +1 -1
- package/dist/inputs/file-input/file-input-upload.js.map +1 -1
- package/dist/inputs/index.d.ts +2 -3
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.cjs +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.js +6 -6
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/layout/box/box.css.cjs +1 -1
- package/dist/layout/box/box.css.cjs.map +1 -1
- package/dist/layout/box/box.css.js +1 -1
- package/dist/layout/box/box.css.js.map +1 -1
- package/dist/layout/box/box.d.ts +3 -3
- package/dist/layout/box/box.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.cjs.map +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.css.js.map +1 -1
- package/dist/layout/navbar/navbar.d.ts +1 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +6 -6
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +1 -1
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +87 -85
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +1 -1
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +1 -1
- package/dist/navigation-menu.js.map +1 -1
- package/dist/number-input.cjs +1 -1
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +1 -1
- package/dist/number-input.js.map +1 -1
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts.map +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js +6 -6
- package/dist/popover.js.map +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +5 -5
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +207 -207
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +268 -268
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +222 -222
- package/dist/refine.js.map +1 -1
- package/dist/shared/types.d.ts +0 -2
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +83 -83
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +11 -9
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +20 -20
- package/dist/slider.js.map +1 -1
- package/dist/stats.cjs +1 -1
- package/dist/stats.cjs.map +1 -1
- package/dist/stats.js +2 -2
- package/dist/stats.js.map +1 -1
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js.map +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs +8 -8
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +32 -33
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js +2 -2
- package/dist/tooltip.js.map +1 -1
- package/dist/types/elements.d.ts +207 -0
- package/package.json +12 -12
|
@@ -195,11 +195,11 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
|
|
|
195
195
|
/**
|
|
196
196
|
* A reactive data source from `@vielzeug/sourcerer` (or any compatible object).
|
|
197
197
|
* When set, the source drives row data, pagination, and search — the `rows` prop is ignored.
|
|
198
|
-
* Client-side sort and filter are bypassed;
|
|
198
|
+
* Client-side sort and filter are bypassed; update source params from grid events externally.
|
|
199
199
|
* @example
|
|
200
200
|
* ```js
|
|
201
201
|
* import { createPageSource } from '@vielzeug/sourcerer';
|
|
202
|
-
* const source = createPageSource({ load: ({
|
|
202
|
+
* const source = createPageSource({ load: ({ page, pageSize, signal }) => api.users({ page, pageSize }, { signal }) });
|
|
203
203
|
* grid.source = source;
|
|
204
204
|
* ```
|
|
205
205
|
*/
|
|
@@ -297,21 +297,23 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
|
|
|
297
297
|
* sourcerer import is required in refine.
|
|
298
298
|
*
|
|
299
299
|
* When `source` is set on the grid:
|
|
300
|
-
* - `rows` prop is ignored; `source.
|
|
301
|
-
* - Pagination reads `source.
|
|
302
|
-
* - Prev/next buttons call `source.
|
|
303
|
-
* - Search calls `source.
|
|
304
|
-
* - `source.
|
|
305
|
-
* - Client-side sort and filter are bypassed;
|
|
300
|
+
* - `rows` prop is ignored; `source.state.items` drives displayed items.
|
|
301
|
+
* - Pagination reads `source.state.pagination`.
|
|
302
|
+
* - Prev/next buttons call `source.previous()` / `source.next()`.
|
|
303
|
+
* - Search calls `source.setParams(search)` when that optional method exists.
|
|
304
|
+
* - `source.state.loading` contributes to the grid's `aria-busy` state.
|
|
305
|
+
* - Client-side sort and filter are bypassed; update source params from grid events externally.
|
|
306
306
|
*
|
|
307
307
|
* @example
|
|
308
308
|
* ```ts
|
|
309
309
|
* import { createPageSource } from '@vielzeug/sourcerer';
|
|
310
310
|
*
|
|
311
311
|
* const source = createPageSource({
|
|
312
|
-
* load: ({
|
|
313
|
-
* fetch(`/api/users?page=${
|
|
314
|
-
*
|
|
312
|
+
* load: async ({ page, pageSize, params: search, signal }) => {
|
|
313
|
+
* const result = await fetch(`/api/users?page=${page}&limit=${pageSize}&search=${search}`, { signal }).then(r => r.json());
|
|
314
|
+
* return { items: result.data, totalItems: result.total };
|
|
315
|
+
* },
|
|
316
|
+
* params: '',
|
|
315
317
|
* });
|
|
316
318
|
*
|
|
317
319
|
* const grid = document.querySelector('ore-datagrid');
|
|
@@ -319,33 +321,23 @@ export type OreDataGridProps<T = Record<string, unknown>> = {
|
|
|
319
321
|
* ```
|
|
320
322
|
*/
|
|
321
323
|
export type DataGridSource<T = Record<string, unknown>> = {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
setQuery?(changes: {
|
|
327
|
-
search?: string;
|
|
328
|
-
}): Promise<void> | void;
|
|
329
|
-
readonly snapshot: {
|
|
330
|
-
readonly data: readonly T[];
|
|
324
|
+
next(): Promise<void> | void;
|
|
325
|
+
previous(): Promise<void> | void;
|
|
326
|
+
setParams?(search: string): Promise<void> | void;
|
|
327
|
+
readonly state: {
|
|
331
328
|
readonly error: {
|
|
332
329
|
message: string;
|
|
333
330
|
} | null;
|
|
334
|
-
readonly
|
|
331
|
+
readonly items: readonly T[];
|
|
332
|
+
readonly loading: boolean;
|
|
335
333
|
readonly pagination: {
|
|
336
|
-
readonly
|
|
337
|
-
readonly
|
|
338
|
-
readonly
|
|
339
|
-
readonly
|
|
340
|
-
readonly kind: 'page';
|
|
341
|
-
readonly size: number;
|
|
342
|
-
readonly total: number;
|
|
343
|
-
};
|
|
344
|
-
readonly query: {
|
|
345
|
-
readonly search?: string;
|
|
334
|
+
readonly page: number;
|
|
335
|
+
readonly pageCount: number;
|
|
336
|
+
readonly pageSize: number;
|
|
337
|
+
readonly totalItems: number;
|
|
346
338
|
};
|
|
347
339
|
};
|
|
348
|
-
subscribe(listener: (
|
|
340
|
+
subscribe(listener: (state: DataGridSource<T>['state']) => void): () => void;
|
|
349
341
|
};
|
|
350
342
|
export declare const DATAGRID_TAG: "ore-datagrid";
|
|
351
343
|
//# sourceMappingURL=datagrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid.d.ts","sourceRoot":"","sources":["../../../src/inputs/datagrid/datagrid.ts"],"names":[],"mappings":"AAgBA,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AAKvC,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAG1B,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1D,CAAC;AAkDF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"datagrid.d.ts","sourceRoot":"","sources":["../../../src/inputs/datagrid/datagrid.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("../../core/announcer.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/dnd");var r=e=>{if(e===0)return`0 B`;let t=1024,n=[`B`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(1))} ${n[r]}`},i=(e,t)=>!t||e.size<=t,a=e=>e>0?`${r(e)}/s`:``,o=e=>e?e.split(`,`).map(e=>e.trim()):[],s={error:null,loaded:0,speedBps:0,status:`idle`},c=e=>{if(e.speedBps<=0||e.status!==`uploading`)return``;let t=Math.max(0,Math.round((e.total-e.loaded)/e.speedBps));return t<60?`${t}s left`:`${Math.round(t/60)}m left`};function l(r){let l=(0,t.signal)([]),u=new Map,d=new Map;function f(e){let n=u.get(e);return n||(n=(0,t.signal)({...s,total:e.size}),u.set(e,n)),n}function p(e){return f(e).value}function m(e,t){let n=f(e);n.value={...n.value,...t}}function h(t,n=0){if(r.disabled.value)return;let i=r.upload.value;if(!i)return;d.get(t)?.abort();let a=new AbortController;d.set(t,a),m(t,{error:null,loaded:n,speedBps:0,status:`uploading`,total:t.size});let o=performance.now(),s=n;i(t,{onProgress:(e,n)=>{if(a.signal.aborted)return;let i=performance.now(),c=(i-o)/1e3,l=c>0?Math.max(0,(e-s)/c):0,u=p(t).speedBps,d=u>0?u*.7+l*.3:l;o=i,s=e,m(t,{loaded:e,speedBps:d,total:n||t.size}),r.onUploadProgress(t,e,n||t.size)},resumeFrom:n,signal:a.signal}).then(()=>{a.signal.aborted||(m(t,{loaded:t.size,speedBps:0,status:`success`}),e.announce(`${t.name} uploaded successfully.`,{document:r.document}),r.onUploadSuccess(t))}).catch(n=>{if(a.signal.aborted)return;let i=n instanceof Error?n.message:String(n);m(t,{error:i,speedBps:0,status:`error`}),e.announce(`${t.name} failed to upload: ${i}`,{document:r.document,politeness:`assertive`}),r.onUploadError(t,n)})}function g(e){r.disabled.value||h(e,p(e).loaded)}function _(e){let t=new Set(e);for(let e of u.keys())t.has(e)||(d.get(e)?.abort(),d.delete(e),u.delete(e))}let v=(0,t.watch)(l,_);function y(e,t){if(r.disabled.value)return;let a=r.multiple.value,s=Array.from(e);a||(s=s.slice(0,1));let c=o(r.accept.value),u=r.maxSize.value;s=s.filter(e=>(0,n.matchesAccept)(e,c)&&i(e,u));let d=a?[...l.value]:[],f=[];for(let e of s)d.includes(e)||(d.push(e),f.push(e));let p=r.maxFiles.value;p>0&&d.length>p&&(d=d.slice(0,p)),l.value=d,r.onChange(l.value,t);for(let e of f)l.value.includes(e)&&h(e)}function b(e,t){r.disabled.value||(l.value=l.value.filter(t=>t!==e),r.onRemove(e,l.value,t),r.onChange(l.value,t))}function x(e,t,a){if(r.disabled.value)return!1;let s=o(r.accept.value);return!(0,n.matchesAccept)(t,s)||!i(t,r.maxSize.value)?!1:(l.value=l.value.map(n=>n===e?t:n),r.onRemove(e,l.value,a),r.onChange(l.value,a),h(t),!0)}function S(e){let t=p(e);return t.total<=0?0:Math.min(100,Math.round(t.loaded/t.total*100))}function C(e){let t=p(e);return[a(t.speedBps),c(t)].filter(Boolean).join(` · `)}function w(e){let t=p(e).status;return t===`success`?`check`:t===`error`?`alert-circle`:`file`}function T(){v.dispose();for(let e of d.values())e.abort();d.clear(),u.clear()}return{addFiles:y,dispose:T,fileState:p,files:l,removeFile:b,replaceFile:x,retryUpload:g,statusIconName:w,uploadMetaText:C,uploadPercent:S}}exports.createFileQueue=l,exports.formatBytes=r;
|
|
1
|
+
const e=require("../../core/announcer.cjs");let t=require("@vielzeug/ripple"),n=require("@vielzeug/dnd/drop");var r=e=>{if(e===0)return`0 B`;let t=1024,n=[`B`,`KB`,`MB`,`GB`,`TB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(1))} ${n[r]}`},i=(e,t)=>!t||e.size<=t,a=e=>e>0?`${r(e)}/s`:``,o=e=>e?e.split(`,`).map(e=>e.trim()):[],s={error:null,loaded:0,speedBps:0,status:`idle`},c=e=>{if(e.speedBps<=0||e.status!==`uploading`)return``;let t=Math.max(0,Math.round((e.total-e.loaded)/e.speedBps));return t<60?`${t}s left`:`${Math.round(t/60)}m left`};function l(r){let l=(0,t.signal)([]),u=new Map,d=new Map;function f(e){let n=u.get(e);return n||(n=(0,t.signal)({...s,total:e.size}),u.set(e,n)),n}function p(e){return f(e).value}function m(e,t){let n=f(e);n.value={...n.value,...t}}function h(t,n=0){if(r.disabled.value)return;let i=r.upload.value;if(!i)return;d.get(t)?.abort();let a=new AbortController;d.set(t,a),m(t,{error:null,loaded:n,speedBps:0,status:`uploading`,total:t.size});let o=performance.now(),s=n;i(t,{onProgress:(e,n)=>{if(a.signal.aborted)return;let i=performance.now(),c=(i-o)/1e3,l=c>0?Math.max(0,(e-s)/c):0,u=p(t).speedBps,d=u>0?u*.7+l*.3:l;o=i,s=e,m(t,{loaded:e,speedBps:d,total:n||t.size}),r.onUploadProgress(t,e,n||t.size)},resumeFrom:n,signal:a.signal}).then(()=>{a.signal.aborted||(m(t,{loaded:t.size,speedBps:0,status:`success`}),e.announce(`${t.name} uploaded successfully.`,{document:r.document}),r.onUploadSuccess(t))}).catch(n=>{if(a.signal.aborted)return;let i=n instanceof Error?n.message:String(n);m(t,{error:i,speedBps:0,status:`error`}),e.announce(`${t.name} failed to upload: ${i}`,{document:r.document,politeness:`assertive`}),r.onUploadError(t,n)})}function g(e){r.disabled.value||h(e,p(e).loaded)}function _(e){let t=new Set(e);for(let e of u.keys())t.has(e)||(d.get(e)?.abort(),d.delete(e),u.delete(e))}let v=(0,t.watch)(l,_);function y(e,t){if(r.disabled.value)return;let a=r.multiple.value,s=Array.from(e);a||(s=s.slice(0,1));let c=o(r.accept.value),u=r.maxSize.value;s=s.filter(e=>(0,n.matchesAccept)(e,c)&&i(e,u));let d=a?[...l.value]:[],f=[];for(let e of s)d.includes(e)||(d.push(e),f.push(e));let p=r.maxFiles.value;p>0&&d.length>p&&(d=d.slice(0,p)),l.value=d,r.onChange(l.value,t);for(let e of f)l.value.includes(e)&&h(e)}function b(e,t){r.disabled.value||(l.value=l.value.filter(t=>t!==e),r.onRemove(e,l.value,t),r.onChange(l.value,t))}function x(e,t,a){if(r.disabled.value)return!1;let s=o(r.accept.value);return!(0,n.matchesAccept)(t,s)||!i(t,r.maxSize.value)?!1:(l.value=l.value.map(n=>n===e?t:n),r.onRemove(e,l.value,a),r.onChange(l.value,a),h(t),!0)}function S(e){let t=p(e);return t.total<=0?0:Math.min(100,Math.round(t.loaded/t.total*100))}function C(e){let t=p(e);return[a(t.speedBps),c(t)].filter(Boolean).join(` · `)}function w(e){let t=p(e).status;return t===`success`?`check`:t===`error`?`alert-circle`:`file`}function T(){v.dispose();for(let e of d.values())e.abort();d.clear(),u.clear()}return{addFiles:y,dispose:T,fileState:p,files:l,removeFile:b,replaceFile:x,retryUpload:g,statusIconName:w,uploadMetaText:C,uploadPercent:S}}exports.createFileQueue=l,exports.formatBytes=r;
|
|
2
2
|
//# sourceMappingURL=file-input-upload.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input-upload.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n if (bytes === 0) return '0 B';\n\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n error: string | null;\n loaded: number;\n speedBps: number;\n status: FileUploadStatus;\n total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n file: File,\n ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n accept: Readable<string | undefined>;\n disabled: Readable<boolean>;\n /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n document?: Document;\n maxFiles: Readable<number>;\n maxSize: Readable<number>;\n multiple: Readable<boolean>;\n onChange: (files: File[], originalEvent?: Event) => void;\n onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n onUploadError: (file: File, error: unknown) => void;\n onUploadProgress: (file: File, loaded: number, total: number) => void;\n onUploadSuccess: (file: File) => void;\n upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n addFiles(newFiles: File[], originalEvent?: Event): void;\n dispose(): void;\n readonly files: Readable<File[]>;\n fileState(file: File): FileUploadState;\n removeFile(file: File, originalEvent?: Event): void;\n /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n * hear that the old file is gone. */\n replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n retryUpload(file: File): void;\n statusIconName(file: File): string;\n uploadMetaText(file: File): string;\n uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n const files = signal<File[]>([]);\n const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n const controllers = new Map<File, AbortController>();\n\n function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n let s = stateSignals.get(file);\n\n if (!s) {\n s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n stateSignals.set(file, s);\n }\n\n return s;\n }\n\n function fileState(file: File): FileUploadState {\n return stateSignal(file).value;\n }\n\n function patchState(file: File, patch: Partial<FileUploadState>): void {\n const s = stateSignal(file);\n\n s.value = { ...s.value, ...patch };\n }\n\n // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n function startUpload(file: File, resumeFrom = 0): void {\n if (options.disabled.value) return;\n\n const uploadFn = options.upload.value;\n\n if (!uploadFn) return;\n\n controllers.get(file)?.abort();\n\n const controller = new AbortController();\n\n controllers.set(file, controller);\n patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n // Rolling (exponential-moving-average) speed estimate rather than a naive\n // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n // *current* rate right after a slow start or a mid-transfer stall.\n let lastSampleAt = performance.now();\n let lastSampleLoaded = resumeFrom;\n\n uploadFn(file, {\n onProgress: (loaded, total) => {\n if (controller.signal.aborted) return;\n\n const now = performance.now();\n const elapsedSeconds = (now - lastSampleAt) / 1000;\n const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n const previousBps = fileState(file).speedBps;\n const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n lastSampleAt = now;\n lastSampleLoaded = loaded;\n patchState(file, { loaded, speedBps, total: total || file.size });\n options.onUploadProgress(file, loaded, total || file.size);\n },\n resumeFrom,\n signal: controller.signal,\n })\n .then(() => {\n if (controller.signal.aborted) return;\n\n patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n announce(`${file.name} uploaded successfully.`, { document: options.document });\n options.onUploadSuccess(file);\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n\n const message = error instanceof Error ? error.message : String(error);\n\n patchState(file, { error: message, speedBps: 0, status: 'error' });\n announce(`${file.name} failed to upload: ${message}`, {\n document: options.document,\n politeness: 'assertive',\n });\n options.onUploadError(file, error);\n });\n }\n\n // Resumes from the last byte offset this file actually reached, not from 0 — see\n // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n // consumer-supplied.\n function retryUpload(file: File): void {\n if (options.disabled.value) return;\n\n startUpload(file, fileState(file).loaded);\n }\n\n // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n // for another. One cleanup path instead of duplicating it at every call site that can shrink\n // `files`.\n function dropOrphanedState(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const file of stateSignals.keys()) {\n if (keep.has(file)) continue;\n\n controllers.get(file)?.abort();\n controllers.delete(file);\n stateSignals.delete(file);\n }\n }\n\n const filesWatch = watch(files, dropOrphanedState);\n\n function addFiles(newFiles: File[], originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n const isMultiple = options.multiple.value;\n let incoming = Array.from(newFiles);\n\n if (!isMultiple) incoming = incoming.slice(0, 1);\n\n const acceptList = parseAccept(options.accept.value);\n const maxSize = options.maxSize.value;\n\n incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n let updated: File[] = isMultiple ? [...files.value] : [];\n const added: File[] = [];\n\n for (const f of incoming) {\n if (!updated.includes(f)) {\n updated.push(f);\n added.push(f);\n }\n }\n\n const maxFiles = options.maxFiles.value;\n\n if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n files.value = updated;\n options.onChange(files.value, originalEvent);\n\n for (const f of added) {\n if (files.value.includes(f)) startUpload(f);\n }\n }\n\n function removeFile(file: File, originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n files.value = files.value.filter((f) => f !== file);\n options.onRemove(file, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n }\n\n function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n if (options.disabled.value) return false;\n\n const acceptList = parseAccept(options.accept.value);\n\n if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n options.onRemove(oldFile, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n startUpload(newFile);\n\n return true;\n }\n\n function uploadPercent(file: File): number {\n const state = fileState(file);\n\n if (state.total <= 0) return 0;\n\n return Math.min(100, Math.round((state.loaded / state.total) * 100));\n }\n\n // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n function uploadMetaText(file: File): string {\n const state = fileState(file);\n\n return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n }\n\n function statusIconName(file: File): string {\n const status = fileState(file).status;\n\n if (status === 'success') return 'check';\n\n if (status === 'error') return 'alert-circle';\n\n return 'file';\n }\n\n function dispose(): void {\n filesWatch.dispose();\n\n for (const controller of controllers.values()) controller.abort();\n\n controllers.clear();\n stateSignals.clear();\n }\n\n return {\n addFiles,\n dispose,\n fileState,\n files,\n removeFile,\n replaceFile,\n retryUpload,\n statusIconName,\n uploadMetaText,\n uploadPercent,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"file-input-upload.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n if (bytes === 0) return '0 B';\n\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n error: string | null;\n loaded: number;\n speedBps: number;\n status: FileUploadStatus;\n total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n file: File,\n ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n accept: Readable<string | undefined>;\n disabled: Readable<boolean>;\n /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n document?: Document;\n maxFiles: Readable<number>;\n maxSize: Readable<number>;\n multiple: Readable<boolean>;\n onChange: (files: File[], originalEvent?: Event) => void;\n onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n onUploadError: (file: File, error: unknown) => void;\n onUploadProgress: (file: File, loaded: number, total: number) => void;\n onUploadSuccess: (file: File) => void;\n upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n addFiles(newFiles: File[], originalEvent?: Event): void;\n dispose(): void;\n readonly files: Readable<File[]>;\n fileState(file: File): FileUploadState;\n removeFile(file: File, originalEvent?: Event): void;\n /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n * hear that the old file is gone. */\n replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n retryUpload(file: File): void;\n statusIconName(file: File): string;\n uploadMetaText(file: File): string;\n uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n const files = signal<File[]>([]);\n const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n const controllers = new Map<File, AbortController>();\n\n function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n let s = stateSignals.get(file);\n\n if (!s) {\n s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n stateSignals.set(file, s);\n }\n\n return s;\n }\n\n function fileState(file: File): FileUploadState {\n return stateSignal(file).value;\n }\n\n function patchState(file: File, patch: Partial<FileUploadState>): void {\n const s = stateSignal(file);\n\n s.value = { ...s.value, ...patch };\n }\n\n // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n function startUpload(file: File, resumeFrom = 0): void {\n if (options.disabled.value) return;\n\n const uploadFn = options.upload.value;\n\n if (!uploadFn) return;\n\n controllers.get(file)?.abort();\n\n const controller = new AbortController();\n\n controllers.set(file, controller);\n patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n // Rolling (exponential-moving-average) speed estimate rather than a naive\n // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n // *current* rate right after a slow start or a mid-transfer stall.\n let lastSampleAt = performance.now();\n let lastSampleLoaded = resumeFrom;\n\n uploadFn(file, {\n onProgress: (loaded, total) => {\n if (controller.signal.aborted) return;\n\n const now = performance.now();\n const elapsedSeconds = (now - lastSampleAt) / 1000;\n const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n const previousBps = fileState(file).speedBps;\n const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n lastSampleAt = now;\n lastSampleLoaded = loaded;\n patchState(file, { loaded, speedBps, total: total || file.size });\n options.onUploadProgress(file, loaded, total || file.size);\n },\n resumeFrom,\n signal: controller.signal,\n })\n .then(() => {\n if (controller.signal.aborted) return;\n\n patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n announce(`${file.name} uploaded successfully.`, { document: options.document });\n options.onUploadSuccess(file);\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n\n const message = error instanceof Error ? error.message : String(error);\n\n patchState(file, { error: message, speedBps: 0, status: 'error' });\n announce(`${file.name} failed to upload: ${message}`, {\n document: options.document,\n politeness: 'assertive',\n });\n options.onUploadError(file, error);\n });\n }\n\n // Resumes from the last byte offset this file actually reached, not from 0 — see\n // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n // consumer-supplied.\n function retryUpload(file: File): void {\n if (options.disabled.value) return;\n\n startUpload(file, fileState(file).loaded);\n }\n\n // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n // for another. One cleanup path instead of duplicating it at every call site that can shrink\n // `files`.\n function dropOrphanedState(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const file of stateSignals.keys()) {\n if (keep.has(file)) continue;\n\n controllers.get(file)?.abort();\n controllers.delete(file);\n stateSignals.delete(file);\n }\n }\n\n const filesWatch = watch(files, dropOrphanedState);\n\n function addFiles(newFiles: File[], originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n const isMultiple = options.multiple.value;\n let incoming = Array.from(newFiles);\n\n if (!isMultiple) incoming = incoming.slice(0, 1);\n\n const acceptList = parseAccept(options.accept.value);\n const maxSize = options.maxSize.value;\n\n incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n let updated: File[] = isMultiple ? [...files.value] : [];\n const added: File[] = [];\n\n for (const f of incoming) {\n if (!updated.includes(f)) {\n updated.push(f);\n added.push(f);\n }\n }\n\n const maxFiles = options.maxFiles.value;\n\n if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n files.value = updated;\n options.onChange(files.value, originalEvent);\n\n for (const f of added) {\n if (files.value.includes(f)) startUpload(f);\n }\n }\n\n function removeFile(file: File, originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n files.value = files.value.filter((f) => f !== file);\n options.onRemove(file, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n }\n\n function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n if (options.disabled.value) return false;\n\n const acceptList = parseAccept(options.accept.value);\n\n if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n options.onRemove(oldFile, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n startUpload(newFile);\n\n return true;\n }\n\n function uploadPercent(file: File): number {\n const state = fileState(file);\n\n if (state.total <= 0) return 0;\n\n return Math.min(100, Math.round((state.loaded / state.total) * 100));\n }\n\n // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n function uploadMetaText(file: File): string {\n const state = fileState(file);\n\n return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n }\n\n function statusIconName(file: File): string {\n const status = fileState(file).status;\n\n if (status === 'success') return 'check';\n\n if (status === 'error') return 'alert-circle';\n\n return 'file';\n }\n\n function dispose(): void {\n filesWatch.dispose();\n\n for (const controller of controllers.values()) controller.abort();\n\n controllers.clear();\n stateSignals.clear();\n }\n\n return {\n addFiles,\n dispose,\n fileState,\n files,\n removeFile,\n replaceFile,\n retryUpload,\n statusIconName,\n uploadMetaText,\n uploadPercent,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { announce as e } from "../../core/announcer.js";
|
|
2
2
|
import { signal as t, watch as n } from "@vielzeug/ripple";
|
|
3
|
-
import { matchesAccept as r } from "@vielzeug/dnd";
|
|
3
|
+
import { matchesAccept as r } from "@vielzeug/dnd/drop";
|
|
4
4
|
//#region src/inputs/file-input/file-input-upload.ts
|
|
5
5
|
var i = (e) => {
|
|
6
6
|
if (e === 0) return "0 B";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input-upload.js","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n if (bytes === 0) return '0 B';\n\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n error: string | null;\n loaded: number;\n speedBps: number;\n status: FileUploadStatus;\n total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n file: File,\n ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n accept: Readable<string | undefined>;\n disabled: Readable<boolean>;\n /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n document?: Document;\n maxFiles: Readable<number>;\n maxSize: Readable<number>;\n multiple: Readable<boolean>;\n onChange: (files: File[], originalEvent?: Event) => void;\n onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n onUploadError: (file: File, error: unknown) => void;\n onUploadProgress: (file: File, loaded: number, total: number) => void;\n onUploadSuccess: (file: File) => void;\n upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n addFiles(newFiles: File[], originalEvent?: Event): void;\n dispose(): void;\n readonly files: Readable<File[]>;\n fileState(file: File): FileUploadState;\n removeFile(file: File, originalEvent?: Event): void;\n /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n * hear that the old file is gone. */\n replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n retryUpload(file: File): void;\n statusIconName(file: File): string;\n uploadMetaText(file: File): string;\n uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n const files = signal<File[]>([]);\n const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n const controllers = new Map<File, AbortController>();\n\n function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n let s = stateSignals.get(file);\n\n if (!s) {\n s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n stateSignals.set(file, s);\n }\n\n return s;\n }\n\n function fileState(file: File): FileUploadState {\n return stateSignal(file).value;\n }\n\n function patchState(file: File, patch: Partial<FileUploadState>): void {\n const s = stateSignal(file);\n\n s.value = { ...s.value, ...patch };\n }\n\n // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n function startUpload(file: File, resumeFrom = 0): void {\n if (options.disabled.value) return;\n\n const uploadFn = options.upload.value;\n\n if (!uploadFn) return;\n\n controllers.get(file)?.abort();\n\n const controller = new AbortController();\n\n controllers.set(file, controller);\n patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n // Rolling (exponential-moving-average) speed estimate rather than a naive\n // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n // *current* rate right after a slow start or a mid-transfer stall.\n let lastSampleAt = performance.now();\n let lastSampleLoaded = resumeFrom;\n\n uploadFn(file, {\n onProgress: (loaded, total) => {\n if (controller.signal.aborted) return;\n\n const now = performance.now();\n const elapsedSeconds = (now - lastSampleAt) / 1000;\n const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n const previousBps = fileState(file).speedBps;\n const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n lastSampleAt = now;\n lastSampleLoaded = loaded;\n patchState(file, { loaded, speedBps, total: total || file.size });\n options.onUploadProgress(file, loaded, total || file.size);\n },\n resumeFrom,\n signal: controller.signal,\n })\n .then(() => {\n if (controller.signal.aborted) return;\n\n patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n announce(`${file.name} uploaded successfully.`, { document: options.document });\n options.onUploadSuccess(file);\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n\n const message = error instanceof Error ? error.message : String(error);\n\n patchState(file, { error: message, speedBps: 0, status: 'error' });\n announce(`${file.name} failed to upload: ${message}`, {\n document: options.document,\n politeness: 'assertive',\n });\n options.onUploadError(file, error);\n });\n }\n\n // Resumes from the last byte offset this file actually reached, not from 0 — see\n // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n // consumer-supplied.\n function retryUpload(file: File): void {\n if (options.disabled.value) return;\n\n startUpload(file, fileState(file).loaded);\n }\n\n // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n // for another. One cleanup path instead of duplicating it at every call site that can shrink\n // `files`.\n function dropOrphanedState(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const file of stateSignals.keys()) {\n if (keep.has(file)) continue;\n\n controllers.get(file)?.abort();\n controllers.delete(file);\n stateSignals.delete(file);\n }\n }\n\n const filesWatch = watch(files, dropOrphanedState);\n\n function addFiles(newFiles: File[], originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n const isMultiple = options.multiple.value;\n let incoming = Array.from(newFiles);\n\n if (!isMultiple) incoming = incoming.slice(0, 1);\n\n const acceptList = parseAccept(options.accept.value);\n const maxSize = options.maxSize.value;\n\n incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n let updated: File[] = isMultiple ? [...files.value] : [];\n const added: File[] = [];\n\n for (const f of incoming) {\n if (!updated.includes(f)) {\n updated.push(f);\n added.push(f);\n }\n }\n\n const maxFiles = options.maxFiles.value;\n\n if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n files.value = updated;\n options.onChange(files.value, originalEvent);\n\n for (const f of added) {\n if (files.value.includes(f)) startUpload(f);\n }\n }\n\n function removeFile(file: File, originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n files.value = files.value.filter((f) => f !== file);\n options.onRemove(file, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n }\n\n function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n if (options.disabled.value) return false;\n\n const acceptList = parseAccept(options.accept.value);\n\n if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n options.onRemove(oldFile, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n startUpload(newFile);\n\n return true;\n }\n\n function uploadPercent(file: File): number {\n const state = fileState(file);\n\n if (state.total <= 0) return 0;\n\n return Math.min(100, Math.round((state.loaded / state.total) * 100));\n }\n\n // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n function uploadMetaText(file: File): string {\n const state = fileState(file);\n\n return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n }\n\n function statusIconName(file: File): string {\n const status = fileState(file).status;\n\n if (status === 'success') return 'check';\n\n if (status === 'error') return 'alert-circle';\n\n return 'file';\n }\n\n function dispose(): void {\n filesWatch.dispose();\n\n for (const controller of controllers.values()) controller.abort();\n\n controllers.clear();\n stateSignals.clear();\n }\n\n return {\n addFiles,\n dispose,\n fileState,\n files,\n removeFile,\n replaceFile,\n retryUpload,\n statusIconName,\n uploadMetaText,\n uploadPercent,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"file-input-upload.js","names":[],"sources":["../../../src/inputs/file-input/file-input-upload.ts"],"sourcesContent":["import { matchesAccept } from '@vielzeug/dnd/drop';\nimport { type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\n\n// ── Byte/speed formatting ────────────────────────────────────────────────────\n\nexport const formatBytes = (bytes: number): string => {\n if (bytes === 0) return '0 B';\n\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;\n};\n\nconst isFileSizeAllowed = (file: File, maxSize: number): boolean => !maxSize || file.size <= maxSize;\n\nconst formatSpeed = (bytesPerSecond: number): string => (bytesPerSecond > 0 ? `${formatBytes(bytesPerSecond)}/s` : '');\n\nconst parseAccept = (accept: string | undefined): string[] => (accept ? accept.split(',').map((t) => t.trim()) : []);\n\n// ── Upload lifecycle types ───────────────────────────────────────────────────\n\n/** Upload lifecycle status for a single file. `idle` covers both \"no `upload` handler wired up\"\n * (picker-only mode, fully supported) and \"not started yet\". */\nexport type FileUploadStatus = 'error' | 'idle' | 'success' | 'uploading';\n\n/** Per-file upload snapshot. One reactive signal per file — see `createFileQueue` — not one\n * signal holding a map, so a progress tick for one file never invalidates another's bindings. */\nexport type FileUploadState = {\n error: string | null;\n loaded: number;\n speedBps: number;\n status: FileUploadStatus;\n total: number;\n};\n\nconst IDLE_UPLOAD_STATE: Omit<FileUploadState, 'total'> = { error: null, loaded: 0, speedBps: 0, status: 'idle' };\n\nconst formatEta = (state: FileUploadState): string => {\n if (state.speedBps <= 0 || state.status !== 'uploading') return '';\n\n const remainingSeconds = Math.max(0, Math.round((state.total - state.loaded) / state.speedBps));\n\n if (remainingSeconds < 60) return `${remainingSeconds}s left`;\n\n return `${Math.round(remainingSeconds / 60)}m left`;\n};\n\n/**\n * Consumer-supplied transport — this component has no built-in network layer (zero-dependency,\n * transport-agnostic by design, same reasoning as `courier`'s own fetch-wrapping-only stance).\n * This function is the seam between the UI's upload lifecycle (progress, retry, per-file\n * isolation) and however the app actually moves bytes (`fetch`, `XMLHttpRequest`, a presigned S3\n * PUT, `@vielzeug/courier`, …).\n *\n * `resumeFrom` is a *hint*, not a guarantee: it's the byte offset the component last observed\n * via `onProgress` before the previous attempt failed (0 on a fresh upload). A transport that\n * supports byte ranges (e.g. an HTTP `Range`/`Content-Range` header, S3 multipart, tus) can use\n * it to genuinely resume from that point; a plain `fetch(url, { body: file })` can ignore it and\n * simply re-send the whole file — the UI still shows a resumed-from-N-bytes experience either\n * way, since the file itself was never dropped from memory.\n */\nexport type FileUploadFn = (\n file: File,\n ctx: { onProgress: (loaded: number, total: number) => void; resumeFrom: number; signal: AbortSignal },\n) => Promise<void>;\n\n// ── Queue ─────────────────────────────────────────────────────────────────────\n\nexport type FileQueueOptions = {\n accept: Readable<string | undefined>;\n disabled: Readable<boolean>;\n /** Document whose `<body>` hosts the announcer live region. Defaults to the global `document`. */\n document?: Document;\n maxFiles: Readable<number>;\n maxSize: Readable<number>;\n multiple: Readable<boolean>;\n onChange: (files: File[], originalEvent?: Event) => void;\n onRemove: (file: File, files: File[], originalEvent?: Event) => void;\n onUploadError: (file: File, error: unknown) => void;\n onUploadProgress: (file: File, loaded: number, total: number) => void;\n onUploadSuccess: (file: File) => void;\n upload: Readable<FileUploadFn | undefined>;\n};\n\nexport type FileQueue = {\n addFiles(newFiles: File[], originalEvent?: Event): void;\n dispose(): void;\n readonly files: Readable<File[]>;\n fileState(file: File): FileUploadState;\n removeFile(file: File, originalEvent?: Event): void;\n /** Validates `newFile` (accept/max-size) and, if accepted, swaps it in for `oldFile` in place\n * and starts its upload. Returns whether the replacement was accepted. Also fires `onRemove`\n * for `oldFile` — a replace is a removal-and-add that happen to land in the same slot, and a\n * consumer listening only for removal (e.g. to clean up a server-side record) still needs to\n * hear that the old file is gone. */\n replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean;\n retryUpload(file: File): void;\n statusIconName(file: File): string;\n uploadMetaText(file: File): string;\n uploadPercent(file: File): number;\n};\n\n/**\n * Owns file selection *and* the opt-in upload lifecycle together — they were never really\n * separable (adding a file starts its upload; removing one must abort it; replacing one is both\n * at once). Independent of `html`/rendering, following the same shape as `datagrid`'s\n * `createDataGridControls` and `combobox`'s `combobox-options.ts`: a factory `file-input.ts`\n * wires into drag/drop/native-input events and the template, directly unit-testable without\n * mounting a component.\n *\n * Every file-level rule (accept, max-size, max-files, disabled) and every upload-lifecycle rule\n * (progress, retry-from-offset, per-file isolation) lives here in one place.\n */\nexport function createFileQueue(options: FileQueueOptions): FileQueue {\n const files = signal<File[]>([]);\n const stateSignals = new Map<File, ReturnType<typeof signal<FileUploadState>>>();\n const controllers = new Map<File, AbortController>();\n\n function stateSignal(file: File): ReturnType<typeof signal<FileUploadState>> {\n let s = stateSignals.get(file);\n\n if (!s) {\n s = signal<FileUploadState>({ ...IDLE_UPLOAD_STATE, total: file.size });\n stateSignals.set(file, s);\n }\n\n return s;\n }\n\n function fileState(file: File): FileUploadState {\n return stateSignal(file).value;\n }\n\n function patchState(file: File, patch: Partial<FileUploadState>): void {\n const s = stateSignal(file);\n\n s.value = { ...s.value, ...patch };\n }\n\n // Each file gets its own `AbortController` and its own promise chain — nothing here `await`s\n // another file's upload, so one file's rejection can never block, freeze, or cancel the others.\n function startUpload(file: File, resumeFrom = 0): void {\n if (options.disabled.value) return;\n\n const uploadFn = options.upload.value;\n\n if (!uploadFn) return;\n\n controllers.get(file)?.abort();\n\n const controller = new AbortController();\n\n controllers.set(file, controller);\n patchState(file, { error: null, loaded: resumeFrom, speedBps: 0, status: 'uploading', total: file.size });\n\n // Rolling (exponential-moving-average) speed estimate rather than a naive\n // `loaded / elapsedSinceStart` average — the latter drags heavily behind the file's actual\n // *current* rate right after a slow start or a mid-transfer stall.\n let lastSampleAt = performance.now();\n let lastSampleLoaded = resumeFrom;\n\n uploadFn(file, {\n onProgress: (loaded, total) => {\n if (controller.signal.aborted) return;\n\n const now = performance.now();\n const elapsedSeconds = (now - lastSampleAt) / 1000;\n const instantBps = elapsedSeconds > 0 ? Math.max(0, (loaded - lastSampleLoaded) / elapsedSeconds) : 0;\n const previousBps = fileState(file).speedBps;\n const speedBps = previousBps > 0 ? previousBps * 0.7 + instantBps * 0.3 : instantBps;\n\n lastSampleAt = now;\n lastSampleLoaded = loaded;\n patchState(file, { loaded, speedBps, total: total || file.size });\n options.onUploadProgress(file, loaded, total || file.size);\n },\n resumeFrom,\n signal: controller.signal,\n })\n .then(() => {\n if (controller.signal.aborted) return;\n\n patchState(file, { loaded: file.size, speedBps: 0, status: 'success' });\n announce(`${file.name} uploaded successfully.`, { document: options.document });\n options.onUploadSuccess(file);\n })\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n\n const message = error instanceof Error ? error.message : String(error);\n\n patchState(file, { error: message, speedBps: 0, status: 'error' });\n announce(`${file.name} failed to upload: ${message}`, {\n document: options.document,\n politeness: 'assertive',\n });\n options.onUploadError(file, error);\n });\n }\n\n // Resumes from the last byte offset this file actually reached, not from 0 — see\n // `FileUploadFn`'s doc comment on what \"resume\" honestly means when the transport is\n // consumer-supplied.\n function retryUpload(file: File): void {\n if (options.disabled.value) return;\n\n startUpload(file, fileState(file).loaded);\n }\n\n // Aborts + drops upload state for any file no longer in `files` — covers plain removal, a\n // non-`multiple` selection replacing the previous file, and `replaceFile()` swapping one File\n // for another. One cleanup path instead of duplicating it at every call site that can shrink\n // `files`.\n function dropOrphanedState(activeFiles: File[]): void {\n const keep = new Set(activeFiles);\n\n for (const file of stateSignals.keys()) {\n if (keep.has(file)) continue;\n\n controllers.get(file)?.abort();\n controllers.delete(file);\n stateSignals.delete(file);\n }\n }\n\n const filesWatch = watch(files, dropOrphanedState);\n\n function addFiles(newFiles: File[], originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n const isMultiple = options.multiple.value;\n let incoming = Array.from(newFiles);\n\n if (!isMultiple) incoming = incoming.slice(0, 1);\n\n const acceptList = parseAccept(options.accept.value);\n const maxSize = options.maxSize.value;\n\n incoming = incoming.filter((f) => matchesAccept(f, acceptList) && isFileSizeAllowed(f, maxSize));\n\n let updated: File[] = isMultiple ? [...files.value] : [];\n const added: File[] = [];\n\n for (const f of incoming) {\n if (!updated.includes(f)) {\n updated.push(f);\n added.push(f);\n }\n }\n\n const maxFiles = options.maxFiles.value;\n\n if (maxFiles > 0 && updated.length > maxFiles) updated = updated.slice(0, maxFiles);\n\n files.value = updated;\n options.onChange(files.value, originalEvent);\n\n for (const f of added) {\n if (files.value.includes(f)) startUpload(f);\n }\n }\n\n function removeFile(file: File, originalEvent?: Event): void {\n if (options.disabled.value) return;\n\n files.value = files.value.filter((f) => f !== file);\n options.onRemove(file, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n }\n\n function replaceFile(oldFile: File, newFile: File, originalEvent?: Event): boolean {\n if (options.disabled.value) return false;\n\n const acceptList = parseAccept(options.accept.value);\n\n if (!matchesAccept(newFile, acceptList) || !isFileSizeAllowed(newFile, options.maxSize.value)) return false;\n\n files.value = files.value.map((f) => (f === oldFile ? newFile : f));\n options.onRemove(oldFile, files.value, originalEvent);\n options.onChange(files.value, originalEvent);\n startUpload(newFile);\n\n return true;\n }\n\n function uploadPercent(file: File): number {\n const state = fileState(file);\n\n if (state.total <= 0) return 0;\n\n return Math.min(100, Math.round((state.loaded / state.total) * 100));\n }\n\n // Speed + ETA on one line — percent itself is rendered separately (e.g. `<ore-progress>`'s\n // own `label`), so this only needs the two metrics that wouldn't otherwise fit there.\n function uploadMetaText(file: File): string {\n const state = fileState(file);\n\n return [formatSpeed(state.speedBps), formatEta(state)].filter(Boolean).join(' · ');\n }\n\n function statusIconName(file: File): string {\n const status = fileState(file).status;\n\n if (status === 'success') return 'check';\n\n if (status === 'error') return 'alert-circle';\n\n return 'file';\n }\n\n function dispose(): void {\n filesWatch.dispose();\n\n for (const controller of controllers.values()) controller.abort();\n\n controllers.clear();\n stateSignals.clear();\n }\n\n return {\n addFiles,\n dispose,\n fileState,\n files,\n removeFile,\n replaceFile,\n retryUpload,\n statusIconName,\n uploadMetaText,\n uploadPercent,\n };\n}\n"],"mappings":"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"}
|
package/dist/inputs/index.d.ts
CHANGED
|
@@ -9,9 +9,8 @@ export type { OreCheckboxEvents, OreCheckboxProps } from './checkbox/checkbox';
|
|
|
9
9
|
export { CHECKBOX_TAG } from './checkbox/checkbox';
|
|
10
10
|
export type { OreCheckboxGroupEvents, OreCheckboxGroupProps } from './checkbox-group/checkbox-group';
|
|
11
11
|
export { CHECKBOX_GROUP_CTX, CHECKBOX_GROUP_TAG } from './checkbox-group/checkbox-group';
|
|
12
|
-
export type { OreComboboxEvents, OreComboboxProps } from './combobox/combobox';
|
|
13
|
-
export { COMBOBOX_TAG } from './combobox/combobox';
|
|
14
|
-
export type { OreComboboxOptionProps } from './combobox/combobox.types';
|
|
12
|
+
export type { ComboboxOptionInput, OreComboboxEvents, OreComboboxOptionProps, OreComboboxProps, } from './combobox/combobox';
|
|
13
|
+
export { COMBOBOX_OPTION_TAG, COMBOBOX_TAG } from './combobox/combobox';
|
|
15
14
|
export type { DataGridColumn, DataGridLabels, DataGridSource, DataGridView, OreDataGridEvents, OreDataGridProps, } from './datagrid/datagrid';
|
|
16
15
|
export { DATAGRID_TAG } from './datagrid/datagrid';
|
|
17
16
|
export type { OreDatePickerEvents, OreDatePickerProps } from './date-picker/date-picker';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACrF,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACzF,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
let e=require("@vielzeug/ore");var t=e=>()=>e.value||void 0,n=(t,n,r)=>{let{assistiveId:i,checked:a,disabled:o,errorText:s,handleClick:c,handleKeydown:l,helperText:u,indeterminate:d,labelId:f,required:p}=n;(0,e.bind)({attr:{...d!==void 0&&{indeterminate:d},
|
|
1
|
+
let e=require("@vielzeug/ore");var t=e=>()=>e.value||void 0,n=(t,n,r)=>{let{assistiveId:i,checked:a,disabled:o,errorText:s,handleClick:c,handleKeydown:l,helperText:u,indeterminate:d,labelId:f,required:p}=n;(0,e.bind)({attr:{...d!==void 0&&{indeterminate:d},"aria-checked":()=>r===`checkbox`&&d?.value?`mixed`:a.value?`true`:`false`,"aria-describedby":()=>s.value||u.value?i:null,"aria-disabled":()=>o.value?`true`:null,"aria-invalid":()=>s.value?`true`:null,"aria-labelledby":f,"aria-required":()=>p?.value?`true`:null,checked:a,role:r,size:t,tabindex:()=>o.value?void 0:0},class:()=>({"is-checked":a.value,"is-disabled":o.value,...d!==void 0&&{"is-indeterminate":d.value}}),on:{click:c,keydown:l}})};exports.applyCheckableBinding=n,exports.errorAttr=t;
|
|
2
2
|
//# sourceMappingURL=field-binding.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-binding.cjs","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import { bind } from '@vielzeug/ore';\nimport type { Readable, Signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n assistiveId: string;\n checked: Signal<boolean>;\n disabled: Readable<boolean>;\n errorText: Readable<string>;\n handleClick: (event: MouseEvent) => boolean;\n handleKeydown: (event: KeyboardEvent) => boolean;\n helperText: Readable<string>;\n indeterminate?: Signal<boolean>;\n labelId: string;\n /** Reflects `aria-required` — there's no native form control here to carry a real `required` attribute. */\n required?: Readable<boolean | undefined>;\n};\n\n/**\n * `prop.string()` already reflects `error`'s raw value as an attribute, but that leaves the\n * attribute present-but-empty (`error=\"\"`) once set instead of removing it — this normalizes\n * an empty error back to \"no attribute at all\". Shared by every text-field component\n * (`ore-input`, `ore-textarea`, `ore-message-composer`) since `bind()`'s own `error` writer\n * needs a derived getter, not the raw prop, to get that behavior.\n *\n * @example\n * ```ts\n * bind({ attr: { error: errorAttr(errorText), size: props.size, variant: props.variant } });\n * ```\n */\nexport const errorAttr = (errorText: Readable<string>): (() => string | undefined) => {\n return () => errorText.value || undefined;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n fCtxSize: Readable<ComponentSize | undefined>,\n handle: CheckableBindingHandle,\n role: 'checkbox' | 'radio' | 'switch',\n): void => {\n const {\n assistiveId,\n checked,\n disabled,\n errorText,\n handleClick,\n handleKeydown,\n helperText,\n indeterminate,\n labelId,\n required,\n } = handle;\n\n bind({\n attr: {\n ...(indeterminate !== undefined && { indeterminate }),\n
|
|
1
|
+
{"version":3,"file":"field-binding.cjs","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import { bind } from '@vielzeug/ore';\nimport type { Readable, Signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n assistiveId: string;\n checked: Signal<boolean>;\n disabled: Readable<boolean>;\n errorText: Readable<string>;\n handleClick: (event: MouseEvent) => boolean;\n handleKeydown: (event: KeyboardEvent) => boolean;\n helperText: Readable<string>;\n indeterminate?: Signal<boolean>;\n labelId: string;\n /** Reflects `aria-required` — there's no native form control here to carry a real `required` attribute. */\n required?: Readable<boolean | undefined>;\n};\n\n/**\n * `prop.string()` already reflects `error`'s raw value as an attribute, but that leaves the\n * attribute present-but-empty (`error=\"\"`) once set instead of removing it — this normalizes\n * an empty error back to \"no attribute at all\". Shared by every text-field component\n * (`ore-input`, `ore-textarea`, `ore-message-composer`) since `bind()`'s own `error` writer\n * needs a derived getter, not the raw prop, to get that behavior.\n *\n * @example\n * ```ts\n * bind({ attr: { error: errorAttr(errorText), size: props.size, variant: props.variant } });\n * ```\n */\nexport const errorAttr = (errorText: Readable<string>): (() => string | undefined) => {\n return () => errorText.value || undefined;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n fCtxSize: Readable<ComponentSize | undefined>,\n handle: CheckableBindingHandle,\n role: 'checkbox' | 'radio' | 'switch',\n): void => {\n const {\n assistiveId,\n checked,\n disabled,\n errorText,\n handleClick,\n handleKeydown,\n helperText,\n indeterminate,\n labelId,\n required,\n } = handle;\n\n bind({\n attr: {\n ...(indeterminate !== undefined && { indeterminate }),\n 'aria-checked': () => {\n if (role === 'checkbox' && indeterminate?.value) return 'mixed';\n\n return checked.value ? 'true' : 'false';\n },\n 'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n 'aria-disabled': () => (disabled.value ? 'true' : null),\n 'aria-invalid': () => (errorText.value ? 'true' : null),\n 'aria-labelledby': labelId,\n 'aria-required': () => (required?.value ? 'true' : null),\n checked,\n role,\n size: fCtxSize,\n tabindex: () => (disabled.value ? undefined : 0),\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n ...(indeterminate !== undefined && { 'is-indeterminate': indeterminate.value }),\n }),\n on: {\n click: handleClick,\n keydown: handleKeydown,\n },\n });\n};\n"],"mappings":"+BAoCA,IAAa,EAAa,OACX,EAAU,OAAS,IAAA,GAarB,GACX,EACA,EACA,IACS,CACT,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,YACE,GAEJ,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,GAAI,IAAkB,IAAA,IAAa,CAAE,eAAc,EACnD,mBACM,IAAS,YAAc,GAAe,MAAc,QAEjD,EAAQ,MAAQ,OAAS,QAElC,uBAA2B,EAAU,OAAS,EAAW,MAAQ,EAAc,KAC/E,oBAAwB,EAAS,MAAQ,OAAS,KAClD,mBAAuB,EAAU,MAAQ,OAAS,KAClD,kBAAmB,EACnB,oBAAwB,GAAU,MAAQ,OAAS,KACnD,UACA,OACA,KAAM,EACN,aAAiB,EAAS,MAAQ,IAAA,GAAY,CAChD,EACA,WAAc,CACZ,aAAc,EAAQ,MACtB,cAAe,EAAS,MACxB,GAAI,IAAkB,IAAA,IAAa,CAAE,mBAAoB,EAAc,KAAM,CAC/E,GACA,GAAI,CACF,MAAO,EACP,QAAS,CACX,CACF,CAAC,CACH"}
|
|
@@ -5,12 +5,12 @@ var t = (e) => () => e.value || void 0, n = (t, n, r) => {
|
|
|
5
5
|
e({
|
|
6
6
|
attr: {
|
|
7
7
|
...d !== void 0 && { indeterminate: d },
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
"aria-checked": () => r === "checkbox" && d?.value ? "mixed" : a.value ? "true" : "false",
|
|
9
|
+
"aria-describedby": () => s.value || u.value ? i : null,
|
|
10
|
+
"aria-disabled": () => o.value ? "true" : null,
|
|
11
|
+
"aria-invalid": () => s.value ? "true" : null,
|
|
12
|
+
"aria-labelledby": f,
|
|
13
|
+
"aria-required": () => p?.value ? "true" : null,
|
|
14
14
|
checked: a,
|
|
15
15
|
role: r,
|
|
16
16
|
size: t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-binding.js","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import { bind } from '@vielzeug/ore';\nimport type { Readable, Signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n assistiveId: string;\n checked: Signal<boolean>;\n disabled: Readable<boolean>;\n errorText: Readable<string>;\n handleClick: (event: MouseEvent) => boolean;\n handleKeydown: (event: KeyboardEvent) => boolean;\n helperText: Readable<string>;\n indeterminate?: Signal<boolean>;\n labelId: string;\n /** Reflects `aria-required` — there's no native form control here to carry a real `required` attribute. */\n required?: Readable<boolean | undefined>;\n};\n\n/**\n * `prop.string()` already reflects `error`'s raw value as an attribute, but that leaves the\n * attribute present-but-empty (`error=\"\"`) once set instead of removing it — this normalizes\n * an empty error back to \"no attribute at all\". Shared by every text-field component\n * (`ore-input`, `ore-textarea`, `ore-message-composer`) since `bind()`'s own `error` writer\n * needs a derived getter, not the raw prop, to get that behavior.\n *\n * @example\n * ```ts\n * bind({ attr: { error: errorAttr(errorText), size: props.size, variant: props.variant } });\n * ```\n */\nexport const errorAttr = (errorText: Readable<string>): (() => string | undefined) => {\n return () => errorText.value || undefined;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n fCtxSize: Readable<ComponentSize | undefined>,\n handle: CheckableBindingHandle,\n role: 'checkbox' | 'radio' | 'switch',\n): void => {\n const {\n assistiveId,\n checked,\n disabled,\n errorText,\n handleClick,\n handleKeydown,\n helperText,\n indeterminate,\n labelId,\n required,\n } = handle;\n\n bind({\n attr: {\n ...(indeterminate !== undefined && { indeterminate }),\n
|
|
1
|
+
{"version":3,"file":"field-binding.js","names":[],"sources":["../../../src/inputs/shared/field-binding.ts"],"sourcesContent":["import { bind } from '@vielzeug/ore';\nimport type { Readable, Signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\n/**\n * Minimal shape of the handle returned by `createCheckable` that\n * `applyCheckableBinding` needs. Matches both checkbox (with `indeterminate`)\n * and switch (without).\n */\nexport type CheckableBindingHandle = {\n assistiveId: string;\n checked: Signal<boolean>;\n disabled: Readable<boolean>;\n errorText: Readable<string>;\n handleClick: (event: MouseEvent) => boolean;\n handleKeydown: (event: KeyboardEvent) => boolean;\n helperText: Readable<string>;\n indeterminate?: Signal<boolean>;\n labelId: string;\n /** Reflects `aria-required` — there's no native form control here to carry a real `required` attribute. */\n required?: Readable<boolean | undefined>;\n};\n\n/**\n * `prop.string()` already reflects `error`'s raw value as an attribute, but that leaves the\n * attribute present-but-empty (`error=\"\"`) once set instead of removing it — this normalizes\n * an empty error back to \"no attribute at all\". Shared by every text-field component\n * (`ore-input`, `ore-textarea`, `ore-message-composer`) since `bind()`'s own `error` writer\n * needs a derived getter, not the raw prop, to get that behavior.\n *\n * @example\n * ```ts\n * bind({ attr: { error: errorAttr(errorText), size: props.size, variant: props.variant } });\n * ```\n */\nexport const errorAttr = (errorText: Readable<string>): (() => string | undefined) => {\n return () => errorText.value || undefined;\n};\n\n/**\n * Applies the standard host bindings shared by all checkable components\n * (checkbox, switch, radio).\n *\n * Wires `role`, all ARIA attributes, `checked`, `size`, `tabindex`, the\n * `is-checked`/`is-disabled` classes, and the `click`/`keydown` event handlers.\n *\n * Pass `handle.indeterminate` for components that need it (checkbox);\n * omit it for switch/radio.\n */\nexport const applyCheckableBinding = (\n fCtxSize: Readable<ComponentSize | undefined>,\n handle: CheckableBindingHandle,\n role: 'checkbox' | 'radio' | 'switch',\n): void => {\n const {\n assistiveId,\n checked,\n disabled,\n errorText,\n handleClick,\n handleKeydown,\n helperText,\n indeterminate,\n labelId,\n required,\n } = handle;\n\n bind({\n attr: {\n ...(indeterminate !== undefined && { indeterminate }),\n 'aria-checked': () => {\n if (role === 'checkbox' && indeterminate?.value) return 'mixed';\n\n return checked.value ? 'true' : 'false';\n },\n 'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n 'aria-disabled': () => (disabled.value ? 'true' : null),\n 'aria-invalid': () => (errorText.value ? 'true' : null),\n 'aria-labelledby': labelId,\n 'aria-required': () => (required?.value ? 'true' : null),\n checked,\n role,\n size: fCtxSize,\n tabindex: () => (disabled.value ? undefined : 0),\n },\n class: () => ({\n 'is-checked': checked.value,\n 'is-disabled': disabled.value,\n ...(indeterminate !== undefined && { 'is-indeterminate': indeterminate.value }),\n }),\n on: {\n click: handleClick,\n keydown: handleKeydown,\n },\n });\n};\n"],"mappings":";;AAoCA,IAAa,KAAa,YACX,EAAU,SAAS,KAAA,GAarB,KACX,GACA,GACA,MACS;CACT,IAAM,EACJ,gBACA,YACA,aACA,cACA,gBACA,kBACA,eACA,kBACA,YACA,gBACE;CAEJ,EAAK;EACH,MAAM;GACJ,GAAI,MAAkB,KAAA,KAAa,EAAE,iBAAc;GACnD,sBACM,MAAS,cAAc,GAAe,QAAc,UAEjD,EAAQ,QAAQ,SAAS;GAElC,0BAA2B,EAAU,SAAS,EAAW,QAAQ,IAAc;GAC/E,uBAAwB,EAAS,QAAQ,SAAS;GAClD,sBAAuB,EAAU,QAAQ,SAAS;GAClD,mBAAmB;GACnB,uBAAwB,GAAU,QAAQ,SAAS;GACnD;GACA;GACA,MAAM;GACN,gBAAiB,EAAS,QAAQ,KAAA,IAAY;EAChD;EACA,cAAc;GACZ,cAAc,EAAQ;GACtB,eAAe,EAAS;GACxB,GAAI,MAAkB,KAAA,KAAa,EAAE,oBAAoB,EAAc,MAAM;EAC/E;EACA,IAAI;GACF,OAAO;GACP,SAAS;EACX;CACF,CAAC;AACH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([
|
|
1
|
+
var e=`@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([color]:not([variant=frost]):hover){--_bg:color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer refine.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=box.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.css.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--box-bg, var(--color-canvas));\n --_color: var(--box-color, var(--color-contrast-900));\n --_border-width: var(--box-border, var(--border));\n --_border-color: var(--box-border-color, var(--color-divider));\n --_radius: var(--box-radius, var(--rounded-lg));\n --_padding: var(--box-padding, var(--size-4));\n --_shadow: var(--box-shadow, var(--shadow-sm));\n\n position: relative;\n display: block;\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: var(--_padding);\n color: var(--_color);\n background: var(--_bg);\n border: var(--_border-width) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--_shadow);\n backdrop-filter: blur(var(--blur-md));\n transition:\n backdrop-filter var(--transition-fast),\n box-shadow var(--transition-normal),\n background var(--transition-normal),\n border-color var(--transition-normal);\n }\n}\n\n@layer refine.variants {\n /* Color theme integration — custom props still take priority */\n :host([color]) {\n --_bg: var(--box-bg, var(--_theme-backdrop));\n --_border-color: var(--box-border-color, var(--_theme-border));\n }\n\n /* Flat - border only, no shadow */\n :host([variant='flat']) {\n --_shadow: none;\n }\n\n /*
|
|
1
|
+
{"version":3,"file":"box.css.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--box-bg, var(--color-canvas));\n --_color: var(--box-color, var(--color-contrast-900));\n --_border-width: var(--box-border, var(--border));\n --_border-color: var(--box-border-color, var(--color-divider));\n --_radius: var(--box-radius, var(--rounded-lg));\n --_padding: var(--box-padding, var(--size-4));\n --_shadow: var(--box-shadow, var(--shadow-sm));\n\n position: relative;\n display: block;\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: var(--_padding);\n color: var(--_color);\n background: var(--_bg);\n border: var(--_border-width) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--_shadow);\n backdrop-filter: blur(var(--blur-md));\n transition:\n backdrop-filter var(--transition-fast),\n box-shadow var(--transition-normal),\n background var(--transition-normal),\n border-color var(--transition-normal);\n }\n}\n\n@layer refine.variants {\n /* Color theme integration — custom props still take priority */\n :host([color]) {\n --_bg: var(--box-bg, var(--_theme-backdrop));\n --_border-color: var(--box-border-color, var(--_theme-border));\n }\n\n /* Flat - border only, no shadow */\n :host([variant='flat']) {\n --_shadow: none;\n }\n\n /* Subtle hover for solid/default + color (frost manages its own hover) */\n :host([color]:not([variant='frost']):hover) {\n --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n --_border-color: var(--_theme-focus);\n }\n}\n\n@layer refine.utilities {\n :host([fullwidth]) {\n width: 100%;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/layout/box/box.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([
|
|
2
|
+
var e = "@layer refine.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-divider));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transition:backdrop-filter var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);position:relative}}@layer refine.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([color]:not([variant=frost]):hover){--_bg:color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer refine.utilities{:host([fullwidth]){width:100%}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.css.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--box-bg, var(--color-canvas));\n --_color: var(--box-color, var(--color-contrast-900));\n --_border-width: var(--box-border, var(--border));\n --_border-color: var(--box-border-color, var(--color-divider));\n --_radius: var(--box-radius, var(--rounded-lg));\n --_padding: var(--box-padding, var(--size-4));\n --_shadow: var(--box-shadow, var(--shadow-sm));\n\n position: relative;\n display: block;\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: var(--_padding);\n color: var(--_color);\n background: var(--_bg);\n border: var(--_border-width) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--_shadow);\n backdrop-filter: blur(var(--blur-md));\n transition:\n backdrop-filter var(--transition-fast),\n box-shadow var(--transition-normal),\n background var(--transition-normal),\n border-color var(--transition-normal);\n }\n}\n\n@layer refine.variants {\n /* Color theme integration — custom props still take priority */\n :host([color]) {\n --_bg: var(--box-bg, var(--_theme-backdrop));\n --_border-color: var(--box-border-color, var(--_theme-border));\n }\n\n /* Flat - border only, no shadow */\n :host([variant='flat']) {\n --_shadow: none;\n }\n\n /*
|
|
1
|
+
{"version":3,"file":"box.css.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_bg: var(--box-bg, var(--color-canvas));\n --_color: var(--box-color, var(--color-contrast-900));\n --_border-width: var(--box-border, var(--border));\n --_border-color: var(--box-border-color, var(--color-divider));\n --_radius: var(--box-radius, var(--rounded-lg));\n --_padding: var(--box-padding, var(--size-4));\n --_shadow: var(--box-shadow, var(--shadow-sm));\n\n position: relative;\n display: block;\n }\n\n .box {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: var(--_padding);\n color: var(--_color);\n background: var(--_bg);\n border: var(--_border-width) solid var(--_border-color);\n border-radius: var(--_radius);\n box-shadow: var(--_shadow);\n backdrop-filter: blur(var(--blur-md));\n transition:\n backdrop-filter var(--transition-fast),\n box-shadow var(--transition-normal),\n background var(--transition-normal),\n border-color var(--transition-normal);\n }\n}\n\n@layer refine.variants {\n /* Color theme integration — custom props still take priority */\n :host([color]) {\n --_bg: var(--box-bg, var(--_theme-backdrop));\n --_border-color: var(--box-border-color, var(--_theme-border));\n }\n\n /* Flat - border only, no shadow */\n :host([variant='flat']) {\n --_shadow: none;\n }\n\n /* Subtle hover for solid/default + color (frost manages its own hover) */\n :host([color]:not([variant='frost']):hover) {\n --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n --_border-color: var(--_theme-focus);\n }\n}\n\n@layer refine.utilities {\n :host([fullwidth]) {\n width: 100%;\n }\n}\n"],"mappings":""}
|
package/dist/layout/box/box.d.ts
CHANGED
|
@@ -14,14 +14,14 @@ export type OreBoxProps = {
|
|
|
14
14
|
/** Border radius size */
|
|
15
15
|
rounded?: RoundedSize;
|
|
16
16
|
/** Visual style variant */
|
|
17
|
-
variant?: 'solid' | 'flat' | '
|
|
17
|
+
variant?: 'solid' | 'flat' | 'frost';
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* ore-box — A foundational layout primitive with theming support.
|
|
21
21
|
*
|
|
22
22
|
* @element ore-box
|
|
23
23
|
*
|
|
24
|
-
* @attr {string} variant - Style variant: 'solid' | 'flat' | '
|
|
24
|
+
* @attr {string} variant - Style variant: 'solid' | 'flat' | 'frost'
|
|
25
25
|
* @attr {string} color - Color theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
|
|
26
26
|
* @attr {string} padding - Padding size: 'none' | 'sm' | 'md' | 'lg' | 'xl'
|
|
27
27
|
* @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'
|
|
@@ -44,7 +44,7 @@ export type OreBoxProps = {
|
|
|
44
44
|
* @example
|
|
45
45
|
* ```html
|
|
46
46
|
* <ore-box padding="lg" elevation="2">Simple content</ore-box>
|
|
47
|
-
* <ore-box variant="
|
|
47
|
+
* <ore-box variant="solid" color="primary">Solid color</ore-box>
|
|
48
48
|
* <ore-box variant="frost" effect="rainbow">Frosted glass</ore-box>
|
|
49
49
|
* ```
|
|
50
50
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/layout/box/box.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxF,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,
|
|
1
|
+
{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/layout/box/box.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxF,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CACtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,OAAO,EAAG,SAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.ts"],"names":[],"mappings":"AAqCA,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElG,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;IACvD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC1F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo,.navbar-start,.navbar-center,.navbar-end{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:color-mix(in oklch, var(--color-canvas) 88%, transparent);--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--color-canvas);--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:transparent;--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([
|
|
1
|
+
var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo,.navbar-start,.navbar-center,.navbar-end{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:color-mix(in oklch, var(--color-canvas) 88%, transparent);--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--color-canvas);--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:transparent;--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([color]){--_navbar-border-color:color-mix(in oklch, var(--_theme-border) 30%, transparent)}}@media (width<=768px){@layer refine.base{:host([data-mode=floating]){inset-inline:var(--size-2);top:var(--size-2)}:host([floating][sticky][data-scrolled]){top:0;left:0;right:0}}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=navbar.css.cjs.map
|