@stachelock/ui 0.1.0 → 0.1.3

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.
Files changed (196) hide show
  1. package/dist/CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js +70 -0
  2. package/dist/CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js.map +1 -0
  3. package/dist/CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js +186 -0
  4. package/dist/CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js.map +1 -0
  5. package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js +304 -0
  6. package/dist/ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js.map +1 -0
  7. package/dist/DashboardLayout.vue_vue_type_script_setup_true_lang-CClxYrOW.js +186 -0
  8. package/dist/DashboardLayout.vue_vue_type_script_setup_true_lang-CClxYrOW.js.map +1 -0
  9. package/dist/DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js +123 -0
  10. package/dist/DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js.map +1 -0
  11. package/dist/DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js +85 -0
  12. package/dist/DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js.map +1 -0
  13. package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BKhcXkNG.js +201 -0
  14. package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BKhcXkNG.js.map +1 -0
  15. package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-qAwVNm--.js +153 -0
  16. package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-qAwVNm--.js.map +1 -0
  17. package/dist/EventCard.vue_vue_type_script_setup_true_lang-B3TP-mWX.js +75 -0
  18. package/dist/EventCard.vue_vue_type_script_setup_true_lang-B3TP-mWX.js.map +1 -0
  19. package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cpc9A9Ev.js +89 -0
  20. package/dist/EventsList.vue_vue_type_script_setup_true_lang-Cpc9A9Ev.js.map +1 -0
  21. package/dist/HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js +49 -0
  22. package/dist/HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js.map +1 -0
  23. package/dist/MonthCalendar.vue_vue_type_script_setup_true_lang-B9Bs0z8j.js +66 -0
  24. package/dist/MonthCalendar.vue_vue_type_script_setup_true_lang-B9Bs0z8j.js.map +1 -0
  25. package/dist/NavigationGroup.vue_vue_type_script_setup_true_lang-2WURj34G.js +29 -0
  26. package/dist/NavigationGroup.vue_vue_type_script_setup_true_lang-2WURj34G.js.map +1 -0
  27. package/dist/NavigationItem.vue_vue_type_script_setup_true_lang-DiNg3gz2.js +51 -0
  28. package/dist/NavigationItem.vue_vue_type_script_setup_true_lang-DiNg3gz2.js.map +1 -0
  29. package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BguP8xMU.js +242 -0
  30. package/dist/SelectInput.vue_vue_type_script_setup_true_lang-BguP8xMU.js.map +1 -0
  31. package/dist/SidebarLayout.vue_vue_type_script_setup_true_lang-CQIW5dy_.js +173 -0
  32. package/dist/SidebarLayout.vue_vue_type_script_setup_true_lang-CQIW5dy_.js.map +1 -0
  33. package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js +197 -0
  34. package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js.map +1 -0
  35. package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js +230 -0
  36. package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js.map +1 -0
  37. package/dist/TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js +158 -0
  38. package/dist/TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js.map +1 -0
  39. package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js +108 -0
  40. package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map +1 -0
  41. package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js +68 -0
  42. package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-CMH47CoK.js.map +1 -0
  43. package/dist/UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js +131 -0
  44. package/dist/UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js.map +1 -0
  45. package/dist/UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js +162 -0
  46. package/dist/UiModal.vue_vue_type_script_setup_true_lang-CMk62qeq.js.map +1 -0
  47. package/dist/UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js +222 -0
  48. package/dist/UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js.map +1 -0
  49. package/dist/UiProgressBar.vue_vue_type_script_setup_true_lang-0zFKwh43.js +46 -0
  50. package/dist/UiProgressBar.vue_vue_type_script_setup_true_lang-0zFKwh43.js.map +1 -0
  51. package/dist/UiRadialProgressBar.vue_vue_type_script_setup_true_lang-BGCBJa2S.js +72 -0
  52. package/dist/UiRadialProgressBar.vue_vue_type_script_setup_true_lang-BGCBJa2S.js.map +1 -0
  53. package/dist/UiTable.vue_vue_type_script_setup_true_lang-hI1_xamh.js +211 -0
  54. package/dist/UiTable.vue_vue_type_script_setup_true_lang-hI1_xamh.js.map +1 -0
  55. package/dist/UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js +66 -0
  56. package/dist/UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js.map +1 -0
  57. package/dist/WeekCalendar.vue_vue_type_script_setup_true_lang-DAFQiRI9.js +154 -0
  58. package/dist/WeekCalendar.vue_vue_type_script_setup_true_lang-DAFQiRI9.js.map +1 -0
  59. package/dist/YearCalendar.vue_vue_type_script_setup_true_lang-BfJkvmpN.js +29 -0
  60. package/dist/YearCalendar.vue_vue_type_script_setup_true_lang-BfJkvmpN.js.map +1 -0
  61. package/dist/_plugin-vue_export-helper-CHgC5LLL.js +10 -0
  62. package/dist/_plugin-vue_export-helper-CHgC5LLL.js.map +1 -0
  63. package/dist/calendar-905Ofszh.js +77 -0
  64. package/dist/calendar-905Ofszh.js.map +1 -0
  65. package/dist/calendars/CalendarDashboard.d.ts +3 -0
  66. package/dist/calendars/CalendarDashboard.js +72 -0
  67. package/dist/calendars/CalendarDashboard.js.map +1 -0
  68. package/dist/calendars/CalendarHeader.d.ts +3 -0
  69. package/dist/calendars/CalendarHeader.js +5 -0
  70. package/dist/calendars/CalendarHeader.js.map +1 -0
  71. package/dist/calendars/DayCalendar.d.ts +3 -0
  72. package/dist/calendars/DayCalendar.js +5 -0
  73. package/dist/calendars/DayCalendar.js.map +1 -0
  74. package/dist/calendars/EventCard.d.ts +3 -0
  75. package/dist/calendars/EventCard.js +5 -0
  76. package/dist/calendars/EventCard.js.map +1 -0
  77. package/dist/calendars/EventsList.d.ts +3 -0
  78. package/dist/calendars/EventsList.js +5 -0
  79. package/dist/calendars/EventsList.js.map +1 -0
  80. package/dist/calendars/MonthCalendar.d.ts +3 -0
  81. package/dist/calendars/MonthCalendar.js +5 -0
  82. package/dist/calendars/MonthCalendar.js.map +1 -0
  83. package/dist/calendars/WeekCalendar.d.ts +3 -0
  84. package/dist/calendars/WeekCalendar.js +5 -0
  85. package/dist/calendars/WeekCalendar.js.map +1 -0
  86. package/dist/calendars/YearCalendar.d.ts +3 -0
  87. package/dist/calendars/YearCalendar.js +5 -0
  88. package/dist/calendars/YearCalendar.js.map +1 -0
  89. package/dist/components/Avatar.d.ts +3 -0
  90. package/dist/components/Avatar.js +5 -0
  91. package/dist/components/Avatar.js.map +1 -0
  92. package/dist/components/Badge.d.ts +3 -0
  93. package/dist/components/Badge.js +42 -0
  94. package/dist/components/Badge.js.map +1 -0
  95. package/dist/components/Breadcrumb.d.ts +3 -0
  96. package/dist/components/Breadcrumb.js +5 -0
  97. package/dist/components/Breadcrumb.js.map +1 -0
  98. package/dist/components/Button.d.ts +3 -0
  99. package/dist/components/Button.js +197 -0
  100. package/dist/components/Button.js.map +1 -0
  101. package/dist/components/Loading.d.ts +3 -0
  102. package/dist/components/Loading.js +5 -0
  103. package/dist/components/Loading.js.map +1 -0
  104. package/dist/components/LoadingDots.d.ts +3 -0
  105. package/dist/components/LoadingDots.js +69 -0
  106. package/dist/components/LoadingDots.js.map +1 -0
  107. package/dist/components/Modal.d.ts +3 -0
  108. package/dist/components/Modal.js +5 -0
  109. package/dist/components/Modal.js.map +1 -0
  110. package/dist/components/NavLink.d.ts +3 -0
  111. package/dist/components/NavLink.js +5 -0
  112. package/dist/components/NavLink.js.map +1 -0
  113. package/dist/components/ProgressBar.d.ts +3 -0
  114. package/dist/components/ProgressBar.js +5 -0
  115. package/dist/components/ProgressBar.js.map +1 -0
  116. package/dist/components/RadialProgressBar.d.ts +3 -0
  117. package/dist/components/RadialProgressBar.js +5 -0
  118. package/dist/components/RadialProgressBar.js.map +1 -0
  119. package/dist/components/Table.d.ts +3 -0
  120. package/dist/components/Table.js +5 -0
  121. package/dist/components/Table.js.map +1 -0
  122. package/dist/components/TextInput.d.ts +3 -0
  123. package/dist/components/TextInput.js +111 -0
  124. package/dist/components/TextInput.js.map +1 -0
  125. package/dist/components/Transition.d.ts +3 -0
  126. package/dist/components/Transition.js +5 -0
  127. package/dist/components/Transition.js.map +1 -0
  128. package/dist/forms/DynamicForm.d.ts +3 -0
  129. package/dist/forms/DynamicForm.js +5 -0
  130. package/dist/forms/DynamicForm.js.map +1 -0
  131. package/dist/forms/DynamicFormField.d.ts +3 -0
  132. package/dist/forms/DynamicFormField.js +5 -0
  133. package/dist/forms/DynamicFormField.js.map +1 -0
  134. package/dist/forms/FormFieldWrapper.d.ts +3 -0
  135. package/dist/forms/FormFieldWrapper.js +158 -0
  136. package/dist/forms/FormFieldWrapper.js.map +1 -0
  137. package/dist/id-DafBB_QF.js +20 -0
  138. package/dist/id-DafBB_QF.js.map +1 -0
  139. package/dist/index.js +246 -4609
  140. package/dist/index.js.map +1 -1
  141. package/dist/inputs/CheckboxInput.d.ts +3 -0
  142. package/dist/inputs/CheckboxInput.js +5 -0
  143. package/dist/inputs/CheckboxInput.js.map +1 -0
  144. package/dist/inputs/ComboboxInput.d.ts +3 -0
  145. package/dist/inputs/ComboboxInput.js +5 -0
  146. package/dist/inputs/ComboboxInput.js.map +1 -0
  147. package/dist/inputs/SelectInput.d.ts +3 -0
  148. package/dist/inputs/SelectInput.js +5 -0
  149. package/dist/inputs/SelectInput.js.map +1 -0
  150. package/dist/inputs/SwitchInput.d.ts +3 -0
  151. package/dist/inputs/SwitchInput.js +5 -0
  152. package/dist/inputs/SwitchInput.js.map +1 -0
  153. package/dist/inputs/TagifyInput.d.ts +3 -0
  154. package/dist/inputs/TagifyInput.js +5 -0
  155. package/dist/inputs/TagifyInput.js.map +1 -0
  156. package/dist/inputs/TextAreaInput.d.ts +3 -0
  157. package/dist/inputs/TextAreaInput.js +5 -0
  158. package/dist/inputs/TextAreaInput.js.map +1 -0
  159. package/dist/layouts/DashboardLayout.d.ts +3 -0
  160. package/dist/layouts/DashboardLayout.js +5 -0
  161. package/dist/layouts/DashboardLayout.js.map +1 -0
  162. package/dist/layouts/DefaultLayout.d.ts +3 -0
  163. package/dist/layouts/DefaultLayout.js +5 -0
  164. package/dist/layouts/DefaultLayout.js.map +1 -0
  165. package/dist/layouts/HeaderLayout.d.ts +3 -0
  166. package/dist/layouts/HeaderLayout.js +5 -0
  167. package/dist/layouts/HeaderLayout.js.map +1 -0
  168. package/dist/layouts/NavigationGroup.d.ts +3 -0
  169. package/dist/layouts/NavigationGroup.js +5 -0
  170. package/dist/layouts/NavigationGroup.js.map +1 -0
  171. package/dist/layouts/NavigationItem.d.ts +3 -0
  172. package/dist/layouts/NavigationItem.js +5 -0
  173. package/dist/layouts/NavigationItem.js.map +1 -0
  174. package/dist/layouts/SidebarLayout.d.ts +3 -0
  175. package/dist/layouts/SidebarLayout.js +5 -0
  176. package/dist/layouts/SidebarLayout.js.map +1 -0
  177. package/dist/src/components/UiLoadingDots.d.ts +1 -1
  178. package/dist/src/components/UiNavLink.d.ts +1 -1
  179. package/dist/src/components/inputs/ComboboxInput.d.ts +2 -2
  180. package/dist/src/components/inputs/SelectInput.d.ts +2 -2
  181. package/dist/src/components/layouts/DefaultLayout.d.ts +1 -1
  182. package/package.json +2 -3
  183. package/dist/CheckboxInput-rWkcde69.js +0 -5
  184. package/dist/CheckboxInput-rWkcde69.js.map +0 -1
  185. package/dist/ComboboxInput-B98P_8CZ.js +0 -5
  186. package/dist/ComboboxInput-B98P_8CZ.js.map +0 -1
  187. package/dist/SelectInput-B5liNv7H.js +0 -5
  188. package/dist/SelectInput-B5liNv7H.js.map +0 -1
  189. package/dist/SwitchInput-D1k9O8gn.js +0 -5
  190. package/dist/SwitchInput-D1k9O8gn.js.map +0 -1
  191. package/dist/TextAreaInput-Di6Kstic.js +0 -5
  192. package/dist/TextAreaInput-Di6Kstic.js.map +0 -1
  193. package/dist/UiLoading-BuzCrLqO.js +0 -5
  194. package/dist/UiLoading-BuzCrLqO.js.map +0 -1
  195. package/dist/index.umd.cjs +0 -11
  196. package/dist/index.umd.cjs.map +0 -1
@@ -0,0 +1,70 @@
1
+ import { defineComponent as g, ref as h, watch as d, createElementBlock as w, openBlock as x, createElementVNode as r, createVNode as a, withCtx as m, createTextVNode as c } from "vue";
2
+ import u from "./components/Button.js";
3
+ import { _ as V } from "./SelectInput.vue_vue_type_script_setup_true_lang-BguP8xMU.js";
4
+ const k = { class: "sl-flex sl-items-center sl-gap-4" }, B = { class: "sl-flex sl-items-center sl-gap-2" }, C = { class: "sl-w-32" }, y = /* @__PURE__ */ g({
5
+ __name: "CalendarHeader",
6
+ props: {
7
+ view: {},
8
+ selectedRange: {}
9
+ },
10
+ emits: ["changeRange", "changeView"],
11
+ setup(p, { emit: f }) {
12
+ const s = p, l = f, n = [
13
+ { id: "day", name: "Day" },
14
+ { id: "week", name: "Week" },
15
+ { id: "month", name: "Month" },
16
+ { id: "year", name: "Year" }
17
+ ], i = h(n.find((t) => t.id === s.view) || n[2]);
18
+ d(() => s.view, (t) => {
19
+ const e = n.find((o) => o.id === t);
20
+ e && (i.value = e);
21
+ }), d(i, (t) => {
22
+ t && l("changeView", t.id);
23
+ });
24
+ const _ = () => l("changeRange", "prev"), v = () => l("changeRange", "next");
25
+ return (t, e) => (x(), w("div", k, [
26
+ r("div", B, [
27
+ a(u, {
28
+ size: "sm",
29
+ theme: "light",
30
+ outlined: !0,
31
+ "center-label": "",
32
+ onButtonClick: _
33
+ }, {
34
+ default: m(() => e[1] || (e[1] = [
35
+ c("Prev", -1)
36
+ ])),
37
+ _: 1,
38
+ __: [1]
39
+ }),
40
+ a(u, {
41
+ size: "sm",
42
+ theme: "light",
43
+ outlined: !0,
44
+ "center-label": "",
45
+ onButtonClick: v
46
+ }, {
47
+ default: m(() => e[2] || (e[2] = [
48
+ c("Next", -1)
49
+ ])),
50
+ _: 1,
51
+ __: [2]
52
+ })
53
+ ]),
54
+ r("div", C, [
55
+ a(V, {
56
+ name: "calendarView",
57
+ items: n,
58
+ modelValue: i.value,
59
+ "onUpdate:modelValue": e[0] || (e[0] = (o) => i.value = o),
60
+ placeholder: "Select view",
61
+ "box-shadow": !1
62
+ }, null, 8, ["modelValue"])
63
+ ])
64
+ ]));
65
+ }
66
+ });
67
+ export {
68
+ y as _
69
+ };
70
+ //# sourceMappingURL=CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalendarHeader.vue_vue_type_script_setup_true_lang-B3KQTxfD.js","sources":["../src/components/calendars/CalendarHeader.vue"],"sourcesContent":["<template>\n <div class=\"sl-flex sl-items-center sl-gap-4\">\n <div class=\"sl-flex sl-items-center sl-gap-2\">\n <UiButton size=\"sm\" theme=\"light\" :outlined=\"true\" center-label @button-click=\"prev\">Prev</UiButton>\n <UiButton size=\"sm\" theme=\"light\" :outlined=\"true\" center-label @button-click=\"next\">Next</UiButton>\n </div>\n <div class=\"sl-w-32\">\n <SelectInput\n name=\"calendarView\"\n :items=\"viewOptions\"\n v-model=\"selectedView\"\n placeholder=\"Select view\"\n :box-shadow=\"false\"\n />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport UiButton from '@/components/UiButton.vue';\nimport SelectInput from '@/components/inputs/SelectInput.vue';\nimport type { CalendarDay, Month } from '@/utils/calendar';\n\nconst props = defineProps<{ view: 'day' | 'week' | 'month' | 'year'; selectedRange: CalendarDay[] | Month[] | null }>();\nconst emit = defineEmits(['changeRange', 'changeView']);\n\n// View options for SelectInput\nconst viewOptions = [\n { id: 'day', name: 'Day' },\n { id: 'week', name: 'Week' },\n { id: 'month', name: 'Month' },\n { id: 'year', name: 'Year' }\n];\n\n// Find the current view option object\nconst selectedView = ref(viewOptions.find(option => option.id === props.view) || viewOptions[2]);\n\n// Watch for prop changes\nwatch(() => props.view, (newView) => {\n const viewOption = viewOptions.find(option => option.id === newView);\n if (viewOption) {\n selectedView.value = viewOption;\n }\n});\n\n// Watch for SelectInput changes\nwatch(selectedView, (newViewOption) => {\n if (newViewOption) {\n emit('changeView', newViewOption.id);\n }\n});\n\nconst prev = () => emit('changeRange', 'prev');\nconst next = () => emit('changeRange', 'next');\n</script>\n\n<style scoped>\n</style>\n\n\n"],"names":["props","__props","emit","__emit","viewOptions","selectedView","ref","option","watch","newView","viewOption","newViewOption","prev","next","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","UiButton","_cache","_hoisted_3","SelectInput","$event"],"mappings":";;;;;;;;;;;AAwBA,UAAMA,IAAQC,GACRC,IAAOC,GAGPC,IAAc;AAAA,MAClB,EAAE,IAAI,OAAO,MAAM,MAAA;AAAA,MACnB,EAAE,IAAI,QAAQ,MAAM,OAAA;AAAA,MACpB,EAAE,IAAI,SAAS,MAAM,QAAA;AAAA,MACrB,EAAE,IAAI,QAAQ,MAAM,OAAA;AAAA,IAAO,GAIvBC,IAAeC,EAAIF,EAAY,KAAK,CAAAG,MAAUA,EAAO,OAAOP,EAAM,IAAI,KAAKI,EAAY,CAAC,CAAC;AAG/F,IAAAI,EAAM,MAAMR,EAAM,MAAM,CAACS,MAAY;AACnC,YAAMC,IAAaN,EAAY,KAAK,CAAAG,MAAUA,EAAO,OAAOE,CAAO;AACnE,MAAIC,MACFL,EAAa,QAAQK;AAAA,IAEzB,CAAC,GAGDF,EAAMH,GAAc,CAACM,MAAkB;AACrC,MAAIA,KACFT,EAAK,cAAcS,EAAc,EAAE;AAAA,IAEvC,CAAC;AAED,UAAMC,IAAO,MAAMV,EAAK,eAAe,MAAM,GACvCW,IAAO,MAAMX,EAAK,eAAe,MAAM;sBArD3CY,EAAA,GAAAC,EAcM,OAdNC,GAcM;AAAA,MAbJC,EAGM,OAHNC,GAGM;AAAA,QAFJC,EAAoGC,GAAA;AAAA,UAA1F,MAAK;AAAA,UAAK,OAAM;AAAA,UAAS,UAAU;AAAA,UAAM,gBAAA;AAAA,UAAc,eAAcR;AAAA,QAAA;qBAAM,MAAIS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAAJ,QAAI,EAAA;AAAA,UAAA;;;;QACzFF,EAAoGC,GAAA;AAAA,UAA1F,MAAK;AAAA,UAAK,OAAM;AAAA,UAAS,UAAU;AAAA,UAAM,gBAAA;AAAA,UAAc,eAAcP;AAAA,QAAA;qBAAM,MAAIQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,cAAJ,QAAI,EAAA;AAAA,UAAA;;;;;MAE3FJ,EAQM,OARNK,GAQM;AAAA,QAPJH,EAMEI,GAAA;AAAA,UALA,MAAK;AAAA,UACJ,OAAOnB;AAAA,sBACCC,EAAA;AAAA,wDAAAA,EAAY,QAAAmB;AAAA,UACrB,aAAY;AAAA,UACX,cAAY;AAAA,QAAA;;;;;"}
@@ -0,0 +1,186 @@
1
+ import { defineComponent as x, ref as p, watch as f, computed as S, createElementBlock as r, openBlock as d, createVNode as $, unref as t, withCtx as I, createElementVNode as a, withDirectives as R, normalizeClass as g, vModelCheckbox as T, createCommentVNode as k, toDisplayString as y } from "vue";
2
+ import { useField as z } from "vee-validate";
3
+ import { g as A } from "./id-DafBB_QF.js";
4
+ import U from "./forms/FormFieldWrapper.js";
5
+ const W = { class: "sl-w-full" }, q = { class: "sl-flex sl-items-start sl-gap-3" }, G = { class: "sl-flex sl-h-6 sl-shrink-0 sl-items-center" }, J = { class: "sl-group group sl-grid sl-w-4 sl-h-4 sl-grid-cols-1" }, K = ["id", "aria-describedby", "name", "disabled"], O = { class: "sl-flex-1 sl-text-sm sl-leading-6" }, P = ["for"], Q = ["id"], X = ["innerHTML"], Y = { key: 1 }, oe = /* @__PURE__ */ x({
6
+ __name: "CheckboxInput",
7
+ props: {
8
+ name: {},
9
+ label: {},
10
+ description: {},
11
+ disabled: { type: Boolean },
12
+ rules: {},
13
+ immediate: { type: Boolean, default: !0 },
14
+ isDescriptionHtml: { type: Boolean, default: !1 },
15
+ successMessage: {},
16
+ modelValue: { type: Boolean },
17
+ tertiaryLabel: {},
18
+ showErrors: { type: Boolean, default: !1 },
19
+ layout: { default: "stacked" },
20
+ boxShadow: { type: Boolean, default: !1 }
21
+ },
22
+ emits: ["update:modelValue", "blur", "focus"],
23
+ setup(v, { expose: w, emit: C }) {
24
+ const s = v, u = C, n = p(), B = p(null), i = A(`sl-${s.name}`), { value: V, errorMessage: m, handleChange: h, handleBlur: M, meta: c } = z(
25
+ () => s.name,
26
+ s.rules,
27
+ {
28
+ type: "checkbox",
29
+ initialValue: s.modelValue || !1
30
+ }
31
+ ), l = p(s.modelValue || !1);
32
+ f(
33
+ () => s.modelValue,
34
+ (e) => {
35
+ e !== void 0 && e !== l.value && (l.value = e, V.value = e);
36
+ },
37
+ { immediate: !0 }
38
+ ), f(
39
+ l,
40
+ (e) => {
41
+ u("update:modelValue", e), s.immediate && h(e);
42
+ }
43
+ );
44
+ const H = S(() => {
45
+ const e = [
46
+ "sl-h-4",
47
+ "sl-w-4",
48
+ "sl-rounded",
49
+ "sl-border-gray-300",
50
+ "sl-text-stachelock-600",
51
+ "focus:sl-ring-stachelock-600",
52
+ "focus:sl-ring-2",
53
+ "focus:sl-ring-offset-2",
54
+ "sl-transition-all",
55
+ "sl-duration-200"
56
+ ];
57
+ return s.disabled ? e.push(
58
+ "sl-cursor-not-allowed",
59
+ "sl-opacity-50",
60
+ "sl-bg-gray-50"
61
+ ) : e.push(
62
+ "sl-cursor-pointer",
63
+ "hover:sl-border-gray-400"
64
+ ), m.value ? e.push(
65
+ "sl-border-red-300",
66
+ "focus:sl-ring-red-600"
67
+ ) : c.valid && c.touched && e.push(
68
+ "sl-border-green-300",
69
+ "focus:sl-ring-green-500"
70
+ ), e.join(" ");
71
+ }), L = (e) => {
72
+ const o = e.target;
73
+ l.value = o.checked, s.immediate || h(o.checked);
74
+ }, b = () => {
75
+ s.disabled || (l.value = !l.value);
76
+ }, D = () => {
77
+ n.value?.focus();
78
+ }, _ = () => {
79
+ n.value?.blur();
80
+ }, j = (e) => {
81
+ s.immediate || h(l.value), M(e), u("blur", e);
82
+ }, E = (e) => {
83
+ u("focus", e);
84
+ }, F = (e) => {
85
+ s.disabled || e.target.tagName === "A" || b();
86
+ };
87
+ return w({
88
+ focus: D,
89
+ blur: _,
90
+ toggle: b,
91
+ checkboxRef: n
92
+ }), (e, o) => (d(), r("div", W, [
93
+ $(U, {
94
+ id: t(i),
95
+ name: e.name,
96
+ label: e.layout === "stacked" ? e.label : "",
97
+ disabled: e.disabled,
98
+ optional: !e.rules,
99
+ "tertiary-label": e.tertiaryLabel,
100
+ "box-shadow": e.boxShadow,
101
+ "error-message": t(m),
102
+ "success-message": e.successMessage,
103
+ "is-valid": t(c).valid,
104
+ "is-touched": t(c).touched,
105
+ "show-errors": e.showErrors
106
+ }, {
107
+ default: I(() => [
108
+ a("div", q, [
109
+ a("div", G, [
110
+ a("div", J, [
111
+ R(a("input", {
112
+ id: t(i),
113
+ "aria-describedby": e.description ? `${t(i)}-description` : void 0,
114
+ name: e.name,
115
+ ref_key: "checkboxRef",
116
+ ref: n,
117
+ "onUpdate:modelValue": o[0] || (o[0] = (N) => l.value = N),
118
+ type: "checkbox",
119
+ disabled: e.disabled,
120
+ class: g([
121
+ "sl-col-start-1 sl-row-start-1 sl-w-full sl-h-full sl-appearance-none sl-rounded sl-border sl-border-gray-300 sl-bg-white",
122
+ "checked:sl-border-stachelock-600 checked:sl-bg-stachelock-600",
123
+ "indeterminate:sl-border-stachelock-600 indeterminate:sl-bg-stachelock-600",
124
+ "focus-visible:sl-outline focus-visible:sl-outline-2 focus-visible:sl-outline-offset-2 focus-visible:sl-outline-stachelock-600",
125
+ "disabled:sl-border-gray-300 disabled:sl-bg-gray-100 disabled:checked:sl-bg-gray-100",
126
+ H.value
127
+ ]),
128
+ onChange: L,
129
+ onFocus: E,
130
+ onBlur: j
131
+ }, null, 42, K), [
132
+ [T, l.value]
133
+ ]),
134
+ o[1] || (o[1] = a("svg", {
135
+ class: "sl-pointer-events-none sl-col-start-1 sl-row-start-1 sl-w-3.5 sl-h-3.5 sl-self-center sl-justify-self-center sl-stroke-white",
136
+ viewBox: "0 0 14 14",
137
+ fill: "none"
138
+ }, [
139
+ a("path", {
140
+ class: "sl-opacity-0 group-has-[:checked]:sl-opacity-100",
141
+ d: "M3 8L6 11L11 3.5",
142
+ "stroke-width": "2",
143
+ "stroke-linecap": "round",
144
+ "stroke-linejoin": "round"
145
+ }),
146
+ a("path", {
147
+ class: "sl-opacity-0 group-has-[:indeterminate]:sl-opacity-100",
148
+ d: "M3 7H11",
149
+ "stroke-width": "2",
150
+ "stroke-linecap": "round",
151
+ "stroke-linejoin": "round"
152
+ })
153
+ ], -1))
154
+ ])
155
+ ]),
156
+ a("div", O, [
157
+ e.layout === "inline" && e.label ? (d(), r("label", {
158
+ key: 0,
159
+ for: t(i),
160
+ class: "sl-font-medium sl-text-gray-900 sl-cursor-pointer"
161
+ }, y(e.label), 9, P)) : k("", !0),
162
+ e.description ? (d(), r("div", {
163
+ key: 1,
164
+ id: `${t(i)}-description`,
165
+ class: g(["sl-text-gray-600", [e.layout === "inline" ? "" : "sl-mt-1", { "sl-cursor-pointer": !e.disabled }]]),
166
+ ref_key: "descriptionHtml",
167
+ ref: B,
168
+ onClick: F
169
+ }, [
170
+ e.isDescriptionHtml ? (d(), r("div", {
171
+ key: 0,
172
+ innerHTML: e.description
173
+ }, null, 8, X)) : (d(), r("span", Y, y(e.description), 1))
174
+ ], 10, Q)) : k("", !0)
175
+ ])
176
+ ])
177
+ ]),
178
+ _: 1
179
+ }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched", "show-errors"])
180
+ ]));
181
+ }
182
+ });
183
+ export {
184
+ oe as _
185
+ };
186
+ //# sourceMappingURL=CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js","sources":["../src/components/inputs/CheckboxInput.vue"],"sourcesContent":["<template>\n <div class=\"sl-w-full\">\n <FormFieldWrapper\n :id=\"id\"\n :name=\"name\"\n :label=\"layout === 'stacked' ? label : ''\"\n :disabled=\"disabled\"\n :optional=\"!rules\"\n :tertiary-label=\"tertiaryLabel\"\n :box-shadow=\"boxShadow\"\n :error-message=\"errorMessage\"\n :success-message=\"successMessage\"\n :is-valid=\"meta.valid\"\n :is-touched=\"meta.touched\"\n :show-errors=\"showErrors\"\n >\n <div class=\"sl-flex sl-items-start sl-gap-3\">\n <div class=\"sl-flex sl-h-6 sl-shrink-0 sl-items-center\">\n <div class=\"sl-group group sl-grid sl-w-4 sl-h-4 sl-grid-cols-1\">\n <input\n :id=\"id\"\n :aria-describedby=\"description ? `${id}-description` : undefined\"\n :name=\"name\"\n ref=\"checkboxRef\"\n v-model=\"checkboxValue\"\n type=\"checkbox\"\n :disabled=\"disabled\"\n :class=\"[\n 'sl-col-start-1 sl-row-start-1 sl-w-full sl-h-full sl-appearance-none sl-rounded sl-border sl-border-gray-300 sl-bg-white',\n 'checked:sl-border-stachelock-600 checked:sl-bg-stachelock-600',\n 'indeterminate:sl-border-stachelock-600 indeterminate:sl-bg-stachelock-600',\n 'focus-visible:sl-outline focus-visible:sl-outline-2 focus-visible:sl-outline-offset-2 focus-visible:sl-outline-stachelock-600',\n 'disabled:sl-border-gray-300 disabled:sl-bg-gray-100 disabled:checked:sl-bg-gray-100',\n checkboxClasses\n ]\"\n @change=\"handleChange\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n >\n <svg\n class=\"sl-pointer-events-none sl-col-start-1 sl-row-start-1 sl-w-3.5 sl-h-3.5 sl-self-center sl-justify-self-center sl-stroke-white\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n >\n <path\n class=\"sl-opacity-0 group-has-[:checked]:sl-opacity-100\"\n d=\"M3 8L6 11L11 3.5\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n class=\"sl-opacity-0 group-has-[:indeterminate]:sl-opacity-100\"\n d=\"M3 7H11\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sl-flex-1 sl-text-sm sl-leading-6\">\n <!-- Inline label to the right of the checkbox -->\n <label v-if=\"layout === 'inline' && label\" :for=\"id\" class=\"sl-font-medium sl-text-gray-900 sl-cursor-pointer\">{{ label }}</label>\n <!-- Description (inline layout shows beneath label) -->\n <div\n v-if=\"description\"\n :id=\"`${id}-description`\"\n class=\"sl-text-gray-600\"\n :class=\"[ layout === 'inline' ? '' : 'sl-mt-1', { 'sl-cursor-pointer': !disabled } ]\"\n ref=\"descriptionHtml\"\n @click=\"onDescriptionClick\"\n >\n <div v-if=\"isDescriptionHtml\" v-html=\"description\" />\n <span v-else>{{ description }}</span>\n </div>\n </div>\n </div>\n </FormFieldWrapper>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useField } from 'vee-validate'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\n\ninterface Props {\n name: string\n label?: string\n description?: string\n disabled?: boolean\n rules?: ValidationRule\n immediate?: boolean\n isDescriptionHtml?: boolean\n successMessage?: string\n modelValue?: boolean\n tertiaryLabel?: string\n showErrors?: boolean\n layout?: 'stacked' | 'inline'\n boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n immediate: true,\n isDescriptionHtml: false,\n showErrors: false,\n layout: 'stacked',\n boxShadow: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean]\n blur: [event: FocusEvent]\n focus: [event: FocusEvent]\n}>()\n\nconst checkboxRef = ref<HTMLInputElement>()\nconst descriptionHtml = ref<HTMLElement | null>(null)\nconst id = generateId(`sl-${props.name}`)\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleChange: handleValidation, handleBlur, meta } = useField(\n () => props.name,\n props.rules,\n {\n type: 'checkbox',\n initialValue: props.modelValue || false\n }\n)\n\nconst checkboxValue = ref(props.modelValue || false)\n\n// Watch for external changes\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (newValue !== undefined && newValue !== checkboxValue.value) {\n checkboxValue.value = newValue\n value.value = newValue\n }\n },\n { immediate: true }\n)\n\nwatch(\n checkboxValue,\n (newValue) => {\n emit('update:modelValue', newValue)\n if (props.immediate) {\n handleValidation(newValue)\n }\n }\n)\n\nconst checkboxClasses = computed(() => {\n const baseClasses = [\n 'sl-h-4',\n 'sl-w-4',\n 'sl-rounded',\n 'sl-border-gray-300',\n 'sl-text-stachelock-600',\n 'focus:sl-ring-stachelock-600',\n 'focus:sl-ring-2',\n 'focus:sl-ring-offset-2',\n 'sl-transition-all',\n 'sl-duration-200'\n ]\n\n if (props.disabled) {\n baseClasses.push(\n 'sl-cursor-not-allowed',\n 'sl-opacity-50',\n 'sl-bg-gray-50'\n )\n } else {\n baseClasses.push(\n 'sl-cursor-pointer',\n 'hover:sl-border-gray-400'\n )\n }\n\n if (errorMessage.value) {\n baseClasses.push(\n 'sl-border-red-300',\n 'focus:sl-ring-red-600'\n )\n } else if (meta.valid && meta.touched) {\n baseClasses.push(\n 'sl-border-green-300',\n 'focus:sl-ring-green-500'\n )\n }\n\n return baseClasses.join(' ')\n})\n\nconst handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement\n checkboxValue.value = target.checked\n \n if (!props.immediate) {\n handleValidation(target.checked)\n }\n}\n\nconst toggle = () => {\n if (!props.disabled) {\n checkboxValue.value = !checkboxValue.value\n }\n}\n\nconst focus = () => {\n checkboxRef.value?.focus()\n}\n\nconst blur = () => {\n checkboxRef.value?.blur()\n}\n\nconst onBlur = (event: FocusEvent) => {\n if (!props.immediate) {\n handleValidation(checkboxValue.value)\n }\n handleBlur(event)\n emit('blur', event)\n}\n\nconst onFocus = (event: FocusEvent) => {\n emit('focus', event)\n}\n\nconst onDescriptionClick = (event: Event) => {\n if (props.disabled) return\n const target = event.target as HTMLElement\n if (target.tagName === 'A') {\n // Allow links to be clickable without toggling\n return\n }\n toggle()\n}\n\ndefineExpose({\n focus,\n blur,\n toggle,\n checkboxRef\n})\n</script>\n\n\n"],"names":["props","__props","emit","__emit","checkboxRef","ref","descriptionHtml","id","generateId","value","errorMessage","handleValidation","handleBlur","meta","useField","checkboxValue","watch","newValue","checkboxClasses","computed","baseClasses","handleChange","event","target","toggle","focus","blur","onBlur","onFocus","onDescriptionClick","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","layout","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","showErrors","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","description","$event","_normalizeClass","_hoisted_6","_hoisted_7","isDescriptionHtml"],"mappings":"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"}
@@ -0,0 +1,304 @@
1
+ import { defineComponent as Z, ref as y, watch as I, computed as h, createElementBlock as v, openBlock as u, createVNode as d, unref as r, withCtx as n, createElementVNode as i, normalizeClass as c, createBlock as x, createCommentVNode as g, withModifiers as E, toDisplayString as C, Fragment as ee, renderList as le } from "vue";
2
+ import { Combobox as se, ComboboxInput as te, ComboboxButton as ae, TransitionRoot as oe, ComboboxOptions as re, ComboboxOption as B } from "@headlessui/vue";
3
+ import { ChevronUpDownIcon as ue, CheckIcon as ne } from "@heroicons/vue/20/solid";
4
+ import { useField as ie } from "vee-validate";
5
+ import de from "./forms/FormFieldWrapper.js";
6
+ import { _ as ce } from "./UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js";
7
+ import { g as me } from "./id-DafBB_QF.js";
8
+ const pe = { class: "sl-w-full" }, fe = { class: "sl-block sl-truncate sl-font-medium" }, ve = {
9
+ key: 1,
10
+ class: "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-px-4 sl-text-gray-700"
11
+ }, ge = { class: "sl-flex sl-items-center sl-gap-2" }, be = {
12
+ key: 2,
13
+ class: "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-px-4 sl-text-gray-700"
14
+ }, ye = { class: "sl-block sl-truncate" }, he = { key: 0 }, we = 50, Me = /* @__PURE__ */ Z({
15
+ __name: "ComboboxInput",
16
+ props: {
17
+ name: {},
18
+ items: {},
19
+ label: {},
20
+ placeholder: {},
21
+ disabled: { type: Boolean },
22
+ rules: {},
23
+ validateOnMount: { type: Boolean },
24
+ successMessage: {},
25
+ tertiaryLabel: {},
26
+ itemKey: { default: "id" },
27
+ itemText: { default: "name" },
28
+ customQuery: {},
29
+ loading: { type: Boolean, default: !1 },
30
+ multiple: { type: Boolean, default: !1 },
31
+ showAll: { type: Boolean, default: !1 },
32
+ modelValue: {},
33
+ boxShadow: { type: Boolean, default: !1 }
34
+ },
35
+ emits: ["update:modelValue", "update:query", "blur", "focus"],
36
+ setup(K, { emit: N }) {
37
+ const l = K, m = N, M = me(l.name), a = y(""), { value: S, errorMessage: T, handleChange: b, meta: w, setTouched: P } = ie(
38
+ () => l.name,
39
+ l.rules,
40
+ {
41
+ validateOnMount: l.validateOnMount,
42
+ initialValue: l.modelValue
43
+ }
44
+ ), t = y(
45
+ l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : l.modelValue
46
+ );
47
+ I(
48
+ () => l.modelValue,
49
+ (e) => {
50
+ if (l.multiple) {
51
+ const s = Array.isArray(e) ? e : [];
52
+ s !== t.value && (t.value = s, S.value = s);
53
+ } else
54
+ e !== t.value && (t.value = e, S.value = e);
55
+ },
56
+ { immediate: !0 }
57
+ ), I(
58
+ t,
59
+ (e) => {
60
+ m("update:modelValue", e);
61
+ }
62
+ );
63
+ const U = h(() => [
64
+ "sl-w-full",
65
+ "sl-border-none",
66
+ "sl-py-2",
67
+ "sl-pl-3",
68
+ "sl-pr-10",
69
+ "sl-text-sm",
70
+ "sl-leading-5",
71
+ "sl-text-gray-900",
72
+ "focus:sl-outline-none",
73
+ "focus:sl-ring-0",
74
+ "sl-bg-transparent"
75
+ ].join(" ")), z = h(() => {
76
+ const e = [
77
+ "sl-relative",
78
+ "sl-w-full",
79
+ "sl-cursor-default",
80
+ "sl-rounded-lg",
81
+ "sl-bg-white",
82
+ "sl-text-left",
83
+ "sl-border",
84
+ "focus-within:sl-ring-2",
85
+ "focus-within:sl-ring-stachelock-500",
86
+ "focus-within:sl-border-stachelock-500",
87
+ "sl-transition-all",
88
+ "sl-duration-200"
89
+ ];
90
+ return l.disabled ? e.push(
91
+ "sl-bg-gray-50",
92
+ "sl-cursor-not-allowed",
93
+ "sl-border-gray-200"
94
+ ) : T.value ? e.push(
95
+ "sl-border-red-300",
96
+ "focus-within:sl-ring-red-500",
97
+ "focus-within:sl-border-red-500"
98
+ ) : w.valid && w.touched ? e.push(
99
+ "sl-border-green-300",
100
+ "focus-within:sl-ring-green-500",
101
+ "focus-within:sl-border-green-500"
102
+ ) : e.push(
103
+ "sl-border-gray-300",
104
+ "hover:sl-border-gray-400"
105
+ ), e.join(" ");
106
+ }), $ = (e) => e[l.itemKey], k = (e) => e ? e[l.itemText] || e.toString() : "", p = y([]), V = y([]), A = y(1), L = () => {
107
+ const e = A.value * we;
108
+ V.value = p.value.slice(0, e), A.value += 1;
109
+ }, j = () => {
110
+ A.value = 1, V.value = [], L();
111
+ }, F = () => {
112
+ if (a.value && a.value !== "")
113
+ if (l.customQuery)
114
+ p.value = l.customQuery(a.value, l.items);
115
+ else {
116
+ const e = a.value.toLowerCase();
117
+ p.value = l.items.filter((s) => k(s).toLowerCase().includes(e));
118
+ }
119
+ else
120
+ p.value = l.items;
121
+ j();
122
+ }, _ = h(() => l.items.filter((e) => !e.disabled)), D = (e) => {
123
+ const s = e.target;
124
+ a.value = s.value, m("update:query", a.value), F();
125
+ }, H = (e) => {
126
+ t.value = e, P(!0), b(e);
127
+ }, O = h(() => {
128
+ if (!l.multiple || !Array.isArray(t.value)) return !1;
129
+ const e = _.value;
130
+ return e.length === 0 ? !1 : e.every((s) => t.value.includes(s));
131
+ }), R = () => {
132
+ l.multiple && (O.value ? t.value = [] : t.value = [..._.value], b(t.value));
133
+ }, W = (e) => l.multiple ? !Array.isArray(e) || e.length === 0 ? "" : e.length === 1 ? k(e[0]) : `${e.length} selected` : k(e), f = h(() => l.multiple || a.value === "" ? null : { [l.itemKey]: null, [l.itemText]: a.value }), G = () => {
134
+ l.multiple || f.value && (l.customQuery ? (m("update:modelValue", a.value), b(a.value)) : (t.value = f.value, b(t.value)));
135
+ }, J = (e) => {
136
+ const s = e.target;
137
+ s.scrollTop + s.clientHeight >= s.scrollHeight && L();
138
+ }, X = (e) => {
139
+ m("focus", e);
140
+ }, Y = (e) => {
141
+ !l.multiple && f.value && (t.value = f.value, b(t.value), m("update:modelValue", t.value)), m("blur", e);
142
+ };
143
+ return I(() => l.items, () => {
144
+ F();
145
+ }, { immediate: !0, deep: !0 }), (e, s) => (u(), v("div", pe, [
146
+ d(de, {
147
+ id: r(M),
148
+ name: e.name,
149
+ label: e.label,
150
+ disabled: e.disabled,
151
+ optional: !e.rules,
152
+ "tertiary-label": e.tertiaryLabel,
153
+ "box-shadow": e.boxShadow,
154
+ "error-message": r(T),
155
+ "success-message": e.successMessage,
156
+ "is-valid": r(w).valid,
157
+ "is-touched": r(w).touched
158
+ }, {
159
+ "success-message": n(() => [
160
+ e.successMessage ? (u(), v("span", he, C(e.successMessage), 1)) : g("", !0)
161
+ ]),
162
+ default: n(() => [
163
+ d(r(se), {
164
+ modelValue: t.value,
165
+ "onUpdate:modelValue": [
166
+ s[2] || (s[2] = (o) => t.value = o),
167
+ H
168
+ ],
169
+ disabled: e.disabled,
170
+ multiple: e.multiple
171
+ }, {
172
+ default: n(() => [
173
+ i("div", {
174
+ class: c(z.value)
175
+ }, [
176
+ d(r(te), {
177
+ id: r(M),
178
+ class: c(U.value),
179
+ "display-value": W,
180
+ placeholder: e.placeholder || "Type to search...",
181
+ modelValue: a.value,
182
+ "onUpdate:modelValue": s[0] || (s[0] = (o) => a.value = o),
183
+ onInput: D,
184
+ onBlur: Y,
185
+ onFocus: X
186
+ }, null, 8, ["id", "class", "placeholder", "modelValue"]),
187
+ d(r(ae), { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, {
188
+ default: n(() => [
189
+ d(r(ue), {
190
+ class: "sl-h-5 sl-w-5 sl-text-gray-400",
191
+ "aria-hidden": "true"
192
+ })
193
+ ]),
194
+ _: 1
195
+ }),
196
+ d(r(oe), {
197
+ leave: "sl-transition sl-ease-in sl-duration-100",
198
+ "leave-from": "sl-opacity-100",
199
+ "leave-to": "sl-opacity-0",
200
+ onAfterLeave: s[1] || (s[1] = (o) => a.value = "")
201
+ }, {
202
+ default: n(() => [
203
+ p.value.length > 0 || a.value !== "" || e.multiple && e.showAll ? (u(), x(r(re), {
204
+ key: 0,
205
+ class: "sl-absolute sl-z-10 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm",
206
+ onScroll: J
207
+ }, {
208
+ default: n(() => [
209
+ e.multiple && e.showAll ? (u(), x(r(B), {
210
+ key: 0,
211
+ value: null,
212
+ disabled: !0,
213
+ as: "template"
214
+ }, {
215
+ default: n(({ active: o }) => [
216
+ i("li", {
217
+ onClick: E(R, ["prevent", "stop"]),
218
+ class: c([
219
+ "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-10 sl-pr-4",
220
+ o ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900"
221
+ ])
222
+ }, [
223
+ i("span", fe, C(O.value ? "Unselect All" : "Select All"), 1)
224
+ ], 2)
225
+ ]),
226
+ _: 1
227
+ })) : g("", !0),
228
+ e.loading ? (u(), v("div", ve, [
229
+ i("div", ge, [
230
+ d(ce, { size: "sm" }),
231
+ s[3] || (s[3] = i("span", null, "Loading...", -1))
232
+ ])
233
+ ])) : a.value !== "" && p.value.length === 0 ? (u(), v("div", be, " Nothing found. ")) : g("", !0),
234
+ (u(!0), v(ee, null, le(V.value, (o) => (u(), x(r(B), {
235
+ key: $(o),
236
+ value: o,
237
+ as: "template",
238
+ disabled: o.disabled
239
+ }, {
240
+ default: n(({ active: Q, selected: q }) => [
241
+ i("li", {
242
+ class: c([
243
+ "sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-10 sl-pr-4",
244
+ Q ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900",
245
+ o.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : ""
246
+ ])
247
+ }, [
248
+ i("span", {
249
+ class: c([
250
+ "sl-block sl-truncate",
251
+ q ? "sl-font-medium" : "sl-font-normal"
252
+ ])
253
+ }, C(k(o)), 3),
254
+ q ? (u(), v("span", {
255
+ key: 0,
256
+ class: c(["sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3", Q ? "sl-text-white" : "sl-text-stachelock-600"])
257
+ }, [
258
+ d(r(ne), {
259
+ class: "sl-h-5 sl-w-5",
260
+ "aria-hidden": "true"
261
+ })
262
+ ], 2)) : g("", !0)
263
+ ], 2)
264
+ ]),
265
+ _: 2
266
+ }, 1032, ["value", "disabled"]))), 128)),
267
+ !e.multiple && f.value ? (u(), x(r(B), {
268
+ key: 3,
269
+ value: f.value,
270
+ as: "template"
271
+ }, {
272
+ default: n(({ active: o }) => [
273
+ i("li", {
274
+ onClick: E(G, ["prevent", "stop"]),
275
+ class: c([
276
+ "sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-10 sl-pr-4",
277
+ o ? "sl-bg-stachelock-600 sl-text-white" : "sl-text-gray-900"
278
+ ])
279
+ }, [
280
+ i("span", ye, ' Enter "' + C(a.value) + '" manually ', 1)
281
+ ], 2)
282
+ ]),
283
+ _: 1
284
+ }, 8, ["value"])) : g("", !0)
285
+ ]),
286
+ _: 1
287
+ })) : g("", !0)
288
+ ]),
289
+ _: 1
290
+ })
291
+ ], 2)
292
+ ]),
293
+ _: 1
294
+ }, 8, ["modelValue", "disabled", "multiple"])
295
+ ]),
296
+ _: 1
297
+ }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched"])
298
+ ]));
299
+ }
300
+ });
301
+ export {
302
+ Me as _
303
+ };
304
+ //# sourceMappingURL=ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ComboboxInput.vue_vue_type_script_setup_true_lang-DoJHjJsA.js","sources":["../src/components/inputs/ComboboxInput.vue"],"sourcesContent":["<template>\n <div class=\"sl-w-full\">\n <FormFieldWrapper\n :id=\"id\"\n :name=\"name\"\n :label=\"label\"\n :disabled=\"disabled\"\n :optional=\"!rules\"\n :tertiary-label=\"tertiaryLabel\"\n :box-shadow=\"boxShadow\"\n :error-message=\"errorMessage\"\n :success-message=\"successMessage\"\n :is-valid=\"meta.valid\"\n :is-touched=\"meta.touched\"\n >\n <Combobox\n v-model=\"selectedValue\"\n :disabled=\"disabled\"\n :multiple=\"multiple\"\n @update:model-value=\"handleChange\"\n >\n <div :class=\"wrapperClasses\">\n <ComboboxInput\n :id=\"id\"\n :class=\"inputClasses\"\n :display-value=\"displayComboboxValue\"\n :placeholder=\"placeholder || 'Type to search...'\"\n v-model=\"query\"\n @input=\"onQueryInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n />\n \n <ComboboxButton class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2\">\n <ChevronUpDownIcon\n class=\"sl-h-5 sl-w-5 sl-text-gray-400\"\n aria-hidden=\"true\"\n />\n </ComboboxButton>\n\n <TransitionRoot\n leave=\"sl-transition sl-ease-in sl-duration-100\"\n leave-from=\"sl-opacity-100\"\n leave-to=\"sl-opacity-0\"\n @after-leave=\"query = ''\"\n >\n <ComboboxOptions\n v-if=\"filteredItems.length > 0 || query !== '' || (multiple && showAll)\"\n class=\"sl-absolute sl-z-10 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm\"\n @scroll=\"onScroll\"\n >\n <!-- Select All option -->\n <ComboboxOption\n v-if=\"multiple && showAll\"\n :value=\"null\"\n :disabled=\"true\"\n as=\"template\"\n v-slot=\"{ active }\"\n >\n <li\n @click.prevent.stop=\"toggleSelectAll\"\n :class=\"[\n 'sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-10 sl-pr-4',\n active ? 'sl-bg-stachelock-600 sl-text-white' : 'sl-text-gray-900'\n ]\"\n >\n <span class=\"sl-block sl-truncate sl-font-medium\">\n {{ isAllSelected ? 'Unselect All' : 'Select All' }}\n </span>\n </li>\n </ComboboxOption>\n <!-- Loading state -->\n <div \n v-if=\"loading\"\n class=\"sl-relative sl-cursor-default sl-select-none sl-py-2 sl-px-4 sl-text-gray-700\"\n >\n <div class=\"sl-flex sl-items-center sl-gap-2\">\n <Loading size=\"sm\" />\n <span>Loading...</span>\n </div>\n </div>\n \n <!-- No results -->\n <div\n v-else-if=\"query !== '' && filteredItems.length === 0\"\n class=\"sl-relative sl-cursor-default sl-select-none sl-py-2 sl-px-4 sl-text-gray-700\"\n >\n Nothing found.\n </div>\n \n <!-- Options -->\n <ComboboxOption\n v-for=\"item in visibleItems\"\n :key=\"getItemKey(item)\"\n :value=\"item\"\n as=\"template\"\n :disabled=\"item.disabled\"\n v-slot=\"{ active, selected }\"\n >\n <li\n :class=\"[\n 'sl-relative sl-cursor-default sl-select-none sl-py-2 sl-pl-10 sl-pr-4',\n active ? 'sl-bg-stachelock-600 sl-text-white' : 'sl-text-gray-900',\n item.disabled ? 'sl-opacity-50 sl-cursor-not-allowed' : ''\n ]\"\n >\n <span\n :class=\"[\n 'sl-block sl-truncate',\n selected ? 'sl-font-medium' : 'sl-font-normal'\n ]\"\n >\n {{ getItemText(item) }}\n </span>\n <span\n v-if=\"selected\"\n class=\"sl-absolute sl-inset-y-0 sl-left-0 sl-flex sl-items-center sl-pl-3\"\n :class=\"active ? 'sl-text-white' : 'sl-text-stachelock-600'\"\n >\n <CheckIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n </span>\n </li>\n </ComboboxOption>\n <!-- Manual entry option -->\n <ComboboxOption\n v-if=\"!multiple && queryValue\"\n :value=\"queryValue\"\n as=\"template\"\n v-slot=\"{ active }\"\n >\n <li\n @click.prevent.stop=\"handleManualEntry\"\n :class=\"[\n 'sl-relative sl-cursor-pointer sl-select-none sl-py-2 sl-pl-10 sl-pr-4',\n active ? 'sl-bg-stachelock-600 sl-text-white' : 'sl-text-gray-900'\n ]\"\n >\n <span class=\"sl-block sl-truncate\">\n Enter \"{{ query }}\" manually\n </span>\n </li>\n </ComboboxOption>\n </ComboboxOptions>\n </TransitionRoot>\n </div>\n </Combobox>\n \n <template #success-message>\n <span v-if=\"successMessage\">{{ successMessage }}</span>\n </template>\n </FormFieldWrapper>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport {\n Combobox,\n ComboboxInput,\n ComboboxButton,\n ComboboxOption,\n ComboboxOptions,\n TransitionRoot,\n} from '@headlessui/vue'\nimport { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'\nimport { useField } from 'vee-validate'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport Loading from '../UiLoading.vue'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\n\ninterface ComboboxItem {\n [key: string]: any\n disabled?: boolean\n}\n\ninterface Props {\n name: string\n items: ComboboxItem[]\n label?: string\n placeholder?: string\n disabled?: boolean\n rules?: ValidationRule\n validateOnMount?: boolean\n successMessage?: string\n tertiaryLabel?: string\n itemKey?: string\n itemText?: string\n customQuery?: (query: string, items: ComboboxItem[]) => ComboboxItem[]\n loading?: boolean\n multiple?: boolean\n showAll?: boolean\n modelValue?: any\n boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n itemKey: 'id',\n itemText: 'name',\n loading: false,\n multiple: false,\n showAll: false,\n boxShadow: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: any]\n 'update:query': [query: string]\n blur: [event: FocusEvent]\n focus: [event: FocusEvent]\n}>()\n\nconst id = generateId(props.name)\nconst query = ref('')\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleChange: handleValidation, meta, setTouched } = useField(\n () => props.name,\n props.rules,\n {\n validateOnMount: props.validateOnMount,\n initialValue: props.modelValue\n }\n)\n\nconst selectedValue = ref<any>(\n props.multiple\n ? (Array.isArray(props.modelValue) ? props.modelValue : [])\n : props.modelValue\n)\n\n// Watch for external changes\nwatch(\n () => props.modelValue,\n (newValue) => {\n if (props.multiple) {\n const coerced = Array.isArray(newValue) ? newValue : []\n if (coerced !== selectedValue.value) {\n selectedValue.value = coerced\n value.value = coerced\n }\n } else {\n if (newValue !== selectedValue.value) {\n selectedValue.value = newValue\n value.value = newValue\n }\n }\n },\n { immediate: true }\n)\n\nwatch(\n selectedValue,\n (newValue) => {\n emit('update:modelValue', newValue)\n }\n)\n\nconst inputClasses = computed(() => {\n const baseClasses = [\n 'sl-w-full',\n 'sl-border-none',\n 'sl-py-2',\n 'sl-pl-3',\n 'sl-pr-10',\n 'sl-text-sm',\n 'sl-leading-5',\n 'sl-text-gray-900',\n 'focus:sl-outline-none',\n 'focus:sl-ring-0',\n 'sl-bg-transparent'\n ]\n\n return baseClasses.join(' ')\n})\n\nconst wrapperClasses = computed(() => {\n const baseClasses = [\n 'sl-relative',\n 'sl-w-full',\n 'sl-cursor-default',\n 'sl-rounded-lg',\n 'sl-bg-white',\n 'sl-text-left',\n 'sl-border',\n 'focus-within:sl-ring-2',\n 'focus-within:sl-ring-stachelock-500',\n 'focus-within:sl-border-stachelock-500',\n 'sl-transition-all',\n 'sl-duration-200'\n ]\n\n if (props.disabled) {\n baseClasses.push(\n 'sl-bg-gray-50',\n 'sl-cursor-not-allowed',\n 'sl-border-gray-200'\n )\n } else if (errorMessage.value) {\n baseClasses.push(\n 'sl-border-red-300',\n 'focus-within:sl-ring-red-500',\n 'focus-within:sl-border-red-500'\n )\n } else if (meta.valid && meta.touched) {\n baseClasses.push(\n 'sl-border-green-300',\n 'focus-within:sl-ring-green-500',\n 'focus-within:sl-border-green-500'\n )\n } else {\n baseClasses.push(\n 'sl-border-gray-300',\n 'hover:sl-border-gray-400'\n )\n }\n\n return baseClasses.join(' ')\n})\n\nconst getItemKey = (item: ComboboxItem): any => {\n return item[props.itemKey]\n}\n\nconst getItemText = (item: ComboboxItem): string => {\n if (!item) return ''\n return item[props.itemText] || item.toString()\n}\n\n// Filtering and infinite scroll state\nconst filteredItems = ref<ComboboxItem[]>([])\nconst visibleItems = ref<ComboboxItem[]>([])\nconst itemsPerPage = 50\nconst currentPage = ref(1)\n\nconst loadMoreItems = () => {\n const end = currentPage.value * itemsPerPage\n visibleItems.value = filteredItems.value.slice(0, end)\n currentPage.value += 1\n}\n\nconst resetPagination = () => {\n currentPage.value = 1\n visibleItems.value = []\n loadMoreItems()\n}\n\nconst recomputeFilteredItems = () => {\n if (query.value && query.value !== '') {\n if (props.customQuery) {\n filteredItems.value = props.customQuery(query.value, props.items)\n } else {\n const lower = query.value.toLowerCase()\n filteredItems.value = props.items.filter((item) => {\n const text = getItemText(item)\n return text.toLowerCase().includes(lower)\n })\n }\n } else {\n filteredItems.value = props.items\n }\n resetPagination()\n}\n\nconst allItems = computed(() => {\n return props.items.filter(item => !item.disabled)\n})\n\nconst onQueryInput = (event: Event) => {\n const target = event.target as HTMLInputElement\n query.value = target.value\n emit('update:query', query.value)\n recomputeFilteredItems()\n}\n\nconst handleChange = (value: any) => {\n selectedValue.value = value\n setTouched(true)\n handleValidation(value)\n}\n\nconst isAllSelected = computed(() => {\n if (!props.multiple || !Array.isArray(selectedValue.value)) return false\n const selectable = allItems.value\n if (selectable.length === 0) return false\n return selectable.every(item => (selectedValue.value as any[]).includes(item))\n})\n\nconst toggleSelectAll = () => {\n if (!props.multiple) return\n if (isAllSelected.value) {\n selectedValue.value = []\n } else {\n selectedValue.value = [...allItems.value]\n }\n handleValidation(selectedValue.value)\n}\n\nconst displayComboboxValue = (val: any): string => {\n if (!props.multiple) {\n return getItemText(val as ComboboxItem)\n }\n if (!Array.isArray(val) || val.length === 0) return ''\n if (val.length === 1) return getItemText(val[0] as ComboboxItem)\n return `${val.length} selected`\n}\n\n// Manual entry support (single-select only)\nconst queryValue = computed(() => {\n if (props.multiple) return null\n return query.value === '' ? null : { [props.itemKey]: null, [props.itemText]: query.value }\n})\n\nconst handleManualEntry = () => {\n if (props.multiple) return\n if (!queryValue.value) return\n // If customQuery provided and expects external handling, emit raw query\n if (props.customQuery) {\n emit('update:modelValue', query.value)\n handleValidation(query.value)\n } else {\n selectedValue.value = queryValue.value\n handleValidation(selectedValue.value)\n }\n}\n\nconst onScroll = (event: Event) => {\n const element = event.target as HTMLElement\n if (element.scrollTop + element.clientHeight >= element.scrollHeight) {\n loadMoreItems()\n }\n}\n\nconst onFocus = (event: FocusEvent) => {\n emit('focus', event)\n}\n\nconst onBlur = (event: FocusEvent) => {\n if (!props.multiple && queryValue.value) {\n selectedValue.value = queryValue.value\n handleValidation(selectedValue.value)\n emit('update:modelValue', selectedValue.value)\n }\n emit('blur', event)\n}\n\n// Initialize and keep filtered items in sync\nwatch(() => props.items, () => {\n recomputeFilteredItems()\n}, { immediate: true, deep: true })\n</script>\n\n\n"],"names":["itemsPerPage","props","__props","emit","__emit","id","generateId","query","ref","value","errorMessage","handleValidation","meta","setTouched","useField","selectedValue","watch","newValue","coerced","inputClasses","computed","wrapperClasses","baseClasses","getItemKey","item","getItemText","filteredItems","visibleItems","currentPage","loadMoreItems","end","resetPagination","recomputeFilteredItems","lower","allItems","onQueryInput","event","target","handleChange","isAllSelected","selectable","toggleSelectAll","displayComboboxValue","val","queryValue","handleManualEntry","onScroll","element","onFocus","onBlur","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","Combobox","$event","multiple","_createElementVNode","ComboboxInput","placeholder","ComboboxButton","ChevronUpDownIcon","TransitionRoot","showAll","_createBlock","ComboboxOptions","ComboboxOption","_withCtx","active","_normalizeClass","_hoisted_2","_toDisplayString","loading","_hoisted_3","_hoisted_4","Loading","_cache","_hoisted_5","_Fragment","_renderList","selected","CheckIcon","_hoisted_6"],"mappings":"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"}