@astryx-vue/core 0.2.5 → 0.3.0

package/dist/HoverCard-EhbWaGOW.js

@@ -1,443 +0,0 @@
-import { r as isFocusable } from "./focus-CpficIgf.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
-import "../styles/hover-card.css";
-//#region src/HoverCard/HoverCard.vue
-const _hoisted_1 = [
-	"role",
-	"aria-label",
-	"data-placement"
-];
-const _hoisted_2 = { class: "astryx-hover-card__content" };
-const GAP = 4;
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxHoverCard",
-	inheritAttrs: false,
-	__name: "HoverCard",
-	props: {
-		content: { default: "" },
-		placement: { default: "above" },
-		alignment: { default: "center" },
-		delay: { default: 300 },
-		hideDelay: { default: 200 },
-		focusTrigger: { default: "auto" },
-		touchTrigger: { default: "auto" },
-		isEnabled: {
-			type: Boolean,
-			default: true
-		},
-		label: { default: void 0 },
-		hasHoverIndication: {
-			type: [String, Boolean],
-			default: "auto"
-		},
-		isOpen: {
-			type: Boolean,
-			default: void 0
-		},
-		isDefaultOpen: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ["openChange"],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const TOUCH_POINTER_TYPES = /* @__PURE__ */ new Set(["touch", "pen"]);
-		const EXPANDABLE_ROLES = /* @__PURE__ */ new Set([
-			"application",
-			"button",
-			"checkbox",
-			"columnheader",
-			"combobox",
-			"gridcell",
-			"link",
-			"listbox",
-			"menuitem",
-			"menuitemcheckbox",
-			"menuitemradio",
-			"row",
-			"rowheader",
-			"switch",
-			"tab",
-			"treeitem"
-		]);
-		const BUTTON_INPUT_TYPES = /* @__PURE__ */ new Set([
-			"button",
-			"submit",
-			"reset",
-			"image"
-		]);
-		const ACTION_ROLES = /* @__PURE__ */ new Set([
-			"button",
-			"checkbox",
-			"combobox",
-			"link",
-			"menuitem",
-			"menuitemcheckbox",
-			"menuitemradio",
-			"option",
-			"radio",
-			"searchbox",
-			"slider",
-			"spinbutton",
-			"switch",
-			"tab",
-			"textbox"
-		]);
-		function supportsAriaExpanded(element) {
-			const explicit = element.getAttribute("role")?.trim().split(/\s+/)[0];
-			if (explicit) return EXPANDABLE_ROLES.has(explicit);
-			switch (element.tagName) {
-				case "BUTTON":
-				case "SUMMARY": return true;
-				case "A":
-				case "AREA": return element.hasAttribute("href");
-				case "INPUT": return BUTTON_INPUT_TYPES.has(element.type?.toLowerCase());
-				case "SELECT": return true;
-				default: return false;
-			}
-		}
-		function isEditable(element) {
-			if (element.isContentEditable === true) return true;
-			const attribute = element.getAttribute("contenteditable");
-			return attribute != null && attribute !== "false";
-		}
-		function isActionTrigger(element) {
-			const role = element.getAttribute("role");
-			if (role != null && role !== "") return ACTION_ROLES.has(role);
-			switch (element.tagName) {
-				case "BUTTON":
-				case "INPUT":
-				case "LABEL":
-				case "SELECT":
-				case "SUMMARY":
-				case "TEXTAREA": return true;
-				case "A":
-				case "AREA": return element.hasAttribute("href");
-				default: return isEditable(element);
-			}
-		}
-		function mergeIds(...ids) {
-			const kept = ids.filter(Boolean);
-			return kept.length > 0 ? kept.join(" ") : void 0;
-		}
-		let lastModality = "keyboard";
-		function onModalityPointerDown() {
-			lastModality = "pointer";
-		}
-		function onModalityKeyDown(event) {
-			if (event.metaKey || event.altKey || event.ctrlKey) return;
-			lastModality = "keyboard";
-		}
-		const cardId = `astryx-hover-card-${useId()}`;
-		const wrapperRef = ref(null);
-		const surfaceRef = ref(null);
-		const triggerRef = ref(null);
-		const isVisible = ref(false);
-		const isTextTrigger = ref(false);
-		const isControlled = computed(() => props.isOpen !== void 0);
-		const isDialog = computed(() => props.label != null && props.label !== "");
-		const showIndication = computed(() => props.hasHoverIndication === true || props.hasHoverIndication === "auto" && isTextTrigger.value);
-		const { position, detach: detachPosition } = usePositionedLayer({
-			anchor: triggerRef,
-			layer: surfaceRef,
-			isOpen: isVisible,
-			placement: computed(() => props.placement),
-			alignment: computed(() => props.alignment),
-			gap: GAP
-		});
-		const surfaceStyle = computed(() => ({
-			top: `${position.value.top}px`,
-			left: `${position.value.left}px`
-		}));
-		const element = computed(() => surfaceRef.value);
-		let trigger = null;
-		let describedByBefore = null;
-		let haspopupBefore = null;
-		let controlsBefore = null;
-		let expandedBefore = null;
-		let canExpand = false;
-		let isHoveringContent = false;
-		let isTouchPointer = false;
-		let isEscapeDismissing = false;
-		let showTimer;
-		let hideTimer;
-		function clearTimers() {
-			clearTimeout(showTimer);
-			clearTimeout(hideTimer);
-			showTimer = void 0;
-			hideTimer = void 0;
-		}
-		function setOpen(next) {
-			if (isVisible.value === next) return;
-			isVisible.value = next;
-			emit("openChange", next);
-		}
-		function showNow() {
-			clearTimers();
-			if (!props.isEnabled) return;
-			setOpen(true);
-		}
-		function hideNow() {
-			clearTimers();
-			isHoveringContent = false;
-			if (isControlled.value) return;
-			setOpen(false);
-		}
-		function scheduleShow() {
-			if (!props.isEnabled || isControlled.value) return;
-			clearTimers();
-			showTimer = setTimeout(() => {
-				showTimer = void 0;
-				setOpen(true);
-			}, props.delay);
-		}
-		function scheduleHide() {
-			if (isControlled.value) return;
-			clearTimers();
-			hideTimer = setTimeout(() => {
-				hideTimer = void 0;
-				if (!isHoveringContent) setOpen(false);
-			}, props.hideDelay);
-		}
-		function onPointerEnter(event) {
-			isTouchPointer = event.pointerType === "touch";
-		}
-		function onMouseEnter() {
-			if (isTouchPointer) return;
-			scheduleShow();
-		}
-		function onMouseLeave() {
-			if (isTouchPointer) return;
-			scheduleHide();
-		}
-		function onPointerDown(event) {
-			const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
-			isTouchPointer = isTouch;
-			if (!isTouch || isControlled.value) return;
-			if ((props.touchTrigger === "auto" ? trigger != null && isActionTrigger(trigger) ? "none" : "tap" : props.touchTrigger) === "none" || !props.isEnabled) {
-				hideNow();
-				return;
-			}
-			if (isVisible.value) hideNow();
-			else showNow();
-		}
-		function onFocusIn() {
-			if (!props.isEnabled) return;
-			if (isTouchPointer && lastModality === "pointer") return;
-			if (isEscapeDismissing) {
-				isEscapeDismissing = false;
-				return;
-			}
-			showNow();
-		}
-		function onFocusOut(event) {
-			const related = event.relatedTarget;
-			if (related && surfaceRef.value?.contains(related)) return;
-			scheduleHide();
-		}
-		function onContentMouseEnter() {
-			if (isTouchPointer) return;
-			isHoveringContent = true;
-			clearTimers();
-		}
-		function onContentMouseLeave() {
-			if (isTouchPointer) return;
-			isHoveringContent = false;
-			scheduleHide();
-		}
-		function onContentFocusOut(event) {
-			const related = event.relatedTarget;
-			if (related && surfaceRef.value?.contains(related)) return;
-			if (related && triggerRef.value?.contains(related)) return;
-			scheduleHide();
-		}
-		function onDocumentKeydown(event) {
-			if (event.key !== "Escape" || !isVisible.value) return;
-			clearTimers();
-			isHoveringContent = false;
-			if (isControlled.value) {
-				emit("openChange", false);
-				return;
-			}
-			const hadFocus = surfaceRef.value?.contains(document.activeElement) ?? false;
-			setOpen(false);
-			if (hadFocus && triggerRef.value) {
-				isEscapeDismissing = true;
-				triggerRef.value.focus();
-			}
-		}
-		function onDocumentPointerDown(event) {
-			if (!TOUCH_POINTER_TYPES.has(event.pointerType) || !isVisible.value || isControlled.value) return;
-			const target = event.target;
-			if (triggerRef.value?.contains(target) || surfaceRef.value?.contains(target)) return;
-			hideNow();
-		}
-		function applyTriggerAttributes() {
-			const active = triggerRef.value;
-			if (!active) return;
-			if (isDialog.value) {
-				active.setAttribute("aria-haspopup", "dialog");
-				if (isVisible.value) active.setAttribute("aria-controls", mergeIds(controlsBefore, cardId) ?? "");
-				else if (controlsBefore) active.setAttribute("aria-controls", controlsBefore);
-				else active.removeAttribute("aria-controls");
-				if (canExpand) active.setAttribute("aria-expanded", String(isVisible.value));
-				else if (expandedBefore) active.setAttribute("aria-expanded", expandedBefore);
-				else active.removeAttribute("aria-expanded");
-				return;
-			}
-			active.setAttribute("aria-describedby", mergeIds(describedByBefore, cardId) ?? "");
-		}
-		function restoreTriggerAttributes() {
-			const active = triggerRef.value;
-			if (!active) return;
-			if (describedByBefore) active.setAttribute("aria-describedby", describedByBefore);
-			else active.removeAttribute("aria-describedby");
-			if (haspopupBefore) active.setAttribute("aria-haspopup", haspopupBefore);
-			else active.removeAttribute("aria-haspopup");
-			if (controlsBefore) active.setAttribute("aria-controls", controlsBefore);
-			else active.removeAttribute("aria-controls");
-			if (expandedBefore) active.setAttribute("aria-expanded", expandedBefore);
-			else active.removeAttribute("aria-expanded");
-		}
-		function shouldListenFocus(target) {
-			return props.focusTrigger === "always" || props.focusTrigger === "auto" && isFocusable(target);
-		}
-		function resolveTrigger() {
-			const wrapper = wrapperRef.value;
-			if (!wrapper) return null;
-			const child = wrapper.firstElementChild;
-			isTextTrigger.value = child == null && (wrapper.textContent ?? "").trim() !== "";
-			if (child) return child;
-			if (isTextTrigger.value) {
-				wrapper.tabIndex = 0;
-				return wrapper;
-			}
-			return null;
-		}
-		function bindTrigger() {
-			const next = resolveTrigger();
-			if (next === trigger) return;
-			unbindTrigger();
-			trigger = next;
-			triggerRef.value = next;
-			if (!next) return;
-			describedByBefore = next.getAttribute("aria-describedby");
-			haspopupBefore = next.getAttribute("aria-haspopup");
-			controlsBefore = next.getAttribute("aria-controls");
-			expandedBefore = next.getAttribute("aria-expanded");
-			canExpand = supportsAriaExpanded(next);
-			next.addEventListener("pointerenter", onPointerEnter);
-			next.addEventListener("mouseenter", onMouseEnter);
-			next.addEventListener("mouseleave", onMouseLeave);
-			next.addEventListener("pointerdown", onPointerDown);
-			if (shouldListenFocus(next)) {
-				next.addEventListener("focusin", onFocusIn);
-				next.addEventListener("focusout", onFocusOut);
-			}
-			applyTriggerAttributes();
-		}
-		function unbindTrigger() {
-			if (!trigger) return;
-			trigger.removeEventListener("pointerenter", onPointerEnter);
-			trigger.removeEventListener("mouseenter", onMouseEnter);
-			trigger.removeEventListener("mouseleave", onMouseLeave);
-			trigger.removeEventListener("pointerdown", onPointerDown);
-			trigger.removeEventListener("focusin", onFocusIn);
-			trigger.removeEventListener("focusout", onFocusOut);
-			restoreTriggerAttributes();
-			trigger = null;
-			triggerRef.value = null;
-			describedByBefore = null;
-			haspopupBefore = null;
-			controlsBefore = null;
-			expandedBefore = null;
-			canExpand = false;
-		}
-		function show() {
-			showNow();
-		}
-		function hide() {
-			clearTimers();
-			isHoveringContent = false;
-			setOpen(false);
-		}
-		__expose({
-			element,
-			show,
-			hide
-		});
-		watch(isVisible, (visible) => {
-			applyTriggerAttributes();
-			if (visible) {
-				document.addEventListener("keydown", onDocumentKeydown);
-				document.addEventListener("pointerdown", onDocumentPointerDown, true);
-				return;
-			}
-			document.removeEventListener("keydown", onDocumentKeydown);
-			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
-		});
-		watch(() => props.isOpen, (open) => {
-			clearTimers();
-			if (open === void 0) return;
-			setOpen(open);
-		});
-		watch(() => props.isEnabled, (enabled) => {
-			if (!enabled) hideNow();
-		});
-		onMounted(() => {
-			document.addEventListener("pointerdown", onModalityPointerDown, {
-				capture: true,
-				passive: true
-			});
-			document.addEventListener("keydown", onModalityKeyDown, {
-				capture: true,
-				passive: true
-			});
-			bindTrigger();
-			if (props.isOpen !== void 0) isVisible.value = props.isOpen;
-			else if (props.isDefaultOpen) setOpen(true);
-		});
-		onUpdated(bindTrigger);
-		onBeforeUnmount(() => {
-			clearTimers();
-			unbindTrigger();
-			detachPosition();
-			document.removeEventListener("pointerdown", onModalityPointerDown, true);
-			document.removeEventListener("keydown", onModalityKeyDown, true);
-			document.removeEventListener("keydown", onDocumentKeydown);
-			document.removeEventListener("pointerdown", onDocumentPointerDown, true);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", mergeProps({
-				ref_key: "wrapperRef",
-				ref: wrapperRef
-			}, _ctx.$attrs, { class: ["astryx-hover-card__trigger", {
-				"astryx-hover-card__trigger--text": isTextTrigger.value,
-				"astryx-hover-card__trigger--indicated": isTextTrigger.value && showIndication.value
-			}] }), [renderSlot(_ctx.$slots, "default")], 16), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
-				name: "astryx-hover-card",
-				persisted: ""
-			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					id: cardId,
-					ref_key: "surfaceRef",
-					ref: surfaceRef,
-					class: "astryx-hover-card",
-					role: isDialog.value ? "dialog" : "group",
-					"aria-label": isDialog.value ? __props.label : void 0,
-					"data-placement": unref(position).placement,
-					style: normalizeStyle(surfaceStyle.value),
-					onMouseenter: onContentMouseEnter,
-					onMouseleave: onContentMouseLeave,
-					onFocusout: onContentFocusOut
-				}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.content), 1)])])], 44, _hoisted_1), [[vShow, isVisible.value]])]),
-				_: 3
-			})]))], 64);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/NumberInput-B4IL3s_8.js

@@ -1,210 +0,0 @@
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as useNumberField } from "./useNumberField-DL-Radsp.js";
-import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, useId, withCtx } from "vue";
-import "../styles/number-input.css";
-//#region src/NumberInput/NumberInput.vue
-const _hoisted_1 = ["data-status"];
-const _hoisted_2 = [
-	"value",
-	"placeholder",
-	"disabled",
-	"aria-label",
-	"aria-labelledby",
-	"aria-describedby",
-	"aria-invalid",
-	"title"
-];
-const _hoisted_3 = {
-	key: 0,
-	class: "astryx-number-input-units"
-};
-const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = { class: "astryx-number-input-buttons" };
-const _hoisted_6 = ["disabled", "aria-label"];
-const _hoisted_7 = ["disabled", "aria-label"];
-const _hoisted_8 = ["name", "value"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxNumberInput",
-	__name: "NumberInput",
-	props: {
-		modelValue: { default: null },
-		placeholder: { default: "" },
-		min: {},
-		max: {},
-		step: { default: 1 },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledReason: {},
-		size: { default: "md" },
-		label: {},
-		description: {},
-		isLabelHidden: { type: Boolean },
-		units: {},
-		clearable: { type: Boolean },
-		status: {},
-		name: {}
-	},
-	emits: ["update:modelValue", "change"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const PassThrough = defineComponent({
-			name: "NumberInputPassThrough",
-			setup(_, { slots }) {
-				return () => slots.default?.({});
-			}
-		});
-		const inputId = `astryx-number-input-${useId()}`;
-		const messages = useAstryxMessages();
-		const incrementLabel = computed(() => messages.value.numberInput.increment(props.label));
-		const decrementLabel = computed(() => messages.value.numberInput.decrement(props.label));
-		const inputValue = ref("");
-		const modelValueRef = computed({
-			get: () => props.modelValue,
-			set: (value) => {
-				emit("update:modelValue", value);
-				emit("change", value);
-			}
-		});
-		const numberField = useNumberField({
-			value: modelValueRef,
-			min: props.min,
-			max: props.max,
-			step: props.step,
-			disabled: computed(() => props.disabled),
-			onChange: (value) => {
-				modelValueRef.value = value;
-				inputValue.value = value === null ? "" : String(value);
-			}
-		});
-		function onInput(event) {
-			const target = event.target;
-			const value = target.value.trim();
-			if (value === "") {
-				numberField.setValue(null);
-				return;
-			}
-			const parsed = Number.parseFloat(value);
-			if (!Number.isNaN(parsed)) numberField.setValue(parsed);
-			else target.value = inputValue.value;
-		}
-		function onKeyDown(event) {
-			numberField.onKeyDown(event);
-		}
-		function resolvedStatus(status) {
-			if (status == null || status === "default") return void 0;
-			if (typeof status === "string") return { type: status };
-			return status;
-		}
-		const statusValue = computed(() => resolvedStatus(props.status));
-		const statusType = computed(() => statusValue.value?.type);
-		const showsField = computed(() => {
-			if (props.isLabelHidden && !props.description && !statusValue.value?.message) return false;
-			return Boolean(props.label || props.description || statusValue.value?.message);
-		});
-		const shell = computed(() => showsField.value ? _sfc_main$2 : PassThrough);
-		const fieldBindings = computed(() => showsField.value ? {
-			label: props.label ?? "",
-			inputId,
-			description: props.description,
-			isLabelHidden: props.isLabelHidden || !props.label,
-			isDisabled: props.disabled,
-			status: statusValue.value
-		} : {});
-		function clearValue() {
-			numberField.setValue(null);
-			inputValue.value = "";
-		}
-		function syncDisplayValue() {
-			inputValue.value = props.modelValue === null ? "" : String(props.modelValue);
-		}
-		syncDisplayValue();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(shell.value), normalizeProps(guardReactiveProps(fieldBindings.value)), {
-				default: withCtx((field) => [createElementVNode("div", {
-					class: normalizeClass(["astryx-number-input", `size-${props.size}`]),
-					"data-status": statusType.value
-				}, [
-					createElementVNode("input", {
-						id: inputId,
-						type: "text",
-						inputmode: "decimal",
-						class: "astryx-number-input-field",
-						value: inputValue.value,
-						placeholder: props.placeholder,
-						disabled: props.disabled,
-						"aria-label": showsField.value ? void 0 : props.label,
-						"aria-labelledby": showsField.value ? field?.labelId : void 0,
-						"aria-describedby": field?.describedBy,
-						"aria-invalid": statusType.value === "error" ? "true" : void 0,
-						title: props.disabledReason,
-						onInput,
-						onKeydown: onKeyDown
-					}, null, 40, _hoisted_2),
-					props.units ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(props.units), 1)) : createCommentVNode("v-if", true),
-					props.clearable && props.modelValue != null && !props.disabled ? (openBlock(), createElementBlock("button", {
-						key: 1,
-						type: "button",
-						class: "astryx-number-input-clear",
-						"aria-label": props.label ? `Clear ${props.label}` : "Clear",
-						onClick: clearValue
-					}, [createVNode(_sfc_main$1, { type: "clear" })], 8, _hoisted_4)) : createCommentVNode("v-if", true),
-					createElementVNode("div", _hoisted_5, [createElementVNode("button", {
-						type: "button",
-						class: "astryx-number-input-button increment",
-						disabled: props.disabled,
-						"aria-label": incrementLabel.value,
-						tabindex: "-1",
-						onClick: _cache[0] || (_cache[0] = (...args) => unref(numberField).increment && unref(numberField).increment(...args))
-					}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
-						class: "astryx-number-input-chevron",
-						viewBox: "0 0 12 8",
-						width: "12",
-						height: "8",
-						"aria-hidden": "true",
-						fill: "none"
-					}, [createElementVNode("path", {
-						d: "M1.5 1.75 6 6.25 10.5 1.75",
-						stroke: "currentColor",
-						"stroke-width": "1.5",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round"
-					})], -1)])], 8, _hoisted_6), createElementVNode("button", {
-						type: "button",
-						class: "astryx-number-input-button decrement",
-						disabled: props.disabled,
-						"aria-label": decrementLabel.value,
-						tabindex: "-1",
-						onClick: _cache[1] || (_cache[1] = (...args) => unref(numberField).decrement && unref(numberField).decrement(...args))
-					}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
-						class: "astryx-number-input-chevron",
-						viewBox: "0 0 12 8",
-						width: "12",
-						height: "8",
-						"aria-hidden": "true",
-						fill: "none"
-					}, [createElementVNode("path", {
-						d: "M1.5 1.75 6 6.25 10.5 1.75",
-						stroke: "currentColor",
-						"stroke-width": "1.5",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round"
-					})], -1)])], 8, _hoisted_7)]),
-					props.name ? (openBlock(), createElementBlock("input", {
-						key: 2,
-						type: "hidden",
-						name: props.name,
-						value: props.modelValue ?? ""
-					}, null, 8, _hoisted_8)) : createCommentVNode("v-if", true)
-				], 10, _hoisted_1)]),
-				_: 1
-			}, 16);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };