@astryx-vue/core 0.2.0 → 0.2.2

package/dist/Selector-Da-2BO3q.js

@@ -1,325 +0,0 @@
-import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
-import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
-import { a as useAstryxMessages } from "./context-Dbo22sck.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withDirectives, withKeys, withModifiers } from "vue";
-import "../styles/visually-hidden-utility.css";
-import "../styles/selector.css";
-//#region src/Selector/Selector.vue
-const _hoisted_1 = [
-	"disabled",
-	"aria-expanded",
-	"aria-label",
-	"aria-activedescendant",
-	"title"
-];
-const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = ["data-placement"];
-const _hoisted_4 = {
-	key: 0,
-	class: "astryx-selector-search"
-};
-const _hoisted_5 = [
-	"id",
-	"aria-label",
-	"placeholder",
-	"value"
-];
-const _hoisted_6 = {
-	key: 1,
-	class: "astryx-selector-options"
-};
-const _hoisted_7 = [
-	"id",
-	"aria-selected",
-	"aria-disabled",
-	"onClick",
-	"onKeydown"
-];
-const _hoisted_8 = { class: "astryx-selector-option-label" };
-const _hoisted_9 = {
-	key: 0,
-	class: "astryx-selector-option-description"
-};
-const _hoisted_10 = {
-	key: 2,
-	class: "astryx-selector-empty"
-};
-const _hoisted_11 = [
-	"id",
-	"name",
-	"value",
-	"aria-label"
-];
-const _hoisted_12 = ["value"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxSelector",
-	inheritAttrs: false,
-	__name: "Selector",
-	props: {
-		modelValue: { default: null },
-		options: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledReason: {},
-		status: { default: "default" },
-		statusMessage: {},
-		size: { default: "md" },
-		searchable: {
-			type: Boolean,
-			default: false
-		},
-		searchPlaceholder: {},
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		clearLabel: {},
-		emptyText: {},
-		label: {},
-		name: {}
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"search"
-	],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const slots = useSlots();
-		const selectorId = `astryx-selector-${useId()}`;
-		const listboxId = `${selectorId}-listbox`;
-		const messages = useAstryxMessages();
-		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
-		const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.selector.search);
-		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clear);
-		const resolvedEmptyText = computed(() => props.emptyText ?? messages.value.selector.empty);
-		const fieldRef = useTemplateRef("fieldRef");
-		const listboxRef = useTemplateRef("listboxRef");
-		const searchInputRef = useTemplateRef("searchInputRef");
-		const isEnabled = computed(() => !props.disabled);
-		const isSearchable = computed(() => props.searchable);
-		const comboboxOptions = computed(() => props.options.map((opt) => ({
-			value: opt.value,
-			label: opt.label,
-			disabled: opt.disabled ?? false
-		})));
-		const modelValueRef = computed({
-			get: () => props.modelValue,
-			set: (value) => {
-				emit("update:modelValue", value);
-				emit("change", value);
-			}
-		});
-		const combobox = useCombobox({
-			options: comboboxOptions,
-			modelValue: modelValueRef,
-			isEnabled,
-			isSearchable,
-			onChange: (value) => {
-				modelValueRef.value = value;
-			},
-			onOpenChange: (isOpen) => {
-				if (isOpen && props.searchable) nextTick(() => {
-					searchInputRef.value?.focus();
-				});
-			}
-		});
-		const { position } = usePositionedLayer({
-			anchor: fieldRef,
-			layer: listboxRef,
-			isOpen: combobox.isOpen,
-			placement: computed(() => "below"),
-			alignment: computed(() => "start"),
-			gap: 4
-		});
-		useDismiss({
-			container: listboxRef,
-			trigger: fieldRef,
-			isEnabled: combobox.isOpen,
-			enableEscape: ref(true),
-			onDismiss: () => {
-				combobox.close();
-			}
-		});
-		const selectedOption = computed(() => {
-			if (props.modelValue == null) return null;
-			return props.options.find((opt) => opt.value === props.modelValue) ?? null;
-		});
-		const displayText = computed(() => {
-			return selectedOption.value?.label ?? resolvedPlaceholder.value;
-		});
-		const isEmpty = computed(() => {
-			return combobox.filteredOptions.value.length === 0;
-		});
-		function onTriggerClick() {
-			if (isEnabled.value) combobox.toggle();
-		}
-		function onTriggerKeyDown(event) {
-			combobox.onKeyDown(event);
-		}
-		function onOptionClick(option) {
-			if (!option.disabled) combobox.select(option.value);
-		}
-		function onClear(event) {
-			event.stopPropagation();
-			modelValueRef.value = null;
-			combobox.close();
-		}
-		function onSearchInput(event) {
-			const target = event.target;
-			combobox.setSearchQuery(target.value);
-			emit("search", target.value);
-		}
-		function getOptionId(index) {
-			return `${listboxId}-option-${index}`;
-		}
-		const anchorWidth = ref(0);
-		function syncAnchorWidth() {
-			anchorWidth.value = fieldRef.value?.getBoundingClientRect().width ?? 0;
-		}
-		const listboxStyle = computed(() => ({
-			top: `${position.value.top}px`,
-			left: `${position.value.left}px`,
-			minWidth: anchorWidth.value > 0 ? `${anchorWidth.value}px` : void 0
-		}));
-		watch(combobox.isOpen, (open) => {
-			if (open) syncAnchorWidth();
-		}, { flush: "pre" });
-		onMounted(syncAnchorWidth);
-		watch(() => combobox.activeIndex.value, (index) => {
-			if (index >= 0 && combobox.isOpen.value) nextTick(() => {
-				const listbox = listboxRef.value;
-				const optionEl = listbox?.querySelector(`#${getOptionId(index)}`);
-				if (!listbox || !optionEl) return;
-				const listboxRect = listbox.getBoundingClientRect();
-				const optionRect = optionEl.getBoundingClientRect();
-				if (optionRect.top < listboxRect.top) listbox.scrollTop -= listboxRect.top - optionRect.top;
-				else if (optionRect.bottom > listboxRect.bottom) listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
-			});
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["astryx-selector", [`size-${props.size}`, `status-${props.status}`]]) }, [
-				createElementVNode("div", {
-					ref_key: "fieldRef",
-					ref: fieldRef,
-					class: normalizeClass(["astryx-selector-field", {
-						"is-open": unref(combobox).isOpen.value,
-						"is-disabled": props.disabled
-					}])
-				}, [createElementVNode("button", {
-					id: selectorId,
-					type: "button",
-					class: normalizeClass(["astryx-selector-trigger", {
-						"is-open": unref(combobox).isOpen.value,
-						"is-disabled": props.disabled
-					}]),
-					disabled: props.disabled,
-					"aria-haspopup": "listbox",
-					"aria-expanded": unref(combobox).isOpen.value,
-					"aria-controls": listboxId,
-					"aria-label": props.label,
-					"aria-activedescendant": unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
-					title: props.disabledReason,
-					onClick: onTriggerClick,
-					onKeydown: onTriggerKeyDown
-				}, [createElementVNode("span", { class: normalizeClass(["astryx-selector-value", { "is-placeholder": !selectedOption.value }]) }, [unref(slots).selected ? renderSlot(_ctx.$slots, "selected", { option: selectedOption.value }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(displayText.value), 1)], 64))], 2), _cache[0] || (_cache[0] = createElementVNode("span", {
-					class: "astryx-selector-icon",
-					"aria-hidden": "true"
-				}, [createElementVNode("svg", {
-					width: "16",
-					height: "16",
-					viewBox: "0 0 16 16",
-					fill: "none"
-				}, [createElementVNode("path", {
-					d: "M4 6L8 10L12 6",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				})])], -1))], 42, _hoisted_1), props.clearable && selectedOption.value ? (openBlock(), createElementBlock("button", {
-					key: 0,
-					type: "button",
-					class: "astryx-selector-clear",
-					"aria-label": resolvedClearLabel.value,
-					onClick: onClear
-				}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
-					width: "16",
-					height: "16",
-					viewBox: "0 0 16 16",
-					fill: "none"
-				}, [createElementVNode("path", {
-					d: "M12 4L4 12M4 4L12 12",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					"stroke-linecap": "round"
-				})], -1)])], 8, _hoisted_2)) : createCommentVNode("v-if", true)], 2),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
-					id: listboxId,
-					ref_key: "listboxRef",
-					ref: listboxRef,
-					role: "listbox",
-					class: "astryx-selector-listbox",
-					"data-placement": unref(position).placement,
-					style: normalizeStyle(listboxStyle.value),
-					tabindex: "-1"
-				}, [props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("input", {
-					id: `${selectorId}-search`,
-					ref_key: "searchInputRef",
-					ref: searchInputRef,
-					type: "text",
-					class: "astryx-selector-search-input",
-					"aria-label": resolvedSearchPlaceholder.value,
-					placeholder: resolvedSearchPlaceholder.value,
-					value: unref(combobox).searchQuery.value,
-					onInput: onSearchInput
-				}, null, 40, _hoisted_5)])) : createCommentVNode("v-if", true), !isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(combobox).filteredOptions.value, (option, index) => {
-					return openBlock(), createElementBlock("div", {
-						id: getOptionId(index),
-						key: option.value,
-						role: "option",
-						tabindex: "0",
-						class: normalizeClass(["astryx-selector-option", {
-							"is-active": index === unref(combobox).activeIndex.value,
-							"is-selected": option.value === props.modelValue,
-							"is-disabled": option.disabled
-						}]),
-						"aria-selected": option.value === props.modelValue,
-						"aria-disabled": option.disabled,
-						onClick: ($event) => onOptionClick(option),
-						onKeydown: [withKeys(($event) => onOptionClick(option), ["enter"]), withKeys(withModifiers(($event) => onOptionClick(option), ["prevent"]), ["space"])]
-					}, [unref(slots).option ? renderSlot(_ctx.$slots, "option", {
-						option,
-						isActive: index === unref(combobox).activeIndex.value,
-						isSelected: option.value === props.modelValue
-					}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_8, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(option.description), 1)) : createCommentVNode("v-if", true)], 64))], 42, _hoisted_7);
-				}), 128))])) : (openBlock(), createElementBlock("div", _hoisted_10, [unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)], 64))]))], 12, _hoisted_3), [[vShow, unref(combobox).isOpen.value]])])),
-				props.name ? (openBlock(), createElementBlock("select", {
-					key: 0,
-					id: `${selectorId}-hidden-select`,
-					name: props.name,
-					value: props.modelValue ?? "",
-					"aria-label": props.label || resolvedPlaceholder.value,
-					tabindex: "-1",
-					style: {
-						"position": "absolute",
-						"left": "-9999px",
-						"width": "1px",
-						"height": "1px"
-					}
-				}, [_cache[2] || (_cache[2] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (option) => {
-					return openBlock(), createElementBlock("option", {
-						key: option.value,
-						value: option.value
-					}, toDisplayString(option.label), 9, _hoisted_12);
-				}), 128))], 8, _hoisted_11)) : createCommentVNode("v-if", true)
-			], 2);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };