rei-kit 2.23.0 → 2.25.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 +126 -18
- package/dist/{BaseListbox-BrIZxUmx.js → BaseListbox-DvZ7IhNn.js} +105 -38
- package/dist/BaseListbox-DvZ7IhNn.js.map +1 -0
- package/dist/app/index.d.ts +6 -0
- package/dist/components/BarChart.vue.d.ts +41 -0
- package/dist/components/BaseMenu.vue.d.ts +5 -0
- package/dist/components/DonutChart.vue.d.ts +33 -0
- package/dist/composables/use-anchored-panel.d.ts +48 -0
- package/dist/composables/use-dialog-shell.d.ts +17 -0
- package/dist/{format-BEvBK1SJ.js → environment-Cz5KiC1t.js} +45 -2
- package/dist/environment-Cz5KiC1t.js.map +1 -0
- package/dist/index.d.ts +84 -0
- package/dist/index.js +387 -211
- package/dist/index.js.map +1 -1
- package/dist/motion/index.d.ts +11 -0
- package/dist/motion.js +1 -44
- package/dist/motion.js.map +1 -1
- package/dist/palettes/palettes.generated.json.d.ts +30 -30
- package/dist/palettes.css +28 -28
- package/dist/pwa/index.d.ts +6 -0
- package/dist/styles.css +266 -132
- package/dist/tokens.css +3 -3
- package/dist/utils/focusable.d.ts +25 -0
- package/dist/web/BaseHoverCard.vue.d.ts +1 -0
- package/dist/web/index.d.ts +19 -0
- package/dist/web.js +19 -24
- package/dist/web.js.map +1 -1
- package/package.json +6 -3
- package/dist/BaseListbox-BrIZxUmx.js.map +0 -1
- package/dist/format-BEvBK1SJ.js.map +0 -1
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
declare const __VLS_export: <T extends {
|
|
2
|
+
key: string;
|
|
3
|
+
label: string;
|
|
4
|
+
value: number;
|
|
5
|
+
}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
6
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<{
|
|
7
|
+
/** The parts, in the order they should read around the ring. */
|
|
8
|
+
slices: readonly T[];
|
|
9
|
+
/** Names the chart, e.g. "What the stylesheet is made of". */
|
|
10
|
+
label: string;
|
|
11
|
+
/** How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. */
|
|
12
|
+
valueLabel: (value: number, item: T) => string;
|
|
13
|
+
/** A class for one slice, e.g. `text-primary` — it paints the stroke. */
|
|
14
|
+
fill: (item: T, index: number) => string;
|
|
15
|
+
/** How thick the ring is, as a percentage of its radius. */
|
|
16
|
+
thickness?: number | undefined;
|
|
17
|
+
}> & (typeof globalThis extends {
|
|
18
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
19
|
+
} ? P : {});
|
|
20
|
+
expose: (exposed: {}) => void;
|
|
21
|
+
attrs: any;
|
|
22
|
+
slots: {};
|
|
23
|
+
emit: {};
|
|
24
|
+
}>) => import('vue').VNode & {
|
|
25
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
26
|
+
};
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
30
|
+
[K in keyof T]: T[K];
|
|
31
|
+
} : {
|
|
32
|
+
[K in keyof T as K]: T[K];
|
|
33
|
+
}) & {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
/** Above the anchor or below it. */
|
|
3
|
+
export type PanelSide = 'top' | 'bottom';
|
|
4
|
+
export interface AnchoredPanelOptions {
|
|
5
|
+
/** The element the panel is positioned against. */
|
|
6
|
+
root: Ref<HTMLElement | null>;
|
|
7
|
+
/** The panel itself, measured once it is on screen. */
|
|
8
|
+
panel: Ref<HTMLElement | null>;
|
|
9
|
+
/** Whether it is showing. */
|
|
10
|
+
open: Ref<boolean>;
|
|
11
|
+
/** Which way it opens before anything is measured. */
|
|
12
|
+
side?: PanelSide;
|
|
13
|
+
/** How close to the window edge it may come, in pixels. */
|
|
14
|
+
margin?: number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Keeping a panel on screen.
|
|
18
|
+
*
|
|
19
|
+
* Two corrections, in this order, because they are not equal. **Flip**: a
|
|
20
|
+
* panel that does not fit below its anchor opens above it when there is
|
|
21
|
+
* more room there. **Shift**: whatever is left of it past the side of the
|
|
22
|
+
* window is slid back in.
|
|
23
|
+
*
|
|
24
|
+
* A panel taller than the window fits neither way, and then the rule is
|
|
25
|
+
* still "more room wins" — which shows more of it, and leaves the rest
|
|
26
|
+
* scrolled to rather than gone. `BasePopover` carried a comment saying it
|
|
27
|
+
* kept the side it asked for in that case; it never did, and nothing
|
|
28
|
+
* checked, because the arithmetic had never been given a layout to work
|
|
29
|
+
* on. The comment is gone and the behaviour is the one under test.
|
|
30
|
+
*
|
|
31
|
+
* This was written inside `BasePopover`, which is how the kit came to ship
|
|
32
|
+
* a popover that flips and a menu that does not. `BaseMenu`'s panel was
|
|
33
|
+
* pinned under its trigger with `top: 100%`, so a menu button near the
|
|
34
|
+
* bottom of a window — a row action, the `…` on a card, anything on a
|
|
35
|
+
* phone — opened a list that ran off the bottom of the screen. Nothing said
|
|
36
|
+
* so: it rendered, it passed axe, and the items were all there.
|
|
37
|
+
*
|
|
38
|
+
* Re-measured while open, because the page can scroll or the window change
|
|
39
|
+
* size underneath, and a panel that stays where it opened ends up attached
|
|
40
|
+
* to nothing. The scroll listener captures, so a scroll in any ancestor
|
|
41
|
+
* counts, and it is passive-by-omission: it only reads.
|
|
42
|
+
*/
|
|
43
|
+
export declare function useAnchoredPanel({ root, panel, open, side, margin, }: AnchoredPanelOptions): {
|
|
44
|
+
placed: Ref<PanelSide, PanelSide>;
|
|
45
|
+
shift: Ref<number, number>;
|
|
46
|
+
place: () => void;
|
|
47
|
+
reset: () => void;
|
|
48
|
+
};
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* What every modal surface has to do, in one place.
|
|
4
|
+
*
|
|
5
|
+
* A dialog, a drawer and anything else that takes the whole page share a
|
|
6
|
+
* list that is easy to get nearly right: trap Tab, stop Escape, make the
|
|
7
|
+
* rest of the page inert, stop it scrolling underneath, and hand focus back
|
|
8
|
+
* to whatever opened it. Each of those has an order that matters, and the
|
|
9
|
+
* orders are not obvious — releasing `inert` *after* restoring focus drops
|
|
10
|
+
* it on the body, because an inert element cannot take focus. That was
|
|
11
|
+
* written once, correctly, in `BaseModal`; a drawer that copied it would be
|
|
12
|
+
* a second copy to keep correct.
|
|
13
|
+
*
|
|
14
|
+
* The Tab wrap has to be done by hand: the browser's own Tab order is the
|
|
15
|
+
* whole document, and a dialog is only part of it. `inert` is what also
|
|
16
|
+
* stops a screen reader's virtual cursor, which walks straight past a
|
|
17
|
+
* keydown handler.
|
|
18
|
+
*/
|
|
2
19
|
export interface DialogShellOptions {
|
|
3
20
|
/** Whether Escape and the scrim close it. */
|
|
4
21
|
dismissible?: () => boolean;
|
|
@@ -75,6 +75,49 @@ function formatNumber(value, options = {}, tag = locale.value) {
|
|
|
75
75
|
return formatter.format(value);
|
|
76
76
|
}
|
|
77
77
|
//#endregion
|
|
78
|
-
|
|
78
|
+
//#region src/motion/environment.ts
|
|
79
|
+
/**
|
|
80
|
+
* What every moving part asks before it moves.
|
|
81
|
+
*
|
|
82
|
+
* Kept in one place so the answers cannot drift apart: a counter that honoured
|
|
83
|
+
* reduced motion beside a marquee that did not would be worse than neither.
|
|
84
|
+
* Each is safe to call on a server, where the answer is "do not move" — the
|
|
85
|
+
* server renders the final state, and that is what a reader without
|
|
86
|
+
* JavaScript should see.
|
|
87
|
+
*/
|
|
88
|
+
/** Whether the reader has asked the operating system for less motion. */
|
|
89
|
+
function prefersReducedMotion() {
|
|
90
|
+
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
|
|
91
|
+
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
92
|
+
}
|
|
93
|
+
/** One frame from now, or the nearest thing to it where frames do not exist. */
|
|
94
|
+
function nextFrame(callback) {
|
|
95
|
+
if (typeof requestAnimationFrame === "function") {
|
|
96
|
+
const id = requestAnimationFrame(callback);
|
|
97
|
+
return () => cancelAnimationFrame(id);
|
|
98
|
+
}
|
|
99
|
+
const id = setTimeout(callback, 16);
|
|
100
|
+
return () => clearTimeout(id);
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Calls `callback` with whether `element` is on screen, each time that
|
|
104
|
+
* changes. Returns the function that stops watching.
|
|
105
|
+
*
|
|
106
|
+
* Without `IntersectionObserver` the element counts as visible straight away:
|
|
107
|
+
* an animation that never starts is a missing number, not a missing flourish.
|
|
108
|
+
*/
|
|
109
|
+
function watchVisibility(element, callback, threshold = .25) {
|
|
110
|
+
if (typeof IntersectionObserver === "undefined") {
|
|
111
|
+
callback(true);
|
|
112
|
+
return () => {};
|
|
113
|
+
}
|
|
114
|
+
const observer = new IntersectionObserver((entries) => {
|
|
115
|
+
for (const entry of entries) callback(entry.isIntersecting);
|
|
116
|
+
}, { threshold });
|
|
117
|
+
observer.observe(element);
|
|
118
|
+
return () => observer.disconnect();
|
|
119
|
+
}
|
|
120
|
+
//#endregion
|
|
121
|
+
export { formatNumber as a, formatDate as i, prefersReducedMotion as n, setFormatLocale as o, watchVisibility as r, nextFrame as t };
|
|
79
122
|
|
|
80
|
-
//# sourceMappingURL=
|
|
123
|
+
//# sourceMappingURL=environment-Cz5KiC1t.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"environment-Cz5KiC1t.js","names":[],"sources":["../src/utils/format.ts","../src/motion/environment.ts"],"sourcesContent":["import { ref } from 'vue'\n\n/**\n * The locale `Intl` formatting uses.\n *\n * Held here rather than imported from an i18n runtime so the utilities have no\n * i18n dependency at all: an app that never installs vue-i18n still gets dates\n * in the right language. `createI18nRuntime` sets this when it is used.\n */\nconst locale = ref<string>(typeof navigator === 'undefined' ? 'en' : (navigator.language ?? 'en'))\n\n/**\n * Points every formatter at a new locale.\n *\n * @example\n * ```ts\n * setFormatLocale('tr-TR')\n * ```\n */\nexport function setFormatLocale(next: string): void {\n locale.value = next\n}\n\n/**\n * `Intl.DateTimeFormat` is expensive to construct, so instances are cached per\n * locale and option set. The key includes the locale, which is what lets the\n * cache survive a language change instead of returning stale formatters.\n */\nconst cache = new Map<string, Intl.DateTimeFormat>()\n\n/**\n * Formats a date in the active locale.\n *\n * Reading the locale ref here is deliberate: called from a `computed`, the\n * result re-evaluates when the language changes.\n *\n * @param date - Date to format.\n * @param options - Passed straight to `Intl.DateTimeFormat`.\n *\n * @example\n * ```ts\n * formatDate(new Date(), { weekday: 'narrow' }) // 'T'\n * ```\n */\nexport function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string {\n const tag = locale.value\n const key = `${tag}:${JSON.stringify(options)}`\n\n let formatter = cache.get(key)\n if (!formatter) {\n formatter = new Intl.DateTimeFormat(tag, options)\n cache.set(key, formatter)\n }\n\n return formatter.format(date)\n}\n\nconst numberCache = new Map<string, Intl.NumberFormat>()\n\n/**\n * Formats a number in the active locale, or in `tag` when one is given.\n *\n * The same cache and the same locale as `formatDate`, so a counter and the\n * date beside it change language together.\n *\n * @param value - Number to format.\n * @param options - Passed straight to `Intl.NumberFormat`: currency, percent, decimals.\n * @param tag - A BCP 47 tag that overrides the active locale for this call.\n *\n * @example\n * ```ts\n * formatNumber(48200, { style: 'currency', currency: 'JPY' }) // '¥48,200'\n * ```\n */\nexport function formatNumber(\n value: number,\n options: Intl.NumberFormatOptions = {},\n tag: string = locale.value,\n): string {\n const key = `${tag}:${JSON.stringify(options)}`\n\n let formatter = numberCache.get(key)\n if (!formatter) {\n formatter = new Intl.NumberFormat(tag, options)\n numberCache.set(key, formatter)\n }\n\n return formatter.format(value)\n}\n","/**\n * What every moving part asks before it moves.\n *\n * Kept in one place so the answers cannot drift apart: a counter that honoured\n * reduced motion beside a marquee that did not would be worse than neither.\n * Each is safe to call on a server, where the answer is \"do not move\" — the\n * server renders the final state, and that is what a reader without\n * JavaScript should see.\n */\n\n/** Whether the reader has asked the operating system for less motion. */\nexport function prefersReducedMotion(): boolean {\n if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return true\n\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n}\n\n/** One frame from now, or the nearest thing to it where frames do not exist. */\nexport function nextFrame(callback: () => void): () => void {\n if (typeof requestAnimationFrame === 'function') {\n const id = requestAnimationFrame(callback)\n\n return () => cancelAnimationFrame(id)\n }\n\n const id = setTimeout(callback, 16)\n\n return () => clearTimeout(id)\n}\n\n/**\n * Calls `callback` with whether `element` is on screen, each time that\n * changes. Returns the function that stops watching.\n *\n * Without `IntersectionObserver` the element counts as visible straight away:\n * an animation that never starts is a missing number, not a missing flourish.\n */\nexport function watchVisibility(\n element: Element,\n callback: (visible: boolean) => void,\n threshold = 0.25,\n): () => void {\n if (typeof IntersectionObserver === 'undefined') {\n callback(true)\n\n return () => {}\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) callback(entry.isIntersecting)\n },\n { threshold },\n )\n observer.observe(element)\n\n return () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;AASA,IAAM,SAAS,IAAY,OAAO,cAAc,cAAc,OAAQ,UAAU,YAAY,IAAK;;;;;;;;;AAUjG,SAAgB,gBAAgB,MAAoB;CAClD,OAAO,QAAQ;AACjB;;;;;;AAOA,IAAM,wBAAQ,IAAI,IAAiC;;;;;;;;;;;;;;;AAgBnD,SAAgB,WAAW,MAAY,SAA6C;CAClF,MAAM,MAAM,OAAO;CACnB,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,MAAM,IAAI,GAAG;CAC7B,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,eAAe,KAAK,OAAO;EAChD,MAAM,IAAI,KAAK,SAAS;CAC1B;CAEA,OAAO,UAAU,OAAO,IAAI;AAC9B;AAEA,IAAM,8BAAc,IAAI,IAA+B;;;;;;;;;;;;;;;;AAiBvD,SAAgB,aACd,OACA,UAAoC,CAAC,GACrC,MAAc,OAAO,OACb;CACR,MAAM,MAAM,GAAG,IAAI,GAAG,KAAK,UAAU,OAAO;CAE5C,IAAI,YAAY,YAAY,IAAI,GAAG;CACnC,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,aAAa,KAAK,OAAO;EAC9C,YAAY,IAAI,KAAK,SAAS;CAChC;CAEA,OAAO,UAAU,OAAO,KAAK;AAC/B;;;;;;;;;;;;;AC7EA,SAAgB,uBAAgC;CAC9C,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY,OAAO;CAErF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAC/D;;AAGA,SAAgB,UAAU,UAAkC;CAC1D,IAAI,OAAO,0BAA0B,YAAY;EAC/C,MAAM,KAAK,sBAAsB,QAAQ;EAEzC,aAAa,qBAAqB,EAAE;CACtC;CAEA,MAAM,KAAK,WAAW,UAAU,EAAE;CAElC,aAAa,aAAa,EAAE;AAC9B;;;;;;;;AASA,SAAgB,gBACd,SACA,UACA,YAAY,KACA;CACZ,IAAI,OAAO,yBAAyB,aAAa;EAC/C,SAAS,IAAI;EAEb,aAAa,CAAC;CAChB;CAEA,MAAM,WAAW,IAAI,sBAClB,YAAY;EACX,KAAK,MAAM,SAAS,SAAS,SAAS,MAAM,cAAc;CAC5D,GACA,EAAE,UAAU,CACd;CACA,SAAS,QAAQ,OAAO;CAExB,aAAa,SAAS,WAAW;AACnC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -46,48 +46,83 @@ export { useVisualViewport } from './composables/use-visual-viewport';
|
|
|
46
46
|
export { useToast } from './composables/use-toast';
|
|
47
47
|
export type { Toast, ToastAction, ToastOptions, ToastTone } from './composables/use-toast';
|
|
48
48
|
export type { VisualViewportRect } from './composables/use-visual-viewport';
|
|
49
|
+
/** The person, in the corner where the account lives. */
|
|
49
50
|
export { default as BaseAvatar } from './components/BaseAvatar.vue';
|
|
51
|
+
/** A message the reader has to take in before carrying on. */
|
|
50
52
|
export { default as BaseAlert } from './components/BaseAlert.vue';
|
|
53
|
+
/** A small standing label: a level, a state, a count. */
|
|
51
54
|
export { default as BaseBadge } from './components/BaseBadge.vue';
|
|
55
|
+
/** The kit's button, and — when asked — its link. */
|
|
52
56
|
export { default as BaseButton } from './components/BaseButton.vue';
|
|
57
|
+
/** A text field with its label, hint and error already wired to it. */
|
|
53
58
|
export { default as BaseInput } from './components/BaseInput.vue';
|
|
59
|
+
/** A list of actions behind one control. */
|
|
54
60
|
export { default as BaseMenu } from './components/BaseMenu.vue';
|
|
61
|
+
/** Pins the sheet to the area the keyboard has left visible. */
|
|
55
62
|
export { default as BaseSheet } from './components/BaseSheet.vue';
|
|
63
|
+
/** A surface with a border, and optionally a head and a foot. */
|
|
56
64
|
export { default as BaseCard } from './components/BaseCard.vue';
|
|
65
|
+
/** A field you type into to narrow a list, then choose from it. */
|
|
57
66
|
export { default as BaseCombobox } from './components/BaseCombobox.vue';
|
|
58
67
|
export type { ComboboxOption } from './components/BaseCombobox.vue';
|
|
68
|
+
/** A single checkbox, with its label beside it. */
|
|
59
69
|
export { default as BaseCheckbox } from './components/BaseCheckbox.vue';
|
|
70
|
+
/** A set of radios, and the reason there is no `BaseRadio`. */
|
|
60
71
|
export { default as BaseRadioGroup } from './components/BaseRadioGroup.vue';
|
|
72
|
+
/** A native `<select>`, wearing the kit's field. */
|
|
61
73
|
export { default as BaseSelect } from './components/BaseSelect.vue';
|
|
74
|
+
/** A value picked from a range, where roughly right is the point. */
|
|
62
75
|
export { default as BaseSlider } from './components/BaseSlider.vue';
|
|
63
76
|
/**
|
|
64
77
|
* A slider and a number field on one value: drag to find it, type to land
|
|
65
78
|
* on it. See `SliderField.vue` for why both carry the same name.
|
|
66
79
|
*/
|
|
67
80
|
export { default as SliderField } from './components/SliderField.vue';
|
|
81
|
+
/** Work in progress, with no idea how much is left. */
|
|
68
82
|
export { default as BaseSpinner } from './components/BaseSpinner.vue';
|
|
83
|
+
/** A setting that takes effect the moment it is touched. */
|
|
69
84
|
export { default as BaseSwitch } from './components/BaseSwitch.vue';
|
|
85
|
+
/** Rows of data, with the parts a hand-written `<table>` leaves out. */
|
|
70
86
|
export { default as BaseTable } from './components/BaseTable.vue';
|
|
71
87
|
export type { Column } from './components/BaseTable.vue';
|
|
88
|
+
/** A multi-line field. */
|
|
72
89
|
export { default as BaseTextarea } from './components/BaseTextarea.vue';
|
|
90
|
+
/** A list with nothing in it yet, said kindly. */
|
|
73
91
|
export { default as EmptyState } from './components/EmptyState.vue';
|
|
92
|
+
/** A label, a hint, an error, and the wiring between them. */
|
|
74
93
|
export { default as FormField } from './components/FormField.vue';
|
|
94
|
+
/** Keeps one broken screen from taking the whole app down. */
|
|
75
95
|
export { default as ErrorBoundary } from './components/ErrorBoundary.vue';
|
|
96
|
+
/** One measure, centred, with the page's gutters. */
|
|
76
97
|
export { default as PageContainer } from './components/PageContainer.vue';
|
|
98
|
+
/** The bar at the top of a screen: a title with room either side of it. */
|
|
77
99
|
export { default as PageHeader } from './components/PageHeader.vue';
|
|
100
|
+
/** How far through something somebody is. */
|
|
78
101
|
export { default as ProgressBar } from './components/ProgressBar.vue';
|
|
102
|
+
/** One plan in a pricing table. */
|
|
79
103
|
export { default as PriceCard } from './components/PriceCard.vue';
|
|
104
|
+
/** A pill heading for a group of things. */
|
|
80
105
|
export { default as SectionHeading } from './components/SectionHeading.vue';
|
|
106
|
+
/** A row of mutually exclusive choices. */
|
|
81
107
|
export { default as SegmentedControl } from './components/SegmentedControl.vue';
|
|
108
|
+
/** A titled run of settings rows. */
|
|
82
109
|
export { default as SettingsGroup } from './components/SettingsGroup.vue';
|
|
110
|
+
/** One line in a settings card. */
|
|
83
111
|
export { default as SettingsRow } from './components/SettingsRow.vue';
|
|
112
|
+
/** A length starts with a digit, a dot, or opens a CSS function. */
|
|
84
113
|
export { default as SkeletonList } from './components/SkeletonList.vue';
|
|
114
|
+
/** One number, with what it means and which way it is going. */
|
|
85
115
|
export { default as StatCard } from './components/StatCard.vue';
|
|
116
|
+
/** Where the toasts land. One of these, at the app root. */
|
|
86
117
|
export { default as ToastHost } from './components/ToastHost.vue';
|
|
118
|
+
/** A small coloured dot, optionally labelled. */
|
|
87
119
|
export { default as ToneDot } from './components/ToneDot.vue';
|
|
88
120
|
export type { Tone } from './components/SectionHeading.vue';
|
|
121
|
+
/** A flat language switcher for screens with no Settings behind them. */
|
|
89
122
|
export { default as LocaleLinks } from './components/LocaleLinks.vue';
|
|
123
|
+
/** Sign in with Google, in Google's own clothes. */
|
|
90
124
|
export { default as GoogleButton } from './components/GoogleButton.vue';
|
|
125
|
+
/** The floating bottom bar. */
|
|
91
126
|
export { default as TabBar } from './components/TabBar.vue';
|
|
92
127
|
export type { TabItem } from './components/TabBar.vue';
|
|
93
128
|
/**
|
|
@@ -95,6 +130,15 @@ export type { TabItem } from './components/TabBar.vue';
|
|
|
95
130
|
* the picture's order, and one tab stop rather than three hundred odd.
|
|
96
131
|
*/
|
|
97
132
|
export { default as ActivityGrid } from './components/ActivityGrid.vue';
|
|
133
|
+
/**
|
|
134
|
+
* `BarChart` and `DonutChart`: the two shapes the kit's own dashboard
|
|
135
|
+
* vocabulary — `StatCard`, `ProgressBar`, `ActivityGrid` — creates a need
|
|
136
|
+
* for and did not answer. Both are the data as text with a picture beside
|
|
137
|
+
* it, rather than a picture with a sentence describing it.
|
|
138
|
+
*/
|
|
139
|
+
export { default as BarChart } from './components/BarChart.vue';
|
|
140
|
+
/** Parts of a whole. */
|
|
141
|
+
export { default as DonutChart } from './components/DonutChart.vue';
|
|
98
142
|
/**
|
|
99
143
|
* `ScrollArea`, a scrolling box with the two things a hand-written one
|
|
100
144
|
* leaves out: a fade at whichever edge has more content past it, and a
|
|
@@ -135,16 +179,32 @@ export { textDirection } from './utils/direction';
|
|
|
135
179
|
export { elementDirection, horizontalStep } from './utils/direction';
|
|
136
180
|
export type { TextDirection } from './utils/direction';
|
|
137
181
|
export type { AnnounceOptions } from './composables/use-announce';
|
|
182
|
+
/**
|
|
183
|
+
* The people on a thing, overlapped: who is in a conversation, who shares
|
|
184
|
+
* a list.
|
|
185
|
+
*/
|
|
138
186
|
export { default as AvatarStack } from './components/AvatarStack.vue';
|
|
187
|
+
/** A month of days, for choosing one or a stretch of them. */
|
|
139
188
|
export { default as BaseCalendar } from './components/BaseCalendar.vue';
|
|
189
|
+
/**
|
|
190
|
+
* A short label with, when it is one of a set someone assembled, a way to
|
|
191
|
+
* take it off: a filter, a recipient, a tag.
|
|
192
|
+
*/
|
|
140
193
|
export { default as BaseChip } from './components/BaseChip.vue';
|
|
194
|
+
/** A keyboard key, or a chord of them: `⌘ K`, `Ctrl Shift P`. */
|
|
141
195
|
export { default as BaseKbd } from './components/BaseKbd.vue';
|
|
196
|
+
/** A list you choose from, open on the page. */
|
|
142
197
|
export { default as BaseListbox } from './components/BaseListbox.vue';
|
|
143
198
|
export type { ListboxOption } from './components/BaseListbox.vue';
|
|
199
|
+
/** A link in a sentence — the one thing a button is not. */
|
|
144
200
|
export { default as BaseLink } from './components/BaseLink.vue';
|
|
201
|
+
/** A score out of five, given or shown. */
|
|
145
202
|
export { default as BaseRating } from './components/BaseRating.vue';
|
|
203
|
+
/** A line between things — with, when it helps, a word on it. */
|
|
146
204
|
export { default as BaseSeparator } from './components/BaseSeparator.vue';
|
|
205
|
+
/** One grey box standing in for content that has not arrived. */
|
|
147
206
|
export { default as BaseSkeleton } from './components/BaseSkeleton.vue';
|
|
207
|
+
/** A colour, as a hex value. */
|
|
148
208
|
export { default as ColorPicker } from './components/ColorPicker.vue';
|
|
149
209
|
export type { ColorSwatch } from './components/ColorPicker.vue';
|
|
150
210
|
/**
|
|
@@ -152,25 +212,49 @@ export type { ColorSwatch } from './components/ColorPicker.vue';
|
|
|
152
212
|
* focusable when it scrolls, or the end of a long line is unreachable.
|
|
153
213
|
*/
|
|
154
214
|
export { default as CodeBlock } from './components/CodeBlock.vue';
|
|
215
|
+
/** Copies a piece of text, and says that it did. */
|
|
155
216
|
export { default as CopyButton } from './components/CopyButton.vue';
|
|
217
|
+
/**
|
|
218
|
+
* Pairs of "what it is" and "what it says": the summary at the top of a
|
|
219
|
+
* detail page, the facts under an invoice.
|
|
220
|
+
*/
|
|
156
221
|
export { default as DescriptionList } from './components/DescriptionList.vue';
|
|
157
222
|
export type { DescriptionItem } from './components/DescriptionList.vue';
|
|
223
|
+
/** Files, dropped on or chosen from a real file input. */
|
|
158
224
|
export { default as FileDrop } from './components/FileDrop.vue';
|
|
225
|
+
/** A field that holds several short values: recipients, labels, skills. */
|
|
159
226
|
export { default as TagsInput } from './components/TagsInput.vue';
|
|
227
|
+
/** A time of day, chosen from two columns. */
|
|
160
228
|
export { default as TimePicker } from './components/TimePicker.vue';
|
|
229
|
+
/** What happened, in order, on a rail. */
|
|
161
230
|
export { default as BaseTimeline } from './components/BaseTimeline.vue';
|
|
162
231
|
export type { TimelineEvent } from './components/BaseTimeline.vue';
|
|
163
232
|
export type { DateRange } from './components/BaseCalendar.vue';
|
|
233
|
+
/** A date, or a stretch of dates, chosen from a calendar in a popover. */
|
|
164
234
|
export { default as BaseDatePicker } from './components/BaseDatePicker.vue';
|
|
165
235
|
export type { DatePreset } from './components/BaseDatePicker.vue';
|
|
236
|
+
/** "Are you sure?", asked beside the button that asked it. */
|
|
166
237
|
export { default as BasePopconfirm } from './components/BasePopconfirm.vue';
|
|
238
|
+
/**
|
|
239
|
+
* A panel of anything — a form, a picker, a few settings — anchored to the
|
|
240
|
+
* control that opened it.
|
|
241
|
+
*/
|
|
167
242
|
export { default as BasePopover } from './components/BasePopover.vue';
|
|
168
243
|
export type { PopoverTriggerProps } from './components/BasePopover.vue';
|
|
244
|
+
/** A row of buttons that stay pressed — one at a time, or several at once. */
|
|
169
245
|
export { default as ToggleGroup } from './components/ToggleGroup.vue';
|
|
246
|
+
/** A number, typed or stepped — a quantity, a price, a count of minutes. */
|
|
170
247
|
export { default as NumberInput } from './components/NumberInput.vue';
|
|
248
|
+
/** A short code typed one character per box — a sign-in code, a PIN. */
|
|
171
249
|
export { default as PinInput } from './components/PinInput.vue';
|
|
250
|
+
/** A password field you can look at. */
|
|
172
251
|
export { default as PasswordInput } from './components/PasswordInput.vue';
|
|
252
|
+
/** Progress as a ring — for a small space, a card's corner, a goal. */
|
|
173
253
|
export { default as CircularProgress } from './components/CircularProgress.vue';
|
|
254
|
+
/**
|
|
255
|
+
* Where someone is in a process of several steps — a sign-up, a checkout,
|
|
256
|
+
* a form split into pages.
|
|
257
|
+
*/
|
|
174
258
|
export { default as BaseStepper } from './components/BaseStepper.vue';
|
|
175
259
|
export type { StepperStep } from './components/BaseStepper.vue';
|
|
176
260
|
export { createI18nRuntime } from './i18n/runtime';
|