@astryx-vue/core 0.2.2 → 0.2.4

package/dist/Typeahead-P7cCqtaQ.js

@@ -1,375 +0,0 @@
-import { a as useAstryxMessages } from "./context-CiKncNSH.js";
-import { t as _sfc_main$1 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
-import { t as _sfc_main$3 } from "./Token-Chu_eCVs.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-7W90Ny-9.js";
-import { n as useTypeaheadMenu, t as _sfc_main$4 } from "./TypeaheadMenu-CGvo0Tud.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
-import "../styles/visually-hidden-utility.css";
-import "../styles/typeahead.css";
-//#region src/Typeahead/Typeahead.vue
-const _hoisted_1 = {
-	key: 0,
-	class: "astryx-typeahead-icon",
-	"aria-hidden": "true"
-};
-const _hoisted_2 = [
-	"placeholder",
-	"value",
-	"disabled",
-	"readonly",
-	"aria-disabled",
-	"aria-expanded",
-	"aria-activedescendant",
-	"aria-describedby",
-	"aria-required",
-	"title"
-];
-const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = ["name", "value"];
-const _hoisted_5 = ["aria-label", "data-placement"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxTypeahead",
-	inheritAttrs: false,
-	__name: "Typeahead",
-	props: {
-		modelValue: { default: null },
-		searchSource: {},
-		label: {},
-		labelHidden: {
-			type: Boolean,
-			default: false
-		},
-		description: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledReason: {},
-		status: { default: "default" },
-		statusMessage: {},
-		size: { default: "md" },
-		clearable: {
-			type: Boolean,
-			default: true
-		},
-		debounceMs: { default: 150 },
-		maxMenuItems: { default: 10 },
-		showOnFocus: {
-			type: Boolean,
-			default: false
-		},
-		emptyText: {},
-		required: {
-			type: Boolean,
-			default: false
-		},
-		optional: {
-			type: Boolean,
-			default: false
-		},
-		name: {},
-		width: {}
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"search",
-		"openChange"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const messages = useAstryxMessages();
-		const inputId = `astryx-typeahead-${useId()}`;
-		const listboxId = `${inputId}-listbox`;
-		const disabledId = `${inputId}-disabled`;
-		const editing = ref(false);
-		let suppressFocusOpen = false;
-		const inputRef = useTemplateRef("inputRef");
-		const anchorRef = useTemplateRef("anchorRef");
-		const listboxRef = useTemplateRef("listboxRef");
-		const placeholder = computed(() => props.placeholder ?? messages.value.typeahead.placeholder);
-		const emptyText = computed(() => props.emptyText ?? messages.value.typeahead.empty);
-		const clearLabel = computed(() => messages.value.typeahead.clear);
-		const focusableDisabled = computed(() => props.disabled && Boolean(props.disabledReason?.trim()));
-		const fieldStatus = computed(() => {
-			if (!props.statusMessage || props.status === "default") return void 0;
-			return {
-				type: props.status,
-				message: props.statusMessage
-			};
-		});
-		const menu = useTypeaheadMenu({
-			source: () => props.searchSource,
-			debounceMs: () => props.debounceMs,
-			showOnFocus: () => props.showOnFocus,
-			maxItems: () => props.maxMenuItems,
-			disabled: () => props.disabled,
-			onSelect: (entry) => {
-				commit(entry.item);
-			},
-			onEscape: () => {
-				restoreSelection();
-			},
-			onQueryChange: (query) => {
-				emit("search", query);
-			}
-		});
-		const anchored = useAnchoredListbox({
-			anchor: anchorRef,
-			layer: listboxRef,
-			isOpen: menu.combobox.isOpen,
-			onDismiss: () => {
-				menu.close();
-				restoreSelection();
-			}
-		});
-		const selected = computed(() => props.modelValue ?? null);
-		const showToken = computed(() => selected.value != null && !editing.value);
-		const describedBy = computed(() => {
-			return [
-				props.description ? `${inputId}-description` : void 0,
-				props.statusMessage ? `${inputId}-status` : void 0,
-				focusableDisabled.value ? disabledId : void 0
-			].filter(Boolean).join(" ") || void 0;
-		});
-		watch(() => menu.combobox.isOpen.value, (isOpen) => {
-			emit("openChange", isOpen);
-		});
-		watch(() => menu.combobox.activeIndex.value, (index) => {
-			if (index < 0 || !menu.combobox.isOpen.value) return;
-			nextTick(() => {
-				scrollOptionIntoView(listboxRef.value, menu.entries.value[index]?.id);
-			});
-		});
-		function commit(item) {
-			editing.value = false;
-			menu.query.value = "";
-			menu.close();
-			emit("update:modelValue", item);
-			emit("change", item);
-			suppressFocusOpen = item != null;
-			nextTick(() => {
-				inputRef.value?.focus();
-				suppressFocusOpen = false;
-			});
-		}
-		function restoreSelection() {
-			if (selected.value == null) return;
-			editing.value = false;
-			menu.query.value = "";
-		}
-		function startEdit() {
-			if (props.disabled || selected.value == null || editing.value) return;
-			editing.value = true;
-			menu.setQuery(selected.value.label);
-			nextTick(() => {
-				inputRef.value?.focus();
-				inputRef.value?.select();
-			});
-		}
-		function highlight(index) {
-			const entry = menu.entries.value[index];
-			if (entry && !entry.disabled) menu.combobox.activeIndex.value = index;
-		}
-		function onInput(event) {
-			if (props.disabled) return;
-			menu.setQuery(event.target.value);
-		}
-		function onFocus() {
-			if (props.disabled || suppressFocusOpen) return;
-			if (showToken.value) {
-				startEdit();
-				return;
-			}
-			if (props.showOnFocus) menu.open();
-		}
-		function onBlur(event) {
-			const next = event.relatedTarget;
-			if (next instanceof Node && (anchorRef.value?.contains(next) || listboxRef.value?.contains(next))) return;
-			menu.close();
-			restoreSelection();
-		}
-		function onControlClick(event) {
-			if (props.disabled) return;
-			const target = event.target;
-			if (target instanceof Element && target.closest("button, a")) return;
-			if (showToken.value) startEdit();
-			else inputRef.value?.focus();
-		}
-		function onClear(event) {
-			event.stopPropagation();
-			commit(null);
-		}
-		function onMenuSelect(id) {
-			const entry = menu.entries.value.find((item) => item.id === id);
-			if (entry && !entry.disabled) commit(entry.item);
-		}
-		function optionSelected(id) {
-			return selected.value?.id === id;
-		}
-		__expose({
-			focus: () => inputRef.value?.focus(),
-			blur: () => inputRef.value?.blur()
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$2, {
-				class: normalizeClass(["astryx-typeahead", [`size-${props.size}`]]),
-				label: props.label,
-				"input-id": inputId,
-				description: props.description,
-				"is-label-hidden": props.labelHidden,
-				"is-disabled": props.disabled,
-				"is-required": props.required,
-				"is-optional": props.optional,
-				status: fieldStatus.value,
-				width: props.width
-			}, {
-				default: withCtx(() => [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点空白处只是把焦点交给组合框；键盘用户直接 Tab 到输入框。 "), createElementVNode("div", {
-					ref_key: "anchorRef",
-					ref: anchorRef,
-					class: normalizeClass(["astryx-typeahead-control", [`status-${props.status}`, {
-						"is-open": unref(menu).combobox.isOpen.value,
-						"is-disabled": props.disabled
-					}]]),
-					onClick: onControlClick
-				}, [
-					_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
-					showToken.value && selected.value ? (openBlock(), createBlock(_sfc_main$3, {
-						key: 1,
-						class: "astryx-typeahead-value",
-						label: selected.value.label,
-						size: props.size,
-						disabled: props.disabled,
-						onClick: startEdit
-					}, null, 8, [
-						"label",
-						"size",
-						"disabled"
-					])) : createCommentVNode("v-if", true),
-					createElementVNode("input", {
-						id: inputId,
-						ref_key: "inputRef",
-						ref: inputRef,
-						class: normalizeClass(["astryx-typeahead-input", { "is-hidden": showToken.value }]),
-						type: "text",
-						role: "combobox",
-						autocomplete: "off",
-						autocapitalize: "off",
-						placeholder: showToken.value ? void 0 : placeholder.value,
-						value: showToken.value ? "" : unref(menu).query.value,
-						disabled: props.disabled && !focusableDisabled.value,
-						readonly: focusableDisabled.value || void 0,
-						"aria-disabled": focusableDisabled.value ? "true" : void 0,
-						"aria-expanded": unref(menu).combobox.isOpen.value,
-						"aria-controls": listboxId,
-						"aria-autocomplete": "list",
-						"aria-activedescendant": unref(menu).activeId.value ? `${listboxId}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
-						"aria-describedby": describedBy.value,
-						"aria-required": props.required || void 0,
-						title: props.disabledReason,
-						onInput,
-						onFocus,
-						onBlur,
-						onKeydown: _cache[0] || (_cache[0] = (...args) => unref(menu).onKeyDown && unref(menu).onKeyDown(...args))
-					}, null, 42, _hoisted_2),
-					unref(menu).status.value === "loading" ? (openBlock(), createBlock(_sfc_main$1, {
-						key: 2,
-						class: "astryx-typeahead-spinner",
-						size: "sm",
-						"aria-label": unref(messages).typeahead.loading
-					}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
-					props.clearable && selected.value && !props.disabled ? (openBlock(), createElementBlock("button", {
-						key: 3,
-						type: "button",
-						class: "astryx-typeahead-clear",
-						"aria-label": clearLabel.value,
-						onClick: onClear
-					}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
-						width: "16",
-						height: "16",
-						viewBox: "0 0 16 16",
-						fill: "none",
-						"aria-hidden": "true"
-					}, [createElementVNode("path", {
-						d: "M12 4L4 12M4 4L12 12",
-						stroke: "currentColor",
-						"stroke-width": "1.5",
-						"stroke-linecap": "round"
-					})], -1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true),
-					focusableDisabled.value ? (openBlock(), createElementBlock("span", {
-						key: 4,
-						id: disabledId,
-						class: "astryx-visually-hidden"
-					}, toDisplayString(props.disabledReason), 1)) : createCommentVNode("v-if", true),
-					props.name ? (openBlock(), createElementBlock("input", {
-						key: 5,
-						type: "hidden",
-						name: props.name,
-						value: selected.value?.id ?? ""
-					}, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
-				], 2)]),
-				_: 3
-			}, 8, [
-				"class",
-				"label",
-				"description",
-				"is-label-hidden",
-				"is-disabled",
-				"is-required",
-				"is-optional",
-				"status",
-				"width"
-			]), (openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
-				id: listboxId,
-				ref_key: "listboxRef",
-				ref: listboxRef,
-				class: "astryx-typeahead-listbox",
-				role: "listbox",
-				"aria-label": unref(messages).typeahead.results,
-				"data-placement": unref(anchored).position.value.placement,
-				style: normalizeStyle(unref(anchored).style.value),
-				tabindex: "-1"
-			}, [createVNode(_sfc_main$4, {
-				entries: unref(menu).entries.value.map((entry) => ({
-					id: entry.id,
-					label: entry.label,
-					description: entry.description,
-					disabled: entry.disabled,
-					selected: optionSelected(entry.item.id)
-				})),
-				"active-index": unref(menu).combobox.activeIndex.value,
-				status: unref(menu).status.value,
-				"listbox-id": listboxId,
-				"empty-text": emptyText.value,
-				"loading-text": unref(messages).typeahead.loading,
-				"error-text": unref(messages).typeahead.error,
-				onSelect: onMenuSelect,
-				onHighlight: highlight
-			}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
-				name: "item",
-				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", {
-					item: unref(menu).entries.value.find((entry) => entry.id === slotProps.entry.id).item,
-					isActive: slotProps.isActive,
-					isSelected: slotProps.isSelected
-				})]),
-				key: "0"
-			} : void 0, _ctx.$slots.empty ? {
-				name: "empty",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
-				key: "1"
-			} : void 0]), 1032, [
-				"entries",
-				"active-index",
-				"status",
-				"empty-text",
-				"loading-text",
-				"error-text"
-			])], 12, _hoisted_5), [[vShow, unref(menu).combobox.isOpen.value]])]))], 64);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/index-Bgv4ZmBl.d.ts

@@ -1,72 +0,0 @@
-import { CalendarDate } from "@internationalized/date";
-//#region src/Calendar/types.d.ts
-interface CalendarRangeValue {
-  start: Date | null;
-  end: Date | null;
-}
-interface CalendarProps {
-  /** 当前选中的日期。`mode="range"` 时改用 `range`。 */
-  modelValue?: Date | null;
-  /** 选一天，或选一段起止日期。 */
-  mode?: 'single' | 'range';
-  /** 范围模式下的起止日期，用 `v-model:range` 绑定。 */
-  range?: CalendarRangeValue | null;
-  /** 并排显示的月份数。 */
-  numberOfMonths?: 1 | 2;
-  /** 打开时先显示这一天所在的月份。 */
-  focusDate?: Date;
-  /** 最小可选日期 */
-  min?: Date;
-  /** 最大可选日期 */
-  max?: Date;
-  /** 禁用的日期判断函数 */
-  isDateDisabled?: (date: Date) => boolean;
-  /** 日历标签 */
-  label?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-}
-interface CalendarEmits {
-  (event: 'update:modelValue', value: Date | null): void;
-  (event: 'update:range', value: CalendarRangeValue): void;
-  (event: 'change', value: Date | null): void;
-}
-interface CalendarSlots {
-  /** 自定义日期单元格 */
-  day?: (props: {
-    date: CalendarDate;
-    isSelected: boolean;
-    isDisabled: boolean;
-    isToday: boolean;
-    isInMonth: boolean;
-  }) => any;
-  /** 自定义头部 */
-  header?: () => any;
-}
-//#endregion
-//#region src/Calendar/Calendar.vue.d.ts
-type __VLS_Slots = CalendarSlots;
-declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-  change: (value: Date | null) => any;
-  "update:modelValue": (value: Date | null) => any;
-  "update:range": (value: CalendarRangeValue) => any;
-}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
-  onChange?: ((value: Date | null) => any) | undefined;
-  "onUpdate:modelValue"?: ((value: Date | null) => any) | undefined;
-  "onUpdate:range"?: ((value: CalendarRangeValue) => any) | undefined;
-}>, {
-  modelValue: Date | null;
-  mode: "single" | "range";
-  disabled: boolean;
-  range: CalendarRangeValue | null;
-  numberOfMonths: 1 | 2;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-export { CalendarSlots as a, CalendarRangeValue as i, CalendarEmits as n, CalendarProps as r, _default as t };