@glimstone/vue 0.0.0-stage → 4.1.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 +51 -2
- package/dist/Badge.vue.d.ts +49 -0
- package/dist/BrandMark.vue.d.ts +6 -0
- package/dist/Button.vue.d.ts +43 -0
- package/dist/Card.vue.d.ts +25 -0
- package/dist/Checkbox.vue.d.ts +24 -0
- package/dist/ColorPicker.vue.d.ts +30 -0
- package/dist/Combobox.js +70 -0
- package/dist/Combobox.vue.d.ts +27 -0
- package/dist/ConfirmDialog.vue.d.ts +37 -0
- package/dist/ContextMenu.vue.d.ts +27 -0
- package/dist/CopyField.vue.d.ts +22 -0
- package/dist/EmptyState.vue.d.ts +28 -0
- package/dist/IconTipButton.vue.d.ts +24 -0
- package/dist/InfoAboutCard.vue.d.ts +4 -0
- package/dist/InfoBubble.vue.d.ts +9 -0
- package/dist/InfoHelpCard.vue.d.ts +6 -0
- package/dist/InfoTile.vue.d.ts +22 -0
- package/dist/InfoVersionCard.vue.d.ts +15 -0
- package/dist/Kbd.vue.d.ts +15 -0
- package/dist/ListSelect.vue.d.ts +37 -0
- package/dist/MenuBar.vue.d.ts +13 -0
- package/dist/MenuChoice.vue.d.ts +27 -0
- package/dist/MenuRows.vue.d.ts +12 -0
- package/dist/MenuSelect.vue.d.ts +37 -0
- package/dist/MenuSubmenu.vue.d.ts +31 -0
- package/dist/Meter.vue.d.ts +23 -0
- package/dist/NumberField.vue.d.ts +10 -0
- package/dist/PasswordField.vue.d.ts +25 -0
- package/dist/Pill.vue.d.ts +23 -0
- package/dist/ProgressBar.vue.d.ts +19 -0
- package/dist/ReadmeButton.vue.d.ts +33 -0
- package/dist/Select.js +444 -0
- package/dist/Select.vue.d.ts +50 -0
- package/dist/SelectFace.vue.d.ts +26 -0
- package/dist/Selector.vue.d.ts +55 -0
- package/dist/SelectorSegment.vue.d.ts +28 -0
- package/dist/SidebarRow.vue.d.ts +22 -0
- package/dist/Slider.js +36 -0
- package/dist/Slider.vue.d.ts +23 -0
- package/dist/SubCard.vue.d.ts +21 -0
- package/dist/TipBubble.vue.d.ts +7 -0
- package/dist/TipWrap-rNAEgvb0.js +51 -0
- package/dist/TipWrap.d.ts +11 -0
- package/dist/ToastViewport.vue.d.ts +25 -0
- package/dist/Toggle.vue.d.ts +21 -0
- package/dist/UnavailableNotice.vue.d.ts +20 -0
- package/dist/Window.vue.d.ts +42 -0
- package/dist/confirm.d.ts +20 -0
- package/dist/engines.d.ts +12 -0
- package/dist/entries/combobox.d.ts +1 -0
- package/dist/entries/select.d.ts +1 -0
- package/dist/entries/slider.d.ts +1 -0
- package/dist/glyphs-Cgknt-k1.js +27 -0
- package/dist/glyphs.d.ts +25 -0
- package/dist/index.d.ts +42 -0
- package/dist/index.js +1995 -0
- package/dist/info.d.ts +71 -0
- package/dist/selectParts.d.ts +25 -0
- package/dist/selectorItem.d.ts +19 -0
- package/dist/tipBubble.d.ts +16 -0
- package/dist/windowParts.d.ts +22 -0
- package/package.json +47 -4
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { MenuEntry } from "./windowParts";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
entries: MenuEntry[];
|
|
4
|
+
openAt?: number;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
7
|
+
pick: (row: number) => any;
|
|
8
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
9
|
+
onPick?: ((row: number) => any) | undefined;
|
|
10
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type SelectWidth } from "@glimstone/core";
|
|
2
|
+
import { type SelectGroup } from "./selectParts";
|
|
3
|
+
declare const __VLS_export: <T extends string>(__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<{
|
|
4
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<{
|
|
5
|
+
label: string;
|
|
6
|
+
hideLabel?: boolean;
|
|
7
|
+
groups: SelectGroup<T>[];
|
|
8
|
+
value: T | null;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
width: SelectWidth;
|
|
11
|
+
triggerClass: string;
|
|
12
|
+
id?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
busy?: boolean;
|
|
15
|
+
tip?: string;
|
|
16
|
+
shake?: number;
|
|
17
|
+
} & {
|
|
18
|
+
onChange?: ((value: T) => any) | undefined;
|
|
19
|
+
}> & (typeof globalThis extends {
|
|
20
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
21
|
+
} ? P : {});
|
|
22
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<{
|
|
23
|
+
trigger: import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;
|
|
24
|
+
}>) => void;
|
|
25
|
+
attrs: any;
|
|
26
|
+
slots: {};
|
|
27
|
+
emit: (evt: "change", value: T) => void;
|
|
28
|
+
}>) => import("vue").VNode & {
|
|
29
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
30
|
+
};
|
|
31
|
+
declare const _default: typeof __VLS_export;
|
|
32
|
+
export default _default;
|
|
33
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
34
|
+
[K in keyof T]: T[K];
|
|
35
|
+
} : {
|
|
36
|
+
[K in keyof T as K]: T[K];
|
|
37
|
+
}) & {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as menu from "@zag-js/menu";
|
|
2
|
+
import type { SelectSubmenu } from "./selectParts";
|
|
3
|
+
declare const __VLS_export: <T extends string>(__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<{
|
|
4
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<{
|
|
5
|
+
parent: menu.Service;
|
|
6
|
+
parentApi: menu.Api;
|
|
7
|
+
triggerId: string;
|
|
8
|
+
entry: SelectSubmenu<T>;
|
|
9
|
+
value: T | null;
|
|
10
|
+
glyphs: boolean;
|
|
11
|
+
hueStyle?: Record<string, string>;
|
|
12
|
+
hueClass: string;
|
|
13
|
+
} & {
|
|
14
|
+
onChange?: ((value: T) => any) | undefined;
|
|
15
|
+
}> & (typeof globalThis extends {
|
|
16
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
17
|
+
} ? P : {});
|
|
18
|
+
expose: (exposed: {}) => void;
|
|
19
|
+
attrs: any;
|
|
20
|
+
slots: {};
|
|
21
|
+
emit: (evt: "change", value: T) => void;
|
|
22
|
+
}>) => import("vue").VNode & {
|
|
23
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
24
|
+
};
|
|
25
|
+
declare const _default: typeof __VLS_export;
|
|
26
|
+
export default _default;
|
|
27
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
28
|
+
[K in keyof T]: T[K];
|
|
29
|
+
} : {
|
|
30
|
+
[K in keyof T as K]: T[K];
|
|
31
|
+
}) & {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type MeterSize } from "@glimstone/core";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
/** From 0 to 1. Without it the meter shows stripes while the level is still being read. */
|
|
4
|
+
value?: number | null;
|
|
5
|
+
/** The accessible name, such as the disk's. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** `small` sits beside a row's name, `medium` is as wide as its column. */
|
|
8
|
+
size?: MeterSize;
|
|
9
|
+
/** From here on the fill is the fault colour. */
|
|
10
|
+
threshold?: number;
|
|
11
|
+
/** Slim and grey, for a footer line or a dense list. Inside a button it takes the accent when the button is reached. */
|
|
12
|
+
quiet?: boolean;
|
|
13
|
+
/** The level in words, such as "120 GB free of 4 TB": read out, and shown in the bubble. */
|
|
14
|
+
valueText?: string;
|
|
15
|
+
};
|
|
16
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
17
|
+
size: MeterSize;
|
|
18
|
+
value: number | null;
|
|
19
|
+
threshold: number;
|
|
20
|
+
quiet: boolean;
|
|
21
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type __VLS_ModelProps = {
|
|
2
|
+
modelValue?: number | null;
|
|
3
|
+
};
|
|
4
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
5
|
+
"update:modelValue": (value: number | null) => any;
|
|
6
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
|
|
7
|
+
"onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
|
|
8
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** The eye's name and bubble while the secret is hidden, and once it shows. */
|
|
3
|
+
text?: {
|
|
4
|
+
show: string;
|
|
5
|
+
hide: string;
|
|
6
|
+
};
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_ModelProps = {
|
|
10
|
+
modelValue?: string;
|
|
11
|
+
};
|
|
12
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
13
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
14
|
+
"update:modelValue": (value: string) => any;
|
|
15
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
16
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
17
|
+
}>, {
|
|
18
|
+
disabled: boolean;
|
|
19
|
+
text: {
|
|
20
|
+
show: string;
|
|
21
|
+
hide: string;
|
|
22
|
+
};
|
|
23
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type PillTone } from "@glimstone/core";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
/** `state` lifts a word that says what the row is doing; the other three
|
|
4
|
+
* wash the pill in their state colour. */
|
|
5
|
+
tone?: PillTone;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_template: () => {
|
|
8
|
+
__VLS_Slots: {
|
|
9
|
+
default?: (props: {}) => any;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
14
|
+
tone: PillTone;
|
|
15
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
16
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
17
|
+
declare const _default: typeof __VLS_export;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
20
|
+
new (): {
|
|
21
|
+
$slots: S;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** From 0 to 1. Without it the bar runs indeterminate, while the work has no measure yet. */
|
|
3
|
+
value?: number | null;
|
|
4
|
+
/** The accessible name, such as what is being copied. */
|
|
5
|
+
label: string;
|
|
6
|
+
/** The work waits: the fill takes the waiting tone and the sheen stops. */
|
|
7
|
+
paused?: boolean;
|
|
8
|
+
/** The work stopped on an error: the fill takes the fault colour. */
|
|
9
|
+
failed?: boolean;
|
|
10
|
+
/** The progress in words, such as "1.2 GB of 4 GB", read out instead of the percentage. */
|
|
11
|
+
valueText?: string;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
14
|
+
value: number | null;
|
|
15
|
+
failed: boolean;
|
|
16
|
+
paused: boolean;
|
|
17
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
declare const _default: typeof __VLS_export;
|
|
19
|
+
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ReadmeBrand, type ReadmePart } from "@glimstone/core";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
brand: ReadmeBrand;
|
|
4
|
+
/** The button, then its segments. */
|
|
5
|
+
parts: [ReadmePart, ...ReadmePart[]];
|
|
6
|
+
/** The class that paints the mark at rest, such as `glim-windows-mark`. */
|
|
7
|
+
markClass?: string;
|
|
8
|
+
/** The "(i)" at the end of the unit, for what the name cannot say. */
|
|
9
|
+
hint?: string;
|
|
10
|
+
/** Holds the second lines in view while one reports what it did, such as "Copied". */
|
|
11
|
+
note?: boolean;
|
|
12
|
+
/** The second line of a unit whose first part has neither `href` nor `onClick`. */
|
|
13
|
+
soonLabel?: string;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_Slots = {
|
|
16
|
+
mark?: () => unknown;
|
|
17
|
+
art?: () => unknown;
|
|
18
|
+
};
|
|
19
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
linkClick: (e: MouseEvent) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
22
|
+
onLinkClick?: ((e: MouseEvent) => any) | undefined;
|
|
23
|
+
}>, {
|
|
24
|
+
note: boolean;
|
|
25
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
package/dist/Select.js
ADDED
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
import { a as e, n as t } from "./glyphs-Cgknt-k1.js";
|
|
2
|
+
import { n, r, t as i } from "./TipWrap-rNAEgvb0.js";
|
|
3
|
+
import { Fragment as a, Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as y, onScopeDispose as b, openBlock as x, renderList as S, resolveDynamicComponent as C, shallowRef as w, toDisplayString as T, unref as E, useId as D, useModel as O, watch as k, withCtx as A } from "vue";
|
|
4
|
+
import { SELECT_POSITIONING as j, closeOnPageMove as M, defaultWidth as N, enableWheelStep as P, faceLabels as F, flattenRuns as I, hasSubmenu as L, homeRow as R, isSubmenu as z, pageDir as B, readPortalHue as V, selectContentClass as H, selectRootClass as U, selectTriggerClass as W, shake as G, wheelValue as K } from "@glimstone/core";
|
|
5
|
+
import * as q from "@zag-js/select";
|
|
6
|
+
import { normalizeProps as J, useMachine as Y } from "@zag-js/vue";
|
|
7
|
+
import * as X from "@zag-js/menu";
|
|
8
|
+
// src/SelectFace.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
+
var ee = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "glim-select-glyph"
|
|
12
|
+
}, te = { class: "glim-select-value" }, ne = ["aria-hidden"], Z = /* @__PURE__ */ p({
|
|
13
|
+
__name: "SelectFace",
|
|
14
|
+
props: {
|
|
15
|
+
all: {},
|
|
16
|
+
value: {},
|
|
17
|
+
placeholder: {},
|
|
18
|
+
width: {},
|
|
19
|
+
glyphs: { type: Boolean }
|
|
20
|
+
},
|
|
21
|
+
setup(e) {
|
|
22
|
+
let t = e, n = s(() => F(t.all, t.value, t.placeholder, t.width)), r = s(() => t.all.find((e) => e.value === t.value)?.glyph);
|
|
23
|
+
return (t, i) => (x(), u(a, null, [e.glyphs ? (x(), u("span", ee, [r.value ? (x(), c(C(r.value), { key: 0 })) : l("", !0)])) : l("", !0), d("span", te, [(x(!0), u(a, null, S(n.value.labels, (e) => (x(), u("span", {
|
|
24
|
+
key: e,
|
|
25
|
+
"aria-hidden": e !== n.value.text || void 0,
|
|
26
|
+
class: _(e === n.value.text ? void 0 : "glim-select-ghost")
|
|
27
|
+
}, T(e), 11, ne))), 128))])], 64));
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
// src/selectParts.ts
|
|
31
|
+
function Q(e, t) {
|
|
32
|
+
let n = w(null);
|
|
33
|
+
return k(e, (e) => n.value = e && t.value ? V(t.value) : null, { flush: "sync" }), {
|
|
34
|
+
style: s(() => n.value ?? void 0),
|
|
35
|
+
className: s(() => n.value ? "glim-hue" : "")
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function $(e, t) {
|
|
39
|
+
let n;
|
|
40
|
+
k(e, (e) => {
|
|
41
|
+
n?.(), n = e ? P(e, (e) => {
|
|
42
|
+
if (t.inert()) return;
|
|
43
|
+
let n = K(t.all(), t.value(), e);
|
|
44
|
+
n !== void 0 && t.onChange(n);
|
|
45
|
+
}) : void 0;
|
|
46
|
+
}, { immediate: !0 }), k(t.shakeCount, (t, n, r) => {
|
|
47
|
+
e.value && t > 0 && r(G(e.value));
|
|
48
|
+
}), b(() => n?.());
|
|
49
|
+
}
|
|
50
|
+
// src/ListSelect.vue?vue&type=script&setup=true&lang.ts
|
|
51
|
+
var re = ["aria-busy", "aria-describedby"], ie = {
|
|
52
|
+
key: 0,
|
|
53
|
+
class: "glim-select-glyph"
|
|
54
|
+
}, ae = /* @__PURE__ */ p({
|
|
55
|
+
__name: "ListSelect",
|
|
56
|
+
props: {
|
|
57
|
+
label: {},
|
|
58
|
+
hideLabel: { type: Boolean },
|
|
59
|
+
groups: {},
|
|
60
|
+
value: {},
|
|
61
|
+
placeholder: {},
|
|
62
|
+
width: {},
|
|
63
|
+
triggerClass: {},
|
|
64
|
+
id: {},
|
|
65
|
+
disabled: { type: Boolean },
|
|
66
|
+
busy: { type: Boolean },
|
|
67
|
+
tip: {},
|
|
68
|
+
shake: {}
|
|
69
|
+
},
|
|
70
|
+
emits: ["change"],
|
|
71
|
+
setup(p, { expose: h, emit: _ }) {
|
|
72
|
+
let y = p, b = _, O = D(), N = s(() => I(y.groups)), P = s(() => N.value.some((e) => e.glyph)), F = s(() => q.collection({
|
|
73
|
+
items: N.value,
|
|
74
|
+
itemToValue: (e) => e.value,
|
|
75
|
+
itemToString: (e) => e.label,
|
|
76
|
+
isItemDisabled: (e) => !!e.disabled
|
|
77
|
+
})), L = Y(q.machine, s(() => ({
|
|
78
|
+
id: O,
|
|
79
|
+
ids: y.id ? { trigger: y.id } : void 0,
|
|
80
|
+
dir: B(),
|
|
81
|
+
collection: F.value,
|
|
82
|
+
value: y.value === null ? [] : [y.value],
|
|
83
|
+
disabled: y.disabled,
|
|
84
|
+
readOnly: y.busy,
|
|
85
|
+
onValueChange: (e) => {
|
|
86
|
+
let t = e.value[0];
|
|
87
|
+
t !== void 0 && t !== y.value && b("change", t);
|
|
88
|
+
},
|
|
89
|
+
positioning: j
|
|
90
|
+
}))), R = s(() => q.connect(L, J)), z = w(null), V = r(() => y.tip, () => !!y.disabled);
|
|
91
|
+
$(z, {
|
|
92
|
+
all: () => N.value,
|
|
93
|
+
value: () => y.value,
|
|
94
|
+
inert: () => !!(y.disabled || y.busy),
|
|
95
|
+
onChange: (e) => b("change", e),
|
|
96
|
+
shakeCount: () => y.shake ?? 0
|
|
97
|
+
}), k(() => R.value.open, (e, t, n) => {
|
|
98
|
+
e && n(M(() => R.value.setOpen(!1)));
|
|
99
|
+
});
|
|
100
|
+
let W = Q(() => R.value.open, z);
|
|
101
|
+
function G(e) {
|
|
102
|
+
z.value = e, V.trigger.value = z.value;
|
|
103
|
+
}
|
|
104
|
+
return h({ trigger: z }), (r, s) => (x(), u("div", g(R.value.getRootProps(), { class: E(U)(p.width) }), [
|
|
105
|
+
d("label", g(R.value.getLabelProps(), { class: p.hideLabel ? "glim-sr-only" : "glim-field-label" }), T(p.label), 17),
|
|
106
|
+
d("div", v(m(R.value.getControlProps())), [f(E(i), {
|
|
107
|
+
on: !!p.disabled && !!p.tip,
|
|
108
|
+
show: E(V).show,
|
|
109
|
+
hide: E(V).hide
|
|
110
|
+
}, {
|
|
111
|
+
default: A(() => [d("button", g(R.value.getTriggerProps(), {
|
|
112
|
+
ref: G,
|
|
113
|
+
"aria-busy": p.busy || void 0,
|
|
114
|
+
"aria-describedby": E(V).describedBy.value,
|
|
115
|
+
class: p.triggerClass,
|
|
116
|
+
onMouseenter: s[0] ||= (...e) => E(V).show && E(V).show(...e),
|
|
117
|
+
onMouseleave: s[1] ||= (...e) => E(V).hide && E(V).hide(...e),
|
|
118
|
+
onFocus: s[2] ||= (...e) => E(V).showOnFocus && E(V).showOnFocus(...e),
|
|
119
|
+
onBlur: s[3] ||= (...e) => E(V).hide && E(V).hide(...e)
|
|
120
|
+
}), [f(Z, {
|
|
121
|
+
all: N.value,
|
|
122
|
+
value: p.value,
|
|
123
|
+
placeholder: p.placeholder,
|
|
124
|
+
width: p.width,
|
|
125
|
+
glyphs: P.value
|
|
126
|
+
}, null, 8, [
|
|
127
|
+
"all",
|
|
128
|
+
"value",
|
|
129
|
+
"placeholder",
|
|
130
|
+
"width",
|
|
131
|
+
"glyphs"
|
|
132
|
+
]), d("span", g(R.value.getIndicatorProps(), { class: "glim-select-indicator" }), [f(E(e))], 16)], 16, re)]),
|
|
133
|
+
_: 1
|
|
134
|
+
}, 8, [
|
|
135
|
+
"on",
|
|
136
|
+
"show",
|
|
137
|
+
"hide"
|
|
138
|
+
])], 16),
|
|
139
|
+
f(n, { state: E(V) }, null, 8, ["state"]),
|
|
140
|
+
(x(), c(o, { to: "body" }, [d("div", g(R.value.getPositionerProps(), {
|
|
141
|
+
style: E(W).style.value,
|
|
142
|
+
class: ["glim-select-positioner", E(W).className.value]
|
|
143
|
+
}), [d("div", g(R.value.getContentProps(), { class: E(H)(P.value) }), [(x(!0), u(a, null, S(p.groups, (e, n) => (x(), u(a, { key: n }, [e.entries.length > 0 ? (x(), u("div", g({
|
|
144
|
+
key: 0,
|
|
145
|
+
ref_for: !0
|
|
146
|
+
}, e.heading ? R.value.getItemGroupProps({ id: `${E(O)}-g${n}` }) : {}, { class: "glim-select-group" }), [e.heading ? (x(), u("div", g({
|
|
147
|
+
key: 0,
|
|
148
|
+
ref_for: !0
|
|
149
|
+
}, R.value.getItemGroupLabelProps({ htmlFor: `${E(O)}-g${n}` }), { class: "glim-select-heading" }), T(e.heading), 17)) : l("", !0), (x(!0), u(a, null, S(e.entries, (e) => (x(), u("div", g({ key: e.value }, { ref_for: !0 }, R.value.getItemProps({ item: e }), { class: "glim-select-item" }), [
|
|
150
|
+
P.value ? (x(), u("span", ie, [e.glyph ? (x(), c(C(e.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
|
|
151
|
+
d("span", g({ ref_for: !0 }, R.value.getItemTextProps({ item: e }), { class: "glim-select-label" }), T(e.label), 17),
|
|
152
|
+
d("span", g({ ref_for: !0 }, R.value.getItemIndicatorProps({ item: e }), { class: "glim-select-check" }), [f(E(t))], 16)
|
|
153
|
+
], 16))), 128))], 16)) : l("", !0)], 64))), 128))], 16)], 16)])),
|
|
154
|
+
d("select", v(m(R.value.getHiddenSelectProps())), null, 16)
|
|
155
|
+
], 16));
|
|
156
|
+
}
|
|
157
|
+
}), oe = {
|
|
158
|
+
key: 0,
|
|
159
|
+
class: "glim-select-glyph"
|
|
160
|
+
}, se = ["data-state"], ce = /* @__PURE__ */ p({
|
|
161
|
+
__name: "MenuChoice",
|
|
162
|
+
props: {
|
|
163
|
+
api: {},
|
|
164
|
+
option: {},
|
|
165
|
+
value: {},
|
|
166
|
+
glyphs: { type: Boolean }
|
|
167
|
+
},
|
|
168
|
+
emits: ["change"],
|
|
169
|
+
setup(e, { emit: n }) {
|
|
170
|
+
let r = e, i = n, a = s(() => r.option.value === r.value), o = s(() => ({
|
|
171
|
+
type: "radio",
|
|
172
|
+
value: r.option.value,
|
|
173
|
+
valueText: r.option.label,
|
|
174
|
+
checked: a.value,
|
|
175
|
+
disabled: r.option.disabled,
|
|
176
|
+
onCheckedChange: () => {
|
|
177
|
+
a.value || i("change", r.option.value);
|
|
178
|
+
}
|
|
179
|
+
}));
|
|
180
|
+
return (n, r) => (x(), u("div", g(e.api.getOptionItemProps(o.value), { class: "glim-select-item" }), [
|
|
181
|
+
e.glyphs ? (x(), u("span", oe, [e.option.glyph ? (x(), c(C(e.option.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
|
|
182
|
+
d("span", g(e.api.getItemTextProps(o.value), { class: "glim-select-label" }), T(e.option.label), 17),
|
|
183
|
+
d("span", {
|
|
184
|
+
"aria-hidden": "true",
|
|
185
|
+
"data-state": a.value ? "checked" : "unchecked",
|
|
186
|
+
class: "glim-select-check"
|
|
187
|
+
}, [f(E(t))], 8, se)
|
|
188
|
+
], 16));
|
|
189
|
+
}
|
|
190
|
+
}), le = {
|
|
191
|
+
key: 0,
|
|
192
|
+
class: "glim-select-glyph"
|
|
193
|
+
}, ue = { class: "glim-select-label" }, de = {
|
|
194
|
+
"aria-hidden": "true",
|
|
195
|
+
class: "glim-select-caret"
|
|
196
|
+
}, fe = /* @__PURE__ */ p({
|
|
197
|
+
__name: "MenuSubmenu",
|
|
198
|
+
props: {
|
|
199
|
+
parent: {},
|
|
200
|
+
parentApi: {},
|
|
201
|
+
triggerId: {},
|
|
202
|
+
entry: {},
|
|
203
|
+
value: {},
|
|
204
|
+
glyphs: { type: Boolean },
|
|
205
|
+
hueStyle: {},
|
|
206
|
+
hueClass: {}
|
|
207
|
+
},
|
|
208
|
+
emits: ["change"],
|
|
209
|
+
setup(t, { emit: n }) {
|
|
210
|
+
let r = t, i = n, p = Y(X.machine, {
|
|
211
|
+
id: D(),
|
|
212
|
+
ids: { trigger: r.triggerId },
|
|
213
|
+
dir: B(),
|
|
214
|
+
"aria-label": r.entry.label
|
|
215
|
+
}), m = s(() => X.connect(p, J));
|
|
216
|
+
return y(() => {
|
|
217
|
+
r.parentApi.setChild(p), m.value.setParent(r.parent);
|
|
218
|
+
}), (n, r) => (x(), u(a, null, [d("div", g(t.parentApi.getTriggerItemProps(m.value), { class: "glim-select-item" }), [
|
|
219
|
+
t.glyphs ? (x(), u("span", le, [t.entry.glyph ? (x(), c(C(t.entry.glyph), { key: 0 })) : l("", !0)])) : l("", !0),
|
|
220
|
+
d("span", ue, T(t.entry.label), 1),
|
|
221
|
+
d("span", de, [f(E(e))])
|
|
222
|
+
], 16), (x(), c(o, { to: "body" }, [d("div", g(m.value.getPositionerProps(), {
|
|
223
|
+
style: t.hueStyle,
|
|
224
|
+
class: ["glim-select-positioner", t.hueClass]
|
|
225
|
+
}), [d("div", g(m.value.getContentProps(), { class: E(H)(t.glyphs) }), [(x(!0), u(a, null, S(t.entry.options, (e) => (x(), c(ce, {
|
|
226
|
+
key: e.value,
|
|
227
|
+
api: m.value,
|
|
228
|
+
option: e,
|
|
229
|
+
value: t.value,
|
|
230
|
+
glyphs: t.glyphs,
|
|
231
|
+
onChange: r[0] ||= (e) => i("change", e)
|
|
232
|
+
}, null, 8, [
|
|
233
|
+
"api",
|
|
234
|
+
"option",
|
|
235
|
+
"value",
|
|
236
|
+
"glyphs"
|
|
237
|
+
]))), 128))], 16)], 16)]))], 64));
|
|
238
|
+
}
|
|
239
|
+
}), pe = {
|
|
240
|
+
key: 0,
|
|
241
|
+
"aria-hidden": "true",
|
|
242
|
+
class: "glim-field-label"
|
|
243
|
+
}, me = [
|
|
244
|
+
"disabled",
|
|
245
|
+
"data-disabled",
|
|
246
|
+
"data-readonly",
|
|
247
|
+
"aria-busy",
|
|
248
|
+
"aria-label",
|
|
249
|
+
"aria-describedby"
|
|
250
|
+
], he = /* @__PURE__ */ p({
|
|
251
|
+
__name: "MenuSelect",
|
|
252
|
+
props: {
|
|
253
|
+
label: {},
|
|
254
|
+
hideLabel: { type: Boolean },
|
|
255
|
+
groups: {},
|
|
256
|
+
value: {},
|
|
257
|
+
placeholder: {},
|
|
258
|
+
width: {},
|
|
259
|
+
triggerClass: {},
|
|
260
|
+
id: {},
|
|
261
|
+
disabled: { type: Boolean },
|
|
262
|
+
busy: { type: Boolean },
|
|
263
|
+
tip: {},
|
|
264
|
+
shake: {}
|
|
265
|
+
},
|
|
266
|
+
emits: ["change"],
|
|
267
|
+
setup(t, { expose: p, emit: m }) {
|
|
268
|
+
let h = t, v = m, y = D(), b = Y(X.machine, s(() => ({
|
|
269
|
+
id: y,
|
|
270
|
+
ids: h.id ? { trigger: h.id } : void 0,
|
|
271
|
+
dir: B(),
|
|
272
|
+
"aria-label": h.label,
|
|
273
|
+
positioning: j
|
|
274
|
+
}))), C = s(() => X.connect(b, J)), O = s(() => I(h.groups)), N = s(() => O.value.some((e) => e.glyph)), P = s(() => F(O.value, h.value, h.placeholder, h.width).text), L = (e, t) => `${y}-sub-${e}-${t}`, V = w(null), W = r(() => h.tip, () => !!h.disabled);
|
|
275
|
+
$(V, {
|
|
276
|
+
all: () => O.value,
|
|
277
|
+
value: () => h.value,
|
|
278
|
+
inert: () => !!(h.disabled || h.busy),
|
|
279
|
+
onChange: (e) => v("change", e),
|
|
280
|
+
shakeCount: () => h.shake ?? 0
|
|
281
|
+
});
|
|
282
|
+
let G = Q(() => C.value.open, V);
|
|
283
|
+
k(() => C.value.open, (e, t, n) => {
|
|
284
|
+
if (!e) return;
|
|
285
|
+
n(M(() => C.value.setOpen(!1)));
|
|
286
|
+
let r = R(h.groups, h.value, L);
|
|
287
|
+
if (r === null) return;
|
|
288
|
+
let i = 0, a = requestAnimationFrame(() => {
|
|
289
|
+
i = requestAnimationFrame(() => C.value.setHighlightedValue(r));
|
|
290
|
+
});
|
|
291
|
+
n(() => {
|
|
292
|
+
cancelAnimationFrame(a), cancelAnimationFrame(i);
|
|
293
|
+
});
|
|
294
|
+
});
|
|
295
|
+
let K = s(() => {
|
|
296
|
+
let e = C.value.getTriggerProps(), t = (t) => (n) => {
|
|
297
|
+
h.busy ? n.preventDefault() : e[t]?.(n);
|
|
298
|
+
};
|
|
299
|
+
return {
|
|
300
|
+
...e,
|
|
301
|
+
onPointerdown: t("onPointerdown"),
|
|
302
|
+
onClick: t("onClick"),
|
|
303
|
+
onKeydown: t("onKeydown")
|
|
304
|
+
};
|
|
305
|
+
});
|
|
306
|
+
function q(e) {
|
|
307
|
+
V.value = e, W.trigger.value = V.value;
|
|
308
|
+
}
|
|
309
|
+
return p({ trigger: V }), (r, s) => (x(), u("div", { class: _(E(U)(t.width)) }, [
|
|
310
|
+
t.hideLabel ? l("", !0) : (x(), u("span", pe, T(t.label), 1)),
|
|
311
|
+
d("div", null, [f(E(i), {
|
|
312
|
+
on: !!t.disabled && !!t.tip,
|
|
313
|
+
show: E(W).show,
|
|
314
|
+
hide: E(W).hide
|
|
315
|
+
}, {
|
|
316
|
+
default: A(() => [d("button", g(K.value, {
|
|
317
|
+
ref: q,
|
|
318
|
+
disabled: t.disabled,
|
|
319
|
+
"data-disabled": t.disabled ? "" : void 0,
|
|
320
|
+
"data-readonly": t.busy ? "" : void 0,
|
|
321
|
+
"aria-busy": t.busy || void 0,
|
|
322
|
+
"aria-label": `${t.label}: ${P.value}`,
|
|
323
|
+
"aria-describedby": E(W).describedBy.value,
|
|
324
|
+
class: t.triggerClass,
|
|
325
|
+
onMouseenter: s[0] ||= (...e) => E(W).show && E(W).show(...e),
|
|
326
|
+
onMouseleave: s[1] ||= (...e) => E(W).hide && E(W).hide(...e),
|
|
327
|
+
onFocus: s[2] ||= (...e) => E(W).showOnFocus && E(W).showOnFocus(...e),
|
|
328
|
+
onBlur: s[3] ||= (...e) => E(W).hide && E(W).hide(...e)
|
|
329
|
+
}), [f(Z, {
|
|
330
|
+
all: O.value,
|
|
331
|
+
value: t.value,
|
|
332
|
+
placeholder: t.placeholder,
|
|
333
|
+
width: t.width,
|
|
334
|
+
glyphs: N.value
|
|
335
|
+
}, null, 8, [
|
|
336
|
+
"all",
|
|
337
|
+
"value",
|
|
338
|
+
"placeholder",
|
|
339
|
+
"width",
|
|
340
|
+
"glyphs"
|
|
341
|
+
]), d("span", g(C.value.getIndicatorProps(), { class: "glim-select-indicator" }), [f(E(e))], 16)], 16, me)]),
|
|
342
|
+
_: 1
|
|
343
|
+
}, 8, [
|
|
344
|
+
"on",
|
|
345
|
+
"show",
|
|
346
|
+
"hide"
|
|
347
|
+
])]),
|
|
348
|
+
f(n, { state: E(W) }, null, 8, ["state"]),
|
|
349
|
+
(x(), c(o, { to: "body" }, [d("div", g(C.value.getPositionerProps(), {
|
|
350
|
+
style: E(G).style.value,
|
|
351
|
+
class: ["glim-select-positioner", E(G).className.value]
|
|
352
|
+
}), [d("div", g(C.value.getContentProps(), { class: E(H)(N.value) }), [(x(!0), u(a, null, S(t.groups, (e, n) => (x(), u(a, { key: n }, [e.entries.length > 0 ? (x(), u("div", g({
|
|
353
|
+
key: 0,
|
|
354
|
+
ref_for: !0
|
|
355
|
+
}, e.heading ? C.value.getItemGroupProps({ id: `g${n}` }) : {}, { class: "glim-select-group" }), [e.heading ? (x(), u("div", g({
|
|
356
|
+
key: 0,
|
|
357
|
+
ref_for: !0
|
|
358
|
+
}, C.value.getItemGroupLabelProps({ htmlFor: `g${n}` }), { class: "glim-select-heading" }), T(e.heading), 17)) : l("", !0), (x(!0), u(a, null, S(e.entries, (e, r) => (x(), u(a, { key: E(z)(e) ? `s${r}` : e.value }, [E(z)(e) ? (x(), c(fe, {
|
|
359
|
+
key: 0,
|
|
360
|
+
parent: E(b),
|
|
361
|
+
"parent-api": C.value,
|
|
362
|
+
"trigger-id": L(n, r),
|
|
363
|
+
entry: e,
|
|
364
|
+
value: t.value,
|
|
365
|
+
glyphs: N.value,
|
|
366
|
+
"hue-style": E(G).style.value,
|
|
367
|
+
"hue-class": E(G).className.value,
|
|
368
|
+
onChange: s[4] ||= (e) => v("change", e)
|
|
369
|
+
}, null, 8, [
|
|
370
|
+
"parent",
|
|
371
|
+
"parent-api",
|
|
372
|
+
"trigger-id",
|
|
373
|
+
"entry",
|
|
374
|
+
"value",
|
|
375
|
+
"glyphs",
|
|
376
|
+
"hue-style",
|
|
377
|
+
"hue-class"
|
|
378
|
+
])) : (x(), c(ce, {
|
|
379
|
+
key: 1,
|
|
380
|
+
api: C.value,
|
|
381
|
+
option: e,
|
|
382
|
+
value: t.value,
|
|
383
|
+
glyphs: N.value,
|
|
384
|
+
onChange: s[5] ||= (e) => v("change", e)
|
|
385
|
+
}, null, 8, [
|
|
386
|
+
"api",
|
|
387
|
+
"option",
|
|
388
|
+
"value",
|
|
389
|
+
"glyphs"
|
|
390
|
+
]))], 64))), 128))], 16)) : l("", !0)], 64))), 128))], 16)], 16)]))
|
|
391
|
+
], 2));
|
|
392
|
+
}
|
|
393
|
+
}), ge = /* @__PURE__ */ p({
|
|
394
|
+
__name: "Select",
|
|
395
|
+
props: /*@__PURE__*/ h({
|
|
396
|
+
label: {},
|
|
397
|
+
hideLabel: {
|
|
398
|
+
type: Boolean,
|
|
399
|
+
default: !1
|
|
400
|
+
},
|
|
401
|
+
options: {},
|
|
402
|
+
groups: {},
|
|
403
|
+
placeholder: {},
|
|
404
|
+
width: {},
|
|
405
|
+
size: { default: "field" },
|
|
406
|
+
wrap: {
|
|
407
|
+
type: Boolean,
|
|
408
|
+
default: !1
|
|
409
|
+
},
|
|
410
|
+
id: {},
|
|
411
|
+
disabled: {
|
|
412
|
+
type: Boolean,
|
|
413
|
+
default: !1
|
|
414
|
+
},
|
|
415
|
+
busy: {
|
|
416
|
+
type: Boolean,
|
|
417
|
+
default: !1
|
|
418
|
+
},
|
|
419
|
+
tip: {},
|
|
420
|
+
shake: {}
|
|
421
|
+
}, {
|
|
422
|
+
modelValue: { required: !0 },
|
|
423
|
+
modelModifiers: {}
|
|
424
|
+
}),
|
|
425
|
+
emits: ["update:modelValue"],
|
|
426
|
+
setup(e) {
|
|
427
|
+
let t = e, n = O(e, "modelValue"), r = s(() => t.groups ?? [{ entries: t.options ?? [] }]), i = s(() => ({
|
|
428
|
+
label: t.label,
|
|
429
|
+
hideLabel: t.hideLabel,
|
|
430
|
+
groups: r.value,
|
|
431
|
+
value: n.value,
|
|
432
|
+
placeholder: t.placeholder,
|
|
433
|
+
width: t.width ?? N(t.size),
|
|
434
|
+
triggerClass: W(t.size, t.wrap),
|
|
435
|
+
id: t.id,
|
|
436
|
+
disabled: t.disabled,
|
|
437
|
+
busy: t.busy,
|
|
438
|
+
tip: t.tip,
|
|
439
|
+
shake: t.shake
|
|
440
|
+
}));
|
|
441
|
+
return (e, t) => E(L)(r.value) ? (x(), c(he, g({ key: 0 }, i.value, { onChange: t[0] ||= (e) => n.value = e }), null, 16)) : (x(), c(ae, g({ key: 1 }, i.value, { onChange: t[1] ||= (e) => n.value = e }), null, 16));
|
|
442
|
+
}
|
|
443
|
+
});
|
|
444
|
+
export { ge as Select };
|