@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/IntegrationConnectorOption-Bv5geOlD.js

@@ -0,0 +1,214 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { n } from "./button-BAwcISlK.js";
+import { c as r, i, l as a, n as o, o as s, r as ee, s as c } from "./combobox-BrYBRIqW.js";
+import { t as te } from "./field-frame-n5oLDNBT.js";
+import { t as l } from "./useConnectorLoader-D1SuPu3P.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, normalizeClass as b, openBlock as x, ref as S, renderList as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useModel as D, watch as O, withCtx as k, withModifiers as ne } from "vue";
+import { Loader2 as A, Search as j } from "@lucide/vue";
+//#region src/components/compositions/elements/option-select/IntegrationConnectorOption.vue?vue&type=script&setup=true&lang.ts
+var M = {
+	key: 0,
+	class: "px-2 py-2 text-sm text-muted-foreground",
+	"data-testid": "integration-connector-option-loading-text"
+}, N = {
+	key: 1,
+	class: "flex flex-col gap-2 px-2 py-2",
+	"data-testid": "integration-connector-option-error"
+}, P = { class: "text-sm text-destructive" }, F = { class: "flex flex-1 items-center gap-2" }, I = { class: "truncate text-sm" }, L = ["data-status", "data-testid"], R = /* @__PURE__ */ v({
+	__name: "IntegrationConnectorOption",
+	props: /* @__PURE__ */ y({
+		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(e, { expose: v }) {
+		let y = e, R = D(e, "modelValue"), { connectors: z, isLoading: B, error: V, refresh: H, isConnecting: U, connect: W } = l(() => y.onLoadConnectors()), G = {
+			connected: "bg-success",
+			disconnected: "bg-muted-foreground/40",
+			error: "bg-destructive"
+		};
+		function K(e) {
+			return e && G[e] ? G[e] : "bg-muted-foreground/40";
+		}
+		function q(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let J = S({});
+		async function Y(e) {
+			if (!e) return;
+			let t = q(e);
+			if (t in J.value) return;
+			let n = await import("@lucide/vue");
+			J.value = {
+				...J.value,
+				[t]: n[t] ?? null
+			};
+		}
+		O(z, (e) => {
+			for (let t of e) t.icon && Y(t.icon);
+		}, { immediate: !0 });
+		function X(e) {
+			return e ? J.value[q(e)] ?? null : null;
+		}
+		let Z = S(""), Q = d(() => {
+			let e = Z.value.trim().toLowerCase();
+			return e ? z.value.filter((t) => [
+				t.label,
+				t.type ?? "",
+				t.id
+			].some((t) => t.toLowerCase().includes(e))) : z.value;
+		}), re = d(() => R.value === void 0 || R.value === null ? null : z.value.find((e) => e.id === R.value) ?? null), ie = d(() => {
+			if (!(R.value === void 0 || R.value === null)) return R.value;
+		});
+		function ae(e) {
+			Z.value = e.target.value;
+		}
+		function oe(e) {
+			if (Array.isArray(e)) {
+				R.value = e[0] === void 0 ? null : e[0];
+				return;
+			}
+			R.value = e === void 0 ? null : e;
+		}
+		async function $(e, t) {
+			t?.stopPropagation(), t?.preventDefault(), await W(e, y.onConnect);
+		}
+		return v({
+			refresh: H,
+			handleConnect: $
+		}), (l, d) => (x(), f(E(te), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: k(() => [_(E(a), {
+				"model-value": ie.value,
+				disabled: e.disabled || e.readonly,
+				"ignore-filter": "",
+				"onUpdate:modelValue": oe
+			}, {
+				default: k(() => [_(E(r), {
+					"data-element-name": e.name ?? void 0,
+					"data-testid": "integration-connector-option-anchor",
+					class: b(e.errors.length ? "border-destructive ring-destructive" : "")
+				}, {
+					default: k(() => [
+						_(E(j), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+						_(E(i), {
+							id: e.id,
+							"model-value": Z.value,
+							placeholder: re.value?.label || (e.placeholder ?? "Select connector…"),
+							"data-testid": "integration-connector-option-input",
+							onInput: ae
+						}, null, 8, [
+							"id",
+							"model-value",
+							"placeholder"
+						]),
+						E(B) ? (x(), f(E(A), {
+							key: 0,
+							"data-testid": "integration-connector-option-loader",
+							class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+						})) : p("", !0)
+					]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), _(E(c), null, {
+					default: k(() => [E(B) ? (x(), m("div", M, T(e.loadingText), 1)) : E(V) ? (x(), m("div", N, [h("p", P, T(e.errorText), 1), _(E(n), {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						"data-testid": "integration-connector-option-retry",
+						onClick: E(H)
+					}, {
+						default: k(() => [...d[0] ||= [g(" Retry ", -1)]]),
+						_: 1
+					}, 8, ["onClick"])])) : Q.value.length === 0 ? (x(), f(E(s), { key: 2 }, {
+						default: k(() => [g(T(e.emptyText), 1)]),
+						_: 1
+					})) : p("", !0), (x(!0), m(u, null, C(Q.value, (r) => (x(), f(E(ee), {
+						key: r.id,
+						value: r.id,
+						"data-testid": `integration-connector-option-item-${r.id}`
+					}, {
+						default: k(() => [_(E(o)), h("div", F, [
+							X(r.icon) ? (x(), f(w(X(r.icon)), {
+								key: 0,
+								class: "size-4 shrink-0"
+							})) : p("", !0),
+							h("span", I, T(r.label), 1),
+							r.type ? (x(), f(E(t), {
+								key: 1,
+								variant: "outline",
+								size: "sm"
+							}, {
+								default: k(() => [g(T(r.type), 1)]),
+								_: 2
+							}, 1024)) : p("", !0),
+							h("span", {
+								class: b(["ml-auto inline-block size-2 rounded-full", K(r.status)]),
+								"data-status": r.status ?? "unknown",
+								"data-testid": `integration-connector-option-status-${r.id}`
+							}, null, 10, L),
+							e.onConnect && r.status !== "connected" ? (x(), f(E(n), {
+								key: 2,
+								type: "button",
+								size: "sm",
+								variant: "outline",
+								class: "ml-2",
+								disabled: !!E(U)[r.id],
+								"data-testid": `integration-connector-option-connect-${r.id}`,
+								onClick: ne((e) => $(r.id, e), ["stop"])
+							}, {
+								default: k(() => [E(U)[r.id] ? (x(), f(E(A), {
+									key: 0,
+									class: "size-3 animate-spin"
+								})) : p("", !0), h("span", null, T(r.status === "error" ? "Reconnect" : "Connect"), 1)]),
+								_: 2
+							}, 1032, [
+								"disabled",
+								"data-testid",
+								"onClick"
+							])) : p("", !0)
+						])]),
+						_: 2
+					}, 1032, ["value", "data-testid"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), z = /* @__PURE__ */ e({ default: () => B }), B = R;
+//#endregion
+export { z as n, B as t };
+
+//# sourceMappingURL=IntegrationConnectorOption-Bv5geOlD.js.map

package/dist/chunks/IntegrationConnectorOption-Bv5geOlD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationConnectorOption-Bv5geOlD.js","names":[],"sources":["../../src/components/compositions/elements/option-select/IntegrationConnectorOption.vue","../../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\"\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\")\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","<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\"\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\")\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"],"mappings":"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"}

package/dist/chunks/IntegrationConnectorPicker-D_CjfiX7.js

@@ -0,0 +1,238 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { n } from "./button-BAwcISlK.js";
+import { c as r, i, l as a, n as o, o as s, r as ee, s as te } from "./combobox-BrYBRIqW.js";
+import { t as ne } from "./field-frame-n5oLDNBT.js";
+import { t as re } from "./useConnectorLoader-D1SuPu3P.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, openBlock as y, ref as b, renderList as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useModel as ie, watch as ae, withCtx as T, withModifiers as oe } from "vue";
+import { ChevronsUpDown as se, Loader2 as E, Plug as ce, Search as D } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/IntegrationConnectorPicker.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "flex min-w-0 flex-1 items-center gap-2" }, k = {
+	key: 2,
+	class: "truncate text-sm",
+	"data-testid": "integration-connector-picker-label"
+}, A = {
+	key: 3,
+	class: "truncate text-sm text-muted-foreground",
+	"data-testid": "integration-connector-picker-placeholder"
+}, j = ["data-status"], M = { class: "flex items-center border-b px-2 py-1.5" }, N = {
+	key: 0,
+	class: "px-2 py-2 text-sm text-muted-foreground",
+	"data-testid": "integration-connector-picker-loading-text"
+}, P = {
+	key: 1,
+	class: "flex flex-col gap-2 px-2 py-2",
+	"data-testid": "integration-connector-picker-error"
+}, F = { class: "text-sm text-destructive" }, I = { class: "flex flex-1 items-center gap-2" }, L = { class: "truncate text-sm" }, R = ["data-status", "data-testid"], z = /* @__PURE__ */ g({
+	__name: "IntegrationConnectorPicker",
+	props: /* @__PURE__ */ _({
+		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(e, { expose: g }) {
+		let _ = e, z = ie(e, "modelValue"), { connectors: B, isLoading: V, error: H, refresh: U, isConnecting: W, connect: le } = re(() => _.onLoadConnectors()), G = {
+			connected: "bg-success",
+			disconnected: "bg-muted-foreground/40",
+			error: "bg-destructive"
+		};
+		function K(e) {
+			return e && G[e] ? G[e] : "bg-muted-foreground/40";
+		}
+		function q(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let J = b({});
+		async function ue(e) {
+			if (!e) return;
+			let t = q(e);
+			if (t in J.value) return;
+			let n = await import("@lucide/vue");
+			J.value = {
+				...J.value,
+				[t]: n[t] ?? null
+			};
+		}
+		ae(B, (e) => {
+			for (let t of e) t.icon && ue(t.icon);
+		}, { immediate: !0 });
+		function Y(e) {
+			return e ? J.value[q(e)] ?? null : null;
+		}
+		let X = b(""), Z = l(() => {
+			let e = X.value.trim().toLowerCase();
+			return e ? B.value.filter((t) => [
+				t.label,
+				t.type ?? "",
+				t.id
+			].some((t) => t.toLowerCase().includes(e))) : B.value;
+		}), Q = l(() => z.value === void 0 || z.value === null ? null : B.value.find((e) => e.id === z.value) ?? null), de = l(() => {
+			if (!(z.value === void 0 || z.value === null)) return z.value;
+		});
+		function fe(e) {
+			X.value = e.target.value;
+		}
+		function pe(e) {
+			if (Array.isArray(e)) {
+				z.value = e[0] === void 0 ? null : e[0];
+				return;
+			}
+			z.value = e === void 0 ? null : e;
+		}
+		async function $(e, t) {
+			t?.stopPropagation(), t?.preventDefault(), await le(e, _.onConnect);
+		}
+		return g({
+			refresh: U,
+			handleConnect: $
+		}), (re, l) => (y(), u(w(ne), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: T(() => [h(w(a), {
+				"model-value": de.value,
+				disabled: e.disabled || e.readonly,
+				"ignore-filter": "",
+				"onUpdate:modelValue": pe
+			}, {
+				default: T(() => [h(w(r), {
+					"data-element-name": e.name ?? void 0,
+					"data-testid": "integration-connector-picker-anchor",
+					class: v(["justify-between text-left", e.errors.length ? "border-destructive ring-destructive" : ""])
+				}, {
+					default: T(() => [p("div", O, [
+						Q.value && Y(Q.value.icon) ? (y(), u(S(Y(Q.value?.icon)), {
+							key: 0,
+							class: "size-4 shrink-0"
+						})) : Q.value ? d("", !0) : (y(), u(w(ce), {
+							key: 1,
+							class: "size-4 shrink-0 text-muted-foreground/60"
+						})),
+						Q.value ? (y(), f("span", k, C(Q.value.label), 1)) : (y(), f("span", A, C(e.placeholder ?? "Select connector…"), 1)),
+						Q.value ? (y(), f("span", {
+							key: 4,
+							class: v(["inline-block size-2 shrink-0 rounded-full", K(Q.value.status)]),
+							"data-status": Q.value.status ?? "unknown",
+							"data-testid": "integration-connector-picker-status"
+						}, null, 10, j)) : d("", !0)
+					]), h(w(se), { class: "ml-2 h-4 w-4 shrink-0 opacity-50" })]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), h(w(te), null, {
+					default: T(() => [
+						p("div", M, [
+							h(w(D), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+							h(w(i), {
+								id: e.id,
+								"model-value": X.value,
+								placeholder: "Search connectors…",
+								class: "h-8",
+								"data-testid": "integration-connector-picker-input",
+								onInput: fe
+							}, null, 8, ["id", "model-value"]),
+							w(V) ? (y(), u(w(E), {
+								key: 0,
+								"data-testid": "integration-connector-picker-loader",
+								class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+							})) : d("", !0)
+						]),
+						w(V) ? (y(), f("div", N, C(e.loadingText), 1)) : w(H) ? (y(), f("div", P, [p("p", F, C(e.errorText), 1), h(w(n), {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							"data-testid": "integration-connector-picker-retry",
+							onClick: w(U)
+						}, {
+							default: T(() => [...l[0] ||= [m(" Retry ", -1)]]),
+							_: 1
+						}, 8, ["onClick"])])) : Z.value.length === 0 ? (y(), u(w(s), { key: 2 }, {
+							default: T(() => [m(C(e.emptyText), 1)]),
+							_: 1
+						})) : d("", !0),
+						(y(!0), f(c, null, x(Z.value, (r) => (y(), u(w(ee), {
+							key: r.id,
+							value: r.id,
+							"data-testid": `integration-connector-picker-item-${r.id}`
+						}, {
+							default: T(() => [h(w(o)), p("div", I, [
+								Y(r.icon) ? (y(), u(S(Y(r.icon)), {
+									key: 0,
+									class: "size-4 shrink-0"
+								})) : d("", !0),
+								p("span", L, C(r.label), 1),
+								r.type ? (y(), u(w(t), {
+									key: 1,
+									variant: "outline",
+									size: "sm"
+								}, {
+									default: T(() => [m(C(r.type), 1)]),
+									_: 2
+								}, 1024)) : d("", !0),
+								p("span", {
+									class: v(["ml-auto inline-block size-2 rounded-full", K(r.status)]),
+									"data-status": r.status ?? "unknown",
+									"data-testid": `integration-connector-picker-status-${r.id}`
+								}, null, 10, R),
+								e.onConnect && r.status !== "connected" ? (y(), u(w(n), {
+									key: 2,
+									type: "button",
+									size: "sm",
+									variant: "outline",
+									class: "ml-2",
+									disabled: !!w(W)[r.id],
+									"data-testid": `integration-connector-picker-connect-${r.id}`,
+									onClick: oe((e) => $(r.id, e), ["stop"])
+								}, {
+									default: T(() => [w(W)[r.id] ? (y(), u(w(E), {
+										key: 0,
+										class: "size-3 animate-spin"
+									})) : d("", !0), p("span", null, C(r.status === "error" ? "Reconnect" : "Connect"), 1)]),
+									_: 2
+								}, 1032, [
+									"disabled",
+									"data-testid",
+									"onClick"
+								])) : d("", !0)
+							])]),
+							_: 2
+						}, 1032, ["value", "data-testid"]))), 128))
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), B = /* @__PURE__ */ e({ default: () => V }), V = z;
+//#endregion
+export { B as n, V as t };
+
+//# sourceMappingURL=IntegrationConnectorPicker-D_CjfiX7.js.map

package/dist/chunks/IntegrationConnectorPicker-D_CjfiX7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationConnectorPicker-D_CjfiX7.js","names":[],"sources":["../../src/components/compositions/elements/picker/IntegrationConnectorPicker.vue","../../src/components/compositions/elements/picker/IntegrationConnectorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven integration-connector picker. Same connector-loading\n * surface as `IntegrationConnectorOption`, presented as a button-style\n * picker: the trigger renders the selected connector's icon + label +\n * status dot, and clicking opens a searchable Combobox panel.\n *\n *   <IntegrationConnectorPicker\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 { ChevronsUpDown, Loader2, Plug, Search } from \"@lucide/vue\"\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 IntegrationConnectorPickerProps {\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<IntegrationConnectorPickerProps>(), {\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\")\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-picker-anchor\"\n        :class=\"[\n          'justify-between text-left',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n      >\n        <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n          <component\n            :is=\"iconFor(selectedConnector?.icon)\"\n            v-if=\"selectedConnector && iconFor(selectedConnector.icon)\"\n            class=\"size-4 shrink-0\"\n          />\n          <Plug\n            v-else-if=\"!selectedConnector\"\n            class=\"size-4 shrink-0 text-muted-foreground/60\"\n          />\n          <span\n            v-if=\"selectedConnector\"\n            class=\"truncate text-sm\"\n            data-testid=\"integration-connector-picker-label\"\n          >\n            {{ selectedConnector.label }}\n          </span>\n          <span\n            v-else\n            class=\"truncate text-sm text-muted-foreground\"\n            data-testid=\"integration-connector-picker-placeholder\"\n          >\n            {{ placeholder ?? \"Select connector…\" }}\n          </span>\n          <span\n            v-if=\"selectedConnector\"\n            :class=\"[\n              'inline-block size-2 shrink-0 rounded-full',\n              statusDotClass(selectedConnector.status),\n            ]\"\n            :data-status=\"selectedConnector.status ?? 'unknown'\"\n            data-testid=\"integration-connector-picker-status\"\n          />\n        </div>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div class=\"flex items-center border-b px-2 py-1.5\">\n          <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n          <ComboboxInput\n            :id=\"id\"\n            :model-value=\"query\"\n            placeholder=\"Search connectors…\"\n            class=\"h-8\"\n            data-testid=\"integration-connector-picker-input\"\n            @input=\"onInput\"\n          />\n          <Loader2\n            v-if=\"isLoading\"\n            data-testid=\"integration-connector-picker-loader\"\n            class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n          />\n        </div>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"integration-connector-picker-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-picker-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-picker-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-picker-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-picker-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-picker-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","<script setup lang=\"ts\">\n/**\n * Props-driven integration-connector picker. Same connector-loading\n * surface as `IntegrationConnectorOption`, presented as a button-style\n * picker: the trigger renders the selected connector's icon + label +\n * status dot, and clicking opens a searchable Combobox panel.\n *\n *   <IntegrationConnectorPicker\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 { ChevronsUpDown, Loader2, Plug, Search } from \"@lucide/vue\"\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 IntegrationConnectorPickerProps {\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<IntegrationConnectorPickerProps>(), {\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\")\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-picker-anchor\"\n        :class=\"[\n          'justify-between text-left',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n      >\n        <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n          <component\n            :is=\"iconFor(selectedConnector?.icon)\"\n            v-if=\"selectedConnector && iconFor(selectedConnector.icon)\"\n            class=\"size-4 shrink-0\"\n          />\n          <Plug\n            v-else-if=\"!selectedConnector\"\n            class=\"size-4 shrink-0 text-muted-foreground/60\"\n          />\n          <span\n            v-if=\"selectedConnector\"\n            class=\"truncate text-sm\"\n            data-testid=\"integration-connector-picker-label\"\n          >\n            {{ selectedConnector.label }}\n          </span>\n          <span\n            v-else\n            class=\"truncate text-sm text-muted-foreground\"\n            data-testid=\"integration-connector-picker-placeholder\"\n          >\n            {{ placeholder ?? \"Select connector…\" }}\n          </span>\n          <span\n            v-if=\"selectedConnector\"\n            :class=\"[\n              'inline-block size-2 shrink-0 rounded-full',\n              statusDotClass(selectedConnector.status),\n            ]\"\n            :data-status=\"selectedConnector.status ?? 'unknown'\"\n            data-testid=\"integration-connector-picker-status\"\n          />\n        </div>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div class=\"flex items-center border-b px-2 py-1.5\">\n          <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n          <ComboboxInput\n            :id=\"id\"\n            :model-value=\"query\"\n            placeholder=\"Search connectors…\"\n            class=\"h-8\"\n            data-testid=\"integration-connector-picker-input\"\n            @input=\"onInput\"\n          />\n          <Loader2\n            v-if=\"isLoading\"\n            data-testid=\"integration-connector-picker-loader\"\n            class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n          />\n        </div>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"integration-connector-picker-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-picker-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-picker-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-picker-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-picker-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-picker-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"],"mappings":"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"}

package/dist/chunks/LinkAction-Cz5utmrZ.js

@@ -0,0 +1,59 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, openBlock as s, resolveDynamicComponent as c, toDisplayString as l, unref as u, withCtx as d } from "vue";
+import * as f from "@lucide/vue";
+//#region src/components/compositions/elements/action/LinkAction.vue?vue&type=script&setup=true&lang.ts
+var p = { key: 1 }, m = /* @__PURE__ */ o({
+	__name: "LinkAction",
+	props: {
+		label: {},
+		icon: {},
+		href: {},
+		target: { default: "_self" },
+		emit: {},
+		disabled: { type: Boolean },
+		id: {},
+		name: {}
+	},
+	emits: ["click", "action"],
+	setup(e, { emit: o }) {
+		let m = e, h = o, g = f;
+		function _(e) {
+			if (e) return g[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? g[e];
+		}
+		let v = n(() => _(m.icon)), y = n(() => m.href ? "a" : "button");
+		function b(e) {
+			h("click", e), !m.href && (e.preventDefault(), m.emit && h("action", { name: m.emit }));
+		}
+		return (n, o) => (s(), r(u(t), {
+			id: e.id,
+			as: y.value,
+			variant: "link",
+			size: "sm",
+			disabled: e.disabled,
+			href: y.value === "a" ? e.href : void 0,
+			target: y.value === "a" ? e.target : void 0,
+			"data-action-name": h ?? e.label,
+			"data-element-name": e.name ?? void 0,
+			onClick: b
+		}, {
+			default: d(() => [v.value ? (s(), r(c(v.value), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : i("", !0), e.label ? (s(), a("span", p, l(e.label), 1)) : i("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"as",
+			"disabled",
+			"href",
+			"target",
+			"data-action-name",
+			"data-element-name"
+		]));
+	}
+}), h = /* @__PURE__ */ e({ default: () => g }), g = m;
+//#endregion
+export { h as n, g as t };
+
+//# sourceMappingURL=LinkAction-Cz5utmrZ.js.map

package/dist/chunks/LinkAction-Cz5utmrZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAction-Cz5utmrZ.js","names":[],"sources":["../../src/components/compositions/elements/action/LinkAction.vue","../../src/components/compositions/elements/action/LinkAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven link composition. Renders a text link using the Button\n * primitive with variant=\"link\". Supports the same href / emit / confirm\n * behaviour as ButtonAction.\n *\n *   <LinkAction label=\"Open docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <LinkAction label=\"Refresh\" emit=\"refresh\" @action=\"onAction\" />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button } from \"@/components/ui/button\"\n\nexport interface LinkActionProps {\n  label?: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n  /** HTML id attribute. */\n  id?: string\n  /** HTML name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<LinkActionProps>(), {\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href ? \"a\" : \"button\",\n)\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.href) {\n    return\n  }\n  event.preventDefault()\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    variant=\"link\"\n    size=\"sm\"\n    :disabled=\"disabled\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven link composition. Renders a text link using the Button\n * primitive with variant=\"link\". Supports the same href / emit / confirm\n * behaviour as ButtonAction.\n *\n *   <LinkAction label=\"Open docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <LinkAction label=\"Refresh\" emit=\"refresh\" @action=\"onAction\" />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button } from \"@/components/ui/button\"\n\nexport interface LinkActionProps {\n  label?: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n  /** HTML id attribute. */\n  id?: string\n  /** HTML name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<LinkActionProps>(), {\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href ? \"a\" : \"button\",\n)\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.href) {\n    return\n  }\n  event.preventDefault()\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    variant=\"link\"\n    size=\"sm\"\n    :disabled=\"disabled\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GAIR,IAAO,GAKP,IAAc;EACpB,SAAS,EAAY,GAAkD;GAChE,OAQL,OAAO,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY;EAC5C;EACA,IAAM,IAAO,QAAe,EAAY,EAAM,IAAI,CAAC,GAE7C,IAAW,QACf,EAAM,OAAO,MAAM,QACrB;EAEA,SAAS,EAAQ,GAAyB;GACxC,EAAK,SAAS,CAAK,GACf,GAAM,SAGV,EAAM,eAAe,GACjB,EAAM,QACR,EAAK,UAAU,EAAE,MAAM,EAAM,KAAK,CAAC;EAEvC;yBAIE,EAcS,EAAA,CAAA,GAAA;GAbN,IAAI,EAAA;GACJ,IAAI,EAAA;GACL,SAAQ;GACR,MAAK;GACJ,UAAU,EAAA;GACV,MAAM,EAAA,UAAQ,MAAW,EAAA,OAAO,KAAA;GAChC,QAAQ,EAAA,UAAQ,MAAW,EAAA,SAAS,KAAA;GACpC,oBAAkB,KAAQ,EAAA;GAC1B,qBAAmB,EAAA,QAAQ,KAAA;GACpB;;oBAE4C,CAAxB,EAAA,SAAA,EAAA,GAA5B,EAAoD,EAApC,EAAA,KAAI,GAAA;;IAAc,OAAM;oBAC5B,EAAA,SAAA,EAAA,GAAZ,EAAqC,QAAA,GAAA,EAAf,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}