@gxp-dev/mod-ui 2.0.0 → 2.0.3

package/dist/components/compositions/elements/picker/DateTimePicker.vue2.js

@@ -1,174 +1,5 @@
-import { defineComponent as C, useModel as B, ref as f, watchEffect as T, computed as x, openBlock as k, createBlock as D, unref as n, withCtx as i, createVNode as u, normalizeClass as I, createElementVNode as p, toDisplayString as P, mergeModels as q } from "vue";
-import { Calendar as U, Clock as z } from "lucide-vue-next";
-import { parseDate as H, CalendarDate as y } from "@internationalized/date";
-import "../../../ui/button/index.js";
-import E from "../../../ui/calendar/Calendar.vue.js";
-import "@vueuse/core";
-import "reka-ui";
-import { cn as L } from "../../../../lib/utils.js";
-import $ from "../../../ui/input/Input.vue.js";
-import N from "../../../ui/field-frame/FieldFrame.vue.js";
-import j from "../../../ui/popover/Popover.vue.js";
-import A from "../../../ui/popover/PopoverContent.vue.js";
-import F from "../../../ui/popover/PopoverTrigger.vue.js";
-import G from "../../../ui/button/Button.vue.js";
-const J = { class: "flex items-center gap-2 border-t p-3" }, oe = /* @__PURE__ */ C({
-  __name: "DateTimePicker",
-  props: /* @__PURE__ */ q({
-    modelValue: {},
-    id: {},
-    name: {},
-    label: {},
-    hideLabel: { type: Boolean },
-    placeholder: {},
-    required: { type: Boolean },
-    readonly: { type: Boolean },
-    disabled: { type: Boolean },
-    helpText: {},
-    errors: { default: () => [] }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(t) {
-    const m = B(t, "modelValue"), l = f(""), o = f(""), r = f("");
-    T(() => {
-      const e = m.value;
-      if (!e) {
-        l.value = "", o.value = "", r.value = "";
-        return;
-      }
-      const [a, d] = e.split("T");
-      if (l.value = a ?? "", d) {
-        const [S, w] = d.split(":");
-        o.value = S ?? "", r.value = (w ?? "").slice(0, 2);
-      } else
-        o.value = "", r.value = "";
-    });
-    const v = f(!1), h = x(() => {
-      if (l.value)
-        try {
-          return H(l.value);
-        } catch {
-          return;
-        }
-    });
-    function s() {
-      if (!l.value) {
-        m.value = null;
-        return;
-      }
-      if (o.value === "" && r.value === "") {
-        m.value = l.value;
-        return;
-      }
-      const e = c(o.value || "0"), a = c(r.value || "0");
-      m.value = `${l.value}T${e}:${a}:00`;
-    }
-    function c(e) {
-      return Math.max(0, parseInt(e, 10) || 0).toString().padStart(2, "0");
-    }
-    function g(e) {
-      if (!e) {
-        l.value = "", s();
-        return;
-      }
-      const a = e instanceof y ? e : new y(e.year, e.month, e.day);
-      l.value = a.toString(), s(), v.value = !1;
-    }
-    function M(e) {
-      const a = String(e ?? ""), d = Math.min(23, Math.max(0, parseInt(a, 10) || 0));
-      o.value = d.toString(), s();
-    }
-    function V(e) {
-      const a = String(e ?? ""), d = Math.min(59, Math.max(0, parseInt(a, 10) || 0));
-      r.value = d.toString(), s();
-    }
-    const b = x(() => l.value ? o.value === "" && r.value === "" ? l.value : `${l.value} ${c(o.value || "0")}:${c(r.value || "0")}` : "");
-    return (e, a) => (k(), D(n(N), {
-      label: t.label,
-      required: t.required,
-      "hide-label": t.hideLabel,
-      for: t.id,
-      "help-text": t.helpText,
-      errors: t.errors
-    }, {
-      default: i(() => [
-        u(n(j), {
-          open: v.value,
-          "onUpdate:open": a[0] || (a[0] = (d) => v.value = d)
-        }, {
-          default: i(() => [
-            u(n(F), { "as-child": "" }, {
-              default: i(() => [
-                u(n(G), {
-                  type: "button",
-                  variant: "outline",
-                  disabled: t.disabled,
-                  class: I(
-                    n(L)(
-                      "w-full justify-start text-left font-normal",
-                      !b.value && "text-muted-foreground"
-                    )
-                  ),
-                  "data-element-name": t.name ?? void 0,
-                  "data-readonly": t.readonly || void 0
-                }, {
-                  default: i(() => [
-                    u(n(U), { class: "mr-2 size-4" }),
-                    p("span", null, P(b.value || t.placeholder || "Pick a date & time"), 1)
-                  ]),
-                  _: 1
-                }, 8, ["disabled", "class", "data-element-name", "data-readonly"])
-              ]),
-              _: 1
-            }),
-            u(n(A), { class: "w-auto p-0" }, {
-              default: i(() => [
-                u(n(E), {
-                  "model-value": h.value,
-                  placeholder: h.value,
-                  "onUpdate:modelValue": g
-                }, null, 8, ["model-value", "placeholder"]),
-                p("div", J, [
-                  u(n(z), { class: "size-4 text-muted-foreground" }),
-                  u(n($), {
-                    type: "number",
-                    min: "0",
-                    max: "23",
-                    "model-value": o.value,
-                    class: "w-16",
-                    disabled: t.disabled,
-                    placeholder: "HH",
-                    "data-testid": "datetime-hour",
-                    "onUpdate:modelValue": M
-                  }, null, 8, ["model-value", "disabled"]),
-                  a[1] || (a[1] = p("span", { class: "text-muted-foreground" }, ":", -1)),
-                  u(n($), {
-                    type: "number",
-                    min: "0",
-                    max: "59",
-                    "model-value": r.value,
-                    class: "w-16",
-                    disabled: t.disabled,
-                    placeholder: "MM",
-                    "data-testid": "datetime-minute",
-                    "onUpdate:modelValue": V
-                  }, null, 8, ["model-value", "disabled"])
-                ])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["open"])
-      ]),
-      _: 1
-    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
-  }
-});
+import f from "./DateTimePicker.vue.js";
 export {
-  oe as default
+  f as default
 };
 //# sourceMappingURL=DateTimePicker.vue2.js.map

package/dist/components/compositions/elements/picker/DateTimePicker.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.vue2.js","sources":["../../../../../src/components/compositions/elements/picker/DateTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date+time picker composition. DatePicker-style Popover\n * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO\n * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the\n * value falls back to a date-only ISO string.\n *\n *   <DateTimePicker v-model=\"when\" label=\"Starts at\" />\n */\nimport { computed, ref, watchEffect } from \"vue\"\nimport { Calendar as CalendarIcon, Clock } from \"lucide-vue-next\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DateTimePickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<DateTimePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst datePart = ref<string>(\"\")\nconst hourPart = ref<string>(\"\")\nconst minutePart = ref<string>(\"\")\n\nwatchEffect(() => {\n  const iso = model.value\n  if (!iso) {\n    datePart.value = \"\"\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n    return\n  }\n  const [d, t] = iso.split(\"T\")\n  datePart.value = d ?? \"\"\n  if (t) {\n    const [hh, mm] = t.split(\":\")\n    hourPart.value = hh ?? \"\"\n    minutePart.value = (mm ?? \"\").slice(0, 2)\n  } else {\n    hourPart.value = \"\"\n    minutePart.value = \"\"\n  }\n})\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  if (!datePart.value) {\n    return undefined\n  }\n  try {\n    return parseDate(datePart.value)\n  } catch {\n    return undefined\n  }\n})\n\nfunction emitCombined(): void {\n  if (!datePart.value) {\n    model.value = null\n    return\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    model.value = datePart.value\n    return\n  }\n  const hh = padTwo(hourPart.value || \"0\")\n  const mm = padTwo(minutePart.value || \"0\")\n  model.value = `${datePart.value}T${hh}:${mm}:00`\n}\n\nfunction padTwo(value: string): string {\n  const n = Math.max(0, parseInt(value, 10) || 0)\n  return n.toString().padStart(2, \"0\")\n}\n\nfunction onDateSelected(value: DateValue | undefined): void {\n  if (!value) {\n    datePart.value = \"\"\n    emitCombined()\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  datePart.value = calendar.toString()\n  emitCombined()\n  open.value = false\n}\n\nfunction onHourInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))\n  hourPart.value = numeric.toString()\n  emitCombined()\n}\n\nfunction onMinuteInput(value: string | number | undefined): void {\n  const next = String(value ?? \"\")\n  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))\n  minutePart.value = numeric.toString()\n  emitCombined()\n}\n\nconst displayValue = computed<string>(() => {\n  if (!datePart.value) {\n    return \"\"\n  }\n  if (hourPart.value === \"\" && minutePart.value === \"\") {\n    return datePart.value\n  }\n  return `${datePart.value} ${padTwo(hourPart.value || \"0\")}:${padTwo(minutePart.value || \"0\")}`\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !displayValue && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date & time\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :placeholder=\"calendarValue\"\n          @update:model-value=\"onDateSelected\"\n        />\n        <div class=\"flex items-center gap-2 border-t p-3\">\n          <Clock class=\"size-4 text-muted-foreground\" />\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"23\"\n            :model-value=\"hourPart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"HH\"\n            data-testid=\"datetime-hour\"\n            @update:model-value=\"onHourInput\"\n          />\n          <span class=\"text-muted-foreground\">:</span>\n          <Input\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            :model-value=\"minutePart\"\n            class=\"w-16\"\n            :disabled=\"disabled\"\n            placeholder=\"MM\"\n            data-testid=\"datetime-minute\"\n            @update:model-value=\"onMinuteInput\"\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","datePart","ref","hourPart","minutePart","watchEffect","iso","d","t","hh","mm","open","calendarValue","computed","parseDate","emitCombined","padTwo","value","onDateSelected","calendar","CalendarDate","onHourInput","next","numeric","onMinuteInput","displayValue","_createBlock","_unref","FieldFrame","_createVNode","Popover","$event","PopoverTrigger","Button","_normalizeClass","cn","CalendarIcon","_createElementVNode","_toDisplayString","PopoverContent","Calendar","_hoisted_1","Clock","Input","_cache"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/picker/IconPicker.vue.d.ts

@@ -0,0 +1,26 @@
+export interface IconPickerProps {
+    modelValue?: string | null;
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+}
+type __VLS_Props = IconPickerProps;
+type __VLS_PublicProps = {
+    "modelValue"?: string | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    errors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=IconPicker.vue.d.ts.map

package/dist/components/compositions/elements/picker/IconPicker.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/picker/IconPicker.vue"],"names":[],"mappings":"AAgOA,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,KAAK,WAAW,GAAG,eAAe,CAAC;AA+HnC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GAAG,WAAW,CAAC;;;;;;YApIL,MAAM,EAAE;;AA6TnB,wBASG"}

package/dist/components/compositions/elements/picker/IconPicker.vue.js

@@ -1,5 +1,193 @@
-import f from "./IconPicker.vue2.js";
+import { defineComponent as b, useModel as g, ref as k, computed as h, openBlock as n, createBlock as d, unref as o, withCtx as t, createVNode as i, resolveDynamicComponent as p, createCommentVNode as S, createTextVNode as V, createElementBlock as M, Fragment as L, renderList as q, createElementVNode as x, toDisplayString as B, mergeModels as I, h as P } from "vue";
+import * as w from "lucide-vue-next";
+import $ from "../../../ui/combobox/Combobox.vue.js";
+import F from "../../../ui/combobox/ComboboxAnchor.vue.js";
+import T from "../../../ui/combobox/ComboboxContent.vue.js";
+import E from "../../../ui/combobox/ComboboxEmpty.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import A from "../../../ui/combobox/ComboboxInput.vue.js";
+import D from "../../../ui/combobox/ComboboxItem.vue.js";
+import N from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
+import U from "../../../ui/field-frame/FieldFrame.vue.js";
+const _ = { class: "ml-2" }, ee = /* @__PURE__ */ b({
+  __name: "IconPicker",
+  props: /* @__PURE__ */ I({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const u = g(e, "modelValue"), m = k(""), c = [
+      "Activity",
+      "AlertCircle",
+      "Archive",
+      "Bell",
+      "Bookmark",
+      "Briefcase",
+      "Calendar",
+      "Camera",
+      "Check",
+      "ChevronRight",
+      "Clock",
+      "Cloud",
+      "Code",
+      "Copy",
+      "Database",
+      "Download",
+      "Edit",
+      "Eye",
+      "Facebook",
+      "File",
+      "FileText",
+      "Filter",
+      "Flag",
+      "Folder",
+      "Gift",
+      "Globe",
+      "Heart",
+      "Home",
+      "Image",
+      "Inbox",
+      "Info",
+      "Layers",
+      "Link",
+      "Lock",
+      "LogIn",
+      "LogOut",
+      "Mail",
+      "MapPin",
+      "Menu",
+      "MessageSquare",
+      "Mic",
+      "Monitor",
+      "Moon",
+      "Music",
+      "Paperclip",
+      "Pause",
+      "Phone",
+      "PieChart",
+      "Play",
+      "Plus",
+      "Power",
+      "Printer",
+      "RefreshCw",
+      "Save",
+      "Search",
+      "Send",
+      "Settings",
+      "Share",
+      "ShieldCheck",
+      "ShoppingCart",
+      "Star",
+      "Sun",
+      "Tag",
+      "Trash",
+      "Twitter",
+      "Upload",
+      "User",
+      "Video",
+      "Wifi",
+      "Wrench",
+      "X",
+      "Zap"
+    ], y = h(() => {
+      const r = m.value.trim().toLowerCase();
+      return r ? c.filter((l) => l.toLowerCase().includes(r)) : c;
+    });
+    function s(r) {
+      return r ? w[r] : void 0;
+    }
+    const f = h(
+      () => s(u.value ?? "")
+    );
+    function v(r) {
+      const l = s(r);
+      return l ? P(l, { class: "size-4" }) : null;
+    }
+    function C(r) {
+      u.value = typeof r == "string" ? r : "";
+    }
+    return (r, l) => (n(), d(o(U), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      for: e.id,
+      "help-text": e.helpText,
+      errors: e.errors
+    }, {
+      default: t(() => [
+        i(o($), {
+          "model-value": u.value ?? "",
+          disabled: e.disabled,
+          "onUpdate:modelValue": C
+        }, {
+          default: t(() => [
+            i(o(F), {
+              "data-element-name": e.name ?? void 0,
+              "data-readonly": e.readonly || void 0
+            }, {
+              default: t(() => [
+                f.value ? (n(), d(p(f.value), {
+                  key: 0,
+                  class: "mr-2 size-4 shrink-0",
+                  "data-testid": "icon-preview"
+                })) : S("", !0),
+                i(o(A), {
+                  modelValue: m.value,
+                  "onUpdate:modelValue": l[0] || (l[0] = (a) => m.value = a),
+                  placeholder: e.placeholder ?? "Search icons…",
+                  readonly: e.readonly,
+                  required: e.required
+                }, null, 8, ["modelValue", "placeholder", "readonly", "required"])
+              ]),
+              _: 1
+            }, 8, ["data-element-name", "data-readonly"]),
+            i(o(T), null, {
+              default: t(() => [
+                i(o(E), null, {
+                  default: t(() => [...l[1] || (l[1] = [
+                    V("No icons match.", -1)
+                  ])]),
+                  _: 1
+                }),
+                (n(!0), M(L, null, q(y.value, (a) => (n(), d(o(D), {
+                  key: a,
+                  value: a
+                }, {
+                  default: t(() => [
+                    i(o(N)),
+                    (n(), d(p(v(a)))),
+                    x("span", _, B(a), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
 export {
-  f as default
+  ee as default
 };
 //# sourceMappingURL=IconPicker.vue.js.map

package/dist/components/compositions/elements/picker/IconPicker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"IconPicker.vue.js","sources":["../../../../../src/components/compositions/elements/picker/IconPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"lucide-vue-next\"\nimport type { Component } from \"vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","query","ref","ICON_NAMES","filtered","computed","q","name","resolveIcon","LucideIcons","previewIcon","renderIcon","icon","h","onSelect","value","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_openBlock","_resolveDynamicComponent","ComboboxInput","$event","ComboboxContent","ComboboxEmpty","_cache","_createElementBlock","_Fragment","_renderList","iconName","ComboboxItem","ComboboxItemIndicator","_createElementVNode","_hoisted_1","_toDisplayString"],"mappings":"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"}

package/dist/components/compositions/elements/picker/IconPicker.vue2.js

@@ -1,193 +1,5 @@
-import { defineComponent as b, useModel as g, ref as k, computed as h, openBlock as n, createBlock as d, unref as o, withCtx as t, createVNode as i, resolveDynamicComponent as p, createCommentVNode as S, createTextVNode as V, createElementBlock as M, Fragment as L, renderList as q, createElementVNode as x, toDisplayString as B, mergeModels as I, h as P } from "vue";
-import * as w from "lucide-vue-next";
-import $ from "../../../ui/combobox/Combobox.vue.js";
-import F from "../../../ui/combobox/ComboboxAnchor.vue.js";
-import T from "../../../ui/combobox/ComboboxContent.vue.js";
-import E from "../../../ui/combobox/ComboboxEmpty.vue.js";
-import "@vueuse/core";
-import "reka-ui";
-import "clsx";
-import "tailwind-merge";
-import A from "../../../ui/combobox/ComboboxInput.vue.js";
-import D from "../../../ui/combobox/ComboboxItem.vue.js";
-import N from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
-import U from "../../../ui/field-frame/FieldFrame.vue.js";
-const _ = { class: "ml-2" }, ee = /* @__PURE__ */ b({
-  __name: "IconPicker",
-  props: /* @__PURE__ */ I({
-    modelValue: {},
-    id: {},
-    name: {},
-    label: {},
-    hideLabel: { type: Boolean },
-    placeholder: {},
-    required: { type: Boolean },
-    readonly: { type: Boolean },
-    disabled: { type: Boolean },
-    helpText: {},
-    errors: { default: () => [] }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(e) {
-    const u = g(e, "modelValue"), m = k(""), c = [
-      "Activity",
-      "AlertCircle",
-      "Archive",
-      "Bell",
-      "Bookmark",
-      "Briefcase",
-      "Calendar",
-      "Camera",
-      "Check",
-      "ChevronRight",
-      "Clock",
-      "Cloud",
-      "Code",
-      "Copy",
-      "Database",
-      "Download",
-      "Edit",
-      "Eye",
-      "Facebook",
-      "File",
-      "FileText",
-      "Filter",
-      "Flag",
-      "Folder",
-      "Gift",
-      "Globe",
-      "Heart",
-      "Home",
-      "Image",
-      "Inbox",
-      "Info",
-      "Layers",
-      "Link",
-      "Lock",
-      "LogIn",
-      "LogOut",
-      "Mail",
-      "MapPin",
-      "Menu",
-      "MessageSquare",
-      "Mic",
-      "Monitor",
-      "Moon",
-      "Music",
-      "Paperclip",
-      "Pause",
-      "Phone",
-      "PieChart",
-      "Play",
-      "Plus",
-      "Power",
-      "Printer",
-      "RefreshCw",
-      "Save",
-      "Search",
-      "Send",
-      "Settings",
-      "Share",
-      "ShieldCheck",
-      "ShoppingCart",
-      "Star",
-      "Sun",
-      "Tag",
-      "Trash",
-      "Twitter",
-      "Upload",
-      "User",
-      "Video",
-      "Wifi",
-      "Wrench",
-      "X",
-      "Zap"
-    ], y = h(() => {
-      const r = m.value.trim().toLowerCase();
-      return r ? c.filter((l) => l.toLowerCase().includes(r)) : c;
-    });
-    function s(r) {
-      return r ? w[r] : void 0;
-    }
-    const f = h(
-      () => s(u.value ?? "")
-    );
-    function v(r) {
-      const l = s(r);
-      return l ? P(l, { class: "size-4" }) : null;
-    }
-    function C(r) {
-      u.value = typeof r == "string" ? r : "";
-    }
-    return (r, l) => (n(), d(o(U), {
-      label: e.label,
-      required: e.required,
-      "hide-label": e.hideLabel,
-      for: e.id,
-      "help-text": e.helpText,
-      errors: e.errors
-    }, {
-      default: t(() => [
-        i(o($), {
-          "model-value": u.value ?? "",
-          disabled: e.disabled,
-          "onUpdate:modelValue": C
-        }, {
-          default: t(() => [
-            i(o(F), {
-              "data-element-name": e.name ?? void 0,
-              "data-readonly": e.readonly || void 0
-            }, {
-              default: t(() => [
-                f.value ? (n(), d(p(f.value), {
-                  key: 0,
-                  class: "mr-2 size-4 shrink-0",
-                  "data-testid": "icon-preview"
-                })) : S("", !0),
-                i(o(A), {
-                  modelValue: m.value,
-                  "onUpdate:modelValue": l[0] || (l[0] = (a) => m.value = a),
-                  placeholder: e.placeholder ?? "Search icons…",
-                  readonly: e.readonly,
-                  required: e.required
-                }, null, 8, ["modelValue", "placeholder", "readonly", "required"])
-              ]),
-              _: 1
-            }, 8, ["data-element-name", "data-readonly"]),
-            i(o(T), null, {
-              default: t(() => [
-                i(o(E), null, {
-                  default: t(() => [...l[1] || (l[1] = [
-                    V("No icons match.", -1)
-                  ])]),
-                  _: 1
-                }),
-                (n(!0), M(L, null, q(y.value, (a) => (n(), d(o(D), {
-                  key: a,
-                  value: a
-                }, {
-                  default: t(() => [
-                    i(o(N)),
-                    (n(), d(p(v(a)))),
-                    x("span", _, B(a), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["value"]))), 128))
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["model-value", "disabled"])
-      ]),
-      _: 1
-    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
-  }
-});
+import f from "./IconPicker.vue.js";
 export {
-  ee as default
+  f as default
 };
 //# sourceMappingURL=IconPicker.vue2.js.map

package/dist/components/compositions/elements/picker/IconPicker.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.vue2.js","sources":["../../../../../src/components/compositions/elements/picker/IconPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon picker composition. Searchable combobox over a\n * curated subset of lucide icon names. The selected value is the icon's\n * PascalCase name (e.g. `\"Calendar\"`); the currently-selected icon is\n * rendered as a live preview alongside the combobox input.\n *\n *   <IconPicker v-model=\"icon\" label=\"Icon\" />\n */\nimport { computed, h, ref } from \"vue\"\nimport * as LucideIcons from \"lucide-vue-next\"\nimport type { Component } from \"vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconPickerProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * A small curated subset of lucide icon names. We don't enumerate the\n * whole 1.4k+ set because we render the preview component eagerly and\n * Storybook bundles every story.\n */\nconst ICON_NAMES = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Briefcase\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"ChevronRight\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Copy\",\n  \"Database\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"Facebook\",\n  \"File\",\n  \"FileText\",\n  \"Filter\",\n  \"Flag\",\n  \"Folder\",\n  \"Gift\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Inbox\",\n  \"Info\",\n  \"Layers\",\n  \"Link\",\n  \"Lock\",\n  \"LogIn\",\n  \"LogOut\",\n  \"Mail\",\n  \"MapPin\",\n  \"Menu\",\n  \"MessageSquare\",\n  \"Mic\",\n  \"Monitor\",\n  \"Moon\",\n  \"Music\",\n  \"Paperclip\",\n  \"Pause\",\n  \"Phone\",\n  \"PieChart\",\n  \"Play\",\n  \"Plus\",\n  \"Power\",\n  \"Printer\",\n  \"RefreshCw\",\n  \"Save\",\n  \"Search\",\n  \"Send\",\n  \"Settings\",\n  \"Share\",\n  \"ShieldCheck\",\n  \"ShoppingCart\",\n  \"Star\",\n  \"Sun\",\n  \"Tag\",\n  \"Trash\",\n  \"Twitter\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"Wifi\",\n  \"Wrench\",\n  \"X\",\n  \"Zap\",\n] as const\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  if (!name) {\n    return undefined\n  }\n  const registry = LucideIcons as unknown as Record<\n    string,\n    Component | undefined\n  >\n  return registry[name]\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction renderIcon(name: string) {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: \"size-4\" }) : null\n}\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <component\n          :is=\"previewIcon\"\n          v-if=\"previewIcon\"\n          class=\"mr-2 size-4 shrink-0\"\n          data-testid=\"icon-preview\"\n        />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search icons…'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No icons match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"iconName in filtered\" :key=\"iconName\" :value=\"iconName\">\n          <ComboboxItemIndicator />\n          <component :is=\"renderIcon(iconName)\" />\n          <span class=\"ml-2\">{{ iconName }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"names":["model","_useModel","__props","query","ref","ICON_NAMES","filtered","computed","q","name","resolveIcon","LucideIcons","previewIcon","renderIcon","icon","h","onSelect","value","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_openBlock","_resolveDynamicComponent","ComboboxInput","$event","ComboboxContent","ComboboxEmpty","_cache","_createElementBlock","_Fragment","_renderList","iconName","ComboboxItem","ComboboxItemIndicator","_createElementVNode","_hoisted_1","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,UAAMA,IAAQC,EAA0BC,GAAC,YAAY,GAE/CC,IAAQC,EAAY,EAAE,GAOtBC,IAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAGIC,IAAWC,EAA4B,MAAM;AACjD,YAAMC,IAAIL,EAAM,MAAM,KAAA,EAAO,YAAA;AAC7B,aAAKK,IAGEH,EAAW,OAAO,CAACI,MAASA,EAAK,YAAA,EAAc,SAASD,CAAC,CAAC,IAFxDH;AAAA,IAGX,CAAC;AAED,aAASK,EAAYD,GAAqC;AACxD,aAAKA,IAGYE,EAIDF,CAAI,IANlB;AAAA,IAOJ;AAEA,UAAMG,IAAcL;AAAA,MAAgC,MAClDG,EAAYV,EAAM,SAAS,EAAE;AAAA,IAAA;AAG/B,aAASa,EAAWJ,GAAc;AAChC,YAAMK,IAAOJ,EAAYD,CAAI;AAC7B,aAAOK,IAAOC,EAAED,GAAM,EAAE,OAAO,SAAA,CAAU,IAAI;AAAA,IAC/C;AAEA,aAASE,EAASC,GAAsB;AACtC,MAAAjB,EAAM,QAAQ,OAAOiB,KAAU,WAAWA,IAAQ;AAAA,IACpD;2BAIEC,EAuCaC,EAAAC,CAAA,GAAA;AAAA,MAtCV,OAAOlB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MA8BW;AAAA,QA9BXmB,EA8BWF,EAAAG,CAAA,GAAA;AAAA,UA7BR,eAAatB,EAAA,SAAK;AAAA,UAClB,UAAUE,EAAA;AAAA,UACV,uBAAoBc;AAAA,QAAA;qBAErB,MAgBiB;AAAA,YAhBjBK,EAgBiBF,EAAAI,CAAA,GAAA;AAAA,cAfd,qBAAmBrB,EAAA,QAAQ;AAAA,cAC3B,iBAAeA,EAAA,YAAY;AAAA,YAAA;yBAE5B,MAKE;AAAA,gBAHMU,EAAA,SAFRY,EAAA,GAAAN,EAKEO,EAJKb,EAAA,KAAW,GAAA;AAAA;kBAEhB,OAAM;AAAA,kBACN,eAAY;AAAA,gBAAA;gBAEdS,EAKEF,EAAAO,CAAA,GAAA;AAAA,8BAJSvB,EAAA;AAAA,gEAAAA,EAAK,QAAAwB;AAAA,kBACb,aAAazB,EAAA,eAAW;AAAA,kBACxB,UAAUA,EAAA;AAAA,kBACV,UAAUA,EAAA;AAAA,gBAAA;;;;YAGfmB,EAOkBF,EAAAS,CAAA,GAAA,MAAA;AAAA,yBANhB,MAA8C;AAAA,gBAA9CP,EAA8CF,EAAAU,CAAA,GAAA,MAAA;AAAA,6BAA/B,MAAe,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,sBAAf,mBAAe,EAAA;AAAA,kBAAA;;;wBAC9BC,EAIeC,GAAA,MAAAC,EAJkB3B,EAAA,OAAQ,CAApB4B,YAArBhB,EAIeC,EAAAgB,CAAA,GAAA;AAAA,kBAJ6B,KAAKD;AAAA,kBAAW,OAAOA;AAAA,gBAAA;6BACjE,MAAyB;AAAA,oBAAzBb,EAAyBF,EAAAiB,CAAA,CAAA;AAAA,0BACzBlB,EAAwCO,EAAxBZ,EAAWqB,CAAQ,CAAA,CAAA;AAAA,oBACnCG,EAAwC,QAAxCC,GAAwCC,EAAlBL,CAAQ,GAAA,CAAA;AAAA,kBAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"IconPicker.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}