@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/BarcodeDisplay-kdnMuers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeDisplay-kdnMuers.js","names":[],"sources":["../../src/components/compositions/elements/display/BarcodeDisplay.vue","../../src/components/compositions/elements/display/BarcodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode display.\n *\n * Generates a barcode SVG from `value` using the `jsbarcode` library,\n * lazy-imported on mount. Default format is CODE128; supply alternates\n * (EAN13, UPC, ...) via the `format` prop.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface BarcodeDisplayProps {\n  value?: string | number | null\n  format?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BarcodeDisplayProps>(), {\n  format: \"CODE128\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\nconst svgRef = useTemplateRef<SVGSVGElement>(\"svgRef\")\nconst error = ref<string>(\"\")\n\nasync function renderBarcode(): Promise<void> {\n  if (!svgRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"jsbarcode\")\n    const JsBarcode = (mod as unknown as { default: (el: SVGElement | HTMLElement, value: string, options?: Record<string, unknown>) => void }).default\n    JsBarcode(svgRef.value, content.value, {\n      format: props.format,\n      displayValue: true,\n      margin: 4,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render barcode\"\n  }\n}\n\nonMounted(() => {\n  void renderBarcode()\n})\n\nwatch(\n  () => [content.value, props.format],\n  () => {\n    void renderBarcode()\n  },\n)\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"barcode-display\"\n  >\n    <svg\n      ref=\"svgRef\"\n      role=\"img\"\n      :aria-label=\"`Barcode: ${content}`\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"barcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven barcode display.\n *\n * Generates a barcode SVG from `value` using the `jsbarcode` library,\n * lazy-imported on mount. Default format is CODE128; supply alternates\n * (EAN13, UPC, ...) via the `format` prop.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface BarcodeDisplayProps {\n  value?: string | number | null\n  format?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BarcodeDisplayProps>(), {\n  format: \"CODE128\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\nconst svgRef = useTemplateRef<SVGSVGElement>(\"svgRef\")\nconst error = ref<string>(\"\")\n\nasync function renderBarcode(): Promise<void> {\n  if (!svgRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"jsbarcode\")\n    const JsBarcode = (mod as unknown as { default: (el: SVGElement | HTMLElement, value: string, options?: Record<string, unknown>) => void }).default\n    JsBarcode(svgRef.value, content.value, {\n      format: props.format,\n      displayValue: true,\n      margin: 4,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render barcode\"\n  }\n}\n\nonMounted(() => {\n  void renderBarcode()\n})\n\nwatch(\n  () => [content.value, props.format],\n  () => {\n    void renderBarcode()\n  },\n)\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"barcode-display\"\n  >\n    <svg\n      ref=\"svgRef\"\n      role=\"img\"\n      :aria-label=\"`Barcode: ${content}`\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"barcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,IAAM,IAAQ,GAIR,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAEK,IAAS,EAA8B,QAAQ,GAC/C,IAAQ,EAAY,EAAE;EAE5B,eAAe,IAA+B;GACxC,OAAC,EAAO,SAAS,CAAC,EAAQ,QAG9B,IAAI;IAEF,IAAM,KAAa,MADD,OAAO,cACmH;IAM5I,AALA,EAAU,EAAO,OAAO,EAAQ,OAAO;KACrC,QAAQ,EAAM;KACd,cAAc;KACd,QAAQ;IACV,CAAC,GACD,EAAM,QAAQ;GAChB,SAAS,GAAG;IACV,EAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;GACjD;EACF;SAEA,QAAgB;GACd,EAAmB;EACrB,CAAC,GAED,QACQ,CAAC,EAAQ,OAAO,EAAM,MAAM,SAC5B;GACJ,EAAmB;EACrB,CACF,mBAIE,EAiBM,OAAA;GAhBJ,OAAK,EAAA,CAAC,gBACE,EAAA,KAAS,CAAA;GACjB,eAAY;YAEZ,EAIE,OAAA;YAHI;GAAJ,KAAI;GACJ,MAAK;GACJ,cAAU,YAAc,EAAA;mBAGnB,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}

package/dist/chunks/BarcodeScannerInput-gclsYW45.js

@@ -0,0 +1,165 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { t as n } from "./input-tw5ZQGKQ.js";
+import { t as r } from "./field-frame-n5oLDNBT.js";
+import { computed as i, createBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, toDisplayString as m, unref as h, useModel as g, useTemplateRef as _, vShow as v, withCtx as y, withDirectives as b } from "vue";
+import { Camera as x, Loader2 as S, StopCircle as C } from "@lucide/vue";
+//#region src/components/compositions/elements/input/BarcodeScannerInput.vue?vue&type=script&setup=true&lang.ts
+var w = ["data-element-name"], T = { class: "flex items-center gap-2" }, E = /* @__PURE__ */ c({
+	__name: "BarcodeScannerInput",
+	props: /* @__PURE__ */ l({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		scanFormats: { default: () => [
+			"code_128_reader",
+			"ean_reader",
+			"ean_8_reader",
+			"code_39_reader",
+			"upc_reader"
+		] },
+		autoStart: {
+			type: Boolean,
+			default: !1
+		},
+		facingMode: { default: "environment" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e, { expose: c }) {
+		let l = e, E = g(e, "modelValue"), D = _("videoContainerRef"), O = p(!1), k = p(!1), A = p(""), j = null, M = null, N = null, P = i(() => k.value ? "Starting…" : O.value ? "Stop scanning" : "Scan"), F = i(() => A.value ? [...l.errors, A.value] : l.errors);
+		function I() {
+			if (M) {
+				for (let e of M.getTracks()) try {
+					e.stop();
+				} catch {}
+				M = null;
+			}
+		}
+		async function L() {
+			if (j) try {
+				N && j.offDetected(N), await j.stop();
+			} catch {}
+			N = null, j = null, I(), O.value = !1, k.value = !1;
+		}
+		async function R() {
+			if (!(O.value || k.value)) {
+				A.value = "", k.value = !0;
+				try {
+					let e = typeof navigator < "u" ? navigator : void 0;
+					if (!e?.mediaDevices?.getUserMedia) throw Error("Camera access is not available in this environment.");
+					M = await e.mediaDevices.getUserMedia({
+						video: { facingMode: l.facingMode },
+						audio: !1
+					}), j = (await import("@ericblade/quagga2")).default;
+					let t = D.value;
+					if (!t) throw Error("Scanner viewport is not mounted.");
+					await j.init({
+						inputStream: {
+							type: "LiveStream",
+							target: t,
+							constraints: { facingMode: l.facingMode }
+						},
+						decoder: { readers: [...l.scanFormats] },
+						locate: !0
+					}), N = (e) => {
+						let t = e?.codeResult?.code;
+						typeof t == "string" && t.length > 0 && (E.value = t, L());
+					}, j.onDetected(N), j.start(), O.value = !0;
+				} catch (e) {
+					A.value = e instanceof Error ? e.message : "Failed to start scanner.", await L();
+				} finally {
+					k.value = !1;
+				}
+			}
+		}
+		async function z() {
+			O.value ? await L() : await R();
+		}
+		function B(e) {
+			e && (E.value = e);
+		}
+		return c({
+			__handleDetectedForTest: B,
+			start: R,
+			stop: L
+		}), l.autoStart && R(), d(() => {
+			L();
+		}), (i, c) => (f(), a(h(r), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: F.value
+		}, {
+			default: y(() => [o("div", {
+				class: "flex flex-col gap-2",
+				"data-element-name": e.name ?? void 0
+			}, [o("div", T, [s(h(n), {
+				id: e.id,
+				"model-value": E.value ?? void 0,
+				name: e.name ?? void 0,
+				type: "text",
+				readonly: "",
+				disabled: e.disabled,
+				required: e.required,
+				placeholder: "No code scanned yet",
+				"data-element-name": e.name ?? void 0,
+				class: u(e.errors.length ? "border-destructive ring-destructive" : "")
+			}, null, 8, [
+				"id",
+				"model-value",
+				"name",
+				"disabled",
+				"required",
+				"data-element-name",
+				"class"
+			]), s(h(t), {
+				type: "button",
+				variant: O.value ? "destructive" : "default",
+				disabled: e.disabled || e.readonly || k.value,
+				"data-testid": "barcode-scan-toggle",
+				onClick: z
+			}, {
+				default: y(() => [k.value ? (f(), a(h(S), {
+					key: 0,
+					class: "size-4 animate-spin"
+				})) : O.value ? (f(), a(h(C), {
+					key: 1,
+					class: "size-4"
+				})) : (f(), a(h(x), {
+					key: 2,
+					class: "size-4"
+				})), o("span", null, m(P.value), 1)]),
+				_: 1
+			}, 8, ["variant", "disabled"])]), b(o("div", {
+				ref_key: "videoContainerRef",
+				ref: D,
+				"data-testid": "barcode-scan-viewport",
+				class: "relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted"
+			}, null, 512), [[v, O.value || k.value]])], 8, w)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), D = /* @__PURE__ */ e({ default: () => O }), O = E;
+//#endregion
+export { D as n, O as t };
+
+//# sourceMappingURL=BarcodeScannerInput-gclsYW45.js.map

package/dist/chunks/BarcodeScannerInput-gclsYW45.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerInput-gclsYW45.js","names":[],"sources":["../../src/components/compositions/elements/input/BarcodeScannerInput.vue","../../src/components/compositions/elements/input/BarcodeScannerInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode scanner input.\n *\n * Wraps `@ericblade/quagga2` to provide a live camera-driven barcode\n * scanner. Renders the last decoded value in a read-only Input plus a\n * \"Scan\" button that toggles a `<video>` viewport.\n *\n * The quagga library and the `getUserMedia` API are lazy-imported when\n * scanning starts so the component is safe to render in environments\n * without a camera (e.g. jsdom).\n *\n *   <BarcodeScannerInput v-model=\"ticket\" label=\"Scan ticket\" />\n */\nimport { computed, onBeforeUnmount, ref, useTemplateRef } from \"vue\"\nimport { Camera, Loader2, StopCircle } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface BarcodeScannerInputProps {\n  modelValue?: string | null\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  /** Quagga barcode reader symbologies to recognise. */\n  scanFormats?: ReadonlyArray<string>\n  /** Start scanning automatically when the component mounts. */\n  autoStart?: boolean\n  /** Preferred camera facing mode. */\n  facingMode?: \"environment\" | \"user\"\n}\n\nconst props = withDefaults(defineProps<BarcodeScannerInputProps>(), {\n  errors: () => [],\n  scanFormats: () => [\n    \"code_128_reader\",\n    \"ean_reader\",\n    \"ean_8_reader\",\n    \"code_39_reader\",\n    \"upc_reader\",\n  ],\n  autoStart: false,\n  facingMode: \"environment\",\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\n/** Loose Quagga handle — type-definitions ship with the library but we\n *  keep the references local rather than pulling its full type graph. */\ntype QuaggaResult = { codeResult?: { code?: string | null } }\ntype QuaggaHandle = {\n  init: (config: Record<string, unknown>) => Promise<void>\n  start: () => void\n  stop: () => Promise<void> | void\n  onDetected: (cb: (result: QuaggaResult) => void) => void\n  offDetected: (cb: (result: QuaggaResult) => void) => void\n}\n\nconst videoContainerRef = useTemplateRef<HTMLDivElement>(\"videoContainerRef\")\nconst scanning = ref<boolean>(false)\nconst starting = ref<boolean>(false)\nconst scanError = ref<string>(\"\")\n\nlet quagga: QuaggaHandle | null = null\nlet mediaStream: MediaStream | null = null\nlet detectedHandler: ((result: QuaggaResult) => void) | null = null\n\nconst buttonLabel = computed<string>(() => {\n  if (starting.value) {\n    return \"Starting…\"\n  }\n  return scanning.value ? \"Stop scanning\" : \"Scan\"\n})\n\nconst allErrors = computed<string[]>(() => {\n  if (scanError.value) {\n    return [...props.errors, scanError.value]\n  }\n  return props.errors\n})\n\nfunction releaseStream(): void {\n  if (mediaStream) {\n    for (const track of mediaStream.getTracks()) {\n      try {\n        track.stop()\n      } catch {\n        /* ignore */\n      }\n    }\n    mediaStream = null\n  }\n}\n\nasync function stop(): Promise<void> {\n  if (quagga) {\n    try {\n      if (detectedHandler) {\n        quagga.offDetected(detectedHandler)\n      }\n      await quagga.stop()\n    } catch {\n      /* ignore */\n    }\n  }\n  detectedHandler = null\n  quagga = null\n  releaseStream()\n  scanning.value = false\n  starting.value = false\n}\n\nasync function start(): Promise<void> {\n  if (scanning.value || starting.value) {\n    return\n  }\n  scanError.value = \"\"\n  starting.value = true\n\n  try {\n    const nav = typeof navigator !== \"undefined\" ? navigator : undefined\n    if (!nav?.mediaDevices?.getUserMedia) {\n      throw new Error(\"Camera access is not available in this environment.\")\n    }\n\n    mediaStream = await nav.mediaDevices.getUserMedia({\n      video: { facingMode: props.facingMode },\n      audio: false,\n    })\n\n    const mod = await import(\"@ericblade/quagga2\")\n    quagga = (mod as unknown as { default: QuaggaHandle }).default\n\n    const target = videoContainerRef.value\n    if (!target) {\n      throw new Error(\"Scanner viewport is not mounted.\")\n    }\n\n    await quagga.init({\n      inputStream: {\n        type: \"LiveStream\",\n        target,\n        constraints: {\n          facingMode: props.facingMode,\n        },\n      },\n      decoder: {\n        readers: [...props.scanFormats],\n      },\n      locate: true,\n    })\n\n    detectedHandler = (result: QuaggaResult): void => {\n      const code = result?.codeResult?.code\n      if (typeof code === \"string\" && code.length > 0) {\n        model.value = code\n        void stop()\n      }\n    }\n    quagga.onDetected(detectedHandler)\n\n    quagga.start()\n    scanning.value = true\n  } catch (e) {\n    scanError.value = e instanceof Error ? e.message : \"Failed to start scanner.\"\n    await stop()\n  } finally {\n    starting.value = false\n  }\n}\n\nasync function toggleScan(): Promise<void> {\n  if (scanning.value) {\n    await stop()\n  } else {\n    await start()\n  }\n}\n\n/**\n * Test hook — lets tests simulate a successful Quagga detection\n * without spinning up a real camera. Not part of the public contract;\n * exposed only via `wrapper.vm` in unit tests.\n */\nfunction __handleDetectedForTest(code: string): void {\n  if (code) {\n    model.value = code\n  }\n}\n\ndefineExpose({ __handleDetectedForTest, start, stop })\n\nif (props.autoStart) {\n  void start()\n}\n\nonBeforeUnmount(() => {\n  void stop()\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n  >\n    <div class=\"flex flex-col gap-2\" :data-element-name=\"name ?? undefined\">\n      <div class=\"flex items-center gap-2\">\n        <Input\n          :id=\"id\"\n          :model-value=\"model ?? undefined\"\n          :name=\"name ?? undefined\"\n          type=\"text\"\n          readonly\n          :disabled=\"disabled\"\n          :required=\"required\"\n          placeholder=\"No code scanned yet\"\n          :data-element-name=\"name ?? undefined\"\n          :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        />\n        <Button\n          type=\"button\"\n          :variant=\"scanning ? 'destructive' : 'default'\"\n          :disabled=\"disabled || readonly || starting\"\n          data-testid=\"barcode-scan-toggle\"\n          @click=\"toggleScan\"\n        >\n          <Loader2 v-if=\"starting\" class=\"size-4 animate-spin\" />\n          <StopCircle v-else-if=\"scanning\" class=\"size-4\" />\n          <Camera v-else class=\"size-4\" />\n          <span>{{ buttonLabel }}</span>\n        </Button>\n      </div>\n      <div\n        v-show=\"scanning || starting\"\n        ref=\"videoContainerRef\"\n        data-testid=\"barcode-scan-viewport\"\n        class=\"relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven barcode scanner input.\n *\n * Wraps `@ericblade/quagga2` to provide a live camera-driven barcode\n * scanner. Renders the last decoded value in a read-only Input plus a\n * \"Scan\" button that toggles a `<video>` viewport.\n *\n * The quagga library and the `getUserMedia` API are lazy-imported when\n * scanning starts so the component is safe to render in environments\n * without a camera (e.g. jsdom).\n *\n *   <BarcodeScannerInput v-model=\"ticket\" label=\"Scan ticket\" />\n */\nimport { computed, onBeforeUnmount, ref, useTemplateRef } from \"vue\"\nimport { Camera, Loader2, StopCircle } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface BarcodeScannerInputProps {\n  modelValue?: string | null\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  /** Quagga barcode reader symbologies to recognise. */\n  scanFormats?: ReadonlyArray<string>\n  /** Start scanning automatically when the component mounts. */\n  autoStart?: boolean\n  /** Preferred camera facing mode. */\n  facingMode?: \"environment\" | \"user\"\n}\n\nconst props = withDefaults(defineProps<BarcodeScannerInputProps>(), {\n  errors: () => [],\n  scanFormats: () => [\n    \"code_128_reader\",\n    \"ean_reader\",\n    \"ean_8_reader\",\n    \"code_39_reader\",\n    \"upc_reader\",\n  ],\n  autoStart: false,\n  facingMode: \"environment\",\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\n/** Loose Quagga handle — type-definitions ship with the library but we\n *  keep the references local rather than pulling its full type graph. */\ntype QuaggaResult = { codeResult?: { code?: string | null } }\ntype QuaggaHandle = {\n  init: (config: Record<string, unknown>) => Promise<void>\n  start: () => void\n  stop: () => Promise<void> | void\n  onDetected: (cb: (result: QuaggaResult) => void) => void\n  offDetected: (cb: (result: QuaggaResult) => void) => void\n}\n\nconst videoContainerRef = useTemplateRef<HTMLDivElement>(\"videoContainerRef\")\nconst scanning = ref<boolean>(false)\nconst starting = ref<boolean>(false)\nconst scanError = ref<string>(\"\")\n\nlet quagga: QuaggaHandle | null = null\nlet mediaStream: MediaStream | null = null\nlet detectedHandler: ((result: QuaggaResult) => void) | null = null\n\nconst buttonLabel = computed<string>(() => {\n  if (starting.value) {\n    return \"Starting…\"\n  }\n  return scanning.value ? \"Stop scanning\" : \"Scan\"\n})\n\nconst allErrors = computed<string[]>(() => {\n  if (scanError.value) {\n    return [...props.errors, scanError.value]\n  }\n  return props.errors\n})\n\nfunction releaseStream(): void {\n  if (mediaStream) {\n    for (const track of mediaStream.getTracks()) {\n      try {\n        track.stop()\n      } catch {\n        /* ignore */\n      }\n    }\n    mediaStream = null\n  }\n}\n\nasync function stop(): Promise<void> {\n  if (quagga) {\n    try {\n      if (detectedHandler) {\n        quagga.offDetected(detectedHandler)\n      }\n      await quagga.stop()\n    } catch {\n      /* ignore */\n    }\n  }\n  detectedHandler = null\n  quagga = null\n  releaseStream()\n  scanning.value = false\n  starting.value = false\n}\n\nasync function start(): Promise<void> {\n  if (scanning.value || starting.value) {\n    return\n  }\n  scanError.value = \"\"\n  starting.value = true\n\n  try {\n    const nav = typeof navigator !== \"undefined\" ? navigator : undefined\n    if (!nav?.mediaDevices?.getUserMedia) {\n      throw new Error(\"Camera access is not available in this environment.\")\n    }\n\n    mediaStream = await nav.mediaDevices.getUserMedia({\n      video: { facingMode: props.facingMode },\n      audio: false,\n    })\n\n    const mod = await import(\"@ericblade/quagga2\")\n    quagga = (mod as unknown as { default: QuaggaHandle }).default\n\n    const target = videoContainerRef.value\n    if (!target) {\n      throw new Error(\"Scanner viewport is not mounted.\")\n    }\n\n    await quagga.init({\n      inputStream: {\n        type: \"LiveStream\",\n        target,\n        constraints: {\n          facingMode: props.facingMode,\n        },\n      },\n      decoder: {\n        readers: [...props.scanFormats],\n      },\n      locate: true,\n    })\n\n    detectedHandler = (result: QuaggaResult): void => {\n      const code = result?.codeResult?.code\n      if (typeof code === \"string\" && code.length > 0) {\n        model.value = code\n        void stop()\n      }\n    }\n    quagga.onDetected(detectedHandler)\n\n    quagga.start()\n    scanning.value = true\n  } catch (e) {\n    scanError.value = e instanceof Error ? e.message : \"Failed to start scanner.\"\n    await stop()\n  } finally {\n    starting.value = false\n  }\n}\n\nasync function toggleScan(): Promise<void> {\n  if (scanning.value) {\n    await stop()\n  } else {\n    await start()\n  }\n}\n\n/**\n * Test hook — lets tests simulate a successful Quagga detection\n * without spinning up a real camera. Not part of the public contract;\n * exposed only via `wrapper.vm` in unit tests.\n */\nfunction __handleDetectedForTest(code: string): void {\n  if (code) {\n    model.value = code\n  }\n}\n\ndefineExpose({ __handleDetectedForTest, start, stop })\n\nif (props.autoStart) {\n  void start()\n}\n\nonBeforeUnmount(() => {\n  void stop()\n})\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n  >\n    <div class=\"flex flex-col gap-2\" :data-element-name=\"name ?? undefined\">\n      <div class=\"flex items-center gap-2\">\n        <Input\n          :id=\"id\"\n          :model-value=\"model ?? undefined\"\n          :name=\"name ?? undefined\"\n          type=\"text\"\n          readonly\n          :disabled=\"disabled\"\n          :required=\"required\"\n          placeholder=\"No code scanned yet\"\n          :data-element-name=\"name ?? undefined\"\n          :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n        />\n        <Button\n          type=\"button\"\n          :variant=\"scanning ? 'destructive' : 'default'\"\n          :disabled=\"disabled || readonly || starting\"\n          data-testid=\"barcode-scan-toggle\"\n          @click=\"toggleScan\"\n        >\n          <Loader2 v-if=\"starting\" class=\"size-4 animate-spin\" />\n          <StopCircle v-else-if=\"scanning\" class=\"size-4\" />\n          <Camera v-else class=\"size-4\" />\n          <span>{{ buttonLabel }}</span>\n        </Button>\n      </div>\n      <div\n        v-show=\"scanning || starting\"\n        ref=\"videoContainerRef\"\n        data-testid=\"barcode-scan-viewport\"\n        class=\"relative h-64 w-full overflow-hidden rounded-md border border-input bg-muted\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/BuildStatus-BYU2VteT.js

@@ -0,0 +1,189 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./badge-4iQG4kuk.js";
+import { n as r } from "./button-BAwcISlK.js";
+import { n as ee, o as i, r as a, s as o } from "./card-DAfWnvro.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, renderList as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, watch as T, withCtx as E } from "vue";
+import { Activity as te, AlertTriangle as ne, Ban as D, CheckCircle2 as O, ChevronDown as k, ChevronRight as A, Clock as j, Loader2 as M, XCircle as N } from "@lucide/vue";
+//#region src/components/compositions/elements/code/BuildStatus.vue?vue&type=script&setup=true&lang.ts
+var P = { class: "flex items-center justify-between gap-2" }, F = { class: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground" }, I = {
+	key: 0,
+	class: "font-mono",
+	"data-testid": "build-status-sha"
+}, L = {
+	key: 1,
+	class: "truncate",
+	"data-testid": "build-status-commit-message"
+}, R = {
+	key: 2,
+	"data-testid": "build-status-triggered-by"
+}, z = {
+	key: 3,
+	class: "flex items-center gap-1",
+	"data-testid": "build-status-duration"
+}, B = {
+	key: 0,
+	class: "text-xs text-destructive",
+	role: "alert",
+	"data-testid": "build-status-parse-error"
+}, V = {
+	key: 0,
+	class: "max-h-80 overflow-auto rounded-md bg-muted p-3 font-mono text-xs leading-snug",
+	"data-testid": "build-status-logs"
+}, H = /* @__PURE__ */ h({
+	__name: "BuildStatus",
+	props: {
+		initial: {},
+		eventStream: {},
+		socket: {},
+		onUnsubscribe: {},
+		showLogs: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Build Status" },
+		name: {},
+		classList: {}
+	},
+	setup(e, { expose: h }) {
+		let H = e, U = b({
+			status: H.initial?.status ?? "pending",
+			startedAt: H.initial?.startedAt,
+			finishedAt: H.initial?.finishedAt,
+			durationMs: H.initial?.durationMs,
+			commitSha: H.initial?.commitSha,
+			commitMessage: H.initial?.commitMessage,
+			triggeredBy: H.initial?.triggeredBy,
+			logs: H.initial?.logs ? [...H.initial.logs] : []
+		}), W = b(!0), G = b(null);
+		T(() => H.initial, (e) => {
+			e && (U.value = {
+				status: e.status,
+				startedAt: e.startedAt,
+				finishedAt: e.finishedAt,
+				durationMs: e.durationMs,
+				commitSha: e.commitSha,
+				commitMessage: e.commitMessage,
+				triggeredBy: e.triggeredBy,
+				logs: e.logs ? [...e.logs] : []
+			});
+		}, { deep: !0 });
+		function K(e) {
+			if (!e || typeof e != "object") return;
+			let t = e;
+			U.value = {
+				status: t.status ?? U.value.status,
+				startedAt: t.startedAt ?? U.value.startedAt,
+				finishedAt: t.finishedAt ?? U.value.finishedAt,
+				durationMs: t.durationMs === void 0 ? U.value.durationMs : t.durationMs,
+				commitSha: t.commitSha ?? U.value.commitSha,
+				commitMessage: t.commitMessage ?? U.value.commitMessage,
+				triggeredBy: t.triggeredBy ?? U.value.triggeredBy,
+				logs: Array.isArray(t.logs) ? t.logs : U.value.logs
+			};
+		}
+		function q(e) {
+			let t = e.data;
+			if (typeof t == "string") try {
+				K(JSON.parse(t)), G.value = null;
+			} catch (e) {
+				G.value = e instanceof Error ? e.message : String(e);
+			}
+			else t && typeof t == "object" && K(t);
+		}
+		let J = null;
+		v(() => {
+			let e = H.eventStream ?? H.socket;
+			if (!e) return;
+			let t = (e) => {
+				q(e);
+			};
+			e.addEventListener("message", t), J = {
+				target: e,
+				handler: t
+			};
+		}), _(() => {
+			J &&= (J.target.removeEventListener("message", J.handler), null), H.onUnsubscribe && H.onUnsubscribe();
+		});
+		let Y = c(() => {
+			switch (U.value.status) {
+				case "running": return "info";
+				case "success": return "success";
+				case "failed": return "destructive";
+				case "cancelled": return "warning";
+				default: return "secondary";
+			}
+		}), X = c(() => {
+			switch (U.value.status) {
+				case "running": return M;
+				case "success": return O;
+				case "failed": return N;
+				case "cancelled": return D;
+				default: return j;
+			}
+		});
+		function re(e) {
+			if (e === void 0 || Number.isNaN(e)) return "";
+			let t = Math.round(e / 1e3);
+			return t < 60 ? `${t}s` : `${Math.floor(t / 60)}m ${t % 60}s`;
+		}
+		let Z = c(() => {
+			let e = U.value.commitSha;
+			return e ? e.length > 7 ? e.slice(0, 7) : e : "";
+		}), Q = c(() => re(U.value.durationMs)), $ = c(() => U.value.status === "running");
+		return h({ applyEvent: K }), (e, c) => (y(), l(w(o), {
+			class: g(w(t)(H.classList)),
+			"data-element-name": H.name ?? void 0,
+			"data-testid": "build-status"
+		}, {
+			default: E(() => [m(w(a), { class: "flex flex-col gap-2 pb-3" }, {
+				default: E(() => [
+					f("div", P, [m(w(ee), { class: "flex items-center gap-2 text-base" }, {
+						default: E(() => [m(w(te), { class: "size-5 text-muted-foreground" }), f("span", null, C(H.label), 1)]),
+						_: 1
+					}), m(w(n), {
+						variant: Y.value,
+						size: "default",
+						class: "capitalize",
+						"data-testid": "build-status-badge"
+					}, {
+						default: E(() => [(y(), l(S(X.value), {
+							class: g(w(t)("size-3.5", $.value ? "animate-spin" : "")),
+							"data-testid": $.value ? "build-status-spinner" : "build-status-icon"
+						}, null, 8, ["class", "data-testid"])), f("span", null, C(U.value.status), 1)]),
+						_: 1
+					}, 8, ["variant"])]),
+					f("div", F, [
+						Z.value ? (y(), d("span", I, C(Z.value), 1)) : u("", !0),
+						U.value.commitMessage ? (y(), d("span", L, C(U.value.commitMessage), 1)) : u("", !0),
+						U.value.triggeredBy ? (y(), d("span", R, " by " + C(U.value.triggeredBy), 1)) : u("", !0),
+						Q.value ? (y(), d("span", z, [m(w(j), { class: "size-3" }), p(" " + C(Q.value), 1)])) : u("", !0)
+					]),
+					G.value ? (y(), d("p", B, [m(w(ne), { class: "inline size-3" }), p(" " + C(G.value), 1)])) : u("", !0)
+				]),
+				_: 1
+			}), H.showLogs && U.value.logs && U.value.logs.length > 0 ? (y(), l(w(i), {
+				key: 0,
+				class: "flex flex-col gap-2 pt-0"
+			}, {
+				default: E(() => [m(w(r), {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					class: "w-fit -ml-2 text-xs",
+					"data-testid": "build-status-logs-toggle",
+					onClick: c[0] ||= (e) => W.value = !W.value
+				}, {
+					default: E(() => [(y(), l(S(W.value ? w(k) : w(A)), { class: "size-4" })), f("span", null, C(W.value ? "Hide logs" : "Show logs") + " (" + C(U.value.logs.length) + ")", 1)]),
+					_: 1
+				}), W.value ? (y(), d("pre", V, [f("code", null, [(y(!0), d(s, null, x(U.value.logs, (e, t) => (y(), d(s, { key: t }, [p(C(e), 1), c[1] ||= f("br", null, null, -1)], 64))), 128))])])) : u("", !0)]),
+				_: 1
+			})) : u("", !0)]),
+			_: 1
+		}, 8, ["class", "data-element-name"]));
+	}
+}), U = /* @__PURE__ */ e({ default: () => W }), W = H;
+//#endregion
+export { U as n, W as t };
+
+//# sourceMappingURL=BuildStatus-BYU2VteT.js.map

package/dist/chunks/BuildStatus-BYU2VteT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuildStatus-BYU2VteT.js","names":[],"sources":["../../src/components/compositions/elements/code/BuildStatus.vue","../../src/components/compositions/elements/code/BuildStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven real-time build status composition. Subscribes to an\n * `EventSource` OR `WebSocket` (whichever is provided) and renders the\n * latest decoded `BuildStatusEvent`. The composition does NOT open or\n * close the underlying stream — the caller owns its lifecycle. The\n * optional `onUnsubscribe` callback fires on unmount for any extra\n * cleanup the caller wants.\n *\n *   <BuildStatus\n *     :initial=\"{ status: 'pending' }\"\n *     :event-stream=\"es\"\n *     :on-unsubscribe=\"() => es.close()\"\n *   />\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport {\n  Activity,\n  AlertTriangle,\n  Ban,\n  CheckCircle2,\n  ChevronDown,\n  ChevronRight,\n  Clock,\n  Loader2,\n  XCircle,\n} from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\nexport type BuildStatusValue =\n  | \"pending\"\n  | \"running\"\n  | \"success\"\n  | \"failed\"\n  | \"cancelled\"\n\nexport interface BuildStatusEvent {\n  status: BuildStatusValue\n  startedAt?: string | Date\n  finishedAt?: string | Date\n  durationMs?: number\n  commitSha?: string\n  commitMessage?: string\n  triggeredBy?: string\n  logs?: string[]\n}\n\ninterface MessageEventLike {\n  data?: unknown\n}\ninterface EventListenerTarget {\n  addEventListener: (type: string, listener: (e: MessageEventLike) => void) => void\n  removeEventListener: (\n    type: string,\n    listener: (e: MessageEventLike) => void,\n  ) => void\n}\n\nexport interface BuildStatusProps {\n  /** Initial status to show before the stream emits. */\n  initial?: BuildStatusEvent\n  /** Optional EventSource to subscribe to (`message` events). */\n  eventStream?: EventListenerTarget\n  /** Optional WebSocket to subscribe to (`message` events). */\n  socket?: EventListenerTarget\n  /** Cleanup callback fired on unmount. The composition does NOT close\n   *  the underlying stream itself — caller owns the lifecycle. */\n  onUnsubscribe?: () => void\n  /** When true, render `logs[]` as a collapsible monospace block. */\n  showLogs?: boolean\n  label?: string\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BuildStatusProps>(), {\n  showLogs: true,\n  label: \"Build Status\",\n})\n\nconst current = ref<BuildStatusEvent>({\n  status: props.initial?.status ?? \"pending\",\n  startedAt: props.initial?.startedAt,\n  finishedAt: props.initial?.finishedAt,\n  durationMs: props.initial?.durationMs,\n  commitSha: props.initial?.commitSha,\n  commitMessage: props.initial?.commitMessage,\n  triggeredBy: props.initial?.triggeredBy,\n  logs: props.initial?.logs ? [...props.initial.logs] : [],\n})\n\nconst logsExpanded = ref<boolean>(true)\nconst parseError = ref<string | null>(null)\n\nwatch(\n  () => props.initial,\n  (next) => {\n    if (!next) {\n      return\n    }\n    current.value = {\n      status: next.status,\n      startedAt: next.startedAt,\n      finishedAt: next.finishedAt,\n      durationMs: next.durationMs,\n      commitSha: next.commitSha,\n      commitMessage: next.commitMessage,\n      triggeredBy: next.triggeredBy,\n      logs: next.logs ? [...next.logs] : [],\n    }\n  },\n  { deep: true },\n)\n\nfunction applyEvent(payload: unknown): void {\n  if (!payload || typeof payload !== \"object\") {\n    return\n  }\n  const next = payload as Partial<BuildStatusEvent>\n  current.value = {\n    status: (next.status as BuildStatusValue) ?? current.value.status,\n    startedAt: next.startedAt ?? current.value.startedAt,\n    finishedAt: next.finishedAt ?? current.value.finishedAt,\n    durationMs:\n      next.durationMs !== undefined ? next.durationMs : current.value.durationMs,\n    commitSha: next.commitSha ?? current.value.commitSha,\n    commitMessage: next.commitMessage ?? current.value.commitMessage,\n    triggeredBy: next.triggeredBy ?? current.value.triggeredBy,\n    logs: Array.isArray(next.logs) ? next.logs : current.value.logs,\n  }\n}\n\nfunction handleMessage(e: MessageEventLike): void {\n  const raw = e.data\n  if (typeof raw === \"string\") {\n    try {\n      applyEvent(JSON.parse(raw))\n      parseError.value = null\n    } catch (err) {\n      parseError.value = err instanceof Error ? err.message : String(err)\n    }\n  } else if (raw && typeof raw === \"object\") {\n    applyEvent(raw)\n  }\n}\n\nlet attached: { target: EventListenerTarget; handler: (e: MessageEventLike) => void } | null = null\n\nonMounted(() => {\n  const target = props.eventStream ?? props.socket\n  if (!target) {\n    return\n  }\n  const handler = (e: MessageEventLike): void => {\n    handleMessage(e)\n  }\n  target.addEventListener(\"message\", handler)\n  attached = { target, handler }\n})\n\nonBeforeUnmount(() => {\n  if (attached) {\n    attached.target.removeEventListener(\"message\", attached.handler)\n    attached = null\n  }\n  if (props.onUnsubscribe) {\n    props.onUnsubscribe()\n  }\n})\n\n// -------- visual helpers ------------------------------------------------\n\nconst statusBadgeVariant = computed<\n  \"secondary\" | \"info\" | \"success\" | \"destructive\" | \"warning\"\n>(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return \"info\"\n    case \"success\":\n      return \"success\"\n    case \"failed\":\n      return \"destructive\"\n    case \"cancelled\":\n      return \"warning\"\n    case \"pending\":\n    default:\n      return \"secondary\"\n  }\n})\n\nconst statusIcon = computed(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return Loader2\n    case \"success\":\n      return CheckCircle2\n    case \"failed\":\n      return XCircle\n    case \"cancelled\":\n      return Ban\n    case \"pending\":\n    default:\n      return Clock\n  }\n})\n\nfunction formatDuration(value: number | undefined): string {\n  if (value === undefined || Number.isNaN(value)) {\n    return \"\"\n  }\n  const sec = Math.round(value / 1000)\n  if (sec < 60) {\n    return `${sec}s`\n  }\n  const m = Math.floor(sec / 60)\n  const s = sec % 60\n  return `${m}m ${s}s`\n}\n\nconst shortSha = computed<string>(() => {\n  const sha = current.value.commitSha\n  if (!sha) {\n    return \"\"\n  }\n  return sha.length > 7 ? sha.slice(0, 7) : sha\n})\n\nconst durationLabel = computed<string>(() =>\n  formatDuration(current.value.durationMs),\n)\n\nconst isRunning = computed<boolean>(() => current.value.status === \"running\")\n\ndefineExpose({ applyEvent })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"build-status\"\n  >\n    <CardHeader class=\"flex flex-col gap-2 pb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <CardTitle class=\"flex items-center gap-2 text-base\">\n          <Activity class=\"size-5 text-muted-foreground\" />\n          <span>{{ props.label }}</span>\n        </CardTitle>\n        <Badge\n          :variant=\"statusBadgeVariant\"\n          size=\"default\"\n          class=\"capitalize\"\n          data-testid=\"build-status-badge\"\n        >\n          <component\n            :is=\"statusIcon\"\n            :class=\"\n              cn(\n                'size-3.5',\n                isRunning ? 'animate-spin' : '',\n              )\n            \"\n            :data-testid=\"\n              isRunning\n                ? 'build-status-spinner'\n                : 'build-status-icon'\n            \"\n          />\n          <span>{{ current.status }}</span>\n        </Badge>\n      </div>\n      <div\n        class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground\"\n      >\n        <span\n          v-if=\"shortSha\"\n          class=\"font-mono\"\n          data-testid=\"build-status-sha\"\n        >\n          {{ shortSha }}\n        </span>\n        <span\n          v-if=\"current.commitMessage\"\n          class=\"truncate\"\n          data-testid=\"build-status-commit-message\"\n        >\n          {{ current.commitMessage }}\n        </span>\n        <span\n          v-if=\"current.triggeredBy\"\n          data-testid=\"build-status-triggered-by\"\n        >\n          by {{ current.triggeredBy }}\n        </span>\n        <span\n          v-if=\"durationLabel\"\n          class=\"flex items-center gap-1\"\n          data-testid=\"build-status-duration\"\n        >\n          <Clock class=\"size-3\" />\n          {{ durationLabel }}\n        </span>\n      </div>\n      <p\n        v-if=\"parseError\"\n        class=\"text-xs text-destructive\"\n        role=\"alert\"\n        data-testid=\"build-status-parse-error\"\n      >\n        <AlertTriangle class=\"inline size-3\" />\n        {{ parseError }}\n      </p>\n    </CardHeader>\n    <CardContent\n      v-if=\"props.showLogs && current.logs && current.logs.length > 0\"\n      class=\"flex flex-col gap-2 pt-0\"\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        class=\"w-fit -ml-2 text-xs\"\n        data-testid=\"build-status-logs-toggle\"\n        @click=\"logsExpanded = !logsExpanded\"\n      >\n        <component\n          :is=\"logsExpanded ? ChevronDown : ChevronRight\"\n          class=\"size-4\"\n        />\n        <span>{{ logsExpanded ? \"Hide logs\" : \"Show logs\" }} ({{ current.logs.length }})</span>\n      </Button>\n      <pre\n        v-if=\"logsExpanded\"\n        class=\"max-h-80 overflow-auto rounded-md bg-muted p-3 font-mono text-xs leading-snug\"\n        data-testid=\"build-status-logs\"\n      ><code><template\n          v-for=\"(line, i) in current.logs\"\n          :key=\"i\"\n        >{{ line }}<br></template></code></pre>\n    </CardContent>\n  </Card>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven real-time build status composition. Subscribes to an\n * `EventSource` OR `WebSocket` (whichever is provided) and renders the\n * latest decoded `BuildStatusEvent`. The composition does NOT open or\n * close the underlying stream — the caller owns its lifecycle. The\n * optional `onUnsubscribe` callback fires on unmount for any extra\n * cleanup the caller wants.\n *\n *   <BuildStatus\n *     :initial=\"{ status: 'pending' }\"\n *     :event-stream=\"es\"\n *     :on-unsubscribe=\"() => es.close()\"\n *   />\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport {\n  Activity,\n  AlertTriangle,\n  Ban,\n  CheckCircle2,\n  ChevronDown,\n  ChevronRight,\n  Clock,\n  Loader2,\n  XCircle,\n} from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\nexport type BuildStatusValue =\n  | \"pending\"\n  | \"running\"\n  | \"success\"\n  | \"failed\"\n  | \"cancelled\"\n\nexport interface BuildStatusEvent {\n  status: BuildStatusValue\n  startedAt?: string | Date\n  finishedAt?: string | Date\n  durationMs?: number\n  commitSha?: string\n  commitMessage?: string\n  triggeredBy?: string\n  logs?: string[]\n}\n\ninterface MessageEventLike {\n  data?: unknown\n}\ninterface EventListenerTarget {\n  addEventListener: (type: string, listener: (e: MessageEventLike) => void) => void\n  removeEventListener: (\n    type: string,\n    listener: (e: MessageEventLike) => void,\n  ) => void\n}\n\nexport interface BuildStatusProps {\n  /** Initial status to show before the stream emits. */\n  initial?: BuildStatusEvent\n  /** Optional EventSource to subscribe to (`message` events). */\n  eventStream?: EventListenerTarget\n  /** Optional WebSocket to subscribe to (`message` events). */\n  socket?: EventListenerTarget\n  /** Cleanup callback fired on unmount. The composition does NOT close\n   *  the underlying stream itself — caller owns the lifecycle. */\n  onUnsubscribe?: () => void\n  /** When true, render `logs[]` as a collapsible monospace block. */\n  showLogs?: boolean\n  label?: string\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BuildStatusProps>(), {\n  showLogs: true,\n  label: \"Build Status\",\n})\n\nconst current = ref<BuildStatusEvent>({\n  status: props.initial?.status ?? \"pending\",\n  startedAt: props.initial?.startedAt,\n  finishedAt: props.initial?.finishedAt,\n  durationMs: props.initial?.durationMs,\n  commitSha: props.initial?.commitSha,\n  commitMessage: props.initial?.commitMessage,\n  triggeredBy: props.initial?.triggeredBy,\n  logs: props.initial?.logs ? [...props.initial.logs] : [],\n})\n\nconst logsExpanded = ref<boolean>(true)\nconst parseError = ref<string | null>(null)\n\nwatch(\n  () => props.initial,\n  (next) => {\n    if (!next) {\n      return\n    }\n    current.value = {\n      status: next.status,\n      startedAt: next.startedAt,\n      finishedAt: next.finishedAt,\n      durationMs: next.durationMs,\n      commitSha: next.commitSha,\n      commitMessage: next.commitMessage,\n      triggeredBy: next.triggeredBy,\n      logs: next.logs ? [...next.logs] : [],\n    }\n  },\n  { deep: true },\n)\n\nfunction applyEvent(payload: unknown): void {\n  if (!payload || typeof payload !== \"object\") {\n    return\n  }\n  const next = payload as Partial<BuildStatusEvent>\n  current.value = {\n    status: (next.status as BuildStatusValue) ?? current.value.status,\n    startedAt: next.startedAt ?? current.value.startedAt,\n    finishedAt: next.finishedAt ?? current.value.finishedAt,\n    durationMs:\n      next.durationMs !== undefined ? next.durationMs : current.value.durationMs,\n    commitSha: next.commitSha ?? current.value.commitSha,\n    commitMessage: next.commitMessage ?? current.value.commitMessage,\n    triggeredBy: next.triggeredBy ?? current.value.triggeredBy,\n    logs: Array.isArray(next.logs) ? next.logs : current.value.logs,\n  }\n}\n\nfunction handleMessage(e: MessageEventLike): void {\n  const raw = e.data\n  if (typeof raw === \"string\") {\n    try {\n      applyEvent(JSON.parse(raw))\n      parseError.value = null\n    } catch (err) {\n      parseError.value = err instanceof Error ? err.message : String(err)\n    }\n  } else if (raw && typeof raw === \"object\") {\n    applyEvent(raw)\n  }\n}\n\nlet attached: { target: EventListenerTarget; handler: (e: MessageEventLike) => void } | null = null\n\nonMounted(() => {\n  const target = props.eventStream ?? props.socket\n  if (!target) {\n    return\n  }\n  const handler = (e: MessageEventLike): void => {\n    handleMessage(e)\n  }\n  target.addEventListener(\"message\", handler)\n  attached = { target, handler }\n})\n\nonBeforeUnmount(() => {\n  if (attached) {\n    attached.target.removeEventListener(\"message\", attached.handler)\n    attached = null\n  }\n  if (props.onUnsubscribe) {\n    props.onUnsubscribe()\n  }\n})\n\n// -------- visual helpers ------------------------------------------------\n\nconst statusBadgeVariant = computed<\n  \"secondary\" | \"info\" | \"success\" | \"destructive\" | \"warning\"\n>(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return \"info\"\n    case \"success\":\n      return \"success\"\n    case \"failed\":\n      return \"destructive\"\n    case \"cancelled\":\n      return \"warning\"\n    case \"pending\":\n    default:\n      return \"secondary\"\n  }\n})\n\nconst statusIcon = computed(() => {\n  switch (current.value.status) {\n    case \"running\":\n      return Loader2\n    case \"success\":\n      return CheckCircle2\n    case \"failed\":\n      return XCircle\n    case \"cancelled\":\n      return Ban\n    case \"pending\":\n    default:\n      return Clock\n  }\n})\n\nfunction formatDuration(value: number | undefined): string {\n  if (value === undefined || Number.isNaN(value)) {\n    return \"\"\n  }\n  const sec = Math.round(value / 1000)\n  if (sec < 60) {\n    return `${sec}s`\n  }\n  const m = Math.floor(sec / 60)\n  const s = sec % 60\n  return `${m}m ${s}s`\n}\n\nconst shortSha = computed<string>(() => {\n  const sha = current.value.commitSha\n  if (!sha) {\n    return \"\"\n  }\n  return sha.length > 7 ? sha.slice(0, 7) : sha\n})\n\nconst durationLabel = computed<string>(() =>\n  formatDuration(current.value.durationMs),\n)\n\nconst isRunning = computed<boolean>(() => current.value.status === \"running\")\n\ndefineExpose({ applyEvent })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"build-status\"\n  >\n    <CardHeader class=\"flex flex-col gap-2 pb-3\">\n      <div class=\"flex items-center justify-between gap-2\">\n        <CardTitle class=\"flex items-center gap-2 text-base\">\n          <Activity class=\"size-5 text-muted-foreground\" />\n          <span>{{ props.label }}</span>\n        </CardTitle>\n        <Badge\n          :variant=\"statusBadgeVariant\"\n          size=\"default\"\n          class=\"capitalize\"\n          data-testid=\"build-status-badge\"\n        >\n          <component\n            :is=\"statusIcon\"\n            :class=\"\n              cn(\n                'size-3.5',\n                isRunning ? 'animate-spin' : '',\n              )\n            \"\n            :data-testid=\"\n              isRunning\n                ? 'build-status-spinner'\n                : 'build-status-icon'\n            \"\n          />\n          <span>{{ current.status }}</span>\n        </Badge>\n      </div>\n      <div\n        class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground\"\n      >\n        <span\n          v-if=\"shortSha\"\n          class=\"font-mono\"\n          data-testid=\"build-status-sha\"\n        >\n          {{ shortSha }}\n        </span>\n        <span\n          v-if=\"current.commitMessage\"\n          class=\"truncate\"\n          data-testid=\"build-status-commit-message\"\n        >\n          {{ current.commitMessage }}\n        </span>\n        <span\n          v-if=\"current.triggeredBy\"\n          data-testid=\"build-status-triggered-by\"\n        >\n          by {{ current.triggeredBy }}\n        </span>\n        <span\n          v-if=\"durationLabel\"\n          class=\"flex items-center gap-1\"\n          data-testid=\"build-status-duration\"\n        >\n          <Clock class=\"size-3\" />\n          {{ durationLabel }}\n        </span>\n      </div>\n      <p\n        v-if=\"parseError\"\n        class=\"text-xs text-destructive\"\n        role=\"alert\"\n        data-testid=\"build-status-parse-error\"\n      >\n        <AlertTriangle class=\"inline size-3\" />\n        {{ parseError }}\n      </p>\n    </CardHeader>\n    <CardContent\n      v-if=\"props.showLogs && current.logs && current.logs.length > 0\"\n      class=\"flex flex-col gap-2 pt-0\"\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        class=\"w-fit -ml-2 text-xs\"\n        data-testid=\"build-status-logs-toggle\"\n        @click=\"logsExpanded = !logsExpanded\"\n      >\n        <component\n          :is=\"logsExpanded ? ChevronDown : ChevronRight\"\n          class=\"size-4\"\n        />\n        <span>{{ logsExpanded ? \"Hide logs\" : \"Show logs\" }} ({{ current.logs.length }})</span>\n      </Button>\n      <pre\n        v-if=\"logsExpanded\"\n        class=\"max-h-80 overflow-auto rounded-md bg-muted p-3 font-mono text-xs leading-snug\"\n        data-testid=\"build-status-logs\"\n      ><code><template\n          v-for=\"(line, i) in current.logs\"\n          :key=\"i\"\n        >{{ line }}<br></template></code></pre>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/chunks/ButtonAction-hCdoVUTw.js

@@ -0,0 +1,131 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { a as n, i as r, n as i, o as a, r as o, u as s } from "./dialog-BoGlhUrd.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, ref as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import * as C from "@lucide/vue";
+//#region src/components/compositions/elements/action/ButtonAction.vue?vue&type=script&setup=true&lang.ts
+var w = { key: 1 }, T = /* @__PURE__ */ h({
+	__name: "ButtonAction",
+	props: {
+		label: {},
+		variant: { default: "default" },
+		size: { default: "md" },
+		icon: {},
+		href: {},
+		target: { default: "_self" },
+		emit: {},
+		confirm: { type: Boolean },
+		confirmMessage: {},
+		disabled: { type: Boolean },
+		block: { type: Boolean },
+		name: {},
+		id: {}
+	},
+	emits: ["click", "action"],
+	setup(e, { emit: h }) {
+		let T = e, E = h, D = {
+			sm: "sm",
+			md: "default",
+			lg: "lg"
+		}, O = l(() => D[T.size] ?? "default"), k = C;
+		function A(e) {
+			if (e) return k[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? k[e];
+		}
+		let j = l(() => A(T.icon)), M = v(!1);
+		function N() {
+			if (T.href) {
+				T.target === "_blank" ? window.open(T.href, "_blank") : window.location.assign(T.href);
+				return;
+			}
+			T.emit && E("action", { name: T.emit });
+		}
+		function P(e) {
+			if (E("click", e), T.confirm) {
+				e.preventDefault(), M.value = !0;
+				return;
+			}
+			if (!T.href && T.emit) {
+				e.preventDefault(), N();
+				return;
+			}
+			!T.href && !T.emit && e.preventDefault();
+		}
+		function F() {
+			M.value = !1, N();
+		}
+		function I() {
+			M.value = !1;
+		}
+		let L = l(() => T.href && !T.confirm ? "a" : "button");
+		return (l, h) => (_(), f(c, null, [m(x(t), {
+			id: e.id,
+			as: L.value,
+			variant: e.variant,
+			size: O.value,
+			disabled: e.disabled,
+			class: g(e.block ? "w-full" : ""),
+			"data-action-name": E ?? e.label,
+			"data-element-name": e.name ?? void 0,
+			href: L.value === "a" ? e.href : void 0,
+			target: L.value === "a" ? e.target : void 0,
+			onClick: P
+		}, {
+			default: S(() => [j.value ? (_(), u(y(j.value), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : d("", !0), e.label ? (_(), f("span", w, b(e.label), 1)) : d("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"as",
+			"variant",
+			"size",
+			"disabled",
+			"class",
+			"data-action-name",
+			"data-element-name",
+			"href",
+			"target"
+		]), e.confirm ? (_(), u(x(s), {
+			key: 0,
+			open: M.value,
+			"onUpdate:open": h[0] ||= (e) => M.value = e
+		}, {
+			default: S(() => [m(x(a), null, {
+				default: S(() => [m(x(o), null, {
+					default: S(() => [m(x(i), null, {
+						default: S(() => [...h[1] ||= [p("Confirm action", -1)]]),
+						_: 1
+					}), m(x(n), null, {
+						default: S(() => [p(b(e.confirmMessage ?? "Are you sure you want to continue?"), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), m(x(r), null, {
+					default: S(() => [m(x(t), {
+						variant: "outline",
+						type: "button",
+						onClick: I
+					}, {
+						default: S(() => [...h[2] ||= [p(" Cancel ", -1)]]),
+						_: 1
+					}), m(x(t), {
+						variant: "default",
+						type: "button",
+						onClick: F
+					}, {
+						default: S(() => [...h[3] ||= [p(" Confirm ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["open"])) : d("", !0)], 64));
+	}
+}), E = /* @__PURE__ */ e({ default: () => D }), D = T;
+//#endregion
+export { E as n, D as t };
+
+//# sourceMappingURL=ButtonAction-hCdoVUTw.js.map

package/dist/chunks/ButtonAction-hCdoVUTw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction-hCdoVUTw.js","names":[],"sources":["../../src/components/compositions/elements/action/ButtonAction.vue","../../src/components/compositions/elements/action/ButtonAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button composition. Composes the shadcn `Button`\n * primitive with click / href / emit / confirm behaviour.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <ButtonAction label=\"Save\" variant=\"default\" @click=\"save\" />\n *   <ButtonAction label=\"Docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <ButtonAction label=\"Delete\" variant=\"destructive\" confirm @action=\"onDelete\" />\n *\n * Action elements do NOT use FieldFrame — they're not form inputs and\n * don't need label/help/error chrome.\n */\nimport { computed, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nexport type ButtonActionVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"outline\"\n  | \"ghost\"\n  | \"link\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n\nexport type ButtonActionSize = \"sm\" | \"md\" | \"lg\"\n\nexport interface ButtonActionProps {\n  label?: string\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set and confirm is false. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  /** Show a confirmation dialog before firing. */\n  confirm?: boolean\n  /** Confirmation message displayed in the dialog. */\n  confirmMessage?: string\n  disabled?: boolean\n  /** Render full width. */\n  block?: boolean\n  /** HTML name attribute. */\n  name?: string\n  /** HTML id attribute. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<ButtonActionProps>(), {\n  variant: \"default\",\n  size: \"md\",\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\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 confirmOpen = ref(false)\n\nfunction performAction(): void {\n  if (props.href) {\n    if (props.target === \"_blank\") {\n      window.open(props.href, \"_blank\")\n    } else {\n      window.location.assign(props.href)\n    }\n    return\n  }\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.confirm) {\n    event.preventDefault()\n    confirmOpen.value = true\n    return\n  }\n  if (!props.href && props.emit) {\n    event.preventDefault()\n    performAction()\n    return\n  }\n  if (!props.href && !props.emit) {\n    event.preventDefault()\n  }\n}\n\nfunction confirmYes(): void {\n  confirmOpen.value = false\n  performAction()\n}\n\nfunction confirmNo(): void {\n  confirmOpen.value = false\n}\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href && !props.confirm ? \"a\" : \"button\",\n)\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    :variant=\"variant\"\n    :size=\"mappedSize\"\n    :disabled=\"disabled\"\n    :class=\"block ? 'w-full' : ''\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : 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\n  <Dialog v-if=\"confirm\" v-model:open=\"confirmOpen\">\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Confirm action</DialogTitle>\n        <DialogDescription>\n          {{ confirmMessage ?? \"Are you sure you want to continue?\" }}\n        </DialogDescription>\n      </DialogHeader>\n      <DialogFooter>\n        <Button variant=\"outline\" type=\"button\" @click=\"confirmNo\">\n          Cancel\n        </Button>\n        <Button variant=\"default\" type=\"button\" @click=\"confirmYes\">\n          Confirm\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven button composition. Composes the shadcn `Button`\n * primitive with click / href / emit / confirm behaviour.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <ButtonAction label=\"Save\" variant=\"default\" @click=\"save\" />\n *   <ButtonAction label=\"Docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <ButtonAction label=\"Delete\" variant=\"destructive\" confirm @action=\"onDelete\" />\n *\n * Action elements do NOT use FieldFrame — they're not form inputs and\n * don't need label/help/error chrome.\n */\nimport { computed, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nexport type ButtonActionVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"outline\"\n  | \"ghost\"\n  | \"link\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n\nexport type ButtonActionSize = \"sm\" | \"md\" | \"lg\"\n\nexport interface ButtonActionProps {\n  label?: string\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set and confirm is false. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  /** Show a confirmation dialog before firing. */\n  confirm?: boolean\n  /** Confirmation message displayed in the dialog. */\n  confirmMessage?: string\n  disabled?: boolean\n  /** Render full width. */\n  block?: boolean\n  /** HTML name attribute. */\n  name?: string\n  /** HTML id attribute. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<ButtonActionProps>(), {\n  variant: \"default\",\n  size: \"md\",\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\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 confirmOpen = ref(false)\n\nfunction performAction(): void {\n  if (props.href) {\n    if (props.target === \"_blank\") {\n      window.open(props.href, \"_blank\")\n    } else {\n      window.location.assign(props.href)\n    }\n    return\n  }\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.confirm) {\n    event.preventDefault()\n    confirmOpen.value = true\n    return\n  }\n  if (!props.href && props.emit) {\n    event.preventDefault()\n    performAction()\n    return\n  }\n  if (!props.href && !props.emit) {\n    event.preventDefault()\n  }\n}\n\nfunction confirmYes(): void {\n  confirmOpen.value = false\n  performAction()\n}\n\nfunction confirmNo(): void {\n  confirmOpen.value = false\n}\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href && !props.confirm ? \"a\" : \"button\",\n)\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    :variant=\"variant\"\n    :size=\"mappedSize\"\n    :disabled=\"disabled\"\n    :class=\"block ? 'w-full' : ''\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : 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\n  <Dialog v-if=\"confirm\" v-model:open=\"confirmOpen\">\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Confirm action</DialogTitle>\n        <DialogDescription>\n          {{ confirmMessage ?? \"Are you sure you want to continue?\" }}\n        </DialogDescription>\n      </DialogHeader>\n      <DialogFooter>\n        <Button variant=\"outline\" type=\"button\" @click=\"confirmNo\">\n          Cancel\n        </Button>\n        <Button variant=\"default\" type=\"button\" @click=\"confirmYes\">\n          Confirm\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":"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"}