@stachelock/ui 0.1.1 → 0.1.4

package/dist/DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js

@@ -0,0 +1,123 @@
+import { defineComponent as A, ref as d, computed as P, onMounted as D, createElementBlock as n, openBlock as i, Fragment as r, createElementVNode as s, renderList as u, createTextVNode as T, toDisplayString as a, normalizeClass as C, createCommentVNode as E, normalizeStyle as N, unref as m } from "vue";
+import { c as z, a as H, f as S } from "./calendar-905Ofszh.js";
+const $ = { class: "sl-isolate sl-flex sl-flex-auto sl-overflow-hidden sl-bg-white" }, O = { class: "sl-grid sl-grid-cols-7 sl-text-sm sl-leading-6 sl-text-gray-500 xl:sl-hidden" }, V = ["onClick"], j = { class: "sl-flex sl-flex-auto" }, B = { class: "sl-grid sl-flex-auto sl-grid-cols-1 sl-grid-rows-1" }, G = {
+  class: "sl-col-start-1 sl-col-end-2 sl-row-start-1 sl-grid sl-divide-y sl-divide-gray-100",
+  style: { "grid-template-rows": "repeat(48, minmax(3.5rem, 1fr))" }
+}, F = { class: "sl-relative" }, L = { class: "sl-sticky sl-left-0 sl-z-20 -sl-ml-14 -sl-mt-2.5 sl-w-14 sl-pr-2 sl-text-right sl-text-xs sl-leading-5 sl-text-gray-400" }, R = {
+  class: "sl-col-end-2 sl-row-start-1 sl-grid sl-grid-cols-1",
+  style: { "grid-template-rows": "1.75rem repeat(288, minmax(0, 1fr)) auto" }
+}, Z = ["onClick"], q = { class: "sl-order-1 sl-font-semibold sl-text-blue-700" }, I = { class: "sl-text-blue-500 group-hover:sl-text-blue-700" }, J = ["datetime"], W = /* @__PURE__ */ A({
+  __name: "DayCalendar",
+  props: {
+    days: {}
+  },
+  emits: ["selectDay", "select:event"],
+  setup(p, { emit: y }) {
+    const h = p, f = y, g = d(null), x = d(null), v = d(null), c = d(null), _ = [
+      "12AM",
+      "1AM",
+      "2AM",
+      "3AM",
+      "4AM",
+      "5AM",
+      "6AM",
+      "7AM",
+      "8AM",
+      "9AM",
+      "10AM",
+      "11AM",
+      "12PM",
+      "1PM",
+      "2PM",
+      "3PM",
+      "4PM",
+      "5PM",
+      "6PM",
+      "7PM",
+      "8PM",
+      "9PM",
+      "10PM",
+      "11PM"
+    ], M = (t) => c.value === t, b = (t) => {
+      c.value = t, f("selectDay", t);
+    }, w = (t) => f("select:event", t), k = P(() => c.value ? [c.value] : h.days);
+    return D(() => {
+      const t = (/* @__PURE__ */ new Date()).getHours() * 60, o = g.value, l = x.value, e = v.value;
+      o && l && e && (o.scrollTop = (o.scrollHeight - l.offsetHeight - e.offsetHeight) * t / 1440);
+    }), (t, o) => (i(), n(r, null, [
+      s("div", $, [
+        s("div", {
+          ref_key: "container",
+          ref: g,
+          class: "sl-flex sl-flex-auto sl-flex-col sl-overflow-auto"
+        }, [
+          s("div", {
+            ref_key: "containerNav",
+            ref: x,
+            class: "sl-sticky sl-top-0 sl-z-10 sl-bg-white sl-text-xs sl-text-gray-500 sl-shadow sl-ring-1 sl-ring-black sl-ring-opacity-5 md:sl-hidden"
+          }, [
+            s("div", O, [
+              (i(!0), n(r, null, u(t.days, (l) => (i(), n("button", {
+                key: l.date,
+                type: "button",
+                class: "sl-flex sl-flex-col sl-items-center sl-pb-3 sl-pt-2",
+                onClick: (e) => b(l)
+              }, [
+                T(a(l.shortDay) + " ", 1),
+                s("span", {
+                  class: C(["sl-mt-1 sl-flex sl-h-8 sl-w-8 sl-items-center sl-justify-center sl-font-semibold sl-text-gray-800", M(l) ? "sl-rounded-full sl-bg-stachelock-600 sl-font-semibold sl-text-white" : ""])
+                }, a(l.day), 3)
+              ], 8, V))), 128))
+            ])
+          ], 512),
+          s("div", j, [
+            o[1] || (o[1] = s("div", { class: "sl-w-14 sl-flex-none sl-bg-white sl-ring-1 sl-ring-gray-100" }, null, -1)),
+            s("div", B, [
+              s("div", G, [
+                s("div", {
+                  ref_key: "containerOffset",
+                  ref: v,
+                  class: "sl-row-end-1 sl-h-7"
+                }, null, 512),
+                (i(), n(r, null, u(_, (l) => (i(), n(r, { key: l }, [
+                  s("div", F, [
+                    s("div", L, a(l), 1)
+                  ]),
+                  o[0] || (o[0] = s("div", null, null, -1))
+                ], 64))), 64))
+              ]),
+              s("ol", R, [
+                (i(!0), n(r, null, u(k.value, (l) => (i(), n(r, {
+                  key: l.date
+                }, [
+                  l.events && l.events.length ? (i(!0), n(r, { key: 0 }, u(l.events, (e) => (i(), n("li", {
+                    key: e.id,
+                    class: "sl-relative sl-mt-px sl-flex",
+                    style: N(`grid-row: ${m(z)(e.datetime)} / span ${m(H)(e.startTime?.dateTime, e.endTime?.dateTime)}`)
+                  }, [
+                    s("button", {
+                      onClick: (K) => w(e.id),
+                      class: "sl-justify-start sl-group sl-absolute sl-inset-1 sl-flex sl-flex-col sl-overflow-y-auto sl-rounded-lg sl-bg-blue-50 sl-p-2 sl-text-xs sl-leading-5 hover:sl-bg-blue-100"
+                    }, [
+                      s("p", q, a(e.name), 1),
+                      s("p", I, [
+                        s("time", {
+                          datetime: e.datetime
+                        }, a(m(S)(e.datetime)) + " " + a(e.startTime?.shortTimeZone), 9, J)
+                      ])
+                    ], 8, Z)
+                  ], 4))), 128)) : E("", !0)
+                ], 64))), 128))
+              ])
+            ])
+          ])
+        ], 512)
+      ]),
+      o[2] || (o[2] = s("div", { class: "md:sl-block sl-hidden sl-w-1/2 sl-max-w-md sl-flex-none sl-border-l sl-border-gray-100 sl-px-8 sl-py-10" }, null, -1))
+    ], 64));
+  }
+});
+export {
+  W as _
+};
+//# sourceMappingURL=DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js.map

package/dist/DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js","sources":["../src/components/calendars/DayCalendar.vue"],"sourcesContent":["<template>\n  <div class=\"sl-isolate sl-flex sl-flex-auto sl-overflow-hidden sl-bg-white\">\n    <div ref=\"container\" class=\"sl-flex sl-flex-auto sl-flex-col sl-overflow-auto\">\n      <!-- Mobile sticky nav with days -->\n      <div ref=\"containerNav\" class=\"sl-sticky sl-top-0 sl-z-10 sl-bg-white sl-text-xs sl-text-gray-500 sl-shadow sl-ring-1 sl-ring-black sl-ring-opacity-5 md:sl-hidden\">\n        <div class=\"sl-grid sl-grid-cols-7 sl-text-sm sl-leading-6 sl-text-gray-500 xl:sl-hidden\">\n          <button v-for=\"day in days\" :key=\"day.date\" type=\"button\" class=\"sl-flex sl-flex-col sl-items-center sl-pb-3 sl-pt-2\" @click=\"setActiveDay(day)\">\n            {{ day.shortDay }}\n            <span class=\"sl-mt-1 sl-flex sl-h-8 sl-w-8 sl-items-center sl-justify-center sl-font-semibold sl-text-gray-800\" :class=\"isActiveDay(day) ? 'sl-rounded-full sl-bg-stachelock-600 sl-font-semibold sl-text-white' : ''\">\n              {{ day.day }}\n            </span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"sl-flex sl-flex-auto\">\n        <div class=\"sl-w-14 sl-flex-none sl-bg-white sl-ring-1 sl-ring-gray-100\" />\n        <div class=\"sl-grid sl-flex-auto sl-grid-cols-1 sl-grid-rows-1\">\n          <!-- Hour grid -->\n          <div class=\"sl-col-start-1 sl-col-end-2 sl-row-start-1 sl-grid sl-divide-y sl-divide-gray-100\" style=\"grid-template-rows: repeat(48, minmax(3.5rem, 1fr))\">\n            <div ref=\"containerOffset\" class=\"sl-row-end-1 sl-h-7\"></div>\n            <template v-for=\"hour in hours\" :key=\"hour\">\n              <div class=\"sl-relative\">\n                <div class=\"sl-sticky sl-left-0 sl-z-20 -sl-ml-14 -sl-mt-2.5 sl-w-14 sl-pr-2 sl-text-right sl-text-xs sl-leading-5 sl-text-gray-400\">{{ hour }}</div>\n              </div>\n              <div></div>\n            </template>\n          </div>\n\n          <!-- Events -->\n          <ol class=\"sl-col-end-2 sl-row-start-1 sl-grid sl-grid-cols-1\" style=\"grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr)) auto\">\n            <template v-for=\"day in filteredDays\" :key=\"day.date\">\n              <template v-if=\"day.events && day.events.length\">\n                <li v-for=\"event in day.events\" :key=\"event.id\" class=\"sl-relative sl-mt-px sl-flex\" :style=\"`grid-row: ${calculateGridRow(event.datetime)} / span ${calculateGridSpan(event.startTime?.dateTime, event.endTime?.dateTime)}`\">\n                  <button @click=\"handleSelectEvent(event.id)\" class=\"sl-justify-start sl-group sl-absolute sl-inset-1 sl-flex sl-flex-col sl-overflow-y-auto sl-rounded-lg sl-bg-blue-50 sl-p-2 sl-text-xs sl-leading-5 hover:sl-bg-blue-100\">\n                    <p class=\"sl-order-1 sl-font-semibold sl-text-blue-700\">{{ event.name }}</p>\n                    <p class=\"sl-text-blue-500 group-hover:sl-text-blue-700\">\n                      <time :datetime=\"event.datetime\">{{ formatTime(event.datetime) }} {{ event.startTime?.shortTimeZone }}</time>\n                    </p>\n                  </button>\n                </li>\n              </template>\n            </template>\n          </ol>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"md:sl-block sl-hidden sl-w-1/2 sl-max-w-md sl-flex-none sl-border-l sl-border-gray-100 sl-px-8 sl-py-10\">\n    <!-- Placeholder for side panel hook (omitted for library) -->\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue';\nimport type { CalendarDay } from '@/utils/calendar';\nimport { calculateGridRow, calculateGridSpan, formatTime } from '@/utils/calendar';\n\nconst props = defineProps<{ days: Array<CalendarDay> }>();\nconst emit = defineEmits(['selectDay', 'select:event']);\n\nconst container = ref<HTMLElement | null>(null);\nconst containerNav = ref<HTMLElement | null>(null);\nconst containerOffset = ref<HTMLElement | null>(null);\nconst activeDay = ref<CalendarDay | null>(null);\n\nconst hours = [\n  '12AM','1AM','2AM','3AM','4AM','5AM','6AM','7AM','8AM','9AM','10AM','11AM',\n  '12PM','1PM','2PM','3PM','4PM','5PM','6PM','7PM','8PM','9PM','10PM','11PM'\n];\n\nconst isActiveDay = (day: CalendarDay) => activeDay.value === day;\nconst setActiveDay = (day: CalendarDay) => { activeDay.value = day; emit('selectDay', day); };\nconst handleSelectEvent = (eventId: string | number) => emit('select:event', eventId);\n\nconst filteredDays = computed(() => activeDay.value ? [activeDay.value] : props.days);\n\nonMounted(() => {\n  const currentMinute = new Date().getHours() * 60;\n  const containerElement = container.value;\n  const containerNavElement = containerNav.value;\n  const containerOffsetElement = containerOffset.value;\n  if (containerElement && containerNavElement && containerOffsetElement) {\n    containerElement.scrollTop = ((containerElement.scrollHeight - containerNavElement.offsetHeight - containerOffsetElement.offsetHeight) * currentMinute) / 1440;\n  }\n});\n</script>\n\n<style scoped>\n</style>\n\n\n"],"names":["props","__props","emit","__emit","container","ref","containerNav","containerOffset","activeDay","hours","isActiveDay","day","setActiveDay","handleSelectEvent","eventId","filteredDays","computed","onMounted","currentMinute","containerElement","containerNavElement","containerOffsetElement","_createElementVNode","_hoisted_1","_hoisted_2","_createElementBlock","_Fragment","_renderList","days","$event","_normalizeClass","_toDisplayString","_hoisted_4","_hoisted_5","_hoisted_6","hour","_hoisted_7","_hoisted_8","_hoisted_9","_openBlock","event","_unref","calculateGridRow","calculateGridSpan","_hoisted_11","_hoisted_12","formatTime","_hoisted_13"],"mappings":"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"}

package/dist/DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js

@@ -0,0 +1,85 @@
+import { defineComponent as m, createElementBlock as t, openBlock as e, createCommentVNode as i, renderSlot as a, createElementVNode as o, normalizeClass as n, toDisplayString as r } from "vue";
+const u = { class: "sl-relative" }, c = {
+  key: 0,
+  class: "sl-py-16 lg:sl-ml-12 sl-mx-2"
+}, g = { class: "sl-mx-auto sl-max-w-7xl" }, h = { class: "sl-mx-auto sl-max-w-2xl lg:sl-mx-0" }, y = { class: "sl-h-2" }, f = {
+  key: 0,
+  class: "sl-mt-1"
+}, x = {
+  key: 1,
+  class: "sl-mx-auto sl-z-50 sl-flex sl-h-16 lg:sl-h-16 sl-border-gray-900/10"
+}, b = { class: "sl-flex sl-h-16 lg:sl-h-16 sl-w-full sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-justify-between" }, v = { class: "sl-flex sl-justify-end sl-items-center sl-ml-auto" }, $ = {
+  key: 2,
+  class: "lg:sl-mx-12 sl-mx-2 sl-pb-16"
+}, k = {
+  key: 5,
+  class: "lg:sl-mx-12 sl-mx-2 sl-pb-16"
+}, C = /* @__PURE__ */ m({
+  __name: "DefaultLayout",
+  props: {
+    title: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    titleClass: {
+      type: String,
+      default: "sl-text-4xl sl-font-bold sl-tracking-tight sl-text-gray-800"
+    },
+    subtitle: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    subtitleClass: {
+      type: String,
+      default: "sl-text-lg sl-leading-8 sl-text-gray-600"
+    }
+  },
+  setup(l) {
+    return (s, d) => (e(), t("div", u, [
+      l.title ? (e(), t("div", c, [
+        o("div", g, [
+          o("div", h, [
+            o("h1", {
+              class: n(l.titleClass)
+            }, r(l.title), 3),
+            l.subtitle ? (e(), t("p", {
+              key: 0,
+              class: n([l.subtitleClass, "sl-mt-6"])
+            }, r(l.subtitle), 3)) : i("", !0),
+            o("div", y, [
+              s.$slots.bottomCaption ? (e(), t("div", f, [
+                a(s.$slots, "bottomCaption")
+              ])) : i("", !0)
+            ])
+          ])
+        ])
+      ])) : !l.title && s.$slots.right ? (e(), t("header", x, [
+        o("div", b, [
+          d[0] || (d[0] = o("div", { class: "sl-hidden lg:sl-flex lg:sl-justify-start lg:sl-items-center" }, null, -1)),
+          o("div", v, [
+            a(s.$slots, "right")
+          ])
+        ])
+      ])) : i("", !0),
+      s.$slots.main ? (e(), t("div", $, [
+        a(s.$slots, "main")
+      ])) : i("", !0),
+      s.$slots.container ? (e(), t("div", {
+        key: 3,
+        class: n(l.title ? "sl-pb-12" : "sl-my-4 sm:sl-py-12")
+      }, [
+        a(s.$slots, "container")
+      ], 2)) : i("", !0),
+      s.$slots.home ? a(s.$slots, "home", { key: 4 }) : i("", !0),
+      s.$slots.default ? (e(), t("div", k, [
+        a(s.$slots, "default")
+      ])) : i("", !0)
+    ]));
+  }
+});
+export {
+  C as _
+};
+//# sourceMappingURL=DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js.map

package/dist/DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js","sources":["../src/components/layouts/DefaultLayout.vue"],"sourcesContent":["<template>\n  <div class=\"sl-relative\">\n    <!-- Header with title -->\n    <div v-if=\"title\" class=\"sl-py-16 lg:sl-ml-12 sl-mx-2\">\n      <div class=\"sl-mx-auto sl-max-w-7xl\">\n        <div class=\"sl-mx-auto sl-max-w-2xl lg:sl-mx-0\">\n          <h1 :class=\"titleClass\">{{ title }}</h1>\n          <p v-if=\"subtitle\" :class=\"subtitleClass\" class=\"sl-mt-6\">{{ subtitle }}</p>\n          <div class=\"sl-h-2\">\n            <template v-if=\"$slots.bottomCaption\">\n              <div class=\"sl-mt-1\">\n                <slot name=\"bottomCaption\"></slot>\n              </div>\n            </template>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Header without title - for right slot only -->\n    <header v-else-if=\"!title && $slots.right\" class=\"sl-mx-auto sl-z-50 sl-flex sl-h-16 lg:sl-h-16 sl-border-gray-900/10\">\n      <div class=\"sl-flex sl-h-16 lg:sl-h-16 sl-w-full sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-justify-between\">\n        <div class=\"sl-hidden lg:sl-flex lg:sl-justify-start lg:sl-items-center\">\n          <!-- Empty space to match positioning -->\n        </div>\n        <div class=\"sl-flex sl-justify-end sl-items-center sl-ml-auto\">\n          <slot name=\"right\"></slot>\n        </div>\n      </div>\n    </header>\n\n    <!-- Main content slot -->\n    <template v-if=\"$slots.main\">\n      <div class=\"lg:sl-mx-12 sl-mx-2 sl-pb-16\">\n        <slot name=\"main\"></slot>\n      </div>\n    </template>\n\n    <!-- Container slot -->\n    <template v-if=\"$slots.container\">\n      <div :class=\"!title ? 'sl-my-4 sm:sl-py-12' : 'sl-pb-12'\">\n        <slot name=\"container\"></slot>\n      </div>\n    </template>\n\n    <!-- Home slot -->\n    <template v-if=\"$slots.home\">\n      <slot name=\"home\"></slot>\n    </template>\n\n    <!-- Default slot -->\n    <template v-if=\"$slots.default\">\n      <div class=\"lg:sl-mx-12 sl-mx-2 sl-pb-16\">\n        <slot></slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps({\n  title: {\n    type: String,\n    required: false,\n    default: ''\n  },\n  titleClass: {\n    type: String,\n    default: 'sl-text-4xl sl-font-bold sl-tracking-tight sl-text-gray-800'\n  },\n  subtitle: {\n    type: String,\n    required: false,\n    default: ''\n  },\n  subtitleClass: {\n    type: String,\n    default: 'sl-text-lg sl-leading-8 sl-text-gray-600'\n  }\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","__props","_hoisted_2","_createElementVNode","_hoisted_3","_hoisted_4","_normalizeClass","_hoisted_5","$slots","_hoisted_6","_renderSlot","_ctx","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBACEA,EAAA,GAAAC,EAuDM,OAvDNC,GAuDM;AAAA,MArDOC,EAAA,SAAXH,EAAA,GAAAC,EAcM,OAdNG,GAcM;AAAA,QAbJC,EAYM,OAZNC,GAYM;AAAA,UAXJD,EAUM,OAVNE,GAUM;AAAA,YATJF,EAAwC,MAAA;AAAA,cAAnC,SAAOF,EAAA,UAAU;AAAA,YAAA,KAAKA,EAAA,KAAK,GAAA,CAAA;AAAA,YACvBA,EAAA,iBAATF,EAA4E,KAAA;AAAA;cAAxD,OAAKO,EAAA,CAAEL,EAAA,eAAqB,SAAS,CAAA;AAAA,YAAA,KAAIA,EAAA,QAAQ,GAAA,CAAA;YACrEE,EAMM,OANNI,GAMM;AAAA,cALYC,EAAAA,OAAO,iBACrBV,KAAAC,EAEM,OAFNU,GAEM;AAAA,gBADJC,EAAkCC,EAAA,QAAA,eAAA;AAAA,cAAA;;;;aAS1BV,EAAA,SAASO,EAAAA,OAAO,SAApCV,EAAA,GAAAC,EASS,UATTa,GASS;AAAA,QARPT,EAOM,OAPNU,GAOM;AAAA,0BANJV,EAEM,OAAA,EAFD,OAAM,8DAAA,GAA6D,MAAA,EAAA;AAAA,UAGxEA,EAEM,OAFNW,GAEM;AAAA,YADJJ,EAA0BC,EAAA,QAAA,OAAA;AAAA,UAAA;;;MAMhBH,EAAAA,OAAO,QACrBV,KAAAC,EAEM,OAFNgB,GAEM;AAAA,QADJL,EAAyBC,EAAA,QAAA,MAAA;AAAA,MAAA;MAKbH,EAAAA,OAAO,kBACrBT,EAEM,OAAA;AAAA;QAFA,SAAQE,EAAA,QAAK,aAAA,qBAAA;AAAA,MAAA;QACjBS,EAA8BC,EAAA,QAAA,WAAA;AAAA,MAAA;MAKlBH,EAAAA,OAAO,OACrBE,EAAyBC,EAAA,QAAA,QAAA,EAAA,KAAA,EAAA,CAAA;MAIXH,EAAAA,OAAO,WACrBV,KAAAC,EAEM,OAFNiB,GAEM;AAAA,QADJN,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js

@@ -0,0 +1,217 @@
+import { createElementBlock as n, openBlock as a, createElementVNode as r, defineComponent as L, ref as q, reactive as G, watch as V, computed as h, withModifiers as I, normalizeClass as m, unref as p, createCommentVNode as o, toDisplayString as i, Fragment as C, renderList as w, createBlock as B, createVNode as F, withCtx as _, createTextVNode as S } from "vue";
+import { useForm as J } from "vee-validate";
+import j from "./components/Button.js";
+import { _ as K } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js";
+function P(f, g) {
+  return a(), n("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    r("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+    })
+  ]);
+}
+const Q = {
+  key: 0,
+  class: "sl-mb-6"
+}, W = {
+  key: 0,
+  class: "sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2"
+}, X = {
+  key: 1,
+  class: "sl-text-sm sl-text-gray-600"
+}, Y = {
+  key: 0,
+  class: "sl-mb-4"
+}, ee = {
+  key: 0,
+  class: "sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1"
+}, te = {
+  key: 1,
+  class: "sl-text-sm sl-text-gray-600"
+}, se = {
+  key: 2,
+  class: "sl-mt-4"
+}, ae = { class: "sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4" }, le = { class: "sl-flex" }, ne = { class: "sl-ml-3" }, oe = { class: "sl-mt-2 sl-text-sm sl-text-red-700" }, fe = /* @__PURE__ */ L({
+  __name: "DynamicForm",
+  props: {
+    schema: {},
+    modelValue: {},
+    loading: { type: Boolean },
+    showActions: { type: Boolean, default: !0 },
+    showCancelButton: { type: Boolean, default: !1 },
+    submitButtonText: {},
+    cancelButtonText: {},
+    submitButtonVariant: { default: "primary" },
+    actionsAlignment: { default: "right" },
+    formError: {}
+  },
+  emits: ["update:modelValue", "submit", "cancel", "field-change"],
+  setup(f, { expose: g, emit: x }) {
+    const c = f, d = x, b = q(), l = G({}), { handleSubmit: E, setErrors: N, meta: y } = J({
+      keepValuesOnUnmount: !0
+    }), v = () => {
+      const e = { ...c.modelValue };
+      c.schema.sections.forEach((t) => {
+        t.fields.forEach((s) => {
+          s.name in e || (e[s.name] = s.defaultValue ?? $(s.type));
+        });
+      }), Object.assign(l, e);
+    };
+    V(
+      () => c.modelValue,
+      (e) => {
+        e && Object.assign(l, e);
+      },
+      { deep: !0 }
+    ), V(
+      l,
+      (e) => {
+        d("update:modelValue", { ...e });
+      },
+      { deep: !0 }
+    ), v();
+    const D = h(() => c.schema.sections.filter(
+      (e) => e.condition ? e.condition(l) : !0
+    )), A = h(() => {
+      const e = ["sl-space-y-6"];
+      return c.schema.className && e.push(c.schema.className), e.join(" ");
+    }), T = (e) => {
+      const t = [
+        "sl-grid",
+        "sl-gap-4"
+      ], s = e.columns || 1;
+      return t.push("sl-grid-cols-1"), s > 1 && t.push(`md:sl-grid-cols-${Math.min(s, 3)}`), e.className && t.push(e.className), t.join(" ");
+    }, M = (e) => {
+      const t = [];
+      return e.colSpan && e.colSpan > 1 && t.push(`sl-col-span-${Math.min(e.colSpan, 3)}`), e.className && t.push(e.className), t.join(" ");
+    }, O = (e) => e.condition ? e.condition(l, e) : !0, U = h(() => y.value.valid), $ = (e) => {
+      switch (e) {
+        case "checkbox":
+        case "switch":
+          return !1;
+        case "select":
+          return null;
+        case "number":
+          return 0;
+        default:
+          return "";
+      }
+    }, k = E((e) => {
+      d("submit", e, { setErrors: N });
+    }), z = () => {
+      d("cancel");
+    }, H = (e, t) => {
+      d("field-change", e, t, l), e.onFieldChange && e.onFieldChange(t, e, l);
+    };
+    return g({
+      validate: async () => y.value.valid,
+      reset: () => {
+        Object.keys(l).forEach((e) => {
+          delete l[e];
+        }), v();
+      },
+      setFieldValue: (e, t) => {
+        l[e] = t;
+      },
+      getFieldValue: (e) => l[e],
+      formData: l,
+      formRef: b
+    }), (e, t) => (a(), n("form", {
+      ref_key: "formRef",
+      ref: b,
+      class: m(A.value),
+      onSubmit: t[0] || (t[0] = I(
+        //@ts-ignore
+        (...s) => p(k) && p(k)(...s),
+        ["prevent"]
+      ))
+    }, [
+      e.schema.title || e.schema.description ? (a(), n("div", Q, [
+        e.schema.title ? (a(), n("h2", W, i(e.schema.title), 1)) : o("", !0),
+        e.schema.description ? (a(), n("p", X, i(e.schema.description), 1)) : o("", !0)
+      ])) : o("", !0),
+      (a(!0), n(C, null, w(D.value, (s, R) => (a(), n("div", {
+        key: s.id || R
+      }, [
+        s.title || s.description ? (a(), n("div", Y, [
+          s.title ? (a(), n("h3", ee, i(s.title), 1)) : o("", !0),
+          s.description ? (a(), n("p", te, i(s.description), 1)) : o("", !0)
+        ])) : o("", !0),
+        r("div", {
+          class: m(T(s))
+        }, [
+          (a(!0), n(C, null, w(s.fields, (u) => (a(), n("div", {
+            key: u.name,
+            class: m(M(u))
+          }, [
+            O(u) ? (a(), B(K, {
+              key: 0,
+              field: u,
+              modelValue: l[u.name],
+              "onUpdate:modelValue": (Z) => l[u.name] = Z,
+              "form-data": l,
+              onFieldChange: H
+            }, null, 8, ["field", "modelValue", "onUpdate:modelValue", "form-data"])) : o("", !0)
+          ], 2))), 128))
+        ], 2)
+      ]))), 128)),
+      e.showActions ? (a(), n("div", {
+        key: 1,
+        class: m([
+          "sl-flex sl-gap-3",
+          e.actionsAlignment === "center" ? "sl-justify-center" : e.actionsAlignment === "right" ? "sl-justify-end" : "sl-justify-start"
+        ])
+      }, [
+        e.showCancelButton ? (a(), B(j, {
+          key: 0,
+          variant: "outline",
+          disabled: e.loading,
+          type: "button",
+          onClick: z
+        }, {
+          default: _(() => [
+            S(i(e.cancelButtonText || "Cancel"), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : o("", !0),
+        F(j, {
+          variant: e.submitButtonVariant,
+          loading: e.loading,
+          disabled: !U.value || e.loading,
+          type: "submit"
+        }, {
+          default: _(() => [
+            S(i(e.submitButtonText || "Submit"), 1)
+          ]),
+          _: 1
+        }, 8, ["variant", "loading", "disabled"])
+      ], 2)) : o("", !0),
+      e.formError ? (a(), n("div", se, [
+        r("div", ae, [
+          r("div", le, [
+            F(p(P), { class: "sl-h-5 sl-w-5 sl-text-red-400" }),
+            r("div", ne, [
+              t[1] || (t[1] = r("h3", { class: "sl-text-sm sl-font-medium sl-text-red-800" }, " Form Error ", -1)),
+              r("div", oe, [
+                r("p", null, i(e.formError), 1)
+              ])
+            ])
+          ])
+        ])
+      ])) : o("", !0)
+    ], 34));
+  }
+});
+export {
+  fe as _
+};
+//# sourceMappingURL=DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js.map

package/dist/DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js","sources":["../node_modules/@heroicons/vue/24/outline/esm/ExclamationCircleIcon.js","../src/components/forms/DynamicForm.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    fill: \"none\",\n    viewBox: \"0 0 24 24\",\n    \"stroke-width\": \"1.5\",\n    stroke: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      d: \"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n    })\n  ]))\n}","<template>\n  <form\n    ref=\"formRef\"\n    :class=\"formClasses\"\n    @submit.prevent=\"handleSubmit\"\n  >\n    <!-- Form title and description -->\n    <div v-if=\"schema.title || schema.description\" class=\"sl-mb-6\">\n      <h2 v-if=\"schema.title\" class=\"sl-text-lg sl-font-semibold sl-text-gray-900 sl-mb-2\">\n        {{ schema.title }}\n      </h2>\n      <p v-if=\"schema.description\" class=\"sl-text-sm sl-text-gray-600\">\n        {{ schema.description }}\n      </p>\n    </div>\n\n    <!-- Form sections -->\n    <div v-for=\"(section, sectionIndex) in formSections\" :key=\"section.id || sectionIndex\">\n      <!-- Section header -->\n      <div v-if=\"section.title || section.description\" class=\"sl-mb-4\">\n        <h3 v-if=\"section.title\" class=\"sl-text-md sl-font-medium sl-text-gray-900 sl-mb-1\">\n          {{ section.title }}\n        </h3>\n        <p v-if=\"section.description\" class=\"sl-text-sm sl-text-gray-600\">\n          {{ section.description }}\n        </p>\n      </div>\n\n      <!-- Section fields -->\n      <div :class=\"sectionClasses(section)\">\n        <div\n          v-for=\"field in section.fields\"\n          :key=\"field.name\"\n          :class=\"fieldClasses(field)\"\n        >\n          <!-- Conditional rendering -->\n          <SlDynamicFormField\n            v-if=\"shouldShowField(field)\"\n            :field=\"field\"\n            v-model=\"formData[field.name]\"\n            :form-data=\"formData\"\n            @field-change=\"handleFieldChange\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Form actions -->\n    <div\n      v-if=\"showActions\"\n      :class=\"[\n        'sl-flex sl-gap-3',\n        actionsAlignment === 'center' ? 'sl-justify-center' :\n        actionsAlignment === 'right' ? 'sl-justify-end' :\n        'sl-justify-start'\n      ]\"\n    >\n      <SlButton\n        v-if=\"showCancelButton\"\n        variant=\"outline\"\n        :disabled=\"loading\"\n        type=\"button\"\n        @click=\"handleCancel\"\n      >\n        {{ cancelButtonText || 'Cancel' }}\n      </SlButton>\n      \n      <SlButton\n        :variant=\"submitButtonVariant\"\n        :loading=\"loading\"\n        :disabled=\"!isFormValid || loading\"\n        type=\"submit\"\n      >\n        {{ submitButtonText || 'Submit' }}\n      </SlButton>\n    </div>\n    \n    <!-- Form-level errors -->\n    <div v-if=\"formError\" class=\"sl-mt-4\">\n      <div class=\"sl-bg-red-50 sl-border sl-border-red-200 sl-rounded-md sl-p-4\">\n        <div class=\"sl-flex\">\n          <ExclamationCircleIcon class=\"sl-h-5 sl-w-5 sl-text-red-400\" />\n          <div class=\"sl-ml-3\">\n            <h3 class=\"sl-text-sm sl-font-medium sl-text-red-800\">\n              Form Error\n            </h3>\n            <div class=\"sl-mt-2 sl-text-sm sl-text-red-700\">\n              <p>{{ formError }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useForm } from 'vee-validate'\nimport { ExclamationCircleIcon } from '@heroicons/vue/24/outline'\nimport SlButton from '../UiButton.vue'\nimport SlDynamicFormField from './DynamicFormField.vue'\nimport type { \n  DynamicFormSchema, \n  DynamicFormSection,\n  DynamicFormField,\n  ButtonVariant \n} from '../../types/form'\n\ninterface Props {\n  schema: DynamicFormSchema\n  modelValue?: Record<string, any>\n  loading?: boolean\n  showActions?: boolean\n  showCancelButton?: boolean\n  submitButtonText?: string\n  cancelButtonText?: string\n  submitButtonVariant?: ButtonVariant\n  actionsAlignment?: 'left' | 'center' | 'right'\n  formError?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showActions: true,\n  showCancelButton: false,\n  submitButtonVariant: 'primary',\n  actionsAlignment: 'right'\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: Record<string, any>): void\n  (e: 'submit', data: Record<string, any>, ctx: { setErrors: (errors: Record<string, string>) => void }): void\n  (e: 'cancel'): void\n  (e: 'field-change', field: DynamicFormField, value: any, formData: Record<string, any>): void\n}>()\n\nconst formRef = ref<HTMLFormElement>()\nconst formData = reactive<Record<string, any>>({})\n\n// Initialize form with vee-validate\nconst { handleSubmit: veeHandleSubmit, setErrors, meta } = useForm({\n  keepValuesOnUnmount: true\n})\n\n// Initialize form data\nconst initializeFormData = () => {\n  const initialData = { ...props.modelValue } || {}\n  \n  // Set default values from schema\n  props.schema.sections.forEach(section => {\n    section.fields.forEach(field => {\n      if (!(field.name in initialData)) {\n        initialData[field.name] = field.defaultValue ?? getDefaultValue(field.type)\n      }\n    })\n  })\n  \n  Object.assign(formData, initialData)\n}\n\n// Watch for external changes to modelValue\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      Object.assign(formData, newValue)\n    }\n  },\n  { deep: true }\n)\n\n// Watch form data changes and emit updates\nwatch(\n  formData,\n  (newData) => {\n    emit('update:modelValue', { ...newData })\n  },\n  { deep: true }\n)\n\n// Initialize form data on mount\ninitializeFormData()\n\nconst formSections = computed(() => {\n  return props.schema.sections.filter(section => \n    section.condition ? section.condition(formData) : true\n  )\n})\n\nconst formClasses = computed(() => {\n  const baseClasses = ['sl-space-y-6']\n  \n  if (props.schema.className) {\n    baseClasses.push(props.schema.className)\n  }\n  \n  return baseClasses.join(' ')\n})\n\nconst sectionClasses = (section: DynamicFormSection) => {\n  const baseClasses = [\n    'sl-grid',\n    'sl-gap-4'\n  ]\n  \n  // Grid columns based on section layout\n  const columns = section.columns || 1\n  baseClasses.push(`sl-grid-cols-1`)\n  \n  if (columns > 1) {\n    baseClasses.push(`md:sl-grid-cols-${Math.min(columns, 3)}`)\n  }\n  \n  if (section.className) {\n    baseClasses.push(section.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst fieldClasses = (field: DynamicFormField) => {\n  const baseClasses: string[] = []\n  \n  // Field span\n  if (field.colSpan && field.colSpan > 1) {\n    baseClasses.push(`sl-col-span-${Math.min(field.colSpan, 3)}`)\n  }\n  \n  if (field.className) {\n    baseClasses.push(field.className)\n  }\n  \n  return baseClasses.join(' ')\n}\n\nconst shouldShowField = (field: DynamicFormField): boolean => {\n  if (field.condition) {\n    return field.condition(formData, field)\n  }\n  return true\n}\n\nconst isFormValid = computed(() => {\n  return meta.value.valid\n})\n\nconst getDefaultValue = (type: string) => {\n  switch (type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return null\n    case 'number':\n      return 0\n    default:\n      return ''\n  }\n}\n\nconst handleSubmit = veeHandleSubmit((values) => {\n  emit('submit', values, { setErrors })\n})\n\nconst handleCancel = () => {\n  emit('cancel')\n}\n\nconst handleFieldChange = (field: DynamicFormField, value: any) => {\n  emit('field-change', field, value, formData)\n  \n  // Handle field dependencies\n  if (field.onFieldChange) {\n    field.onFieldChange(value, field, formData)\n  }\n}\n\n// Expose form methods\nconst validate = async () => {\n  // Trigger vee-validate validation\n  return meta.value.valid\n}\n\nconst reset = () => {\n  Object.keys(formData).forEach(key => {\n    delete formData[key]\n  })\n  initializeFormData()\n}\n\nconst setFieldValue = (fieldName: string, value: any) => {\n  formData[fieldName] = value\n}\n\nconst getFieldValue = (fieldName: string) => {\n  return formData[fieldName]\n}\n\ndefineExpose({\n  validate,\n  reset,\n  setFieldValue,\n  getFieldValue,\n  formData,\n  formRef\n})\n</script>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","emit","__emit","formRef","ref","formData","reactive","veeHandleSubmit","setErrors","meta","useForm","initializeFormData","initialData","section","field","getDefaultValue","watch","newValue","newData","formSections","computed","formClasses","baseClasses","sectionClasses","columns","fieldClasses","shouldShowField","isFormValid","type","handleSubmit","values","handleCancel","handleFieldChange","value","__expose","key","fieldName","_withModifiers","_unref","args","schema","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","_Fragment","_renderList","sectionIndex","_hoisted_4","_hoisted_5","_hoisted_6","_normalizeClass","_createBlock","SlDynamicFormField","$event","showActions","actionsAlignment","showCancelButton","SlButton","loading","cancelButtonText","_createVNode","submitButtonVariant","submitButtonText","formError","_hoisted_7","_hoisted_8","_hoisted_9","ExclamationCircleIcon","_hoisted_10","_hoisted_11"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js

@@ -0,0 +1,169 @@
+import { createElementBlock as u, openBlock as d, createElementVNode as o, defineComponent as b, computed as s, defineAsyncComponent as y, createBlock as w, resolveDynamicComponent as g, mergeProps as k, toHandlers as _, createVNode as L, unref as V, toDisplayString as C } from "vue";
+import t from "./components/TextInput.js";
+function M(a, r) {
+  return d(), u("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    o("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+    })
+  ]);
+}
+const P = {
+  key: 1,
+  class: "sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md"
+}, D = { class: "sl-flex" }, F = { class: "sl-ml-3" }, B = { class: "sl-mt-2 sl-text-sm sl-text-yellow-700" }, H = /* @__PURE__ */ b({
+  __name: "DynamicFormField",
+  props: {
+    field: {},
+    modelValue: {},
+    formData: {}
+  },
+  emits: ["update:modelValue", "field-change"],
+  setup(a, { emit: r }) {
+    const e = a, c = r, f = {
+      text: () => Promise.resolve(t),
+      email: () => Promise.resolve(t),
+      password: () => Promise.resolve(t),
+      number: () => Promise.resolve(t),
+      tel: () => Promise.resolve(t),
+      url: () => Promise.resolve(t),
+      textarea: () => import("./inputs/TextAreaInput.js"),
+      select: () => import("./inputs/SelectInput.js"),
+      combobox: () => import("./inputs/ComboboxInput.js"),
+      checkbox: () => import("./inputs/CheckboxInput.js"),
+      switch: () => import("./inputs/SwitchInput.js")
+    }, m = s(() => {
+      const l = f[e.field.type];
+      return l ? y({
+        loader: l,
+        errorComponent: () => null,
+        delay: 0
+      }) : null;
+    }), n = s({
+      get: () => e.modelValue ?? e.field.defaultValue ?? x(),
+      set: (l) => {
+        c("update:modelValue", l), c("field-change", e.field, l);
+      }
+    }), p = s(() => {
+      const l = {
+        name: e.field.name,
+        label: e.field.label,
+        placeholder: e.field.placeholder,
+        disabled: e.field.disabled,
+        rules: e.field.validation,
+        validateOnMount: e.field.validateOnMount,
+        tertiaryLabel: e.field.tertiaryLabel,
+        successMessage: e.field.successMessage
+      };
+      switch (e.field.type) {
+        case "text":
+        case "email":
+        case "password":
+        case "number":
+        case "tel":
+        case "url":
+          return {
+            ...l,
+            type: e.field.inputType || e.field.type,
+            maxlength: e.field.maxLength,
+            minlength: e.field.minLength,
+            min: e.field.min,
+            max: e.field.max,
+            step: e.field.step,
+            spellcheck: e.field.spellcheck,
+            autocomplete: e.field.autocomplete
+          };
+        case "textarea":
+          return {
+            ...l,
+            rows: e.field.rows,
+            maxlength: e.field.maxLength,
+            spellcheck: e.field.spellcheck
+          };
+        case "select":
+          return {
+            ...l,
+            items: e.field.options || [],
+            multiple: e.field.multiple,
+            itemKey: e.field.optionKey || "value",
+            itemText: e.field.optionLabel || "label",
+            showAll: e.field.showSelectAll
+          };
+        case "combobox":
+          return {
+            ...l,
+            items: e.field.options || [],
+            itemKey: e.field.optionKey || "value",
+            itemText: e.field.optionLabel || "label",
+            customQuery: e.field.customQuery,
+            loading: e.field.loading
+          };
+        case "checkbox":
+          return {
+            ...l,
+            description: e.field.description,
+            immediate: e.field.immediate ?? !0,
+            isDescriptionHtml: e.field.isDescriptionHtml
+          };
+        case "switch":
+          return {
+            ...l,
+            description: e.field.description,
+            immediate: e.field.immediate ?? !0,
+            boxShadow: e.field.boxShadow,
+            hideMainLabel: e.field.hideMainLabel,
+            textTrue: e.field.textTrue,
+            textFalse: e.field.textFalse
+          };
+        default:
+          return l;
+      }
+    }), h = s(() => {
+      const l = {};
+      return e.field.onBlur && (l.blur = e.field.onBlur), e.field.onFocus && (l.focus = e.field.onFocus), e.field.onChange && (l["update:modelValue"] = (i) => {
+        n.value = i, e.field.onChange?.(i, e.field, e.formData ?? {});
+      }), l;
+    }), x = () => {
+      switch (e.field.type) {
+        case "checkbox":
+        case "switch":
+          return !1;
+        case "select":
+          return e.field.multiple ? [] : null;
+        case "number":
+          return e.field.min || 0;
+        default:
+          return "";
+      }
+    }, v = (l) => {
+      n.value = l;
+    };
+    return (l, i) => m.value ? (d(), w(g(m.value), k({ key: 0 }, p.value, _(h.value), {
+      "model-value": n.value,
+      "onUpdate:modelValue": v
+    }), null, 16, ["model-value"])) : (d(), u("div", P, [
+      o("div", D, [
+        L(V(M), { class: "sl-h-5 sl-w-5 sl-text-yellow-400" }),
+        o("div", F, [
+          i[0] || (i[0] = o("h3", { class: "sl-text-sm sl-font-medium sl-text-yellow-800" }, " Unknown field type ", -1)),
+          o("div", B, [
+            o("p", null, 'Field type "' + C(l.field.type) + '" is not supported.', 1)
+          ])
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  H as _
+};
+//# sourceMappingURL=DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js.map