@astryx-vue/core 0.2.5 → 0.3.0

package/dist/FieldLabel-DmmJyX7w.js

@@ -1,184 +0,0 @@
-import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$3 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$4 } from "./IconButton-BNQuz9W_.js";
-import { a as useFormLayout, n as showsOptionalIndicator, r as showsRequiredIndicator } from "./context-Cfjh8te1.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, onScopeDispose, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useId, useTemplateRef, watch, withCtx } from "vue";
-import "../styles/field.css";
-//#region src/Field/FieldInfoTip.vue
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	__name: "FieldInfoTip",
-	props: {
-		text: {},
-		type: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const button = useTemplateRef("button");
-		const anchor = computed(() => button.value?.element ?? null);
-		const id = `astryx-field-tooltip-${useId()}`;
-		const tooltip = useButtonTooltip(computed(() => !!props.text));
-		const pinned = shallowRef(false);
-		function close() {
-			pinned.value = false;
-			tooltip.hideImmediately();
-		}
-		function toggle() {
-			pinned.value = !pinned.value;
-			if (pinned.value) tooltip.onTooltipPointerEnter();
-			else close();
-		}
-		function leave() {
-			if (!pinned.value) tooltip.onPointerLeave();
-		}
-		function dismiss(event) {
-			if (event instanceof KeyboardEvent) {
-				if (event.key === "Escape") close();
-				return;
-			}
-			const target = event.target;
-			if (target instanceof Node && !anchor.value?.contains(target) && !document.getElementById(id)?.contains(target)) close();
-		}
-		watch(tooltip.isOpen, (open) => {
-			if (typeof document === "undefined") return;
-			if (open) {
-				document.addEventListener("pointerdown", dismiss);
-				document.addEventListener("keydown", dismiss);
-			} else {
-				document.removeEventListener("pointerdown", dismiss);
-				document.removeEventListener("keydown", dismiss);
-			}
-		});
-		onScopeDispose(() => {
-			if (typeof document !== "undefined") {
-				document.removeEventListener("pointerdown", dismiss);
-				document.removeEventListener("keydown", dismiss);
-			}
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$4, {
-				ref_key: "button",
-				ref: button,
-				class: "astryx-field-info-tip",
-				variant: "ghost",
-				size: "sm",
-				label: __props.text,
-				"aria-describedby": id,
-				"data-status": __props.type,
-				"aria-expanded": unref(tooltip).isOpen.value,
-				onClick: toggle,
-				onFocus: unref(tooltip).onTooltipPointerEnter,
-				onBlur: close,
-				onPointerenter: unref(tooltip).onPointerEnter,
-				onPointerleave: leave
-			}, {
-				default: withCtx(() => [createVNode(_sfc_main$3, { type: __props.type ?? "info" }, null, 8, ["type"])]),
-				_: 1
-			}, 8, [
-				"label",
-				"data-status",
-				"aria-expanded",
-				"onFocus",
-				"onPointerenter"
-			]), createVNode(_sfc_main$2, {
-				id,
-				anchor: anchor.value,
-				open: unref(tooltip).isOpen.value,
-				text: __props.text,
-				onPointerEnter: unref(tooltip).onTooltipPointerEnter,
-				onPointerLeave: leave
-			}, null, 8, [
-				"anchor",
-				"open",
-				"text",
-				"onPointerEnter"
-			])], 64);
-		};
-	}
-});
-//#endregion
-//#region src/Field/FieldLabel.vue
-const _hoisted_1 = ["data-hidden", "data-disabled"];
-const _hoisted_2 = { class: "astryx-field-label-row" };
-const _hoisted_3 = {
-	key: 0,
-	class: "astryx-field-label-icon",
-	"aria-hidden": "true"
-};
-const _hoisted_4 = {
-	key: 0,
-	class: "astryx-field-optionality",
-	"aria-hidden": "true"
-};
-const _hoisted_5 = ["id"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxFieldLabel",
-	__name: "FieldLabel",
-	props: {
-		label: {},
-		inputId: {},
-		labelId: {},
-		isGroupLabel: { type: Boolean },
-		isLabelHidden: { type: Boolean },
-		isDisabled: { type: Boolean },
-		isOptional: { type: Boolean },
-		isRequired: { type: Boolean },
-		description: {},
-		descriptionId: {},
-		labelIcon: {},
-		labelTooltip: {},
-		optionalLabel: { default: "Optional" },
-		requiredLabel: { default: "Required" }
-	},
-	setup(__props, { expose: __expose }) {
-		const props = __props;
-		const element = useTemplateRef("label");
-		__expose({ element });
-		const labelId = computed(() => props.labelId ?? `${props.inputId}-label`);
-		const descriptionId = computed(() => props.descriptionId ?? `${props.inputId}-description`);
-		const icon = computed(() => props.labelIcon ? toRaw(props.labelIcon) : void 0);
-		const formLayout = useFormLayout();
-		const optionality = computed(() => formLayout.value?.defaultOptionality);
-		const showOptional = computed(() => showsOptionalIndicator(props.isOptional, props.isRequired, optionality.value));
-		const showRequired = computed(() => showsRequiredIndicator(props.isRequired, props.isOptional, optionality.value));
-		function focusFromDescription(event) {
-			if (props.isGroupLabel || props.isDisabled) return;
-			const target = event.target;
-			if (target instanceof Element && target.closest("a,button,input,select,textarea,[role=\"button\"]")) return;
-			if (element.value?.ownerDocument.getSelection()?.toString()) return;
-			const control = element.value?.ownerDocument.getElementById(props.inputId);
-			if (control instanceof HTMLInputElement && ["checkbox", "radio"].includes(control.type)) control.click();
-			else control?.focus({ preventScroll: true });
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: "astryx-field-label-group",
-				"data-hidden": __props.isLabelHidden || void 0,
-				"data-disabled": __props.isDisabled || void 0
-			}, [createElementVNode("div", _hoisted_2, [
-				(openBlock(), createBlock(resolveDynamicComponent(__props.isGroupLabel ? "span" : "label"), {
-					id: labelId.value,
-					ref: "label",
-					class: "astryx-field-label",
-					for: __props.isGroupLabel ? void 0 : __props.inputId
-				}, {
-					default: withCtx(() => [_ctx.$slots.labelIcon || icon.value ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "labelIcon", {}, () => [icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), { key: 0 })) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(__props.label), 1)]),
-					_: 3
-				}, 8, ["id", "for"])),
-				showOptional.value || showRequired.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(showOptional.value ? __props.optionalLabel : __props.requiredLabel), 1)) : createCommentVNode("v-if", true),
-				__props.labelTooltip ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 1,
-					text: __props.labelTooltip
-				}, null, 8, ["text"])) : createCommentVNode("v-if", true)
-			]), __props.description ? (openBlock(), createElementBlock("span", {
-				key: 0,
-				id: descriptionId.value,
-				class: "astryx-field-description",
-				role: "presentation",
-				onClick: focusFromDescription
-			}, toDisplayString(__props.description), 9, _hoisted_5)) : createCommentVNode("v-if", true)], 8, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main$1 as n, _sfc_main as t };

package/dist/FileInput-DuNwdbAo.js

@@ -1,238 +0,0 @@
-import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
-import { n as selectFiles, t as formatFileSize } from "./useFileSelection-BPtaegqK.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$5 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$6 } from "./Field-8zRxzDHE.js";
-import { computed, createBlock, createCommentVNode, 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-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 },
-		isLoading: { type: Boolean },
-		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 validationError = shallowRef(null);
-		const dragOver = shallowRef(false);
-		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(), createBlock(_sfc_main$6, {
-				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: status.value,
-				"status-variant": __props.statusVariant
-			}, {
-				default: withCtx((field) => [createElementVNode("div", {
-					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
-				}, [
-					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,
-						"aria-invalid": status.value?.type === "error" || void 0,
-						"aria-describedby": [field.describedBy, conveysRequired.value ? requiredId : void 0].filter(Boolean).join(" ") || void 0,
-						onClick: openPicker,
-						onDragover: onDragOver,
-						onDragleave: onDragLeave,
-						onDrop
-					}, [createVNode(_sfc_main$4, {
-						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$3, {
-						key: 0,
-						class: "astryx-input-clear-button",
-						variant: "ghost",
-						size: "sm",
-						label: clearLabel.value,
-						onClick: clear
-					}, {
-						default: withCtx(() => [createVNode(_sfc_main$2, { type: "clear" })]),
-						_: 1
-					}, 8, ["label"])) : createCommentVNode("v-if", true),
-					__props.isLoading ? (openBlock(), createBlock(_sfc_main$5, {
-						key: 1,
-						size: "sm"
-					})) : status.value ? (openBlock(), createBlock(_sfc_main$2, {
-						key: 2,
-						type: status.value.type
-					}, null, 8, ["type"])) : createCommentVNode("v-if", true)
-				], 8, _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",
-				"status",
-				"status-variant"
-			]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };