@astryx-vue/core 0.1.0 → 0.1.1

package/dist/locale/index.js

@@ -1,2 +1,3 @@
-import { a as useAstryxMessages, i as useAstryxLocale, n as normalizeLocale, o as formatCalendarMonth, r as provideAstryxLocale, s as weekdayNames, t as astryxLocaleKey } from "../locale-56lkR7OK.js";
+import { n as weekdayNames, t as formatCalendarMonth } from "../locale-Cpk_nrLA.js";
+import { a as useAstryxMessages, i as useAstryxLocale, n as normalizeLocale, r as provideAstryxLocale, t as astryxLocaleKey } from "../context-BshXcNYX.js";
 export { astryxLocaleKey, formatCalendarMonth, normalizeLocale, provideAstryxLocale, useAstryxLocale, useAstryxMessages, weekdayNames };

package/dist/locale-Cpk_nrLA.js

@@ -0,0 +1,18 @@
+//#region src/locale/format.ts
+const weekdayStart = new Date(2023, 0, 1);
+function formatCalendarMonth(year, month, locale) {
+	return new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric"
+	}).format(new Date(year, month - 1, 1));
+}
+function weekdayNames(locale, style) {
+	const formatter = new Intl.DateTimeFormat(locale, { weekday: style });
+	return Array.from({ length: 7 }, (_, index) => {
+		const date = new Date(weekdayStart);
+		date.setDate(weekdayStart.getDate() + index);
+		return formatter.format(date);
+	});
+}
+//#endregion
+export { weekdayNames as n, formatCalendarMonth as t };

package/dist/useFileSelection-BPtaegqK.js

@@ -0,0 +1,58 @@
+//#region src/composables/useFileSelection.ts
+function matchesAccept(file, accept) {
+	if (accept == null || accept.trim() === "") return true;
+	const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+	const megabytes = bytes / 1048576;
+	return `${megabytes >= 10 ? Math.round(megabytes) : Math.round(megabytes * 10) / 10} MB`;
+}
+function selectFiles(list, options) {
+	const incoming = list == null ? [] : [...list];
+	const rejections = [];
+	let accepted = incoming.filter((file) => {
+		if (!matchesAccept(file, options.accept)) {
+			rejections.push({
+				code: "type",
+				fileName: file.name
+			});
+			return false;
+		}
+		if (options.maxSize != null && file.size > options.maxSize) {
+			rejections.push({
+				code: "size",
+				fileName: file.name,
+				maxSize: options.maxSize
+			});
+			return false;
+		}
+		return true;
+	});
+	if (options.isMultiple && options.maxFiles != null && accepted.length > options.maxFiles) {
+		rejections.push({
+			code: "count",
+			maxFiles: options.maxFiles
+		});
+		accepted = accepted.slice(0, options.maxFiles);
+	}
+	if (!options.isMultiple) return {
+		files: accepted[0] ?? null,
+		rejections
+	};
+	return {
+		files: accepted,
+		rejections
+	};
+}
+//#endregion
+export { selectFiles as n, formatFileSize as t };

package/dist/useMonthGrid-CmJsZTcB.js

@@ -0,0 +1,139 @@
+import { CalendarDate } from "@internationalized/date";
+//#region src/composables/useDateRange.ts
+const WEEKDAY_INDEX = {
+	sun: 0,
+	mon: 1,
+	tue: 2,
+	wed: 3,
+	thu: 4,
+	fri: 5,
+	sat: 6
+};
+function resolveWeekStart(value) {
+	if (value == null) return 0;
+	if (typeof value === "number") return (value % 7 + 7) % 7;
+	return WEEKDAY_INDEX[value.toLowerCase()] ?? 0;
+}
+function compareISODate(a, b) {
+	return a < b ? -1 : a > b ? 1 : 0;
+}
+function spanDays(start, end) {
+	const [startYear, startMonth, startDay] = start.split("-").map(Number);
+	const [endYear, endMonth, endDay] = end.split("-").map(Number);
+	const startUtc = Date.UTC(startYear, startMonth - 1, startDay);
+	const endUtc = Date.UTC(endYear, endMonth - 1, endDay);
+	return Math.round((endUtc - startUtc) / 864e5) + 1;
+}
+function orderRange(a, b) {
+	return compareISODate(a, b) <= 0 ? {
+		start: a,
+		end: b
+	} : {
+		start: b,
+		end: a
+	};
+}
+function isSameRange(a, b) {
+	if (a == null || b == null) return a === b;
+	return a.start === b.start && a.end === b.end;
+}
+function isRangeWithinSpan(range, minRangeSpan = 1, maxRangeSpan) {
+	const span = spanDays(range.start, range.end);
+	if (span < minRangeSpan) return false;
+	if (maxRangeSpan != null && span > maxRangeSpan) return false;
+	return true;
+}
+/**
+* 第一次点击记下起点。第二次点击在跨度合法时提交区间。
+* 再次点击起点时，最短跨度允许单日就提交单日，否则取消这次选择。
+*/
+function applyRangeClick(pending, day, minRangeSpan = 1, maxRangeSpan) {
+	if (pending == null) return {
+		pending: day,
+		commit: null
+	};
+	if (pending === day) {
+		if (minRangeSpan <= 1) return {
+			pending: null,
+			commit: {
+				start: day,
+				end: day
+			}
+		};
+		return {
+			pending: null,
+			commit: null
+		};
+	}
+	const range = orderRange(pending, day);
+	if (!isRangeWithinSpan(range, minRangeSpan, maxRangeSpan)) return {
+		pending,
+		commit: null
+	};
+	return {
+		pending: null,
+		commit: range
+	};
+}
+function isDayOutsideSpan(pending, day, minRangeSpan = 1, maxRangeSpan) {
+	if (pending == null || pending === day) return false;
+	return !isRangeWithinSpan(orderRange(pending, day), minRangeSpan, maxRangeSpan);
+}
+function formatDateRange(range, locale) {
+	if (range == null) return "";
+	const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+	const startYear = Number(range.start.slice(0, 4));
+	const withYear = !(startYear === Number(range.end.slice(0, 4)) && startYear === currentYear);
+	const formatter = new Intl.DateTimeFormat(locale === "zh-CN" ? "zh-CN" : "en", {
+		month: "short",
+		day: "numeric",
+		year: withYear ? "numeric" : void 0
+	});
+	const format = (iso) => {
+		const [year, month, day] = iso.split("-").map(Number);
+		return formatter.format(new Date(year, month - 1, day));
+	};
+	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 };

package/dist/useTimeValue-DWk6oTAZ.js

@@ -0,0 +1,113 @@
+import { computed, onMounted, onScopeDispose, shallowRef } from "vue";
+//#region src/composables/useCoarsePointer.ts
+/** 粗指针（触摸）为 true。服务端和细指针设备为 false。 */
+function useCoarsePointer() {
+	const coarse = shallowRef(false);
+	let query;
+	function update() {
+		coarse.value = query?.matches ?? false;
+	}
+	onMounted(() => {
+		query = window.matchMedia("(pointer: coarse)");
+		update();
+		query.addEventListener("change", update);
+	});
+	onScopeDispose(() => {
+		query?.removeEventListener("change", update);
+	});
+	return computed(() => coarse.value);
+}
+//#endregion
+//#region src/composables/useTimeValue.ts
+const DISPLAY_TIME = /^(\d{1,2})(?::(\d{2}))?(?::(\d{2}))?\s*([ap])\.?m\.?$/i;
+const COMPACT_TIME = /^(\d{2})(\d{2})(\d{2})?$/;
+const ISO_TIME = /^(\d{2}):(\d{2})(?::(\d{2}))?$/;
+function clampPart(value, max) {
+	return Number.isInteger(value) && value >= 0 && value <= max;
+}
+function parseISOTime(value) {
+	const match = ISO_TIME.exec(value.trim());
+	if (!match) return null;
+	const hours = Number(match[1]);
+	const minutes = Number(match[2]);
+	const seconds = match[3] == null ? 0 : Number(match[3]);
+	if (!clampPart(hours, 23) || !clampPart(minutes, 59) || !clampPart(seconds, 59)) return null;
+	return {
+		hours,
+		minutes,
+		seconds
+	};
+}
+function formatISOTime(time, hasSeconds) {
+	const hours = String(time.hours).padStart(2, "0");
+	const minutes = String(time.minutes).padStart(2, "0");
+	const seconds = String(time.seconds).padStart(2, "0");
+	return hasSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
+}
+function formatDisplayTime(value, hourFormat, hasSeconds) {
+	const parsed = parseISOTime(value);
+	if (!parsed) return value;
+	if (hourFormat === "24h") return formatISOTime(parsed, hasSeconds);
+	const suffix = parsed.hours < 12 ? "AM" : "PM";
+	return `${parsed.hours % 12 || 12}:${String(parsed.minutes).padStart(2, "0")}${hasSeconds ? `:${String(parsed.seconds).padStart(2, "0")}` : ""} ${suffix}`;
+}
+function parseDisplayTime(text, hasSeconds) {
+	const trimmed = text.trim();
+	if (!trimmed) return null;
+	const meridiem = DISPLAY_TIME.exec(trimmed);
+	if (meridiem) {
+		let hours = Number(meridiem[1]);
+		const minutes = meridiem[2] == null ? 0 : Number(meridiem[2]);
+		const seconds = meridiem[3] == null ? 0 : Number(meridiem[3]);
+		if (!clampPart(hours, 12) || hours === 0 || !clampPart(minutes, 59) || !clampPart(seconds, 59)) return null;
+		const isPm = meridiem[4].toLowerCase() === "p";
+		if (hours === 12) hours = isPm ? 12 : 0;
+		else if (isPm) hours += 12;
+		return formatISOTime({
+			hours,
+			minutes,
+			seconds
+		}, hasSeconds);
+	}
+	const compact = COMPACT_TIME.exec(trimmed);
+	if (compact) return parseDisplayTime(`${compact[1]}:${compact[2]}${compact[3] ? `:${compact[3]}` : ""}`, hasSeconds);
+	const iso = parseISOTime(trimmed);
+	if (!iso) return null;
+	return formatISOTime(iso, hasSeconds);
+}
+function shiftTime(value, minuteDelta, hasSeconds) {
+	const parsed = parseISOTime(value) ?? {
+		hours: 0,
+		minutes: 0,
+		seconds: 0
+	};
+	const total = parsed.hours * 60 + parsed.minutes + minuteDelta;
+	const day = 1440;
+	const normalized = (total % day + day) % day;
+	return formatISOTime({
+		hours: Math.floor(normalized / 60),
+		minutes: normalized % 60,
+		seconds: parsed.seconds
+	}, hasSeconds);
+}
+function comparable(value) {
+	const parsed = parseISOTime(value);
+	if (!parsed) return value;
+	return formatISOTime(parsed, true);
+}
+function isTimeInRange(value, min, max) {
+	const current = comparable(value);
+	if (min && current < comparable(min)) return false;
+	if (max && current > comparable(max)) return false;
+	return true;
+}
+function resolveTimeSurface(options) {
+	const presentation = options.presentation ?? (options.nativePicker === "always" ? "native" : options.nativePicker === "never" ? "text-input" : "adaptive-native");
+	const needsTypedField = options.hasSeconds || options.increment !== 1;
+	if (presentation === "text-input" || presentation === "popover" || presentation === "bottom-sheet") return "text";
+	if (needsTypedField) return "text";
+	if (presentation === "native") return "native";
+	return options.coarse ? "native" : "text";
+}
+//#endregion
+export { parseISOTime as a, useCoarsePointer as c, parseDisplayTime as i, formatISOTime as n, resolveTimeSurface as o, isTimeInRange as r, shiftTime as s, formatDisplayTime as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -36,6 +36,34 @@
       "types": "./dist/AvatarGroup/index.d.ts",
       "import": "./dist/AvatarGroup/index.js"
     },
+    "./CheckboxList": {
+      "types": "./dist/CheckboxList/index.d.ts",
+      "import": "./dist/CheckboxList/index.js"
+    },
+    "./DateRangeInput": {
+      "types": "./dist/DateRangeInput/index.d.ts",
+      "import": "./dist/DateRangeInput/index.js"
+    },
+    "./DateTimeInput": {
+      "types": "./dist/DateTimeInput/index.d.ts",
+      "import": "./dist/DateTimeInput/index.js"
+    },
+    "./FieldStatus": {
+      "types": "./dist/FieldStatus/index.d.ts",
+      "import": "./dist/FieldStatus/index.js"
+    },
+    "./FileInput": {
+      "types": "./dist/FileInput/index.d.ts",
+      "import": "./dist/FileInput/index.js"
+    },
+    "./MetadataList": {
+      "types": "./dist/MetadataList/index.d.ts",
+      "import": "./dist/MetadataList/index.js"
+    },
+    "./RadioList": {
+      "types": "./dist/RadioList/index.d.ts",
+      "import": "./dist/RadioList/index.js"
+    },
     "./StatusDot": {
       "types": "./dist/StatusDot/index.d.ts",
       "import": "./dist/StatusDot/index.js"
@@ -88,6 +116,22 @@
       "types": "./dist/Radio/index.d.ts",
       "import": "./dist/Radio/index.js"
     },
+    "./Table": {
+      "types": "./dist/Table/index.d.ts",
+      "import": "./dist/Table/index.js"
+    },
+    "./Thumbnail": {
+      "types": "./dist/Thumbnail/index.d.ts",
+      "import": "./dist/Thumbnail/index.js"
+    },
+    "./TimeInput": {
+      "types": "./dist/TimeInput/index.d.ts",
+      "import": "./dist/TimeInput/index.js"
+    },
+    "./Timestamp": {
+      "types": "./dist/Timestamp/index.d.ts",
+      "import": "./dist/Timestamp/index.js"
+    },
     "./Tooltip": {
       "types": "./dist/Tooltip/index.d.ts",
       "import": "./dist/Tooltip/index.js"
@@ -136,6 +180,10 @@
       "types": "./dist/Toast/index.d.ts",
       "import": "./dist/Toast/index.js"
     },
+    "./TreeList": {
+      "types": "./dist/TreeList/index.d.ts",
+      "import": "./dist/TreeList/index.js"
+    },
     "./VisuallyHidden": {
       "types": "./dist/VisuallyHidden/index.d.ts",
       "import": "./dist/VisuallyHidden/index.js"

package/styles/bordered-control.css

@@ -0,0 +1,87 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-bordered-control {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+    height: var(--astryx-input-height-md, 32px);
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: 1px solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-primary, #171717);
+    background: var(--astryx-input-background, #fff);
+    font-family: inherit;
+    font-size: var(--astryx-text-body-size, 14px);
+    font-weight: 400;
+    line-height: 1.4286;
+    transition: border-color 130ms cubic-bezier(0.24, 1, 0.4, 1), box-shadow 130ms cubic-bezier(0.24, 1, 0.4, 1);
+  }
+
+  .astryx-bordered-control[data-size='sm'] {
+    height: var(--astryx-input-height-sm, 28px);
+  }
+
+  .astryx-bordered-control[data-size='lg'] {
+    height: var(--astryx-input-height-lg, 36px);
+  }
+
+  .astryx-bordered-control[data-status='error'],
+  .astryx-date-time-input[data-status='error'] {
+    --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-bordered-control[data-status='warning'],
+  .astryx-date-time-input[data-status='warning'] {
+    --astryx-input-status-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-bordered-control[data-status='success'],
+  .astryx-date-time-input[data-status='success'] {
+    --astryx-input-status-color: var(--astryx-input-success, #198100);
+  }
+
+  @media (hover: hover) {
+    .astryx-bordered-control:not([data-disabled='true']):hover:not(:focus-within) {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4)) 30%, transparent);
+    }
+  }
+
+  .astryx-bordered-control:focus-within {
+    border-color: var(--astryx-input-status-color, var(--astryx-input-focus, #262626));
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-focus, #262626)) 15%, transparent);
+  }
+
+  .astryx-bordered-control[data-disabled='true'] {
+    opacity: 0.5;
+    box-shadow: none;
+    cursor: default;
+  }
+
+  .astryx-bordered-control > .astryx-field-icon {
+    color: var(--astryx-input-status-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-bordered-control {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-bordered-control {
+      border-color: ButtonText;
+      color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .astryx-bordered-control:focus-within {
+      border-color: Highlight;
+    }
+  }
+}

package/styles/calendar.css

@@ -115,8 +115,12 @@
   }
 
   .astryx-calendar-cell.is-selected {
-    background: var(--astryx-button-primary-background, light-dark(#262626, #ebebeb));
-    color: var(--astryx-button-primary-foreground, light-dark(#ffffff, #171717));
+    background: light-dark(#1b1b1b, #f1f1f1);
+    color: light-dark(#ffffff, #111111);
+  }
+
+  .astryx-calendar-cell.is-today.is-selected {
+    box-shadow: inset 0 0 0 1px light-dark(#000000, #ffffff);
   }
 
   .astryx-calendar-cell.is-disabled {
@@ -126,6 +130,8 @@
   }
 
   .astryx-calendar-day {
+    position: relative;
+    z-index: 1;
     font-size: var(--astryx-text-body-size, 0.875rem);
   }
 

package/styles/checkbox-list.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-checkbox-list {
+    min-width: 0;
+  }
+
+  .astryx-checkbox-list .astryx-item[data-selected='true'] {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-checkbox-list .astryx-checkbox-input {
+    gap: 0;
+  }
+}