@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,158 @@
+import { defineComponent as C, useModel as w, computed as p, watch as $, openBlock as a, createBlock as y, unref as o, withCtx as r, createElementVNode as s, createVNode as i, normalizeStyle as v, createElementBlock as b, Fragment as V, renderList as q, createCommentVNode as g, mergeModels as z } from "vue";
+import { Pipette as B } from "lucide-vue-next";
+import "../../../ui/button/index.js";
+import L from "../../../ui/field-frame/FieldFrame.vue.js";
+import N from "../../../ui/input/Input.vue.js";
+import I from "../../../ui/popover/Popover.vue.js";
+import "reka-ui";
+import "@vueuse/core";
+import "clsx";
+import "tailwind-merge";
+import M from "../../../ui/popover/PopoverContent.vue.js";
+import A from "../../../ui/popover/PopoverTrigger.vue.js";
+import E from "../../../ui/button/Button.vue.js";
+const F = ["data-element-name"], H = { class: "flex flex-col gap-3" }, P = ["value", "disabled"], T = {
+  key: 0,
+  class: "flex flex-wrap gap-2"
+}, U = ["aria-label", "disabled", "onClick"], ee = /* @__PURE__ */ C({
+  __name: "ColorPicker",
+  props: /* @__PURE__ */ z({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    colorFormat: {},
+    swatches: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const h = t, n = w(t, "modelValue"), u = p(() => {
+      const e = n.value;
+      return e && typeof e == "string" ? c(e) : "#000000";
+    });
+    $(n, (e) => {
+      if (typeof e == "string" && e.length > 0) {
+        const l = c(e);
+        l !== e && (n.value = l);
+      }
+    });
+    function c(e) {
+      if (!e)
+        return "#000000";
+      const l = e.trim().toLowerCase();
+      return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(l) ? l : /^([0-9a-f]{6})$/.test(l) ? `#${l}` : e;
+    }
+    function m(e) {
+      n.value = c(e);
+    }
+    function k(e) {
+      const l = e.target;
+      m((l == null ? void 0 : l.value) ?? "#000000");
+    }
+    function x(e) {
+      m(typeof e == "string" ? e : "");
+    }
+    const f = p(
+      () => Array.isArray(h.swatches) ? h.swatches : []
+    );
+    return (e, l) => (a(), y(o(L), {
+      label: t.label,
+      required: t.required,
+      "hide-label": t.hideLabel,
+      for: t.id,
+      "help-text": t.helpText,
+      errors: t.errors
+    }, {
+      default: r(() => [
+        s("div", {
+          class: "flex items-center gap-2",
+          "data-element-name": t.name ?? void 0
+        }, [
+          i(o(I), null, {
+            default: r(() => [
+              i(o(A), { "as-child": "" }, {
+                default: r(() => [
+                  i(o(E), {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon",
+                    disabled: t.disabled,
+                    "aria-label": "Choose a color",
+                    "data-testid": "color-swatch-trigger"
+                  }, {
+                    default: r(() => [
+                      s("span", {
+                        class: "size-5 rounded-sm border",
+                        style: v({ backgroundColor: u.value })
+                      }, null, 4)
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"])
+                ]),
+                _: 1
+              }),
+              i(o(M), { class: "w-auto p-3" }, {
+                default: r(() => [
+                  s("div", H, [
+                    s("input", {
+                      type: "color",
+                      value: u.value,
+                      disabled: t.disabled || t.readonly,
+                      class: "h-10 w-32 cursor-pointer rounded border",
+                      "data-testid": "color-native-input",
+                      onInput: k
+                    }, null, 40, P),
+                    f.value.length ? (a(), b("div", T, [
+                      (a(!0), b(V, null, q(f.value, (d) => (a(), b("button", {
+                        key: d,
+                        type: "button",
+                        class: "size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        style: v({ backgroundColor: d }),
+                        "aria-label": `Use ${d}`,
+                        disabled: t.disabled,
+                        "data-testid": "color-swatch",
+                        onClick: (S) => m(d)
+                      }, null, 12, U))), 128))
+                    ])) : g("", !0)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          i(o(N), {
+            "model-value": u.value,
+            placeholder: t.placeholder ?? "#000000",
+            disabled: t.disabled,
+            readonly: t.readonly,
+            required: t.required,
+            class: "w-32 font-mono uppercase",
+            "data-testid": "color-hex-input",
+            spellcheck: "false",
+            "onUpdate:modelValue": x
+          }, null, 8, ["model-value", "placeholder", "disabled", "readonly", "required"]),
+          f.value.length ? g("", !0) : (a(), y(o(B), {
+            key: 0,
+            class: "size-4 text-muted-foreground"
+          }))
+        ], 8, F)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  ee as default
+};
+//# sourceMappingURL=ColorPicker.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.vue2.js","sources":["../../../../../src/components/compositions/elements/picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven color picker composition. Native `<input type=\"color\">`\n * inside a Popover plus a hex Input fallback. Optional `swatches` render\n * as preset chips. Round-trips a lowercased hex string (with leading\n * `#`).\n *\n *   <ColorPicker v-model=\"color\" label=\"Brand color\" />\n */\nimport { computed, watch } from \"vue\"\nimport { Pipette } from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface ColorPickerProps {\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  colorFormat?: \"hex\" | \"rgb\" | \"hsl\"\n  swatches?: string[]\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  errors: () => [],\n  swatches: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst currentColor = computed<string>(() => {\n  const raw = model.value\n  if (raw && typeof raw === \"string\") {\n    return normalizeHex(raw)\n  }\n  return \"#000000\"\n})\n\n// Ensure stored value is normalized once the user picks a hex.\nwatch(model, (next) => {\n  if (typeof next === \"string\" && next.length > 0) {\n    const normalized = normalizeHex(next)\n    if (normalized !== next) {\n      model.value = normalized\n    }\n  }\n})\n\nfunction normalizeHex(value: string): string {\n  if (!value) {\n    return \"#000000\"\n  }\n  const trimmed = value.trim().toLowerCase()\n  if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) {\n    return trimmed\n  }\n  if (/^([0-9a-f]{6})$/.test(trimmed)) {\n    return `#${trimmed}`\n  }\n  return value\n}\n\nfunction setColor(next: string): void {\n  model.value = normalizeHex(next)\n}\n\nfunction onNativeInput(event: Event): void {\n  const target = event.target as HTMLInputElement | null\n  setColor(target?.value ?? \"#000000\")\n}\n\nfunction onHexInput(value: string | number | undefined): void {\n  setColor(typeof value === \"string\" ? value : \"\")\n}\n\nconst swatchList = computed<string[]>(() =>\n  Array.isArray(props.swatches) ? props.swatches : [],\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    <div class=\"flex items-center gap-2\" :data-element-name=\"name ?? undefined\">\n      <Popover>\n        <PopoverTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            :disabled=\"disabled\"\n            aria-label=\"Choose a color\"\n            data-testid=\"color-swatch-trigger\"\n          >\n            <span\n              class=\"size-5 rounded-sm border\"\n              :style=\"{ backgroundColor: currentColor }\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-3\">\n          <div class=\"flex flex-col gap-3\">\n            <input\n              type=\"color\"\n              :value=\"currentColor\"\n              :disabled=\"disabled || readonly\"\n              class=\"h-10 w-32 cursor-pointer rounded border\"\n              data-testid=\"color-native-input\"\n              @input=\"onNativeInput\"\n            >\n            <div v-if=\"swatchList.length\" class=\"flex flex-wrap gap-2\">\n              <button\n                v-for=\"swatch in swatchList\"\n                :key=\"swatch\"\n                type=\"button\"\n                class=\"size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                :style=\"{ backgroundColor: swatch }\"\n                :aria-label=\"`Use ${swatch}`\"\n                :disabled=\"disabled\"\n                data-testid=\"color-swatch\"\n                @click=\"setColor(swatch)\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Input\n        :model-value=\"currentColor\"\n        :placeholder=\"placeholder ?? '#000000'\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        class=\"w-32 font-mono uppercase\"\n        data-testid=\"color-hex-input\"\n        spellcheck=\"false\"\n        @update:model-value=\"onHexInput\"\n      />\n      <Pipette\n        v-if=\"!swatchList.length\"\n        class=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","currentColor","computed","raw","normalizeHex","watch","next","normalized","value","trimmed","setColor","onNativeInput","event","target","onHexInput","swatchList","_createBlock","_unref","FieldFrame","_createElementVNode","_createVNode","Popover","PopoverTrigger","Button","PopoverContent","_hoisted_2","_openBlock","_createElementBlock","_hoisted_4","_Fragment","_renderList","swatch","$event","Input","Pipette"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import f from "./DataModelPicker.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DataModelPicker.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,107 @@
+import { defineComponent as y, useModel as p, ref as h, computed as b, openBlock as i, createBlock as s, unref as l, withCtx as d, createVNode as t, createTextVNode as v, createElementBlock as V, Fragment as q, renderList as x, createElementVNode as $, toDisplayString as B, mergeModels as M } from "vue";
+import { Code2 as k } from "lucide-vue-next";
+import C from "../../../ui/combobox/Combobox.vue.js";
+import L from "../../../ui/combobox/ComboboxAnchor.vue.js";
+import g from "../../../ui/combobox/ComboboxContent.vue.js";
+import N from "../../../ui/combobox/ComboboxEmpty.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import w from "../../../ui/combobox/ComboboxInput.vue.js";
+import K from "../../../ui/combobox/ComboboxItem.vue.js";
+import T from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
+import A from "../../../ui/field-frame/FieldFrame.vue.js";
+const D = { class: "font-mono" }, W = /* @__PURE__ */ y({
+  __name: "DataModelPicker",
+  props: /* @__PURE__ */ M({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    dataModelKeys: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const m = e, u = p(e, "modelValue"), n = h(""), f = b(() => {
+      const r = n.value.trim().toLowerCase(), a = Array.isArray(m.dataModelKeys) ? m.dataModelKeys : [];
+      return r ? a.filter((o) => o.toLowerCase().includes(r)).slice(0, 200) : a.slice(0, 200);
+    });
+    function c(r) {
+      u.value = typeof r == "string" ? r : "";
+    }
+    return (r, a) => (i(), s(l(A), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      for: e.id,
+      "help-text": e.helpText,
+      errors: e.errors
+    }, {
+      default: d(() => [
+        t(l(C), {
+          "model-value": u.value ?? "",
+          disabled: e.disabled,
+          "onUpdate:modelValue": c
+        }, {
+          default: d(() => [
+            t(l(L), {
+              "data-element-name": e.name ?? void 0,
+              "data-readonly": e.readonly || void 0
+            }, {
+              default: d(() => [
+                t(l(k), { class: "mr-2 size-4 shrink-0 opacity-50" }),
+                t(l(w), {
+                  modelValue: n.value,
+                  "onUpdate:modelValue": a[0] || (a[0] = (o) => n.value = o),
+                  placeholder: e.placeholder ?? "data.key.path",
+                  readonly: e.readonly,
+                  required: e.required,
+                  class: "font-mono text-sm"
+                }, null, 8, ["modelValue", "placeholder", "readonly", "required"])
+              ]),
+              _: 1
+            }, 8, ["data-element-name", "data-readonly"]),
+            t(l(g), null, {
+              default: d(() => [
+                t(l(N), null, {
+                  default: d(() => [...a[1] || (a[1] = [
+                    v("No fields match.", -1)
+                  ])]),
+                  _: 1
+                }),
+                (i(!0), V(q, null, x(f.value, (o) => (i(), s(l(K), {
+                  key: o,
+                  value: o
+                }, {
+                  default: d(() => [
+                    t(l(T)),
+                    $("span", D, B(o), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  W as default
+};
+//# sourceMappingURL=DataModelPicker.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker.vue2.js","sources":["../../../../../src/components/compositions/elements/picker/DataModelPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven data-model picker composition. Searchable combobox over a\n * list of field-path keys supplied via `dataModelKeys`. Used by the\n * FormBuilder inspector to pick a data-model key; the eventual async\n * lookup service will swap in the same surface area.\n *\n *   <DataModelPicker\n *     v-model=\"key\"\n *     label=\"Field\"\n *     :data-model-keys=\"['first_name', 'last_name', 'email']\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { Code2 } from \"lucide-vue-next\"\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 DataModelPickerProps {\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  /** Candidate field paths to choose from. */\n  dataModelKeys?: string[]\n}\n\nconst props = withDefaults(defineProps<DataModelPickerProps>(), {\n  errors: () => [],\n  dataModelKeys: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  const keys = Array.isArray(props.dataModelKeys) ? props.dataModelKeys : []\n  if (!q) {\n    return keys.slice(0, 200)\n  }\n  return keys.filter((k) => k.toLowerCase().includes(q)).slice(0, 200)\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        <Code2 class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'data.key.path'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n          class=\"font-mono text-sm\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No fields match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"key in filtered\" :key=\"key\" :value=\"key\">\n          <ComboboxItemIndicator />\n          <span class=\"font-mono\">{{ key }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","query","ref","filtered","computed","q","keys","k","onSelect","value","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","Code2","ComboboxInput","$event","ComboboxContent","ComboboxEmpty","_cache","_createElementBlock","_Fragment","_renderList","key","ComboboxItem","ComboboxItemIndicator","_createElementVNode","_hoisted_1","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,UAAMA,IAAQC,GAKRC,IAAQC,EAA0BF,GAAC,YAAY,GAE/CG,IAAQC,EAAY,EAAE,GAEtBC,IAAWC,EAAmB,MAAM;AACxC,YAAMC,IAAIJ,EAAM,MAAM,KAAA,EAAO,YAAA,GACvBK,IAAO,MAAM,QAAQT,EAAM,aAAa,IAAIA,EAAM,gBAAgB,CAAA;AACxE,aAAKQ,IAGEC,EAAK,OAAO,CAACC,MAAMA,EAAE,YAAA,EAAc,SAASF,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,IAF1DC,EAAK,MAAM,GAAG,GAAG;AAAA,IAG5B,CAAC;AAED,aAASE,EAASC,GAAsB;AACtC,MAAAV,EAAM,QAAQ,OAAOU,KAAU,WAAWA,IAAQ;AAAA,IACpD;2BAIEC,EAkCaC,EAAAC,CAAA,GAAA;AAAA,MAjCV,OAAOd,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MAyBW;AAAA,QAzBXe,EAyBWF,EAAAG,CAAA,GAAA;AAAA,UAxBR,eAAaf,EAAA,SAAK;AAAA,UAClB,UAAUD,EAAA;AAAA,UACV,uBAAoBU;AAAA,QAAA;qBAErB,MAYiB;AAAA,YAZjBK,EAYiBF,EAAAI,CAAA,GAAA;AAAA,cAXd,qBAAmBjB,EAAA,QAAQ;AAAA,cAC3B,iBAAeA,EAAA,YAAY;AAAA,YAAA;yBAE5B,MAAiD;AAAA,gBAAjDe,EAAiDF,EAAAK,CAAA,GAAA,EAA1C,OAAM,mCAAiC;AAAA,gBAC9CH,EAMEF,EAAAM,CAAA,GAAA;AAAA,8BALShB,EAAA;AAAA,gEAAAA,EAAK,QAAAiB;AAAA,kBACb,aAAapB,EAAA,eAAW;AAAA,kBACxB,UAAUA,EAAA;AAAA,kBACV,UAAUA,EAAA;AAAA,kBACX,OAAM;AAAA,gBAAA;;;;YAGVe,EAMkBF,EAAAQ,CAAA,GAAA,MAAA;AAAA,yBALhB,MAA+C;AAAA,gBAA/CN,EAA+CF,EAAAS,CAAA,GAAA,MAAA;AAAA,6BAAhC,MAAgB,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,sBAAhB,oBAAgB,EAAA;AAAA,kBAAA;;;wBAC/BC,EAGeC,GAAA,MAAAC,EAHarB,EAAA,OAAQ,CAAfsB,YAArBf,EAGeC,EAAAe,CAAA,GAAA;AAAA,kBAHwB,KAAAD;AAAA,kBAAW,OAAOA;AAAA,gBAAA;6BACvD,MAAyB;AAAA,oBAAzBZ,EAAyBF,EAAAgB,CAAA,CAAA;AAAA,oBACzBC,EAAwC,QAAxCC,GAAwCC,EAAbL,CAAG,GAAA,CAAA;AAAA,kBAAA;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,5 @@
+import f from "./DatePicker.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DatePicker.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,143 @@
+import { defineComponent as b, useModel as V, ref as g, computed as u, openBlock as w, createBlock as B, unref as o, withCtx as i, createVNode as r, normalizeClass as $, createElementVNode as C, toDisplayString as M, mergeModels as S } from "vue";
+import { Calendar as k } from "lucide-vue-next";
+import { parseDate as q, CalendarDate as y } from "@internationalized/date";
+import "../../../ui/button/index.js";
+import T from "../../../ui/calendar/Calendar.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import { cn as P } from "../../../../lib/utils.js";
+import z from "../../../ui/field-frame/FieldFrame.vue.js";
+import L from "../../../ui/popover/Popover.vue.js";
+import N from "../../../ui/popover/PopoverContent.vue.js";
+import U from "../../../ui/popover/PopoverTrigger.vue.js";
+import j from "../../../ui/button/Button.vue.js";
+const Y = /* @__PURE__ */ b({
+  __name: "DatePicker",
+  props: /* @__PURE__ */ S({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    minDate: {},
+    maxDate: {},
+    format: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const n = a, d = V(a, "modelValue"), s = g(!1), c = u(() => {
+      const e = d.value;
+      if (e)
+        return m(e);
+    }), f = u(
+      () => n.minDate ? m(n.minDate) : void 0
+    ), p = u(
+      () => n.maxDate ? m(n.maxDate) : void 0
+    ), v = u(() => {
+      const e = d.value;
+      return e ? h(e, n.format) : "";
+    });
+    function m(e) {
+      try {
+        const t = e.includes("T") ? e.slice(0, 10) : e;
+        return q(t);
+      } catch {
+        return;
+      }
+    }
+    function h(e, t) {
+      const l = m(e);
+      if (!l)
+        return e;
+      if (!t || t === "yyyy-MM-dd")
+        return l.toString();
+      const D = new Date(l.year, l.month - 1, l.day);
+      try {
+        return new Intl.DateTimeFormat(void 0, {
+          year: "numeric",
+          month: "short",
+          day: "2-digit"
+        }).format(D);
+      } catch {
+        return l.toString();
+      }
+    }
+    function x(e) {
+      if (!e) {
+        d.value = null;
+        return;
+      }
+      const t = e instanceof y ? e : new y(e.year, e.month, e.day);
+      d.value = t.toString(), s.value = !1;
+    }
+    return (e, t) => (w(), B(o(z), {
+      label: a.label,
+      required: a.required,
+      "hide-label": a.hideLabel,
+      for: a.id,
+      "help-text": a.helpText,
+      errors: a.errors
+    }, {
+      default: i(() => [
+        r(o(L), {
+          open: s.value,
+          "onUpdate:open": t[0] || (t[0] = (l) => s.value = l)
+        }, {
+          default: i(() => [
+            r(o(U), { "as-child": "" }, {
+              default: i(() => [
+                r(o(j), {
+                  type: "button",
+                  variant: "outline",
+                  disabled: a.disabled,
+                  class: $(
+                    o(P)(
+                      "w-full justify-start text-left font-normal",
+                      !d.value && "text-muted-foreground"
+                    )
+                  ),
+                  "data-element-name": a.name ?? void 0,
+                  "data-readonly": a.readonly || void 0
+                }, {
+                  default: i(() => [
+                    r(o(k), { class: "mr-2 size-4" }),
+                    C("span", null, M(v.value || a.placeholder || "Pick a date"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "class", "data-element-name", "data-readonly"])
+              ]),
+              _: 1
+            }),
+            r(o(N), { class: "w-auto p-0" }, {
+              default: i(() => [
+                r(o(T), {
+                  "model-value": c.value,
+                  "min-value": f.value,
+                  "max-value": p.value,
+                  placeholder: c.value ?? f.value ?? p.value,
+                  "onUpdate:modelValue": x
+                }, null, 8, ["model-value", "min-value", "max-value", "placeholder"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  Y as default
+};
+//# sourceMappingURL=DatePicker.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.vue2.js","sources":["../../../../../src/components/compositions/elements/picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date picker composition. Popover trigger Button shows the\n * formatted current date; the popover hosts the shadcn `Calendar`.\n * Values round-trip as ISO date strings (`yyyy-MM-dd` by default).\n *\n *   <DatePicker v-model=\"startsAt\" label=\"Starts at\" />\n *\n * Self-contained — no Pinia / store coupling. Composes `FieldFrame` for\n * label / helpText / errors chrome.\n */\nimport { computed, ref } from \"vue\"\nimport { Calendar as CalendarIcon } 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 { 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 DatePickerProps {\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  /** ISO date string, e.g. \"2024-06-10\" */\n  minDate?: string\n  /** ISO date string, e.g. \"2024-06-25\" */\n  maxDate?: string\n  /** Display format. Default `yyyy-MM-dd`. */\n  format?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  const iso = model.value\n  if (!iso) {\n    return undefined\n  }\n  return safeParseDate(iso)\n})\n\nconst min = computed<DateValue | undefined>(() =>\n  props.minDate ? safeParseDate(props.minDate) : undefined,\n)\n\nconst max = computed<DateValue | undefined>(() =>\n  props.maxDate ? safeParseDate(props.maxDate) : undefined,\n)\n\nconst displayValue = computed<string>(() => {\n  const iso = model.value\n  if (!iso) {\n    return \"\"\n  }\n  return formatDate(iso, props.format)\n})\n\nfunction safeParseDate(value: string): DateValue | undefined {\n  try {\n    // Accept full ISO datetime (\"2024-06-15T00:00:00Z\") or date-only.\n    const dateOnly = value.includes(\"T\") ? value.slice(0, 10) : value\n    return parseDate(dateOnly)\n  } catch {\n    return undefined\n  }\n}\n\nfunction formatDate(iso: string, format?: string): string {\n  const parsed = safeParseDate(iso)\n  if (!parsed) {\n    return iso\n  }\n  if (!format || format === \"yyyy-MM-dd\") {\n    return parsed.toString()\n  }\n  const date = new Date(parsed.year, parsed.month - 1, parsed.day)\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"2-digit\",\n    }).format(date)\n  } catch {\n    return parsed.toString()\n  }\n}\n\nfunction onSelect(value: DateValue | undefined): void {\n  if (!value) {\n    model.value = null\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  model.value = calendar.toString()\n  open.value = false\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              !model && '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\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :min-value=\"min\"\n          :max-value=\"max\"\n          :placeholder=\"calendarValue ?? min ?? max\"\n          @update:model-value=\"onSelect\"\n        />\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","open","ref","calendarValue","computed","iso","safeParseDate","min","max","displayValue","formatDate","value","dateOnly","parseDate","format","parsed","date","onSelect","calendar","CalendarDate","_createBlock","_unref","FieldFrame","_createVNode","Popover","$event","PopoverTrigger","Button","_normalizeClass","cn","CalendarIcon","_createElementVNode","_toDisplayString","PopoverContent","Calendar"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import f from "./DateTimePicker.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DateTimePicker.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,174 @@
+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"]));
+  }
+});
+export {
+  oe as default
+};
+//# sourceMappingURL=DateTimePicker.vue2.js.map