@leaflink/stash 43.0.0 → 43.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/dist/DataViewFilters.js +67 -66
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewFilters.vue.d.ts +8 -0
- package/dist/FilterDrawerItem.js +55 -39
- package/dist/FilterDrawerItem.js.map +1 -1
- package/dist/FilterDrawerItem.vue.d.ts +12 -2
- package/dist/RadioGroup.js +73 -71
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioNew.js +11 -11
- package/dist/Step.vue.d.ts +1 -1
- package/dist/components.css +1 -1
- package/dist/locale.js +8 -7
- package/dist/locale.js.map +1 -1
- package/package.json +1 -1
package/dist/RadioGroup.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as y, inject as x, openBlock as
|
|
1
|
+
import { defineComponent as y, inject as x, openBlock as r, createElementBlock as n, Fragment as w, renderList as V, unref as e, normalizeClass as v, createElementVNode as d, toDisplayString as h, provide as g, computed as b, createBlock as B, withCtx as T, renderSlot as R, resolveDynamicComponent as C } from "vue";
|
|
2
2
|
import E from "lodash-es/uniqueId";
|
|
3
3
|
import { _ as G } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
|
|
4
4
|
import { R as $ } from "./RadioGroup.keys-974818d6.js";
|
|
@@ -9,27 +9,27 @@ import "lodash-es/get";
|
|
|
9
9
|
const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @__PURE__ */ y({
|
|
10
10
|
__name: "VariantButton",
|
|
11
11
|
setup(u) {
|
|
12
|
-
const
|
|
13
|
-
if (!
|
|
12
|
+
const i = x($.key);
|
|
13
|
+
if (!i)
|
|
14
14
|
throw new Error("VariantButton must be used with a RadioGroup instance.");
|
|
15
|
-
const { name: a, disabled:
|
|
16
|
-
return (I, c) => (
|
|
17
|
-
(
|
|
15
|
+
const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
|
|
16
|
+
return (I, c) => (r(), n("div", O, [
|
|
17
|
+
(r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
|
|
18
18
|
key: `${e(a)}-${t.id}`,
|
|
19
|
-
class:
|
|
19
|
+
class: v([{ "w-full": e(m) }])
|
|
20
20
|
}, [
|
|
21
|
-
|
|
21
|
+
d("input", {
|
|
22
22
|
id: `${e(a)}-${t.id}`,
|
|
23
23
|
class: "sr-only",
|
|
24
24
|
type: "radio",
|
|
25
25
|
name: e(a),
|
|
26
26
|
value: t.value,
|
|
27
27
|
checked: e(l) === t.value,
|
|
28
|
-
disabled: e(
|
|
28
|
+
disabled: e(p) || t.disabled,
|
|
29
29
|
onInput: c[0] || (c[0] = //@ts-ignore
|
|
30
|
-
(...
|
|
30
|
+
(...f) => e(s) && e(s)(...f))
|
|
31
31
|
}, null, 40, W),
|
|
32
|
-
|
|
32
|
+
d("label", {
|
|
33
33
|
for: `${e(a)}-${t.id}`
|
|
34
34
|
}, h(t.text), 9, j)
|
|
35
35
|
], 2))), 128))
|
|
@@ -39,27 +39,27 @@ const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabl
|
|
|
39
39
|
const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class: "root flex flex-wrap tw-my-1.5" }, L = ["id", "name", "value", "checked", "disabled"], N = ["for"], z = /* @__PURE__ */ y({
|
|
40
40
|
__name: "VariantChip",
|
|
41
41
|
setup(u) {
|
|
42
|
-
const
|
|
43
|
-
if (!
|
|
42
|
+
const i = x($.key);
|
|
43
|
+
if (!i)
|
|
44
44
|
throw new Error("VariantChip must be used with a RadioGroup instance.");
|
|
45
|
-
const { name: a, disabled:
|
|
46
|
-
return (I, c) => (
|
|
47
|
-
(
|
|
45
|
+
const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
|
|
46
|
+
return (I, c) => (r(), n("div", D, [
|
|
47
|
+
(r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
|
|
48
48
|
key: `${e(a)}-${t.id}`,
|
|
49
|
-
class:
|
|
49
|
+
class: v([{ "w-full": e(m) }])
|
|
50
50
|
}, [
|
|
51
|
-
|
|
51
|
+
d("input", {
|
|
52
52
|
id: `${e(a)}-${t.id}`,
|
|
53
53
|
class: "sr-only",
|
|
54
54
|
type: "radio",
|
|
55
55
|
name: e(a),
|
|
56
56
|
value: t.value,
|
|
57
57
|
checked: e(l) === t.value,
|
|
58
|
-
disabled: e(
|
|
58
|
+
disabled: e(p) || t.disabled,
|
|
59
59
|
onInput: c[0] || (c[0] = //@ts-ignore
|
|
60
|
-
(...
|
|
60
|
+
(...f) => e(s) && e(s)(...f))
|
|
61
61
|
}, null, 40, L),
|
|
62
|
-
|
|
62
|
+
d("label", {
|
|
63
63
|
for: `${e(a)}-${t.id}`
|
|
64
64
|
}, h(t.text), 9, N)
|
|
65
65
|
], 2))), 128))
|
|
@@ -69,26 +69,26 @@ const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class:
|
|
|
69
69
|
const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class: "root flex flex-wrap" }, J = ["id", "name", "value", "checked", "disabled"], M = ["for"], P = /* @__PURE__ */ y({
|
|
70
70
|
__name: "VariantRadio",
|
|
71
71
|
setup(u) {
|
|
72
|
-
const
|
|
73
|
-
if (!
|
|
72
|
+
const i = x($.key);
|
|
73
|
+
if (!i)
|
|
74
74
|
throw new Error("VariantRadio must be used with a RadioGroup instance.");
|
|
75
|
-
const { name: a, disabled:
|
|
76
|
-
return (I, c) => (
|
|
77
|
-
(
|
|
75
|
+
const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
|
|
76
|
+
return (I, c) => (r(), n("div", F, [
|
|
77
|
+
(r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
|
|
78
78
|
key: `${e(a)}-${t.id}`,
|
|
79
|
-
class:
|
|
79
|
+
class: v([{ "w-full": e(m) }])
|
|
80
80
|
}, [
|
|
81
|
-
|
|
81
|
+
d("input", {
|
|
82
82
|
id: `${e(a)}-${t.id}`,
|
|
83
83
|
type: "radio",
|
|
84
84
|
name: e(a),
|
|
85
85
|
value: t.value,
|
|
86
86
|
checked: e(l) === t.value,
|
|
87
|
-
disabled: e(
|
|
87
|
+
disabled: e(p) || t.disabled,
|
|
88
88
|
onInput: c[0] || (c[0] = //@ts-ignore
|
|
89
|
-
(...
|
|
89
|
+
(...f) => e(s) && e(s)(...f))
|
|
90
90
|
}, null, 40, J),
|
|
91
|
-
|
|
91
|
+
d("label", {
|
|
92
92
|
for: `${e(a)}-${t.id}`
|
|
93
93
|
}, h(t.text), 9, M)
|
|
94
94
|
], 2))), 128))
|
|
@@ -98,52 +98,52 @@ const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class:
|
|
|
98
98
|
const U = /* @__PURE__ */ k(P, [["__scopeId", "data-v-1962fcc7"]]), H = { class: "root flex flex-wrap" }, K = ["for"], Q = ["id", "name", "value", "checked", "disabled"], X = { class: "color-ice-900 tw-m-0" }, Y = { class: "color-ice-700 tw-m-0" }, Z = /* @__PURE__ */ y({
|
|
99
99
|
__name: "VariantTile",
|
|
100
100
|
setup(u) {
|
|
101
|
-
const
|
|
102
|
-
if (!
|
|
101
|
+
const i = x($.key);
|
|
102
|
+
if (!i)
|
|
103
103
|
throw new Error("VariantTile must be used with a RadioGroup instance.");
|
|
104
|
-
const { name: a, disabled:
|
|
105
|
-
return (I, c) => (
|
|
106
|
-
(
|
|
104
|
+
const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
|
|
105
|
+
return (I, c) => (r(), n("div", H, [
|
|
106
|
+
(r(!0), n(w, null, V(e(o), (t) => (r(), n("label", {
|
|
107
107
|
key: `${e(a)}-${t.id}`,
|
|
108
|
-
class:
|
|
108
|
+
class: v(["tile-container", { "w-full": e(m) }]),
|
|
109
109
|
for: `${e(a)}-${t.id}`
|
|
110
110
|
}, [
|
|
111
|
-
|
|
112
|
-
class:
|
|
111
|
+
d("div", {
|
|
112
|
+
class: v(["tile-header border flex", {
|
|
113
113
|
"border-blue-500 bg-blue-100 color-ice-900": e(l) === t.value,
|
|
114
114
|
"border-ice-500 bg-ice-100 color-ice-700": e(l) !== t.value
|
|
115
115
|
}])
|
|
116
116
|
}, [
|
|
117
|
-
|
|
117
|
+
d("input", {
|
|
118
118
|
id: `${e(a)}-${t.id}`,
|
|
119
119
|
class: "sr-only",
|
|
120
120
|
type: "radio",
|
|
121
121
|
name: e(a),
|
|
122
122
|
value: t.value,
|
|
123
123
|
checked: e(l) === t.value,
|
|
124
|
-
disabled: e(
|
|
124
|
+
disabled: e(p) || t.disabled,
|
|
125
125
|
onInput: c[0] || (c[0] = //@ts-ignore
|
|
126
|
-
(...
|
|
126
|
+
(...f) => e(s) && e(s)(...f))
|
|
127
127
|
}, null, 40, Q),
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
d("div", null, [
|
|
129
|
+
d("span", null, h(t.text), 1)
|
|
130
130
|
])
|
|
131
131
|
], 2),
|
|
132
|
-
|
|
133
|
-
class:
|
|
132
|
+
d("div", {
|
|
133
|
+
class: v(["tile-body border-r border-b border-l", {
|
|
134
134
|
"border-ice-500": e(l) !== t.value,
|
|
135
135
|
"border-blue-500": e(l) === t.value
|
|
136
136
|
}])
|
|
137
137
|
}, [
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
d("p", X, h(t.subTitle), 1),
|
|
139
|
+
d("p", Y, h(t.subText), 1)
|
|
140
140
|
], 2)
|
|
141
141
|
], 10, K))), 128))
|
|
142
142
|
]));
|
|
143
143
|
}
|
|
144
144
|
});
|
|
145
145
|
const ee = /* @__PURE__ */ k(Z, [["__scopeId", "data-v-e6997760"]]);
|
|
146
|
-
var
|
|
146
|
+
var _ = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(_ || {});
|
|
147
147
|
const ne = /* @__PURE__ */ y({
|
|
148
148
|
__name: "RadioGroup",
|
|
149
149
|
props: {
|
|
@@ -162,30 +162,32 @@ const ne = /* @__PURE__ */ y({
|
|
|
162
162
|
showOptionalInLabel: { type: Boolean }
|
|
163
163
|
},
|
|
164
164
|
emits: ["update:modelValue"],
|
|
165
|
-
setup(u, { emit:
|
|
166
|
-
const a = u,
|
|
167
|
-
[
|
|
168
|
-
[
|
|
169
|
-
[
|
|
170
|
-
[
|
|
165
|
+
setup(u, { emit: i }) {
|
|
166
|
+
const a = u, p = {
|
|
167
|
+
[_.Button]: S,
|
|
168
|
+
[_.Chip]: A,
|
|
169
|
+
[_.Radio]: U,
|
|
170
|
+
[_.Tile]: ee
|
|
171
171
|
};
|
|
172
|
-
function
|
|
173
|
-
|
|
172
|
+
function m(o) {
|
|
173
|
+
i("update:modelValue", o.target.value);
|
|
174
174
|
}
|
|
175
175
|
const l = E("radio-group-field-error-");
|
|
176
176
|
return g($.key, {
|
|
177
|
-
name:
|
|
178
|
-
disabled:
|
|
179
|
-
fullWidth:
|
|
180
|
-
modelValue:
|
|
181
|
-
options:
|
|
182
|
-
variant:
|
|
183
|
-
update:
|
|
184
|
-
}), (
|
|
185
|
-
class:
|
|
177
|
+
name: b(() => a.name),
|
|
178
|
+
disabled: b(() => a.disabled),
|
|
179
|
+
fullWidth: b(() => a.fullWidth),
|
|
180
|
+
modelValue: b(() => a.modelValue),
|
|
181
|
+
options: b(() => a.options),
|
|
182
|
+
variant: b(() => a.variant),
|
|
183
|
+
update: m
|
|
184
|
+
}), (o, s) => (r(), B(G, {
|
|
185
|
+
class: v([
|
|
186
186
|
{
|
|
187
187
|
"tw-flex": !a.options,
|
|
188
|
-
"tw-
|
|
188
|
+
"tw-flex-wrap": !a.options && (a.variant === e(_).Chip || a.variant === e(_).Radio),
|
|
189
|
+
"tw-gap-x-1.5 tw-gap-y-3": !a.options && a.variant === e(_).Chip,
|
|
190
|
+
"tw-gap-6": !a.options && (a.variant === e(_).Radio || a.variant === e(_).Tile)
|
|
189
191
|
}
|
|
190
192
|
]),
|
|
191
193
|
"aria-errormessage": e(l),
|
|
@@ -202,9 +204,9 @@ const ne = /* @__PURE__ */ y({
|
|
|
202
204
|
"is-read-only": a.isReadOnly
|
|
203
205
|
}, {
|
|
204
206
|
default: T(() => [
|
|
205
|
-
a.options ? R(
|
|
206
|
-
(
|
|
207
|
-
]) : R(
|
|
207
|
+
a.options ? R(o.$slots, "default", { key: 0 }, () => [
|
|
208
|
+
(r(), B(C(p[a.variant])))
|
|
209
|
+
]) : R(o.$slots, "default", { key: 1 })
|
|
208
210
|
]),
|
|
209
211
|
_: 3
|
|
210
212
|
}, 8, ["class", "aria-errormessage", "aria-invalid", "label", "add-bottom-space", "error-id", "error-text", "hint-text", "show-optional-in-label", "is-required", "is-read-only"]));
|
|
@@ -212,7 +214,7 @@ const ne = /* @__PURE__ */ y({
|
|
|
212
214
|
});
|
|
213
215
|
export {
|
|
214
216
|
$ as RADIO_GROUP_INJECTION,
|
|
215
|
-
|
|
217
|
+
_ as RadioGroupVariant,
|
|
216
218
|
ne as default
|
|
217
219
|
};
|
|
218
220
|
//# sourceMappingURL=RadioGroup.js.map
|
package/dist/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantButton must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root label {\n padding: 8px 30px;\n border: 1px solid var(--color-ice);\n font-weight: var(--font-weight-semibold);\n color: var(--color-ice-700);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n display: block;\n text-align: center;\n }\n\n .root > div:first-child label {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n\n .root > div:last-child label {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n\n .root > div:not(:first-child) label {\n margin-left: -1px;\n }\n\n .root > div:not(:last-child) label {\n border-right-color: transparent;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice);\n cursor: auto;\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue);\n color: var(--color-blue);\n z-index: 1;\n position: relative;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue);\n color: var(--color-blue);\n background-color: var(--color-blue-100);\n z-index: 1;\n position: relative;\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantChip must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap tw-my-1.5\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n padding: var(--ll-space-1) var(--ll-space-2);\n border: 1px solid var(--color-ice);\n font-weight: var(--font-weight-normal);\n color: var(--color-ice-900);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice);\n cursor: auto;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue);\n color: var(--color-white);\n background-color: var(--color-blue);\n font-weight: var(--font-weight-bold);\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantRadio must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n font-weight: var(--font-weight-medium);\n user-select: none;\n cursor: pointer;\n padding: 0 var(--ll-space-2);\n }\n\n .root input {\n appearance: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 5px;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n }\n\n .root input:hover:not(:disabled) {\n border-color: var(--color-blue);\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantTile must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap\">\n <label\n v-for=\"option in options\"\n :key=\"`${name}-${option.id}`\"\n class=\"tile-container\"\n :class=\"{ 'w-full': fullWidth }\"\n :for=\"`${name}-${option.id}`\"\n >\n <div\n class=\"tile-header border flex\"\n :class=\"{\n 'border-blue-500 bg-blue-100 color-ice-900': modelValue === option.value,\n 'border-ice-500 bg-ice-100 color-ice-700': modelValue !== option.value,\n }\"\n >\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <div>\n <span>\n {{ option.text }}\n </span>\n </div>\n </div>\n <div\n class=\"tile-body border-r border-b border-l\"\n :class=\"{\n 'border-ice-500': modelValue !== option.value,\n 'border-blue-500': modelValue === option.value,\n }\"\n >\n <p class=\"color-ice-900 tw-m-0\">{{ option.subTitle }}</p>\n <p class=\"color-ice-700 tw-m-0\">{{ option.subText }}</p>\n </div>\n </label>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n cursor: pointer;\n user-select: none;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n\n .root label.tile-container {\n border-radius: var(--border-radius);\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n\n .tile-header,\n .tile-body {\n transition: all 0.2s;\n }\n\n .tile-header {\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n padding: var(--ll-space-2) 0;\n }\n\n .root label.tile-container:hover .tile-header {\n background-color: var(--color-blue-100) !important;\n border-color: var(--color-blue) !important;\n color: var(--color-ice-900) !important;\n transition: all 0.2s;\n }\n\n .tile-body {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n background-color: var(--color-white);\n padding: var(--ll-space-3);\n display: flex;\n flex-direction: column;\n }\n\n .root label.tile-container:hover .tile-body {\n border-color: var(--color-blue) !important;\n transition: all 0.2s;\n }\n\n .root input {\n appearance: none;\n background-color: var(--color-white);\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 2px;\n }\n\n .root input ~ div {\n font-weight: var(--font-weight-medium);\n user-select: none;\n cursor: pointer;\n padding: 0 var(--ll-space-2);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n }\n\n .root label.tile-container input {\n margin-left: var(--ll-space-2);\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n }\n\n @media screen and (width <= 640px) {\n .root {\n flex-direction: column;\n }\n }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n Radio = 'radio',\n Button = 'button',\n Chip = 'chip',\n Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n /**\n * Disables the RadioGroupOption if truthy\n */\n disabled?: boolean;\n\n /**\n * The unique identifier for the option\n */\n id: string;\n\n /**\n * The text to be displayed for the option\n */\n text: string;\n\n /**\n * The value of the option. Used for the modelValue of the RadioGroup.\n */\n value: string;\n\n /**\n * The subtitle for tile variant\n */\n subTitle?: string;\n\n /**\n * The subtext for tile variant\n */\n subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n /**\n * This type should match RadioGroupProps['disabled']\n */\n disabled: ComputedRef<boolean | undefined>;\n\n /**\n * This type should match RadioGroupProps['fullWidth']\n */\n fullWidth: ComputedRef<boolean | undefined>;\n\n /**\n * This type should match RadioGroupProps['modelValue']\n */\n modelValue: ComputedRef<string | undefined>;\n\n /**\n * This type should match RadioGroupProps['name']\n */\n name: ComputedRef<string | undefined>;\n\n /**\n * This type should match RadioGroupProps['options']\n */\n options: ComputedRef<RadioGroupOption[] | undefined>;\n\n /**\n * Triggered when the user changes their selection; updates the v-model.\n */\n update: (e: Event) => void;\n\n /**\n * This type should match RadioGroupProps['variant']\n * @default 'radio'\n */\n variant: ComputedRef<RadioGroupVariants | undefined>;\n}\n","<script lang=\"ts\">\n import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n export * from './RadioGroup.keys';\n export * from './RadioGroup.types';\n\n export interface RadioGroupProps {\n /**\n * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n */\n name?: string;\n\n /**\n * Deprecated - Compose your radio group with the `Radio` component instead\n * @deprecated\n */\n options?: RadioGroupOption[];\n\n modelValue?: RadioGroupOption['value'];\n\n /**\n * @defaultValue 'radio'\n */\n variant?: RadioGroupVariants;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n */\n addBottomSpace?: boolean;\n\n /**\n * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n */\n errorText?: string;\n\n /**\n * Displays text below the input; hidden when the isReadOnly prop is truthy.\n */\n hintText?: string;\n\n /**\n * Whether it's a readonly field.\n */\n isReadOnly?: boolean;\n\n /**\n * Whether the field is required.\n */\n isRequired?: boolean;\n\n /**\n * Label to render above the input.\n */\n label?: string;\n\n /**\n * Show \"(optional)\" to the right of the label text\n */\n showOptionalInLabel?: boolean;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, provide } from 'vue';\n\n import Field from '../Field/Field.vue';\n import VariantButton from './components/VariantButton.vue';\n import VariantChip from './components/VariantChip.vue';\n import VariantRadio from './components/VariantRadio.vue';\n import VariantTile from './components/VariantTile.vue';\n import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n const variantComponentsMap = {\n [RadioGroupVariant.Button]: VariantButton,\n [RadioGroupVariant.Chip]: VariantChip,\n [RadioGroupVariant.Radio]: VariantRadio,\n [RadioGroupVariant.Tile]: VariantTile,\n };\n\n const props = withDefaults(defineProps<RadioGroupProps>(), {\n variant: 'radio',\n disabled: false,\n fullWidth: false,\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n modelValue: undefined,\n name: undefined,\n options: undefined,\n });\n\n const emit =\n defineEmits<{\n /**\n * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n */\n (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n }>();\n\n function update(e: Event) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n }\n\n const errorId = uniqueId('radio-group-field-error-');\n\n provide(RADIO_GROUP_INJECTION.key, {\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n fullWidth: computed(() => props.fullWidth),\n modelValue: computed(() => props.modelValue),\n options: computed(() => props.options),\n variant: computed(() => props.variant),\n update,\n });\n</script>\n\n<template>\n <Field\n :class=\"[\n {\n 'tw-flex': !props.options,\n 'tw-gap-6': !props.options && props.variant !== RadioGroupVariant.Button,\n },\n ]\"\n :aria-errormessage=\"errorId\"\n :aria-invalid=\"!!props.errorText\"\n role=\"radiogroup\"\n fieldset\n :label=\"props.label\"\n :add-bottom-space=\"props.addBottomSpace\"\n :error-id=\"errorId\"\n :error-text=\"props.errorText\"\n :hint-text=\"props.hintText\"\n :show-optional-in-label=\"props.showOptionalInLabel\"\n :is-required=\"props.isRequired\"\n :is-read-only=\"props.isReadOnly\"\n >\n <slot v-if=\"props.options\">\n <component :is=\"variantComponentsMap[props.variant]\" />\n </slot>\n <slot v-else></slot>\n </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACTzD,IAAAS,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCiFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASN,EAAOO,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQjB,EAAsB,KAAK;AAAA,MACjC,MAAMkB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAb;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantButton must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root label {\n padding: 8px 30px;\n border: 1px solid var(--color-ice);\n font-weight: var(--font-weight-semibold);\n color: var(--color-ice-700);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n display: block;\n text-align: center;\n }\n\n .root > div:first-child label {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n\n .root > div:last-child label {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n\n .root > div:not(:first-child) label {\n margin-left: -1px;\n }\n\n .root > div:not(:last-child) label {\n border-right-color: transparent;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice);\n cursor: auto;\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue);\n color: var(--color-blue);\n z-index: 1;\n position: relative;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue);\n color: var(--color-blue);\n background-color: var(--color-blue-100);\n z-index: 1;\n position: relative;\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantChip must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap tw-my-1.5\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n padding: var(--ll-space-1) var(--ll-space-2);\n border: 1px solid var(--color-ice);\n font-weight: var(--font-weight-normal);\n color: var(--color-ice-900);\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n .root input:disabled ~ label {\n background-color: var(--color-ice-200);\n color: var(--color-ice);\n cursor: auto;\n }\n\n .root input:checked:not(:disabled) ~ label {\n border-color: var(--color-blue);\n color: var(--color-white);\n background-color: var(--color-blue);\n font-weight: var(--font-weight-bold);\n }\n\n .root input:not(:checked, :disabled) ~ label:hover {\n border-color: var(--color-blue);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantRadio must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap\">\n <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n <input\n :id=\"`${name}-${option.id}`\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <label :for=\"`${name}-${option.id}`\">\n {{ option.text }}\n </label>\n </div>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n font-weight: var(--font-weight-medium);\n user-select: none;\n cursor: pointer;\n padding: 0 var(--ll-space-2);\n }\n\n .root input {\n appearance: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 5px;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n }\n\n .root input:hover:not(:disabled) {\n border-color: var(--color-blue);\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n</style>\n","<script setup lang=\"ts\">\n import { inject } from 'vue';\n\n import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n if (!radioGroupInjection) {\n throw new Error('VariantTile must be used with a RadioGroup instance.');\n }\n\n const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n <div class=\"root flex flex-wrap\">\n <label\n v-for=\"option in options\"\n :key=\"`${name}-${option.id}`\"\n class=\"tile-container\"\n :class=\"{ 'w-full': fullWidth }\"\n :for=\"`${name}-${option.id}`\"\n >\n <div\n class=\"tile-header border flex\"\n :class=\"{\n 'border-blue-500 bg-blue-100 color-ice-900': modelValue === option.value,\n 'border-ice-500 bg-ice-100 color-ice-700': modelValue !== option.value,\n }\"\n >\n <input\n :id=\"`${name}-${option.id}`\"\n class=\"sr-only\"\n type=\"radio\"\n :name=\"name\"\n :value=\"option.value\"\n :checked=\"modelValue === option.value\"\n :disabled=\"disabled || option.disabled\"\n @input=\"update\"\n />\n <div>\n <span>\n {{ option.text }}\n </span>\n </div>\n </div>\n <div\n class=\"tile-body border-r border-b border-l\"\n :class=\"{\n 'border-ice-500': modelValue !== option.value,\n 'border-blue-500': modelValue === option.value,\n }\"\n >\n <p class=\"color-ice-900 tw-m-0\">{{ option.subTitle }}</p>\n <p class=\"color-ice-700 tw-m-0\">{{ option.subText }}</p>\n </div>\n </label>\n </div>\n</template>\n\n<style scoped>\n .root {\n gap: var(--ll-space-3);\n }\n\n .root label {\n cursor: pointer;\n user-select: none;\n }\n\n .root input:disabled ~ label {\n cursor: auto;\n }\n\n .root input:hover:not(:disabled) ~ label {\n color: var(--color-ice-900);\n }\n\n .root input:not(:disabled) ~ label:hover {\n color: var(--color-ice-900);\n }\n\n .root label.tile-container {\n border-radius: var(--border-radius);\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n\n .tile-header,\n .tile-body {\n transition: all 0.2s;\n }\n\n .tile-header {\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n padding: var(--ll-space-2) 0;\n }\n\n .root label.tile-container:hover .tile-header {\n background-color: var(--color-blue-100) !important;\n border-color: var(--color-blue) !important;\n color: var(--color-ice-900) !important;\n transition: all 0.2s;\n }\n\n .tile-body {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n background-color: var(--color-white);\n padding: var(--ll-space-3);\n display: flex;\n flex-direction: column;\n }\n\n .root label.tile-container:hover .tile-body {\n border-color: var(--color-blue) !important;\n transition: all 0.2s;\n }\n\n .root input {\n appearance: none;\n background-color: var(--color-white);\n border-radius: 50%;\n width: 20px;\n height: 20px;\n border: 1px solid var(--color-ice);\n transition: all 0.2s;\n position: relative;\n cursor: pointer;\n top: 2px;\n }\n\n .root input ~ div {\n font-weight: var(--font-weight-medium);\n user-select: none;\n cursor: pointer;\n padding: 0 var(--ll-space-2);\n }\n\n .root input:disabled {\n background: #eef2f4;\n }\n\n .root input:checked {\n background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n }\n\n .root label.tile-container input {\n margin-left: var(--ll-space-2);\n }\n\n .root input:disabled:checked {\n background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n }\n\n @media screen and (width <= 640px) {\n .root {\n flex-direction: column;\n }\n }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n Radio = 'radio',\n Button = 'button',\n Chip = 'chip',\n Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n /**\n * Disables the RadioGroupOption if truthy\n */\n disabled?: boolean;\n\n /**\n * The unique identifier for the option\n */\n id: string;\n\n /**\n * The text to be displayed for the option\n */\n text: string;\n\n /**\n * The value of the option. Used for the modelValue of the RadioGroup.\n */\n value: string;\n\n /**\n * The subtitle for tile variant\n */\n subTitle?: string;\n\n /**\n * The subtext for tile variant\n */\n subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n /**\n * This type should match RadioGroupProps['disabled']\n */\n disabled: ComputedRef<boolean | undefined>;\n\n /**\n * This type should match RadioGroupProps['fullWidth']\n */\n fullWidth: ComputedRef<boolean | undefined>;\n\n /**\n * This type should match RadioGroupProps['modelValue']\n */\n modelValue: ComputedRef<string | undefined>;\n\n /**\n * This type should match RadioGroupProps['name']\n */\n name: ComputedRef<string | undefined>;\n\n /**\n * This type should match RadioGroupProps['options']\n */\n options: ComputedRef<RadioGroupOption[] | undefined>;\n\n /**\n * Triggered when the user changes their selection; updates the v-model.\n */\n update: (e: Event) => void;\n\n /**\n * This type should match RadioGroupProps['variant']\n * @default 'radio'\n */\n variant: ComputedRef<RadioGroupVariants | undefined>;\n}\n","<script lang=\"ts\">\n import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n export * from './RadioGroup.keys';\n export * from './RadioGroup.types';\n\n export interface RadioGroupProps {\n /**\n * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n */\n name?: string;\n\n /**\n * Deprecated - Compose your radio group with the `Radio` component instead\n * @deprecated\n */\n options?: RadioGroupOption[];\n\n modelValue?: RadioGroupOption['value'];\n\n /**\n * @defaultValue 'radio'\n */\n variant?: RadioGroupVariants;\n\n /**\n * Whether the entire group should be disabled\n */\n disabled?: boolean;\n\n /**\n * Whether the group should expand to the parent's width\n */\n fullWidth?: boolean;\n\n /**\n * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n */\n addBottomSpace?: boolean;\n\n /**\n * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n */\n errorText?: string;\n\n /**\n * Displays text below the input; hidden when the isReadOnly prop is truthy.\n */\n hintText?: string;\n\n /**\n * Whether it's a readonly field.\n */\n isReadOnly?: boolean;\n\n /**\n * Whether the field is required.\n */\n isRequired?: boolean;\n\n /**\n * Label to render above the input.\n */\n label?: string;\n\n /**\n * Show \"(optional)\" to the right of the label text\n */\n showOptionalInLabel?: boolean;\n }\n</script>\n\n<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, provide } from 'vue';\n\n import Field from '../Field/Field.vue';\n import VariantButton from './components/VariantButton.vue';\n import VariantChip from './components/VariantChip.vue';\n import VariantRadio from './components/VariantRadio.vue';\n import VariantTile from './components/VariantTile.vue';\n import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n const variantComponentsMap = {\n [RadioGroupVariant.Button]: VariantButton,\n [RadioGroupVariant.Chip]: VariantChip,\n [RadioGroupVariant.Radio]: VariantRadio,\n [RadioGroupVariant.Tile]: VariantTile,\n };\n\n const props = withDefaults(defineProps<RadioGroupProps>(), {\n variant: 'radio',\n disabled: false,\n fullWidth: false,\n errorText: undefined,\n hintText: undefined,\n label: undefined,\n modelValue: undefined,\n name: undefined,\n options: undefined,\n });\n\n const emit =\n defineEmits<{\n /**\n * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n */\n (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n }>();\n\n function update(e: Event) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n }\n\n const errorId = uniqueId('radio-group-field-error-');\n\n provide(RADIO_GROUP_INJECTION.key, {\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n fullWidth: computed(() => props.fullWidth),\n modelValue: computed(() => props.modelValue),\n options: computed(() => props.options),\n variant: computed(() => props.variant),\n update,\n });\n</script>\n\n<template>\n <Field\n :class=\"[\n {\n 'tw-flex': !props.options,\n 'tw-flex-wrap':\n !props.options && (props.variant === RadioGroupVariant.Chip || props.variant === RadioGroupVariant.Radio),\n 'tw-gap-x-1.5 tw-gap-y-3': !props.options && props.variant === RadioGroupVariant.Chip,\n 'tw-gap-6':\n !props.options && (props.variant === RadioGroupVariant.Radio || props.variant === RadioGroupVariant.Tile),\n },\n ]\"\n :aria-errormessage=\"errorId\"\n :aria-invalid=\"!!props.errorText\"\n role=\"radiogroup\"\n fieldset\n :label=\"props.label\"\n :add-bottom-space=\"props.addBottomSpace\"\n :error-id=\"errorId\"\n :error-text=\"props.errorText\"\n :hint-text=\"props.hintText\"\n :show-optional-in-label=\"props.showOptionalInLabel\"\n :is-required=\"props.isRequired\"\n :is-read-only=\"props.isReadOnly\"\n >\n <slot v-if=\"props.options\">\n <component :is=\"variantComponentsMap[props.variant]\" />\n </slot>\n <slot v-else></slot>\n </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACTzD,IAAAS,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCiFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASN,EAAOO,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQjB,EAAsB,KAAK;AAAA,MACjC,MAAMkB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAb;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/RadioNew.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as r, openBlock as _, createElementBlock as
|
|
1
|
+
import { defineComponent as r, openBlock as _, createElementBlock as c, normalizeClass as s, createElementVNode as t, toDisplayString as m, withDirectives as w, vShow as B, renderSlot as b, inject as x, computed as o, createBlock as k, resolveDynamicComponent as W, withCtx as C } from "vue";
|
|
2
2
|
import { R as g } from "./RadioGroup.keys-974818d6.js";
|
|
3
3
|
import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
|
|
4
4
|
const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @__PURE__ */ r({
|
|
@@ -15,7 +15,7 @@ const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
|
|
|
15
15
|
emits: ["input"],
|
|
16
16
|
setup(a, { emit: d }) {
|
|
17
17
|
const e = a;
|
|
18
|
-
return (n, l) => (_(),
|
|
18
|
+
return (n, l) => (_(), c("div", {
|
|
19
19
|
class: s(["root", { "tw-w-full": e.fullWidth }])
|
|
20
20
|
}, [
|
|
21
21
|
t("input", {
|
|
@@ -49,7 +49,7 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "
|
|
|
49
49
|
emits: ["input"],
|
|
50
50
|
setup(a, { emit: d }) {
|
|
51
51
|
const e = a;
|
|
52
|
-
return (n, l) => (_(),
|
|
52
|
+
return (n, l) => (_(), c("div", {
|
|
53
53
|
class: s(["root", { "tw-w-full": e.fullWidth }])
|
|
54
54
|
}, [
|
|
55
55
|
t("input", {
|
|
@@ -69,7 +69,7 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "
|
|
|
69
69
|
], 2));
|
|
70
70
|
}
|
|
71
71
|
});
|
|
72
|
-
const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-
|
|
72
|
+
const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8bfe9d47"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
|
|
73
73
|
__name: "VariantRadio",
|
|
74
74
|
props: {
|
|
75
75
|
disabled: { type: Boolean },
|
|
@@ -83,7 +83,7 @@ const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-c92fc3ab"]]), z = ["id", "
|
|
|
83
83
|
emits: ["input"],
|
|
84
84
|
setup(a, { emit: d }) {
|
|
85
85
|
const e = a;
|
|
86
|
-
return (n, l) => (_(),
|
|
86
|
+
return (n, l) => (_(), c("div", {
|
|
87
87
|
class: s(["root tw-flex", { "tw-w-full": e.fullWidth }])
|
|
88
88
|
}, [
|
|
89
89
|
t("input", {
|
|
@@ -119,7 +119,7 @@ const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-7175a75d"]]), J = ["for"],
|
|
|
119
119
|
emits: ["input"],
|
|
120
120
|
setup(a, { emit: d }) {
|
|
121
121
|
const e = a;
|
|
122
|
-
return (n, l) => (_(),
|
|
122
|
+
return (n, l) => (_(), c("label", {
|
|
123
123
|
class: s(["root", { "tw-w-full": e.fullWidth, "root--disabled": e.disabled }]),
|
|
124
124
|
for: `${e.name}-${e.id}`
|
|
125
125
|
}, [
|
|
@@ -179,14 +179,14 @@ const Y = /* @__PURE__ */ r({
|
|
|
179
179
|
[u.Radio]: I,
|
|
180
180
|
[u.Tile]: H
|
|
181
181
|
}, l = x(g.key, null), i = o(() => e.modelValue || (l == null ? void 0 : l.modelValue.value)), f = o(() => e.name || (l == null ? void 0 : l.name.value)), h = o(() => e.fullWidth || (l == null ? void 0 : l.fullWidth.value)), y = o(() => e.disabled || (l == null ? void 0 : l.disabled.value)), $ = o(() => e.variant || (l == null ? void 0 : l.variant.value) || "radio");
|
|
182
|
-
function V(
|
|
182
|
+
function V(p) {
|
|
183
183
|
if (l != null && l.update) {
|
|
184
|
-
l.update(
|
|
184
|
+
l.update(p);
|
|
185
185
|
return;
|
|
186
186
|
}
|
|
187
|
-
d("update:modelValue",
|
|
187
|
+
d("update:modelValue", p.target.value);
|
|
188
188
|
}
|
|
189
|
-
return (
|
|
189
|
+
return (p, K) => (_(), k(W(n[$.value]), {
|
|
190
190
|
id: e.id,
|
|
191
191
|
disabled: y.value,
|
|
192
192
|
"has-error": e.hasError,
|
|
@@ -198,7 +198,7 @@ const Y = /* @__PURE__ */ r({
|
|
|
198
198
|
onInput: V
|
|
199
199
|
}, {
|
|
200
200
|
default: C(() => [
|
|
201
|
-
b(
|
|
201
|
+
b(p.$slots, "default")
|
|
202
202
|
]),
|
|
203
203
|
_: 3
|
|
204
204
|
}, 40, ["id", "disabled", "has-error", "full-width", "label", "model-value", "name", "value"]));
|
package/dist/Step.vue.d.ts
CHANGED