@astryx-vue/core 0.1.0 → 0.1.1

package/dist/Text/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TextProps, c as TextWeight, i as TextDisplay, n as TextAs, o as TextSize, r as TextColor, s as TextType, t as _default } from "../index-BQuN_dWR.js";
+import { a as TextProps, c as TextWeight, i as TextDisplay, n as TextAs, o as TextSize, r as TextColor, s as TextType, t as _default } from "../index-BzqRns96.js";
 export { _default as Text, type TextAs, type TextColor, type TextDisplay, type TextProps, type TextSize, type TextType, type TextWeight };

package/dist/TextArea/index.d.ts

@@ -1,2 +1,2 @@
-import { at as TextAreaProps, ct as TextAreaSlots, dt as TextAreaWrap, it as TextAreaEmits, lt as TextAreaStatus, nt as TextAreaChangeAction, ot as TextAreaResize, rt as TextAreaChangeEvent, st as TextAreaSize, tt as _default, ut as TextAreaStatusType } from "../index-CaHXYQ_E.js";
+import { Ct as TextAreaSize, Dt as TextAreaWrap, Et as TextAreaStatusType, St as TextAreaResize, Tt as TextAreaStatus, _t as _default, bt as TextAreaEmits, vt as TextAreaChangeAction, wt as TextAreaSlots, xt as TextAreaProps, yt as TextAreaChangeEvent } from "../index-CQ9F1f_F.js";
 export { _default as TextArea, type TextAreaChangeAction, type TextAreaChangeEvent, type TextAreaEmits, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaSlots, type TextAreaStatus, type TextAreaStatusType, type TextAreaWrap };

package/dist/TextInput/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as TextInputStatusType, G as _default, J as TextInputEmits, K as TextInputChangeAction, Q as TextInputStatus, X as TextInputSize, Y as TextInputProps, Z as TextInputSlots, et as TextInputType, q as TextInputChangeEvent } from "../index-CaHXYQ_E.js";
+import { ct as TextInputChangeAction, dt as TextInputProps, ft as TextInputSize, gt as TextInputType, ht as TextInputStatusType, lt as TextInputChangeEvent, mt as TextInputStatus, pt as TextInputSlots, st as _default, ut as TextInputEmits } from "../index-CQ9F1f_F.js";
 export { _default as TextInput, type TextInputChangeAction, type TextInputChangeEvent, type TextInputEmits, type TextInputProps, type TextInputSize, type TextInputSlots, type TextInputStatus, type TextInputStatusType, type TextInputType };

package/dist/Thumbnail/index.d.ts

@@ -0,0 +1,2 @@
+import { i as ThumbnailRemoveVisibility, n as ThumbnailEmits, r as ThumbnailProps, t as _default } from "../index-CtlkhQ55.js";
+export { _default as Thumbnail, type ThumbnailEmits, type ThumbnailProps, type ThumbnailRemoveVisibility };

package/dist/Thumbnail/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../Thumbnail-DMOgWncm.js";
+export { _sfc_main as Thumbnail };

package/dist/Thumbnail-DMOgWncm.js

@@ -0,0 +1,163 @@
+import { t as _sfc_main$1 } from "./IconButton-BNQuz9W_.js";
+import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { t as _sfc_main$2 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$4 } from "./Tooltip-mp0NMh_Y.js";
+import { t as _sfc_main$5 } from "./Skeleton-CrgWxJgr.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, openBlock, ref, unref, watch, withCtx } from "vue";
+import "../styles/thumbnail.css";
+//#region src/Thumbnail/Thumbnail.vue
+const _hoisted_1 = ["data-disabled", "aria-label"];
+const _hoisted_2 = { class: "astryx-thumbnail__frame" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = [
+	"src",
+	"alt",
+	"role",
+	"aria-hidden"
+];
+const _hoisted_5 = {
+	key: 2,
+	class: "astryx-thumbnail__placeholder"
+};
+const _hoisted_6 = [
+	"src",
+	"alt",
+	"role",
+	"aria-hidden"
+];
+const _hoisted_7 = {
+	key: 2,
+	class: "astryx-thumbnail__placeholder"
+};
+const _hoisted_8 = {
+	key: 2,
+	class: "astryx-thumbnail__border"
+};
+const _hoisted_9 = {
+	key: 3,
+	class: "astryx-thumbnail__loading"
+};
+const _hoisted_10 = ["data-reveal"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxThumbnail",
+	inheritAttrs: false,
+	__name: "Thumbnail",
+	props: {
+		src: {},
+		alt: {},
+		label: {},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		showRemoveOn: { default: "hover" }
+	},
+	emits: ["remove", "click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const failedSrc = ref();
+		const instance = getCurrentInstance();
+		watch(() => props.src, () => {
+			failedSrc.value = void 0;
+		});
+		function hasListener(name) {
+			return instance?.vnode.props?.[name] != null;
+		}
+		const hasSrc = computed(() => props.src != null && props.src !== "");
+		const hasError = computed(() => hasSrc.value && failedSrc.value === props.src);
+		const showSkeleton = computed(() => props.isLoading && !hasSrc.value);
+		const showImage = computed(() => hasSrc.value && !showSkeleton.value && !hasError.value);
+		const showUpload = computed(() => props.isLoading && hasSrc.value);
+		const showPlaceholder = computed(() => !props.isLoading && !hasSrc.value || Boolean(hasError.value));
+		const accessibleName = computed(() => {
+			if (props.label && props.alt) return `${props.label} — ${props.alt}`;
+			return props.label ?? props.alt ?? messages.value.thumbnail.fallbackName;
+		});
+		function onImageError() {
+			failedSrc.value = props.src;
+		}
+		function onOpen(event) {
+			emit("click", event);
+		}
+		function onRemove(event) {
+			event.stopPropagation();
+			emit("remove", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$4, {
+				content: __props.label ?? "",
+				"is-enabled": __props.label != null,
+				"has-hover-indication": false
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(["astryx-thumbnail", _ctx.$attrs.class]),
+					style: normalizeStyle(_ctx.$attrs.style),
+					"data-disabled": __props.isDisabled || void 0,
+					role: "group",
+					"aria-label": accessibleName.value
+				}, [createElementVNode("div", _hoisted_2, [
+					hasListener("onClick") && !__props.isDisabled && !__props.isLoading ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-thumbnail__open",
+						"aria-label": unref(messages).thumbnail.open(accessibleName.value),
+						onClick: onOpen
+					}, [showImage.value ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						class: "astryx-thumbnail__image",
+						src: __props.src,
+						alt: __props.alt ?? "",
+						role: __props.alt ? void 0 : "presentation",
+						"aria-hidden": __props.alt ? void 0 : "true",
+						onError: onImageError
+					}, null, 40, _hoisted_4)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
+						key: 1,
+						radius: 2
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(_sfc_main$2, { icon: "image" })])) : createCommentVNode("v-if", true)], 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [showImage.value ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						class: "astryx-thumbnail__image",
+						src: __props.src,
+						alt: __props.alt ?? "",
+						role: __props.alt ? void 0 : "presentation",
+						"aria-hidden": __props.alt ? void 0 : "true",
+						onError: onImageError
+					}, null, 40, _hoisted_6)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
+						key: 1,
+						radius: 2
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$2, { icon: "image" })])) : createCommentVNode("v-if", true)], 64)),
+					showImage.value ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("v-if", true),
+					showUpload.value ? (openBlock(), createElementBlock("span", _hoisted_9, [createVNode(_sfc_main$3, {
+						size: "sm",
+						shade: "onMedia"
+					})])) : createCommentVNode("v-if", true),
+					hasListener("onRemove") && !__props.isDisabled ? (openBlock(), createElementBlock("span", {
+						key: 4,
+						class: "astryx-thumbnail__remove",
+						"data-reveal": __props.showRemoveOn
+					}, [createVNode(_sfc_main$1, {
+						variant: "secondary",
+						size: "sm",
+						label: unref(messages).thumbnail.remove(accessibleName.value),
+						onClick: onRemove
+					}, {
+						default: withCtx(() => [createVNode(_sfc_main$2, {
+							icon: "close",
+							size: "sm"
+						})]),
+						_: 1
+					}, 8, ["label"])], 8, _hoisted_10)) : createCommentVNode("v-if", true)
+				])], 14, _hoisted_1)]),
+				_: 1
+			}, 8, ["content", "is-enabled"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/TimeField-DeQ1ukHl.js

@@ -0,0 +1,214 @@
+import { c as useCoarsePointer, i as parseDisplayTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-DWk6oTAZ.js";
+import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
+import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { t as _sfc_main$3 } from "./Icon-5MdZQ18k.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 };

package/dist/TimeInput/index.d.ts

@@ -0,0 +1,2 @@
+import { at as TimeInputProps, it as TimeInputEmits, ot as TimeInputSize, rt as _default } from "../index-CQ9F1f_F.js";
+export { _default as TimeInput, type TimeInputEmits, type TimeInputProps, type TimeInputSize };

package/dist/TimeInput/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../TimeInput-jb1nLqZk.js";
+export { _sfc_main as TimeInput };

package/dist/TimeInput-jb1nLqZk.js

@@ -0,0 +1,121 @@
+import { t as _sfc_main$1 } from "./Field-VlTBsIEo.js";
+import { t as _sfc_main$2 } from "./TimeField-DeQ1ukHl.js";
+import { computed, createBlock, createVNode, defineComponent, mergeModels, openBlock, useId, useModel, withCtx } from "vue";
+//#region src/TimeInput/TimeInput.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTimeInput",
+	__name: "TimeInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		id: {},
+		description: {},
+		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 },
+		isOptional: { type: Boolean },
+		isLabelHidden: { type: Boolean },
+		status: {},
+		statusVariant: { default: "attached" },
+		width: {}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		const generatedId = `astryx-time-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$1, {
+				label: __props.label,
+				"input-id": inputId.value,
+				description: __props.description,
+				width: __props.width,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-disabled": __props.isDisabled,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				status: __props.status,
+				"status-variant": __props.statusVariant
+			}, {
+				default: withCtx((field) => [createVNode(_sfc_main$2, {
+					modelValue: model.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					label: __props.label,
+					"input-id": inputId.value,
+					"described-by": field.describedBy,
+					"labelled-by": field.labelId,
+					placeholder: __props.placeholder,
+					"hour-format": __props.hourFormat,
+					"has-seconds": __props.hasSeconds,
+					increment: __props.increment,
+					min: __props.min,
+					max: __props.max,
+					presentation: __props.presentation,
+					"native-picker": __props.nativePicker,
+					"has-clear": __props.hasClear,
+					"clear-label": __props.clearLabel,
+					size: __props.size,
+					"is-disabled": __props.isDisabled,
+					"is-read-only": __props.isReadOnly,
+					"is-required": __props.isRequired && !__props.isOptional,
+					status: __props.status
+				}, null, 8, [
+					"modelValue",
+					"label",
+					"input-id",
+					"described-by",
+					"labelled-by",
+					"placeholder",
+					"hour-format",
+					"has-seconds",
+					"increment",
+					"min",
+					"max",
+					"presentation",
+					"native-picker",
+					"has-clear",
+					"clear-label",
+					"size",
+					"is-disabled",
+					"is-read-only",
+					"is-required",
+					"status"
+				])]),
+				_: 1
+			}, 8, [
+				"label",
+				"input-id",
+				"description",
+				"width",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"status",
+				"status-variant"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Timestamp/index.d.ts

@@ -0,0 +1,2 @@
+import { $ as formatRelativeTime, G as _default, J as TimestampProps, K as TimestampColor, Q as formatTooltipLines, X as TimestampTooltipFormat, Y as TimestampTooltipEntry, Z as TimestampTooltipLine, et as FormatInstantOptions, nt as formatInstant, q as TimestampFormat, tt as InstantFormat } from "../index-CQ9F1f_F.js";
+export { type FormatInstantOptions, type InstantFormat, _default as Timestamp, type TimestampColor, type TimestampFormat, type TimestampProps, type TimestampTooltipEntry, type TimestampTooltipFormat, type TimestampTooltipLine, formatInstant, formatRelativeTime, formatTooltipLines };

package/dist/Timestamp/index.js

@@ -0,0 +1,2 @@
+import { i as formatInstant, n as formatTooltipLines, r as formatRelativeTime, t as _sfc_main } from "../Timestamp-DrWwVQBL.js";
+export { _sfc_main as Timestamp, formatInstant, formatRelativeTime, formatTooltipLines };