@gxp-dev/mod-ui 2.0.0 → 2.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/picker/ColorPicker.vue"],"names":[],"mappings":"AAwLA,MAAM,WAAW,gBAAgB;IAC/B,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;IACjB,WAAW,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAgEpC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GAAG,WAAW,CAAC;;;;;;cArEH,MAAM,EAAE;YAFV,MAAM,EAAE;;AAqRnB,wBASG"}

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

@@ -1,5 +1,158 @@
-import f from "./ColorPicker.vue2.js";
+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 {
-  f as default
+  ee as default
 };
 //# sourceMappingURL=ColorPicker.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"ColorPicker.vue.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/ColorPicker.vue2.js

@@ -1,158 +1,5 @@
-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"]));
-  }
-});
+import f from "./ColorPicker.vue.js";
 export {
-  ee as default
+  f as default
 };
 //# sourceMappingURL=ColorPicker.vue2.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"ColorPicker.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,29 @@
+export interface DataModelPickerProps {
+    modelValue?: string | null;
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+    /** Candidate field paths to choose from. */
+    dataModelKeys?: string[];
+}
+type __VLS_Props = DataModelPickerProps;
+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[];
+    dataModelKeys: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=DataModelPicker.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/picker/DataModelPicker.vue"],"names":[],"mappings":"AAiIA,MAAM,WAAW,oBAAoB;IACnC,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;IACjB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CACzB;AAED,KAAK,WAAW,GAAG,oBAAoB,CAAC;AA8BxC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GAAG,WAAW,CAAC;;;;;;YArCL,MAAM,EAAE;mBAED,MAAM,EAAE;;AAoN1B,wBASG"}

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

@@ -1,5 +1,107 @@
-import f from "./DataModelPicker.vue2.js";
+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 {
-  f as default
+  W as default
 };
 //# sourceMappingURL=DataModelPicker.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataModelPicker.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"DataModelPicker.vue.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/DataModelPicker.vue2.js

@@ -1,107 +1,5 @@
-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"]));
-  }
-});
+import f from "./DataModelPicker.vue.js";
 export {
-  W as default
+  f as default
 };
 //# sourceMappingURL=DataModelPicker.vue2.js.map

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

@@ -1 +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;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataModelPicker.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}