iryx-ui 0.0.1 → 0.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 +161 -2
- package/dist/component-names.d.ts +1 -1
- package/dist/component-names.js +13 -1
- package/dist/components/App.js +5 -0
- package/dist/components/App.vue.d.ts +36 -0
- package/dist/components/App.vue_vue_type_script_setup_true_lang.js +51 -0
- package/dist/components/Button.vue.d.ts +1 -0
- package/dist/components/Button.vue_vue_type_script_setup_true_lang.js +8 -5
- package/dist/components/Checkbox.js +5 -0
- package/dist/components/Checkbox.vue.d.ts +46 -0
- package/dist/components/Checkbox.vue_vue_type_script_setup_true_lang.js +79 -0
- package/dist/components/Form.js +5 -0
- package/dist/components/Form.vue.d.ts +54 -0
- package/dist/components/Form.vue_vue_type_script_setup_true_lang.js +79 -0
- package/dist/components/FormField.js +5 -0
- package/dist/components/FormField.vue.d.ts +46 -0
- package/dist/components/FormField.vue_vue_type_script_setup_true_lang.js +93 -0
- package/dist/components/Input.js +5 -0
- package/dist/components/Input.vue.d.ts +29 -0
- package/dist/components/Input.vue_vue_type_script_setup_true_lang.js +57 -0
- package/dist/components/Label.js +5 -0
- package/dist/components/Label.vue.d.ts +23 -0
- package/dist/components/Label.vue_vue_type_script_setup_true_lang.js +41 -0
- package/dist/components/RadioGroup.js +5 -0
- package/dist/components/RadioGroup.vue.d.ts +41 -0
- package/dist/components/RadioGroup.vue_vue_type_script_setup_true_lang.js +72 -0
- package/dist/components/Select.js +5 -0
- package/dist/components/Select.vue.d.ts +42 -0
- package/dist/components/Select.vue_vue_type_script_setup_true_lang.js +84 -0
- package/dist/components/Switch.vue.d.ts +25 -2
- package/dist/components/Switch.vue_vue_type_script_setup_true_lang.js +45 -14
- package/dist/components/Textarea.js +5 -0
- package/dist/components/Textarea.vue.d.ts +28 -0
- package/dist/components/Textarea.vue_vue_type_script_setup_true_lang.js +57 -0
- package/dist/components/index.d.ts +9 -0
- package/dist/components/index.js +24 -6
- package/dist/composables/form.d.ts +67 -0
- package/dist/composables/form.js +20 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +24 -9
- package/dist/plugin.js +8 -8
- package/dist/theme/checkbox.d.ts +89 -0
- package/dist/theme/checkbox.js +37 -0
- package/dist/theme/form.d.ts +68 -0
- package/dist/theme/form.js +14 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/input.d.ts +60 -0
- package/dist/theme/input.js +27 -0
- package/dist/theme/label.d.ts +14 -0
- package/dist/theme/label.js +8 -0
- package/dist/theme/radio-group.d.ts +71 -0
- package/dist/theme/radio-group.js +30 -0
- package/dist/theme/select.d.ts +56 -0
- package/dist/theme/select.js +20 -0
- package/dist/theme/switch.d.ts +27 -0
- package/dist/theme/switch.js +5 -1
- package/package.json +8 -8
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { formFieldContextKey as t, getByPath as n, useForm as r } from "../composables/form.js";
|
|
3
|
+
import { formFieldTheme as i } from "../theme/form.js";
|
|
4
|
+
import a from "./Label.js";
|
|
5
|
+
import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, provide as m, renderSlot as h, toDisplayString as g, unref as _, watch as v, withCtx as y } from "vue";
|
|
6
|
+
import { useId as b } from "reka-ui";
|
|
7
|
+
//#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
+
var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__*/ d({
|
|
9
|
+
__name: "FormField",
|
|
10
|
+
props: {
|
|
11
|
+
name: {},
|
|
12
|
+
label: {},
|
|
13
|
+
description: {},
|
|
14
|
+
hint: {},
|
|
15
|
+
help: {},
|
|
16
|
+
required: { type: Boolean },
|
|
17
|
+
error: {},
|
|
18
|
+
unstyled: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: void 0
|
|
21
|
+
},
|
|
22
|
+
class: {},
|
|
23
|
+
ui: {}
|
|
24
|
+
},
|
|
25
|
+
setup(d) {
|
|
26
|
+
let T = d, E = r(), D = b(), O = o(() => T.error ?? E?.errorFor(T.name)), k = o(() => {
|
|
27
|
+
let e = [];
|
|
28
|
+
return T.description && e.push(`${D}-description`), O.value ? e.push(`${D}-error`) : T.help && e.push(`${D}-help`), e.length ? e.join(" ") : void 0;
|
|
29
|
+
});
|
|
30
|
+
v(() => T.name && E ? n(E.state.value, T.name) : void 0, () => {
|
|
31
|
+
if (!T.name || !E) return;
|
|
32
|
+
let e = E.validateOn.value;
|
|
33
|
+
(e.includes("change") || e.includes("input")) && E.validateField(T.name);
|
|
34
|
+
});
|
|
35
|
+
function A() {
|
|
36
|
+
!T.name || !E || E.validateOn.value.includes("blur") && E.validateField(T.name);
|
|
37
|
+
}
|
|
38
|
+
let j = e(), M = o(() => T.unstyled ?? j.unstyled), N = i();
|
|
39
|
+
function P(e, t) {
|
|
40
|
+
return M.value ? t : N[e]({ class: t });
|
|
41
|
+
}
|
|
42
|
+
return m(t, {
|
|
43
|
+
id: o(() => D),
|
|
44
|
+
name: o(() => T.name),
|
|
45
|
+
invalid: o(() => !!O.value),
|
|
46
|
+
describedBy: k
|
|
47
|
+
}), (e, t) => (p(), l("div", {
|
|
48
|
+
"data-iryx-field": T.name,
|
|
49
|
+
class: f(M.value ? T.class : _(N).root({ class: [T.ui?.root, T.class] })),
|
|
50
|
+
onFocusout: A
|
|
51
|
+
}, [
|
|
52
|
+
T.label || T.hint || e.$slots.hint ? (p(), l("div", {
|
|
53
|
+
key: 0,
|
|
54
|
+
class: f(P("header", T.ui?.header))
|
|
55
|
+
}, [T.label ? (p(), s(a, {
|
|
56
|
+
key: 0,
|
|
57
|
+
for: _(D),
|
|
58
|
+
required: T.required,
|
|
59
|
+
class: f(T.ui?.label)
|
|
60
|
+
}, {
|
|
61
|
+
default: y(() => [u(g(T.label), 1)]),
|
|
62
|
+
_: 1
|
|
63
|
+
}, 8, [
|
|
64
|
+
"for",
|
|
65
|
+
"required",
|
|
66
|
+
"class"
|
|
67
|
+
])) : c("", !0), T.hint || e.$slots.hint ? (p(), l("span", {
|
|
68
|
+
key: 1,
|
|
69
|
+
class: f(P("hint", T.ui?.hint))
|
|
70
|
+
}, [h(e.$slots, "hint", {}, () => [u(g(T.hint), 1)])], 2)) : c("", !0)], 2)) : c("", !0),
|
|
71
|
+
T.description ? (p(), l("p", {
|
|
72
|
+
key: 1,
|
|
73
|
+
id: `${_(D)}-description`,
|
|
74
|
+
class: f(P("description", T.ui?.description))
|
|
75
|
+
}, g(T.description), 11, S)) : c("", !0),
|
|
76
|
+
h(e.$slots, "default", {
|
|
77
|
+
id: _(D),
|
|
78
|
+
error: O.value
|
|
79
|
+
}),
|
|
80
|
+
O.value ? (p(), l("p", {
|
|
81
|
+
key: 2,
|
|
82
|
+
id: `${_(D)}-error`,
|
|
83
|
+
class: f(P("error", T.ui?.error))
|
|
84
|
+
}, g(O.value), 11, C)) : T.help ? (p(), l("p", {
|
|
85
|
+
key: 3,
|
|
86
|
+
id: `${_(D)}-help`,
|
|
87
|
+
class: f(P("help", T.ui?.help))
|
|
88
|
+
}, g(T.help), 11, w)) : c("", !0)
|
|
89
|
+
], 42, x));
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
//#endregion
|
|
93
|
+
export { T as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface InputProps {
|
|
2
|
+
type?: string;
|
|
3
|
+
size?: 'sm' | 'md' | 'lg';
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
required?: boolean;
|
|
7
|
+
/** Mark the field as invalid — styles the border and ring red. */
|
|
8
|
+
invalid?: boolean;
|
|
9
|
+
id?: string;
|
|
10
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
11
|
+
unstyled?: boolean;
|
|
12
|
+
class?: string;
|
|
13
|
+
}
|
|
14
|
+
type __VLS_Props = InputProps;
|
|
15
|
+
type __VLS_ModelProps = {
|
|
16
|
+
modelValue?: string | number | null;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
"update:modelValue": (value: string | number | null | undefined) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
|
|
23
|
+
}>, {
|
|
24
|
+
unstyled: boolean;
|
|
25
|
+
type: string;
|
|
26
|
+
invalid: boolean;
|
|
27
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const _default: typeof __VLS_export;
|
|
29
|
+
export default _default;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { useFormField as t } from "../composables/form.js";
|
|
3
|
+
import { inputTheme as n } from "../theme/input.js";
|
|
4
|
+
import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, unref as l, useModel as u, vModelDynamic as d, withDirectives as f } from "vue";
|
|
5
|
+
//#region src/components/Input.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var p = [
|
|
7
|
+
"id",
|
|
8
|
+
"type",
|
|
9
|
+
"placeholder",
|
|
10
|
+
"disabled",
|
|
11
|
+
"required",
|
|
12
|
+
"aria-invalid",
|
|
13
|
+
"aria-describedby"
|
|
14
|
+
], m = /*@__PURE__*/ a({
|
|
15
|
+
__name: "Input",
|
|
16
|
+
props: /*@__PURE__*/ o({
|
|
17
|
+
type: { default: "text" },
|
|
18
|
+
size: {},
|
|
19
|
+
placeholder: {},
|
|
20
|
+
disabled: { type: Boolean },
|
|
21
|
+
required: { type: Boolean },
|
|
22
|
+
invalid: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: void 0
|
|
25
|
+
},
|
|
26
|
+
id: {},
|
|
27
|
+
unstyled: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: void 0
|
|
30
|
+
},
|
|
31
|
+
class: {}
|
|
32
|
+
}, {
|
|
33
|
+
modelValue: {},
|
|
34
|
+
modelModifiers: {}
|
|
35
|
+
}),
|
|
36
|
+
emits: ["update:modelValue"],
|
|
37
|
+
setup(a) {
|
|
38
|
+
let o = a, m = u(a, "modelValue"), h = t(), g = r(() => o.id ?? h?.id.value), _ = r(() => o.invalid ?? h?.invalid.value ?? !1), v = e(), y = r(() => o.unstyled ?? v.unstyled), b = r(() => y.value ? o.class : n({
|
|
39
|
+
size: o.size,
|
|
40
|
+
invalid: _.value,
|
|
41
|
+
class: o.class
|
|
42
|
+
}));
|
|
43
|
+
return (e, t) => f((c(), i("input", {
|
|
44
|
+
id: g.value,
|
|
45
|
+
"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
|
|
46
|
+
type: o.type,
|
|
47
|
+
placeholder: o.placeholder,
|
|
48
|
+
disabled: o.disabled,
|
|
49
|
+
required: o.required,
|
|
50
|
+
"aria-invalid": _.value || void 0,
|
|
51
|
+
"aria-describedby": l(h)?.describedBy.value,
|
|
52
|
+
class: s(b.value)
|
|
53
|
+
}, null, 10, p)), [[d, m.value]]);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
//#endregion
|
|
57
|
+
export { m as default };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { LabelProps as RekaLabelProps } from 'reka-ui';
|
|
2
|
+
export interface LabelProps extends RekaLabelProps {
|
|
3
|
+
/** Append a red asterisk to mark the associated field as required. */
|
|
4
|
+
required?: boolean;
|
|
5
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
6
|
+
unstyled?: boolean;
|
|
7
|
+
class?: string;
|
|
8
|
+
}
|
|
9
|
+
declare var __VLS_8: {};
|
|
10
|
+
type __VLS_Slots = {} & {
|
|
11
|
+
default?: (props: typeof __VLS_8) => any;
|
|
12
|
+
};
|
|
13
|
+
declare const __VLS_base: import("vue").DefineComponent<LabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LabelProps> & Readonly<{}>, {
|
|
14
|
+
unstyled: boolean;
|
|
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,41 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { labelTheme as t } from "../theme/label.js";
|
|
3
|
+
import { computed as n, createBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
|
|
4
|
+
import { Label as u } from "reka-ui";
|
|
5
|
+
//#region src/components/Label.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var d = /*@__PURE__*/ i({
|
|
7
|
+
__name: "Label",
|
|
8
|
+
props: {
|
|
9
|
+
required: { type: Boolean },
|
|
10
|
+
unstyled: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: void 0
|
|
13
|
+
},
|
|
14
|
+
class: {},
|
|
15
|
+
for: {},
|
|
16
|
+
asChild: { type: Boolean },
|
|
17
|
+
as: {}
|
|
18
|
+
},
|
|
19
|
+
setup(i) {
|
|
20
|
+
let d = i, f = e(), p = n(() => d.unstyled ?? f.unstyled), m = n(() => p.value ? d.class : t({
|
|
21
|
+
required: d.required,
|
|
22
|
+
class: d.class
|
|
23
|
+
}));
|
|
24
|
+
return (e, t) => (o(), r(c(u), {
|
|
25
|
+
for: d.for,
|
|
26
|
+
as: d.as,
|
|
27
|
+
"as-child": d.asChild,
|
|
28
|
+
class: a(m.value)
|
|
29
|
+
}, {
|
|
30
|
+
default: l(() => [s(e.$slots, "default")]),
|
|
31
|
+
_: 3
|
|
32
|
+
}, 8, [
|
|
33
|
+
"for",
|
|
34
|
+
"as",
|
|
35
|
+
"as-child",
|
|
36
|
+
"class"
|
|
37
|
+
]));
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
//#endregion
|
|
41
|
+
export { d as default };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { RadioGroupRootProps } from 'reka-ui';
|
|
2
|
+
export interface RadioGroupItemOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
/** Secondary text under the label. */
|
|
6
|
+
description?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface RadioGroupProps extends RadioGroupRootProps {
|
|
10
|
+
/** Options to render. Strings are expanded to `{ label, value }`. */
|
|
11
|
+
items?: (RadioGroupItemOption | string)[];
|
|
12
|
+
size?: 'sm' | 'md' | 'lg';
|
|
13
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
14
|
+
unstyled?: boolean;
|
|
15
|
+
class?: string;
|
|
16
|
+
ui?: {
|
|
17
|
+
root?: string;
|
|
18
|
+
item?: string;
|
|
19
|
+
label?: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
declare var __VLS_8: {};
|
|
24
|
+
type __VLS_Slots = {} & {
|
|
25
|
+
default?: (props: typeof __VLS_8) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
28
|
+
"update:modelValue": (payload: import("reka-ui").AcceptableValue) => any;
|
|
29
|
+
}, string, import("vue").PublicProps, Readonly<RadioGroupProps> & Readonly<{
|
|
30
|
+
"onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
31
|
+
}>, {
|
|
32
|
+
unstyled: boolean;
|
|
33
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
34
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
35
|
+
declare const _default: typeof __VLS_export;
|
|
36
|
+
export default _default;
|
|
37
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
38
|
+
new (): {
|
|
39
|
+
$slots: S;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { radioGroupTheme as t } from "../theme/radio-group.js";
|
|
3
|
+
import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
|
|
4
|
+
import { Label as y, RadioGroupIndicator as b, RadioGroupItem as x, RadioGroupRoot as S, useForwardPropsEmits as C, useId as w } from "reka-ui";
|
|
5
|
+
//#region src/components/RadioGroup.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var T = ["id"], E = /*@__PURE__*/ u({
|
|
7
|
+
__name: "RadioGroup",
|
|
8
|
+
props: {
|
|
9
|
+
items: {},
|
|
10
|
+
size: {},
|
|
11
|
+
unstyled: {
|
|
12
|
+
type: Boolean,
|
|
13
|
+
default: void 0
|
|
14
|
+
},
|
|
15
|
+
class: {},
|
|
16
|
+
ui: {},
|
|
17
|
+
modelValue: {},
|
|
18
|
+
defaultValue: {},
|
|
19
|
+
disabled: { type: Boolean },
|
|
20
|
+
orientation: {},
|
|
21
|
+
dir: {},
|
|
22
|
+
loop: { type: Boolean },
|
|
23
|
+
asChild: { type: Boolean },
|
|
24
|
+
as: {},
|
|
25
|
+
name: {},
|
|
26
|
+
required: { type: Boolean }
|
|
27
|
+
},
|
|
28
|
+
emits: ["update:modelValue"],
|
|
29
|
+
setup(u, { emit: E }) {
|
|
30
|
+
let D = u, O = E, k = C(r(() => {
|
|
31
|
+
let { items: e, size: t, unstyled: n, class: r, ui: i, ...a } = D;
|
|
32
|
+
return a;
|
|
33
|
+
}), O), A = r(() => (D.items ?? []).map((e) => typeof e == "string" ? {
|
|
34
|
+
label: e,
|
|
35
|
+
value: e
|
|
36
|
+
} : e)), j = w(), M = e(), N = r(() => D.unstyled ?? M.unstyled), P = r(() => t({ size: D.size })), F = r(() => N.value ? [D.ui?.root, D.class] : P.value.root({ class: [D.ui?.root, D.class] })), I = r(() => N.value ? D.ui?.item : P.value.item({ class: D.ui?.item })), L = r(() => N.value ? D.ui?.label : P.value.label({ class: D.ui?.label })), R = r(() => N.value ? D.ui?.description : P.value.description({ class: D.ui?.description }));
|
|
37
|
+
return (e, t) => (p(), i(_(S), d(_(k), { class: F.value }), {
|
|
38
|
+
default: v(() => [h(e.$slots, "default", {}, () => [(p(!0), o(n, null, m(A.value, (e) => (p(), o("div", {
|
|
39
|
+
key: e.value,
|
|
40
|
+
class: f(N.value ? void 0 : P.value.wrapper())
|
|
41
|
+
}, [l(_(x), {
|
|
42
|
+
id: `${_(j)}-${e.value}`,
|
|
43
|
+
value: e.value,
|
|
44
|
+
disabled: e.disabled,
|
|
45
|
+
"aria-describedby": e.description ? `${_(j)}-${e.value}-description` : void 0,
|
|
46
|
+
class: f(I.value)
|
|
47
|
+
}, {
|
|
48
|
+
default: v(() => [l(_(b), { class: f(N.value ? void 0 : P.value.indicator()) }, null, 8, ["class"])]),
|
|
49
|
+
_: 1
|
|
50
|
+
}, 8, [
|
|
51
|
+
"id",
|
|
52
|
+
"value",
|
|
53
|
+
"disabled",
|
|
54
|
+
"aria-describedby",
|
|
55
|
+
"class"
|
|
56
|
+
]), s("div", { class: f(N.value ? void 0 : P.value.content()) }, [l(_(y), {
|
|
57
|
+
for: `${_(j)}-${e.value}`,
|
|
58
|
+
class: f(L.value)
|
|
59
|
+
}, {
|
|
60
|
+
default: v(() => [c(g(e.label), 1)]),
|
|
61
|
+
_: 2
|
|
62
|
+
}, 1032, ["for", "class"]), e.description ? (p(), o("p", {
|
|
63
|
+
key: 0,
|
|
64
|
+
id: `${_(j)}-${e.value}-description`,
|
|
65
|
+
class: f(R.value)
|
|
66
|
+
}, g(e.description), 11, T)) : a("", !0)], 2)], 2))), 128))])]),
|
|
67
|
+
_: 3
|
|
68
|
+
}, 16, ["class"]));
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
//#endregion
|
|
72
|
+
export { E as default };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { SelectRootProps } from 'reka-ui';
|
|
2
|
+
export interface SelectItemOption {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface SelectProps extends SelectRootProps {
|
|
8
|
+
/** Options to render. Strings are expanded to `{ label, value }`. */
|
|
9
|
+
items?: (SelectItemOption | string)[];
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
size?: 'sm' | 'md' | 'lg';
|
|
12
|
+
/** Skip built-in classes; you take over styling entirely. */
|
|
13
|
+
unstyled?: boolean;
|
|
14
|
+
class?: string;
|
|
15
|
+
ui?: {
|
|
16
|
+
trigger?: string;
|
|
17
|
+
content?: string;
|
|
18
|
+
viewport?: string;
|
|
19
|
+
item?: string;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
declare var __VLS_48: {};
|
|
23
|
+
type __VLS_Slots = {} & {
|
|
24
|
+
default?: (props: typeof __VLS_48) => any;
|
|
25
|
+
};
|
|
26
|
+
declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
27
|
+
"update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
|
|
28
|
+
"update:open": (value: boolean) => any;
|
|
29
|
+
}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
|
|
30
|
+
"onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
|
|
31
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
32
|
+
}>, {
|
|
33
|
+
unstyled: boolean;
|
|
34
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
35
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
36
|
+
declare const _default: typeof __VLS_export;
|
|
37
|
+
export default _default;
|
|
38
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
39
|
+
new (): {
|
|
40
|
+
$slots: S;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { useIryxUiConfig as e } from "../config.js";
|
|
2
|
+
import { selectTheme as t } from "../theme/select.js";
|
|
3
|
+
import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, normalizeClass as u, normalizeProps as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
|
|
4
|
+
import { SelectContent as v, SelectIcon as y, SelectItem as b, SelectItemIndicator as x, SelectItemText as S, SelectPortal as C, SelectRoot as w, SelectTrigger as T, SelectValue as E, SelectViewport as D, useForwardPropsEmits as O } from "reka-ui";
|
|
5
|
+
import { Check as k, ChevronDown as A } from "lucide-vue-next";
|
|
6
|
+
//#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var j = /*@__PURE__*/ c({
|
|
8
|
+
__name: "Select",
|
|
9
|
+
props: {
|
|
10
|
+
items: {},
|
|
11
|
+
placeholder: {},
|
|
12
|
+
size: {},
|
|
13
|
+
unstyled: {
|
|
14
|
+
type: Boolean,
|
|
15
|
+
default: void 0
|
|
16
|
+
},
|
|
17
|
+
class: {},
|
|
18
|
+
ui: {},
|
|
19
|
+
open: { type: Boolean },
|
|
20
|
+
defaultOpen: { type: Boolean },
|
|
21
|
+
defaultValue: {},
|
|
22
|
+
modelValue: {},
|
|
23
|
+
by: {},
|
|
24
|
+
dir: {},
|
|
25
|
+
multiple: { type: Boolean },
|
|
26
|
+
autocomplete: {},
|
|
27
|
+
disabled: { type: Boolean },
|
|
28
|
+
name: {},
|
|
29
|
+
required: { type: Boolean }
|
|
30
|
+
},
|
|
31
|
+
emits: ["update:modelValue", "update:open"],
|
|
32
|
+
setup(c, { emit: j }) {
|
|
33
|
+
let M = c, N = j, P = O(r(() => {
|
|
34
|
+
let { items: e, placeholder: t, size: n, unstyled: r, class: i, ui: a, ...o } = M;
|
|
35
|
+
return o;
|
|
36
|
+
}), N), F = r(() => (M.items ?? []).map((e) => typeof e == "string" ? {
|
|
37
|
+
label: e,
|
|
38
|
+
value: e
|
|
39
|
+
} : e)), I = e(), L = r(() => M.unstyled ?? I.unstyled), R = r(() => t({ size: M.size })), z = r(() => L.value ? [M.ui?.trigger, M.class] : R.value.trigger({ class: [M.ui?.trigger, M.class] })), B = r(() => L.value ? M.ui?.content : R.value.content({ class: M.ui?.content })), V = r(() => L.value ? M.ui?.viewport : R.value.viewport({ class: M.ui?.viewport })), H = r(() => L.value ? M.ui?.item : R.value.item({ class: M.ui?.item })), U = r(() => L.value ? void 0 : R.value.itemIndicator());
|
|
40
|
+
return (e, t) => (f(), i(g(w), d(l(g(P))), {
|
|
41
|
+
default: _(() => [s(g(T), { class: u(z.value) }, {
|
|
42
|
+
default: _(() => [s(g(E), { placeholder: M.placeholder }, null, 8, ["placeholder"]), s(g(y), { "as-child": "" }, {
|
|
43
|
+
default: _(() => [s(g(A))]),
|
|
44
|
+
_: 1
|
|
45
|
+
})]),
|
|
46
|
+
_: 1
|
|
47
|
+
}, 8, ["class"]), s(g(C), null, {
|
|
48
|
+
default: _(() => [s(g(v), {
|
|
49
|
+
class: u(B.value),
|
|
50
|
+
position: "popper",
|
|
51
|
+
"side-offset": 4
|
|
52
|
+
}, {
|
|
53
|
+
default: _(() => [s(g(D), { class: u(V.value) }, {
|
|
54
|
+
default: _(() => [m(e.$slots, "default", {}, () => [(f(!0), a(n, null, p(F.value, (e) => (f(), i(g(b), {
|
|
55
|
+
key: e.value,
|
|
56
|
+
value: e.value,
|
|
57
|
+
disabled: e.disabled,
|
|
58
|
+
class: u(H.value)
|
|
59
|
+
}, {
|
|
60
|
+
default: _(() => [s(g(x), { class: u(U.value) }, {
|
|
61
|
+
default: _(() => [s(g(k))]),
|
|
62
|
+
_: 1
|
|
63
|
+
}, 8, ["class"]), s(g(S), null, {
|
|
64
|
+
default: _(() => [o(h(e.label), 1)]),
|
|
65
|
+
_: 2
|
|
66
|
+
}, 1024)]),
|
|
67
|
+
_: 2
|
|
68
|
+
}, 1032, [
|
|
69
|
+
"value",
|
|
70
|
+
"disabled",
|
|
71
|
+
"class"
|
|
72
|
+
]))), 128))])]),
|
|
73
|
+
_: 3
|
|
74
|
+
}, 8, ["class"])]),
|
|
75
|
+
_: 3
|
|
76
|
+
}, 8, ["class"])]),
|
|
77
|
+
_: 3
|
|
78
|
+
})]),
|
|
79
|
+
_: 3
|
|
80
|
+
}, 16));
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
//#endregion
|
|
84
|
+
export { j as default };
|
|
@@ -1,18 +1,41 @@
|
|
|
1
1
|
import type { SwitchRootProps } from 'reka-ui';
|
|
2
2
|
export interface SwitchProps extends SwitchRootProps {
|
|
3
|
+
/** Text shown beside the switch. Also makes the text clickable. */
|
|
4
|
+
label?: string;
|
|
5
|
+
/** Secondary text under the label, e.g. what the setting does. */
|
|
6
|
+
description?: string;
|
|
7
|
+
id?: string;
|
|
3
8
|
/** Skip built-in classes; you take over styling entirely. */
|
|
4
9
|
unstyled?: boolean;
|
|
5
10
|
class?: string;
|
|
6
11
|
/** Override classes per slot, e.g. `{ thumb: 'bg-black' }`. */
|
|
7
12
|
ui?: {
|
|
13
|
+
wrapper?: string;
|
|
8
14
|
root?: string;
|
|
9
15
|
thumb?: string;
|
|
16
|
+
content?: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
description?: string;
|
|
10
19
|
};
|
|
11
20
|
}
|
|
12
|
-
declare
|
|
21
|
+
declare var __VLS_18: {}, __VLS_20: {};
|
|
22
|
+
type __VLS_Slots = {} & {
|
|
23
|
+
label?: (props: typeof __VLS_18) => any;
|
|
24
|
+
} & {
|
|
25
|
+
description?: (props: typeof __VLS_20) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
13
28
|
"update:modelValue": (payload: boolean) => any;
|
|
14
29
|
}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
|
|
15
30
|
"onUpdate:modelValue"?: ((payload: boolean) => any) | undefined;
|
|
16
|
-
}>, {
|
|
31
|
+
}>, {
|
|
32
|
+
unstyled: boolean;
|
|
33
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
34
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
17
35
|
declare const _default: typeof __VLS_export;
|
|
18
36
|
export default _default;
|
|
37
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
38
|
+
new (): {
|
|
39
|
+
$slots: S;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import { useIryxUiConfig as e } from "../config.js";
|
|
2
2
|
import { switchTheme as t } from "../theme/switch.js";
|
|
3
|
-
import { computed as n, createBlock as r,
|
|
4
|
-
import { SwitchRoot as
|
|
3
|
+
import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
|
|
4
|
+
import { Label as _, SwitchRoot as v, SwitchThumb as y, useForwardPropsEmits as b, useId as x } from "reka-ui";
|
|
5
5
|
//#region src/components/Switch.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
-
var
|
|
6
|
+
var S = ["id"], C = /*@__PURE__*/ l({
|
|
7
7
|
__name: "Switch",
|
|
8
8
|
props: {
|
|
9
|
-
|
|
9
|
+
label: {},
|
|
10
|
+
description: {},
|
|
11
|
+
id: {},
|
|
12
|
+
unstyled: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: void 0
|
|
15
|
+
},
|
|
10
16
|
class: {},
|
|
11
17
|
ui: {},
|
|
12
18
|
defaultValue: {},
|
|
13
19
|
modelValue: {},
|
|
14
20
|
disabled: { type: Boolean },
|
|
15
|
-
id: {},
|
|
16
21
|
value: {},
|
|
17
22
|
trueValue: {},
|
|
18
23
|
falseValue: {},
|
|
@@ -22,16 +27,42 @@ var m = /*@__PURE__*/ a({
|
|
|
22
27
|
required: { type: Boolean }
|
|
23
28
|
},
|
|
24
29
|
emits: ["update:modelValue"],
|
|
25
|
-
setup(
|
|
26
|
-
let
|
|
27
|
-
let {
|
|
28
|
-
return
|
|
29
|
-
}),
|
|
30
|
-
return (e, t) =>
|
|
31
|
-
|
|
30
|
+
setup(l, { emit: C }) {
|
|
31
|
+
let w = l, T = C, E = b(n(() => {
|
|
32
|
+
let { label: e, description: t, id: n, unstyled: r, class: i, ui: a, ...o } = w;
|
|
33
|
+
return o;
|
|
34
|
+
}), T), D = x(), O = n(() => w.id ?? D), k = n(() => !!(w.label || w.description)), A = e(), j = n(() => w.unstyled ?? A.unstyled), M = t(), N = n(() => j.value ? w.ui?.wrapper : M.wrapper({ class: w.ui?.wrapper })), P = n(() => j.value ? [w.ui?.root, w.class] : M.root({ class: [w.ui?.root, w.class] })), F = n(() => j.value ? w.ui?.thumb : M.thumb({ class: w.ui?.thumb })), I = n(() => j.value ? w.ui?.content : M.content({ class: w.ui?.content })), L = n(() => j.value ? w.ui?.label : M.label({ class: w.ui?.label })), R = n(() => j.value ? w.ui?.description : M.description({ class: w.ui?.description }));
|
|
35
|
+
return (e, t) => k.value ? (f(), a("div", {
|
|
36
|
+
key: 0,
|
|
37
|
+
class: d(N.value)
|
|
38
|
+
}, [c(h(v), u({ id: O.value }, h(E), {
|
|
39
|
+
"aria-describedby": w.description ? `${O.value}-description` : void 0,
|
|
40
|
+
class: P.value
|
|
41
|
+
}), {
|
|
42
|
+
default: g(() => [c(h(y), { class: d(F.value) }, null, 8, ["class"])]),
|
|
43
|
+
_: 1
|
|
44
|
+
}, 16, [
|
|
45
|
+
"id",
|
|
46
|
+
"aria-describedby",
|
|
47
|
+
"class"
|
|
48
|
+
]), o("div", { class: d(I.value) }, [c(h(_), {
|
|
49
|
+
for: O.value,
|
|
50
|
+
class: d(L.value)
|
|
51
|
+
}, {
|
|
52
|
+
default: g(() => [p(e.$slots, "label", {}, () => [s(m(w.label), 1)])]),
|
|
53
|
+
_: 3
|
|
54
|
+
}, 8, ["for", "class"]), w.description || e.$slots.description ? (f(), a("p", {
|
|
55
|
+
key: 0,
|
|
56
|
+
id: `${O.value}-description`,
|
|
57
|
+
class: d(R.value)
|
|
58
|
+
}, [p(e.$slots, "description", {}, () => [s(m(w.description), 1)])], 10, S)) : i("", !0)], 2)], 2)) : (f(), r(h(v), u({
|
|
59
|
+
key: 1,
|
|
60
|
+
id: w.id
|
|
61
|
+
}, h(E), { class: P.value }), {
|
|
62
|
+
default: g(() => [c(h(y), { class: d(F.value) }, null, 8, ["class"])]),
|
|
32
63
|
_: 1
|
|
33
|
-
}, 16, ["class"]));
|
|
64
|
+
}, 16, ["id", "class"]));
|
|
34
65
|
}
|
|
35
66
|
});
|
|
36
67
|
//#endregion
|
|
37
|
-
export {
|
|
68
|
+
export { C as default };
|