@astryx-vue/core 0.2.2 → 0.2.4

package/dist/Selector-DE2IEFML.js

@@ -1,468 +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-CiKncNSH.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { t as _sfc_main$1 } from "./BottomSheet-Dg95HB1s.js";
-import { t as _sfc_main$2 } from "./Field-8zRxzDHE.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, withCtx, 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 = { class: "astryx-selector-sheet-title" };
-const _hoisted_4 = ["data-placement"];
-const _hoisted_5 = {
-	key: 0,
-	class: "astryx-selector-search"
-};
-const _hoisted_6 = [
-	"id",
-	"aria-label",
-	"placeholder",
-	"value"
-];
-const _hoisted_7 = {
-	key: 1,
-	class: "astryx-selector-options"
-};
-const _hoisted_8 = {
-	key: 0,
-	class: "astryx-selector-section",
-	role: "presentation"
-};
-const _hoisted_9 = [
-	"id",
-	"aria-selected",
-	"aria-disabled",
-	"onClick",
-	"onKeydown"
-];
-const _hoisted_10 = { class: "astryx-selector-option-label" };
-const _hoisted_11 = {
-	key: 1,
-	class: "astryx-selector-option-description"
-};
-const _hoisted_12 = {
-	key: 2,
-	class: "astryx-selector-empty"
-};
-const _hoisted_13 = [
-	"id",
-	"name",
-	"value",
-	"aria-label"
-];
-const _hoisted_14 = ["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: {},
-		statusVariant: { default: "attached" },
-		size: { default: "md" },
-		variant: { default: "default" },
-		presentation: { default: "popover" },
-		searchable: {
-			type: Boolean,
-			default: false
-		},
-		searchPlaceholder: {},
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		clearLabel: {},
-		emptyText: {},
-		label: {},
-		isLabelHidden: {
-			type: Boolean,
-			default: false
-		},
-		description: {},
-		width: {},
-		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 sheetSlot = useTemplateRef("sheetSlot");
-		const isSheet = computed(() => props.presentation === "bottom-sheet");
-		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
-		const isEnabled = computed(() => !props.disabled);
-		const isSearchable = computed(() => props.searchable);
-		function isSection(entry) {
-			return typeof entry === "object" && entry !== null && "type" in entry && entry.type === "section";
-		}
-		function asOption(entry) {
-			if (typeof entry === "string") return {
-				value: entry,
-				label: entry
-			};
-			return entry;
-		}
-		const normalizedEntries = computed(() => props.options.map((entry) => {
-			if (isSection(entry)) return {
-				...entry,
-				options: entry.options.map(asOption)
-			};
-			return asOption(entry);
-		}));
-		const flatOptions = computed(() => normalizedEntries.value.flatMap((entry) => isSection(entry) ? entry.options : [entry]));
-		const comboboxOptions = computed(() => flatOptions.value.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 sheetOpen = computed({
-			get: () => isSheet.value && combobox.isOpen.value,
-			set: (open) => {
-				if (!open && combobox.isOpen.value) combobox.close();
-			}
-		});
-		const popoverOpen = computed(() => combobox.isOpen.value && !isSheet.value);
-		const listboxTarget = computed(() => isSheet.value && sheetSlot.value ? sheetSlot.value : "body");
-		const { position } = usePositionedLayer({
-			anchor: fieldRef,
-			layer: listboxRef,
-			isOpen: popoverOpen,
-			placement: computed(() => "below"),
-			alignment: computed(() => "start"),
-			gap: 4
-		});
-		useDismiss({
-			container: listboxRef,
-			trigger: fieldRef,
-			isEnabled: popoverOpen,
-			enableEscape: ref(true),
-			onDismiss: () => {
-				combobox.close();
-			}
-		});
-		const selectedOption = computed(() => {
-			if (props.modelValue == null) return null;
-			return flatOptions.value.find((opt) => opt.value === props.modelValue) ?? null;
-		});
-		const fieldLabel = computed(() => props.label || resolvedPlaceholder.value);
-		const hideLabel = computed(() => props.isLabelHidden || !props.label);
-		const statusType = computed(() => {
-			const status = props.status;
-			if (status == null || status === "default") return "default";
-			if (typeof status === "string") return status;
-			return status.type;
-		});
-		const fieldStatus = computed(() => {
-			const status = props.status;
-			if (status && typeof status === "object") return status;
-			if (!props.statusMessage || statusType.value === "default") return void 0;
-			return {
-				type: statusType.value,
-				message: props.statusMessage
-			};
-		});
-		const displayRows = computed(() => {
-			const indexByValue = new Map(combobox.filteredOptions.value.map((option, index) => [option.value, index]));
-			const rows = [];
-			for (const entry of normalizedEntries.value) {
-				if (isSection(entry)) {
-					const children = entry.options.filter((option) => indexByValue.has(option.value));
-					if (children.length === 0) continue;
-					rows.push({
-						kind: "section",
-						title: entry.title
-					});
-					for (const option of children) rows.push({
-						kind: "option",
-						option,
-						index: indexByValue.get(option.value)
-					});
-					continue;
-				}
-				if (!indexByValue.has(entry.value)) continue;
-				rows.push({
-					kind: "option",
-					option: entry,
-					index: indexByValue.get(entry.value)
-				});
-			}
-			return rows;
-		});
-		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(() => isSheet.value ? void 0 : {
-			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(), createBlock(_sfc_main$2, {
-				class: normalizeClass(["astryx-selector", [
-					`size-${props.size}`,
-					`status-${statusType.value}`,
-					`variant-${props.variant}`
-				]]),
-				label: fieldLabel.value,
-				"input-id": selectorId,
-				description: props.description,
-				"is-label-hidden": hideLabel.value,
-				"is-disabled": props.disabled,
-				status: fieldStatus.value,
-				"status-variant": props.statusVariant,
-				width: props.width
-			}, {
-				default: withCtx(() => [
-					createElementVNode("div", {
-						ref_key: "fieldRef",
-						ref: fieldRef,
-						class: normalizeClass(["astryx-selector-field", {
-							"is-open": unref(combobox).isOpen.value,
-							"is-disabled": props.disabled,
-							"is-ghost": props.variant === "ghost"
-						}])
-					}, [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,
-						"is-rich": unref(slots).selected
-					}]) }, [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[1] || (_cache[1] = 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[2] || (_cache[2] = [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),
-					isSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
-						key: 0,
-						"is-open": sheetOpen.value,
-						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => sheetOpen.value = $event),
-						height: "hug",
-						label: sheetLabel.value,
-						padding: 2
-					}, {
-						default: withCtx(() => [createElementVNode("div", {
-							ref_key: "sheetSlot",
-							ref: sheetSlot,
-							class: "astryx-selector-sheet"
-						}, [createElementVNode("div", _hoisted_3, toDisplayString(sheetLabel.value), 1)], 512)]),
-						_: 1
-					}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
-					(openBlock(), createBlock(Teleport, { to: listboxTarget.value }, [withDirectives(createElementVNode("div", {
-						id: listboxId,
-						ref_key: "listboxRef",
-						ref: listboxRef,
-						role: "listbox",
-						class: normalizeClass(["astryx-selector-listbox", { "is-sheet": isSheet.value }]),
-						"data-placement": isSheet.value ? void 0 : unref(position).placement,
-						style: normalizeStyle(listboxStyle.value),
-						tabindex: "-1"
-					}, [props.searchable ? (openBlock(), createElementBlock("div", _hoisted_5, [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_6)])) : createCommentVNode("v-if", true), !isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, rowIndex) => {
-						return openBlock(), createElementBlock(Fragment, { key: row.kind === "section" ? `section-${rowIndex}` : row.option?.value }, [row.kind === "section" ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(row.title), 1)) : row.option && row.index != null ? (openBlock(), createElementBlock("div", {
-							key: 1,
-							id: getOptionId(row.index),
-							role: "option",
-							tabindex: "0",
-							class: normalizeClass(["astryx-selector-option", {
-								"is-active": row.index === unref(combobox).activeIndex.value,
-								"is-selected": row.option.value === props.modelValue,
-								"is-disabled": row.option.disabled
-							}]),
-							"aria-selected": row.option.value === props.modelValue,
-							"aria-disabled": row.option.disabled,
-							onClick: ($event) => onOptionClick(row.option),
-							onKeydown: [withKeys(($event) => onOptionClick(row.option), ["enter"]), withKeys(withModifiers(($event) => onOptionClick(row.option), ["prevent"]), ["space"])]
-						}, [unref(slots).option ? renderSlot(_ctx.$slots, "option", {
-							option: row.option,
-							isActive: row.index === unref(combobox).activeIndex.value,
-							isSelected: row.option.value === props.modelValue
-						}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-							row.option.icon ? (openBlock(), createElementBlock("span", {
-								key: 0,
-								class: normalizeClass(["astryx-selector-option-icon", row.option.icon]),
-								"aria-hidden": "true"
-							}, null, 2)) : createCommentVNode("v-if", true),
-							createElementVNode("span", _hoisted_10, toDisplayString(row.option.label), 1),
-							row.option.description ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)
-						], 64))], 42, _hoisted_9)) : createCommentVNode("v-if", true)], 64);
-					}), 128))])) : (openBlock(), createElementBlock("div", _hoisted_12, [unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)], 64))]))], 14, _hoisted_4), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
-					props.name ? (openBlock(), createElementBlock("select", {
-						key: 1,
-						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[3] || (_cache[3] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
-						return openBlock(), createElementBlock("option", {
-							key: option.value,
-							value: option.value
-						}, toDisplayString(option.label), 9, _hoisted_14);
-					}), 128))], 8, _hoisted_13)) : createCommentVNode("v-if", true)
-				]),
-				_: 3
-			}, 8, [
-				"class",
-				"label",
-				"description",
-				"is-label-hidden",
-				"is-disabled",
-				"status",
-				"status-variant",
-				"width"
-			]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/Text-BHVghsWo.js

@@ -1,53 +0,0 @@
-import { computed, createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
-import "../styles/text.css";
-//#region src/Text/Text.vue
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	__name: "Text",
-	props: {
-		type: { default: "body" },
-		size: {},
-		color: { default: "primary" },
-		weight: {},
-		textWrap: {},
-		wordBreak: {},
-		hasStrikethrough: { type: Boolean },
-		hasTabularNumbers: { type: Boolean },
-		display: { default: "inline" },
-		as: { default: "span" },
-		maxLines: { default: 0 }
-	},
-	setup(__props) {
-		const props = __props;
-		const weight = computed(() => props.weight === "normal" ? "regular" : props.weight);
-		const isBlock = computed(() => props.display === "block" || props.maxLines > 0);
-		const classes = computed(() => [
-			"astryx-text",
-			`astryx-text--type-${props.type}`,
-			props.size && `astryx-text--size-${props.size}`,
-			`astryx-text--color-${props.color}`,
-			weight.value && `astryx-text--weight-${weight.value}`,
-			props.textWrap && `astryx-text--wrap-${props.textWrap}`,
-			props.wordBreak && `astryx-text--word-${props.wordBreak}`,
-			props.hasStrikethrough && "astryx-text--strike",
-			props.hasTabularNumbers && "astryx-text--tabular",
-			isBlock.value && "astryx-text--block",
-			props.maxLines === 1 && "astryx-text--truncate-single",
-			props.maxLines > 1 && "astryx-text--truncate-multi"
-		]);
-		const style = computed(() => {
-			if (props.maxLines > 1) return { WebkitLineClamp: props.maxLines };
-			return {};
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
-				class: normalizeClass(["astryx-text", classes.value]),
-				style: normalizeStyle(style.value)
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["class", "style"]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };