@astryx-vue/core 0.2.2 → 0.2.3

package/dist/types-jmqqnkKA.d.ts

@@ -0,0 +1,163 @@
+import { n as SyntaxThemeDefinition } from "./syntaxTheme-Bcs1YMF7.js";
+import { t as SemanticIconMap } from "./semantic-CKH9XVqa.js";
+import { Component } from "vue";
+//#region src/Indicator/types.d.ts
+/**
+ * Each family owns its own states.
+ *
+ * A radio is only chosen or not. A checkbox can also be partial. Keeping the
+ * families apart means a radio graphic is never asked to draw a mixed state.
+ */
+interface IndicatorFamilyMap {
+  singleSelection: 'unchecked' | 'checked';
+  multiSelection: 'unchecked' | 'checked' | 'indeterminate';
+}
+type IndicatorFamily = keyof IndicatorFamilyMap & string;
+type IndicatorState<F extends IndicatorFamily = IndicatorFamily> = IndicatorFamilyMap[F];
+/** Matches the control sizes of the inputs that draw these graphics. */
+type IndicatorSize = 'sm' | 'md';
+/**
+ * Which edge of a row the mark sits on.
+ *
+ * Logical, not physical: start is the left edge in left-to-right text.
+ * The row decides this. The graphic itself has no position.
+ */
+type IndicatorPosition = 'start' | 'end';
+/**
+ * Props every indicator accepts.
+ *
+ * The graphic is decorative. The control that draws it keeps the input, the
+ * role, the accessible name, and the keyboard. Hover and focus reach the
+ * graphic through the `astryx-indicator-scope` class on that control, not
+ * through a prop.
+ */
+interface IndicatorProps<F extends IndicatorFamily = IndicatorFamily> {
+  /** Which state to draw. The family decides which states exist. */
+  state: IndicatorState<F>;
+  /**
+   * Control size. `sm` is 20px and `md` is 24px.
+   * @default 'md'
+   */
+  size?: IndicatorSize;
+  /**
+   * Whether the owning control is disabled. Visual only.
+   * @default false
+   */
+  isDisabled?: boolean;
+}
+/** A component that can stand in for one indicator name. */
+type IndicatorComponent<F extends IndicatorFamily = IndicatorFamily> = Component<IndicatorProps<F>>;
+/**
+ * Names a theme can replace.
+ *
+ * Packages can add names by augmenting this interface. Core has no default
+ * for a name it does not know, so `getIndicator` returns undefined for those
+ * and the caller supplies the fallback.
+ */
+interface IndicatorMap {
+  /** The mark on a chosen option. A check by default, and nothing when unchosen. */
+  check: 'singleSelection';
+  /** The circle of a radio. */
+  radio: 'singleSelection';
+  /** The box of a checkbox, including the partial state. */
+  checkbox: 'multiSelection';
+}
+type IndicatorName = keyof IndicatorMap & string;
+type CoreIndicatorName = 'check' | 'checkbox' | 'radio';
+/**
+ * Theme overrides, keyed by indicator name.
+ *
+ * One entry replaces that graphic everywhere it is drawn. Mapping `check` to
+ * the radio graphic turns every single-selection mark into a radio.
+ */
+interface IndicatorRegistry {
+  check?: IndicatorComponent<'singleSelection'>;
+  radio?: IndicatorComponent<'singleSelection'>;
+  checkbox?: IndicatorComponent<'multiSelection'>;
+  [name: string]: Component | undefined;
+}
+//#endregion
+//#region src/Theme/types.d.ts
+/** Color mode for a theme subtree. `system` follows the page and the OS. */
+type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * A token value.
+ *
+ * A string is used as written. A two-item tuple is the light stop, then the
+ * dark stop, and becomes `light-dark()`.
+ */
+type ThemeTokenValue = string | readonly [string, string];
+/** CSS custom properties for a theme. Keys may omit the `--astryx-` prefix. */
+type ThemeTokens = Record<string, ThemeTokenValue>;
+/** Token overrides for one inverted surface. */
+interface ThemeSurfaceInput {
+  tokens?: ThemeTokens;
+}
+interface DefineThemeInput {
+  /** Theme name. Used as `data-astryx-theme`. */
+  name: string;
+  /** Semantic token overrides for this theme. */
+  tokens?: ThemeTokens;
+  /** Another theme to start from. This theme's own values win. */
+  extends?: ThemeDefinition;
+  /** Syntax colors for code in this subtree, unless a SyntaxTheme is closer. */
+  syntax?: SyntaxThemeDefinition;
+  /** Extra tokens for content on a dark surface. */
+  onDark?: ThemeSurfaceInput;
+  /** Extra tokens for content on a light surface. */
+  onLight?: ThemeSurfaceInput;
+  /**
+   * Semantic icon name to Iconify id.
+   *
+   * Entries replace the built-in map by name and merge with the theme this
+   * one extends. A name that is not listed keeps the built-in id.
+   */
+  icons?: SemanticIconMap;
+  /**
+   * Indicator graphics, replaced by name.
+   *
+   * One entry reaches every control that draws that indicator. Entries merge
+   * with the theme this one extends.
+   */
+  indicators?: IndicatorRegistry;
+}
+interface ThemeDefinition {
+  name: string;
+  /** Token values already written as CSS. */
+  tokens: Readonly<Record<string, string>>;
+  /** Extra tokens applied by MediaTheme when the surface is dark. */
+  onDark: Readonly<Record<string, string>>;
+  /** Extra tokens applied by MediaTheme when the surface is light. */
+  onLight: Readonly<Record<string, string>>;
+  syntax?: SyntaxThemeDefinition;
+  /** Semantic icon overrides. Absent when this theme does not set any. */
+  icons?: SemanticIconMap;
+  /** Indicator overrides. Absent when this theme does not set any. */
+  indicators?: IndicatorRegistry;
+  readonly __astryxTheme: true;
+}
+interface ThemeProps {
+  /** Theme from `defineTheme()`. */
+  theme: ThemeDefinition;
+  /**
+   * Color mode for this subtree.
+   * @default 'system'
+   */
+  mode?: ThemeMode;
+}
+/** Surface luminance, `auto` to measure it, or `off` to leave the page theme. */
+type MediaThemeMode = 'dark' | 'light' | 'auto' | 'off';
+interface MediaThemeProps {
+  /**
+   * Which surface the children sit on.
+   * `auto` measures the parent. `off` keeps the surrounding theme.
+   */
+  mode: MediaThemeMode;
+  /**
+   * Side used by `auto` before the surface can be measured, and when it cannot.
+   * @default 'dark'
+   */
+  fallback?: 'dark' | 'light';
+}
+//#endregion
+export { IndicatorProps as _, ThemeMode as a, IndicatorState as b, ThemeTokenValue as c, IndicatorComponent as d, IndicatorFamily as f, IndicatorPosition as g, IndicatorName as h, ThemeDefinition as i, ThemeTokens as l, IndicatorMap as m, MediaThemeMode as n, ThemeProps as o, IndicatorFamilyMap as p, MediaThemeProps as r, ThemeSurfaceInput as s, DefineThemeInput as t, CoreIndicatorName as u, IndicatorRegistry as v, IndicatorSize as y };

package/dist/{useAnchoredListbox-7W90Ny-9.js → useAnchoredListbox-BN9LQnon.js}

@@ -1,4 +1,4 @@
-import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
+import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
 import { computed, onMounted, ref, watch } from "vue";
 //#region src/Typeahead/useAnchoredListbox.ts

package/dist/useDatePresentation-C07PnOCw.js

@@ -0,0 +1,21 @@
+//#region src/composables/useDatePresentation.ts
+/**
+* `presentation` wins over the older native picker name.
+* With neither set, a mouse gets the calendar popover and a coarse pointer gets the system date control.
+*/
+function resolveDatePresentation(presentation, nativePicker) {
+	if (presentation) return presentation;
+	if (nativePicker === "always") return "native";
+	if (nativePicker === "never") return "adaptive-bottom-sheet";
+	if (nativePicker === "touch") return "adaptive-native";
+	return "adaptive-native";
+}
+function resolveDateSurface(presentation, coarse) {
+	if (presentation === "popover") return "popover";
+	if (presentation === "bottom-sheet") return "sheet";
+	if (presentation === "native") return "native";
+	if (presentation === "adaptive-bottom-sheet") return coarse ? "sheet" : "popover";
+	return coarse ? "native" : "popover";
+}
+//#endregion
+export { resolveDateSurface as n, resolveDatePresentation as t };

package/dist/{useMonthGrid-CmJsZTcB.js → useDateRange-CIXoE_8k.js}

@@ -1,4 +1,3 @@
-import { CalendarDate } from "@internationalized/date";
 //#region src/composables/useDateRange.ts
 const WEEKDAY_INDEX = {
 	sun: 0,
@@ -96,44 +95,4 @@ function formatDateRange(range, locale) {
 	return `${format(range.start)} – ${format(range.end)}`;
 }
 //#endregion
-//#region src/composables/useMonthGrid.ts
-function toISODate(date) {
-	const month = String(date.month).padStart(2, "0");
-	const day = String(date.day).padStart(2, "0");
-	return `${date.year}-${month}-${day}`;
-}
-function parseISODate(value) {
-	const [year, month, day] = value.split("-").map(Number);
-	return new CalendarDate(year, month, day);
-}
-function buildMonthGrid(year, month, weekStartsOn) {
-	const first = new CalendarDate(year, month, 1);
-	const start = resolveWeekStart(weekStartsOn);
-	const offset = (first.toDate("UTC").getUTCDay() - start + 7) % 7;
-	let cursor = first.subtract({ days: offset });
-	const weeks = [];
-	for (let week = 0; week < 6; week += 1) {
-		const days = [];
-		for (let day = 0; day < 7; day += 1) {
-			days.push(toISODate(cursor));
-			cursor = cursor.add({ days: 1 });
-		}
-		weeks.push(days);
-	}
-	return weeks;
-}
-function addMonths(year, month, amount) {
-	const date = new CalendarDate(year, month, 1).add({ months: amount });
-	return {
-		year: date.year,
-		month: date.month
-	};
-}
-function todayISODate() {
-	const now = /* @__PURE__ */ new Date();
-	const month = String(now.getMonth() + 1).padStart(2, "0");
-	const day = String(now.getDate()).padStart(2, "0");
-	return `${now.getFullYear()}-${month}-${day}`;
-}
-//#endregion
-export { todayISODate as a, formatDateRange as c, isSameRange as d, orderRange as f, toISODate as i, isDayOutsideSpan as l, spanDays as m, buildMonthGrid as n, applyRangeClick as o, resolveWeekStart as p, parseISODate as r, compareISODate as s, addMonths as t, isRangeWithinSpan as u };
+export { isRangeWithinSpan as a, resolveWeekStart as c, isDayOutsideSpan as i, spanDays as l, compareISODate as n, isSameRange as o, formatDateRange as r, orderRange as s, applyRangeClick as t };

package/dist/useDisclosureHandle-Df3HhAfC.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, watchEffect } from "vue";
+//#region src/composables/useDisclosureHandle.ts
+function publish(target, value) {
+	if (target == null) return;
+	if (typeof target === "function") target(value);
+	else target.value = value;
+}
+/**
+* 把打开、关闭、切换和当前是否打开写到调用方持有的句柄上。
+* 必须传入读取函数。句柄本身常常就是一个 ref，直接交给 Vue 的解包会拿到里面的 null。
+* 句柄换掉时先把旧的清空，组件卸载时也清空。
+*/
+function useDisclosureHandle(read, handle) {
+	let previous;
+	watchEffect(() => {
+		const target = read();
+		if (previous != null && previous !== target) publish(previous, null);
+		publish(target, handle);
+		previous = target;
+	});
+	onBeforeUnmount(() => publish(read(), null));
+}
+//#endregion
+export { useDisclosureHandle as t };

package/dist/{useDismiss-CAiHU6QD.js → useDismiss-Cj8x_51F.js}

@@ -13,6 +13,10 @@ const escapeStack = [];
 function useDismiss(options) {
 	const { container, trigger, isEnabled, enableEscape = { value: true }, onDismiss } = options;
 	let isAttached = false;
+	function dismissFromEscape() {
+		if (options.onEscape != null) options.onEscape();
+		else onDismiss();
+	}
 	function onClickOutside(event) {
 		if (!isEnabled.value) return;
 		const el = container.value;
@@ -25,9 +29,9 @@ function useDismiss(options) {
 	function onEscapeKey(event) {
 		if (!isEnabled.value || !enableEscape.value) return;
 		if (event.key === "Escape") {
-			if (escapeStack[escapeStack.length - 1] === onDismiss) {
+			if (escapeStack[escapeStack.length - 1] === dismissFromEscape) {
 				event.preventDefault();
-				onDismiss();
+				dismissFromEscape();
 			}
 		}
 	}
@@ -38,14 +42,14 @@ function useDismiss(options) {
 		isAttached = true;
 		document.addEventListener("pointerdown", onClickOutside, true);
 		document.addEventListener("keydown", onEscapeKey, true);
-		if (enableEscape.value) escapeStack.push(onDismiss);
+		if (enableEscape.value) escapeStack.push(dismissFromEscape);
 	}
 	function teardown() {
 		if (typeof document === "undefined" || !isAttached) return;
 		isAttached = false;
 		document.removeEventListener("pointerdown", onClickOutside, true);
 		document.removeEventListener("keydown", onEscapeKey, true);
-		const index = escapeStack.indexOf(onDismiss);
+		const index = escapeStack.indexOf(dismissFromEscape);
 		if (index !== -1) escapeStack.splice(index, 1);
 	}
 	watch(isEnabled, (enabled) => {

package/dist/useFieldControlState-voICDrys.js

@@ -0,0 +1,18 @@
+import { computed, toValue } from "vue";
+//#region src/composables/useFieldControlState.ts
+/**
+* 选择器和复选列表共用的三种互斥状态。
+* 同时标成禁用和只读时，按禁用处理。
+*/
+function useFieldControlState(input) {
+	const isDisabled = computed(() => toValue(input.disabled) === true);
+	const isReadOnly = computed(() => toValue(input.readOnly) === true && !isDisabled.value);
+	return {
+		isDisabled,
+		isReadOnly,
+		isLoading: computed(() => toValue(input.loading) === true),
+		canActivate: computed(() => !isDisabled.value && !isReadOnly.value)
+	};
+}
+//#endregion
+export { useFieldControlState as t };

package/dist/useHandleRef-6cdKugm8.js

@@ -0,0 +1,17 @@
+import { onBeforeUnmount, watch } from "vue";
+//#region src/composables/useHandleRef.ts
+function publish(target, handle) {
+	if (target == null) return;
+	if (typeof target === "function") target(handle);
+	else target.value = handle;
+}
+/** Keeps an imperative handle on a ref or a callback, and clears it when the owner goes away. */
+function useHandleRef(read, handle) {
+	watch(read, (_next, previous) => {
+		if (previous != null && previous !== read()) publish(previous, null);
+		publish(read(), handle);
+	}, { immediate: true });
+	onBeforeUnmount(() => publish(read(), null));
+}
+//#endregion
+export { useHandleRef as t };

package/dist/useIndicator-i1NORM7W.js

@@ -0,0 +1,147 @@
+import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
+import { n as themeContextKey } from "./context-Cws_tXTr.js";
+import { n as decorativeAttrs, t as _sfc_main$3 } from "./CheckboxIndicator-D37cm2Rh.js";
+import { Comment, Fragment, Text, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, openBlock, renderSlot, unref, useAttrs, useSlots, useTemplateRef } from "vue";
+import "../styles/check-indicator.css";
+import "../styles/radio-indicator.css";
+//#region src/Indicator/isRenderable.ts
+/**
+* Whether a slot or vnode should replace an indicator's own mark.
+*
+* Null, undefined, booleans, and the empty string do not count. An element
+* does, even when that element later renders nothing. A host writes
+* `v-if="busy"` around a spinner, and `false` must not delete the mark.
+*/
+function isRenderable(value) {
+	if (value == null || typeof value === "boolean" || value === "") return false;
+	if (Array.isArray(value)) return value.some((item) => isRenderable(item));
+	if (typeof value !== "object") return true;
+	const node = value;
+	if (node.type === Comment) return false;
+	if (node.type === Text) return String(node.children ?? "").trim() !== "";
+	if (node.type === Fragment) return isRenderable(node.children);
+	return true;
+}
+//#endregion
+//#region src/Indicator/useReplacementSlot.ts
+/**
+* Whether the default slot should take the place of the state mark.
+*
+* Called during render. The slot function runs once to inspect, and the
+* template renders it again when the answer is yes.
+*/
+function useReplacementSlot() {
+	const slots = useSlots();
+	return () => isRenderable(slots.default?.());
+}
+//#endregion
+//#region src/Indicator/CheckIndicator.vue
+const _hoisted_1$1 = ["data-size", "data-disabled"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCheckIndicator",
+	inheritAttrs: false,
+	__name: "CheckIndicator",
+	props: {
+		state: {},
+		size: { default: "md" },
+		isDisabled: { type: Boolean }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const element = useTemplateRef("mark");
+		const passed = computed(() => decorativeAttrs(attrs));
+		const replacement = useReplacementSlot();
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return unref(replacement)() ? (openBlock(), createElementBlock("span", mergeProps({
+				key: 0,
+				ref: "mark"
+			}, passed.value, {
+				class: "astryx-check-indicator",
+				"aria-hidden": "true",
+				"data-size": props.size,
+				"data-disabled": __props.isDisabled || void 0
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$1)) : __props.state === "checked" ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+				key: 1,
+				ref: "mark"
+			}, passed.value, {
+				icon: "check",
+				size: "sm",
+				color: __props.isDisabled ? "disabled" : "accent",
+				"aria-hidden": "true"
+			}), null, 16, ["color"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/Indicator/RadioIndicator.vue
+const _hoisted_1 = [
+	"data-state",
+	"data-size",
+	"data-disabled"
+];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-radio-indicator-dot"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxRadioIndicator",
+	inheritAttrs: false,
+	__name: "RadioIndicator",
+	props: {
+		state: {},
+		size: {},
+		isDisabled: { type: Boolean }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const element = useTemplateRef("indicator");
+		const passed = computed(() => decorativeAttrs(attrs));
+		const checked = computed(() => props.state !== "unchecked");
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps(passed.value, {
+				ref: "indicator",
+				class: "astryx-radio-indicator",
+				"aria-hidden": "true",
+				"data-state": checked.value ? "checked" : "unchecked",
+				"data-size": props.size,
+				"data-disabled": __props.isDisabled || void 0
+			}), [renderSlot(_ctx.$slots, "default", {}, () => [checked.value ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("v-if", true)])], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/Indicator/registry.ts
+/**
+* The graphics this package ships.
+*
+* A theme's `indicators` entries replace these by name. The set is closed:
+* a name added by augmentation is not in here.
+*/
+const defaultIndicators = {
+	check: _sfc_main$1,
+	checkbox: _sfc_main$3,
+	radio: _sfc_main
+};
+function isCoreIndicatorName(name) {
+	return name === "check" || name === "checkbox" || name === "radio";
+}
+function themeIndicators(theme) {
+	return theme?.indicators;
+}
+function getIndicator(name, theme) {
+	const override = themeIndicators(theme)?.[name];
+	if (override) return override;
+	if (isCoreIndicatorName(name)) return defaultIndicators[name];
+}
+//#endregion
+//#region src/Indicator/useIndicator.ts
+function useIndicator(name) {
+	const context = inject(themeContextKey, null);
+	return computed(() => getIndicator(name, context?.value.theme));
+}
+//#endregion
+export { _sfc_main as a, isCoreIndicatorName as i, defaultIndicators as n, _sfc_main$1 as o, getIndicator as r, isRenderable as s, useIndicator as t };