@stachelock/ui 0.1.3 → 0.1.5
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/{CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js → CalendarHeader.vue_vue_type_script_setup_true_lang-Cirr0hMB.js} +2 -2
- package/dist/{CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js.map → CalendarHeader.vue_vue_type_script_setup_true_lang-Cirr0hMB.js.map} +1 -1
- package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-2dJNxQUF.js +1300 -0
- package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-2dJNxQUF.js.map +1 -0
- package/dist/{DashboardLayout.vue_vue_type_script_setup_true_lang-CClxYrOW.js → DashboardLayout.vue_vue_type_script_setup_true_lang-VeZhdPhj.js} +38 -37
- package/dist/DashboardLayout.vue_vue_type_script_setup_true_lang-VeZhdPhj.js.map +1 -0
- package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js +217 -0
- package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js.map +1 -0
- package/dist/{DynamicFormField.vue_vue_type_script_setup_true_lang-qAwVNm--.js → DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js} +40 -24
- package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js.map +1 -0
- package/dist/EventCard.vue_vue_type_script_setup_true_lang-YV1lfgUY.js +157 -0
- package/dist/EventCard.vue_vue_type_script_setup_true_lang-YV1lfgUY.js.map +1 -0
- package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cn_WOpZi.js +103 -0
- package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cn_WOpZi.js.map +1 -0
- package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BPjHLHdM.js +522 -0
- package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BPjHLHdM.js.map +1 -0
- package/dist/{SidebarLayout.vue_vue_type_script_setup_true_lang-CQIW5dy_.js → SidebarLayout.vue_vue_type_script_setup_true_lang-J1nfUTdM.js} +28 -27
- package/dist/{SidebarLayout.vue_vue_type_script_setup_true_lang-CQIW5dy_.js.map → SidebarLayout.vue_vue_type_script_setup_true_lang-J1nfUTdM.js.map} +1 -1
- package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BFr2SByh.js +273 -0
- package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BFr2SByh.js.map +1 -0
- package/dist/{TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js → TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js} +60 -50
- package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js.map +1 -0
- package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js +82 -0
- package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js.map +1 -0
- package/dist/{UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js → UiModal.vue_vue_type_script_setup_true_lang-SAo39zpS.js} +21 -20
- package/dist/{UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js.map → UiModal.vue_vue_type_script_setup_true_lang-SAo39zpS.js.map} +1 -1
- package/dist/XMarkIcon-C4wILUsz.js +40 -0
- package/dist/XMarkIcon-C4wILUsz.js.map +1 -0
- package/dist/calculate-active-index-CksdUwZY.js +87 -0
- package/dist/calculate-active-index-CksdUwZY.js.map +1 -0
- package/dist/calendars/CalendarDashboard.js +2 -2
- package/dist/calendars/CalendarHeader.js +1 -1
- package/dist/calendars/EventCard.js +1 -1
- package/dist/calendars/EventsList.js +1 -1
- package/dist/components/Breadcrumb.js +1 -1
- package/dist/components/Modal.js +1 -1
- package/dist/components/RadialProgressBar.d.ts +2 -2
- package/dist/components/RadialProgressBar.js +1 -1
- package/dist/description-CBd3BJ9O.js +30 -0
- package/dist/description-CBd3BJ9O.js.map +1 -0
- package/dist/dialog-U1KNiPzc.js +493 -0
- package/dist/dialog-U1KNiPzc.js.map +1 -0
- package/dist/form-DQKuKVqJ.js +51 -0
- package/dist/form-DQKuKVqJ.js.map +1 -0
- package/dist/forms/DynamicForm.js +1 -1
- package/dist/forms/DynamicFormField.js +1 -1
- package/dist/forms/FormFieldWrapper.js +71 -42
- package/dist/forms/FormFieldWrapper.js.map +1 -1
- package/dist/index.js +307 -242
- package/dist/index.js.map +1 -1
- package/dist/inputs/ComboboxInput.js +1 -1
- package/dist/inputs/SelectInput.js +1 -1
- package/dist/inputs/SwitchInput.js +1 -1
- package/dist/inputs/TagifyInput.js +1 -1
- package/dist/keyboard-DJD8TwH4.js +113 -0
- package/dist/keyboard-DJD8TwH4.js.map +1 -0
- package/dist/layouts/DashboardLayout.js +1 -1
- package/dist/layouts/SidebarLayout.js +1 -1
- package/dist/open-closed-DgcU-HDT.js +179 -0
- package/dist/open-closed-DgcU-HDT.js.map +1 -0
- package/dist/src/components/layouts/DashboardLayout.d.ts.map +1 -1
- package/dist/src/components/layouts/SidebarLayout.d.ts.map +1 -1
- package/dist/transition-CuxxW9dY.js +209 -0
- package/dist/transition-CuxxW9dY.js.map +1 -0
- package/package.json +1 -1
- package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js +0 -304
- package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js.map +0 -1
- package/dist/DashboardLayout.vue_vue_type_script_setup_true_lang-CClxYrOW.js.map +0 -1
- package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BKhcXkNG.js +0 -201
- package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BKhcXkNG.js.map +0 -1
- package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-qAwVNm--.js.map +0 -1
- package/dist/EventCard.vue_vue_type_script_setup_true_lang-B3TP-mWX.js +0 -75
- package/dist/EventCard.vue_vue_type_script_setup_true_lang-B3TP-mWX.js.map +0 -1
- package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cpc9A9Ev.js +0 -89
- package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cpc9A9Ev.js.map +0 -1
- package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BguP8xMU.js +0 -242
- package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BguP8xMU.js.map +0 -1
- package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js +0 -197
- package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js.map +0 -1
- package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js.map +0 -1
- package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js +0 -68
- package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js.map +0 -1
- package/dist/UiRadialProgressBar.vue_vue_type_script_setup_true_lang-BGCBJa2S.js +0 -72
- package/dist/UiRadialProgressBar.vue_vue_type_script_setup_true_lang-BGCBJa2S.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-DQKuKVqJ.js","sources":["../node_modules/@headlessui/vue/dist/hooks/use-controllable.js","../node_modules/@headlessui/vue/dist/hooks/use-resolve-button-type.js","../node_modules/@headlessui/vue/dist/utils/form.js"],"sourcesContent":["import{computed as p,ref as s}from\"vue\";function d(u,e,r){let i=s(r==null?void 0:r.value),f=p(()=>u.value!==void 0);return[p(()=>f.value?u.value:i.value),function(t){return f.value||(i.value=t),e==null?void 0:e(t)}]}export{d as useControllable};\n","import{onMounted as i,ref as f,watchEffect as l}from\"vue\";import{dom as o}from'../utils/dom.js';function r(t,e){if(t)return t;let n=e!=null?e:\"button\";if(typeof n==\"string\"&&n.toLowerCase()===\"button\")return\"button\"}function s(t,e){let n=f(r(t.value.type,t.value.as));return i(()=>{n.value=r(t.value.type,t.value.as)}),l(()=>{var u;n.value||o(e)&&o(e)instanceof HTMLButtonElement&&!((u=o(e))!=null&&u.hasAttribute(\"type\"))&&(n.value=\"button\")}),n}export{s as useResolveButtonType};\n","function e(i={},s=null,t=[]){for(let[r,n]of Object.entries(i))o(t,f(s,r),n);return t}function f(i,s){return i?i+\"[\"+s+\"]\":s}function o(i,s,t){if(Array.isArray(t))for(let[r,n]of t.entries())o(i,f(s,r.toString()),n);else t instanceof Date?i.push([s,t.toISOString()]):typeof t==\"boolean\"?i.push([s,t?\"1\":\"0\"]):typeof t==\"string\"?i.push([s,t]):typeof t==\"number\"?i.push([s,`${t}`]):t==null?i.push([s,\"\"]):e(t,s,i)}function p(i){var t,r;let s=(t=i==null?void 0:i.form)!=null?t:i.closest(\"form\");if(s){for(let n of s.elements)if(n!==i&&(n.tagName===\"INPUT\"&&n.type===\"submit\"||n.tagName===\"BUTTON\"&&n.type===\"submit\"||n.nodeName===\"INPUT\"&&n.type===\"image\")){n.click();return}(r=s.requestSubmit)==null||r.call(s)}}export{p as attemptSubmit,e as objectToFormEntries};\n"],"names":["u","e","r","i","s","f","p","t","n","l","o"],"mappings":";;AAAwC,SAAS,EAAEA,GAAEC,GAAEC,GAAE;AAAC,MAAIC,IAAEC,EAAiBF,GAAE,KAAK,GAAEG,IAAEC,EAAE,MAAIN,EAAE,UAAQ,MAAM;AAAE,SAAM,CAACM,EAAE,MAAID,EAAE,QAAML,EAAE,QAAMG,EAAE,KAAK,GAAE,SAASI,GAAE;AAAC,WAAOF,EAAE,UAAQF,EAAE,QAAMI,IAAkBN,IAAEM,CAAC;AAAA,EAAC,CAAC;AAAC;ACAvH,SAASL,EAAEK,GAAEN,GAAE;AAAC,MAAGM,EAAE,QAAOA;AAAE,MAAIC,IAAEP,KAAU;AAAS,MAAG,OAAOO,KAAG,YAAUA,EAAE,YAAW,MAAK,SAAS,QAAM;AAAQ;AAAC,SAASJ,EAAEG,GAAEN,GAAE;AAAC,MAAIO,IAAEH,EAAEH,EAAEK,EAAE,MAAM,MAAKA,EAAE,MAAM,EAAE,CAAC;AAAE,SAAOJ,EAAE,MAAI;AAAC,IAAAK,EAAE,QAAMN,EAAEK,EAAE,MAAM,MAAKA,EAAE,MAAM,EAAE;AAAA,EAAC,CAAC,GAAEE,EAAE,MAAI;AAAC,QAAIT;AAAE,IAAAQ,EAAE,SAAOE,EAAET,CAAC,KAAGS,EAAET,CAAC,aAAY,qBAAmB,GAAGD,IAAEU,EAAET,CAAC,MAAI,QAAMD,EAAE,aAAa,MAAM,OAAKQ,EAAE,QAAM;AAAA,EAAS,CAAC,GAAEA;AAAC;ACA9b,SAASP,EAAEE,IAAE,CAAA,GAAGC,IAAE,MAAKG,IAAE,CAAA,GAAG;AAAC,WAAO,CAACL,GAAEM,CAAC,KAAI,OAAO,QAAQL,CAAC,EAAE,CAAAO,EAAEH,GAAEF,EAAED,GAAEF,CAAC,GAAEM,CAAC;AAAE,SAAOD;AAAC;AAAC,SAASF,EAAEF,GAAEC,GAAE;AAAC,SAAOD,IAAEA,IAAE,MAAIC,IAAE,MAAIA;AAAC;AAAC,SAASM,EAAEP,GAAEC,GAAEG,GAAE;AAAC,MAAG,MAAM,QAAQA,CAAC,EAAE,UAAO,CAACL,GAAEM,CAAC,KAAID,EAAE,QAAO,EAAG,CAAAG,EAAEP,GAAEE,EAAED,GAAEF,EAAE,SAAQ,CAAE,GAAEM,CAAC;AAAA,MAAO,CAAAD,aAAa,OAAKJ,EAAE,KAAK,CAACC,GAAEG,EAAE,YAAW,CAAE,CAAC,IAAE,OAAOA,KAAG,YAAUJ,EAAE,KAAK,CAACC,GAAEG,IAAE,MAAI,GAAG,CAAC,IAAE,OAAOA,KAAG,WAASJ,EAAE,KAAK,CAACC,GAAEG,CAAC,CAAC,IAAE,OAAOA,KAAG,WAASJ,EAAE,KAAK,CAACC,GAAE,GAAGG,CAAC,EAAE,CAAC,IAAEA,KAAG,OAAKJ,EAAE,KAAK,CAACC,GAAE,EAAE,CAAC,IAAEH,EAAEM,GAAEH,GAAED,CAAC;AAAC;AAAC,SAASG,EAAEH,GAAE;AAAC,MAAI,GAAED;AAAE,MAAIE,KAAG,IAAiBD,GAAE,SAAO,OAAK,IAAEA,EAAE,QAAQ,MAAM;AAAE,MAAGC,GAAE;AAAC,aAAQI,KAAKJ,EAAE,SAAS,KAAGI,MAAIL,MAAIK,EAAE,YAAU,WAASA,EAAE,SAAO,YAAUA,EAAE,YAAU,YAAUA,EAAE,SAAO,YAAUA,EAAE,aAAW,WAASA,EAAE,SAAO,UAAS;AAAC,MAAAA,EAAE,MAAK;AAAG;AAAA,IAAM;AAAC,KAACN,IAAEE,EAAE,kBAAgB,QAAMF,EAAE,KAAKE,CAAC;AAAA,EAAC;AAAC;","x_google_ignoreList":[0,1,2]}
|
|
@@ -1,31 +1,60 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ExclamationCircleIcon as T, CheckCircleIcon as V } from "@heroicons/vue/20/solid";
|
|
1
|
+
import { createElementBlock as l, openBlock as t, createElementVNode as a, defineComponent as b, useSlots as w, computed as c, normalizeClass as n, createVNode as f, createCommentVNode as o, createTextVNode as d, toDisplayString as i, Fragment as g, renderSlot as r, unref as h, Transition as k, withCtx as C } from "vue";
|
|
3
2
|
import { _ as M } from "../_plugin-vue_export-helper-CHgC5LLL.js";
|
|
4
|
-
|
|
3
|
+
function B(u, e) {
|
|
4
|
+
return t(), l("svg", {
|
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
6
|
+
viewBox: "0 0 20 20",
|
|
7
|
+
fill: "currentColor",
|
|
8
|
+
"aria-hidden": "true",
|
|
9
|
+
"data-slot": "icon"
|
|
10
|
+
}, [
|
|
11
|
+
a("path", {
|
|
12
|
+
"fill-rule": "evenodd",
|
|
13
|
+
d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z",
|
|
14
|
+
"clip-rule": "evenodd"
|
|
15
|
+
})
|
|
16
|
+
]);
|
|
17
|
+
}
|
|
18
|
+
function T(u, e) {
|
|
19
|
+
return t(), l("svg", {
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
viewBox: "0 0 20 20",
|
|
22
|
+
fill: "currentColor",
|
|
23
|
+
"aria-hidden": "true",
|
|
24
|
+
"data-slot": "icon"
|
|
25
|
+
}, [
|
|
26
|
+
a("path", {
|
|
27
|
+
"fill-rule": "evenodd",
|
|
28
|
+
d: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
|
|
29
|
+
"clip-rule": "evenodd"
|
|
30
|
+
})
|
|
31
|
+
]);
|
|
32
|
+
}
|
|
33
|
+
const V = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, x = ["for"], E = {
|
|
5
34
|
key: 0,
|
|
6
35
|
class: "sl-text-red-500 sl-ml-1"
|
|
7
|
-
},
|
|
36
|
+
}, $ = { class: "disabled-message sl-text-xs sl-text-gray-400 sl-col-start-3 sl-text-right" }, F = {
|
|
8
37
|
key: 0,
|
|
9
38
|
class: "sl-text-xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3"
|
|
10
|
-
},
|
|
39
|
+
}, S = {
|
|
11
40
|
key: 0,
|
|
12
41
|
class: "sl-text-2xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3"
|
|
13
|
-
},
|
|
42
|
+
}, L = {
|
|
14
43
|
key: 0,
|
|
15
44
|
class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none"
|
|
16
|
-
},
|
|
45
|
+
}, Z = {
|
|
17
46
|
key: 1,
|
|
18
47
|
class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none"
|
|
19
|
-
},
|
|
48
|
+
}, I = { class: "sl-flex sl-select-none sl-items-center sl-pl-3 sl-text-gray-500 sm:sl-text-sm" }, N = { class: "sl-flex-1 sl-min-w-0" }, z = {
|
|
20
49
|
key: 3,
|
|
21
50
|
class: "sl-relative"
|
|
22
|
-
},
|
|
51
|
+
}, j = { class: "sl-flex-1 sl-min-w-0 sl-pl-2 sl-pr-2" }, H = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center" }, R = {
|
|
23
52
|
key: 0,
|
|
24
53
|
class: "error-message sl-mt-2 sl-text-sm sl-text-red-600 sl-bg-red-50 sl-ring-1 sl-ring-red-100 sl-rounded-md sl-p-2"
|
|
25
|
-
},
|
|
54
|
+
}, W = {
|
|
26
55
|
key: 1,
|
|
27
56
|
class: "success-message sl-mt-2 sl-text-sm sl-text-green-600 sl-bg-green-50 sl-p-2 sl-rounded-md"
|
|
28
|
-
},
|
|
57
|
+
}, A = "sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1.5 sl-text-gray-800 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6", D = "sl-block sl-w-full sl-rounded-md sl-border-0 sl-py-1.5 sl-text-gray-800 sl-shadow-sm sl-ring-1 sl-ring-inset sl-placeholder:text-gray-400 focus:sl-ring-2 focus:sl-ring-inset focus:sl-ring-stachelock-600 sm:sl-text-sm sm:sl-leading-6", P = "sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1 sl-text-gray-400 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6 sl-cursor-not-allowed", q = /* @__PURE__ */ b({
|
|
29
58
|
__name: "FormFieldWrapper",
|
|
30
59
|
props: {
|
|
31
60
|
id: {},
|
|
@@ -48,39 +77,39 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, E = ["for"], $ =
|
|
|
48
77
|
isHovered: { type: Boolean, default: !1 },
|
|
49
78
|
externalErrors: { default: null }
|
|
50
79
|
},
|
|
51
|
-
setup(
|
|
52
|
-
const e =
|
|
80
|
+
setup(u) {
|
|
81
|
+
const e = u, m = w(), y = c(() => !!m.prefix), v = c(() => [
|
|
53
82
|
e.boxShadow ? "sl-shadow sm:sl-rounded-lg sl-mt-2 sl-mb-4 sl-px-4 sl-py-5 sm:sl-p-6" : "",
|
|
54
83
|
e.formTracking && (e.isFocused || e.isHovered) ? "sl-ring-1 sl-ring-stachelock-600 sl-bg-white/80" : "",
|
|
55
84
|
e.externalErrors && e.externalErrors[e.name] ? "has-error" : ""
|
|
56
|
-
]),
|
|
57
|
-
return (s,
|
|
85
|
+
]), p = c(() => e.disabled || !e.colorfulValidation ? "sl-ring-gray-300" : e.isValid && (e.isTouched || e.showValidCheck) ? "sl-ring-green-500" : e.errorMessage && (e.isTouched || e.showErrors) ? "sl-ring-red-500" : "sl-ring-gray-300");
|
|
86
|
+
return (s, G) => (t(), l("div", {
|
|
58
87
|
class: n([[
|
|
59
88
|
{
|
|
60
89
|
"has-error": !!s.errorMessage && (s.isTouched || s.showErrors),
|
|
61
90
|
success: s.isValid && s.isTouched
|
|
62
91
|
},
|
|
63
|
-
|
|
92
|
+
v.value
|
|
64
93
|
], "sl-text-sm"]),
|
|
65
94
|
"data-testid": "form-field-wrapper"
|
|
66
95
|
}, [
|
|
67
|
-
a("div",
|
|
96
|
+
a("div", V, [
|
|
68
97
|
s.label ? (t(), l("label", {
|
|
69
98
|
key: 0,
|
|
70
99
|
for: s.id,
|
|
71
100
|
class: "sl-text-sm sl-col-span-2 sl-font-medium sl-text-gray-700"
|
|
72
101
|
}, [
|
|
73
102
|
d(i(s.label) + " ", 1),
|
|
74
|
-
s.optional ? o("", !0) : (t(), l("span",
|
|
75
|
-
], 8,
|
|
76
|
-
s.disabled && s.disabledMessage ? (t(), l(
|
|
77
|
-
a("p",
|
|
103
|
+
s.optional ? o("", !0) : (t(), l("span", E, "*"))
|
|
104
|
+
], 8, x)) : o("", !0),
|
|
105
|
+
s.disabled && s.disabledMessage ? (t(), l(g, { key: 1 }, [
|
|
106
|
+
a("p", $, i(s.disabledMessage), 1),
|
|
78
107
|
s.tertiaryLabel ? (t(), l("span", F, [
|
|
79
108
|
d(i(s.tertiaryLabel) + " ", 1),
|
|
80
109
|
r(s.$slots, "tertiary-label-overlay", {}, void 0, !0)
|
|
81
110
|
])) : o("", !0)
|
|
82
|
-
], 64)) : (t(), l(
|
|
83
|
-
s.tertiaryLabel ? (t(), l("span",
|
|
111
|
+
], 64)) : (t(), l(g, { key: 2 }, [
|
|
112
|
+
s.tertiaryLabel ? (t(), l("span", S, [
|
|
84
113
|
d(i(s.tertiaryLabel) + " ", 1),
|
|
85
114
|
r(s.$slots, "tertiary-label-overlay", {}, void 0, !0)
|
|
86
115
|
])) : o("", !0)
|
|
@@ -89,14 +118,14 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, E = ["for"], $ =
|
|
|
89
118
|
a("div", {
|
|
90
119
|
class: n(["sl-relative", { "sl-mt-2": s.label }])
|
|
91
120
|
}, [
|
|
92
|
-
s.errorMessage && (s.isTouched || s.showErrors) ? (t(), l("div",
|
|
93
|
-
|
|
121
|
+
s.errorMessage && (s.isTouched || s.showErrors) ? (t(), l("div", L, [
|
|
122
|
+
f(h(T), {
|
|
94
123
|
class: "sl-h-5 sl-w-5 sl-text-red-500",
|
|
95
124
|
"aria-hidden": "true",
|
|
96
125
|
"data-testid": "error-icon"
|
|
97
126
|
})
|
|
98
|
-
])) : s.showValidCheck && s.isValid && s.isTouched ? (t(), l("div",
|
|
99
|
-
|
|
127
|
+
])) : s.showValidCheck && s.isValid && s.isTouched ? (t(), l("div", Z, [
|
|
128
|
+
f(h(B), {
|
|
100
129
|
class: "sl-h-5 sl-w-5 sl-text-green-500",
|
|
101
130
|
"aria-hidden": "true",
|
|
102
131
|
"data-testid": "check-icon"
|
|
@@ -104,33 +133,33 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, E = ["for"], $ =
|
|
|
104
133
|
])) : o("", !0),
|
|
105
134
|
y.value ? (t(), l("div", {
|
|
106
135
|
key: 2,
|
|
107
|
-
class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600",
|
|
136
|
+
class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600", p.value])
|
|
108
137
|
}, [
|
|
109
|
-
a("div",
|
|
138
|
+
a("div", I, [
|
|
110
139
|
r(s.$slots, "prefix", {}, void 0, !0)
|
|
111
140
|
]),
|
|
112
|
-
a("div",
|
|
113
|
-
r(s.$slots, "default", { inputClasses:
|
|
141
|
+
a("div", N, [
|
|
142
|
+
r(s.$slots, "default", { inputClasses: A }, void 0, !0)
|
|
114
143
|
]),
|
|
115
144
|
r(s.$slots, "input-right", {}, void 0, !0)
|
|
116
|
-
], 2)) : (t(), l("div",
|
|
145
|
+
], 2)) : (t(), l("div", z, [
|
|
117
146
|
s.disabled ? (t(), l("div", {
|
|
118
147
|
key: 0,
|
|
119
|
-
class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-bg-gray-50",
|
|
148
|
+
class: n(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-bg-gray-50", p.value])
|
|
120
149
|
}, [
|
|
121
|
-
a("div",
|
|
122
|
-
r(s.$slots, "default", { inputClasses:
|
|
150
|
+
a("div", j, [
|
|
151
|
+
r(s.$slots, "default", { inputClasses: P }, void 0, !0)
|
|
123
152
|
]),
|
|
124
153
|
r(s.$slots, "input-right", {}, void 0, !0)
|
|
125
|
-
], 2)) : (t(), l(
|
|
126
|
-
r(s.$slots, "default", { inputClasses:
|
|
127
|
-
a("div",
|
|
154
|
+
], 2)) : (t(), l(g, { key: 1 }, [
|
|
155
|
+
r(s.$slots, "default", { inputClasses: D }, void 0, !0),
|
|
156
|
+
a("div", H, [
|
|
128
157
|
r(s.$slots, "input-right", {}, void 0, !0)
|
|
129
158
|
])
|
|
130
159
|
], 64))
|
|
131
160
|
]))
|
|
132
161
|
], 2),
|
|
133
|
-
|
|
162
|
+
f(k, {
|
|
134
163
|
show: !!s.errorMessage && (s.isTouched || s.showErrors) || s.isValid && !!s.successMessage && s.isTouched,
|
|
135
164
|
appear: !0,
|
|
136
165
|
"enter-active-class": "sl-transition sl-ease-out sl-duration-300",
|
|
@@ -141,7 +170,7 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, E = ["for"], $ =
|
|
|
141
170
|
"leave-to-class": "sl-opacity-0 sl-transform sl-scale-95"
|
|
142
171
|
}, {
|
|
143
172
|
default: C(() => [
|
|
144
|
-
s.errorMessage && (s.isTouched || s.showErrors) ? (t(), l("p",
|
|
173
|
+
s.errorMessage && (s.isTouched || s.showErrors) ? (t(), l("p", R, i(s.errorMessage), 1)) : s.isValid && s.successMessage && s.isTouched ? (t(), l("p", W, [
|
|
145
174
|
r(s.$slots, "success-message", {}, () => [
|
|
146
175
|
d(i(s.successMessage), 1)
|
|
147
176
|
], !0)
|
|
@@ -151,8 +180,8 @@ const B = { class: "sl-grid sl-grid-cols-3 sl-items-center" }, E = ["for"], $ =
|
|
|
151
180
|
}, 8, ["show"])
|
|
152
181
|
], 2));
|
|
153
182
|
}
|
|
154
|
-
}),
|
|
183
|
+
}), O = /* @__PURE__ */ M(q, [["__scopeId", "data-v-23518b3b"]]);
|
|
155
184
|
export {
|
|
156
|
-
|
|
185
|
+
O as default
|
|
157
186
|
};
|
|
158
187
|
//# sourceMappingURL=FormFieldWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldWrapper.js","sources":["../../src/components/forms/FormFieldWrapper.vue"],"sourcesContent":["<template>\n <div :class=\"[\n {\n 'has-error': !!errorMessage && (isTouched || showErrors),\n 'success': isValid && isTouched,\n },\n fieldClasses\n ]\" class=\"sl-text-sm\" data-testid=\"form-field-wrapper\">\n <div class=\"sl-grid sl-grid-cols-3 sl-items-center\">\n <label v-if=\"label\" :for=\"id\" class=\"sl-text-sm sl-col-span-2 sl-font-medium sl-text-gray-700\">\n {{ label }}\n <span v-if=\"!optional\" class=\"sl-text-red-500 sl-ml-1\">*</span>\n </label>\n <template v-if=\"disabled && disabledMessage\">\n <p class=\"disabled-message sl-text-xs sl-text-gray-400 sl-col-start-3 sl-text-right\">\n {{ disabledMessage }}\n </p>\n <span v-if=\"tertiaryLabel\"\n class=\"sl-text-xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3\">\n {{ tertiaryLabel }}\n <slot name=\"tertiary-label-overlay\"></slot>\n </span>\n </template>\n <template v-else>\n <span v-if=\"tertiaryLabel\"\n class=\"sl-text-2xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3\">\n {{ tertiaryLabel }}\n <slot name=\"tertiary-label-overlay\"></slot>\n </span>\n </template>\n </div>\n\n <div class=\"sl-relative\" :class=\"{ 'sl-mt-2': label }\">\n <!-- Error Icon -->\n <div v-if=\"!!errorMessage && (isTouched || showErrors)\"\n class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none\">\n <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-500\" aria-hidden=\"true\" data-testid=\"error-icon\" />\n </div>\n <!-- Success Icon -->\n <div v-else-if=\"showValidCheck && isValid && isTouched\"\n class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none\">\n <CheckCircleIcon class=\"sl-h-5 sl-w-5 sl-text-green-500\" aria-hidden=\"true\" data-testid=\"check-icon\" />\n </div>\n\n <!-- Input with prefix slot -->\n <div v-if=\"hasPrefixSlot\"\n class=\"sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600\"\n :class=\"wrapperRingClasses\">\n <div class=\"sl-flex sl-select-none sl-items-center sl-pl-3 sl-text-gray-500 sm:sl-text-sm\">\n <slot name=\"prefix\" />\n </div>\n <div class=\"sl-flex-1 sl-min-w-0\">\n <slot :input-classes=\"defaultInputClasses\"></slot>\n </div>\n <slot name=\"input-right\" />\n </div>\n\n <!-- Plain input (default slot):\n - When disabled, show a unified wrapper ring to match design\n - Otherwise, apply ring directly on the input element\n -->\n <div v-else class=\"sl-relative\">\n <template v-if=\"disabled\">\n <div class=\"sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-bg-gray-50\"\n :class=\"wrapperRingClasses\">\n <div class=\"sl-flex-1 sl-min-w-0 sl-pl-2 sl-pr-2\">\n <slot :input-classes=\"disabledInputClasses\"></slot>\n </div>\n <slot name=\"input-right\" />\n </div>\n </template>\n <template v-else>\n <slot :input-classes=\"defaultInputRingClasses\"></slot>\n <div class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center\">\n <slot name=\"input-right\" />\n </div>\n </template>\n </div>\n </div>\n\n <Transition :show=\"(!!errorMessage && (isTouched || showErrors)) || (isValid && !!successMessage && isTouched)\"\n :appear=\"true\" enter-active-class=\"sl-transition sl-ease-out sl-duration-300\"\n enter-from-class=\"sl-opacity-0 sl-transform sl-scale-95\" enter-to-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n leave-active-class=\"sl-transition sl-ease-in sl-duration-200\"\n leave-from-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n leave-to-class=\"sl-opacity-0 sl-transform sl-scale-95\">\n <p v-if=\"!!errorMessage && (isTouched || showErrors)\"\n class=\"error-message sl-mt-2 sl-text-sm sl-text-red-600 sl-bg-red-50 sl-ring-1 sl-ring-red-100 sl-rounded-md sl-p-2\">\n {{ errorMessage }}\n </p>\n <p v-else-if=\"isValid && !!successMessage && isTouched\"\n class=\"success-message sl-mt-2 sl-text-sm sl-text-green-600 sl-bg-green-50 sl-p-2 sl-rounded-md\">\n <slot name=\"success-message\">{{ successMessage }}</slot>\n </p>\n </Transition>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid'\n// (Transition is used in the template via built-in component)\n\ninterface FormFieldWrapperProps {\n id: string\n name: string\n label?: string\n tertiaryLabel?: string\n errorMessage?: string | null\n successMessage?: string\n isValid?: boolean\n isTouched?: boolean\n showErrors?: boolean // To force show errors\n showValidCheck?: boolean\n colorfulValidation?: boolean\n disabled?: boolean\n disabledMessage?: string\n optional?: boolean\n boxShadow?: boolean\n formTracking?: boolean\n isFocused?: boolean\n isHovered?: boolean\n externalErrors?: Record<string, unknown> | null\n}\n\nconst props = withDefaults(defineProps<FormFieldWrapperProps>(), {\n label: '',\n tertiaryLabel: '',\n errorMessage: null,\n successMessage: '',\n isValid: false,\n isTouched: false,\n showErrors: false,\n showValidCheck: true,\n colorfulValidation: false,\n disabled: false,\n disabledMessage: '',\n optional: false,\n boxShadow: false,\n formTracking: false,\n isFocused: false,\n isHovered: false,\n externalErrors: null,\n})\n\nconst slots = useSlots()\nconst hasPrefixSlot = computed(() => !!slots.prefix)\n\n// Optional card-like container and form-tracking ring classes\nconst fieldClasses = computed(() => [\n props.boxShadow ? 'sl-shadow sm:sl-rounded-lg sl-mt-2 sl-mb-4 sl-px-4 sl-py-5 sm:sl-p-6' : '',\n (props.formTracking && (props.isFocused || props.isHovered)) ? 'sl-ring-1 sl-ring-stachelock-600 sl-bg-white/80' : '',\n props.externalErrors && props.externalErrors[props.name] ? 'has-error' : ''\n])\n\nconst wrapperRingClasses = computed(() => {\n if (props.disabled) return 'sl-ring-gray-300'\n if (!props.colorfulValidation) return 'sl-ring-gray-300'\n if (props.isValid && (props.isTouched || props.showValidCheck)) return 'sl-ring-green-500'\n if (!!props.errorMessage && (props.isTouched || props.showErrors)) return 'sl-ring-red-500'\n return 'sl-ring-gray-300'\n})\n\n// Default classes that can be passed to the slotted input for consistency with TextInput\nconst defaultInputClasses = \"sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1.5 sl-text-gray-800 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6\"\nconst defaultInputRingClasses = \"sl-block sl-w-full sl-rounded-md sl-border-0 sl-py-1.5 sl-text-gray-800 sl-shadow-sm sl-ring-1 sl-ring-inset sl-placeholder:text-gray-400 focus:sl-ring-2 focus:sl-ring-inset focus:sl-ring-stachelock-600 sm:sl-text-sm sm:sl-leading-6\"\nconst disabledInputClasses = \"sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1 sl-text-gray-400 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6 sl-cursor-not-allowed\"\n</script>\n\n<style scoped>\n.error-message,\n.success-message,\n.disabled-message {\n min-height: 1.4em;\n /* Match TextInput for layout consistency */\n}\n</style>\n"],"names":["defaultInputClasses","defaultInputRingClasses","disabledInputClasses","props","__props","slots","useSlots","hasPrefixSlot","computed","fieldClasses","wrapperRingClasses","_createElementBlock","_normalizeClass","errorMessage","isTouched","showErrors","isValid","_createElementVNode","_hoisted_1","label","id","optional","_hoisted_3","disabled","disabledMessage","_Fragment","_hoisted_4","_toDisplayString","tertiaryLabel","_openBlock","_hoisted_5","_renderSlot","_ctx","_hoisted_6","_hoisted_7","_createVNode","_unref","ExclamationCircleIcon","showValidCheck","_hoisted_8","CheckCircleIcon","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_Transition","successMessage","_hoisted_14","_hoisted_15"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormFieldWrapper.js","sources":["../../node_modules/@heroicons/vue/20/solid/esm/CheckCircleIcon.js","../../node_modules/@heroicons/vue/20/solid/esm/ExclamationCircleIcon.js","../../src/components/forms/FormFieldWrapper.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\",\n fill: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"fill-rule\": \"evenodd\",\n d: \"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z\",\n \"clip-rule\": \"evenodd\"\n })\n ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n return (_openBlock(), _createElementBlock(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\",\n fill: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\"\n }, [\n _createElementVNode(\"path\", {\n \"fill-rule\": \"evenodd\",\n d: \"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\",\n \"clip-rule\": \"evenodd\"\n })\n ]))\n}","<template>\n <div :class=\"[\n {\n 'has-error': !!errorMessage && (isTouched || showErrors),\n 'success': isValid && isTouched,\n },\n fieldClasses\n ]\" class=\"sl-text-sm\" data-testid=\"form-field-wrapper\">\n <div class=\"sl-grid sl-grid-cols-3 sl-items-center\">\n <label v-if=\"label\" :for=\"id\" class=\"sl-text-sm sl-col-span-2 sl-font-medium sl-text-gray-700\">\n {{ label }}\n <span v-if=\"!optional\" class=\"sl-text-red-500 sl-ml-1\">*</span>\n </label>\n <template v-if=\"disabled && disabledMessage\">\n <p class=\"disabled-message sl-text-xs sl-text-gray-400 sl-col-start-3 sl-text-right\">\n {{ disabledMessage }}\n </p>\n <span v-if=\"tertiaryLabel\"\n class=\"sl-text-xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3\">\n {{ tertiaryLabel }}\n <slot name=\"tertiary-label-overlay\"></slot>\n </span>\n </template>\n <template v-else>\n <span v-if=\"tertiaryLabel\"\n class=\"sl-text-2xs sl-uppercase sl-text-gray-500 sl-truncate sl-text-right sl-font-semibold sl-justify-self-end sl-col-start-3\">\n {{ tertiaryLabel }}\n <slot name=\"tertiary-label-overlay\"></slot>\n </span>\n </template>\n </div>\n\n <div class=\"sl-relative\" :class=\"{ 'sl-mt-2': label }\">\n <!-- Error Icon -->\n <div v-if=\"!!errorMessage && (isTouched || showErrors)\"\n class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none\">\n <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-500\" aria-hidden=\"true\" data-testid=\"error-icon\" />\n </div>\n <!-- Success Icon -->\n <div v-else-if=\"showValidCheck && isValid && isTouched\"\n class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-10 sl-pointer-events-none\">\n <CheckCircleIcon class=\"sl-h-5 sl-w-5 sl-text-green-500\" aria-hidden=\"true\" data-testid=\"check-icon\" />\n </div>\n\n <!-- Input with prefix slot -->\n <div v-if=\"hasPrefixSlot\"\n class=\"sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset focus-within:sl-ring-stachelock-600\"\n :class=\"wrapperRingClasses\">\n <div class=\"sl-flex sl-select-none sl-items-center sl-pl-3 sl-text-gray-500 sm:sl-text-sm\">\n <slot name=\"prefix\" />\n </div>\n <div class=\"sl-flex-1 sl-min-w-0\">\n <slot :input-classes=\"defaultInputClasses\"></slot>\n </div>\n <slot name=\"input-right\" />\n </div>\n\n <!-- Plain input (default slot):\n - When disabled, show a unified wrapper ring to match design\n - Otherwise, apply ring directly on the input element\n -->\n <div v-else class=\"sl-relative\">\n <template v-if=\"disabled\">\n <div class=\"sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset sl-bg-gray-50\"\n :class=\"wrapperRingClasses\">\n <div class=\"sl-flex-1 sl-min-w-0 sl-pl-2 sl-pr-2\">\n <slot :input-classes=\"disabledInputClasses\"></slot>\n </div>\n <slot name=\"input-right\" />\n </div>\n </template>\n <template v-else>\n <slot :input-classes=\"defaultInputRingClasses\"></slot>\n <div class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center\">\n <slot name=\"input-right\" />\n </div>\n </template>\n </div>\n </div>\n\n <Transition :show=\"(!!errorMessage && (isTouched || showErrors)) || (isValid && !!successMessage && isTouched)\"\n :appear=\"true\" enter-active-class=\"sl-transition sl-ease-out sl-duration-300\"\n enter-from-class=\"sl-opacity-0 sl-transform sl-scale-95\" enter-to-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n leave-active-class=\"sl-transition sl-ease-in sl-duration-200\"\n leave-from-class=\"sl-opacity-100 sl-transform sl-scale-100\"\n leave-to-class=\"sl-opacity-0 sl-transform sl-scale-95\">\n <p v-if=\"!!errorMessage && (isTouched || showErrors)\"\n class=\"error-message sl-mt-2 sl-text-sm sl-text-red-600 sl-bg-red-50 sl-ring-1 sl-ring-red-100 sl-rounded-md sl-p-2\">\n {{ errorMessage }}\n </p>\n <p v-else-if=\"isValid && !!successMessage && isTouched\"\n class=\"success-message sl-mt-2 sl-text-sm sl-text-green-600 sl-bg-green-50 sl-p-2 sl-rounded-md\">\n <slot name=\"success-message\">{{ successMessage }}</slot>\n </p>\n </Transition>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\nimport { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid'\n// (Transition is used in the template via built-in component)\n\ninterface FormFieldWrapperProps {\n id: string\n name: string\n label?: string\n tertiaryLabel?: string\n errorMessage?: string | null\n successMessage?: string\n isValid?: boolean\n isTouched?: boolean\n showErrors?: boolean // To force show errors\n showValidCheck?: boolean\n colorfulValidation?: boolean\n disabled?: boolean\n disabledMessage?: string\n optional?: boolean\n boxShadow?: boolean\n formTracking?: boolean\n isFocused?: boolean\n isHovered?: boolean\n externalErrors?: Record<string, unknown> | null\n}\n\nconst props = withDefaults(defineProps<FormFieldWrapperProps>(), {\n label: '',\n tertiaryLabel: '',\n errorMessage: null,\n successMessage: '',\n isValid: false,\n isTouched: false,\n showErrors: false,\n showValidCheck: true,\n colorfulValidation: false,\n disabled: false,\n disabledMessage: '',\n optional: false,\n boxShadow: false,\n formTracking: false,\n isFocused: false,\n isHovered: false,\n externalErrors: null,\n})\n\nconst slots = useSlots()\nconst hasPrefixSlot = computed(() => !!slots.prefix)\n\n// Optional card-like container and form-tracking ring classes\nconst fieldClasses = computed(() => [\n props.boxShadow ? 'sl-shadow sm:sl-rounded-lg sl-mt-2 sl-mb-4 sl-px-4 sl-py-5 sm:sl-p-6' : '',\n (props.formTracking && (props.isFocused || props.isHovered)) ? 'sl-ring-1 sl-ring-stachelock-600 sl-bg-white/80' : '',\n props.externalErrors && props.externalErrors[props.name] ? 'has-error' : ''\n])\n\nconst wrapperRingClasses = computed(() => {\n if (props.disabled) return 'sl-ring-gray-300'\n if (!props.colorfulValidation) return 'sl-ring-gray-300'\n if (props.isValid && (props.isTouched || props.showValidCheck)) return 'sl-ring-green-500'\n if (!!props.errorMessage && (props.isTouched || props.showErrors)) return 'sl-ring-red-500'\n return 'sl-ring-gray-300'\n})\n\n// Default classes that can be passed to the slotted input for consistency with TextInput\nconst defaultInputClasses = \"sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1.5 sl-text-gray-800 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6\"\nconst defaultInputRingClasses = \"sl-block sl-w-full sl-rounded-md sl-border-0 sl-py-1.5 sl-text-gray-800 sl-shadow-sm sl-ring-1 sl-ring-inset sl-placeholder:text-gray-400 focus:sl-ring-2 focus:sl-ring-inset focus:sl-ring-stachelock-600 sm:sl-text-sm sm:sl-leading-6\"\nconst disabledInputClasses = \"sl-block sl-w-full sl-border-0 sl-bg-transparent sl-py-1 sl-text-gray-400 sl-placeholder:text-gray-400 focus:sl-ring-0 sm:sl-text-sm sm:sl-leading-6 sl-cursor-not-allowed\"\n</script>\n\n<style scoped>\n.error-message,\n.success-message,\n.disabled-message {\n min-height: 1.4em;\n /* Match TextInput for layout consistency */\n}\n</style>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","defaultInputClasses","defaultInputRingClasses","disabledInputClasses","props","__props","slots","useSlots","hasPrefixSlot","computed","fieldClasses","wrapperRingClasses","_normalizeClass","errorMessage","isTouched","showErrors","isValid","_hoisted_1","label","id","optional","_hoisted_3","disabled","disabledMessage","_Fragment","_hoisted_4","_toDisplayString","tertiaryLabel","_hoisted_5","_renderSlot","_hoisted_6","_hoisted_7","_createVNode","_unref","ExclamationCircleIcon","showValidCheck","_hoisted_8","CheckCircleIcon","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_Transition","successMessage","_hoisted_14","_hoisted_15"],"mappings":"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","x_google_ignoreList":[0,1]}
|