vectis-ui 0.1.0 → 0.8.0

package/dist/components/VFilePicker/VFilePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,57 +1,55 @@
 import { useLocale as e, useMessages as t } from "../../i18n/state.js";
-import n from "../VIcon/VIcon.js";
-import r from "../VTypography/VTypography.js";
-import { iconProps as i } from "../VIcon/iconProps.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VIcon/VIcon.js";
+import i from "../VTypography/VTypography.js";
+import a from "../VSpinner/VSpinner.js";
 import ee from "../VButton/VButton.js";
 import te from "../VIconButton/VIconButton.js";
 import { useRootAttrs as ne } from "../../composables/useRootAttrs.js";
-import { close as a } from "../VIcon/icons/close.js";
-import { useFileDrop as re } from "../../composables/useFileDrop.js";
-import { formatBytes as o } from "../../utils/file.js";
-import { useFileField as ie } from "../../composables/useFileField.js";
-import { audio_file as ae } from "../VIcon/icons/audio_file.js";
-import { cloud_upload as s } from "../VIcon/icons/cloud_upload.js";
-import { code as oe } from "../VIcon/icons/code.js";
-import { description as se } from "../VIcon/icons/description.js";
-import { folder_zip as ce } from "../VIcon/icons/folder_zip.js";
-import { image as le } from "../VIcon/icons/image.js";
-import { picture_as_pdf as ue } from "../VIcon/icons/picture_as_pdf.js";
-import { table_chart as c } from "../VIcon/icons/table_chart.js";
-import { video_file as de } from "../VIcon/icons/video_file.js";
-import { fileKind as l } from "./fileKind.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as fe, mergeModels as y, mergeProps as b, nextTick as pe, normalizeClass as me, normalizeProps as he, normalizeStyle as ge, onBeforeUnmount as _e, onMounted as ve, openBlock as x, reactive as ye, ref as S, renderList as be, renderSlot as C, resolveDynamicComponent as xe, toDisplayString as w, unref as T, useModel as E, watch as D, withCtx as O } from "vue";
+import { close as o } from "../VIcon/icons/close.js";
+import { useFileDrop as s } from "../../composables/useFileDrop.js";
+import { fileKey as re, formatBytes as ie } from "../../utils/file.js";
+import { useFileField as ae } from "../../composables/useFileField.js";
+import { audio_file as oe } from "../VIcon/icons/audio_file.js";
+import { cloud_upload as c } from "../VIcon/icons/cloud_upload.js";
+import { code as l } from "../VIcon/icons/code.js";
+import { description as u } from "../VIcon/icons/description.js";
+import { folder_zip as d } from "../VIcon/icons/folder_zip.js";
+import { image as f } from "../VIcon/icons/image.js";
+import { picture_as_pdf as se } from "../VIcon/icons/picture_as_pdf.js";
+import { table_chart as ce } from "../VIcon/icons/table_chart.js";
+import { video_file as le } from "../VIcon/icons/video_file.js";
+import { fileKind as ue } from "./fileKind.js";
+import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, mergeModels as S, mergeProps as C, nextTick as de, normalizeClass as fe, normalizeProps as pe, normalizeStyle as me, onBeforeUnmount as he, onMounted as ge, openBlock as w, reactive as _e, ref as T, renderList as E, renderSlot as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, useModel as j, watch as M, withCtx as N } from "vue";
 //#region src/components/VFilePicker/VFilePicker.vue?vue&type=script&setup=true&lang.ts
-var k = [
+var P = [
 	"data-preview",
 	"data-disabled",
 	"data-readonly",
+	"data-invalid",
 	"data-dragging"
-], A = [
-	"accept",
-	"multiple",
-	"disabled"
-], j = { class: "v-file-picker-body" }, M = { class: "v-file-picker-icon" }, Se = { class: "v-file-picker-separator" }, Ce = ["aria-label"], we = { class: "v-file-picker-thumb" }, Te = ["src", "onError"], Ee = { class: "v-file-picker-info" }, N = ["title"], De = { class: "v-file-picker-size" }, P = /*@__PURE__*/ v({
+], F = { class: "v-file-picker-body" }, I = { class: "v-file-picker-icon" }, ve = { class: "v-file-picker-separator" }, ye = ["aria-label"], be = { class: "v-file-picker-thumb" }, xe = ["src", "onError"], Se = { class: "v-file-picker-info" }, Ce = ["title"], we = { class: "v-file-picker-size" }, L = /*@__PURE__*/ x({
 	inheritAttrs: !1,
 	__name: "VFilePicker",
-	props: /*@__PURE__*/ y({
+	props: /*@__PURE__*/ S({
 		title: {},
 		subtitle: { default: void 0 },
-		icon: { default: () => s },
-		showBrowse: {
+		icon: { default: () => c },
+		hideBrowse: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		browseLabel: { default: void 0 },
 		preview: {
 			type: [Boolean, String],
 			default: !1
 		},
-		thumbnails: {
+		hideThumbnails: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		typeIcons: { default: void 0 },
-		removeIcon: { default: () => a },
+		removeIcon: { default: () => o },
 		multiple: {
 			type: Boolean,
 			default: !1
@@ -67,200 +65,205 @@ var k = [
 		readonly: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingLabel: { default: void 0 }
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ y([
+	emits: /*@__PURE__*/ S([
 		"change",
 		"reject",
 		"remove"
 	], ["update:modelValue"]),
-	setup(a, { expose: s, emit: v }) {
-		let y = a, P = v, F = E(a, "modelValue"), { attrs: Oe, rootClass: ke, rootStyle: Ae, forwardedAttrs: je } = ne(), I = t(), L = e(), R = d(() => !y.disabled && !y.readonly), { fileEl: Me, nativeAttrs: Ne, controlAttrs: Pe, acceptFiles: Fe, onNativeChange: z, openPicker: B, resetNative: Ie } = ie({
-			model: F,
-			forwardedAttrs: je,
-			enabled: () => R.value,
-			multiple: () => y.multiple,
-			limits: () => ({
-				accept: y.accept,
-				maxSize: y.maxSize,
-				maxFiles: y.maxFiles,
-				maxTotalSize: y.maxTotalSize
-			}),
-			onReject: (e) => P("reject", e),
-			onChange: (e) => P("change", e)
-		}), V = S(null), H = S(null), U = d(() => !y.showBrowse), Le = d(() => y.preview !== !1 && F.value.length > 0), Re = {
-			image: le,
-			pdf: ue,
-			audio: ae,
-			video: de,
-			archive: ce,
-			spreadsheet: c,
-			code: oe,
-			file: se
-		}, W = (e) => y.typeIcons?.[e] ?? Re[e];
-		function ze(e) {
-			!U.value && e.target.closest("button") || B();
+	setup(o, { expose: c, emit: x }) {
+		let S = o, L = x, R = j(o, "modelValue"), { attrs: Te, rootClass: z, rootStyle: Ee, forwardedAttrs: De } = ne(), B = t(), Oe = e(), { fileEl: ke, enabled: V, nativeInputAttrs: Ae, controlAttrs: je, acceptFiles: Me, openPicker: H, removeAt: Ne } = ae({
+			model: R,
+			props: S,
+			emit: L,
+			forwardedAttrs: De,
+			warnings: void 0
+		}), U = T(null), W = T(null), G = m(() => S.preview !== !1 && R.value.length > 0), Pe = {
+			image: f,
+			pdf: se,
+			audio: oe,
+			video: le,
+			archive: d,
+			spreadsheet: ce,
+			code: l,
+			file: u
+		}, Fe = (e) => S.typeIcons?.[e] ?? Pe[e];
+		function Ie(e) {
+			!S.hideBrowse && e.target.closest("button") || H();
 		}
-		let { dragging: Be, onDragEnter: G, onDragOver: K, onDragLeave: q, onDrop: J } = re(() => R.value, Fe);
-		function Y() {
-			let e = V.value;
+		let { dragging: Le, onDragEnter: K, onDragOver: q, onDragLeave: J, onDrop: Y } = s(() => V.value, Me), X = T(null);
+		function Z() {
+			let e = U.value;
 			return e ? e.matches("button") ? e : e.querySelector("button") : null;
 		}
-		async function X(e) {
-			let t = F.value[e];
-			if (!t || !R.value) return;
-			F.value = F.value.filter((t, n) => n !== e), Ie(), P("remove", t, e), P("change", F.value), await pe();
-			let n = H.value?.querySelectorAll(".v-file-picker-item") ?? [];
-			(n[Math.min(e, n.length - 1)]?.querySelector("button") ?? Y())?.focus();
+		async function Re(e) {
+			if (!Ne(e)) return;
+			await de();
+			let t = W.value?.querySelectorAll(".v-file-picker-item") ?? [];
+			(t[Math.min(e, t.length - 1)]?.querySelector("button") ?? Z())?.focus();
 		}
-		let Z = ye(/* @__PURE__ */ new Map()), Ve = (e) => e.type.startsWith("image/");
-		function Q() {
-			let e = new Set(y.thumbnails && y.preview !== !1 ? F.value.filter(Ve) : []);
-			for (let [t, n] of Z) e.has(t) || (URL.revokeObjectURL(n), Z.delete(t));
-			for (let t of e) Z.has(t) || Z.set(t, URL.createObjectURL(t));
+		let Q = _e(/* @__PURE__ */ new Map()), ze = (e) => e.type.startsWith("image/");
+		function $() {
+			let e = new Set(!S.hideThumbnails && S.preview !== !1 ? R.value.filter(ze) : []);
+			for (let [t, n] of Q) e.has(t) || (URL.revokeObjectURL(n), Q.delete(t));
+			for (let t of e) Q.has(t) || Q.set(t, URL.createObjectURL(t));
 		}
-		function He(e) {
-			let t = Z.get(e);
-			t && (URL.revokeObjectURL(t), Z.delete(e));
+		function Be(e) {
+			let t = Q.get(e);
+			t && (URL.revokeObjectURL(t), Q.delete(e));
 		}
-		ve(Q), D([
-			F,
-			() => y.thumbnails,
-			() => y.preview
-		], Q, { deep: !0 }), _e(() => {
-			for (let e of Z.values()) URL.revokeObjectURL(e);
-			Z.clear();
+		ge($), M([
+			R,
+			() => S.hideThumbnails,
+			() => S.preview
+		], $, { deep: !0 }), he(() => {
+			for (let e of Q.values()) URL.revokeObjectURL(e);
+			Q.clear();
 		});
-		function $(e, t) {
-			let n = l(e);
+		let Ve = m(() => G.value ? R.value.map((e, t) => {
+			let n = ue(e);
 			return {
-				file: e,
-				index: t,
-				kind: n,
-				thumbnail: Z.get(e),
-				icon: W(n),
-				sizeText: o(e.size, L.value),
-				remove: () => X(t)
+				key: re(e),
+				row: {
+					file: e,
+					index: t,
+					kind: n,
+					thumbnail: Q.get(e),
+					icon: Fe(n),
+					sizeText: ie(e.size, Oe.value),
+					remove: () => Re(t)
+				},
+				removeLabel: B.value.common.remove(e.name)
 			};
-		}
-		return s({
-			focus: (e) => Y()?.focus(e),
-			open: B
-		}), (e, t) => (x(), m("div", {
-			class: me(["v-file-picker", T(ke)]),
-			style: ge(T(Ae)),
-			"data-preview": a.preview || void 0,
-			"data-disabled": a.disabled ? "" : void 0,
-			"data-readonly": a.readonly ? "" : void 0,
-			"data-dragging": T(Be) ? "" : void 0,
-			onDragenter: t[1] ||= (...e) => T(G) && T(G)(...e),
-			onDragover: t[2] ||= (...e) => T(K) && T(K)(...e),
-			onDragleave: t[3] ||= (...e) => T(q) && T(q)(...e),
-			onDrop: t[4] ||= (...e) => T(J) && T(J)(...e)
-		}, [h("input", b(T(Ne), {
+		}) : []);
+		return c({
+			focus: (e) => Z()?.focus(e),
+			open: H,
+			el: X
+		}), (e, t) => (w(), _("div", {
+			ref_key: "rootEl",
+			ref: X,
+			class: fe(["v-file-picker", A(z)]),
+			style: me(A(Ee)),
+			"data-preview": o.preview || void 0,
+			"data-disabled": o.disabled ? "" : void 0,
+			"data-readonly": o.readonly ? "" : void 0,
+			"data-invalid": o.invalid ? "" : void 0,
+			"data-dragging": A(Le) ? "" : void 0,
+			onDragenter: t[0] ||= (...e) => A(K) && A(K)(...e),
+			onDragover: t[1] ||= (...e) => A(q) && A(q)(...e),
+			onDragleave: t[2] ||= (...e) => A(J) && A(J)(...e),
+			onDrop: t[3] ||= (...e) => A(Y) && A(Y)(...e)
+		}, [v("input", C(A(Ae), {
 			ref_key: "fileEl",
-			ref: Me,
-			type: "file",
-			class: "v-file-picker-native",
-			tabindex: "-1",
-			"aria-hidden": "true",
-			accept: a.accept,
-			multiple: a.multiple || void 0,
-			disabled: a.disabled || void 0,
-			onChange: t[0] ||= (...e) => T(z) && T(z)(...e)
-		}), null, 16, A), h("div", j, [(x(), f(xe(U.value ? "button" : "div"), b(T(Pe), {
+			ref: ke,
+			class: "v-file-picker-native v-hidden-input"
+		}), null, 16), v("div", F, [(w(), h(O(o.hideBrowse ? "button" : "div"), C(A(je), {
 			ref_key: "zoneEl",
-			ref: V,
+			ref: U,
 			class: "v-file-picker-zone",
-			type: U.value ? "button" : void 0,
-			disabled: U.value && !R.value ? !0 : void 0,
-			onClick: ze
+			type: o.hideBrowse ? "button" : void 0,
+			disabled: o.hideBrowse && !A(V) ? !0 : void 0,
+			onClick: Ie
 		}), {
-			default: O(() => [
-				h("span", M, [C(e.$slots, "icon", {}, () => [_(n, he(fe(T(i)(a.icon))), null, 16)])]),
-				_(r, {
+			default: N(() => [
+				v("span", I, [D(e.$slots, "icon", {}, () => [o.loading ? (w(), h(a, {
+					key: 0,
+					label: o.loadingLabel
+				}, null, 8, ["label"])) : (w(), h(r, pe(C({ key: 1 }, A(n)(o.icon))), null, 16))])]),
+				b(i, {
 					as: "span",
 					variant: "subtitle",
 					class: "v-file-picker-title"
 				}, {
-					default: O(() => [C(e.$slots, "title", {}, () => [g(w(a.title), 1)])]),
+					default: N(() => [D(e.$slots, "title", {}, () => [y(k(o.title), 1)])]),
 					_: 3
 				}),
-				a.subtitle || e.$slots.subtitle ? (x(), f(r, {
+				o.subtitle || e.$slots.subtitle ? (w(), h(i, {
 					key: 0,
 					as: "span",
 					variant: "body-sm",
 					class: "v-file-picker-subtitle"
 				}, {
-					default: O(() => [C(e.$slots, "subtitle", {}, () => [g(w(a.subtitle), 1)])]),
+					default: N(() => [D(e.$slots, "subtitle", {}, () => [y(k(o.subtitle), 1)])]),
 					_: 3
-				})) : p("", !0),
-				a.showBrowse ? (x(), m(u, { key: 1 }, [h("span", Se, w(T(I).filePicker.or), 1), C(e.$slots, "browse", {
-					open: T(B),
-					disabled: !R.value
-				}, () => [_(ee, {
+				})) : g("", !0),
+				o.hideBrowse ? g("", !0) : (w(), _(p, { key: 1 }, [v("span", ve, k(A(B).filePicker.or), 1), D(e.$slots, "browse", {
+					open: A(H),
+					disabled: !A(V)
+				}, () => [b(ee, {
 					class: "v-file-picker-browse",
 					variant: "outline",
 					tone: "neutral",
-					disabled: !R.value,
-					onClick: T(B)
+					disabled: !A(V),
+					onClick: A(H)
 				}, {
-					default: O(() => [g(w(a.browseLabel ?? T(I).filePicker.browse), 1)]),
+					default: N(() => [y(k(o.browseLabel ?? A(B).filePicker.browse), 1)]),
 					_: 1
-				}, 8, ["disabled", "onClick"])])], 64)) : p("", !0)
+				}, 8, ["disabled", "onClick"])])], 64))
 			]),
 			_: 3
-		}, 16, ["type", "disabled"])), Le.value ? (x(), m("ul", {
+		}, 16, ["type", "disabled"])), G.value ? (w(), _("ul", {
 			key: 0,
 			ref_key: "listEl",
-			ref: H,
+			ref: W,
 			class: "v-file-picker-list",
-			"aria-label": T(I).filePicker.list
-		}, [(x(!0), m(u, null, be(F.value, (t, r) => (x(), m("li", {
-			key: `${r}-${t.name}`,
+			"aria-label": A(B).filePicker.list
+		}, [(w(!0), _(p, null, E(Ve.value, ({ key: t, row: i, removeLabel: a }) => (w(), _("li", {
+			key: t,
 			class: "v-file-picker-item"
-		}, [C(e.$slots, "item", b({ ref_for: !0 }, $(t, r)), () => [
-			h("span", we, [C(e.$slots, "thumbnail", b({ ref_for: !0 }, $(t, r)), () => [Z.get(t) ? (x(), m("img", {
+		}, [D(e.$slots, "item", C({ ref_for: !0 }, i), () => [
+			v("span", be, [D(e.$slots, "thumbnail", C({ ref_for: !0 }, i), () => [i.thumbnail ? (w(), _("img", {
 				key: 0,
 				class: "v-file-picker-image",
-				src: Z.get(t),
+				src: i.thumbnail,
 				alt: "",
 				loading: "lazy",
 				decoding: "async",
-				onError: (e) => He(t)
-			}, null, 40, Te)) : (x(), f(n, b({
+				onError: (e) => Be(i.file)
+			}, null, 40, xe)) : (w(), h(r, C({
 				key: 1,
 				ref_for: !0
-			}, T(i)(W(T(l)(t)))), null, 16))])]),
-			h("span", Ee, [h("span", {
+			}, A(n)(i.icon)), null, 16))])]),
+			v("span", Se, [v("span", {
 				class: "v-file-picker-name",
-				title: t.name
-			}, w(t.name), 9, N), h("span", De, w(T(o)(t.size, T(L))), 1)]),
-			C(e.$slots, "remove", {
-				file: t,
-				index: r,
-				remove: () => X(r),
-				label: T(I).filePicker.remove(t.name)
-			}, () => [_(te, {
+				title: i.file.name
+			}, k(i.file.name), 9, Ce), v("span", we, k(i.sizeText), 1)]),
+			D(e.$slots, "remove", {
+				file: i.file,
+				index: i.index,
+				remove: i.remove,
+				removeLabel: a
+			}, () => [b(te, {
 				class: "v-file-picker-remove",
 				size: "sm",
-				icon: a.removeIcon,
-				label: T(I).filePicker.remove(t.name),
-				disabled: !R.value,
-				onClick: (e) => X(r)
+				icon: o.removeIcon,
+				label: a,
+				disabled: !A(V),
+				onClick: i.remove
 			}, null, 8, [
 				"icon",
 				"label",
 				"disabled",
 				"onClick"
 			])])
-		])]))), 128))], 8, Ce)) : p("", !0)])], 46, k));
+		])]))), 128))], 8, ye)) : g("", !0)])], 46, P));
 	}
 });
 //#endregion
-export { P as default };
+export { L as default };
 
 //# sourceMappingURL=VFilePicker.vue_vue_type_script_setup_true_lang.js.map