import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { n as Badge_default } from "./badge-BbQrSqE-.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
//#region src/components/compositions/elements/option-select/PillSelectOption.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var PillSelectOption_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "PillSelectOption",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		options: { default: () => [] },
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven multi-select pill composition. Each option becomes a
		* toggleable Badge with multi-select semantics.
		*
		*   <PillSelectOption v-model="tags" :options="[...]" label="Tags" />
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		function normaliseOption(opt) {
			if (typeof opt === "string") return {
				label: opt,
				value: opt,
				disabled: false
			};
			return {
				label: opt.label,
				value: String(opt.value),
				disabled: Boolean(opt.disabled)
			};
		}
		const normalised = computed(() => (props.options ?? []).map(normaliseOption));
		const selected = computed(() => {
			const v = model.value;
			if (!v) return [];
			if (Array.isArray(v)) return v.map((x) => String(x));
			return [String(v)];
		});
		function isActive(val) {
			return selected.value.includes(val);
		}
		function togglePill(opt) {
			if (opt.disabled || props.disabled || props.readonly) return;
			const current = selected.value;
			if (current.includes(opt.value)) model.value = current.filter((v) => v !== opt.value);
			else model.value = [...current, opt.value];
		}
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				"help-text": __props.helpText,
				errors: __props.errors
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: "flex flex-wrap gap-2",
					"data-element-name": __props.name ?? void 0
				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalised.value, (opt) => {
					return openBlock(), createBlock(unref(Badge_default), {
						key: opt.value,
						as: "button",
						type: "button",
						variant: isActive(opt.value) ? "default" : "outline",
						size: "lg",
						class: normalizeClass(["cursor-pointer transition-colors", opt.disabled || __props.disabled || __props.readonly ? "pointer-events-none opacity-50" : ""]),
						"data-active": isActive(opt.value),
						"aria-pressed": isActive(opt.value),
						onClick: ($event) => togglePill(opt)
					}, {
						default: withCtx(() => [createTextVNode(toDisplayString(opt.label), 1)]),
						_: 2
					}, 1032, [
						"variant",
						"class",
						"data-active",
						"aria-pressed",
						"onClick"
					]);
				}), 128))], 8, _hoisted_1)]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/option-select/PillSelectOption.vue
var PillSelectOption_exports = /* @__PURE__ */ __exportAll({ default: () => PillSelectOption_default });
var PillSelectOption_default = PillSelectOption_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { PillSelectOption_exports as n, PillSelectOption_default as t };

//# sourceMappingURL=PillSelectOption-CVBGqNxU.js.map