@astryx-vue/core 0.2.5 → 0.3.0

package/dist/FileInput-BpdiO1V8.js

@@ -0,0 +1,285 @@
+import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
+import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { n as selectFiles, t as formatFileSize } from "./useFileSelection-BPtaegqK.js";
+import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$4 } from "./IconButton-DDNgNl7B.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$5 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$6 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$7 } from "./Field-D5gUEGw4.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, withCtx } from "vue";
+import "../styles/bordered-control.css";
+import "../styles/file-input.css";
+//#region src/FileInput/FileInput.vue
+const _hoisted_1 = [
+	"data-mode",
+	"data-size",
+	"data-status",
+	"data-disabled",
+	"data-drag"
+];
+const _hoisted_2 = [
+	"id",
+	"accept",
+	"multiple",
+	"disabled"
+];
+const _hoisted_3 = [
+	"id",
+	"disabled",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-describedby"
+];
+const _hoisted_4 = ["data-placeholder"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxFileInput",
+	inheritAttrs: false,
+	__name: "FileInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		id: {},
+		accept: {},
+		description: {},
+		placeholder: {},
+		mode: { default: "input" },
+		size: { default: "md" },
+		isMultiple: {
+			type: Boolean,
+			default: false
+		},
+		maxSize: {},
+		maxFiles: {},
+		isDisabled: { type: Boolean },
+		isRequired: { type: Boolean },
+		isOptional: { type: Boolean },
+		isLabelHidden: { type: Boolean },
+		labelTooltip: {},
+		isLoading: { type: Boolean },
+		disabledMessage: {},
+		status: {},
+		statusVariant: { default: "attached" },
+		width: {},
+		clearLabel: {}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const generatedId = `astryx-file-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const requiredId = `${generatedId}-required`;
+		const fileInput = useTemplateRef("file");
+		const controlRef = useTemplateRef("control");
+		const validationError = shallowRef(null);
+		const dragOver = shallowRef(false);
+		const disabledMessageId = `${generatedId}-disabled`;
+		const disabledMessage = computed(() => props.disabledMessage?.trim() || void 0);
+		const showsDisabledMessage = computed(() => props.isDisabled === true && disabledMessage.value != null);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const placeholder = computed(() => props.placeholder ?? (props.isMultiple ? messages.value.fileInput.placeholderMultiple : messages.value.fileInput.placeholder));
+		const clearLabel = computed(() => props.clearLabel ?? messages.value.fileInput.clear);
+		const status = computed(() => props.status ?? (validationError.value ? {
+			type: "error",
+			message: validationError.value
+		} : void 0));
+		const fileLabel = computed(() => {
+			const value = model.value;
+			if (value == null) return "";
+			const files = Array.isArray(value) ? value : [value];
+			if (files.length === 0) return "";
+			if (files.length === 1) return files[0]?.name ?? "";
+			return files.map((file) => file.name).join(", ");
+		});
+		const conveysRequired = computed(() => props.isRequired && !props.isOptional);
+		function commit(value) {
+			model.value = value;
+			emit("change", value);
+		}
+		function applyFiles(list) {
+			if (props.isDisabled) return;
+			const result = selectFiles(list, {
+				accept: props.accept,
+				maxSize: props.maxSize,
+				maxFiles: props.maxFiles,
+				isMultiple: props.isMultiple
+			});
+			const first = result.rejections[0];
+			if (first?.code === "type" && first.fileName) validationError.value = messages.value.fileInput.errorType(first.fileName);
+			else if (first?.code === "size" && first.fileName) validationError.value = messages.value.fileInput.errorSize(first.fileName, formatFileSize(first.maxSize ?? 0));
+			else if (first?.code === "count") validationError.value = messages.value.fileInput.errorCount(first.maxFiles ?? 0);
+			else validationError.value = null;
+			const files = result.files;
+			commit(files);
+			if (validationError.value == null && files != null) {
+				const selected = Array.isArray(files) ? files : [files];
+				if (selected.length === 1 && selected[0]) announce(messages.value.fileInput.fileSelected(selected[0].name));
+				else if (selected.length > 1) announce(messages.value.fileInput.filesSelected(selected.length));
+			}
+			if (fileInput.value) fileInput.value.value = "";
+		}
+		function openPicker() {
+			if (!props.isDisabled) fileInput.value?.click();
+		}
+		function onChange(event) {
+			applyFiles(event.target.files);
+		}
+		function clear() {
+			if (props.isDisabled) return;
+			validationError.value = null;
+			commit(null);
+			if (fileInput.value) fileInput.value.value = "";
+		}
+		function onDragOver(event) {
+			if (props.mode !== "dropzone" || props.isDisabled) return;
+			event.preventDefault();
+			dragOver.value = true;
+		}
+		function onDragLeave() {
+			dragOver.value = false;
+		}
+		function onDrop(event) {
+			if (props.mode !== "dropzone" || props.isDisabled) return;
+			event.preventDefault();
+			dragOver.value = false;
+			applyFiles(event.dataTransfer?.files);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(_sfc_main$7, {
+					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,
+					"label-tooltip": __props.labelTooltip,
+					status: status.value,
+					"status-variant": __props.statusVariant
+				}, {
+					default: withCtx((field) => [createElementVNode("div", {
+						ref: "control",
+						class: "astryx-file-input astryx-bordered-control",
+						"data-mode": __props.mode,
+						"data-size": __props.size,
+						"data-status": status.value?.type,
+						"data-disabled": __props.isDisabled || void 0,
+						"data-drag": dragOver.value || void 0,
+						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [
+						createElementVNode("input", {
+							id: `${inputId.value}-file`,
+							ref: "file",
+							class: "astryx-file-input-native",
+							type: "file",
+							accept: __props.accept,
+							multiple: __props.isMultiple || void 0,
+							disabled: __props.isDisabled,
+							tabindex: "-1",
+							onChange
+						}, null, 40, _hoisted_2),
+						createElementVNode("button", {
+							id: inputId.value,
+							type: "button",
+							class: "astryx-file-input-trigger",
+							disabled: __props.isDisabled && !showsDisabledMessage.value,
+							"aria-disabled": showsDisabledMessage.value || void 0,
+							"aria-invalid": status.value?.type === "error" || void 0,
+							"aria-describedby": [
+								field.describedBy,
+								conveysRequired.value ? requiredId : void 0,
+								showsDisabledMessage.value ? disabledMessageId : void 0
+							].filter(Boolean).join(" ") || void 0,
+							onClick: openPicker,
+							onDragover: onDragOver,
+							onDragleave: onDragLeave,
+							onDrop,
+							onFocus: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onFocus && unref(disabledTooltip).onFocus(...args)),
+							onBlur: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args))
+						}, [createVNode(_sfc_main$5, {
+							class: "astryx-file-input-icon",
+							icon: "upload",
+							size: "sm"
+						}), createElementVNode("span", {
+							class: "astryx-file-input-text",
+							"data-placeholder": !fileLabel.value || void 0
+						}, toDisplayString(fileLabel.value || placeholder.value), 9, _hoisted_4)], 40, _hoisted_3),
+						fileLabel.value && !__props.isDisabled ? (openBlock(), createBlock(_sfc_main$4, {
+							key: 0,
+							class: "astryx-input-clear-button",
+							variant: "ghost",
+							size: "sm",
+							label: clearLabel.value,
+							onClick: clear
+						}, {
+							default: withCtx(() => [createVNode(_sfc_main$3, { type: "clear" })]),
+							_: 1
+						}, 8, ["label"])) : createCommentVNode("v-if", true),
+						__props.isLoading ? (openBlock(), createBlock(_sfc_main$6, {
+							key: 1,
+							size: "sm"
+						})) : status.value ? (openBlock(), createBlock(_sfc_main$3, {
+							key: 2,
+							type: status.value.type
+						}, null, 8, ["type"])) : createCommentVNode("v-if", true)
+					], 40, _hoisted_1), conveysRequired.value ? (openBlock(), createBlock(_sfc_main$1, {
+						key: 0,
+						id: requiredId
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).fileInput.required), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true)]),
+					_: 1
+				}, 8, [
+					"label",
+					"input-id",
+					"description",
+					"width",
+					"is-label-hidden",
+					"is-disabled",
+					"is-optional",
+					"is-required",
+					"label-tooltip",
+					"status",
+					"status-variant"
+				]),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					id: disabledMessageId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(disabledMessage.value), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					id: `${disabledMessageId}-tooltip`,
+					anchor: controlRef.value,
+					open: unref(disabledTooltip).isOpen.value,
+					text: disabledMessage.value ?? "",
+					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+				}, null, 8, [
+					"id",
+					"anchor",
+					"open",
+					"text",
+					"onPointerEnter",
+					"onPointerLeave"
+				])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Grid/index.d.ts

@@ -1,2 +1,2 @@
-import { a as GridProps, c as GridSizeValue, d as GridSpanProps, f as GridSpanSlots, i as GridColumns, l as GridSlots, n as _default, o as GridRepeat, r as GridAlignment, s as GridResponsiveColumns, t as _default$1, u as GridSpanColumns } from "../index-c67ca7eJ.js";
+import { a as GridProps, c as GridSizeValue, d as GridSpanProps, f as GridSpanSlots, i as GridColumns, l as GridSlots, n as _default, o as GridRepeat, r as GridAlignment, s as GridResponsiveColumns, t as _default$1, u as GridSpanColumns } from "../index-DEQ5cnUV.js";
 export { _default as Grid, type GridAlignment, type GridColumns, type GridProps, type GridRepeat, type GridResponsiveColumns, type GridSizeValue, type GridSlots, _default$1 as GridSpan, type GridSpanColumns, type GridSpanProps, type GridSpanSlots };

package/dist/Heading/index.d.ts

@@ -1,2 +1,2 @@
-import { a as HeadingLevel, c as HeadingType, d as HeadingWrap, i as HeadingJustify, l as HeadingWeight, n as HeadingColor, o as HeadingProps, r as HeadingDisplay, s as HeadingTruncateTooltip, t as _default, u as HeadingWordBreak } from "../index-eshFLli0.js";
+import { a as HeadingLevel, c as HeadingType, d as HeadingWrap, i as HeadingJustify, l as HeadingWeight, n as HeadingColor, o as HeadingProps, r as HeadingDisplay, s as HeadingTruncateTooltip, t as _default, u as HeadingWordBreak } from "../index-D97pQbua.js";
 export { _default as Heading, type HeadingColor, type HeadingDisplay, type HeadingJustify, type HeadingLevel, type HeadingProps, type HeadingTruncateTooltip, type HeadingType, type HeadingWeight, type HeadingWordBreak, type HeadingWrap };

package/dist/Heading/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Heading-B9C3LZlS.js";
+import { t as _sfc_main } from "../Heading-BnwWEWkp.js";
 export { _sfc_main as Heading };

package/dist/{Heading-B9C3LZlS.js → Heading-BnwWEWkp.js}

@@ -1,5 +1,5 @@
 import { n as useTruncation, t as truncatePlacement } from "./useTruncation-B5qXQzAP.js";
-import { t as _sfc_main$1 } from "./Tooltip-C2fh9anJ.js";
+import { t as _sfc_main$1 } from "./Tooltip-C4Vaqd3G.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx } from "vue";
 import "../styles/heading.css";
 //#region src/Heading/Heading.vue
@@ -16,6 +16,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		textWrap: {},
 		wordBreak: {},
 		justify: { default: "start" },
+		hasCapsize: {
+			type: Boolean,
+			default: false
+		},
 		hasStrikethrough: { type: Boolean },
 		maxLines: { default: 0 },
 		hasTruncateTooltip: {
@@ -37,7 +41,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			props.type && `astryx-heading--type-${props.type}`,
 			`astryx-heading--color-${props.color}`,
 			props.weight && `astryx-heading--weight-${props.weight}`,
-			props.display === "inline" && props.maxLines === 0 && "astryx-heading--inline",
+			props.display === "inline" && props.maxLines === 0 && !props.hasCapsize && "astryx-heading--inline",
+			props.hasCapsize && "astryx-heading--capsize",
 			props.textWrap && `astryx-heading--wrap-${props.textWrap}`,
 			wordBreak.value && `astryx-heading--word-${wordBreak.value}`,
 			props.justify !== "start" && `astryx-heading--justify-${props.justify}`,

package/dist/HoverCard/index.d.ts

@@ -1,2 +1,2 @@
-import { a as HoverCardHoverIndication, c as HoverCardSlots, i as HoverCardFocusTrigger, l as HoverCardTouchTrigger, n as HoverCardAlignment, o as HoverCardPlacement, r as HoverCardEmits, s as HoverCardProps, t as _default } from "../index-kaKBOZSU.js";
-export { _default as HoverCard, type HoverCardAlignment, type HoverCardEmits, type HoverCardFocusTrigger, type HoverCardHoverIndication, type HoverCardPlacement, type HoverCardProps, type HoverCardSlots, type HoverCardTouchTrigger };
+import { a as HoverCardAlignment, c as HoverCardHoverIndication, d as HoverCardSlots, f as HoverCardTouchTrigger, i as _default, l as HoverCardPlacement, n as UseHoverCardReturn, o as HoverCardEmits, r as useHoverCard, s as HoverCardFocusTrigger, t as UseHoverCardOptions, u as HoverCardProps } from "../index-Cq31D3fJ.js";
+export { _default as HoverCard, type HoverCardAlignment, type HoverCardEmits, type HoverCardFocusTrigger, type HoverCardHoverIndication, type HoverCardPlacement, type HoverCardProps, type HoverCardSlots, type HoverCardTouchTrigger, type UseHoverCardOptions, type UseHoverCardReturn, useHoverCard };

package/dist/HoverCard/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../HoverCard-EhbWaGOW.js";
-export { _sfc_main as HoverCard };
+import { n as useHoverCard, t as _sfc_main } from "../HoverCard-ycY50pRN.js";
+export { _sfc_main as HoverCard, useHoverCard };