@yewdiel21/motion-kit 0.10.0 → 0.14.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 +155 -93
- package/dist/auto/index.d.ts +53 -3
- package/dist/auto/index.js +101 -3
- package/dist/auto/index.js.map +1 -1
- package/dist/{chunk-IKQ5FODN.js → chunk-6P4P7NU6.js} +2 -218
- package/dist/chunk-6P4P7NU6.js.map +1 -0
- package/dist/chunk-CU6SXW3E.js +20334 -0
- package/dist/chunk-CU6SXW3E.js.map +1 -0
- package/dist/{chunk-XAKC2QY7.js → chunk-EY4BJKC4.js} +3 -28
- package/dist/chunk-EY4BJKC4.js.map +1 -0
- package/dist/chunk-QP4QJOEN.js +72 -0
- package/dist/chunk-QP4QJOEN.js.map +1 -0
- package/dist/css/components/activity-feed.css +240 -0
- package/dist/css/components/attachment.css +266 -0
- package/dist/css/components/breadcrumb.css +110 -0
- package/dist/css/components/chart-tooltip.css +168 -0
- package/dist/css/components/chart.css +296 -0
- package/dist/css/components/code-block.css +264 -0
- package/dist/css/components/color-area.css +82 -0
- package/dist/css/components/color-field.css +67 -0
- package/dist/css/components/color-picker.css +131 -0
- package/dist/css/components/color-slider.css +113 -0
- package/dist/css/components/command-search.css +252 -0
- package/dist/css/components/context-menu.css +23 -0
- package/dist/css/components/credit-card.css +288 -0
- package/dist/css/components/data-table.css +591 -0
- package/dist/css/components/date-range-picker.css +168 -0
- package/dist/css/components/date-time-picker.css +178 -0
- package/dist/css/components/drawer.css +58 -0
- package/dist/css/components/editable-table.css +201 -0
- package/dist/css/components/empty-state.css +61 -0
- package/dist/css/components/file-explorer.css +633 -0
- package/dist/css/components/filter-builder.css +232 -0
- package/dist/css/components/hold-confirm.css +87 -0
- package/dist/css/components/hover-card.css +13 -7
- package/dist/css/components/image-preview.css +195 -0
- package/dist/css/components/json-viewer.css +272 -0
- package/dist/css/components/like-button.css +78 -0
- package/dist/css/components/link-preview.css +275 -0
- package/dist/css/components/loading-button.css +77 -0
- package/dist/css/components/multi-select.css +267 -0
- package/dist/css/components/notification-bell.css +127 -0
- package/dist/css/components/password-strength.css +183 -0
- package/dist/css/components/popover.css +25 -0
- package/dist/css/components/progress.css +140 -0
- package/dist/css/components/questionnaire.css +217 -0
- package/dist/css/components/range-calendar.css +186 -0
- package/dist/css/components/range-slider.css +192 -0
- package/dist/css/components/resizable-panel.css +243 -0
- package/dist/css/components/rich-text-editor.css +284 -0
- package/dist/css/components/scratch-card.css +75 -0
- package/dist/css/components/skeleton.css +108 -0
- package/dist/css/components/split-view.css +19 -0
- package/dist/css/components/star-rating.css +80 -0
- package/dist/css/components/stat-card.css +164 -0
- package/dist/css/components/swipe-actions.css +105 -0
- package/dist/css/components/tag-input.css +244 -0
- package/dist/css/components/time-field.css +88 -0
- package/dist/css/components/timeline.css +219 -0
- package/dist/css/components/tooltip.css +79 -0
- package/dist/css/components/tree-view.css +210 -0
- package/dist/css/components/virtual-list.css +195 -0
- package/dist/css/tokens.css +185 -181
- package/dist/elements/index.d.ts +674 -5
- package/dist/elements/index.js +1361 -8
- package/dist/elements/index.js.map +1 -1
- package/dist/{engine-GDGwQnJE.d.ts → engine-Cn6IhE3z.d.ts} +1 -1
- package/dist/engine-QECQnGz1.d.ts +33 -0
- package/dist/index.css +9104 -189
- package/dist/index.d.ts +89 -5
- package/dist/index.js +243 -9
- package/dist/index.js.map +1 -1
- package/dist/react/index.d.ts +579 -23
- package/dist/react/index.js +2042 -7
- package/dist/react/index.js.map +1 -1
- package/dist/{reduced-BmBzKH94.d.ts → reduced-BBUusld6.d.ts} +9 -2
- package/dist/reveal-DEvp6U6T.d.ts +2381 -0
- package/dist/{store-DYb3tTsZ.d.ts → store-DjkTBX7f.d.ts} +2 -2
- package/package.json +1 -1
- package/registry.json +406 -1
- package/src/auto/auto-init.ts +98 -0
- package/src/components/activity-feed/README.md +56 -0
- package/src/components/activity-feed/activity-feed.css +239 -0
- package/src/components/activity-feed/element.ts +36 -0
- package/src/components/activity-feed/engine.ts +351 -0
- package/src/components/activity-feed/react.tsx +32 -0
- package/src/components/attachment/README.md +27 -0
- package/src/components/attachment/attachment.css +265 -0
- package/src/components/attachment/element.ts +50 -0
- package/src/components/attachment/engine.ts +469 -0
- package/src/components/attachment/react.tsx +65 -0
- package/src/components/breadcrumb/README.md +38 -0
- package/src/components/breadcrumb/breadcrumb.css +109 -0
- package/src/components/breadcrumb/element.ts +27 -0
- package/src/components/breadcrumb/engine.ts +249 -0
- package/src/components/breadcrumb/react.tsx +30 -0
- package/src/components/chart/README.md +24 -0
- package/src/components/chart/chart.css +295 -0
- package/src/components/chart/element.ts +41 -0
- package/src/components/chart/engine.ts +811 -0
- package/src/components/chart/react.tsx +50 -0
- package/src/components/chart-tooltip/README.md +53 -0
- package/src/components/chart-tooltip/chart-tooltip.css +167 -0
- package/src/components/chart-tooltip/element.ts +37 -0
- package/src/components/chart-tooltip/engine.ts +442 -0
- package/src/components/chart-tooltip/react.tsx +47 -0
- package/src/components/code-block/README.md +19 -0
- package/src/components/code-block/code-block.css +263 -0
- package/src/components/code-block/element.ts +34 -0
- package/src/components/code-block/engine.ts +254 -0
- package/src/components/code-block/highlight.ts +244 -0
- package/src/components/code-block/react.tsx +94 -0
- package/src/components/color-area/README.md +50 -0
- package/src/components/color-area/color-area.css +81 -0
- package/src/components/color-area/element.ts +26 -0
- package/src/components/color-area/engine.ts +246 -0
- package/src/components/color-area/react.tsx +42 -0
- package/src/components/color-field/README.md +43 -0
- package/src/components/color-field/color-field.css +66 -0
- package/src/components/color-field/element.ts +26 -0
- package/src/components/color-field/engine.ts +174 -0
- package/src/components/color-field/react.tsx +42 -0
- package/src/components/color-picker/README.md +45 -0
- package/src/components/color-picker/color-picker.css +130 -0
- package/src/components/color-picker/element.ts +45 -0
- package/src/components/color-picker/engine.ts +314 -0
- package/src/components/color-picker/react.tsx +47 -0
- package/src/components/color-slider/README.md +55 -0
- package/src/components/color-slider/color-slider.css +112 -0
- package/src/components/color-slider/element.ts +26 -0
- package/src/components/color-slider/engine.ts +234 -0
- package/src/components/color-slider/react.tsx +45 -0
- package/src/components/command-search/README.md +15 -0
- package/src/components/command-search/command-search.css +251 -0
- package/src/components/command-search/element.ts +36 -0
- package/src/components/command-search/engine.ts +356 -0
- package/src/components/command-search/match.ts +53 -0
- package/src/components/command-search/react.tsx +66 -0
- package/src/components/context-menu/README.md +31 -0
- package/src/components/context-menu/context-menu.css +22 -0
- package/src/components/context-menu/element.ts +40 -0
- package/src/components/context-menu/engine.ts +153 -0
- package/src/components/context-menu/react.tsx +57 -0
- package/src/components/credit-card/README.md +20 -0
- package/src/components/credit-card/card.ts +77 -0
- package/src/components/credit-card/credit-card.css +287 -0
- package/src/components/credit-card/element.ts +33 -0
- package/src/components/credit-card/engine.ts +410 -0
- package/src/components/credit-card/react.tsx +36 -0
- package/src/components/data-table/README.md +83 -0
- package/src/components/data-table/data-table.css +590 -0
- package/src/components/data-table/element.ts +54 -0
- package/src/components/data-table/engine.ts +1059 -0
- package/src/components/data-table/react.tsx +94 -0
- package/src/components/date-range-picker/README.md +51 -0
- package/src/components/date-range-picker/date-range-picker.css +167 -0
- package/src/components/date-range-picker/element.ts +52 -0
- package/src/components/date-range-picker/engine.ts +352 -0
- package/src/components/date-range-picker/react.tsx +57 -0
- package/src/components/date-time-picker/README.md +48 -0
- package/src/components/date-time-picker/date-time-picker.css +177 -0
- package/src/components/date-time-picker/element.ts +47 -0
- package/src/components/date-time-picker/engine.ts +350 -0
- package/src/components/date-time-picker/react.tsx +54 -0
- package/src/components/dialog/README.md +103 -102
- package/src/components/dialog/element.ts +123 -118
- package/src/components/dialog/engine.ts +449 -432
- package/src/components/drawer/README.md +28 -0
- package/src/components/drawer/drawer.css +57 -0
- package/src/components/drawer/element.ts +21 -0
- package/src/components/drawer/engine.ts +56 -0
- package/src/components/drawer/react.tsx +85 -0
- package/src/components/editable-table/README.md +67 -0
- package/src/components/editable-table/editable-table.css +200 -0
- package/src/components/editable-table/element.ts +45 -0
- package/src/components/editable-table/engine.ts +775 -0
- package/src/components/editable-table/react.tsx +79 -0
- package/src/components/empty-state/README.md +41 -0
- package/src/components/empty-state/element.ts +23 -0
- package/src/components/empty-state/empty-state.css +60 -0
- package/src/components/empty-state/engine.ts +232 -0
- package/src/components/empty-state/react.tsx +34 -0
- package/src/components/file-explorer/README.md +67 -0
- package/src/components/file-explorer/element.ts +39 -0
- package/src/components/file-explorer/engine.ts +1307 -0
- package/src/components/file-explorer/file-explorer.css +632 -0
- package/src/components/file-explorer/react.tsx +77 -0
- package/src/components/filter-builder/README.md +47 -0
- package/src/components/filter-builder/element.ts +34 -0
- package/src/components/filter-builder/engine.ts +365 -0
- package/src/components/filter-builder/filter-builder.css +231 -0
- package/src/components/filter-builder/react.tsx +36 -0
- package/src/components/hold-confirm/README.md +13 -0
- package/src/components/hold-confirm/element.ts +24 -0
- package/src/components/hold-confirm/engine.ts +216 -0
- package/src/components/hold-confirm/hold-confirm.css +86 -0
- package/src/components/hold-confirm/react.tsx +28 -0
- package/src/components/hover-card/README.md +6 -2
- package/src/components/hover-card/engine.ts +68 -6
- package/src/components/hover-card/hover-card.css +13 -7
- package/src/components/image-preview/README.md +16 -0
- package/src/components/image-preview/element.ts +26 -0
- package/src/components/image-preview/engine.ts +325 -0
- package/src/components/image-preview/image-preview.css +194 -0
- package/src/components/image-preview/react.tsx +43 -0
- package/src/components/json-viewer/README.md +56 -0
- package/src/components/json-viewer/element.ts +37 -0
- package/src/components/json-viewer/engine.ts +440 -0
- package/src/components/json-viewer/json-viewer.css +271 -0
- package/src/components/json-viewer/react.tsx +56 -0
- package/src/components/like-button/README.md +13 -0
- package/src/components/like-button/element.ts +47 -0
- package/src/components/like-button/engine.ts +145 -0
- package/src/components/like-button/like-button.css +77 -0
- package/src/components/like-button/react.tsx +39 -0
- package/src/components/link-preview/README.md +19 -0
- package/src/components/link-preview/element.ts +29 -0
- package/src/components/link-preview/engine.ts +192 -0
- package/src/components/link-preview/link-preview.css +274 -0
- package/src/components/link-preview/react.tsx +101 -0
- package/src/components/loading-button/README.md +45 -0
- package/src/components/loading-button/element.ts +34 -0
- package/src/components/loading-button/engine.ts +201 -0
- package/src/components/loading-button/loading-button.css +76 -0
- package/src/components/loading-button/react.tsx +43 -0
- package/src/components/multi-select/README.md +48 -0
- package/src/components/multi-select/element.ts +28 -0
- package/src/components/multi-select/engine.ts +294 -0
- package/src/components/multi-select/multi-select.css +266 -0
- package/src/components/multi-select/react.tsx +39 -0
- package/src/components/notification-bell/README.md +14 -0
- package/src/components/notification-bell/element.ts +48 -0
- package/src/components/notification-bell/engine.ts +202 -0
- package/src/components/notification-bell/notification-bell.css +126 -0
- package/src/components/notification-bell/react.tsx +57 -0
- package/src/components/password-strength/README.md +17 -0
- package/src/components/password-strength/element.ts +22 -0
- package/src/components/password-strength/engine.ts +212 -0
- package/src/components/password-strength/password-strength.css +182 -0
- package/src/components/password-strength/react.tsx +36 -0
- package/src/components/password-strength/score.ts +62 -0
- package/src/components/popover/README.md +44 -0
- package/src/components/popover/element.ts +31 -0
- package/src/components/popover/engine.ts +114 -0
- package/src/components/popover/popover.css +24 -0
- package/src/components/popover/react.tsx +50 -0
- package/src/components/progress/README.md +17 -0
- package/src/components/progress/element.ts +30 -0
- package/src/components/progress/engine.ts +173 -0
- package/src/components/progress/progress.css +139 -0
- package/src/components/progress/react.tsx +35 -0
- package/src/components/questionnaire/README.md +32 -0
- package/src/components/questionnaire/element.ts +118 -0
- package/src/components/questionnaire/engine.ts +255 -0
- package/src/components/questionnaire/questionnaire.css +216 -0
- package/src/components/questionnaire/react.tsx +140 -0
- package/src/components/range-calendar/README.md +58 -0
- package/src/components/range-calendar/element.ts +42 -0
- package/src/components/range-calendar/engine.ts +390 -0
- package/src/components/range-calendar/range-calendar.css +185 -0
- package/src/components/range-calendar/react.tsx +56 -0
- package/src/components/range-slider/README.md +23 -0
- package/src/components/range-slider/element.ts +53 -0
- package/src/components/range-slider/engine.ts +316 -0
- package/src/components/range-slider/range-slider.css +191 -0
- package/src/components/range-slider/react.tsx +66 -0
- package/src/components/resizable-panel/README.md +61 -0
- package/src/components/resizable-panel/element.ts +36 -0
- package/src/components/resizable-panel/engine.ts +551 -0
- package/src/components/resizable-panel/react.tsx +74 -0
- package/src/components/resizable-panel/resizable-panel.css +242 -0
- package/src/components/rich-text-editor/README.md +57 -0
- package/src/components/rich-text-editor/element.ts +34 -0
- package/src/components/rich-text-editor/engine.ts +673 -0
- package/src/components/rich-text-editor/react.tsx +60 -0
- package/src/components/rich-text-editor/rich-text-editor.css +283 -0
- package/src/components/scratch-card/README.md +15 -0
- package/src/components/scratch-card/element.ts +30 -0
- package/src/components/scratch-card/engine.ts +257 -0
- package/src/components/scratch-card/react.tsx +40 -0
- package/src/components/scratch-card/scratch-card.css +74 -0
- package/src/components/skeleton/README.md +15 -0
- package/src/components/skeleton/element.ts +32 -0
- package/src/components/skeleton/engine.ts +104 -0
- package/src/components/skeleton/react.tsx +41 -0
- package/src/components/skeleton/skeleton.css +107 -0
- package/src/components/split-view/README.md +50 -0
- package/src/components/split-view/element.ts +34 -0
- package/src/components/split-view/engine.ts +114 -0
- package/src/components/split-view/react.tsx +63 -0
- package/src/components/split-view/split-view.css +18 -0
- package/src/components/star-rating/README.md +14 -0
- package/src/components/star-rating/element.ts +26 -0
- package/src/components/star-rating/engine.ts +217 -0
- package/src/components/star-rating/react.tsx +33 -0
- package/src/components/star-rating/star-rating.css +79 -0
- package/src/components/stat-card/README.md +42 -0
- package/src/components/stat-card/element.ts +40 -0
- package/src/components/stat-card/engine.ts +283 -0
- package/src/components/stat-card/react.tsx +36 -0
- package/src/components/stat-card/stat-card.css +163 -0
- package/src/components/swipe-actions/README.md +19 -0
- package/src/components/swipe-actions/element.ts +26 -0
- package/src/components/swipe-actions/engine.ts +260 -0
- package/src/components/swipe-actions/react.tsx +80 -0
- package/src/components/swipe-actions/swipe-actions.css +104 -0
- package/src/components/tag-input/README.md +42 -0
- package/src/components/tag-input/element.ts +39 -0
- package/src/components/tag-input/engine.ts +313 -0
- package/src/components/tag-input/react.tsx +54 -0
- package/src/components/tag-input/tag-input.css +243 -0
- package/src/components/time-field/README.md +54 -0
- package/src/components/time-field/element.ts +38 -0
- package/src/components/time-field/engine.ts +110 -0
- package/src/components/time-field/react.tsx +45 -0
- package/src/components/time-field/time-field.css +87 -0
- package/src/components/timeline/README.md +57 -0
- package/src/components/timeline/element.ts +31 -0
- package/src/components/timeline/engine.ts +300 -0
- package/src/components/timeline/react.tsx +59 -0
- package/src/components/timeline/timeline.css +218 -0
- package/src/components/tooltip/README.md +46 -0
- package/src/components/tooltip/element.ts +22 -0
- package/src/components/tooltip/engine.ts +288 -0
- package/src/components/tooltip/react.tsx +30 -0
- package/src/components/tooltip/tooltip.css +78 -0
- package/src/components/tree-view/README.md +61 -0
- package/src/components/tree-view/element.ts +32 -0
- package/src/components/tree-view/engine.ts +569 -0
- package/src/components/tree-view/react.tsx +78 -0
- package/src/components/tree-view/tree-view.css +209 -0
- package/src/components/virtual-list/README.md +81 -0
- package/src/components/virtual-list/element.ts +42 -0
- package/src/components/virtual-list/engine.ts +678 -0
- package/src/components/virtual-list/react.tsx +101 -0
- package/src/components/virtual-list/virtual-list.css +194 -0
- package/src/core/chips.ts +196 -0
- package/src/core/color.ts +304 -0
- package/src/core/date-range.ts +67 -0
- package/src/core/dates.ts +11 -1
- package/src/core/files.ts +107 -0
- package/src/core/filter.ts +229 -0
- package/src/core/gsap.ts +80 -65
- package/src/core/listbox.ts +332 -0
- package/src/core/mark.ts +29 -0
- package/src/core/position.ts +89 -0
- package/src/core/relative-time.ts +77 -0
- package/src/core/segment-field.ts +373 -0
- package/src/core/segments.ts +153 -0
- package/src/core/tree.ts +116 -0
- package/src/core/virtual.ts +79 -0
- package/src/css/tokens.css +186 -182
- package/src/elements/index.ts +147 -0
- package/src/index.ts +72 -0
- package/src/motion/micro.ts +248 -0
- package/src/motion/sheet.ts +88 -65
- package/src/motion/surface.ts +9 -0
- package/src/react/index.ts +57 -0
- package/dist/chunk-IKQ5FODN.js.map +0 -1
- package/dist/chunk-J6OCFNGU.js +0 -177
- package/dist/chunk-J6OCFNGU.js.map +0 -1
- package/dist/chunk-TFNRIZHU.js +0 -3977
- package/dist/chunk-TFNRIZHU.js.map +0 -1
- package/dist/chunk-XAKC2QY7.js.map +0 -1
- package/dist/reveal-jsX-uwUz.d.ts +0 -625
|
@@ -0,0 +1,2381 @@
|
|
|
1
|
+
import { I as Instance } from './types-BkS_raL8.js';
|
|
2
|
+
|
|
3
|
+
/** drawer: slides in from its side (data-mk-drawer="left|right", see createDrawer). */
|
|
4
|
+
type DialogVariant = 'morph' | 'liquid' | 'sheet' | 'drawer';
|
|
5
|
+
type DialogPlacement = 'center' | 'anchor' | 'side';
|
|
6
|
+
interface DialogLabels {
|
|
7
|
+
close?: string;
|
|
8
|
+
float?: string;
|
|
9
|
+
dock?: string;
|
|
10
|
+
}
|
|
11
|
+
interface DialogOptions {
|
|
12
|
+
/** morph (default), liquid, or sheet: rises from the bottom and pushes [data-mk-underlay] back. */
|
|
13
|
+
variant?: DialogVariant;
|
|
14
|
+
placement?: DialogPlacement;
|
|
15
|
+
/** placement 'anchor': the box to place it against, read on open and resize (default: the opener's). */
|
|
16
|
+
anchor?: () => DOMRect | null | undefined;
|
|
17
|
+
/** Tinted backdrop; false leaves it transparent (menus). */
|
|
18
|
+
backdrop?: boolean;
|
|
19
|
+
closeOnBackdrop?: boolean;
|
|
20
|
+
/** Drag (or wheel) down to dismiss. */
|
|
21
|
+
drag?: boolean;
|
|
22
|
+
/** A key turns on the floating window (desktop) and remembers its place. */
|
|
23
|
+
float?: string | false;
|
|
24
|
+
autoResize?: boolean;
|
|
25
|
+
/** `[data-mk-open="<id>"]` buttons open it: true uses the dialog's id; a string names another id; false: none. */
|
|
26
|
+
triggers?: boolean | string;
|
|
27
|
+
/** Modal (default) or a non-modal dialog. */
|
|
28
|
+
modal?: boolean;
|
|
29
|
+
labels?: DialogLabels;
|
|
30
|
+
/** Grow the content with the surface (default). Menus turn it off and cascade their items instead. */
|
|
31
|
+
animateContent?: boolean;
|
|
32
|
+
onOpen?: () => void;
|
|
33
|
+
/** After it closed, whatever closed it. */
|
|
34
|
+
onClose?: () => void;
|
|
35
|
+
}
|
|
36
|
+
interface DialogInstance extends Instance {
|
|
37
|
+
/** `origin`: the control it grows from; omitted, the focused control; null, none (scale-in). */
|
|
38
|
+
open(origin?: HTMLElement | null): void;
|
|
39
|
+
close(): void;
|
|
40
|
+
toggle(origin?: HTMLElement | null): void;
|
|
41
|
+
float(): void;
|
|
42
|
+
dock(): void;
|
|
43
|
+
readonly isOpen: boolean;
|
|
44
|
+
readonly isFloating: boolean;
|
|
45
|
+
readonly element: HTMLElement;
|
|
46
|
+
}
|
|
47
|
+
declare function createDialog(dialog: HTMLElement | null, options?: DialogOptions): DialogInstance;
|
|
48
|
+
|
|
49
|
+
interface MenuOptions extends Omit<DialogOptions, 'placement' | 'backdrop' | 'drag' | 'autoResize' | 'animateContent'> {
|
|
50
|
+
ticket?: boolean;
|
|
51
|
+
/** Close after an option is chosen (default). */
|
|
52
|
+
closeOnSelect?: boolean;
|
|
53
|
+
onSelect?: (value: string, item: HTMLElement) => void;
|
|
54
|
+
}
|
|
55
|
+
interface MenuInstance extends DialogInstance {
|
|
56
|
+
readonly items: HTMLElement[];
|
|
57
|
+
}
|
|
58
|
+
declare function createMenu(dialog: HTMLElement | null, options?: MenuOptions): MenuInstance;
|
|
59
|
+
|
|
60
|
+
interface QuantityOptions {
|
|
61
|
+
min?: number;
|
|
62
|
+
max?: number;
|
|
63
|
+
step?: number;
|
|
64
|
+
value?: number;
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
onChange?: (value: number) => void;
|
|
67
|
+
}
|
|
68
|
+
interface QuantityInstance extends Instance {
|
|
69
|
+
setValue(value: number, notify?: boolean): void;
|
|
70
|
+
readonly value: number;
|
|
71
|
+
}
|
|
72
|
+
/** Bounded numeric control. Bite/rotation is CSS; buttons remain native. */
|
|
73
|
+
declare function createQuantity(root: HTMLElement | null, options?: QuantityOptions): QuantityInstance;
|
|
74
|
+
|
|
75
|
+
interface PaginationOptions {
|
|
76
|
+
totalPages?: number;
|
|
77
|
+
page?: number;
|
|
78
|
+
siblings?: number;
|
|
79
|
+
pageLabel?: (page: number) => string;
|
|
80
|
+
onChange?: (page: number) => void;
|
|
81
|
+
}
|
|
82
|
+
interface PaginationInstance extends Instance {
|
|
83
|
+
setPage(page: number, notify?: boolean): void;
|
|
84
|
+
setTotalPages(total: number): void;
|
|
85
|
+
readonly page: number;
|
|
86
|
+
readonly totalPages: number;
|
|
87
|
+
}
|
|
88
|
+
/** Renders a bounded window of pages, even when totalPages is very large. */
|
|
89
|
+
declare function createPagination(root: HTMLElement | null, options?: PaginationOptions): PaginationInstance;
|
|
90
|
+
|
|
91
|
+
interface HoverCardOptions {
|
|
92
|
+
openDelay?: number;
|
|
93
|
+
closeDelay?: number;
|
|
94
|
+
/** Preferred side; it flips when the viewport has no room there. */
|
|
95
|
+
placement?: 'top' | 'bottom';
|
|
96
|
+
onOpenChange?: (open: boolean) => void;
|
|
97
|
+
}
|
|
98
|
+
interface HoverCardInstance extends Instance {
|
|
99
|
+
open(): void;
|
|
100
|
+
close(): void;
|
|
101
|
+
/** Place the open panel again (after its content changed size). */
|
|
102
|
+
reposition(): void;
|
|
103
|
+
readonly isOpen: boolean;
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Nonmodal preview: pointer, keyboard focus and tap all reveal the same panel.
|
|
107
|
+
* The panel stays inside the viewport: it flips to the other side when its own
|
|
108
|
+
* has no room and shifts sideways (--mk-hover-shift) away from the edges, again
|
|
109
|
+
* on scroll and resize. Opened from the keyboard it appears without the entrance.
|
|
110
|
+
*/
|
|
111
|
+
declare function createHoverCard(root: HTMLElement | null, options?: HoverCardOptions): HoverCardInstance;
|
|
112
|
+
|
|
113
|
+
interface InputOtpOptions {
|
|
114
|
+
length?: number;
|
|
115
|
+
value?: string;
|
|
116
|
+
mask?: boolean;
|
|
117
|
+
onChange?: (value: string) => void;
|
|
118
|
+
onComplete?: (value: string) => void;
|
|
119
|
+
}
|
|
120
|
+
interface InputOtpInstance extends Instance {
|
|
121
|
+
setValue(value: string, notify?: boolean): void;
|
|
122
|
+
focus(): void;
|
|
123
|
+
readonly value: string;
|
|
124
|
+
}
|
|
125
|
+
/** One real input preserves native editing, mobile autofill and password managers. */
|
|
126
|
+
declare function createInputOtp(root: HTMLElement | null, options?: InputOtpOptions): InputOtpInstance;
|
|
127
|
+
|
|
128
|
+
type StudioDockView = 'menu' | 'contact' | 'reel';
|
|
129
|
+
interface StudioDockState {
|
|
130
|
+
open: boolean;
|
|
131
|
+
view: StudioDockView;
|
|
132
|
+
page: number;
|
|
133
|
+
}
|
|
134
|
+
interface StudioDockOptions {
|
|
135
|
+
/** Seconds. Reference sheet: 1.3 s, outBack(.52). */
|
|
136
|
+
duration?: number;
|
|
137
|
+
ease?: string;
|
|
138
|
+
/** Move focus into a newly opened view. Defaults to true. */
|
|
139
|
+
focusOnOpen?: boolean;
|
|
140
|
+
/** Contain Tab within the open panel and its toggle. Defaults to true. */
|
|
141
|
+
trapFocus?: boolean;
|
|
142
|
+
onChange?: (state: StudioDockState) => void;
|
|
143
|
+
}
|
|
144
|
+
interface StudioDockInstance extends Instance {
|
|
145
|
+
open(view?: StudioDockView): void;
|
|
146
|
+
close(): void;
|
|
147
|
+
toggle(): void;
|
|
148
|
+
selectPage(index: number): void;
|
|
149
|
+
readonly state: StudioDockState;
|
|
150
|
+
}
|
|
151
|
+
/** A contained studio sheet. Markup remains useful without JavaScript; fixed positioning is CSS opt-in. */
|
|
152
|
+
declare function createStudioDock(root: HTMLElement | null, options?: StudioDockOptions): StudioDockInstance;
|
|
153
|
+
|
|
154
|
+
type DateInput = Date | string | number;
|
|
155
|
+
/** Local midnight of a date; "2026-10-23" is read as a local day, not UTC. */
|
|
156
|
+
declare function toDate(input: DateInput | null | undefined, fallback?: Date): Date;
|
|
157
|
+
/** YYYY-MM-DD of the local day. */
|
|
158
|
+
declare const dayKey: (date: Date) => string;
|
|
159
|
+
|
|
160
|
+
type CalendarView = 'month' | 'week';
|
|
161
|
+
type CalendarEventStatus = 'pending' | 'done' | 'cancelled';
|
|
162
|
+
interface CalendarEvent {
|
|
163
|
+
id: string | number;
|
|
164
|
+
title: string;
|
|
165
|
+
start: DateInput;
|
|
166
|
+
end?: DateInput;
|
|
167
|
+
allDay?: boolean;
|
|
168
|
+
status?: CalendarEventStatus;
|
|
169
|
+
/** Any CSS colour for the chip. */
|
|
170
|
+
color?: string;
|
|
171
|
+
}
|
|
172
|
+
interface CalendarRange {
|
|
173
|
+
start: Date;
|
|
174
|
+
end: Date;
|
|
175
|
+
view: CalendarView;
|
|
176
|
+
}
|
|
177
|
+
interface CalendarLabels {
|
|
178
|
+
more?: (count: number) => string;
|
|
179
|
+
events?: (count: number) => string;
|
|
180
|
+
status?: Partial<Record<CalendarEventStatus, string>>;
|
|
181
|
+
}
|
|
182
|
+
interface CalendarOptions {
|
|
183
|
+
/** Date the calendar opens on. */
|
|
184
|
+
date?: DateInput;
|
|
185
|
+
view?: CalendarView;
|
|
186
|
+
/** 0 = Sunday … 6 = Saturday. */
|
|
187
|
+
firstDay?: number;
|
|
188
|
+
locale?: string;
|
|
189
|
+
events?: CalendarEvent[];
|
|
190
|
+
/** Chips per day in the month view before "+N". */
|
|
191
|
+
maxEvents?: number;
|
|
192
|
+
selected?: DateInput | null;
|
|
193
|
+
/** Override "today" (tests, demos in another zone). */
|
|
194
|
+
today?: DateInput;
|
|
195
|
+
labels?: CalendarLabels;
|
|
196
|
+
onSelect?: (date: Date) => void;
|
|
197
|
+
onEventClick?: (event: CalendarEvent) => void;
|
|
198
|
+
onNavigate?: (range: CalendarRange) => void;
|
|
199
|
+
}
|
|
200
|
+
interface CalendarInstance extends Instance {
|
|
201
|
+
next(): void;
|
|
202
|
+
prev(): void;
|
|
203
|
+
goToday(): void;
|
|
204
|
+
setDate(date: DateInput): void;
|
|
205
|
+
setView(view: CalendarView): void;
|
|
206
|
+
setEvents(events: CalendarEvent[]): void;
|
|
207
|
+
select(date: DateInput | null, notify?: boolean): void;
|
|
208
|
+
readonly date: Date;
|
|
209
|
+
readonly view: CalendarView;
|
|
210
|
+
readonly selected: Date | null;
|
|
211
|
+
readonly range: CalendarRange;
|
|
212
|
+
}
|
|
213
|
+
declare function createCalendar(root: HTMLElement | null, options?: CalendarOptions): CalendarInstance;
|
|
214
|
+
|
|
215
|
+
type SlotSource = string[] | Record<string, string[]> | ((date: Date) => string[] | Promise<string[]>);
|
|
216
|
+
interface SlotValue {
|
|
217
|
+
date: Date;
|
|
218
|
+
time: string;
|
|
219
|
+
key: string;
|
|
220
|
+
value: string;
|
|
221
|
+
}
|
|
222
|
+
interface SlotPickerLabels {
|
|
223
|
+
placeholder?: string;
|
|
224
|
+
empty?: string;
|
|
225
|
+
loading?: string;
|
|
226
|
+
heading?: (date: Date) => string;
|
|
227
|
+
}
|
|
228
|
+
interface SlotPickerOptions {
|
|
229
|
+
/** Month shown first (and the selected day when `value` is not given). */
|
|
230
|
+
date?: DateInput;
|
|
231
|
+
/** Initial value: "2026-10-23T10:30" or { date, time }. */
|
|
232
|
+
value?: string | {
|
|
233
|
+
date: DateInput;
|
|
234
|
+
time: string;
|
|
235
|
+
} | null;
|
|
236
|
+
slots?: SlotSource;
|
|
237
|
+
min?: DateInput;
|
|
238
|
+
max?: DateInput;
|
|
239
|
+
/** Weekdays never available (0 = Sunday). */
|
|
240
|
+
closedDays?: number[];
|
|
241
|
+
isDisabled?: (date: Date) => boolean;
|
|
242
|
+
firstDay?: number;
|
|
243
|
+
locale?: string;
|
|
244
|
+
labels?: SlotPickerLabels;
|
|
245
|
+
onChange?: (value: SlotValue) => void;
|
|
246
|
+
onDateChange?: (date: Date) => void;
|
|
247
|
+
}
|
|
248
|
+
interface SlotPickerInstance extends Instance {
|
|
249
|
+
selectDate(date: DateInput): void;
|
|
250
|
+
selectTime(time: string | null): void;
|
|
251
|
+
setSlots(slots: SlotSource): void;
|
|
252
|
+
readonly date: Date | null;
|
|
253
|
+
readonly time: string | null;
|
|
254
|
+
readonly value: string | null;
|
|
255
|
+
}
|
|
256
|
+
declare function createSlotPicker(root: HTMLElement | null, options?: SlotPickerOptions): SlotPickerInstance;
|
|
257
|
+
|
|
258
|
+
interface TrailerOptions {
|
|
259
|
+
triggers?: boolean | string;
|
|
260
|
+
autoplay?: boolean;
|
|
261
|
+
closeOnBackdrop?: boolean;
|
|
262
|
+
onOpen?: () => void;
|
|
263
|
+
onClose?: () => void;
|
|
264
|
+
}
|
|
265
|
+
interface TrailerInstance extends Instance {
|
|
266
|
+
open(origin?: HTMLElement | null): void;
|
|
267
|
+
close(): void;
|
|
268
|
+
toggle(origin?: HTMLElement | null): void;
|
|
269
|
+
play(): Promise<boolean>;
|
|
270
|
+
pause(): void;
|
|
271
|
+
seek(seconds: number): void;
|
|
272
|
+
setVolume(volume: number): void;
|
|
273
|
+
readonly isOpen: boolean;
|
|
274
|
+
}
|
|
275
|
+
/** Native modal + consumer-owned video, with optional accessible custom transport controls. */
|
|
276
|
+
declare function createTrailer(root: HTMLElement | null, options?: TrailerOptions): TrailerInstance;
|
|
277
|
+
|
|
278
|
+
type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown';
|
|
279
|
+
/** Text shown on the card for each brand (no logos). */
|
|
280
|
+
declare const BRAND_LABELS: Record<CardBrand, string>;
|
|
281
|
+
declare function detectBrand(number: string): CardBrand;
|
|
282
|
+
declare const cardLength: (brand: CardBrand) => number;
|
|
283
|
+
declare const cvcLength: (brand: CardBrand) => 4 | 3;
|
|
284
|
+
/** Digits with a space between groups. */
|
|
285
|
+
declare function formatNumber(number: string, brand?: CardBrand): string;
|
|
286
|
+
declare function luhn(number: string): boolean;
|
|
287
|
+
interface Expiry {
|
|
288
|
+
month: number;
|
|
289
|
+
year: number;
|
|
290
|
+
/** MM/YY as typed so far. */
|
|
291
|
+
text: string;
|
|
292
|
+
valid: boolean;
|
|
293
|
+
}
|
|
294
|
+
/** MM/YY from what was typed; valid when complete and not before the current month. */
|
|
295
|
+
declare function parseExpiry(text: string, now?: Date): Expiry;
|
|
296
|
+
|
|
297
|
+
type CreditCardField = 'number' | 'name' | 'expiry' | 'cvc';
|
|
298
|
+
interface CreditCardLabels {
|
|
299
|
+
number?: string;
|
|
300
|
+
name?: string;
|
|
301
|
+
expiry?: string;
|
|
302
|
+
cvc?: string;
|
|
303
|
+
namePlaceholder?: string;
|
|
304
|
+
invalidNumber?: string;
|
|
305
|
+
invalidExpiry?: string;
|
|
306
|
+
invalidCvc?: string;
|
|
307
|
+
}
|
|
308
|
+
interface CreditCardOptions {
|
|
309
|
+
labels?: CreditCardLabels;
|
|
310
|
+
/** Form names of the fields (default cc-number, cc-name, cc-exp, cc-csc). */
|
|
311
|
+
names?: Partial<Record<CreditCardField, string>>;
|
|
312
|
+
/** Tilt the card with a fine pointer (default true). */
|
|
313
|
+
tilt?: boolean;
|
|
314
|
+
onChange?: (state: {
|
|
315
|
+
brand: CardBrand;
|
|
316
|
+
complete: boolean;
|
|
317
|
+
valid: boolean;
|
|
318
|
+
}) => void;
|
|
319
|
+
onComplete?: () => void;
|
|
320
|
+
}
|
|
321
|
+
interface CreditCardValues {
|
|
322
|
+
number: string;
|
|
323
|
+
name: string;
|
|
324
|
+
expiry: string;
|
|
325
|
+
cvc: string;
|
|
326
|
+
}
|
|
327
|
+
interface CreditCardInstance extends Instance {
|
|
328
|
+
readonly values: CreditCardValues;
|
|
329
|
+
readonly brand: CardBrand;
|
|
330
|
+
readonly valid: boolean;
|
|
331
|
+
focus(field: CreditCardField): void;
|
|
332
|
+
/** Turn the card (true: the back). */
|
|
333
|
+
flip(back?: boolean): void;
|
|
334
|
+
}
|
|
335
|
+
declare function createCreditCard(root: HTMLElement | null, options?: CreditCardOptions): CreditCardInstance;
|
|
336
|
+
|
|
337
|
+
interface CommandItem {
|
|
338
|
+
id: string;
|
|
339
|
+
label: string;
|
|
340
|
+
/** Section title (e.g. 'Páginas'). */
|
|
341
|
+
group?: string;
|
|
342
|
+
/** Extra words that also match. */
|
|
343
|
+
keywords?: string[];
|
|
344
|
+
/** Small text on the right (a shortcut, a path). */
|
|
345
|
+
hint?: string;
|
|
346
|
+
/** Navigate here when chosen (unless mk:select is cancelled). */
|
|
347
|
+
href?: string;
|
|
348
|
+
/** A short glyph shown before the label (default →). */
|
|
349
|
+
icon?: string;
|
|
350
|
+
}
|
|
351
|
+
interface CommandSearchOptions {
|
|
352
|
+
items?: CommandItem[];
|
|
353
|
+
placeholder?: string;
|
|
354
|
+
emptyLabel?: string;
|
|
355
|
+
/** Accessible name of the palette. */
|
|
356
|
+
label?: string;
|
|
357
|
+
/** ⌘K / Ctrl+K opens it (default true). */
|
|
358
|
+
shortcut?: boolean;
|
|
359
|
+
/** Most results shown (default 50). */
|
|
360
|
+
limit?: number;
|
|
361
|
+
onSelect?: (item: CommandItem) => void;
|
|
362
|
+
onOpenChange?: (open: boolean) => void;
|
|
363
|
+
}
|
|
364
|
+
interface CommandSearchInstance extends Instance {
|
|
365
|
+
/** `origin`: the control it grows from; omitted, the clicked or on-screen trigger; null, none (scale-in). */
|
|
366
|
+
open(origin?: HTMLElement | null): void;
|
|
367
|
+
close(): void;
|
|
368
|
+
setItems(items: CommandItem[]): void;
|
|
369
|
+
readonly isOpen: boolean;
|
|
370
|
+
}
|
|
371
|
+
declare function createCommandSearch(root: HTMLElement | null, options?: CommandSearchOptions): CommandSearchInstance;
|
|
372
|
+
|
|
373
|
+
interface HoldConfirmOptions {
|
|
374
|
+
/** Hold time in ms (default 1200). */
|
|
375
|
+
duration?: number;
|
|
376
|
+
/** Back to the start after confirming, in ms (default 1800; 0 keeps it confirmed). */
|
|
377
|
+
resetAfter?: number;
|
|
378
|
+
holdingLabel?: string;
|
|
379
|
+
doneLabel?: string;
|
|
380
|
+
hint?: string;
|
|
381
|
+
disabled?: boolean;
|
|
382
|
+
onConfirm?: () => void;
|
|
383
|
+
}
|
|
384
|
+
interface HoldConfirmInstance extends Instance {
|
|
385
|
+
reset(): void;
|
|
386
|
+
readonly confirmed: boolean;
|
|
387
|
+
}
|
|
388
|
+
declare function createHoldConfirm(root: HTMLElement | null, options?: HoldConfirmOptions): HoldConfirmInstance;
|
|
389
|
+
|
|
390
|
+
interface ImagePreviewOptions {
|
|
391
|
+
labels?: {
|
|
392
|
+
close?: string;
|
|
393
|
+
prev?: string;
|
|
394
|
+
next?: string;
|
|
395
|
+
dialog?: string;
|
|
396
|
+
};
|
|
397
|
+
/** Loop from the last picture to the first (default true). */
|
|
398
|
+
loop?: boolean;
|
|
399
|
+
onChange?: (index: number) => void;
|
|
400
|
+
onOpenChange?: (open: boolean) => void;
|
|
401
|
+
}
|
|
402
|
+
interface ImagePreviewInstance extends Instance {
|
|
403
|
+
open(index?: number): void;
|
|
404
|
+
close(): void;
|
|
405
|
+
next(): void;
|
|
406
|
+
prev(): void;
|
|
407
|
+
readonly isOpen: boolean;
|
|
408
|
+
readonly index: number;
|
|
409
|
+
}
|
|
410
|
+
declare function createImagePreview(root: HTMLElement | null, options?: ImagePreviewOptions): ImagePreviewInstance;
|
|
411
|
+
|
|
412
|
+
interface NotificationBellOptions {
|
|
413
|
+
count?: number;
|
|
414
|
+
/** Accessible name before the count (default 'Notificaciones'). */
|
|
415
|
+
label?: string;
|
|
416
|
+
/** How long a message stays, in ms (default 3200). */
|
|
417
|
+
messageDuration?: number;
|
|
418
|
+
/** Above this the badge reads n+ (default 99). */
|
|
419
|
+
max?: number;
|
|
420
|
+
onOpen?: () => void;
|
|
421
|
+
}
|
|
422
|
+
interface NotificationBellInstance extends Instance {
|
|
423
|
+
/** Ring with a new notification (and show `message`, as text). */
|
|
424
|
+
notify(message?: string): void;
|
|
425
|
+
setCount(count: number): void;
|
|
426
|
+
clear(): void;
|
|
427
|
+
readonly count: number;
|
|
428
|
+
}
|
|
429
|
+
declare function createNotificationBell(root: HTMLElement | null, options?: NotificationBellOptions): NotificationBellInstance;
|
|
430
|
+
|
|
431
|
+
interface PasswordChecks {
|
|
432
|
+
length: boolean;
|
|
433
|
+
lower: boolean;
|
|
434
|
+
upper: boolean;
|
|
435
|
+
number: boolean;
|
|
436
|
+
symbol: boolean;
|
|
437
|
+
}
|
|
438
|
+
interface PasswordScore {
|
|
439
|
+
score: 0 | 1 | 2 | 3 | 4;
|
|
440
|
+
label: string;
|
|
441
|
+
checks: PasswordChecks;
|
|
442
|
+
}
|
|
443
|
+
declare const STRENGTH_LABELS: readonly ["Muy débil", "Débil", "Aceptable", "Fuerte", "Muy fuerte"];
|
|
444
|
+
declare function scorePassword(value: string, minLength?: number): PasswordScore;
|
|
445
|
+
|
|
446
|
+
interface PasswordStrengthOptions {
|
|
447
|
+
minLength?: number;
|
|
448
|
+
/** Replace the built-in scoring. */
|
|
449
|
+
score?: (value: string) => PasswordScore;
|
|
450
|
+
/** Below this score the field reports itself invalid (setCustomValidity). */
|
|
451
|
+
requireScore?: number;
|
|
452
|
+
labels?: {
|
|
453
|
+
show?: string;
|
|
454
|
+
hide?: string;
|
|
455
|
+
invalid?: string;
|
|
456
|
+
checks?: Partial<Record<keyof PasswordChecks, string>>;
|
|
457
|
+
};
|
|
458
|
+
onChange?: (result: PasswordScore) => void;
|
|
459
|
+
}
|
|
460
|
+
interface PasswordStrengthInstance extends Instance {
|
|
461
|
+
readonly score: number;
|
|
462
|
+
readonly value: string;
|
|
463
|
+
}
|
|
464
|
+
declare function createPasswordStrength(root: HTMLElement | null, options?: PasswordStrengthOptions): PasswordStrengthInstance;
|
|
465
|
+
|
|
466
|
+
interface ScratchCardOptions {
|
|
467
|
+
/** Share of the cover to scratch before it reveals itself (default .5). */
|
|
468
|
+
threshold?: number;
|
|
469
|
+
/** Brush radius in px (default 22). */
|
|
470
|
+
brush?: number;
|
|
471
|
+
coverLabel?: string;
|
|
472
|
+
revealLabel?: string;
|
|
473
|
+
revealedLabel?: string;
|
|
474
|
+
/** Confetti on reveal (default true). */
|
|
475
|
+
celebrate?: boolean;
|
|
476
|
+
onProgress?: (progress: number) => void;
|
|
477
|
+
onReveal?: () => void;
|
|
478
|
+
}
|
|
479
|
+
interface ScratchCardInstance extends Instance {
|
|
480
|
+
reveal(): void;
|
|
481
|
+
reset(): void;
|
|
482
|
+
readonly revealed: boolean;
|
|
483
|
+
readonly progress: number;
|
|
484
|
+
}
|
|
485
|
+
declare function createScratchCard(root: HTMLElement | null, options?: ScratchCardOptions): ScratchCardInstance;
|
|
486
|
+
|
|
487
|
+
interface StarRatingOptions {
|
|
488
|
+
max?: number;
|
|
489
|
+
value?: number;
|
|
490
|
+
/** Form name (default 'rating'). */
|
|
491
|
+
name?: string;
|
|
492
|
+
/** Accessible name of the group (default 'Valoración'). */
|
|
493
|
+
label?: string;
|
|
494
|
+
/** One text per star, shown and read for the chosen value. */
|
|
495
|
+
labels?: string[];
|
|
496
|
+
readonly?: boolean;
|
|
497
|
+
allowClear?: boolean;
|
|
498
|
+
disabled?: boolean;
|
|
499
|
+
onChange?: (value: number) => void;
|
|
500
|
+
}
|
|
501
|
+
interface StarRatingInstance extends Instance {
|
|
502
|
+
setValue(value: number, notify?: boolean): void;
|
|
503
|
+
readonly value: number;
|
|
504
|
+
}
|
|
505
|
+
declare function createStarRating(root: HTMLElement | null, options?: StarRatingOptions): StarRatingInstance;
|
|
506
|
+
|
|
507
|
+
type AttachmentStatus = 'idle' | 'uploading' | 'complete' | 'error';
|
|
508
|
+
type AttachmentRejectCode = 'type' | 'size' | 'count';
|
|
509
|
+
interface AttachmentFile {
|
|
510
|
+
id: string;
|
|
511
|
+
name: string;
|
|
512
|
+
size: number;
|
|
513
|
+
type: string;
|
|
514
|
+
/** The picked File (absent for files described by metadata only). */
|
|
515
|
+
file?: File;
|
|
516
|
+
/** 0–100 once the app reports it. */
|
|
517
|
+
progress?: number;
|
|
518
|
+
status: AttachmentStatus;
|
|
519
|
+
/** Object URL of an image preview, or a URL supplied with initialFiles. */
|
|
520
|
+
preview?: string;
|
|
521
|
+
}
|
|
522
|
+
interface AttachmentRejection {
|
|
523
|
+
file: File;
|
|
524
|
+
code: AttachmentRejectCode;
|
|
525
|
+
message: string;
|
|
526
|
+
}
|
|
527
|
+
interface AttachmentLabels {
|
|
528
|
+
choose?: string;
|
|
529
|
+
drop?: string;
|
|
530
|
+
remove?: string;
|
|
531
|
+
list?: string;
|
|
532
|
+
uploading?: string;
|
|
533
|
+
complete?: string;
|
|
534
|
+
error?: string;
|
|
535
|
+
added?: (count: number) => string;
|
|
536
|
+
removed?: (name: string) => string;
|
|
537
|
+
rejected?: (rejection: {
|
|
538
|
+
name: string;
|
|
539
|
+
code: AttachmentRejectCode;
|
|
540
|
+
limit: string;
|
|
541
|
+
}) => string;
|
|
542
|
+
}
|
|
543
|
+
interface AttachmentOptions {
|
|
544
|
+
/** Like input[accept]: extensions (.pdf), MIME types (image/png) and wildcards (image/*). */
|
|
545
|
+
accept?: string;
|
|
546
|
+
multiple?: boolean;
|
|
547
|
+
/** Most files kept (multiple only). */
|
|
548
|
+
maxFiles?: number;
|
|
549
|
+
/** Largest file, in bytes. */
|
|
550
|
+
maxSize?: number;
|
|
551
|
+
disabled?: boolean;
|
|
552
|
+
/** Form name of the file input (it carries the kept files where the browser allows). */
|
|
553
|
+
name?: string;
|
|
554
|
+
/** Files shown from the start (e.g. already uploaded). */
|
|
555
|
+
initialFiles?: Array<Partial<AttachmentFile> & {
|
|
556
|
+
name: string;
|
|
557
|
+
}>;
|
|
558
|
+
/** Visible hint under the drop text (default: the limits). */
|
|
559
|
+
hint?: string;
|
|
560
|
+
labels?: AttachmentLabels;
|
|
561
|
+
onFiles?: (added: AttachmentFile[], files: AttachmentFile[]) => void;
|
|
562
|
+
onRemove?: (removed: AttachmentFile, files: AttachmentFile[]) => void;
|
|
563
|
+
onReject?: (rejections: AttachmentRejection[]) => void;
|
|
564
|
+
}
|
|
565
|
+
interface AttachmentInstance extends Instance {
|
|
566
|
+
/** Validate and add files; returns the accepted ones. */
|
|
567
|
+
addFiles(files: Iterable<File> | ArrayLike<File>): AttachmentFile[];
|
|
568
|
+
remove(id: string): void;
|
|
569
|
+
/** Report upload progress (0–100) and, optionally, the status. */
|
|
570
|
+
setProgress(id: string, value: number, status?: AttachmentStatus): void;
|
|
571
|
+
clear(): void;
|
|
572
|
+
readonly files: AttachmentFile[];
|
|
573
|
+
}
|
|
574
|
+
/** 1 KB = 1024 B; one decimal under 10. */
|
|
575
|
+
declare function formatBytes(bytes: number): string;
|
|
576
|
+
/** Readable accept list: image/* → imágenes, .pdf → PDF, application/zip → ZIP. */
|
|
577
|
+
declare function describeAccept(accept: string | undefined): string;
|
|
578
|
+
/** Does a file match an accept list (extensions, MIME types, type/*)? */
|
|
579
|
+
declare function acceptsFile(file: {
|
|
580
|
+
name: string;
|
|
581
|
+
type: string;
|
|
582
|
+
}, accept: string | undefined): boolean;
|
|
583
|
+
declare function createAttachment(root: HTMLElement | null, options?: AttachmentOptions): AttachmentInstance;
|
|
584
|
+
|
|
585
|
+
type SkeletonShape = 'text' | 'avatar' | 'image' | 'card';
|
|
586
|
+
type SkeletonAnimation = 'pulse' | 'shimmer' | 'none';
|
|
587
|
+
interface SkeletonOptions {
|
|
588
|
+
loading?: boolean;
|
|
589
|
+
animation?: SkeletonAnimation;
|
|
590
|
+
/** Placeholder made when the markup has none. */
|
|
591
|
+
shape?: SkeletonShape;
|
|
592
|
+
/** Text lines of a generated text placeholder (default 3). */
|
|
593
|
+
lines?: number;
|
|
594
|
+
/** Announced while loading (default 'Cargando'). */
|
|
595
|
+
label?: string;
|
|
596
|
+
}
|
|
597
|
+
interface SkeletonInstance extends Instance {
|
|
598
|
+
setLoading(loading: boolean): void;
|
|
599
|
+
readonly loading: boolean;
|
|
600
|
+
}
|
|
601
|
+
/** Bones of each shape: block (image), circle (avatar), line (text). */
|
|
602
|
+
declare function skeletonBones(shape: SkeletonShape, lines?: number): Array<'block' | 'circle' | 'line' | 'short'>;
|
|
603
|
+
declare function createSkeleton(root: HTMLElement | null, options?: SkeletonOptions): SkeletonInstance;
|
|
604
|
+
|
|
605
|
+
type QuestionnaireAnswers = Record<string, string | string[]>;
|
|
606
|
+
interface QuestionnaireLabels {
|
|
607
|
+
required?: string;
|
|
608
|
+
choice?: string;
|
|
609
|
+
}
|
|
610
|
+
interface QuestionnaireOptions {
|
|
611
|
+
index?: number;
|
|
612
|
+
labels?: QuestionnaireLabels;
|
|
613
|
+
onChange?: (index: number, answers: QuestionnaireAnswers) => void;
|
|
614
|
+
onComplete?: (answers: QuestionnaireAnswers) => void;
|
|
615
|
+
}
|
|
616
|
+
interface QuestionnaireInstance extends Instance {
|
|
617
|
+
/** Validate the current step and go on (or complete on the last one). */
|
|
618
|
+
next(): Promise<boolean>;
|
|
619
|
+
prev(): Promise<void>;
|
|
620
|
+
/** Native form reset: clears answers, errors and completion. */
|
|
621
|
+
reset(): void;
|
|
622
|
+
readonly answers: QuestionnaireAnswers;
|
|
623
|
+
readonly index: number;
|
|
624
|
+
readonly count: number;
|
|
625
|
+
readonly complete: boolean;
|
|
626
|
+
}
|
|
627
|
+
/** Answers of a form keyed by field name: checkboxes and multi-selects give arrays. */
|
|
628
|
+
declare function readAnswers(form: HTMLElement): QuestionnaireAnswers;
|
|
629
|
+
declare function createQuestionnaire(root: HTMLElement | null, options?: QuestionnaireOptions): QuestionnaireInstance;
|
|
630
|
+
|
|
631
|
+
interface CodeBlockOptions {
|
|
632
|
+
/** The code; omitted, the text already in <code> is used (and read at copy time). */
|
|
633
|
+
code?: string;
|
|
634
|
+
language?: string;
|
|
635
|
+
title?: string;
|
|
636
|
+
lineNumbers?: boolean;
|
|
637
|
+
/** Colour the syntax (default: when the language is supported). */
|
|
638
|
+
highlight?: boolean;
|
|
639
|
+
/** 1-based lines to mark. */
|
|
640
|
+
highlightLines?: number[];
|
|
641
|
+
copyLabel?: string;
|
|
642
|
+
copiedLabel?: string;
|
|
643
|
+
errorLabel?: string;
|
|
644
|
+
onCopy?: (ok: boolean) => void;
|
|
645
|
+
}
|
|
646
|
+
interface CodeBlockInstance extends Instance {
|
|
647
|
+
setCode(code: string): void;
|
|
648
|
+
/** Copy the code; resolves true when the clipboard took it. */
|
|
649
|
+
copy(): Promise<boolean>;
|
|
650
|
+
readonly code: string;
|
|
651
|
+
}
|
|
652
|
+
/** Line count of a code string (a final newline does not open a line). */
|
|
653
|
+
declare const codeLines: (code: string) => number;
|
|
654
|
+
declare function createCodeBlock(root: HTMLElement | null, options?: CodeBlockOptions): CodeBlockInstance;
|
|
655
|
+
|
|
656
|
+
interface ContextMenuOptions extends Omit<MenuOptions, 'triggers' | 'anchor'> {
|
|
657
|
+
/** Replace the browser menu on inputs and editable text too. */
|
|
658
|
+
overrideEditable?: boolean;
|
|
659
|
+
/** Touch long press that opens it, in ms (0: off). Default 550. */
|
|
660
|
+
longPress?: number;
|
|
661
|
+
onOpenChange?: (open: boolean) => void;
|
|
662
|
+
}
|
|
663
|
+
interface ContextMenuInstance extends Instance {
|
|
664
|
+
/** Open at viewport coordinates; focus returns to `origin` (default: the focused element). */
|
|
665
|
+
openAt(x: number, y: number, origin?: HTMLElement | null): void;
|
|
666
|
+
/** Open beside `origin` (default: the focused element in the trigger, else the trigger). */
|
|
667
|
+
open(origin?: HTMLElement | null): void;
|
|
668
|
+
close(): void;
|
|
669
|
+
readonly isOpen: boolean;
|
|
670
|
+
readonly menu: MenuInstance | null;
|
|
671
|
+
}
|
|
672
|
+
declare function createContextMenu(root: HTMLElement | null, options?: ContextMenuOptions): ContextMenuInstance;
|
|
673
|
+
|
|
674
|
+
/** card: image on top (default); row: thumbnail beside the text; hover: a link that previews the card. */
|
|
675
|
+
type LinkPreviewVariant = 'card' | 'row' | 'hover';
|
|
676
|
+
interface LinkPreviewOptions extends Pick<HoverCardOptions, 'openDelay' | 'closeDelay' | 'placement' | 'onOpenChange'> {
|
|
677
|
+
url?: string;
|
|
678
|
+
title?: string;
|
|
679
|
+
description?: string;
|
|
680
|
+
/** Thumbnail URL (http(s), relative, data:image or blob). */
|
|
681
|
+
image?: string;
|
|
682
|
+
imageAlt?: string;
|
|
683
|
+
siteName?: string;
|
|
684
|
+
variant?: LinkPreviewVariant;
|
|
685
|
+
/** Text of the hover variant's link (default: the title). */
|
|
686
|
+
label?: string;
|
|
687
|
+
/** '_blank' opens a new tab (with rel="noopener noreferrer"). */
|
|
688
|
+
target?: string;
|
|
689
|
+
}
|
|
690
|
+
interface LinkPreviewInstance extends Instance {
|
|
691
|
+
/** The link actually used (null when the URL was refused). */
|
|
692
|
+
readonly href: string | null;
|
|
693
|
+
readonly hoverCard: HoverCardInstance | null;
|
|
694
|
+
}
|
|
695
|
+
/** http(s) or relative links; anything else (javascript:, data:, vbscript:…) is null. */
|
|
696
|
+
declare function safeHref(url: string | null | undefined): string | null;
|
|
697
|
+
/** Image sources: http(s), relative, blob: and data:image/… */
|
|
698
|
+
declare function safeImage(url: string | null | undefined): string | null;
|
|
699
|
+
/** Host without www. of an absolute link; relative links have none (same on server and client). */
|
|
700
|
+
declare function linkDomain(href: string | null): string;
|
|
701
|
+
declare function createLinkPreview(root: HTMLElement | null, options?: LinkPreviewOptions): LinkPreviewInstance;
|
|
702
|
+
|
|
703
|
+
type ProgressVariant = 'linear' | 'ring';
|
|
704
|
+
interface ProgressOptions {
|
|
705
|
+
/** Current value; null is indeterminate. Default: min. */
|
|
706
|
+
value?: number | null;
|
|
707
|
+
min?: number;
|
|
708
|
+
max?: number;
|
|
709
|
+
label?: string;
|
|
710
|
+
variant?: ProgressVariant;
|
|
711
|
+
/** Write the percentage beside the bar (inside the ring). */
|
|
712
|
+
showValue?: boolean;
|
|
713
|
+
/** Text for the value (also aria-valuetext). Default: rounded percentage. */
|
|
714
|
+
formatValue?: (value: number, ratio: number) => string;
|
|
715
|
+
/** Glide duration in seconds (default .7). */
|
|
716
|
+
duration?: number;
|
|
717
|
+
}
|
|
718
|
+
interface ProgressInstance extends Instance {
|
|
719
|
+
setValue(value: number | null): void;
|
|
720
|
+
readonly value: number | null;
|
|
721
|
+
}
|
|
722
|
+
declare function createProgress(root: HTMLElement | null, options?: ProgressOptions): ProgressInstance;
|
|
723
|
+
|
|
724
|
+
type RangeValue = number | [number, number];
|
|
725
|
+
interface RangeSliderOptions {
|
|
726
|
+
min?: number;
|
|
727
|
+
max?: number;
|
|
728
|
+
step?: number;
|
|
729
|
+
value?: RangeValue;
|
|
730
|
+
disabled?: boolean;
|
|
731
|
+
/** Form name; an interval submits name[0] and name[1]. */
|
|
732
|
+
name?: string;
|
|
733
|
+
/** Accessible name of the input(s). */
|
|
734
|
+
label?: string;
|
|
735
|
+
/** Text for the output and aria-valuetext. */
|
|
736
|
+
formatValue?: (value: number) => string;
|
|
737
|
+
onInput?: (value: RangeValue) => void;
|
|
738
|
+
onChange?: (value: RangeValue) => void;
|
|
739
|
+
}
|
|
740
|
+
interface RangeSliderInstance extends Instance {
|
|
741
|
+
setValue(value: RangeValue, notify?: boolean): void;
|
|
742
|
+
readonly value: RangeValue;
|
|
743
|
+
}
|
|
744
|
+
declare function createRangeSlider(root: HTMLElement | null, options?: RangeSliderOptions): RangeSliderInstance;
|
|
745
|
+
|
|
746
|
+
type ChartType = 'line' | 'area' | 'bar';
|
|
747
|
+
interface ChartPoint {
|
|
748
|
+
label: string;
|
|
749
|
+
value: number | null;
|
|
750
|
+
}
|
|
751
|
+
interface ChartSeries {
|
|
752
|
+
name: string;
|
|
753
|
+
/** One value per label; null is a gap (no data). */
|
|
754
|
+
values: Array<number | null>;
|
|
755
|
+
/** Any CSS colour; default: monochrome for one series, else the --mk-chart-N slot. */
|
|
756
|
+
color?: string;
|
|
757
|
+
/** Lines: an SVG dash pattern, e.g. '5 5' (a pace or goal) or '1 6' (a projection). */
|
|
758
|
+
dash?: string;
|
|
759
|
+
}
|
|
760
|
+
interface ChartOptions {
|
|
761
|
+
type?: ChartType;
|
|
762
|
+
labels?: string[];
|
|
763
|
+
series?: ChartSeries[];
|
|
764
|
+
/** One series as label/value pairs (instead of labels + series). */
|
|
765
|
+
points?: ChartPoint[];
|
|
766
|
+
/** Bars only: stack the series. */
|
|
767
|
+
stacked?: boolean;
|
|
768
|
+
formatValue?: (value: number) => string;
|
|
769
|
+
/** Accessible name (and table caption). */
|
|
770
|
+
label?: string;
|
|
771
|
+
/** Plot height in px (default 240). */
|
|
772
|
+
height?: number;
|
|
773
|
+
emptyLabel?: string;
|
|
774
|
+
/** Legend (default: two or more series). */
|
|
775
|
+
legend?: boolean;
|
|
776
|
+
/** Value labels and hairlines on the y axis (default false: the baseline only). */
|
|
777
|
+
axis?: boolean;
|
|
778
|
+
/** Lines: the last value of the first series in a pill at its end (default true). */
|
|
779
|
+
endLabel?: boolean;
|
|
780
|
+
/** The built-in tooltip card (default true); false keeps the guide and markers for chart-tooltip. */
|
|
781
|
+
tooltip?: boolean;
|
|
782
|
+
onSelect?: (index: number | null) => void;
|
|
783
|
+
}
|
|
784
|
+
interface ChartInstance extends Instance {
|
|
785
|
+
/** Merge new options and draw again (keeps the selection when it still exists). */
|
|
786
|
+
update(options: ChartOptions): void;
|
|
787
|
+
select(index: number | null): void;
|
|
788
|
+
readonly selected: number | null;
|
|
789
|
+
}
|
|
790
|
+
declare function createChart(root: HTMLElement | null, initial?: ChartOptions): ChartInstance;
|
|
791
|
+
|
|
792
|
+
interface Hsva {
|
|
793
|
+
/** 0–360. */
|
|
794
|
+
h: number;
|
|
795
|
+
/** 0–100. */
|
|
796
|
+
s: number;
|
|
797
|
+
/** 0–100. */
|
|
798
|
+
v: number;
|
|
799
|
+
/** 0–1. */
|
|
800
|
+
a: number;
|
|
801
|
+
}
|
|
802
|
+
interface Rgba {
|
|
803
|
+
/** 0–255. */
|
|
804
|
+
r: number;
|
|
805
|
+
g: number;
|
|
806
|
+
b: number;
|
|
807
|
+
a: number;
|
|
808
|
+
}
|
|
809
|
+
interface Hsla {
|
|
810
|
+
h: number;
|
|
811
|
+
/** 0–100. */
|
|
812
|
+
s: number;
|
|
813
|
+
l: number;
|
|
814
|
+
a: number;
|
|
815
|
+
}
|
|
816
|
+
type ColorFormat = 'hex' | 'rgb' | 'hsl';
|
|
817
|
+
type ColorChannel = 'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha';
|
|
818
|
+
declare const CHANNEL_LABELS: Record<ColorChannel, string>;
|
|
819
|
+
/** HSVA → RGBA (channels 0–255, unrounded). */
|
|
820
|
+
declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
|
|
821
|
+
/** RGBA → HSVA; a grey keeps `hue` (and black keeps `saturation`) when given. */
|
|
822
|
+
declare function rgbToHsv({ r, g, b, a }: Rgba, hue?: number, saturation?: number): Hsva;
|
|
823
|
+
/**
|
|
824
|
+
* Any colour the components accept, as HSVA; null when the text is not one.
|
|
825
|
+
* `hue` is kept for greys (no hue of their own).
|
|
826
|
+
*/
|
|
827
|
+
declare function parseColor(input: string | null | undefined, hue?: number): Hsva | null;
|
|
828
|
+
/** A colour option (text or HSVA) as HSVA; `fallback` (default red) when it cannot be read. */
|
|
829
|
+
declare function toHsva(input: string | Hsva | null | undefined, fallback?: Hsva): Hsva;
|
|
830
|
+
/** #rrggbb, or #rrggbbaa when translucent. */
|
|
831
|
+
declare function toHex(color: Hsva): string;
|
|
832
|
+
/** The colour as CSS text: hex, "rgb(255 136 0 / 0.5)" or "hsl(32 100% 50%)". */
|
|
833
|
+
declare function formatColor(color: Hsva, format?: ColorFormat): string;
|
|
834
|
+
/** Relative luminance (WCAG), 0–1, ignoring alpha. */
|
|
835
|
+
declare function luminance(color: Hsva): number;
|
|
836
|
+
/** One channel's value in its own range (CHANNEL_RANGE). */
|
|
837
|
+
declare function getChannel(color: Hsva, channel: ColorChannel): number;
|
|
838
|
+
/** A copy with one channel changed (clamped to its range); the hue survives greys. */
|
|
839
|
+
declare function setChannel(color: Hsva, channel: ColorChannel, value: number): Hsva;
|
|
840
|
+
/** What a channel's value reads as: "210°", "64 %", "136". */
|
|
841
|
+
declare function channelText(channel: ColorChannel, value: number, format?: Intl.NumberFormat): string;
|
|
842
|
+
|
|
843
|
+
interface ColorSliderOptions {
|
|
844
|
+
/** Channel this slider edits (default 'hue'). */
|
|
845
|
+
channel?: ColorChannel;
|
|
846
|
+
/** Any CSS colour parseColor reads, or HSVA (default 'hsl(0 100% 50%)'). */
|
|
847
|
+
value?: string | Hsva;
|
|
848
|
+
/** Accessible name (default: the channel's Spanish name). */
|
|
849
|
+
label?: string;
|
|
850
|
+
orientation?: 'horizontal' | 'vertical';
|
|
851
|
+
/** Default 1 (alpha .01). */
|
|
852
|
+
step?: number;
|
|
853
|
+
/** Shows the value ("210°", "64 %") in an <output>. */
|
|
854
|
+
showValue?: boolean;
|
|
855
|
+
/** Form name: a hidden input submits the hex. */
|
|
856
|
+
name?: string;
|
|
857
|
+
disabled?: boolean;
|
|
858
|
+
/** Every move. */
|
|
859
|
+
onInput?: (value: string, color: Hsva) => void;
|
|
860
|
+
/** Committed (release, key). */
|
|
861
|
+
onChange?: (value: string, color: Hsva) => void;
|
|
862
|
+
}
|
|
863
|
+
interface ColorSliderInstance extends Instance {
|
|
864
|
+
/** Another control changed the colour; `notify` false keeps callbacks quiet. */
|
|
865
|
+
setColor(color: string | Hsva, notify?: boolean): void;
|
|
866
|
+
/** Hex (#rrggbb, #rrggbbaa when translucent). */
|
|
867
|
+
readonly value: string;
|
|
868
|
+
readonly color: Hsva;
|
|
869
|
+
}
|
|
870
|
+
declare function createColorSlider(root: HTMLElement | null, options?: ColorSliderOptions): ColorSliderInstance;
|
|
871
|
+
|
|
872
|
+
interface ColorAreaOptions {
|
|
873
|
+
value?: string | Hsva;
|
|
874
|
+
/** Accessible name of the group (default 'Color'). */
|
|
875
|
+
label?: string;
|
|
876
|
+
/** Default 1. */
|
|
877
|
+
step?: number;
|
|
878
|
+
name?: string;
|
|
879
|
+
disabled?: boolean;
|
|
880
|
+
onInput?: (value: string, color: Hsva) => void;
|
|
881
|
+
onChange?: (value: string, color: Hsva) => void;
|
|
882
|
+
}
|
|
883
|
+
interface ColorAreaInstance extends Instance {
|
|
884
|
+
setColor(color: string | Hsva, notify?: boolean): void;
|
|
885
|
+
readonly value: string;
|
|
886
|
+
readonly color: Hsva;
|
|
887
|
+
}
|
|
888
|
+
declare function createColorArea(root: HTMLElement | null, options?: ColorAreaOptions): ColorAreaInstance;
|
|
889
|
+
|
|
890
|
+
interface ColorFieldOptions {
|
|
891
|
+
value?: string | Hsva;
|
|
892
|
+
format?: ColorFormat;
|
|
893
|
+
/** Keep transparency (default false: committed colours are opaque). */
|
|
894
|
+
alpha?: boolean;
|
|
895
|
+
/** aria-label when the input has no label of its own (default 'Color'). */
|
|
896
|
+
label?: string;
|
|
897
|
+
name?: string;
|
|
898
|
+
disabled?: boolean;
|
|
899
|
+
readOnly?: boolean;
|
|
900
|
+
onChange?: (value: string, color: Hsva) => void;
|
|
901
|
+
}
|
|
902
|
+
interface ColorFieldInstance extends Instance {
|
|
903
|
+
setColor(color: string | Hsva, notify?: boolean): void;
|
|
904
|
+
readonly value: string;
|
|
905
|
+
readonly color: Hsva;
|
|
906
|
+
}
|
|
907
|
+
declare function createColorField(root: HTMLElement | null, options?: ColorFieldOptions): ColorFieldInstance;
|
|
908
|
+
|
|
909
|
+
interface ColorPickerOptions {
|
|
910
|
+
value?: string | Hsva;
|
|
911
|
+
alpha?: boolean;
|
|
912
|
+
format?: ColorFormat;
|
|
913
|
+
swatches?: string[];
|
|
914
|
+
/** Accessible name; the trigger reads "<label>: <hex>". */
|
|
915
|
+
label?: string;
|
|
916
|
+
name?: string;
|
|
917
|
+
disabled?: boolean;
|
|
918
|
+
/** The panel in place, without a button or popover. */
|
|
919
|
+
inline?: boolean;
|
|
920
|
+
/** Eyedropper button where the browser has the EyeDropper API (default true). */
|
|
921
|
+
eyedropper?: boolean;
|
|
922
|
+
onInput?: (value: string, color: Hsva) => void;
|
|
923
|
+
onChange?: (value: string, color: Hsva) => void;
|
|
924
|
+
}
|
|
925
|
+
interface ColorPickerInstance extends Instance {
|
|
926
|
+
open(): void;
|
|
927
|
+
close(): void;
|
|
928
|
+
setColor(color: string | Hsva, notify?: boolean): void;
|
|
929
|
+
readonly value: string;
|
|
930
|
+
readonly color: Hsva;
|
|
931
|
+
readonly isOpen: boolean;
|
|
932
|
+
}
|
|
933
|
+
declare function createColorPicker(root: HTMLElement | null, options?: ColorPickerOptions): ColorPickerInstance;
|
|
934
|
+
|
|
935
|
+
interface TimeFieldOptions {
|
|
936
|
+
/** 'HH:MM' or 'HH:MM:SS' (24 h). */
|
|
937
|
+
value?: string | null;
|
|
938
|
+
locale?: string;
|
|
939
|
+
/** 12 or 24; default: the locale's. */
|
|
940
|
+
hourCycle?: 12 | 24;
|
|
941
|
+
seconds?: boolean;
|
|
942
|
+
/** Arrow step of the minutes (and seconds). */
|
|
943
|
+
minuteStep?: number;
|
|
944
|
+
min?: string;
|
|
945
|
+
max?: string;
|
|
946
|
+
/** Accessible name of the group (default 'Hora'). */
|
|
947
|
+
label?: string;
|
|
948
|
+
/** Hidden input with the 24 h text. */
|
|
949
|
+
name?: string;
|
|
950
|
+
disabled?: boolean;
|
|
951
|
+
readOnly?: boolean;
|
|
952
|
+
onChange?: (value: string | null) => void;
|
|
953
|
+
}
|
|
954
|
+
interface TimeFieldInstance extends Instance {
|
|
955
|
+
setValue(value: string | null, animate?: boolean): void;
|
|
956
|
+
focus(): void;
|
|
957
|
+
readonly value: string | null;
|
|
958
|
+
}
|
|
959
|
+
declare function createTimeField(root: HTMLElement | null, options?: TimeFieldOptions): TimeFieldInstance;
|
|
960
|
+
|
|
961
|
+
interface DateRange {
|
|
962
|
+
start: Date;
|
|
963
|
+
end: Date;
|
|
964
|
+
}
|
|
965
|
+
/** An ordered range from {start, end} (Dates or 'YYYY-MM-DD'); null when either end is missing or unreadable. */
|
|
966
|
+
declare function toRange(value: {
|
|
967
|
+
start?: DateInput | null;
|
|
968
|
+
end?: DateInput | null;
|
|
969
|
+
} | null | undefined): DateRange | null;
|
|
970
|
+
declare const rangeKeys: (range: DateRange) => {
|
|
971
|
+
start: string;
|
|
972
|
+
end: string;
|
|
973
|
+
};
|
|
974
|
+
/** Days from start to end, both included. */
|
|
975
|
+
declare const rangeLength: (range: DateRange) => number;
|
|
976
|
+
|
|
977
|
+
interface RangeCalendarOptions {
|
|
978
|
+
value?: {
|
|
979
|
+
start: DateInput;
|
|
980
|
+
end: DateInput;
|
|
981
|
+
} | null;
|
|
982
|
+
/** First visible month (default: the value's start, else today). */
|
|
983
|
+
month?: DateInput;
|
|
984
|
+
visibleMonths?: 1 | 2;
|
|
985
|
+
/** 0 = Sunday … 6 = Saturday (default 1, Monday). */
|
|
986
|
+
firstDay?: number;
|
|
987
|
+
min?: DateInput | null;
|
|
988
|
+
max?: DateInput | null;
|
|
989
|
+
/** 'YYYY-MM-DD' keys or a test. */
|
|
990
|
+
unavailable?: string[] | ((day: Date) => boolean);
|
|
991
|
+
locale?: string;
|
|
992
|
+
/** Override "today" (demos, tests). */
|
|
993
|
+
today?: DateInput;
|
|
994
|
+
labels?: {
|
|
995
|
+
prev?: string;
|
|
996
|
+
next?: string;
|
|
997
|
+
};
|
|
998
|
+
/** 'range' (default): two clicks; 'single': one click picks a day (date-time-picker). */
|
|
999
|
+
selection?: 'range' | 'single';
|
|
1000
|
+
onChange?: (range: DateRange) => void;
|
|
1001
|
+
}
|
|
1002
|
+
interface RangeCalendarInstance extends Instance {
|
|
1003
|
+
setValue(range: {
|
|
1004
|
+
start: DateInput;
|
|
1005
|
+
end: DateInput;
|
|
1006
|
+
} | null, animate?: boolean): void;
|
|
1007
|
+
next(): void;
|
|
1008
|
+
prev(): void;
|
|
1009
|
+
/** Move the focus to `day`, changing month if needed (`animate` false: no slide). */
|
|
1010
|
+
focusDay(day: DateInput, animate?: boolean): void;
|
|
1011
|
+
readonly value: DateRange | null;
|
|
1012
|
+
readonly month: Date;
|
|
1013
|
+
}
|
|
1014
|
+
/** Seconds a finished range of `days` takes to settle: its band draws in while its end day pops (.3 s). */
|
|
1015
|
+
declare const bandDuration: (days: number) => number;
|
|
1016
|
+
declare function createRangeCalendar(root: HTMLElement | null, options?: RangeCalendarOptions): RangeCalendarInstance;
|
|
1017
|
+
|
|
1018
|
+
interface DateRangePreset {
|
|
1019
|
+
label: string;
|
|
1020
|
+
start: DateInput;
|
|
1021
|
+
end: DateInput;
|
|
1022
|
+
}
|
|
1023
|
+
interface DateRangePickerOptions {
|
|
1024
|
+
value?: {
|
|
1025
|
+
start: DateInput;
|
|
1026
|
+
end: DateInput;
|
|
1027
|
+
} | null;
|
|
1028
|
+
min?: DateInput | null;
|
|
1029
|
+
max?: DateInput | null;
|
|
1030
|
+
unavailable?: string[] | ((day: Date) => boolean);
|
|
1031
|
+
firstDay?: number;
|
|
1032
|
+
locale?: string;
|
|
1033
|
+
today?: DateInput;
|
|
1034
|
+
/** Accessible name of the field (default 'Fechas'). */
|
|
1035
|
+
label?: string;
|
|
1036
|
+
/** Hidden inputs name[start] and name[end] (YYYY-MM-DD). */
|
|
1037
|
+
name?: string;
|
|
1038
|
+
presets?: DateRangePreset[];
|
|
1039
|
+
disabled?: boolean;
|
|
1040
|
+
onChange?: (range: DateRange | null) => void;
|
|
1041
|
+
}
|
|
1042
|
+
interface DateRangePickerInstance extends Instance {
|
|
1043
|
+
open(): void;
|
|
1044
|
+
close(): void;
|
|
1045
|
+
setValue(range: {
|
|
1046
|
+
start: DateInput;
|
|
1047
|
+
end: DateInput;
|
|
1048
|
+
} | null): void;
|
|
1049
|
+
readonly value: DateRange | null;
|
|
1050
|
+
readonly isOpen: boolean;
|
|
1051
|
+
}
|
|
1052
|
+
declare function createDateRangePicker(root: HTMLElement | null, options?: DateRangePickerOptions): DateRangePickerInstance;
|
|
1053
|
+
|
|
1054
|
+
type Side = 'top' | 'bottom' | 'left' | 'right';
|
|
1055
|
+
type Placement = Side | 'auto';
|
|
1056
|
+
interface Box {
|
|
1057
|
+
left: number;
|
|
1058
|
+
top: number;
|
|
1059
|
+
width: number;
|
|
1060
|
+
height: number;
|
|
1061
|
+
}
|
|
1062
|
+
interface PlaceOptions {
|
|
1063
|
+
placement?: Placement;
|
|
1064
|
+
/** Space between anchor and box (default 8). */
|
|
1065
|
+
gap?: number;
|
|
1066
|
+
/** Distance kept from the viewport edges (default 8). */
|
|
1067
|
+
edge?: number;
|
|
1068
|
+
/** Along the edge: centred on the anchor (default) or flush with its start or end. */
|
|
1069
|
+
align?: 'center' | 'start' | 'end';
|
|
1070
|
+
/** The arrow stays this far from the box's corners (default 12). */
|
|
1071
|
+
arrowPad?: number;
|
|
1072
|
+
viewport?: {
|
|
1073
|
+
width: number;
|
|
1074
|
+
height: number;
|
|
1075
|
+
};
|
|
1076
|
+
}
|
|
1077
|
+
interface Placed {
|
|
1078
|
+
side: Side;
|
|
1079
|
+
/** Viewport coordinates of the box's top-left corner. */
|
|
1080
|
+
x: number;
|
|
1081
|
+
y: number;
|
|
1082
|
+
/** Arrow position along the box's edge facing the anchor, in px from its start. */
|
|
1083
|
+
arrow: number;
|
|
1084
|
+
}
|
|
1085
|
+
declare function place(anchor: Box, size: {
|
|
1086
|
+
width: number;
|
|
1087
|
+
height: number;
|
|
1088
|
+
}, options?: PlaceOptions): Placed;
|
|
1089
|
+
|
|
1090
|
+
interface TooltipOptions {
|
|
1091
|
+
/** Text of the bubble (default: the trigger's title, which is removed so the browser's own does not show). */
|
|
1092
|
+
content?: string;
|
|
1093
|
+
/** Preferred side (default 'top'); 'auto' takes the roomiest. */
|
|
1094
|
+
placement?: Placement;
|
|
1095
|
+
/** Hover delay in ms (default 400). Focus shows it at once. */
|
|
1096
|
+
openDelay?: number;
|
|
1097
|
+
/** Delay before hiding when the pointer leaves, in ms (default 100). */
|
|
1098
|
+
closeDelay?: number;
|
|
1099
|
+
/** The pointer can move onto the bubble (links, selectable text). */
|
|
1100
|
+
interactive?: boolean;
|
|
1101
|
+
/** Arrow pointing at the trigger (default true). */
|
|
1102
|
+
arrow?: boolean;
|
|
1103
|
+
onOpenChange?: (open: boolean) => void;
|
|
1104
|
+
}
|
|
1105
|
+
interface TooltipInstance extends Instance {
|
|
1106
|
+
open(): void;
|
|
1107
|
+
close(): void;
|
|
1108
|
+
/** New text; an open tooltip cross-fades to it. Empty text hides it. */
|
|
1109
|
+
setContent(text: string): void;
|
|
1110
|
+
readonly isOpen: boolean;
|
|
1111
|
+
}
|
|
1112
|
+
declare function createTooltip(root: HTMLElement | null, options?: TooltipOptions): TooltipInstance;
|
|
1113
|
+
|
|
1114
|
+
interface PopoverOptions {
|
|
1115
|
+
/** Accessible name of the panel (default: the trigger's text). */
|
|
1116
|
+
label?: string;
|
|
1117
|
+
onOpenChange?: (open: boolean) => void;
|
|
1118
|
+
}
|
|
1119
|
+
interface PopoverInstance extends Instance {
|
|
1120
|
+
open(): void;
|
|
1121
|
+
close(): void;
|
|
1122
|
+
toggle(): void;
|
|
1123
|
+
readonly isOpen: boolean;
|
|
1124
|
+
/** The panel (a <dialog>). */
|
|
1125
|
+
readonly panel: HTMLElement | null;
|
|
1126
|
+
}
|
|
1127
|
+
declare function createPopover(root: HTMLElement | null, options?: PopoverOptions): PopoverInstance;
|
|
1128
|
+
|
|
1129
|
+
type LoadingState = 'idle' | 'loading' | 'success' | 'error';
|
|
1130
|
+
interface LoadingButtonOptions {
|
|
1131
|
+
/** Runs on click; its promise drives the states (resolve → success, reject → error). */
|
|
1132
|
+
action?: () => unknown;
|
|
1133
|
+
/** Texts for the states (announced; shown beside the icon when not compact). */
|
|
1134
|
+
labels?: {
|
|
1135
|
+
loading?: string;
|
|
1136
|
+
success?: string;
|
|
1137
|
+
error?: string;
|
|
1138
|
+
};
|
|
1139
|
+
/** Icon only while working (default true). */
|
|
1140
|
+
compact?: boolean;
|
|
1141
|
+
/** ms in success or error before going back to the label (default 1800; 0 stays). */
|
|
1142
|
+
resetAfter?: number;
|
|
1143
|
+
onStateChange?: (state: LoadingState) => void;
|
|
1144
|
+
}
|
|
1145
|
+
interface LoadingButtonInstance extends Instance {
|
|
1146
|
+
setState(state: LoadingState): void;
|
|
1147
|
+
/** Runs `action` (or the option) and walks the states; resolves true on success. */
|
|
1148
|
+
run(action?: () => unknown): Promise<boolean>;
|
|
1149
|
+
readonly state: LoadingState;
|
|
1150
|
+
}
|
|
1151
|
+
declare function createLoadingButton(root: HTMLElement | null, options?: LoadingButtonOptions): LoadingButtonInstance;
|
|
1152
|
+
|
|
1153
|
+
interface BreadcrumbItem {
|
|
1154
|
+
label: string;
|
|
1155
|
+
href?: string;
|
|
1156
|
+
}
|
|
1157
|
+
interface BreadcrumbOptions {
|
|
1158
|
+
/** The path; without it, the authored <ol> or <a>/<span> children are read. */
|
|
1159
|
+
items?: BreadcrumbItem[];
|
|
1160
|
+
/** Accessible name of the navigation (default 'Ruta de navegación'). */
|
|
1161
|
+
label?: string;
|
|
1162
|
+
/** 'auto' (default) folds the middle when it does not fit; a number keeps at most that many items. */
|
|
1163
|
+
maxItems?: number | 'auto';
|
|
1164
|
+
/** Called before following a link; event.preventDefault() keeps the browser where it is (SPA routing). */
|
|
1165
|
+
onNavigate?: (item: BreadcrumbItem, index: number, event: Event) => void;
|
|
1166
|
+
}
|
|
1167
|
+
interface BreadcrumbInstance extends Instance {
|
|
1168
|
+
setItems(items: BreadcrumbItem[]): void;
|
|
1169
|
+
readonly items: BreadcrumbItem[];
|
|
1170
|
+
}
|
|
1171
|
+
declare function createBreadcrumb(root: HTMLElement | null, options?: BreadcrumbOptions): BreadcrumbInstance;
|
|
1172
|
+
|
|
1173
|
+
type EmptyIllustration = 'inbox' | 'search' | 'folder' | 'error' | 'success' | 'none';
|
|
1174
|
+
interface EmptyAction {
|
|
1175
|
+
id: string;
|
|
1176
|
+
label: string;
|
|
1177
|
+
/** primary (default for the first) or secondary. */
|
|
1178
|
+
variant?: 'primary' | 'secondary';
|
|
1179
|
+
/** A link instead of a button. */
|
|
1180
|
+
href?: string;
|
|
1181
|
+
}
|
|
1182
|
+
interface EmptyStateOptions {
|
|
1183
|
+
illustration?: EmptyIllustration;
|
|
1184
|
+
title?: string;
|
|
1185
|
+
description?: string;
|
|
1186
|
+
actions?: EmptyAction[];
|
|
1187
|
+
/** The illustration's idle motion (default true). */
|
|
1188
|
+
loop?: boolean;
|
|
1189
|
+
onAction?: (id: string, event: MouseEvent) => void;
|
|
1190
|
+
}
|
|
1191
|
+
interface EmptyStateInstance extends Instance {
|
|
1192
|
+
update(next: Pick<EmptyStateOptions, 'illustration' | 'title' | 'description' | 'actions'>): void;
|
|
1193
|
+
}
|
|
1194
|
+
declare function createEmptyState(root: HTMLElement | null, options?: EmptyStateOptions): EmptyStateInstance;
|
|
1195
|
+
|
|
1196
|
+
interface StatCardOptions {
|
|
1197
|
+
label?: string;
|
|
1198
|
+
value?: number;
|
|
1199
|
+
/** The value it is compared with (the previous period). */
|
|
1200
|
+
previous?: number;
|
|
1201
|
+
/** Intl.NumberFormat options (e.g. { style: 'currency', currency: 'MXN' }) or a formatter. */
|
|
1202
|
+
format?: Intl.NumberFormatOptions | ((value: number) => string);
|
|
1203
|
+
/** Locale for the numbers (default: the page's language). */
|
|
1204
|
+
locale?: string;
|
|
1205
|
+
/** Which way is good (default 'up'; 'down' for costs, churn, latency). */
|
|
1206
|
+
positive?: 'up' | 'down';
|
|
1207
|
+
/** What the change compares with (default 'vs. periodo anterior'). */
|
|
1208
|
+
comparison?: string;
|
|
1209
|
+
/** Values for the sparkline (two or more). */
|
|
1210
|
+
series?: number[];
|
|
1211
|
+
/** A goal: a bar shows how far the value is. */
|
|
1212
|
+
target?: number;
|
|
1213
|
+
/** Count when it comes into view (default true); false shows the figure at once. */
|
|
1214
|
+
countOnView?: boolean;
|
|
1215
|
+
}
|
|
1216
|
+
interface StatCardInstance extends Instance {
|
|
1217
|
+
update(next: Omit<StatCardOptions, 'countOnView' | 'locale'>): void;
|
|
1218
|
+
}
|
|
1219
|
+
declare function createStatCard(root: HTMLElement | null, initial?: StatCardOptions): StatCardInstance;
|
|
1220
|
+
|
|
1221
|
+
interface ChartTooltipSeries {
|
|
1222
|
+
name: string;
|
|
1223
|
+
values: Array<number | null>;
|
|
1224
|
+
/** Any CSS colour (default: the --mk-chart-N slot). */
|
|
1225
|
+
color?: string;
|
|
1226
|
+
}
|
|
1227
|
+
interface ChartTooltipOptions {
|
|
1228
|
+
/** Standalone: the x labels, one per point. */
|
|
1229
|
+
labels?: string[];
|
|
1230
|
+
series?: ChartTooltipSeries[];
|
|
1231
|
+
/** Standalone: points edge to edge (lines, default) or at slot centres (bars). */
|
|
1232
|
+
align?: 'edge' | 'center';
|
|
1233
|
+
/** Standalone: the plot inside the root, in px from each side (default 0). */
|
|
1234
|
+
inset?: {
|
|
1235
|
+
top?: number;
|
|
1236
|
+
right?: number;
|
|
1237
|
+
bottom?: number;
|
|
1238
|
+
left?: number;
|
|
1239
|
+
};
|
|
1240
|
+
/** Standalone: the y scale; with it a marker sits on each series. */
|
|
1241
|
+
min?: number;
|
|
1242
|
+
max?: number;
|
|
1243
|
+
formatValue?: (value: number) => string;
|
|
1244
|
+
/** The change from the previous point (default true). */
|
|
1245
|
+
delta?: boolean;
|
|
1246
|
+
/** Each row's share of the total (default false). */
|
|
1247
|
+
share?: boolean;
|
|
1248
|
+
/** A total row (default: two or more series). */
|
|
1249
|
+
total?: boolean;
|
|
1250
|
+
/** Rows by value, largest first (default false). */
|
|
1251
|
+
sort?: boolean;
|
|
1252
|
+
/** A click pins the card (default true). */
|
|
1253
|
+
pin?: boolean;
|
|
1254
|
+
/** Standalone: accessible name of the focusable plot. */
|
|
1255
|
+
label?: string;
|
|
1256
|
+
onIndexChange?: (index: number | null) => void;
|
|
1257
|
+
}
|
|
1258
|
+
interface ChartTooltipInstance extends Instance {
|
|
1259
|
+
show(index: number): void;
|
|
1260
|
+
hide(): void;
|
|
1261
|
+
update(options: ChartTooltipOptions): void;
|
|
1262
|
+
readonly index: number | null;
|
|
1263
|
+
readonly pinned: boolean;
|
|
1264
|
+
}
|
|
1265
|
+
declare function createChartTooltip(root: HTMLElement | null, initial?: ChartTooltipOptions): ChartTooltipInstance;
|
|
1266
|
+
|
|
1267
|
+
interface MultiSelectOption {
|
|
1268
|
+
value: string;
|
|
1269
|
+
label: string;
|
|
1270
|
+
group?: string;
|
|
1271
|
+
hint?: string;
|
|
1272
|
+
disabled?: boolean;
|
|
1273
|
+
}
|
|
1274
|
+
interface MultiSelectOptions {
|
|
1275
|
+
/** The options; without them, an authored <select multiple> gives them. */
|
|
1276
|
+
options?: MultiSelectOption[];
|
|
1277
|
+
value?: string[];
|
|
1278
|
+
/** Search placeholder (default 'Buscar…'). */
|
|
1279
|
+
placeholder?: string;
|
|
1280
|
+
/** Accessible name (default: the authored <label>, else 'Selección'). */
|
|
1281
|
+
label?: string;
|
|
1282
|
+
/** Hidden inputs name[] (when there is no authored select). */
|
|
1283
|
+
name?: string;
|
|
1284
|
+
/** At most this many choices. */
|
|
1285
|
+
max?: number;
|
|
1286
|
+
/** Close the list after each choice (default false). */
|
|
1287
|
+
closeOnSelect?: boolean;
|
|
1288
|
+
disabled?: boolean;
|
|
1289
|
+
onChange?: (values: string[]) => void;
|
|
1290
|
+
}
|
|
1291
|
+
interface MultiSelectInstance extends Instance {
|
|
1292
|
+
setValue(values: string[], notify?: boolean): void;
|
|
1293
|
+
setOptions(options: MultiSelectOption[]): void;
|
|
1294
|
+
open(): void;
|
|
1295
|
+
close(): void;
|
|
1296
|
+
readonly value: string[];
|
|
1297
|
+
}
|
|
1298
|
+
declare function createMultiSelect(root: HTMLElement | null, settings?: MultiSelectOptions): MultiSelectInstance;
|
|
1299
|
+
|
|
1300
|
+
interface TagInputOptions {
|
|
1301
|
+
value?: string[];
|
|
1302
|
+
/** Offered while typing (fuzzy, accents ignored). */
|
|
1303
|
+
suggestions?: string[];
|
|
1304
|
+
placeholder?: string;
|
|
1305
|
+
/** Accessible name (default: the authored <label>, else 'Etiquetas'). */
|
|
1306
|
+
label?: string;
|
|
1307
|
+
/** Hidden inputs name[] for forms. */
|
|
1308
|
+
name?: string;
|
|
1309
|
+
max?: number;
|
|
1310
|
+
/** Only tags from the suggestions. */
|
|
1311
|
+
restrict?: boolean;
|
|
1312
|
+
allowDuplicates?: boolean;
|
|
1313
|
+
/** Return a message to refuse a tag. */
|
|
1314
|
+
validate?: (tag: string, tags: string[]) => string | null | undefined | void;
|
|
1315
|
+
/** Clean a tag before adding it (default: trim and collapse spaces). */
|
|
1316
|
+
transform?: (tag: string) => string;
|
|
1317
|
+
disabled?: boolean;
|
|
1318
|
+
onChange?: (tags: string[]) => void;
|
|
1319
|
+
}
|
|
1320
|
+
interface TagInputInstance extends Instance {
|
|
1321
|
+
setValue(tags: string[], notify?: boolean): void;
|
|
1322
|
+
/** Add a tag as if typed; false when refused. */
|
|
1323
|
+
add(tag: string): boolean;
|
|
1324
|
+
remove(tag: string): void;
|
|
1325
|
+
setSuggestions(suggestions: string[]): void;
|
|
1326
|
+
readonly value: string[];
|
|
1327
|
+
}
|
|
1328
|
+
declare function createTagInput(root: HTMLElement | null, settings?: TagInputOptions): TagInputInstance;
|
|
1329
|
+
|
|
1330
|
+
interface DateTimePickerOptions {
|
|
1331
|
+
/** A Date or 'YYYY-MM-DDTHH:MM' (local). */
|
|
1332
|
+
value?: DateInput | null;
|
|
1333
|
+
min?: DateInput | null;
|
|
1334
|
+
max?: DateInput | null;
|
|
1335
|
+
locale?: string;
|
|
1336
|
+
hourCycle?: 12 | 24;
|
|
1337
|
+
/** Arrow step of the minutes (default 5). */
|
|
1338
|
+
minuteStep?: number;
|
|
1339
|
+
firstDay?: number;
|
|
1340
|
+
unavailable?: string[] | ((day: Date) => boolean);
|
|
1341
|
+
/** Override "today" (demos, tests). */
|
|
1342
|
+
today?: DateInput;
|
|
1343
|
+
/** Accessible name of the field (default 'Fecha y hora'). */
|
|
1344
|
+
label?: string;
|
|
1345
|
+
/** Hidden input with 'YYYY-MM-DDTHH:MM'. */
|
|
1346
|
+
name?: string;
|
|
1347
|
+
disabled?: boolean;
|
|
1348
|
+
onChange?: (value: Date | null) => void;
|
|
1349
|
+
}
|
|
1350
|
+
interface DateTimePickerInstance extends Instance {
|
|
1351
|
+
open(): void;
|
|
1352
|
+
close(): void;
|
|
1353
|
+
setValue(value: DateInput | null): void;
|
|
1354
|
+
readonly value: Date | null;
|
|
1355
|
+
readonly isOpen: boolean;
|
|
1356
|
+
}
|
|
1357
|
+
/** A local date-time from a Date or 'YYYY-MM-DD[T ]HH:MM[:SS]'; null when unreadable. */
|
|
1358
|
+
declare function toDateTimeValue(input: DateInput | null | undefined): Date | null;
|
|
1359
|
+
/** 'YYYY-MM-DDTHH:MM' of a local date-time (what <input type="datetime-local"> posts). */
|
|
1360
|
+
declare const dateTimeKey: (date: Date) => string;
|
|
1361
|
+
declare function createDateTimePicker(root: HTMLElement | null, options?: DateTimePickerOptions): DateTimePickerInstance;
|
|
1362
|
+
|
|
1363
|
+
type FilterFieldType = 'text' | 'number' | 'date' | 'select' | 'boolean';
|
|
1364
|
+
interface FilterField {
|
|
1365
|
+
key: string;
|
|
1366
|
+
label: string;
|
|
1367
|
+
type?: FilterFieldType;
|
|
1368
|
+
/** 'select' fields: the values to choose from. */
|
|
1369
|
+
options?: Array<{
|
|
1370
|
+
value: string;
|
|
1371
|
+
label: string;
|
|
1372
|
+
}>;
|
|
1373
|
+
}
|
|
1374
|
+
type FilterValue = string | number | null | [string | number | null, string | number | null];
|
|
1375
|
+
interface FilterRule {
|
|
1376
|
+
id: string;
|
|
1377
|
+
field: string;
|
|
1378
|
+
operator: string;
|
|
1379
|
+
value?: FilterValue;
|
|
1380
|
+
}
|
|
1381
|
+
interface FilterGroup {
|
|
1382
|
+
id: string;
|
|
1383
|
+
combinator: 'and' | 'or';
|
|
1384
|
+
rules: FilterNode[];
|
|
1385
|
+
}
|
|
1386
|
+
type FilterNode = FilterRule | FilterGroup;
|
|
1387
|
+
interface OperatorDef {
|
|
1388
|
+
id: string;
|
|
1389
|
+
label: string;
|
|
1390
|
+
/** How many values it takes. */
|
|
1391
|
+
arity: 0 | 1 | 2;
|
|
1392
|
+
}
|
|
1393
|
+
declare const OPERATORS: Record<FilterFieldType, OperatorDef[]>;
|
|
1394
|
+
declare const emptyFilter: (combinator?: "and" | "or") => FilterGroup;
|
|
1395
|
+
/** Whether `record` passes `filter`; incomplete conditions (and empty groups) do not filter. */
|
|
1396
|
+
declare function matchesFilter(record: Record<string, unknown>, filter: FilterGroup, fields: FilterField[]): boolean;
|
|
1397
|
+
/** The group holds at least one complete condition (at any depth). */
|
|
1398
|
+
declare function hasConditions(filter: FilterGroup, fields: FilterField[]): boolean;
|
|
1399
|
+
/** The filter as a sentence; incomplete conditions are left out. Empty: ''. */
|
|
1400
|
+
declare function describeFilter(filter: FilterGroup, fields: FilterField[], nested?: boolean): string;
|
|
1401
|
+
|
|
1402
|
+
interface FilterBuilderOptions {
|
|
1403
|
+
/** The fields to filter by (without them the builder stays inert). */
|
|
1404
|
+
fields?: FilterField[];
|
|
1405
|
+
value?: FilterGroup;
|
|
1406
|
+
/** Levels of groups (default 2: groups inside the main one). */
|
|
1407
|
+
maxDepth?: number;
|
|
1408
|
+
/** Accessible name (default 'Filtros'). */
|
|
1409
|
+
label?: string;
|
|
1410
|
+
/** The sentence under the builder (default true). */
|
|
1411
|
+
summary?: boolean;
|
|
1412
|
+
onChange?: (filter: FilterGroup) => void;
|
|
1413
|
+
}
|
|
1414
|
+
interface FilterBuilderInstance extends Instance {
|
|
1415
|
+
setValue(filter: FilterGroup): void;
|
|
1416
|
+
clear(): void;
|
|
1417
|
+
readonly value: FilterGroup;
|
|
1418
|
+
readonly summary: string;
|
|
1419
|
+
}
|
|
1420
|
+
declare function createFilterBuilder(root: HTMLElement | null, options?: FilterBuilderOptions): FilterBuilderInstance;
|
|
1421
|
+
|
|
1422
|
+
type TimeInput = Date | string | number;
|
|
1423
|
+
/** "ahora", "hace 5 min", "hace 2 h", "ayer", "hace 3 días", then "12 nov." (with the year when it differs). */
|
|
1424
|
+
declare function relativeTime(date: Date, now?: Date, locale?: string): string;
|
|
1425
|
+
/** "Hoy", "Ayer", "Mañana", else "Lunes, 12 de noviembre" (with the year when it differs). */
|
|
1426
|
+
declare function dayLabel(date: Date, now?: Date, locale?: string): string;
|
|
1427
|
+
|
|
1428
|
+
type TimelineStatus = 'done' | 'current' | 'upcoming' | 'error';
|
|
1429
|
+
interface TimelineEvent {
|
|
1430
|
+
id: string;
|
|
1431
|
+
title: string;
|
|
1432
|
+
description?: string;
|
|
1433
|
+
time?: TimeInput;
|
|
1434
|
+
status?: TimelineStatus;
|
|
1435
|
+
/** A short glyph in the dot (an emoji or one or two letters). */
|
|
1436
|
+
icon?: string;
|
|
1437
|
+
/** Small text under it (an author, a place). */
|
|
1438
|
+
meta?: string;
|
|
1439
|
+
}
|
|
1440
|
+
interface TimelineOptions {
|
|
1441
|
+
events?: TimelineEvent[];
|
|
1442
|
+
/** 'start' (default): the rail on the left; 'alternate': both sides on wide screens. */
|
|
1443
|
+
layout?: 'start' | 'alternate';
|
|
1444
|
+
/** A heading for each day (default false). */
|
|
1445
|
+
group?: boolean;
|
|
1446
|
+
/** Times as "hace 2 h", refreshed every minute (default true); false shows the date and time. */
|
|
1447
|
+
relative?: boolean;
|
|
1448
|
+
locale?: string;
|
|
1449
|
+
/** Accessible name of the list (default 'Historial'). */
|
|
1450
|
+
label?: string;
|
|
1451
|
+
}
|
|
1452
|
+
interface TimelineInstance extends Instance {
|
|
1453
|
+
add(event: TimelineEvent, at?: 'start' | 'end'): void;
|
|
1454
|
+
update(id: string, patch: Partial<Omit<TimelineEvent, 'id'>>): void;
|
|
1455
|
+
remove(id: string): void;
|
|
1456
|
+
setEvents(events: TimelineEvent[]): void;
|
|
1457
|
+
readonly events: TimelineEvent[];
|
|
1458
|
+
}
|
|
1459
|
+
declare function createTimeline(root: HTMLElement | null, options?: TimelineOptions): TimelineInstance;
|
|
1460
|
+
|
|
1461
|
+
interface ActivityActor {
|
|
1462
|
+
name: string;
|
|
1463
|
+
/** A picture URL; without it, the initials. */
|
|
1464
|
+
avatar?: string;
|
|
1465
|
+
}
|
|
1466
|
+
type ActivityKind = 'comment' | 'create' | 'update' | 'delete' | 'upload' | 'complete' | 'mention';
|
|
1467
|
+
interface ActivityItem {
|
|
1468
|
+
id: string;
|
|
1469
|
+
actor: ActivityActor | string;
|
|
1470
|
+
/** The verb: "comentó en", "cerró", "subió". */
|
|
1471
|
+
action: string;
|
|
1472
|
+
/** What it was done to. */
|
|
1473
|
+
target?: string;
|
|
1474
|
+
/** A link for the target. */
|
|
1475
|
+
href?: string;
|
|
1476
|
+
time: TimeInput;
|
|
1477
|
+
/** A quote under it (the comment). */
|
|
1478
|
+
detail?: string;
|
|
1479
|
+
kind?: ActivityKind;
|
|
1480
|
+
}
|
|
1481
|
+
interface ActivityFeedOptions {
|
|
1482
|
+
items?: ActivityItem[];
|
|
1483
|
+
locale?: string;
|
|
1484
|
+
/** Accessible name (default 'Actividad'). */
|
|
1485
|
+
label?: string;
|
|
1486
|
+
/** Older entries for "Cargar más": resolve with them, or with [] when there are no more. */
|
|
1487
|
+
onLoadMore?: () => Promise<ActivityItem[]> | ActivityItem[];
|
|
1488
|
+
emptyLabel?: string;
|
|
1489
|
+
}
|
|
1490
|
+
interface ActivityFeedInstance extends Instance {
|
|
1491
|
+
/** New activity on top (or behind the "novedades" pill when the reader is scrolled down). */
|
|
1492
|
+
prepend(items: ActivityItem[]): void;
|
|
1493
|
+
append(items: ActivityItem[]): void;
|
|
1494
|
+
setItems(items: ActivityItem[]): void;
|
|
1495
|
+
readonly items: ActivityItem[];
|
|
1496
|
+
}
|
|
1497
|
+
declare function createActivityFeed(root: HTMLElement | null, options?: ActivityFeedOptions): ActivityFeedInstance;
|
|
1498
|
+
|
|
1499
|
+
interface TreeNode {
|
|
1500
|
+
id: string;
|
|
1501
|
+
label: string;
|
|
1502
|
+
children?: TreeNode[];
|
|
1503
|
+
/** A short glyph before the label. */
|
|
1504
|
+
icon?: string;
|
|
1505
|
+
disabled?: boolean;
|
|
1506
|
+
/** Has children that loadChildren() will bring. */
|
|
1507
|
+
hasChildren?: boolean;
|
|
1508
|
+
/** Anything the app wants to keep with the node. */
|
|
1509
|
+
data?: unknown;
|
|
1510
|
+
}
|
|
1511
|
+
type CheckState = 'true' | 'false' | 'mixed';
|
|
1512
|
+
/** The node with `id` and the path from the top to it (it included). */
|
|
1513
|
+
declare function findNode(nodes: TreeNode[], id: string): {
|
|
1514
|
+
node: TreeNode;
|
|
1515
|
+
path: TreeNode[];
|
|
1516
|
+
} | null;
|
|
1517
|
+
/** Each node's state: leaves from `checked`, branches from their children (the enabled ones, when there are). */
|
|
1518
|
+
declare function checkStates(nodes: TreeNode[], checked: Set<string>): Map<string, CheckState>;
|
|
1519
|
+
/** Check or uncheck `id` and everything under it but disabled nodes; returns the new set (branches follow their children). */
|
|
1520
|
+
declare function toggleCheck(nodes: TreeNode[], checked: Set<string>, id: string, value?: boolean): Set<string>;
|
|
1521
|
+
/**
|
|
1522
|
+
* The nodes whose text has `query` (accents and case ignored), the ancestors
|
|
1523
|
+
* that keep them visible, and the branches to open to show them.
|
|
1524
|
+
*/
|
|
1525
|
+
declare function searchTree(nodes: TreeNode[], query: string, text?: (node: TreeNode) => string): {
|
|
1526
|
+
matches: Set<string>;
|
|
1527
|
+
visible: Set<string>;
|
|
1528
|
+
open: Set<string>;
|
|
1529
|
+
active: boolean;
|
|
1530
|
+
};
|
|
1531
|
+
|
|
1532
|
+
interface TreeViewOptions {
|
|
1533
|
+
nodes?: TreeNode[];
|
|
1534
|
+
/** Three-state checkboxes (default false). */
|
|
1535
|
+
checkable?: boolean;
|
|
1536
|
+
checked?: string[];
|
|
1537
|
+
/** Open at the start: ids, or true for every branch. */
|
|
1538
|
+
expanded?: string[] | boolean;
|
|
1539
|
+
selected?: string | null;
|
|
1540
|
+
/** A search field above the tree: true, or its placeholder. */
|
|
1541
|
+
search?: boolean | string;
|
|
1542
|
+
/** Accessible name (default 'Árbol'). */
|
|
1543
|
+
label?: string;
|
|
1544
|
+
/** Children of a branch with hasChildren, the first time it opens. */
|
|
1545
|
+
loadChildren?: (node: TreeNode) => Promise<TreeNode[]> | TreeNode[];
|
|
1546
|
+
/** Draw a label yourself (json-viewer, file-explorer); `query` is the search, for marking. */
|
|
1547
|
+
renderLabel?: (node: TreeNode, element: HTMLElement, query: string) => void;
|
|
1548
|
+
/** The text the search looks in (default: the label). */
|
|
1549
|
+
searchText?: (node: TreeNode) => string;
|
|
1550
|
+
onSelect?: (node: TreeNode) => void;
|
|
1551
|
+
onCheck?: (checked: string[]) => void;
|
|
1552
|
+
onExpand?: (node: TreeNode, expanded: boolean) => void;
|
|
1553
|
+
}
|
|
1554
|
+
interface TreeViewInstance extends Instance {
|
|
1555
|
+
expand(id: string, animate?: boolean): void;
|
|
1556
|
+
collapse(id: string, animate?: boolean): void;
|
|
1557
|
+
toggle(id: string): void;
|
|
1558
|
+
expandAll(): void;
|
|
1559
|
+
collapseAll(): void;
|
|
1560
|
+
/** Open the branches above it and bring it into view. */
|
|
1561
|
+
reveal(id: string): void;
|
|
1562
|
+
select(id: string | null, notify?: boolean): void;
|
|
1563
|
+
setChecked(ids: string[]): void;
|
|
1564
|
+
filter(query: string): void;
|
|
1565
|
+
setNodes(nodes: TreeNode[]): void;
|
|
1566
|
+
focusItem(id: string): void;
|
|
1567
|
+
readonly selected: string | null;
|
|
1568
|
+
readonly checked: string[];
|
|
1569
|
+
readonly expanded: string[];
|
|
1570
|
+
/** The tree element (role="tree"). */
|
|
1571
|
+
readonly element: HTMLElement;
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
declare function createTreeView(root: HTMLElement | null, options?: TreeViewOptions): TreeViewInstance;
|
|
1575
|
+
|
|
1576
|
+
interface FileEntry {
|
|
1577
|
+
id: string;
|
|
1578
|
+
name: string;
|
|
1579
|
+
/** 'folder' or 'file'; without it, an entry with children is a folder. */
|
|
1580
|
+
kind?: 'folder' | 'file';
|
|
1581
|
+
children?: FileEntry[];
|
|
1582
|
+
/** Bytes. */
|
|
1583
|
+
size?: number;
|
|
1584
|
+
modified?: TimeInput;
|
|
1585
|
+
}
|
|
1586
|
+
type FileFamily = 'folder' | 'image' | 'pdf' | 'doc' | 'sheet' | 'slides' | 'code' | 'archive' | 'media' | 'other';
|
|
1587
|
+
type FileSort = 'name' | 'size' | 'modified';
|
|
1588
|
+
declare function fileFamily(entry: FileEntry): FileFamily;
|
|
1589
|
+
/** "820 B", "12 KB", "3,4 MB" (in the given language). */
|
|
1590
|
+
declare function formatSize(bytes: number, locale?: string): string;
|
|
1591
|
+
/** Folders first; then by `key` (names in natural order: "Foto 2" before "Foto 10"). */
|
|
1592
|
+
declare function sortEntries(entries: FileEntry[], key?: FileSort, direction?: 1 | -1, locale?: string): FileEntry[];
|
|
1593
|
+
|
|
1594
|
+
type FileView = 'list' | 'grid';
|
|
1595
|
+
type FileChange = {
|
|
1596
|
+
type: 'create';
|
|
1597
|
+
id: string;
|
|
1598
|
+
parent: string;
|
|
1599
|
+
} | {
|
|
1600
|
+
type: 'rename';
|
|
1601
|
+
id: string;
|
|
1602
|
+
name: string;
|
|
1603
|
+
} | {
|
|
1604
|
+
type: 'delete';
|
|
1605
|
+
ids: string[];
|
|
1606
|
+
} | {
|
|
1607
|
+
type: 'move';
|
|
1608
|
+
ids: string[];
|
|
1609
|
+
to: string;
|
|
1610
|
+
};
|
|
1611
|
+
interface FileExplorerOptions {
|
|
1612
|
+
/** What the top folder holds. */
|
|
1613
|
+
files?: FileEntry[];
|
|
1614
|
+
/** Name of the top folder (default 'Inicio'). */
|
|
1615
|
+
rootLabel?: string;
|
|
1616
|
+
/** The folder open at the start (default: the top one, '/'). */
|
|
1617
|
+
folder?: string;
|
|
1618
|
+
view?: FileView;
|
|
1619
|
+
/** The folder tree beside the content (default true; it hides on narrow widths). */
|
|
1620
|
+
tree?: boolean;
|
|
1621
|
+
/** No new folders, renaming, deleting or moving (default false). */
|
|
1622
|
+
readOnly?: boolean;
|
|
1623
|
+
locale?: string;
|
|
1624
|
+
/** Accessible name (default 'Explorador de archivos'). */
|
|
1625
|
+
label?: string;
|
|
1626
|
+
/** A file was opened (double click or Enter). */
|
|
1627
|
+
onOpen?: (entry: FileEntry) => void;
|
|
1628
|
+
onNavigate?: (folder: FileEntry) => void;
|
|
1629
|
+
onSelectionChange?: (ids: string[]) => void;
|
|
1630
|
+
onViewChange?: (view: FileView) => void;
|
|
1631
|
+
/** After every change (new folder, rename, delete, move), with all the files. */
|
|
1632
|
+
onChange?: (files: FileEntry[], change: FileChange) => void;
|
|
1633
|
+
}
|
|
1634
|
+
interface FileExplorerInstance extends Instance {
|
|
1635
|
+
/** Open a folder, or a file (its folder opens and onOpen is called). */
|
|
1636
|
+
open(id: string): void;
|
|
1637
|
+
up(): void;
|
|
1638
|
+
setView(view: FileView): void;
|
|
1639
|
+
select(ids: string[]): void;
|
|
1640
|
+
/** A new folder in the open one; its name is asked for in place. Returns its id. */
|
|
1641
|
+
createFolder(name?: string): string | null;
|
|
1642
|
+
/** With a name, renames at once; without one, asks for it in place. */
|
|
1643
|
+
rename(id: string, name?: string): void;
|
|
1644
|
+
/** Deletes these entries (default: the selection). */
|
|
1645
|
+
remove(ids?: string[]): void;
|
|
1646
|
+
move(ids: string[], folder: string): void;
|
|
1647
|
+
setFiles(files: FileEntry[]): void;
|
|
1648
|
+
readonly files: FileEntry[];
|
|
1649
|
+
/** The open folder's id ('/' for the top one). */
|
|
1650
|
+
readonly folder: string;
|
|
1651
|
+
readonly selection: string[];
|
|
1652
|
+
readonly view: FileView;
|
|
1653
|
+
}
|
|
1654
|
+
declare function createFileExplorer(root: HTMLElement | null, options?: FileExplorerOptions): FileExplorerInstance;
|
|
1655
|
+
|
|
1656
|
+
type JsonType = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
|
|
1657
|
+
interface JsonViewerOptions {
|
|
1658
|
+
/** The value; without it, the JSON written inside the root (as text or in a <script type="application/json">). */
|
|
1659
|
+
data?: unknown;
|
|
1660
|
+
/** Levels open at the start: 1 shows the top keys closed, 2 opens them… (default 1; Infinity opens all). */
|
|
1661
|
+
expandDepth?: number;
|
|
1662
|
+
/** A row for the value itself with this name; without it the top keys are the first rows. */
|
|
1663
|
+
rootName?: string;
|
|
1664
|
+
/** A search field: true, or its placeholder (default false). */
|
|
1665
|
+
search?: boolean | string;
|
|
1666
|
+
/** The bar with expand, collapse and copy (default true). */
|
|
1667
|
+
toolbar?: boolean;
|
|
1668
|
+
/** Keys in alphabetical order (default false: as they come). */
|
|
1669
|
+
sortKeys?: boolean;
|
|
1670
|
+
/** Accessible name (default 'Datos JSON'). */
|
|
1671
|
+
label?: string;
|
|
1672
|
+
onSelect?: (path: string, value: unknown) => void;
|
|
1673
|
+
onCopy?: (text: string, path: string) => void;
|
|
1674
|
+
}
|
|
1675
|
+
interface JsonViewerInstance extends Instance {
|
|
1676
|
+
setData(data: unknown): void;
|
|
1677
|
+
expandAll(): void;
|
|
1678
|
+
collapseAll(): void;
|
|
1679
|
+
/** Open the rows down to this path ($.user.roles) and show it. */
|
|
1680
|
+
reveal(path: string): void;
|
|
1681
|
+
filter(query: string): void;
|
|
1682
|
+
/** Copy a value (default: all of it) as text. */
|
|
1683
|
+
copy(path?: string): Promise<boolean>;
|
|
1684
|
+
readonly data: unknown;
|
|
1685
|
+
}
|
|
1686
|
+
/** $.user, $.items[0], $["con espacios"]. */
|
|
1687
|
+
declare const jsonPath: (parent: string, key: string | number) => string;
|
|
1688
|
+
declare function createJsonViewer(root: HTMLElement | null, options?: JsonViewerOptions): JsonViewerInstance;
|
|
1689
|
+
|
|
1690
|
+
interface VirtualRange {
|
|
1691
|
+
/** First row drawn. */
|
|
1692
|
+
start: number;
|
|
1693
|
+
/** One past the last row drawn. */
|
|
1694
|
+
end: number;
|
|
1695
|
+
}
|
|
1696
|
+
interface VirtualSizes {
|
|
1697
|
+
readonly count: number;
|
|
1698
|
+
get(index: number): number;
|
|
1699
|
+
/** A row's height; true when it changed. */
|
|
1700
|
+
set(index: number, height: number): boolean;
|
|
1701
|
+
/** The top of a row (the sum of the heights before it). */
|
|
1702
|
+
offset(index: number): number;
|
|
1703
|
+
total(): number;
|
|
1704
|
+
/** The row at a vertical position (clamped to the list). */
|
|
1705
|
+
indexAt(y: number): number;
|
|
1706
|
+
/** The rows that cover y … y + height, with `overscan` more on each side. */
|
|
1707
|
+
range(y: number, height: number, overscan?: number): VirtualRange;
|
|
1708
|
+
}
|
|
1709
|
+
declare function createSizes(heights: number[]): VirtualSizes;
|
|
1710
|
+
|
|
1711
|
+
type VirtualKey = string | number;
|
|
1712
|
+
interface VirtualListOptions<T = unknown> {
|
|
1713
|
+
items?: T[];
|
|
1714
|
+
/** Every row this tall (fastest); without it rows are measured. */
|
|
1715
|
+
itemHeight?: number;
|
|
1716
|
+
/** Height of a row not measured yet (default: itemHeight, else 48). */
|
|
1717
|
+
estimatedHeight?: number;
|
|
1718
|
+
/** Rows drawn beyond each edge (default 6). */
|
|
1719
|
+
overscan?: number;
|
|
1720
|
+
/** Draw a row into its element (recycled: draw all of it every time). Default: its text. */
|
|
1721
|
+
renderItem?: (item: T, index: number, element: HTMLElement) => void;
|
|
1722
|
+
/** A row's text: the default drawing, typing to jump and announcements (default: label, title, name or the value). */
|
|
1723
|
+
itemText?: (item: T) => string;
|
|
1724
|
+
/** A stable key for a row (default: its id, else its index). */
|
|
1725
|
+
getKey?: (item: T, index: number) => VirtualKey;
|
|
1726
|
+
/** Rows can be chosen: true or 'single', or 'multiple' (default false). */
|
|
1727
|
+
selectable?: boolean | 'single' | 'multiple';
|
|
1728
|
+
selected?: VirtualKey[];
|
|
1729
|
+
/** Accessible name (default 'Lista'). */
|
|
1730
|
+
label?: string;
|
|
1731
|
+
emptyLabel?: string;
|
|
1732
|
+
locale?: string;
|
|
1733
|
+
onSelect?: (keys: VirtualKey[], items: T[]) => void;
|
|
1734
|
+
/** Enter or a double click on a row. */
|
|
1735
|
+
onActivate?: (item: T, index: number) => void;
|
|
1736
|
+
/** More rows at the end: resolve with them, with [] when there are no more, or with nothing when you add them yourself (setItems). */
|
|
1737
|
+
onEndReached?: () => Promise<T[] | void> | T[] | void;
|
|
1738
|
+
/** Draw the rows yourself (frameworks): told which ones; put them in `container` as [data-mk-vl-item][data-index] and call refresh(). */
|
|
1739
|
+
onRange?: (range: VirtualRange) => void;
|
|
1740
|
+
}
|
|
1741
|
+
interface VirtualScrollOptions {
|
|
1742
|
+
align?: 'auto' | 'start' | 'center' | 'end';
|
|
1743
|
+
animate?: boolean;
|
|
1744
|
+
}
|
|
1745
|
+
interface VirtualListInstance<T = unknown> extends Instance {
|
|
1746
|
+
setItems(items: T[]): void;
|
|
1747
|
+
/** Add rows at the end. */
|
|
1748
|
+
append(items: T[]): void;
|
|
1749
|
+
scrollToIndex(index: number, options?: VirtualScrollOptions): void;
|
|
1750
|
+
/** Position and measure the drawn rows again (after drawing them yourself, or when their content changed). */
|
|
1751
|
+
refresh(): void;
|
|
1752
|
+
select(keys: VirtualKey[]): void;
|
|
1753
|
+
/** Change how rows are drawn (vanilla). */
|
|
1754
|
+
setRenderer(renderItem: (item: T, index: number, element: HTMLElement) => void): void;
|
|
1755
|
+
readonly items: T[];
|
|
1756
|
+
readonly range: VirtualRange;
|
|
1757
|
+
readonly selected: VirtualKey[];
|
|
1758
|
+
/** Where the rows live. */
|
|
1759
|
+
readonly container: HTMLElement;
|
|
1760
|
+
}
|
|
1761
|
+
declare function createVirtualList<T = unknown>(root: HTMLElement | null, options?: VirtualListOptions<T>): VirtualListInstance<T>;
|
|
1762
|
+
|
|
1763
|
+
type PanelOrientation = 'horizontal' | 'vertical';
|
|
1764
|
+
interface ResizablePanelOptions {
|
|
1765
|
+
/** 'horizontal' (default): side by side; 'vertical': stacked. */
|
|
1766
|
+
orientation?: PanelOrientation;
|
|
1767
|
+
/** Sizes in percent, one per panel (default: data-size on the panels, else equal). */
|
|
1768
|
+
sizes?: number[];
|
|
1769
|
+
/** Smallest size of a panel in percent (default 10; data-min on a panel wins). */
|
|
1770
|
+
min?: number;
|
|
1771
|
+
/** Largest size of a panel in percent (default 100; data-max on a panel wins). */
|
|
1772
|
+
max?: number;
|
|
1773
|
+
/** Panels (indexes) that snap shut when dragged well under their minimum; data-collapsible on a panel too. */
|
|
1774
|
+
collapsible?: number[];
|
|
1775
|
+
/** Panels that start shut. */
|
|
1776
|
+
collapsed?: number[];
|
|
1777
|
+
/** Arrow keys move this many percent (default 5; Shift: four times). */
|
|
1778
|
+
step?: number;
|
|
1779
|
+
/** Remember sizes in localStorage under this key. */
|
|
1780
|
+
storageKey?: string;
|
|
1781
|
+
/** Buttons on each separator to shut and open the panels beside it. */
|
|
1782
|
+
handleButtons?: boolean;
|
|
1783
|
+
/** Names of the panels, for the separators' labels (default: data-label, else "panel 1"…). */
|
|
1784
|
+
labels?: string[];
|
|
1785
|
+
/** While it moves (once a frame). */
|
|
1786
|
+
onResize?: (sizes: number[]) => void;
|
|
1787
|
+
/** When a drag, a key or an animation ends. */
|
|
1788
|
+
onResizeEnd?: (sizes: number[]) => void;
|
|
1789
|
+
onCollapse?: (index: number, collapsed: boolean) => void;
|
|
1790
|
+
}
|
|
1791
|
+
interface ResizablePanelInstance extends Instance {
|
|
1792
|
+
setSizes(sizes: number[], animate?: boolean): void;
|
|
1793
|
+
collapse(index: number): void;
|
|
1794
|
+
expand(index: number): void;
|
|
1795
|
+
toggle(index: number): void;
|
|
1796
|
+
/** The first sizes again. */
|
|
1797
|
+
reset(): void;
|
|
1798
|
+
setOrientation(orientation: PanelOrientation): void;
|
|
1799
|
+
readonly sizes: number[];
|
|
1800
|
+
readonly collapsed: number[];
|
|
1801
|
+
readonly orientation: PanelOrientation;
|
|
1802
|
+
}
|
|
1803
|
+
/** Sizes that add up to 100: missing ones share what is left, then all scale to 100 (all missing: equal). */
|
|
1804
|
+
declare function normaliseSizes(sizes: Array<number | undefined>, count: number): number[];
|
|
1805
|
+
declare function createResizablePanel(root: HTMLElement | null, options?: ResizablePanelOptions): ResizablePanelInstance;
|
|
1806
|
+
|
|
1807
|
+
type SplitSide = 'start' | 'end';
|
|
1808
|
+
interface SplitViewOptions {
|
|
1809
|
+
/** 'horizontal' (default): side by side; 'vertical': one over the other. */
|
|
1810
|
+
orientation?: PanelOrientation;
|
|
1811
|
+
/** The first area's share, 0–1 (default .5). */
|
|
1812
|
+
ratio?: number;
|
|
1813
|
+
/** Smallest share of an area in percent (default 15). */
|
|
1814
|
+
min?: number;
|
|
1815
|
+
/** Which sides can shut: true (default) both, 'start', 'end' or false. */
|
|
1816
|
+
collapsible?: boolean | SplitSide;
|
|
1817
|
+
/** Stack the areas when the view is narrower than this many pixels (default 0: never). */
|
|
1818
|
+
stackBelow?: number;
|
|
1819
|
+
storageKey?: string;
|
|
1820
|
+
/** Names of the two areas (default 'Primera área', 'Segunda área'; or their data-label). */
|
|
1821
|
+
labels?: [string, string];
|
|
1822
|
+
/** After a change of the split ends. */
|
|
1823
|
+
onChange?: (ratio: number) => void;
|
|
1824
|
+
onCollapse?: (side: SplitSide | null) => void;
|
|
1825
|
+
}
|
|
1826
|
+
interface SplitViewInstance extends Instance {
|
|
1827
|
+
setRatio(ratio: number, animate?: boolean): void;
|
|
1828
|
+
collapse(side: SplitSide): void;
|
|
1829
|
+
/** Open the side that is shut. */
|
|
1830
|
+
expand(): void;
|
|
1831
|
+
toggle(side: SplitSide): void;
|
|
1832
|
+
readonly ratio: number;
|
|
1833
|
+
readonly collapsed: SplitSide | null;
|
|
1834
|
+
readonly orientation: PanelOrientation;
|
|
1835
|
+
}
|
|
1836
|
+
declare function createSplitView(root: HTMLElement | null, options?: SplitViewOptions): SplitViewInstance;
|
|
1837
|
+
|
|
1838
|
+
type DataColumnType = 'text' | 'number' | 'date' | 'boolean' | 'select';
|
|
1839
|
+
type DataRow = Record<string, unknown>;
|
|
1840
|
+
type RowId = string | number;
|
|
1841
|
+
type SortDirection = 'asc' | 'desc';
|
|
1842
|
+
interface DataSort {
|
|
1843
|
+
key: string;
|
|
1844
|
+
direction: SortDirection;
|
|
1845
|
+
}
|
|
1846
|
+
interface DataColumn<T extends DataRow = DataRow> {
|
|
1847
|
+
key: string;
|
|
1848
|
+
label: string;
|
|
1849
|
+
/** For sorting, filtering and the default text (default 'text'). */
|
|
1850
|
+
type?: DataColumnType;
|
|
1851
|
+
/** The choices of a 'select' column (its text and its filter). */
|
|
1852
|
+
options?: Array<{
|
|
1853
|
+
value: string;
|
|
1854
|
+
label: string;
|
|
1855
|
+
}>;
|
|
1856
|
+
sortable?: boolean;
|
|
1857
|
+
filterable?: boolean;
|
|
1858
|
+
searchable?: boolean;
|
|
1859
|
+
/** Starts hidden (it can be shown from "Columnas"). */
|
|
1860
|
+
hidden?: boolean;
|
|
1861
|
+
/** Can be hidden from "Columnas" (default true). */
|
|
1862
|
+
hideable?: boolean;
|
|
1863
|
+
align?: 'start' | 'center' | 'end';
|
|
1864
|
+
width?: string;
|
|
1865
|
+
/** The cell's text (default: numbers and dates in the page's language, Sí/No, the choice's label). */
|
|
1866
|
+
format?: (value: unknown, row: T) => string;
|
|
1867
|
+
/** Draw the cell yourself (vanilla). */
|
|
1868
|
+
render?: (value: unknown, row: T, cell: HTMLTableCellElement) => void;
|
|
1869
|
+
/** The value to sort, filter and search by (default row[key]). */
|
|
1870
|
+
value?: (row: T) => unknown;
|
|
1871
|
+
}
|
|
1872
|
+
interface DataAction {
|
|
1873
|
+
id: string;
|
|
1874
|
+
label: string;
|
|
1875
|
+
danger?: boolean;
|
|
1876
|
+
}
|
|
1877
|
+
interface DataTableOptions<T extends DataRow = DataRow> {
|
|
1878
|
+
columns?: DataColumn<T>[];
|
|
1879
|
+
rows?: T[];
|
|
1880
|
+
/** The rows' id: a key (default 'id') or a function. */
|
|
1881
|
+
rowKey?: string | ((row: T) => RowId);
|
|
1882
|
+
/** Accessible name (default 'Tabla'). */
|
|
1883
|
+
caption?: string;
|
|
1884
|
+
/** Rows a page (default 10; 0: all of them). */
|
|
1885
|
+
pageSize?: number;
|
|
1886
|
+
pageSizes?: number[];
|
|
1887
|
+
selectable?: boolean;
|
|
1888
|
+
/** A search field: true, or its placeholder (default true). */
|
|
1889
|
+
search?: boolean | string;
|
|
1890
|
+
/** A "Filtros" button with filter-builder (default true). */
|
|
1891
|
+
filters?: boolean;
|
|
1892
|
+
filter?: FilterGroup;
|
|
1893
|
+
/** A "Columnas" button to show and hide columns (default true). */
|
|
1894
|
+
columnsMenu?: boolean;
|
|
1895
|
+
/** A menu on each row. */
|
|
1896
|
+
actions?: DataAction[];
|
|
1897
|
+
/** Buttons in the bar of the chosen rows. */
|
|
1898
|
+
bulkActions?: DataAction[];
|
|
1899
|
+
sort?: DataSort | null;
|
|
1900
|
+
loading?: boolean;
|
|
1901
|
+
emptyTitle?: string;
|
|
1902
|
+
emptyDescription?: string;
|
|
1903
|
+
locale?: string;
|
|
1904
|
+
onSortChange?: (sort: DataSort | null) => void;
|
|
1905
|
+
onSelectionChange?: (ids: RowId[], rows: T[]) => void;
|
|
1906
|
+
onAction?: (action: string, row: T) => void;
|
|
1907
|
+
onBulkAction?: (action: string, rows: T[]) => void;
|
|
1908
|
+
onPageChange?: (page: number) => void;
|
|
1909
|
+
onFilterChange?: (filter: FilterGroup, query: string) => void;
|
|
1910
|
+
/** After the rows are drawn (editable-table decorates them). */
|
|
1911
|
+
onRender?: (body: HTMLTableSectionElement) => void;
|
|
1912
|
+
}
|
|
1913
|
+
interface DataTableInstance<T extends DataRow = DataRow> extends Instance {
|
|
1914
|
+
setRows(rows: T[]): void;
|
|
1915
|
+
updateRow(id: RowId, patch: Partial<T>): void;
|
|
1916
|
+
/** Rows slide out and the rest close the gap. */
|
|
1917
|
+
removeRows(ids: RowId[]): void;
|
|
1918
|
+
setLoading(loading: boolean): void;
|
|
1919
|
+
sortBy(key: string | null, direction?: SortDirection): void;
|
|
1920
|
+
setPage(page: number): void;
|
|
1921
|
+
setPageSize(size: number): void;
|
|
1922
|
+
setQuery(query: string): void;
|
|
1923
|
+
setFilter(filter: FilterGroup): void;
|
|
1924
|
+
setColumnVisible(key: string, visible: boolean): void;
|
|
1925
|
+
select(ids: RowId[]): void;
|
|
1926
|
+
rowOf(id: RowId): HTMLTableRowElement | null;
|
|
1927
|
+
cellOf(id: RowId, key: string): HTMLTableCellElement | null;
|
|
1928
|
+
/** Draw the rows again (after changing them in place). */
|
|
1929
|
+
refresh(): void;
|
|
1930
|
+
idOf(row: T): RowId;
|
|
1931
|
+
readonly rows: T[];
|
|
1932
|
+
/** The rows the search and the filters leave, in order. */
|
|
1933
|
+
readonly results: T[];
|
|
1934
|
+
readonly page: number;
|
|
1935
|
+
readonly pageCount: number;
|
|
1936
|
+
readonly selection: RowId[];
|
|
1937
|
+
readonly sort: DataSort | null;
|
|
1938
|
+
readonly query: string;
|
|
1939
|
+
readonly filter: FilterGroup;
|
|
1940
|
+
readonly columns: DataColumn<T>[];
|
|
1941
|
+
readonly body: HTMLTableSectionElement;
|
|
1942
|
+
}
|
|
1943
|
+
declare function createDataTable<T extends DataRow = DataRow>(root: HTMLElement | null, options?: DataTableOptions<T>): DataTableInstance<T>;
|
|
1944
|
+
|
|
1945
|
+
type EditorKind = 'text' | 'number' | 'date' | 'select' | 'checkbox';
|
|
1946
|
+
interface EditableColumn<T extends DataRow = DataRow> extends DataColumn<T> {
|
|
1947
|
+
/** Can be edited (default true). */
|
|
1948
|
+
editable?: boolean;
|
|
1949
|
+
/** The editor (default: from the column's type). */
|
|
1950
|
+
editor?: EditorKind;
|
|
1951
|
+
required?: boolean;
|
|
1952
|
+
min?: number;
|
|
1953
|
+
max?: number;
|
|
1954
|
+
/** An error message, or nothing when the value is fine. */
|
|
1955
|
+
validate?: (value: unknown, row: T) => string | null | undefined | void;
|
|
1956
|
+
}
|
|
1957
|
+
interface RowChange<T extends DataRow = DataRow> {
|
|
1958
|
+
id: RowId;
|
|
1959
|
+
/** The row as it is now (as it was, for a removed one). */
|
|
1960
|
+
row: T;
|
|
1961
|
+
/** The values that changed (all of them for a new row). */
|
|
1962
|
+
changes: Partial<T>;
|
|
1963
|
+
isNew?: boolean;
|
|
1964
|
+
removed?: boolean;
|
|
1965
|
+
}
|
|
1966
|
+
interface EditableTableOptions<T extends DataRow = DataRow> extends Omit<DataTableOptions<T>, 'columns'> {
|
|
1967
|
+
columns?: EditableColumn<T>[];
|
|
1968
|
+
/** Keep the changes: resolve when they are saved; reject (or throw) to keep them pending. */
|
|
1969
|
+
onSave?: (changes: RowChange<T>[], rows: T[]) => Promise<void> | void;
|
|
1970
|
+
/** After every edit. */
|
|
1971
|
+
onChange?: (changes: RowChange<T>[]) => void;
|
|
1972
|
+
/** A new row's values: shows "Agregar fila". */
|
|
1973
|
+
newRow?: () => Partial<T>;
|
|
1974
|
+
}
|
|
1975
|
+
interface EditableTableInstance<T extends DataRow = DataRow> extends Instance {
|
|
1976
|
+
/** Open a cell's editor. */
|
|
1977
|
+
edit(id: RowId, key: string): void;
|
|
1978
|
+
setValue(id: RowId, key: string, value: unknown): boolean;
|
|
1979
|
+
addRow(values?: Partial<T>): RowId;
|
|
1980
|
+
removeRows(ids: RowId[]): void;
|
|
1981
|
+
save(): Promise<boolean>;
|
|
1982
|
+
discard(): void;
|
|
1983
|
+
setRows(rows: T[]): void;
|
|
1984
|
+
readonly changes: RowChange<T>[];
|
|
1985
|
+
readonly dirty: boolean;
|
|
1986
|
+
readonly rows: T[];
|
|
1987
|
+
readonly table: DataTableInstance<T>;
|
|
1988
|
+
}
|
|
1989
|
+
declare function createEditableTable<T extends DataRow = DataRow>(root: HTMLElement | null, options?: EditableTableOptions<T>): EditableTableInstance<T>;
|
|
1990
|
+
|
|
1991
|
+
type RichCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'h2' | 'h3' | 'ul' | 'ol' | 'quote' | 'code' | 'link' | 'clear' | 'undo' | 'redo';
|
|
1992
|
+
interface RichTextEditorOptions {
|
|
1993
|
+
/** The first content, as HTML (cleaned like a paste). */
|
|
1994
|
+
value?: string;
|
|
1995
|
+
placeholder?: string;
|
|
1996
|
+
/** The buttons, in order; '|' separates groups (default: all). */
|
|
1997
|
+
toolbar?: Array<RichCommand | '|'>;
|
|
1998
|
+
/** Characters before the counter turns red (the text can go on). */
|
|
1999
|
+
maxLength?: number;
|
|
2000
|
+
/** 'words' (default), 'characters', or false. */
|
|
2001
|
+
counter?: 'words' | 'characters' | false;
|
|
2002
|
+
/** A hidden field with this name carries the HTML. */
|
|
2003
|
+
name?: string;
|
|
2004
|
+
/** Accessible name of the writing area (default 'Editor de texto'). */
|
|
2005
|
+
label?: string;
|
|
2006
|
+
readOnly?: boolean;
|
|
2007
|
+
/** Markdown shortcuts while typing (default true). */
|
|
2008
|
+
markdown?: boolean;
|
|
2009
|
+
onChange?: (html: string, text: string) => void;
|
|
2010
|
+
}
|
|
2011
|
+
interface RichTextEditorInstance extends Instance {
|
|
2012
|
+
setValue(html: string): void;
|
|
2013
|
+
focus(): void;
|
|
2014
|
+
exec(command: RichCommand, value?: string): void;
|
|
2015
|
+
readonly value: string;
|
|
2016
|
+
readonly text: string;
|
|
2017
|
+
readonly element: HTMLElement;
|
|
2018
|
+
}
|
|
2019
|
+
/** HTML with only safe formatting: known tags (renamed to their kind), links with safe addresses, no attributes else. */
|
|
2020
|
+
declare function sanitizeHtml(html: string): string;
|
|
2021
|
+
declare function createRichTextEditor(root: HTMLElement | null, options?: RichTextEditorOptions): RichTextEditorInstance;
|
|
2022
|
+
|
|
2023
|
+
/**
|
|
2024
|
+
* Every duration in one place (seconds, like GSAP, unless the name says
|
|
2025
|
+
* ms). Recipes and components take their defaults from here, so a timing is
|
|
2026
|
+
* changed once.
|
|
2027
|
+
*/
|
|
2028
|
+
declare const TIMING: Readonly<{
|
|
2029
|
+
flow: 0.5;
|
|
2030
|
+
flowStagger: 0.05;
|
|
2031
|
+
stepChange: 0.5;
|
|
2032
|
+
reveal: Readonly<{
|
|
2033
|
+
readonly fast: readonly [0.5, 0.25];
|
|
2034
|
+
readonly normal: readonly [0.7, 0.35];
|
|
2035
|
+
readonly slow: readonly [1.05, 0.5];
|
|
2036
|
+
readonly slower: readonly [1.6, 0.75];
|
|
2037
|
+
}>;
|
|
2038
|
+
details: 0.32;
|
|
2039
|
+
chevron: 0.25;
|
|
2040
|
+
indicator: 0.45;
|
|
2041
|
+
number: 0.6;
|
|
2042
|
+
numberPricing: 0.7;
|
|
2043
|
+
revealCounter: 0.9;
|
|
2044
|
+
layoutTravel: 0.62;
|
|
2045
|
+
/** New items in a reflow enter in this share of the travel time. */
|
|
2046
|
+
layoutEnterFactor: 0.6;
|
|
2047
|
+
menu: Readonly<{
|
|
2048
|
+
duration: 0.35;
|
|
2049
|
+
stagger: 0.04;
|
|
2050
|
+
delay: 0.1;
|
|
2051
|
+
}>;
|
|
2052
|
+
palette: Readonly<{
|
|
2053
|
+
duration: 0.1;
|
|
2054
|
+
stagger: 0.01;
|
|
2055
|
+
}>;
|
|
2056
|
+
form: Readonly<{
|
|
2057
|
+
duration: 0.35;
|
|
2058
|
+
stagger: 0.04;
|
|
2059
|
+
}>;
|
|
2060
|
+
landing: Readonly<{
|
|
2061
|
+
duration: 0.4;
|
|
2062
|
+
stagger: 0.05;
|
|
2063
|
+
delay: 0.15;
|
|
2064
|
+
}>;
|
|
2065
|
+
content: Readonly<{
|
|
2066
|
+
duration: 0.6;
|
|
2067
|
+
stagger: 0.06;
|
|
2068
|
+
}>;
|
|
2069
|
+
bubble: 0.7;
|
|
2070
|
+
bubbleStagger: 0.06;
|
|
2071
|
+
word: 0.25;
|
|
2072
|
+
wordStagger: 0.05;
|
|
2073
|
+
chatScroll: 0.35;
|
|
2074
|
+
composer: 0.18;
|
|
2075
|
+
slot: Readonly<{
|
|
2076
|
+
durationMs: 300;
|
|
2077
|
+
staggerMs: 45;
|
|
2078
|
+
exitOffsetMs: 50;
|
|
2079
|
+
colorFadeMs: 280;
|
|
2080
|
+
maxTilt: 5;
|
|
2081
|
+
minResizeMs: 140;
|
|
2082
|
+
}>;
|
|
2083
|
+
swatch: 0.5;
|
|
2084
|
+
swatchLight: 3.5;
|
|
2085
|
+
swatchBackground: 4.5;
|
|
2086
|
+
/** ModalHost (modal-origin, modal-close-origin, modal-fallback, modal-auto-resize). */
|
|
2087
|
+
dialog: Readonly<{
|
|
2088
|
+
/** The surface travels from its opener. */
|
|
2089
|
+
open: 0.7;
|
|
2090
|
+
/** The opener's colour hands over to the surface's. */
|
|
2091
|
+
surfaceColor: 0.3;
|
|
2092
|
+
/** Back into the opener. */
|
|
2093
|
+
close: 0.5;
|
|
2094
|
+
/** While closing, the content heads for the opener on a 2 s path cut at `close`. */
|
|
2095
|
+
contentReturn: 2;
|
|
2096
|
+
originHide: 0.08;
|
|
2097
|
+
originShow: 0.3;
|
|
2098
|
+
originShowDelay: 0.2;
|
|
2099
|
+
/** No opener on screen: scale .92 → 1. */
|
|
2100
|
+
fallback: 0.35;
|
|
2101
|
+
autoResize: 0.45;
|
|
2102
|
+
/** Backdrop tint on the signature curve. */
|
|
2103
|
+
backdrop: 0.5;
|
|
2104
|
+
/** Items of a list that opens from its control. */
|
|
2105
|
+
list: 0.25;
|
|
2106
|
+
}>;
|
|
2107
|
+
/** modal-liquid (spring channels; springs are stiffness/damping, not times). */
|
|
2108
|
+
liquid: Readonly<{
|
|
2109
|
+
size: 0.3;
|
|
2110
|
+
radius: 0.7;
|
|
2111
|
+
content: 0.3;
|
|
2112
|
+
color: 0.4;
|
|
2113
|
+
colorDelay: 0.15;
|
|
2114
|
+
ghost: 0.25;
|
|
2115
|
+
ghostDelay: 0.05;
|
|
2116
|
+
closeSize: 0.25;
|
|
2117
|
+
closeContent: 0.3;
|
|
2118
|
+
originRestore: 0.3;
|
|
2119
|
+
originRestoreDelay: 0.2;
|
|
2120
|
+
safetyMs: 1100;
|
|
2121
|
+
}>;
|
|
2122
|
+
/** modal-drag: the spring back when a drag is not far enough. */
|
|
2123
|
+
drag: Readonly<{
|
|
2124
|
+
restore: 0.5;
|
|
2125
|
+
radiusRestore: 0.3;
|
|
2126
|
+
}>;
|
|
2127
|
+
/** modal-float. */
|
|
2128
|
+
float: Readonly<{
|
|
2129
|
+
shadow: 0.45;
|
|
2130
|
+
glideDecay: 0.18;
|
|
2131
|
+
sizeSmoothing: 0.08;
|
|
2132
|
+
}>;
|
|
2133
|
+
/** chat-loader-delay, chat-confirmation-bar. */
|
|
2134
|
+
chat: Readonly<{
|
|
2135
|
+
pendingDelayMs: 500;
|
|
2136
|
+
confirmWordStagger: 0.1;
|
|
2137
|
+
}>;
|
|
2138
|
+
/** onboarding-busy-background, step-change, onboarding-reveal-counter. */
|
|
2139
|
+
onboarding: Readonly<{
|
|
2140
|
+
busy: 0.8;
|
|
2141
|
+
idle: 0.6;
|
|
2142
|
+
step: 0.5;
|
|
2143
|
+
counter: 0.9;
|
|
2144
|
+
}>;
|
|
2145
|
+
/** task-drag: lift, land (FA .62), crossfade (66 % of the land), neighbours shifting (FA .52). */
|
|
2146
|
+
sortable: Readonly<{
|
|
2147
|
+
lift: 0.18;
|
|
2148
|
+
land: 0.42;
|
|
2149
|
+
landFade: number;
|
|
2150
|
+
shift: 0.62;
|
|
2151
|
+
}>;
|
|
2152
|
+
/** toast-deck, toast-morph, toast-character-reveal. */
|
|
2153
|
+
toast: Readonly<{
|
|
2154
|
+
relayout: 0.6;
|
|
2155
|
+
expand: 0.55;
|
|
2156
|
+
expandStagger: 0.06;
|
|
2157
|
+
enter: 0.5;
|
|
2158
|
+
exit: 0.3;
|
|
2159
|
+
collapseDelayMs: 150;
|
|
2160
|
+
morphSize: 0.32;
|
|
2161
|
+
morphRadius: 0.7;
|
|
2162
|
+
morphContent: 0.32;
|
|
2163
|
+
morphColor: 0.4;
|
|
2164
|
+
morphColorDelay: 0.15;
|
|
2165
|
+
morphShadow: 0.6;
|
|
2166
|
+
morphShadowDelay: 0.05;
|
|
2167
|
+
safetyMs: 1100;
|
|
2168
|
+
chars: 0.4;
|
|
2169
|
+
charsDelay: 0.225;
|
|
2170
|
+
charsStagger: 0.02;
|
|
2171
|
+
}>;
|
|
2172
|
+
/** glass (CSS): surface/shadow transitions, ring and shine. */
|
|
2173
|
+
glass: Readonly<{
|
|
2174
|
+
hover: 0.4;
|
|
2175
|
+
ring: 0.5;
|
|
2176
|
+
}>;
|
|
2177
|
+
/** utility animations (css/effects/anim.css), by name. */
|
|
2178
|
+
effects: Readonly<{
|
|
2179
|
+
out: 0.5;
|
|
2180
|
+
'out-left': 0.5;
|
|
2181
|
+
'out-bottom': 0.5;
|
|
2182
|
+
collapse: 0.25;
|
|
2183
|
+
highlight: 1;
|
|
2184
|
+
shake: 0.5;
|
|
2185
|
+
'shake-strong': 0.4;
|
|
2186
|
+
fade: 0.3;
|
|
2187
|
+
wipe: 0.7;
|
|
2188
|
+
'progress-in': 1;
|
|
2189
|
+
}>;
|
|
2190
|
+
/** success confetti, per 60 fps frame. */
|
|
2191
|
+
confetti: Readonly<{
|
|
2192
|
+
count: 45;
|
|
2193
|
+
speed: readonly [2, 8];
|
|
2194
|
+
lift: 2;
|
|
2195
|
+
radius: readonly [3, 7];
|
|
2196
|
+
decay: readonly [0.015, 0.03];
|
|
2197
|
+
gravity: 0.15;
|
|
2198
|
+
drag: 0.98;
|
|
2199
|
+
spin: 2.5;
|
|
2200
|
+
}>;
|
|
2201
|
+
/** project sheet. */
|
|
2202
|
+
sheet: Readonly<{
|
|
2203
|
+
open: 0.72;
|
|
2204
|
+
close: 0.72;
|
|
2205
|
+
underlayScale: 0.98;
|
|
2206
|
+
underlayOpacity: 0.4;
|
|
2207
|
+
}>;
|
|
2208
|
+
/** Physical spring pairs: [stiffness, damping]. */
|
|
2209
|
+
springs: Readonly<{
|
|
2210
|
+
press: readonly [400, 10];
|
|
2211
|
+
success: readonly [260, 18];
|
|
2212
|
+
underlay: readonly [300, 30];
|
|
2213
|
+
letters: readonly [300, 10];
|
|
2214
|
+
cursorFollow: readonly [800, 35];
|
|
2215
|
+
cursorAppear: readonly [500, 30];
|
|
2216
|
+
bentoEnter: readonly [60, 15];
|
|
2217
|
+
bentoRepel: readonly [300, 25];
|
|
2218
|
+
dockPill: readonly [380, 30];
|
|
2219
|
+
}>;
|
|
2220
|
+
/** masked type. */
|
|
2221
|
+
maskText: Readonly<{
|
|
2222
|
+
duration: 1.2;
|
|
2223
|
+
delay: 0.1;
|
|
2224
|
+
stagger: 0.02;
|
|
2225
|
+
exitStagger: 0.002;
|
|
2226
|
+
y: 100;
|
|
2227
|
+
threshold: 0.8;
|
|
2228
|
+
}>;
|
|
2229
|
+
/** reveal group (rules, fades, rises). */
|
|
2230
|
+
cascade: Readonly<{
|
|
2231
|
+
duration: 1.2;
|
|
2232
|
+
step: 0.03;
|
|
2233
|
+
rise: 200;
|
|
2234
|
+
threshold: 0.3;
|
|
2235
|
+
}>;
|
|
2236
|
+
/** slot title: each letter turns 8–14 times inside a 2 s expo.out envelope. */
|
|
2237
|
+
textRoll: Readonly<{
|
|
2238
|
+
duration: 2;
|
|
2239
|
+
stagger: 0.04;
|
|
2240
|
+
turns: readonly [8, 14];
|
|
2241
|
+
interval: 6000;
|
|
2242
|
+
quietMs: 1000;
|
|
2243
|
+
}>;
|
|
2244
|
+
/** hero letters: scale on hover, pastel blink. */
|
|
2245
|
+
letters: Readonly<{
|
|
2246
|
+
scale: 1.3;
|
|
2247
|
+
y: -5;
|
|
2248
|
+
step: 0.03;
|
|
2249
|
+
blink: 0.6;
|
|
2250
|
+
blinkStart: 0.6;
|
|
2251
|
+
blinkRepeatDelay: 0.1;
|
|
2252
|
+
blinkDelays: readonly [0.1, 0.6, 0.2, 1, 0.4, 1.2, 0.15, 0.8, 0.3];
|
|
2253
|
+
}>;
|
|
2254
|
+
/** image parallax. */
|
|
2255
|
+
parallax: Readonly<{
|
|
2256
|
+
travel: 10;
|
|
2257
|
+
scale: 1.2;
|
|
2258
|
+
strongScale: 1.3;
|
|
2259
|
+
lerp: 1;
|
|
2260
|
+
}>;
|
|
2261
|
+
/** About grid gathering from depth. */
|
|
2262
|
+
depthGrid: Readonly<{
|
|
2263
|
+
perspective: 600;
|
|
2264
|
+
distance: 900;
|
|
2265
|
+
depth: -3000;
|
|
2266
|
+
rotate: -160;
|
|
2267
|
+
opacity: 0.05;
|
|
2268
|
+
scale: 0.4;
|
|
2269
|
+
stagger: 0.15;
|
|
2270
|
+
lerp: 1;
|
|
2271
|
+
}>;
|
|
2272
|
+
/** video mask: the frame and the picture inside scale in opposite directions. */
|
|
2273
|
+
frameZoom: Readonly<{
|
|
2274
|
+
outer: readonly [80, 20];
|
|
2275
|
+
inner: readonly [130, 20];
|
|
2276
|
+
phoneOuter: readonly [95, 5];
|
|
2277
|
+
phoneInner: readonly [105, 5];
|
|
2278
|
+
open: 1;
|
|
2279
|
+
lerp: 1;
|
|
2280
|
+
}>;
|
|
2281
|
+
/** marquee: seconds per item, at most 14 counted. */
|
|
2282
|
+
marquee: Readonly<{
|
|
2283
|
+
perItem: 2;
|
|
2284
|
+
maxItems: 14;
|
|
2285
|
+
}>;
|
|
2286
|
+
/** glass chip and dot cursor. */
|
|
2287
|
+
cursor: Readonly<{
|
|
2288
|
+
gutter: 10;
|
|
2289
|
+
circle: 96;
|
|
2290
|
+
dotLerp: 0.2;
|
|
2291
|
+
light: 180;
|
|
2292
|
+
}>;
|
|
2293
|
+
/** floating navbar: enters from −300 % over 1.8 s; rows follow 0.15 s + 0.025 s each. */
|
|
2294
|
+
island: Readonly<{
|
|
2295
|
+
entrance: 1.8;
|
|
2296
|
+
offset: -300;
|
|
2297
|
+
delay: 0.15;
|
|
2298
|
+
step: 0.025;
|
|
2299
|
+
focus: 150;
|
|
2300
|
+
}>;
|
|
2301
|
+
/** product dock: spread for 1.6 s on load; tablet range re-checked 250 ms after a resize. */
|
|
2302
|
+
cardDock: Readonly<{
|
|
2303
|
+
intro: 1600;
|
|
2304
|
+
resizeDebounce: 250;
|
|
2305
|
+
}>;
|
|
2306
|
+
/** phone cards: 5 s a card, 2 s wait after a touch, 0.5 s after it shows. */
|
|
2307
|
+
snapStrip: Readonly<{
|
|
2308
|
+
interval: 5000;
|
|
2309
|
+
resume: 2000;
|
|
2310
|
+
delay: 500;
|
|
2311
|
+
}>;
|
|
2312
|
+
/** fill-text: letters from .2, 0.5 s each, 0.1 s apart, top 90 % → centre 40 %. */
|
|
2313
|
+
fillText: Readonly<{
|
|
2314
|
+
from: 0.2;
|
|
2315
|
+
duration: 0.5;
|
|
2316
|
+
stagger: 0.1;
|
|
2317
|
+
start: "top 90%";
|
|
2318
|
+
end: "center 40%";
|
|
2319
|
+
}>;
|
|
2320
|
+
/** particle hero: fade in 1 s after 0.3 s, morph cycles, pointer push. */
|
|
2321
|
+
particleHero: Readonly<{
|
|
2322
|
+
fadeIn: 1;
|
|
2323
|
+
fadeDelay: 0.3;
|
|
2324
|
+
size: 128;
|
|
2325
|
+
pointSize: 1.7;
|
|
2326
|
+
maxDpr: 1.5;
|
|
2327
|
+
stillSteps: 110;
|
|
2328
|
+
}>;
|
|
2329
|
+
ticketMenu: Readonly<{
|
|
2330
|
+
open: 0.9;
|
|
2331
|
+
content: 1.1;
|
|
2332
|
+
stagger: 0.02;
|
|
2333
|
+
from: 150;
|
|
2334
|
+
}>;
|
|
2335
|
+
infiniteReel: Readonly<{
|
|
2336
|
+
friction: 0.95;
|
|
2337
|
+
wheel: 0.05;
|
|
2338
|
+
dragThreshold: 5;
|
|
2339
|
+
}>;
|
|
2340
|
+
repelBento: Readonly<{
|
|
2341
|
+
offset: 0.6;
|
|
2342
|
+
stagger: 0.006;
|
|
2343
|
+
strength: 5000;
|
|
2344
|
+
distance: 30;
|
|
2345
|
+
breakpoint: 1024;
|
|
2346
|
+
}>;
|
|
2347
|
+
rotator: Readonly<{
|
|
2348
|
+
interval: 8000;
|
|
2349
|
+
duration: 0.25;
|
|
2350
|
+
y: 5;
|
|
2351
|
+
}>;
|
|
2352
|
+
dragRuler: Readonly<{
|
|
2353
|
+
min: 0;
|
|
2354
|
+
max: 8;
|
|
2355
|
+
step: 0.1;
|
|
2356
|
+
pixelsPerUnit: 60;
|
|
2357
|
+
}>;
|
|
2358
|
+
}>;
|
|
2359
|
+
|
|
2360
|
+
type RevealSpeed = keyof typeof TIMING.reveal;
|
|
2361
|
+
interface RevealOptions {
|
|
2362
|
+
/** Element (its centre) or viewport point. Default: the last pointer position, else the centre. */
|
|
2363
|
+
origin?: Element | {
|
|
2364
|
+
x: number;
|
|
2365
|
+
y: number;
|
|
2366
|
+
} | null;
|
|
2367
|
+
speed?: RevealSpeed;
|
|
2368
|
+
delay?: number;
|
|
2369
|
+
overshoot?: number;
|
|
2370
|
+
/** Veil colour. Default: the first opaque background up the tree, else var(--mk-bg). */
|
|
2371
|
+
fill?: string;
|
|
2372
|
+
}
|
|
2373
|
+
interface RevealHandle {
|
|
2374
|
+
timeline: gsap.core.Timeline;
|
|
2375
|
+
finished: Promise<void>;
|
|
2376
|
+
/** Stop now and remove the veil. */
|
|
2377
|
+
cancel(): void;
|
|
2378
|
+
}
|
|
2379
|
+
declare function revealFrom(target: HTMLElement, options?: RevealOptions): RevealHandle | null;
|
|
2380
|
+
|
|
2381
|
+
export { createRichTextEditor as $, createColorArea as A, createColorField as B, createColorPicker as C, createTimeField as D, createRangeCalendar as E, createDateRangePicker as F, createTooltip as G, createPopover as H, createLoadingButton as I, createBreadcrumb as J, createEmptyState as K, createStatCard as L, createChartTooltip as M, createMultiSelect as N, createTagInput as O, createDateTimePicker as P, createFilterBuilder as Q, createTimeline as R, createActivityFeed as S, createTreeView as T, createFileExplorer as U, createJsonViewer as V, createVirtualList as W, createResizablePanel as X, createSplitView as Y, createDataTable as Z, createEditableTable as _, createTrailer as a, type DataTableOptions as a$, type RevealHandle as a0, type ActivityActor as a1, type ActivityFeedInstance as a2, type ActivityFeedOptions as a3, type ActivityItem as a4, type ActivityKind as a5, type AttachmentFile as a6, type AttachmentInstance as a7, type AttachmentLabels as a8, type AttachmentOptions as a9, type CodeBlockOptions as aA, type ColorAreaInstance as aB, type ColorAreaOptions as aC, type ColorChannel as aD, type ColorFieldInstance as aE, type ColorFieldOptions as aF, type ColorFormat as aG, type ColorPickerInstance as aH, type ColorPickerOptions as aI, type ColorSliderInstance as aJ, type ColorSliderOptions as aK, type CommandItem as aL, type CommandSearchInstance as aM, type CommandSearchOptions as aN, type ContextMenuInstance as aO, type ContextMenuOptions as aP, type CreditCardField as aQ, type CreditCardInstance as aR, type CreditCardLabels as aS, type CreditCardOptions as aT, type CreditCardValues as aU, type DataAction as aV, type DataColumn as aW, type DataColumnType as aX, type DataRow as aY, type DataSort as aZ, type DataTableInstance as a_, type AttachmentRejectCode as aa, type AttachmentRejection as ab, type AttachmentStatus as ac, BRAND_LABELS as ad, type BreadcrumbInstance as ae, type BreadcrumbItem as af, type BreadcrumbOptions as ag, CHANNEL_LABELS as ah, type CalendarEvent as ai, type CalendarEventStatus as aj, type CalendarInstance as ak, type CalendarLabels as al, type CalendarOptions as am, type CalendarRange as an, type CalendarView as ao, type CardBrand as ap, type ChartInstance as aq, type ChartOptions as ar, type ChartPoint as as, type ChartSeries as at, type ChartTooltipInstance as au, type ChartTooltipOptions as av, type ChartTooltipSeries as aw, type ChartType as ax, type CheckState as ay, type CodeBlockInstance as az, createQuantity as b, type PaginationOptions as b$, type DateInput as b0, type DateRange as b1, type DateRangePickerInstance as b2, type DateRangePickerOptions as b3, type DateTimePickerInstance as b4, type DateTimePickerOptions as b5, type DialogInstance as b6, type DialogLabels as b7, type DialogOptions as b8, type DialogPlacement as b9, type HoldConfirmOptions as bA, type HoverCardInstance as bB, type HoverCardOptions as bC, type Hsla as bD, type Hsva as bE, type ImagePreviewInstance as bF, type ImagePreviewOptions as bG, type InputOtpInstance as bH, type InputOtpOptions as bI, type JsonType as bJ, type JsonViewerInstance as bK, type JsonViewerOptions as bL, type LinkPreviewInstance as bM, type LinkPreviewOptions as bN, type LinkPreviewVariant as bO, type LoadingButtonInstance as bP, type LoadingButtonOptions as bQ, type LoadingState as bR, type MenuInstance as bS, type MenuOptions as bT, type MultiSelectInstance as bU, type MultiSelectOption as bV, type MultiSelectOptions as bW, type NotificationBellInstance as bX, type NotificationBellOptions as bY, OPERATORS as bZ, type PaginationInstance as b_, type DialogVariant as ba, type EditableColumn as bb, type EditableTableInstance as bc, type EditableTableOptions as bd, type EditorKind as be, type EmptyAction as bf, type EmptyIllustration as bg, type EmptyStateInstance as bh, type EmptyStateOptions as bi, type Expiry as bj, type FileChange as bk, type FileEntry as bl, type FileExplorerInstance as bm, type FileExplorerOptions as bn, type FileFamily as bo, type FileSort as bp, type FileView as bq, type FilterBuilderInstance as br, type FilterBuilderOptions as bs, type FilterField as bt, type FilterFieldType as bu, type FilterGroup as bv, type FilterNode as bw, type FilterRule as bx, type FilterValue as by, type HoldConfirmInstance as bz, createStudioDock as c, type TimeInput as c$, type PanelOrientation as c0, type PasswordChecks as c1, type PasswordScore as c2, type PasswordStrengthInstance as c3, type PasswordStrengthOptions as c4, type Placed as c5, type Placement as c6, type PopoverInstance as c7, type PopoverOptions as c8, type ProgressInstance as c9, type Side as cA, type SkeletonAnimation as cB, type SkeletonInstance as cC, type SkeletonOptions as cD, type SkeletonShape as cE, type SlotPickerInstance as cF, type SlotPickerLabels as cG, type SlotPickerOptions as cH, type SlotSource as cI, type SlotValue as cJ, type SortDirection as cK, type SplitSide as cL, type SplitViewInstance as cM, type SplitViewOptions as cN, type StarRatingInstance as cO, type StarRatingOptions as cP, type StatCardInstance as cQ, type StatCardOptions as cR, type StudioDockInstance as cS, type StudioDockOptions as cT, type StudioDockState as cU, type StudioDockView as cV, TIMING as cW, type TagInputInstance as cX, type TagInputOptions as cY, type TimeFieldInstance as cZ, type TimeFieldOptions as c_, type ProgressOptions as ca, type ProgressVariant as cb, type QuantityInstance as cc, type QuantityOptions as cd, type QuestionnaireAnswers as ce, type QuestionnaireInstance as cf, type QuestionnaireLabels as cg, type QuestionnaireOptions as ch, type RangeCalendarInstance as ci, type RangeCalendarOptions as cj, type RangeSliderInstance as ck, type RangeSliderOptions as cl, type RangeValue as cm, type ResizablePanelInstance as cn, type ResizablePanelOptions as co, type RevealOptions as cp, type RevealSpeed as cq, type Rgba as cr, type RichCommand as cs, type RichTextEditorInstance as ct, type RichTextEditorOptions as cu, type RowChange as cv, type RowId as cw, STRENGTH_LABELS as cx, type ScratchCardInstance as cy, type ScratchCardOptions as cz, createPagination as d, searchTree as d$, type TimelineEvent as d0, type TimelineInstance as d1, type TimelineOptions as d2, type TimelineStatus as d3, type TooltipInstance as d4, type TooltipOptions as d5, type TrailerInstance as d6, type TrailerOptions as d7, type TreeNode as d8, type TreeViewInstance as d9, findNode as dA, formatBytes as dB, formatColor as dC, formatNumber as dD, formatSize as dE, getChannel as dF, hasConditions as dG, hsvToRgb as dH, jsonPath as dI, linkDomain as dJ, luhn as dK, luminance as dL, matchesFilter as dM, normaliseSizes as dN, parseColor as dO, parseExpiry as dP, place as dQ, rangeKeys as dR, rangeLength as dS, readAnswers as dT, relativeTime as dU, revealFrom as dV, rgbToHsv as dW, safeHref as dX, safeImage as dY, sanitizeHtml as dZ, scorePassword as d_, type TreeViewOptions as da, type VirtualKey as db, type VirtualListInstance as dc, type VirtualListOptions as dd, type VirtualRange as de, type VirtualScrollOptions as df, type VirtualSizes as dg, acceptsFile as dh, bandDuration as di, cardLength as dj, channelText as dk, checkStates as dl, codeLines as dm, createDialog as dn, createMenu as dp, createSizes as dq, cvcLength as dr, dateTimeKey as ds, dayKey as dt, dayLabel as du, describeAccept as dv, describeFilter as dw, detectBrand as dx, emptyFilter as dy, fileFamily as dz, createHoverCard as e, setChannel as e0, skeletonBones as e1, sortEntries as e2, toDate as e3, toDateTimeValue as e4, toHex as e5, toHsva as e6, toRange as e7, toggleCheck as e8, createInputOtp as f, createCalendar as g, createSlotPicker as h, createCreditCard as i, createCommandSearch as j, createHoldConfirm as k, createImagePreview as l, createNotificationBell as m, createPasswordStrength as n, createScratchCard as o, createStarRating as p, createAttachment as q, createSkeleton as r, createQuestionnaire as s, createCodeBlock as t, createContextMenu as u, createLinkPreview as v, createProgress as w, createRangeSlider as x, createChart as y, createColorSlider as z };
|