iryx-ui 0.0.1 → 0.2.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 +16 -1
- package/dist/components/Alert.js +5 -0
- package/dist/components/Alert.vue.d.ts +59 -0
- package/dist/components/Alert.vue_vue_type_script_setup_true_lang.js +74 -0
- 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/Badge.js +5 -0
- package/dist/components/Badge.vue.d.ts +38 -0
- package/dist/components/Badge.vue_vue_type_script_setup_true_lang.js +48 -0
- package/dist/components/Button.vue.d.ts +1 -0
- package/dist/components/Button.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/components/Card.js +5 -0
- package/dist/components/Card.vue.d.ts +49 -0
- package/dist/components/Card.vue_vue_type_script_setup_true_lang.js +58 -0
- 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 +12 -0
- package/dist/components/index.js +30 -6
- package/dist/composables/form.d.ts +67 -0
- package/dist/composables/form.js +20 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +29 -8
- package/dist/plugin.js +5 -5
- package/dist/theme/alert.d.ts +98 -0
- package/dist/theme/alert.js +36 -0
- package/dist/theme/badge.d.ts +92 -0
- package/dist/theme/badge.js +94 -0
- package/dist/theme/card.d.ts +110 -0
- package/dist/theme/card.js +42 -0
- 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 +8 -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/presets.d.ts +20 -0
- package/dist/theme/presets.js +21 -1
- 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
- package/theme.css +66 -0
|
@@ -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 { Check as v, ChevronDown as y } from "lucide-vue-next";
|
|
5
|
+
import { SelectContent as b, SelectIcon as x, SelectItem as S, SelectItemIndicator as C, SelectItemText as w, SelectPortal as T, SelectRoot as E, SelectTrigger as D, SelectValue as O, SelectViewport as k, useForwardPropsEmits as A } from "reka-ui";
|
|
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 = A(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(E), d(l(g(P))), {
|
|
41
|
+
default: _(() => [s(g(D), { class: u(z.value) }, {
|
|
42
|
+
default: _(() => [s(g(O), { placeholder: M.placeholder }, null, 8, ["placeholder"]), s(g(x), { "as-child": "" }, {
|
|
43
|
+
default: _(() => [s(g(y))]),
|
|
44
|
+
_: 1
|
|
45
|
+
})]),
|
|
46
|
+
_: 1
|
|
47
|
+
}, 8, ["class"]), s(g(T), null, {
|
|
48
|
+
default: _(() => [s(g(b), {
|
|
49
|
+
class: u(B.value),
|
|
50
|
+
position: "popper",
|
|
51
|
+
"side-offset": 4
|
|
52
|
+
}, {
|
|
53
|
+
default: _(() => [s(g(k), { class: u(V.value) }, {
|
|
54
|
+
default: _(() => [m(e.$slots, "default", {}, () => [(f(!0), a(n, null, p(F.value, (e) => (f(), i(g(S), {
|
|
55
|
+
key: e.value,
|
|
56
|
+
value: e.value,
|
|
57
|
+
disabled: e.disabled,
|
|
58
|
+
class: u(H.value)
|
|
59
|
+
}, {
|
|
60
|
+
default: _(() => [s(g(C), { class: u(U.value) }, {
|
|
61
|
+
default: _(() => [s(g(v))]),
|
|
62
|
+
_: 1
|
|
63
|
+
}, 8, ["class"]), s(g(w), 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 };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface TextareaProps {
|
|
2
|
+
size?: 'sm' | 'md' | 'lg';
|
|
3
|
+
rows?: number;
|
|
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 = TextareaProps;
|
|
15
|
+
type __VLS_ModelProps = {
|
|
16
|
+
modelValue?: string | 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 | null | undefined) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
|
|
23
|
+
}>, {
|
|
24
|
+
unstyled: boolean;
|
|
25
|
+
invalid: boolean;
|
|
26
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
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 { textareaTheme 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, vModelText as d, withDirectives as f } from "vue";
|
|
5
|
+
//#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var p = [
|
|
7
|
+
"id",
|
|
8
|
+
"rows",
|
|
9
|
+
"placeholder",
|
|
10
|
+
"disabled",
|
|
11
|
+
"required",
|
|
12
|
+
"aria-invalid",
|
|
13
|
+
"aria-describedby"
|
|
14
|
+
], m = /*@__PURE__*/ a({
|
|
15
|
+
__name: "Textarea",
|
|
16
|
+
props: /*@__PURE__*/ o({
|
|
17
|
+
size: {},
|
|
18
|
+
rows: {},
|
|
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("textarea", {
|
|
44
|
+
id: g.value,
|
|
45
|
+
"onUpdate:modelValue": t[0] ||= (e) => m.value = e,
|
|
46
|
+
rows: o.rows,
|
|
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 };
|
|
@@ -1,2 +1,14 @@
|
|
|
1
|
+
export { default as Alert } from './Alert.vue';
|
|
2
|
+
export { default as App } from './App.vue';
|
|
3
|
+
export { default as Badge } from './Badge.vue';
|
|
1
4
|
export { default as Button } from './Button.vue';
|
|
5
|
+
export { default as Card } from './Card.vue';
|
|
6
|
+
export { default as Checkbox } from './Checkbox.vue';
|
|
7
|
+
export { default as Form } from './Form.vue';
|
|
8
|
+
export { default as FormField } from './FormField.vue';
|
|
9
|
+
export { default as Input } from './Input.vue';
|
|
10
|
+
export { default as Label } from './Label.vue';
|
|
11
|
+
export { default as RadioGroup } from './RadioGroup.vue';
|
|
12
|
+
export { default as Select } from './Select.vue';
|
|
2
13
|
export { default as Switch } from './Switch.vue';
|
|
14
|
+
export { default as Textarea } from './Textarea.vue';
|
package/dist/components/index.js
CHANGED
|
@@ -1,10 +1,34 @@
|
|
|
1
1
|
import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import t from "./
|
|
3
|
-
import n from "./
|
|
2
|
+
import t from "./Alert.js";
|
|
3
|
+
import n from "./App.js";
|
|
4
|
+
import r from "./Badge.js";
|
|
5
|
+
import i from "./Button.js";
|
|
6
|
+
import a from "./Card.js";
|
|
7
|
+
import o from "./Checkbox.js";
|
|
8
|
+
import s from "./Form.js";
|
|
9
|
+
import c from "./Label.js";
|
|
10
|
+
import l from "./FormField.js";
|
|
11
|
+
import u from "./Input.js";
|
|
12
|
+
import d from "./RadioGroup.js";
|
|
13
|
+
import f from "./Select.js";
|
|
14
|
+
import p from "./Switch.js";
|
|
15
|
+
import m from "./Textarea.js";
|
|
4
16
|
//#region src/components/index.ts
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
17
|
+
var h = /* @__PURE__ */ e({
|
|
18
|
+
Alert: () => t,
|
|
19
|
+
App: () => n,
|
|
20
|
+
Badge: () => r,
|
|
21
|
+
Button: () => i,
|
|
22
|
+
Card: () => a,
|
|
23
|
+
Checkbox: () => o,
|
|
24
|
+
Form: () => s,
|
|
25
|
+
FormField: () => l,
|
|
26
|
+
Input: () => u,
|
|
27
|
+
Label: () => c,
|
|
28
|
+
RadioGroup: () => d,
|
|
29
|
+
Select: () => f,
|
|
30
|
+
Switch: () => p,
|
|
31
|
+
Textarea: () => m
|
|
8
32
|
});
|
|
9
33
|
//#endregion
|
|
10
|
-
export {
|
|
34
|
+
export { h as components_exports };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import type { ComputedRef, InjectionKey, Ref } from 'vue';
|
|
2
|
+
/** A validation failure. `name` is a dot-path into the form state. */
|
|
3
|
+
export interface FormError {
|
|
4
|
+
name?: string;
|
|
5
|
+
message: string;
|
|
6
|
+
}
|
|
7
|
+
export interface FormSubmitEvent<T> {
|
|
8
|
+
data: T;
|
|
9
|
+
}
|
|
10
|
+
/** When a field re-validates. `submit` always runs regardless. */
|
|
11
|
+
export type FormValidateOn = 'blur' | 'input' | 'change';
|
|
12
|
+
/**
|
|
13
|
+
* Minimal structural type for the Standard Schema spec, so any compliant
|
|
14
|
+
* validator (Zod 3.24+, Valibot, ArkType…) works without Iryx depending on it.
|
|
15
|
+
*
|
|
16
|
+
* @see https://standardschema.dev
|
|
17
|
+
*/
|
|
18
|
+
export interface StandardSchemaLike<Output = unknown> {
|
|
19
|
+
'~standard': {
|
|
20
|
+
version: number;
|
|
21
|
+
vendor: string;
|
|
22
|
+
validate: (value: unknown) => StandardSchemaResult<Output> | Promise<StandardSchemaResult<Output>>;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export interface StandardSchemaIssue {
|
|
26
|
+
message: string;
|
|
27
|
+
path?: ReadonlyArray<PropertyKey | {
|
|
28
|
+
key: PropertyKey;
|
|
29
|
+
}>;
|
|
30
|
+
}
|
|
31
|
+
export type StandardSchemaResult<Output> = {
|
|
32
|
+
value: Output;
|
|
33
|
+
issues?: undefined;
|
|
34
|
+
} | {
|
|
35
|
+
issues: ReadonlyArray<StandardSchemaIssue>;
|
|
36
|
+
value?: undefined;
|
|
37
|
+
};
|
|
38
|
+
export declare function isStandardSchema(value: unknown): value is StandardSchemaLike;
|
|
39
|
+
/** Join a Standard Schema issue path into a dot-path (`address.city`). */
|
|
40
|
+
export declare function issuePath(issue: StandardSchemaIssue): string | undefined;
|
|
41
|
+
/** Read a dot-path out of an object, tolerating missing intermediates. */
|
|
42
|
+
export declare function getByPath(object: unknown, path: string): unknown;
|
|
43
|
+
export interface FormContext {
|
|
44
|
+
errors: Ref<FormError[]>;
|
|
45
|
+
validateOn: ComputedRef<FormValidateOn[]>;
|
|
46
|
+
disabled: ComputedRef<boolean>;
|
|
47
|
+
/** Full state object, so fields can watch their own slice. */
|
|
48
|
+
state: ComputedRef<Record<string, unknown>>;
|
|
49
|
+
errorFor: (name: string | undefined) => string | undefined;
|
|
50
|
+
validateField: (name: string) => Promise<void>;
|
|
51
|
+
}
|
|
52
|
+
export declare const formContextKey: InjectionKey<FormContext>;
|
|
53
|
+
/** Context a `FormField` exposes to the control it wraps. */
|
|
54
|
+
export interface FormFieldContext {
|
|
55
|
+
id: ComputedRef<string>;
|
|
56
|
+
name: ComputedRef<string | undefined>;
|
|
57
|
+
invalid: ComputedRef<boolean>;
|
|
58
|
+
describedBy: ComputedRef<string | undefined>;
|
|
59
|
+
}
|
|
60
|
+
export declare const formFieldContextKey: InjectionKey<FormFieldContext>;
|
|
61
|
+
/** Access the enclosing form, if any. */
|
|
62
|
+
export declare function useForm(): FormContext | undefined;
|
|
63
|
+
/**
|
|
64
|
+
* Access the enclosing `FormField`, if any. Controls use this to pick up the
|
|
65
|
+
* generated `id`, the invalid state and `aria-describedby` automatically.
|
|
66
|
+
*/
|
|
67
|
+
export declare function useFormField(): FormFieldContext | undefined;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { inject as e } from "vue";
|
|
2
|
+
//#region src/composables/form.ts
|
|
3
|
+
function t(e) {
|
|
4
|
+
return typeof e == "object" && !!e && "~standard" in e;
|
|
5
|
+
}
|
|
6
|
+
function n(e) {
|
|
7
|
+
if (e.path?.length) return e.path.map((e) => typeof e == "object" && e ? e.key : e).join(".");
|
|
8
|
+
}
|
|
9
|
+
function r(e, t) {
|
|
10
|
+
return t.split(".").reduce((e, t) => e?.[t], e);
|
|
11
|
+
}
|
|
12
|
+
var i = Symbol.for("iryx-ui:form"), a = Symbol.for("iryx-ui:form-field");
|
|
13
|
+
function o() {
|
|
14
|
+
return e(i, void 0);
|
|
15
|
+
}
|
|
16
|
+
function s() {
|
|
17
|
+
return e(a, void 0);
|
|
18
|
+
}
|
|
19
|
+
//#endregion
|
|
20
|
+
export { i as formContextKey, a as formFieldContextKey, r as getByPath, t as isStandardSchema, n as issuePath, o as useForm, s as useFormField };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
export { componentNames } from './component-names';
|
|
2
2
|
export type { ComponentName } from './component-names';
|
|
3
3
|
export * from './components';
|
|
4
|
+
export type { AlertProps } from './components/Alert.vue';
|
|
5
|
+
export type { AppProps } from './components/App.vue';
|
|
6
|
+
export type { BadgeProps } from './components/Badge.vue';
|
|
4
7
|
export type { ButtonProps } from './components/Button.vue';
|
|
8
|
+
export type { CardProps } from './components/Card.vue';
|
|
9
|
+
export type { CheckboxProps } from './components/Checkbox.vue';
|
|
10
|
+
export type { FormProps } from './components/Form.vue';
|
|
11
|
+
export type { FormFieldProps } from './components/FormField.vue';
|
|
12
|
+
export type { InputProps } from './components/Input.vue';
|
|
13
|
+
export type { LabelProps } from './components/Label.vue';
|
|
14
|
+
export type { RadioGroupItemOption, RadioGroupProps } from './components/RadioGroup.vue';
|
|
15
|
+
export type { SelectItemOption, SelectProps } from './components/Select.vue';
|
|
5
16
|
export type { SwitchProps } from './components/Switch.vue';
|
|
17
|
+
export type { TextareaProps } from './components/Textarea.vue';
|
|
6
18
|
export * from './composables/appearance';
|
|
19
|
+
export * from './composables/form';
|
|
7
20
|
export { defaultConfig, iryxUiConfigKey, useIryxUiConfig } from './config';
|
|
8
21
|
export type { IryxUiConfig } from './config';
|
|
9
22
|
export { createIryxUi, IryxUi } from './plugin';
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,31 @@
|
|
|
1
1
|
import { componentNames as e } from "./component-names.js";
|
|
2
2
|
import { defaultConfig as t, iryxUiConfigKey as n, useIryxUiConfig as r } from "./config.js";
|
|
3
|
-
import {
|
|
4
|
-
import a from "./components/
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
|
|
3
|
+
import { alertTheme as i } from "./theme/alert.js";
|
|
4
|
+
import a from "./components/Alert.js";
|
|
5
|
+
import { initAppearance as o, useAppearance as s } from "./composables/appearance.js";
|
|
6
|
+
import { applyTheme as c, clearTheme as l, themes as u } from "./theme/presets.js";
|
|
7
|
+
import d from "./components/App.js";
|
|
8
|
+
import { badgeTheme as f } from "./theme/badge.js";
|
|
9
|
+
import p from "./components/Badge.js";
|
|
10
|
+
import { buttonTheme as m } from "./theme/button.js";
|
|
11
|
+
import h from "./components/Button.js";
|
|
12
|
+
import { cardTheme as g } from "./theme/card.js";
|
|
13
|
+
import _ from "./components/Card.js";
|
|
14
|
+
import { checkboxTheme as v } from "./theme/checkbox.js";
|
|
15
|
+
import y from "./components/Checkbox.js";
|
|
16
|
+
import { formContextKey as b, formFieldContextKey as x, getByPath as S, isStandardSchema as C, issuePath as w, useForm as T, useFormField as E } from "./composables/form.js";
|
|
17
|
+
import D from "./components/Form.js";
|
|
18
|
+
import { labelTheme as O } from "./theme/label.js";
|
|
19
|
+
import k from "./components/Label.js";
|
|
20
|
+
import A from "./components/FormField.js";
|
|
21
|
+
import { fieldBase as j, inputTheme as M, textareaTheme as N } from "./theme/input.js";
|
|
22
|
+
import P from "./components/Input.js";
|
|
23
|
+
import { radioGroupTheme as F } from "./theme/radio-group.js";
|
|
24
|
+
import I from "./components/RadioGroup.js";
|
|
25
|
+
import { selectTheme as L } from "./theme/select.js";
|
|
26
|
+
import R from "./components/Select.js";
|
|
27
|
+
import { switchTheme as z } from "./theme/switch.js";
|
|
28
|
+
import B from "./components/Switch.js";
|
|
29
|
+
import V from "./components/Textarea.js";
|
|
30
|
+
import { IryxUi as H, createIryxUi as U } from "./plugin.js";
|
|
31
|
+
export { a as Alert, d as App, p as Badge, h as Button, _ as Card, y as Checkbox, D as Form, A as FormField, P as Input, H as IryxUi, k as Label, I as RadioGroup, R as Select, B as Switch, V as Textarea, i as alertTheme, c as applyTheme, f as badgeTheme, m as buttonTheme, g as cardTheme, v as checkboxTheme, l as clearTheme, e as componentNames, U as createIryxUi, t as defaultConfig, j as fieldBase, b as formContextKey, x as formFieldContextKey, S as getByPath, o as initAppearance, M as inputTheme, n as iryxUiConfigKey, C as isStandardSchema, w as issuePath, O as labelTheme, F as radioGroupTheme, L as selectTheme, z as switchTheme, N as textareaTheme, u as themes, s as useAppearance, T as useForm, E as useFormField, r as useIryxUiConfig };
|
package/dist/plugin.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { componentNames as e } from "./component-names.js";
|
|
2
2
|
import { defaultConfig as t, iryxUiConfigKey as n } from "./config.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
3
|
+
import { initAppearance as r } from "./composables/appearance.js";
|
|
4
|
+
import { applyTheme as i } from "./theme/presets.js";
|
|
5
|
+
import { components_exports as a } from "./components/index.js";
|
|
6
6
|
//#region src/plugin.ts
|
|
7
7
|
function o(o = {}) {
|
|
8
8
|
let { prefix: s = "I", appearance: c, theme: l, ...u } = o;
|
|
@@ -11,8 +11,8 @@ function o(o = {}) {
|
|
|
11
11
|
...t,
|
|
12
12
|
...u
|
|
13
13
|
});
|
|
14
|
-
for (let t of e) o.component(`${s}${t}`,
|
|
15
|
-
l &&
|
|
14
|
+
for (let t of e) o.component(`${s}${t}`, a[t]);
|
|
15
|
+
l && i(l), c && r(c);
|
|
16
16
|
} };
|
|
17
17
|
}
|
|
18
18
|
var s = o();
|