@astryx-vue/core 0.2.5 → 0.3.0

package/dist/Popover-D7zqpFwU.js

@@ -1,215 +0,0 @@
-import { t as _sfc_main$1 } from "./Button-DrqeomlE.js";
-import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
-import { n as getFocusables, t as focusElement } from "./focus-CpficIgf.js";
-import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-BvMdXVX9.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, unref, useId, vShow, watch, withDirectives } from "vue";
-import "../styles/popover.css";
-//#region src/Popover/Popover.vue
-const _hoisted_1 = [
-	"role",
-	"aria-modal",
-	"aria-label",
-	"tabindex",
-	"data-placement"
-];
-const _hoisted_2 = { class: "astryx-popover__body" };
-const _hoisted_3 = {
-	key: 0,
-	class: "astryx-popover__close"
-};
-const GAP = 4;
-const DEFAULT_MAX_WIDTH = 320;
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxPopover",
-	__name: "Popover",
-	props: {
-		placement: { default: "below" },
-		alignment: { default: "start" },
-		isOpen: {
-			type: Boolean,
-			default: void 0
-		},
-		isEnabled: {
-			type: Boolean,
-			default: true
-		},
-		width: { default: void 0 },
-		padding: { default: 3 },
-		label: { default: void 0 },
-		role: { default: "dialog" },
-		isModal: {
-			type: Boolean,
-			default: true
-		},
-		hasCloseButton: {
-			type: Boolean,
-			default: true
-		},
-		closeButtonLabel: { default: "Close" },
-		hasAutoFocus: {
-			type: Boolean,
-			default: true
-		},
-		hasLightDismiss: {
-			type: Boolean,
-			default: true
-		},
-		hasEscapeDismiss: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: ["openChange"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const popoverId = `astryx-popover-${useId()}`;
-		const anchorRef = ref(null);
-		const surfaceRef = ref(null);
-		const isOpenState = ref(false);
-		const anchorWidth = ref(0);
-		const { position, detach: detachPosition } = usePositionedLayer({
-			anchor: anchorRef,
-			layer: surfaceRef,
-			isOpen: isOpenState,
-			placement: computed(() => props.placement),
-			alignment: computed(() => props.alignment),
-			gap: GAP
-		});
-		const isModalDialog = computed(() => props.role === "dialog" && props.isModal);
-		useFocusTrap({
-			container: surfaceRef,
-			isEnabled: computed(() => isOpenState.value && isModalDialog.value)
-		});
-		useRestoreFocus({
-			isEnabled: computed(() => props.role === "dialog"),
-			shouldRestore: isOpenState
-		});
-		useDismiss({
-			container: surfaceRef,
-			trigger: anchorRef,
-			isEnabled: computed(() => isOpenState.value && props.hasLightDismiss),
-			enableEscape: computed(() => props.hasEscapeDismiss),
-			onDismiss: () => setOpen(false)
-		});
-		const surfaceRole = computed(() => props.role === "dialog" ? "dialog" : void 0);
-		const surfaceAriaModal = computed(() => props.role === "dialog" && props.isModal ? "true" : void 0);
-		const surfaceAriaLabel = computed(() => props.role === "dialog" ? props.label : void 0);
-		const surfaceTabIndex = computed(() => props.role === "dialog" ? -1 : void 0);
-		const surfaceStyle = computed(() => {
-			const style = {
-				"--_popover-padding": `var(--astryx-spacing-${String(props.padding).replace(".", "-")})`,
-				"top": `${position.value.top}px`,
-				"left": `${position.value.left}px`
-			};
-			if (props.width != null) style.width = typeof props.width === "number" ? `${props.width}px` : props.width;
-			else {
-				style.minWidth = `min(${anchorWidth.value}px, ${DEFAULT_MAX_WIDTH}px)`;
-				style.maxWidth = `min(${DEFAULT_MAX_WIDTH}px, calc(100vw - 16px))`;
-			}
-			return style;
-		});
-		let boundButton = null;
-		function setOpen(next) {
-			if (isOpenState.value === next) return;
-			isOpenState.value = next;
-			emit("openChange", next);
-		}
-		function findTriggerButton(element) {
-			if (!element) return null;
-			if (element.matches("button, [role=\"button\"]")) return element;
-			return element.querySelector("button, [role=\"button\"]");
-		}
-		function syncTriggerAttributes() {
-			if (!boundButton) return;
-			boundButton.setAttribute("aria-haspopup", props.role === "dialog" ? "dialog" : "true");
-			boundButton.setAttribute("aria-expanded", String(isOpenState.value));
-			boundButton.setAttribute("aria-controls", popoverId);
-		}
-		function onTriggerClick() {
-			if (!props.isEnabled) return;
-			setOpen(!isOpenState.value);
-		}
-		function onTriggerKeydown(event) {
-			if (event.key !== "Enter" && event.key !== " ") return;
-			event.preventDefault();
-			onTriggerClick();
-		}
-		function bindButton() {
-			const next = findTriggerButton(anchorRef.value);
-			if (next === boundButton) return;
-			unbindButton();
-			boundButton = next;
-			if (!next) return;
-			next.addEventListener("click", onTriggerClick);
-			if (next.tagName !== "BUTTON" && next.getAttribute("role") === "button") next.addEventListener("keydown", onTriggerKeydown);
-			syncTriggerAttributes();
-		}
-		function unbindButton() {
-			if (!boundButton) return;
-			boundButton.removeEventListener("click", onTriggerClick);
-			boundButton.removeEventListener("keydown", onTriggerKeydown);
-			boundButton.removeAttribute("aria-haspopup");
-			boundButton.removeAttribute("aria-expanded");
-			boundButton.removeAttribute("aria-controls");
-			boundButton = null;
-		}
-		function focusInitialTarget() {
-			const surface = surfaceRef.value;
-			if (!surface) return;
-			const first = getFocusables(surface).find((element) => !element.closest(".astryx-popover__close"));
-			if (first && focusElement(first)) return;
-			if (props.role === "dialog") focusElement(surface);
-		}
-		watch(isOpenState, (open) => {
-			syncTriggerAttributes();
-			if (open) {
-				anchorWidth.value = anchorRef.value?.getBoundingClientRect().width ?? 0;
-				if (props.hasAutoFocus && props.role === "dialog") nextTick(focusInitialTarget);
-				return;
-			}
-			if ((surfaceRef.value?.contains(typeof document !== "undefined" ? document.activeElement : null) ?? false) && boundButton) nextTick(() => focusElement(boundButton));
-		});
-		watch(() => props.isOpen, (open) => {
-			if (open === void 0 || open === isOpenState.value) return;
-			isOpenState.value = open;
-		});
-		watch(() => props.isEnabled, (enabled) => {
-			if (!enabled && isOpenState.value) setOpen(false);
-		});
-		onMounted(() => {
-			bindButton();
-			if (props.isOpen !== void 0) isOpenState.value = props.isOpen;
-		});
-		onUpdated(bindButton);
-		onBeforeUnmount(() => {
-			unbindButton();
-			detachPosition();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
-				ref_key: "anchorRef",
-				ref: anchorRef,
-				class: "astryx-popover-trigger"
-			}, [renderSlot(_ctx.$slots, "default")], 512), (openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
-				id: popoverId,
-				ref_key: "surfaceRef",
-				ref: surfaceRef,
-				class: "astryx-popover",
-				role: surfaceRole.value,
-				"aria-modal": surfaceAriaModal.value,
-				"aria-label": surfaceAriaLabel.value,
-				tabindex: surfaceTabIndex.value,
-				"data-placement": unref(position).placement,
-				style: normalizeStyle(surfaceStyle.value)
-			}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "content")]), __props.hasCloseButton ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(_sfc_main$1), {
-				variant: "secondary",
-				label: __props.closeButtonLabel,
-				onClick: _cache[0] || (_cache[0] = ($event) => setOpen(false))
-			}, null, 8, ["label"])])) : createCommentVNode("v-if", true)], 12, _hoisted_1), [[vShow, isOpenState.value]])]))], 64);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/StatusDot-CaoIapp4.js

@@ -1,27 +0,0 @@
-import { createElementBlock, defineComponent, normalizeClass, openBlock } from "vue";
-import "../styles/status-dot.css";
-//#region src/StatusDot/StatusDot.vue
-const _hoisted_1 = ["data-variant", "aria-label"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	__name: "StatusDot",
-	props: {
-		variant: { default: "neutral" },
-		label: {},
-		isPulsing: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
-				class: normalizeClass(["astryx-status-dot", { "astryx-status-dot--pulsing": __props.isPulsing }]),
-				"data-variant": __props.variant,
-				role: "img",
-				"aria-label": __props.label
-			}, null, 10, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/TimeField-Biiuv0hB.js

@@ -1,214 +0,0 @@
-import { c as useCoarsePointer, i as parseDisplayTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-DWk6oTAZ.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, openBlock, shallowRef, useModel, watch, withCtx } from "vue";
-import "../styles/bordered-control.css";
-import "../styles/time-input.css";
-//#region src/TimeInput/TimeField.vue
-const _hoisted_1 = [
-	"data-size",
-	"data-status",
-	"data-disabled"
-];
-const _hoisted_2 = [
-	"id",
-	"value",
-	"min",
-	"max",
-	"step",
-	"disabled",
-	"readonly",
-	"aria-label",
-	"aria-labelledby",
-	"aria-describedby",
-	"aria-required",
-	"aria-invalid"
-];
-const _hoisted_3 = [
-	"id",
-	"value",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"aria-label",
-	"aria-labelledby",
-	"aria-describedby",
-	"aria-required",
-	"aria-invalid"
-];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxTimeField",
-	inheritAttrs: false,
-	__name: "TimeField",
-	props: /*@__PURE__*/ mergeModels({
-		label: {},
-		inputId: {},
-		describedBy: {},
-		labelledBy: {},
-		placeholder: {},
-		hourFormat: { default: "12h" },
-		hasSeconds: {
-			type: Boolean,
-			default: false
-		},
-		increment: { default: 1 },
-		min: {},
-		max: {},
-		presentation: {},
-		nativePicker: {},
-		hasClear: {
-			type: Boolean,
-			default: false
-		},
-		clearLabel: {},
-		size: { default: "md" },
-		isDisabled: { type: Boolean },
-		isReadOnly: { type: Boolean },
-		isRequired: { type: Boolean },
-		status: {}
-	}, {
-		"modelValue": { default: null },
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const props = __props;
-		const model = useModel(__props, "modelValue");
-		const messages = useAstryxMessages();
-		const coarse = useCoarsePointer();
-		const focused = shallowRef(false);
-		const draft = shallowRef("");
-		const surface = computed(() => resolveTimeSurface({
-			presentation: props.presentation,
-			nativePicker: props.nativePicker,
-			coarse: coarse.value,
-			hasSeconds: props.hasSeconds,
-			increment: props.increment
-		}));
-		const clearLabel = computed(() => props.clearLabel ?? messages.value.timeInput.clear(props.label));
-		const formatHint = computed(() => props.hourFormat === "24h" || props.hasSeconds ? messages.value.timeInput.formatHint24 : messages.value.timeInput.formatHint12);
-		watch(() => model.value, (value) => {
-			if (!focused.value) draft.value = value ? formatDisplayTime(value, props.hourFormat, props.hasSeconds) : "";
-		}, { immediate: true });
-		const shownPlaceholder = computed(() => {
-			if (focused.value && !draft.value) return formatHint.value;
-			return props.placeholder ?? messages.value.timeInput.placeholder;
-		});
-		function commit(value) {
-			model.value = value;
-			draft.value = value ? formatDisplayTime(value, props.hourFormat, props.hasSeconds) : "";
-		}
-		function commitText(text) {
-			if (!text.trim()) {
-				commit(null);
-				return;
-			}
-			const parsed = parseDisplayTime(text, props.hasSeconds);
-			if (parsed == null || !isTimeInRange(parsed, props.min, props.max)) {
-				draft.value = model.value ? formatDisplayTime(model.value, props.hourFormat, props.hasSeconds) : "";
-				return;
-			}
-			commit(parsed);
-		}
-		function onInput(event) {
-			draft.value = event.target.value;
-		}
-		function onNativeInput(event) {
-			const value = event.target.value;
-			if (!value) {
-				commit(null);
-				return;
-			}
-			const parsed = parseDisplayTime(value, props.hasSeconds);
-			if (parsed == null || !isTimeInRange(parsed, props.min, props.max)) return;
-			commit(parsed);
-		}
-		function onKeydown(event) {
-			if (props.isDisabled || props.isReadOnly) return;
-			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
-			event.preventDefault();
-			const delta = event.key === "ArrowUp" ? props.increment : -props.increment;
-			const next = shiftTime(model.value || "00:00", delta, props.hasSeconds);
-			if (isTimeInRange(next, props.min, props.max)) commit(next);
-		}
-		function onBlur() {
-			focused.value = false;
-			if (surface.value === "text") commitText(draft.value);
-		}
-		function clear() {
-			if (props.isDisabled || props.isReadOnly) return;
-			commit(null);
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: "astryx-time-input astryx-bordered-control",
-				"data-size": __props.size,
-				"data-status": __props.status?.type,
-				"data-disabled": __props.isDisabled || void 0
-			}, [
-				createVNode(_sfc_main$3, {
-					class: "astryx-time-input-icon",
-					icon: "clock",
-					size: "sm"
-				}),
-				surface.value === "native" ? (openBlock(), createElementBlock("input", {
-					key: 0,
-					id: __props.inputId,
-					class: "astryx-time-input-control",
-					type: "time",
-					value: model.value ?? "",
-					min: __props.min,
-					max: __props.max,
-					step: __props.hasSeconds ? 1 : __props.increment * 60,
-					disabled: __props.isDisabled,
-					readonly: __props.isReadOnly,
-					"aria-label": __props.labelledBy ? void 0 : __props.label,
-					"aria-labelledby": __props.labelledBy,
-					"aria-describedby": __props.describedBy,
-					"aria-required": __props.isRequired || void 0,
-					"aria-invalid": __props.status?.type === "error" || void 0,
-					onInput: onNativeInput
-				}, null, 40, _hoisted_2)) : (openBlock(), createElementBlock("input", {
-					key: 1,
-					id: __props.inputId,
-					class: "astryx-time-input-control",
-					type: "text",
-					inputmode: "text",
-					autocomplete: "off",
-					value: draft.value,
-					placeholder: shownPlaceholder.value,
-					disabled: __props.isDisabled,
-					readonly: __props.isReadOnly,
-					"aria-label": __props.labelledBy ? void 0 : __props.label,
-					"aria-labelledby": __props.labelledBy,
-					"aria-describedby": __props.describedBy,
-					"aria-required": __props.isRequired || void 0,
-					"aria-invalid": __props.status?.type === "error" || void 0,
-					onInput,
-					onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
-					onBlur,
-					onKeydown
-				}, null, 40, _hoisted_3)),
-				__props.hasClear && model.value && !__props.isDisabled && !__props.isReadOnly ? (openBlock(), createBlock(_sfc_main$2, {
-					key: 2,
-					class: "astryx-input-clear-button",
-					variant: "ghost",
-					size: "sm",
-					label: clearLabel.value,
-					onClick: clear
-				}, {
-					default: withCtx(() => [createVNode(_sfc_main$1, { type: "clear" })]),
-					_: 1
-				}, 8, ["label"])) : createCommentVNode("v-if", true),
-				__props.status ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 3,
-					type: __props.status.type
-				}, null, 8, ["type"])) : createCommentVNode("v-if", true)
-			], 8, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };