@gxp-dev/mod-ui 2.0.0

package/dist/components/compositions/elements/option-select/CheckboxOption.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.vue2.js","sources":["../../../../../src/components/compositions/elements/option-select/CheckboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-checkbox composition. Renders one Checkbox per\n * option and stores the result as an array of selected values.\n *\n *   <CheckboxOption v-model=\"prefs\" :options=\"[...]\" label=\"Preferences\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  inline?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<CheckboxOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nfunction isChecked(val: string): boolean {\n  return selected.value.includes(val)\n}\n\nfunction onToggle(val: string, checked: boolean | \"indeterminate\"): void {\n  const current = selected.value\n  if (checked === true) {\n    if (!current.includes(val)) {\n      model.value = [...current, val]\n    }\n  } else {\n    model.value = current.filter((v) => v !== val)\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <Checkbox\n          :id=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          :name=\"name\"\n          :model-value=\"isChecked(opt.value)\"\n          :disabled=\"opt.disabled || disabled || readonly\"\n          @update:model-value=\"(c) => onToggle(opt.value, c)\"\n        />\n        <Label\n          :for=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","normaliseOption","opt","normalised","computed","selected","v","x","isChecked","val","onToggle","checked","current","_createBlock","_unref","FieldFrame","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createVNode","Checkbox","c","Label","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,UAAMA,IAAQC,GAKRC,IAAQC,EAA0CF,GAAC,YAAY;AAQrE,aAASG,EAAgBC,GAAyC;AAChE,aAAI,OAAOA,KAAQ,WACV,EAAE,OAAOA,GAAK,OAAOA,GAAK,UAAU,GAAA,IAEtC;AAAA,QACL,OAAOA,EAAI;AAAA,QACX,OAAO,OAAOA,EAAI,KAAK;AAAA,QACvB,UAAU,EAAQA,EAAI;AAAA,MAAQ;AAAA,IAElC;AAEA,UAAMC,IAAaC;AAAA,MAA6B,OAC7CP,EAAM,WAAW,CAAA,GAAI,IAAII,CAAe;AAAA,IAAA,GAGrCI,IAAWD,EAAmB,MAAM;AACxC,YAAME,IAAIP,EAAM;AAChB,aAAKO,IAGD,MAAM,QAAQA,CAAC,IACVA,EAAE,IAAI,CAACC,MAAM,OAAOA,CAAC,CAAC,IAExB,CAAC,OAAOD,CAAC,CAAC,IALR,CAAA;AAAA,IAMX,CAAC;AAED,aAASE,EAAUC,GAAsB;AACvC,aAAOJ,EAAS,MAAM,SAASI,CAAG;AAAA,IACpC;AAEA,aAASC,EAASD,GAAaE,GAA0C;AACvE,YAAMC,IAAUP,EAAS;AACzB,MAAIM,MAAY,KACTC,EAAQ,SAASH,CAAG,MACvBV,EAAM,QAAQ,CAAC,GAAGa,GAASH,CAAG,KAGhCV,EAAM,QAAQa,EAAQ,OAAO,CAACN,MAAMA,MAAMG,CAAG;AAAA,IAEjD;2BAIEI,EA+BaC,EAAAC,CAAA,GAAA;AAAA,MA9BV,OAAOjB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MAuBM;AAAA,QAvBNkB,EAuBM,OAAA;AAAA,UAtBH,SAAOlB,EAAA,SAAM,kCAAA,YAAA;AAAA,UACb,qBAAmBA,EAAA,QAAQ;AAAA,QAAA;kBAE5BmB,EAkBMC,GAAA,MAAAC,EAjBUhB,EAAA,OAAU,CAAjBD,YADTe,EAkBM,OAAA;AAAA,YAhBH,KAAKf,EAAI;AAAA,YACV,OAAM;AAAA,UAAA;YAENkB,EAMEN,EAAAO,CAAA,GAAA;AAAA,cALC,IAAE,GAAKvB,EAAA,MAAE,UAAA,IAAkBI,EAAI,KAAK;AAAA,cACpC,MAAMJ,EAAA;AAAA,cACN,eAAaU,EAAUN,EAAI,KAAK;AAAA,cAChC,UAAUA,EAAI,YAAYJ,EAAA,YAAYA,EAAA;AAAA,cACtC,uBAAkB,CAAGwB,MAAMZ,EAASR,EAAI,OAAOoB,CAAC;AAAA,YAAA;YAEnDF,EAKQN,EAAAS,CAAA,GAAA;AAAA,cAJL,KAAG,GAAKzB,EAAA,MAAE,UAAA,IAAkBI,EAAI,KAAK;AAAA,cACtC,OAAM;AAAA,YAAA;yBAEN,MAAe;AAAA,gBAAZsB,EAAAC,EAAAvB,EAAI,KAAK,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;"}

package/dist/components/compositions/elements/option-select/IntegrationConnectorOption.vue.js

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

package/dist/components/compositions/elements/option-select/IntegrationConnectorOption.vue.js.map

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

package/dist/components/compositions/elements/option-select/IntegrationConnectorOption.vue2.js

@@ -0,0 +1,240 @@
+import { defineComponent as O, useModel as P, ref as B, watch as j, computed as y, openBlock as r, createBlock as d, unref as a, withCtx as i, createVNode as s, normalizeClass as z, createCommentVNode as u, createElementBlock as h, toDisplayString as c, createElementVNode as m, createTextVNode as C, Fragment as G, renderList as H, resolveDynamicComponent as J, withModifiers as K, mergeModels as Q } from "vue";
+import { Search as W, Loader2 as S } from "lucide-vue-next";
+import X from "../../../ui/combobox/Combobox.vue.js";
+import Y from "../../../ui/combobox/ComboboxAnchor.vue.js";
+import Z from "../../../ui/combobox/ComboboxContent.vue.js";
+import ee from "../../../ui/combobox/ComboboxEmpty.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import te from "../../../ui/combobox/ComboboxInput.vue.js";
+import oe from "../../../ui/combobox/ComboboxItem.vue.js";
+import ae from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
+import "../../../ui/button/index.js";
+import "../../../ui/badge/index.js";
+import ne from "../../../ui/field-frame/FieldFrame.vue.js";
+import { useConnectorLoader as re } from "../../../../composables/useConnectorLoader.js";
+import q from "../../../ui/button/Button.vue.js";
+import ie from "../../../ui/badge/Badge.vue.js";
+const le = {
+  key: 0,
+  class: "px-2 py-2 text-sm text-muted-foreground",
+  "data-testid": "integration-connector-option-loading-text"
+}, de = {
+  key: 1,
+  class: "flex flex-col gap-2 px-2 py-2",
+  "data-testid": "integration-connector-option-error"
+}, se = { class: "text-sm text-destructive" }, ue = { class: "flex flex-1 items-center gap-2" }, ce = { class: "truncate text-sm" }, me = ["data-status", "data-testid"], qe = /* @__PURE__ */ O({
+  __name: "IntegrationConnectorOption",
+  props: /* @__PURE__ */ Q({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    onLoadConnectors: {},
+    onConnect: {},
+    loadingText: { default: "Loading connectors..." },
+    emptyText: { default: "No connectors available" },
+    errorText: { default: "Could not load connectors" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n, { expose: D }) {
+    const b = n, l = P(n, "modelValue"), { connectors: f, isLoading: x, error: N, refresh: k, isConnecting: _, connect: U } = re(() => b.onLoadConnectors()), $ = {
+      connected: "bg-success",
+      disconnected: "bg-muted-foreground/40",
+      error: "bg-destructive"
+    };
+    function A(e) {
+      return e && $[e] ? $[e] : "bg-muted-foreground/40";
+    }
+    function L(e) {
+      return e.replace(/[-_\s]+(.)?/g, (o, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (o) => o.toUpperCase());
+    }
+    const p = B({});
+    async function M(e) {
+      if (!e)
+        return;
+      const o = L(e);
+      if (o in p.value)
+        return;
+      const g = await import("lucide-vue-next");
+      p.value = {
+        ...p.value,
+        [o]: g[o] ?? null
+      };
+    }
+    j(
+      f,
+      (e) => {
+        for (const o of e)
+          o.icon && M(o.icon);
+      },
+      { immediate: !0 }
+    );
+    function T(e) {
+      return e ? p.value[L(e)] ?? null : null;
+    }
+    const v = B(""), w = y(() => {
+      const e = v.value.trim().toLowerCase();
+      return e ? f.value.filter(
+        (o) => [o.label, o.type ?? "", o.id].some(
+          (t) => t.toLowerCase().includes(e)
+        )
+      ) : f.value;
+    }), I = y(() => l.value === void 0 || l.value === null ? null : f.value.find((e) => e.id === l.value) ?? null), R = y(() => {
+      if (!(l.value === void 0 || l.value === null))
+        return l.value;
+    });
+    function E(e) {
+      v.value = e.target.value;
+    }
+    function F(e) {
+      if (Array.isArray(e)) {
+        l.value = e[0] === void 0 ? null : e[0];
+        return;
+      }
+      l.value = e === void 0 ? null : e;
+    }
+    async function V(e, o) {
+      o == null || o.stopPropagation(), o == null || o.preventDefault(), await U(e, b.onConnect);
+    }
+    return D({ refresh: k, handleConnect: V }), (e, o) => (r(), d(a(ne), {
+      label: n.label,
+      required: n.required,
+      "hide-label": n.hideLabel,
+      for: n.id,
+      "help-text": n.helpText,
+      errors: n.errors
+    }, {
+      default: i(() => [
+        s(a(X), {
+          "model-value": R.value,
+          disabled: n.disabled || n.readonly,
+          "ignore-filter": "",
+          "onUpdate:modelValue": F
+        }, {
+          default: i(() => [
+            s(a(Y), {
+              "data-element-name": n.name ?? void 0,
+              "data-testid": "integration-connector-option-anchor",
+              class: z(n.errors.length ? "border-destructive ring-destructive" : "")
+            }, {
+              default: i(() => {
+                var t;
+                return [
+                  s(a(W), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+                  s(a(te), {
+                    id: n.id,
+                    "model-value": v.value,
+                    placeholder: ((t = I.value) == null ? void 0 : t.label) || (n.placeholder ?? "Select connector…"),
+                    "data-testid": "integration-connector-option-input",
+                    onInput: E
+                  }, null, 8, ["id", "model-value", "placeholder"]),
+                  a(x) ? (r(), d(a(S), {
+                    key: 0,
+                    "data-testid": "integration-connector-option-loader",
+                    class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+                  })) : u("", !0)
+                ];
+              }),
+              _: 1
+            }, 8, ["data-element-name", "class"]),
+            s(a(Z), null, {
+              default: i(() => [
+                a(x) ? (r(), h("div", le, c(n.loadingText), 1)) : a(N) ? (r(), h("div", de, [
+                  m("p", se, c(n.errorText), 1),
+                  s(a(q), {
+                    type: "button",
+                    size: "sm",
+                    variant: "outline",
+                    "data-testid": "integration-connector-option-retry",
+                    onClick: a(k)
+                  }, {
+                    default: i(() => [...o[0] || (o[0] = [
+                      C(" Retry ", -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["onClick"])
+                ])) : w.value.length === 0 ? (r(), d(a(ee), { key: 2 }, {
+                  default: i(() => [
+                    C(c(n.emptyText), 1)
+                  ]),
+                  _: 1
+                })) : u("", !0),
+                (r(!0), h(G, null, H(w.value, (t) => (r(), d(a(oe), {
+                  key: t.id,
+                  value: t.id,
+                  "data-testid": `integration-connector-option-item-${t.id}`
+                }, {
+                  default: i(() => [
+                    s(a(ae)),
+                    m("div", ue, [
+                      T(t.icon) ? (r(), d(J(T(t.icon)), {
+                        key: 0,
+                        class: "size-4 shrink-0"
+                      })) : u("", !0),
+                      m("span", ce, c(t.label), 1),
+                      t.type ? (r(), d(a(ie), {
+                        key: 1,
+                        variant: "outline",
+                        size: "sm"
+                      }, {
+                        default: i(() => [
+                          C(c(t.type), 1)
+                        ]),
+                        _: 2
+                      }, 1024)) : u("", !0),
+                      m("span", {
+                        class: z(["ml-auto inline-block size-2 rounded-full", A(t.status)]),
+                        "data-status": t.status ?? "unknown",
+                        "data-testid": `integration-connector-option-status-${t.id}`
+                      }, null, 10, me),
+                      n.onConnect && t.status !== "connected" ? (r(), d(a(q), {
+                        key: 2,
+                        type: "button",
+                        size: "sm",
+                        variant: "outline",
+                        class: "ml-2",
+                        disabled: !!a(_)[t.id],
+                        "data-testid": `integration-connector-option-connect-${t.id}`,
+                        onClick: K((g) => V(t.id, g), ["stop"])
+                      }, {
+                        default: i(() => [
+                          a(_)[t.id] ? (r(), d(a(S), {
+                            key: 0,
+                            class: "size-3 animate-spin"
+                          })) : u("", !0),
+                          m("span", null, c(t.status === "error" ? "Reconnect" : "Connect"), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["disabled", "data-testid", "onClick"])) : u("", !0)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["value", "data-testid"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  qe as default
+};
+//# sourceMappingURL=IntegrationConnectorOption.vue2.js.map

package/dist/components/compositions/elements/option-select/IntegrationConnectorOption.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationConnectorOption.vue2.js","sources":["../../../../../src/components/compositions/elements/option-select/IntegrationConnectorOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven integration-connector composition. Renders a Combobox of\n * connectors the host supplies via `onLoadConnectors`. Each row shows\n * the connector's lucide icon, label, type Badge and a status dot.\n * When `onConnect` is supplied, a per-row Connect / Reconnect button\n * surfaces for any connector with `status !== \"connected\"`.\n *\n *   <IntegrationConnectorOption\n *     v-model=\"connectorId\"\n *     label=\"Connector\"\n *     :on-load-connectors=\"() => fetch('/connectors').then((r) => r.json())\"\n *     :on-connect=\"(id) => beginOAuth(id)\"\n *   />\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Loader2, Search } 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 { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport type { Connector } from \"@/definitions/shared/connector\"\nimport { useConnectorLoader } from \"@/composables/useConnectorLoader\"\n\nexport interface IntegrationConnectorOptionProps {\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  /** REQUIRED. Returns the list of connectors. */\n  onLoadConnectors: () => Promise<Connector[]>\n  /** When supplied, surfaces a per-row Connect button on non-connected rows. */\n  onConnect?: (id: string) => Promise<void>\n  loadingText?: string\n  emptyText?: string\n  errorText?: string\n}\n\nconst props = withDefaults(defineProps<IntegrationConnectorOptionProps>(), {\n  errors: () => [],\n  loadingText: \"Loading connectors...\",\n  emptyText: \"No connectors available\",\n  errorText: \"Could not load connectors\",\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst { connectors, isLoading, error, refresh, isConnecting, connect } =\n  useConnectorLoader(() => props.onLoadConnectors())\n\nconst STATUS_DOT_CLASS: Record<NonNullable<Connector[\"status\"]>, string> = {\n  connected: \"bg-success\",\n  disconnected: \"bg-muted-foreground/40\",\n  error: \"bg-destructive\",\n}\n\nfunction statusDotClass(status: Connector[\"status\"]): string {\n  if (status && STATUS_DOT_CLASS[status]) {\n    return STATUS_DOT_CLASS[status]\n  }\n  return \"bg-muted-foreground/40\"\n}\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst iconRegistry = ref<Record<string, Component | null>>({})\n\nasync function ensureIcon(name: string): Promise<void> {\n  if (!name) {\n    return\n  }\n  const pascal = toPascalCase(name)\n  if (pascal in iconRegistry.value) {\n    return\n  }\n  const mod = await import(\"lucide-vue-next\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  iconRegistry.value = {\n    ...iconRegistry.value,\n    [pascal]: registry[pascal] ?? null,\n  }\n}\n\nwatch(\n  connectors,\n  (next) => {\n    for (const c of next) {\n      if (c.icon) {\n        void ensureIcon(c.icon)\n      }\n    }\n  },\n  { immediate: true },\n)\n\nfunction iconFor(name?: string): Component | null {\n  if (!name) {\n    return null\n  }\n  return iconRegistry.value[toPascalCase(name)] ?? null\n}\n\nconst query = ref<string>(\"\")\n\nconst filteredConnectors = computed<Connector[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return connectors.value\n  }\n  return connectors.value.filter((c) =>\n    [c.label, c.type ?? \"\", c.id].some((field) =>\n      field.toLowerCase().includes(q),\n    ),\n  )\n})\n\nconst selectedConnector = computed<Connector | null>(() => {\n  if (model.value === undefined || model.value === null) {\n    return null\n  }\n  return connectors.value.find((c) => c.id === model.value) ?? null\n})\n\nconst currentValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return model.value\n})\n\nfunction onInput(event: Event): void {\n  query.value = (event.target as HTMLInputElement).value\n}\n\nfunction onUpdate(next: unknown): void {\n  if (Array.isArray(next)) {\n    model.value = next[0] === undefined ? null : (next[0] as string)\n    return\n  }\n  model.value = next === undefined ? null : (next as string)\n}\n\nasync function handleConnect(id: string, event?: Event): Promise<void> {\n  event?.stopPropagation()\n  event?.preventDefault()\n  await connect(id, props.onConnect)\n}\n\ndefineExpose({ refresh, handleConnect })\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=\"currentValue\"\n      :disabled=\"disabled || readonly\"\n      ignore-filter\n      @update:model-value=\"onUpdate\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"integration-connector-option-anchor\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          :id=\"id\"\n          :model-value=\"query\"\n          :placeholder=\"\n            selectedConnector?.label || (placeholder ?? 'Select connector…')\n          \"\n          data-testid=\"integration-connector-option-input\"\n          @input=\"onInput\"\n        />\n        <Loader2\n          v-if=\"isLoading\"\n          data-testid=\"integration-connector-option-loader\"\n          class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"integration-connector-option-loading-text\"\n        >\n          {{ loadingText }}\n        </div>\n        <div\n          v-else-if=\"error\"\n          class=\"flex flex-col gap-2 px-2 py-2\"\n          data-testid=\"integration-connector-option-error\"\n        >\n          <p class=\"text-sm text-destructive\">{{ errorText }}</p>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            data-testid=\"integration-connector-option-retry\"\n            @click=\"refresh\"\n          >\n            Retry\n          </Button>\n        </div>\n        <ComboboxEmpty v-else-if=\"filteredConnectors.length === 0\">\n          {{ emptyText }}\n        </ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"conn in filteredConnectors\"\n          :key=\"conn.id\"\n          :value=\"conn.id\"\n          :data-testid=\"`integration-connector-option-item-${conn.id}`\"\n        >\n          <ComboboxItemIndicator />\n          <div class=\"flex flex-1 items-center gap-2\">\n            <component\n              :is=\"iconFor(conn.icon)\"\n              v-if=\"iconFor(conn.icon)\"\n              class=\"size-4 shrink-0\"\n            />\n            <span class=\"truncate text-sm\">{{ conn.label }}</span>\n            <Badge v-if=\"conn.type\" variant=\"outline\" size=\"sm\">\n              {{ conn.type }}\n            </Badge>\n            <span\n              :class=\"['ml-auto inline-block size-2 rounded-full', statusDotClass(conn.status)]\"\n              :data-status=\"conn.status ?? 'unknown'\"\n              :data-testid=\"`integration-connector-option-status-${conn.id}`\"\n            />\n            <Button\n              v-if=\"onConnect && conn.status !== 'connected'\"\n              type=\"button\"\n              size=\"sm\"\n              variant=\"outline\"\n              class=\"ml-2\"\n              :disabled=\"Boolean(isConnecting[conn.id])\"\n              :data-testid=\"`integration-connector-option-connect-${conn.id}`\"\n              @click.stop=\"handleConnect(conn.id, $event)\"\n            >\n              <Loader2\n                v-if=\"isConnecting[conn.id]\"\n                class=\"size-3 animate-spin\"\n              />\n              <span>{{\n                conn.status === \"error\" ? \"Reconnect\" : \"Connect\"\n              }}</span>\n            </Button>\n          </div>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","connectors","isLoading","error","refresh","isConnecting","connect","useConnectorLoader","STATUS_DOT_CLASS","statusDotClass","status","toPascalCase","input","_","ch","m","iconRegistry","ref","ensureIcon","name","pascal","registry","watch","next","c","iconFor","query","filteredConnectors","computed","q","field","selectedConnector","currentValue","onInput","event","onUpdate","handleConnect","id","__expose","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_normalizeClass","Search","ComboboxInput","_a","Loader2","ComboboxContent","_createElementBlock","_hoisted_1","_toDisplayString","_openBlock","_hoisted_2","_createElementVNode","_hoisted_3","Button","_cache","ComboboxEmpty","_Fragment","_renderList","conn","ComboboxItem","ComboboxItemIndicator","_hoisted_4","_resolveDynamicComponent","_hoisted_5","Badge","_createTextVNode","$event"],"mappings":"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"}

package/dist/components/compositions/elements/option-select/ListOption.vue.js

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

package/dist/components/compositions/elements/option-select/ListOption.vue.js.map

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

package/dist/components/compositions/elements/option-select/ListOption.vue2.js

@@ -0,0 +1,92 @@
+import { defineComponent as b, useModel as y, computed as d, openBlock as i, createBlock as u, unref as s, withCtx as c, createElementVNode as h, createElementBlock as x, Fragment as B, renderList as g, normalizeClass as V, createTextVNode as p, toDisplayString as k, mergeModels as C } from "vue";
+import "../../../ui/badge/index.js";
+import q from "../../../ui/field-frame/FieldFrame.vue.js";
+import L from "../../../ui/badge/Badge.vue.js";
+const M = ["data-element-name"], N = /* @__PURE__ */ b({
+  __name: "ListOption",
+  props: /* @__PURE__ */ C({
+    modelValue: {},
+    options: { default: () => [] },
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    clearable: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const n = l, t = y(l, "modelValue");
+    function m(e) {
+      return typeof e == "string" ? { label: e, value: e, disabled: !1 } : {
+        label: e.label,
+        value: String(e.value),
+        disabled: !!e.disabled
+      };
+    }
+    const v = d(
+      () => (n.options ?? []).map(m)
+    ), o = d(() => {
+      if (!(t.value === void 0 || t.value === null))
+        return String(t.value);
+    });
+    function r(e) {
+      return o.value === e;
+    }
+    function f(e) {
+      if (!(e.disabled || n.disabled || n.readonly)) {
+        if (o.value === e.value && n.clearable) {
+          t.value = null;
+          return;
+        }
+        t.value = e.value;
+      }
+    }
+    return (e, S) => (i(), u(s(q), {
+      label: l.label,
+      required: l.required,
+      "hide-label": l.hideLabel,
+      "help-text": l.helpText,
+      errors: l.errors
+    }, {
+      default: c(() => [
+        h("div", {
+          class: "flex flex-wrap gap-2",
+          "data-element-name": l.name ?? void 0
+        }, [
+          (i(!0), x(B, null, g(v.value, (a) => (i(), u(s(L), {
+            key: a.value,
+            as: "button",
+            type: "button",
+            variant: r(a.value) ? "default" : "outline",
+            size: "lg",
+            class: V([
+              "cursor-pointer transition-colors",
+              a.disabled || l.disabled || l.readonly ? "pointer-events-none opacity-50" : ""
+            ]),
+            "data-active": r(a.value),
+            "aria-pressed": r(a.value),
+            onClick: (T) => f(a)
+          }, {
+            default: c(() => [
+              p(k(a.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["variant", "class", "data-active", "aria-pressed", "onClick"]))), 128))
+        ], 8, M)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "help-text", "errors"]));
+  }
+});
+export {
+  N as default
+};
+//# sourceMappingURL=ListOption.vue2.js.map

package/dist/components/compositions/elements/option-select/ListOption.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListOption.vue2.js","sources":["../../../../../src/components/compositions/elements/option-select/ListOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven single-select chip list. Each option becomes a clickable\n * Badge. When `clearable` is true, re-clicking the active chip clears\n * the selection.\n *\n *   <ListOption v-model=\"status\" :options=\"[...]\" label=\"Status\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface ListOptionProps {\n  modelValue?: string | number | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  clearable?: boolean\n}\n\nconst props = withDefaults(defineProps<ListOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<string | number | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst currentValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return String(model.value)\n})\n\nfunction isActive(val: string): boolean {\n  return currentValue.value === val\n}\n\nfunction selectValue(opt: NormalisedOption): void {\n  if (opt.disabled || props.disabled || props.readonly) {\n    return\n  }\n  if (currentValue.value === opt.value && props.clearable) {\n    model.value = null\n    return\n  }\n  model.value = opt.value\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      class=\"flex flex-wrap gap-2\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <Badge\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        as=\"button\"\n        type=\"button\"\n        :variant=\"isActive(opt.value) ? 'default' : 'outline'\"\n        size=\"lg\"\n        :class=\"[\n          'cursor-pointer transition-colors',\n          opt.disabled || disabled || readonly\n            ? 'pointer-events-none opacity-50'\n            : '',\n        ]\"\n        :data-active=\"isActive(opt.value)\"\n        :aria-pressed=\"isActive(opt.value)\"\n        @click=\"selectValue(opt)\"\n      >\n        {{ opt.label }}\n      </Badge>\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","normaliseOption","opt","normalised","computed","currentValue","isActive","val","selectValue","_createBlock","_unref","FieldFrame","_createElementVNode","_createElementBlock","_Fragment","_renderList","Badge","_normalizeClass","$event","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,UAAMA,IAAQC,GAKRC,IAAQC,KAAoC,YAAY;AAQ9D,aAASC,EAAgBC,GAAyC;AAChE,aAAI,OAAOA,KAAQ,WACV,EAAE,OAAOA,GAAK,OAAOA,GAAK,UAAU,GAAA,IAEtC;AAAA,QACL,OAAOA,EAAI;AAAA,QACX,OAAO,OAAOA,EAAI,KAAK;AAAA,QACvB,UAAU,EAAQA,EAAI;AAAA,MAAQ;AAAA,IAElC;AAEA,UAAMC,IAAaC;AAAA,MAA6B,OAC7CP,EAAM,WAAW,CAAA,GAAI,IAAII,CAAe;AAAA,IAAA,GAGrCI,IAAeD,EAA6B,MAAM;AACtD,UAAI,EAAAL,EAAM,UAAU,UAAaA,EAAM,UAAU;AAGjD,eAAO,OAAOA,EAAM,KAAK;AAAA,IAC3B,CAAC;AAED,aAASO,EAASC,GAAsB;AACtC,aAAOF,EAAa,UAAUE;AAAA,IAChC;AAEA,aAASC,EAAYN,GAA6B;AAChD,UAAI,EAAAA,EAAI,YAAYL,EAAM,YAAYA,EAAM,WAG5C;AAAA,YAAIQ,EAAa,UAAUH,EAAI,SAASL,EAAM,WAAW;AACvD,UAAAE,EAAM,QAAQ;AACd;AAAA,QACF;AACA,QAAAA,EAAM,QAAQG,EAAI;AAAA;AAAA,IACpB;2BAIEO,EA+BaC,EAAAC,CAAA,GAAA;AAAA,MA9BV,OAAOb,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MAuBM;AAAA,QAvBNc,EAuBM,OAAA;AAAA,UAtBJ,OAAM;AAAA,UACL,qBAAmBd,EAAA,QAAQ;AAAA,QAAA;kBAE5Be,EAkBQC,GAAA,MAAAC,EAjBQZ,EAAA,OAAU,CAAjBD,YADTO,EAkBQC,EAAAM,CAAA,GAAA;AAAA,YAhBL,KAAKd,EAAI;AAAA,YACV,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,SAASI,EAASJ,EAAI,KAAK,IAAA,YAAA;AAAA,YAC5B,MAAK;AAAA,YACJ,OAAKe,EAAA;AAAA;cAA4Df,EAAI,YAAYJ,EAAA,YAAYA,EAAA;;YAM7F,eAAaQ,EAASJ,EAAI,KAAK;AAAA,YAC/B,gBAAcI,EAASJ,EAAI,KAAK;AAAA,YAChC,SAAK,CAAAgB,MAAEV,EAAYN,CAAG;AAAA,UAAA;uBAEvB,MAAe;AAAA,cAAZiB,EAAAC,EAAAlB,EAAI,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;;"}

package/dist/components/compositions/elements/option-select/PillSelectOption.vue.js

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

package/dist/components/compositions/elements/option-select/PillSelectOption.vue.js.map

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

package/dist/components/compositions/elements/option-select/PillSelectOption.vue2.js

@@ -0,0 +1,88 @@
+import { defineComponent as y, useModel as g, computed as u, openBlock as d, createBlock as s, unref as c, withCtx as m, createElementVNode as h, createElementBlock as x, Fragment as B, renderList as k, normalizeClass as p, createTextVNode as V, toDisplayString as C, mergeModels as S } from "vue";
+import "../../../ui/badge/index.js";
+import q from "../../../ui/field-frame/FieldFrame.vue.js";
+import A from "../../../ui/badge/Badge.vue.js";
+const L = ["data-element-name"], E = /* @__PURE__ */ y({
+  __name: "PillSelectOption",
+  props: /* @__PURE__ */ S({
+    modelValue: {},
+    options: { default: () => [] },
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const r = l, n = g(l, "modelValue");
+    function f(e) {
+      return typeof e == "string" ? { label: e, value: e, disabled: !1 } : {
+        label: e.label,
+        value: String(e.value),
+        disabled: !!e.disabled
+      };
+    }
+    const v = u(
+      () => (r.options ?? []).map(f)
+    ), o = u(() => {
+      const e = n.value;
+      return e ? Array.isArray(e) ? e.map((t) => String(t)) : [String(e)] : [];
+    });
+    function i(e) {
+      return o.value.includes(e);
+    }
+    function b(e) {
+      if (e.disabled || r.disabled || r.readonly)
+        return;
+      const t = o.value;
+      t.includes(e.value) ? n.value = t.filter((a) => a !== e.value) : n.value = [...t, e.value];
+    }
+    return (e, t) => (d(), s(c(q), {
+      label: l.label,
+      required: l.required,
+      "hide-label": l.hideLabel,
+      "help-text": l.helpText,
+      errors: l.errors
+    }, {
+      default: m(() => [
+        h("div", {
+          class: "flex flex-wrap gap-2",
+          "data-element-name": l.name ?? void 0
+        }, [
+          (d(!0), x(B, null, k(v.value, (a) => (d(), s(c(A), {
+            key: a.value,
+            as: "button",
+            type: "button",
+            variant: i(a.value) ? "default" : "outline",
+            size: "lg",
+            class: p([
+              "cursor-pointer transition-colors",
+              a.disabled || l.disabled || l.readonly ? "pointer-events-none opacity-50" : ""
+            ]),
+            "data-active": i(a.value),
+            "aria-pressed": i(a.value),
+            onClick: (M) => b(a)
+          }, {
+            default: m(() => [
+              V(C(a.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["variant", "class", "data-active", "aria-pressed", "onClick"]))), 128))
+        ], 8, L)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "help-text", "errors"]));
+  }
+});
+export {
+  E as default
+};
+//# sourceMappingURL=PillSelectOption.vue2.js.map

package/dist/components/compositions/elements/option-select/PillSelectOption.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillSelectOption.vue2.js","sources":["../../../../../src/components/compositions/elements/option-select/PillSelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-select pill composition. Each option becomes a\n * toggleable Badge with multi-select semantics.\n *\n *   <PillSelectOption v-model=\"tags\" :options=\"[...]\" label=\"Tags\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface PillSelectOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<PillSelectOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nfunction isActive(val: string): boolean {\n  return selected.value.includes(val)\n}\n\nfunction togglePill(opt: NormalisedOption): void {\n  if (opt.disabled || props.disabled || props.readonly) {\n    return\n  }\n  const current = selected.value\n  if (current.includes(opt.value)) {\n    model.value = current.filter((v) => v !== opt.value)\n  } else {\n    model.value = [...current, opt.value]\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      class=\"flex flex-wrap gap-2\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <Badge\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        as=\"button\"\n        type=\"button\"\n        :variant=\"isActive(opt.value) ? 'default' : 'outline'\"\n        size=\"lg\"\n        :class=\"[\n          'cursor-pointer transition-colors',\n          opt.disabled || disabled || readonly\n            ? 'pointer-events-none opacity-50'\n            : '',\n        ]\"\n        :data-active=\"isActive(opt.value)\"\n        :aria-pressed=\"isActive(opt.value)\"\n        @click=\"togglePill(opt)\"\n      >\n        {{ opt.label }}\n      </Badge>\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","normaliseOption","opt","normalised","computed","selected","v","x","isActive","val","togglePill","current","_createBlock","_unref","FieldFrame","_createElementVNode","_createElementBlock","_Fragment","_renderList","Badge","_normalizeClass","$event","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAMA,IAAQC,GAKRC,IAAQC,EAA0CF,GAAC,YAAY;AAQrE,aAASG,EAAgBC,GAAyC;AAChE,aAAI,OAAOA,KAAQ,WACV,EAAE,OAAOA,GAAK,OAAOA,GAAK,UAAU,GAAA,IAEtC;AAAA,QACL,OAAOA,EAAI;AAAA,QACX,OAAO,OAAOA,EAAI,KAAK;AAAA,QACvB,UAAU,EAAQA,EAAI;AAAA,MAAQ;AAAA,IAElC;AAEA,UAAMC,IAAaC;AAAA,MAA6B,OAC7CP,EAAM,WAAW,CAAA,GAAI,IAAII,CAAe;AAAA,IAAA,GAGrCI,IAAWD,EAAmB,MAAM;AACxC,YAAME,IAAIP,EAAM;AAChB,aAAKO,IAGD,MAAM,QAAQA,CAAC,IACVA,EAAE,IAAI,CAACC,MAAM,OAAOA,CAAC,CAAC,IAExB,CAAC,OAAOD,CAAC,CAAC,IALR,CAAA;AAAA,IAMX,CAAC;AAED,aAASE,EAASC,GAAsB;AACtC,aAAOJ,EAAS,MAAM,SAASI,CAAG;AAAA,IACpC;AAEA,aAASC,EAAWR,GAA6B;AAC/C,UAAIA,EAAI,YAAYL,EAAM,YAAYA,EAAM;AAC1C;AAEF,YAAMc,IAAUN,EAAS;AACzB,MAAIM,EAAQ,SAAST,EAAI,KAAK,IAC5BH,EAAM,QAAQY,EAAQ,OAAO,CAACL,MAAMA,MAAMJ,EAAI,KAAK,IAEnDH,EAAM,QAAQ,CAAC,GAAGY,GAAST,EAAI,KAAK;AAAA,IAExC;2BAIEU,EA+BaC,EAAAC,CAAA,GAAA;AAAA,MA9BV,OAAOhB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MAuBM;AAAA,QAvBNiB,EAuBM,OAAA;AAAA,UAtBJ,OAAM;AAAA,UACL,qBAAmBjB,EAAA,QAAQ;AAAA,QAAA;kBAE5BkB,EAkBQC,GAAA,MAAAC,EAjBQf,EAAA,OAAU,CAAjBD,YADTU,EAkBQC,EAAAM,CAAA,GAAA;AAAA,YAhBL,KAAKjB,EAAI;AAAA,YACV,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,SAASM,EAASN,EAAI,KAAK,IAAA,YAAA;AAAA,YAC5B,MAAK;AAAA,YACJ,OAAKkB,EAAA;AAAA;cAA4DlB,EAAI,YAAYJ,EAAA,YAAYA,EAAA;;YAM7F,eAAaU,EAASN,EAAI,KAAK;AAAA,YAC/B,gBAAcM,EAASN,EAAI,KAAK;AAAA,YAChC,SAAK,CAAAmB,MAAEX,EAAWR,CAAG;AAAA,UAAA;uBAEtB,MAAe;AAAA,cAAZoB,EAAAC,EAAArB,EAAI,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;;"}

package/dist/components/compositions/elements/option-select/RadioOption.vue.js

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

package/dist/components/compositions/elements/option-select/RadioOption.vue.js.map

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

package/dist/components/compositions/elements/option-select/RadioOption.vue2.js

@@ -0,0 +1,101 @@
+import { defineComponent as b, useModel as g, computed as o, openBlock as d, createBlock as y, unref as i, withCtx as n, createVNode as t, normalizeClass as h, createElementBlock as u, Fragment as B, renderList as V, createTextVNode as $, toDisplayString as q, mergeModels as x } from "vue";
+import k from "../../../ui/radio-group/RadioGroup.vue.js";
+import p from "../../../ui/radio-group/RadioGroupItem.vue.js";
+import "../../../ui/label/index.js";
+import S from "../../../ui/field-frame/FieldFrame.vue.js";
+import w from "../../../ui/label/Label.vue.js";
+const z = /* @__PURE__ */ b({
+  __name: "RadioOption",
+  props: /* @__PURE__ */ x({
+    modelValue: {},
+    options: { default: () => [] },
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    inline: { type: Boolean },
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const m = e, a = g(e, "modelValue");
+    function s(l) {
+      return typeof l == "string" ? { label: l, value: l, disabled: !1 } : {
+        label: l.label,
+        value: String(l.value),
+        disabled: !!l.disabled
+      };
+    }
+    const f = o(
+      () => (m.options ?? []).map(s)
+    ), c = o(() => {
+      if (!(a.value === void 0 || a.value === null))
+        return String(a.value);
+    });
+    function v(l) {
+      if (l == null) {
+        a.value = null;
+        return;
+      }
+      if (typeof l == "string" || typeof l == "number") {
+        a.value = l;
+        return;
+      }
+      a.value = String(l);
+    }
+    return (l, C) => (d(), y(i(S), {
+      label: e.label,
+      required: e.required,
+      "hide-label": e.hideLabel,
+      "help-text": e.helpText,
+      errors: e.errors
+    }, {
+      default: n(() => [
+        t(i(k), {
+          "model-value": c.value,
+          name: e.name,
+          disabled: e.disabled || e.readonly,
+          required: e.required,
+          "data-element-name": e.name ?? void 0,
+          class: h(e.inline ? "flex flex-row flex-wrap gap-4" : "grid gap-2"),
+          "onUpdate:modelValue": v
+        }, {
+          default: n(() => [
+            (d(!0), u(B, null, V(f.value, (r) => (d(), u("div", {
+              key: r.value,
+              class: "flex items-center gap-2"
+            }, [
+              t(i(p), {
+                id: `${e.id ?? "radio"}-${r.value}`,
+                value: r.value,
+                disabled: r.disabled
+              }, null, 8, ["id", "value", "disabled"]),
+              t(i(w), {
+                for: `${e.id ?? "radio"}-${r.value}`,
+                class: "cursor-pointer"
+              }, {
+                default: n(() => [
+                  $(q(r.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["for"])
+            ]))), 128))
+          ]),
+          _: 1
+        }, 8, ["model-value", "name", "disabled", "required", "data-element-name", "class"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "help-text", "errors"]));
+  }
+});
+export {
+  z as default
+};
+//# sourceMappingURL=RadioOption.vue2.js.map