@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/upload/Upload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,292 @@
+import { useTheme as e } from "../../composables/useTheme.js";
+import { optionalBooleanProp as t } from "../../common/props.js";
+import { useCommon as n } from "../../composables/useCommon.js";
+import r from "../icon/Icon.js";
+import { closeIcon as i, fileIcon as ee, uploadIcon as te } from "../../common/icons.js";
+import { useInteractive as a } from "../../composables/useInteractive.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import s from "../inputFooter/InputFooter.js";
+import { useDropZone as ne } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import re from "../label/Label.js";
+import c from "../progress/Progress.js";
+import { isFileAccepted as l } from "./fileAccept.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as ie, renderSlot as w, toDisplayString as T, toHandlers as ae, unref as E, watch as oe, withCtx as se } from "vue";
+//#region src/components/upload/Upload.vue?vue&type=script&setup=true&lang.ts
+var ce = [
+	"id",
+	"disabled",
+	"name",
+	"accept",
+	"multiple",
+	"readonly"
+], le = { class: "text-secondary-500 dark:text-secondary-400" }, D = { class: "flex items-center" }, O = ["src"], k = { class: "truncate flex-1 pr-2" }, A = { class: "font-medium truncate" }, j = { class: "text-xs text-secondary-500" }, M = ["onClick"], N = {
+	...n.validators(),
+	variant: ["box"]
+}, P = {
+	...a.props(),
+	...o.props(),
+	placeholder: {
+		type: String,
+		description: "Text shown in the default drop zone."
+	},
+	accept: {
+		type: String,
+		description: "Accepted file types (native `accept` attribute)."
+	},
+	multiple: t("Allows selecting more than one file."),
+	maxFiles: {
+		type: [Number, String],
+		description: "Maximum number of files allowed."
+	},
+	maxFileSize: {
+		type: [Number, String],
+		description: "Maximum file size in bytes."
+	},
+	variant: {
+		type: String,
+		default: "box",
+		description: "Visual variant of the upload control."
+	},
+	action: {
+		type: String,
+		description: "URL to upload files to; enables remote upload mode when set."
+	},
+	headers: {
+		type: Object,
+		description: "Additional HTTP headers sent with the upload request."
+	},
+	method: {
+		type: String,
+		default: "POST",
+		description: "HTTP method used when uploading to `action`."
+	},
+	withCredentials: t("Sends cookies/credentials with the upload request."),
+	fileFormDataName: {
+		type: String,
+		default: "file",
+		description: "FormData field name for each uploaded file."
+	}
+}, F = /* @__PURE__ */ _({
+	name: "XUpload",
+	validators: N,
+	docs: {
+		slots: {
+			box: "Custom drop zone UI (`is-over` when dragging files).",
+			files: "Custom file list (`files` upload state array).",
+			removeIcon: "Icon for the remove-file control."
+		},
+		emits: {
+			...o.emitDocs(),
+			upload: "Emitted when a file finishes uploading (remote mode).",
+			remove: "Emitted when a file is removed from the list."
+		},
+		methods: { ...o.methodDocs() }
+	},
+	props: P,
+	emits: [
+		...o.emits(),
+		"upload",
+		"remove"
+	],
+	setup(t, { expose: n, emit: _ }) {
+		let N = t, P = _, F = C(null), I = d(() => !!N.action), L = C([]);
+		oe(L, (e) => {
+			P("update:modelValue", e);
+		}, {
+			deep: !0,
+			immediate: !0
+		});
+		let { focus: R, blur: z } = a(F);
+		function B(e) {
+			if (!e) return !1;
+			if (!N.multiple && e.length > 1 || N.maxFiles && e.length > Number(N.maxFiles)) return Y.value = "Too many files", !1;
+			if (N.maxFileSize) {
+				for (let t = 0; t < e.length; t++) if (e[t].size > Number(N.maxFileSize)) return Y.value = "File size is too large", !1;
+			}
+			if (N.accept) {
+				for (let t = 0; t < e.length; t++) if (!l(e[t], N.accept)) return Y.value = "Invalid file type", !1;
+			}
+			return !0;
+		}
+		function V(e) {
+			let t = e.target.files;
+			B(t) && P("change", e);
+		}
+		function H(e) {
+			let t = e.target.files;
+			B(t) && (K(t), N.validateOnInput && !Z.value && Q(L.value), P("input", e));
+		}
+		let U = C(null);
+		function W(e) {
+			B(e) && K(e);
+		}
+		let { isOverDropZone: G } = ne(U, {
+			onDrop: W,
+			multiple: N.multiple,
+			preventDefaultForUnhandled: !1
+		});
+		function K(e) {
+			L.value = e ? Array.from(e).map((e) => ({
+				file: e,
+				completed: !I.value,
+				progress: I.value ? 0 : 100,
+				error: ""
+			})) : [], I.value && me();
+		}
+		function ue(e) {
+			let t = L.value.findIndex((t) => t.file === e);
+			t !== -1 && (P("remove", L.value[t]), L.value.splice(t, 1));
+		}
+		function q(e) {
+			return e.type.startsWith("image") || [
+				"jpg",
+				"jpeg",
+				"png",
+				"gif",
+				"webp",
+				"svg"
+			].some((t) => e.name.endsWith(t));
+		}
+		let J = [];
+		function de(e) {
+			let t = URL.createObjectURL(e);
+			return J.push(t), t;
+		}
+		x(() => {
+			J.forEach((e) => URL.revokeObjectURL(e));
+		});
+		function fe(e) {
+			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : e < 1024 * 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(2)} MB` : `${(e / 1024 / 1024 / 1024).toFixed(2)} GB`;
+		}
+		async function pe(e) {
+			return new Promise((t, n) => {
+				if (!N.action) n(/* @__PURE__ */ Error("No action provided"));
+				else {
+					let r = new XMLHttpRequest(), i = new FormData();
+					i.append(N.fileFormDataName, e.file), r.open(N.method, N.action, !0), N.headers && typeof N.headers == "object" && Object.keys(N.headers).forEach((e) => {
+						r.setRequestHeader(e, N.headers[e]);
+					}), r.upload.addEventListener("progress", (t) => {
+						t.lengthComputable && (e.progress = t.loaded / t.total * 100);
+					}), r.addEventListener("load", () => {
+						if (r.status >= 200 && r.status < 300) {
+							e.completed = !0;
+							try {
+								e.response = JSON.parse(r.responseText);
+							} catch {
+								e.response = r.responseText;
+							}
+							t(r.responseText);
+						} else {
+							let t = `Upload failed. Status: ${r.status}`;
+							e.error = t, n(Error(t));
+						}
+					}), r.addEventListener("error", () => {
+						e.error = "An error occurred during the upload.", n(/* @__PURE__ */ Error("An error occurred during the upload."));
+					}), r.send(i);
+				}
+			});
+		}
+		async function me() {
+			if (!N.action && !L.value) return;
+			let e = [];
+			for (let t = 0; t < L.value.length; t++) e.push(pe(L.value[t]));
+			await Promise.all(e), Q(L.value);
+		}
+		function he() {
+			Y.value = "", Z.value = !0, L.value = [], F.value && (F.value.value = "");
+		}
+		let { errorInternal: Y, hideFooterInternal: ge, isInsideForm: X, isInsideInputGroup: _e, inputListeners: ve, isFirstValidation: Z, validate: Q, setError: ye } = o(N, {
+			focus: R,
+			emit: P
+		}), { styles: be, classes: $, className: xe } = e("Upload", {}, N);
+		return n({
+			focus: R,
+			blur: z,
+			reset: he,
+			validate: Q,
+			setError: ye
+		}), (e, t) => (S(), m("div", { class: y([E(xe), E($).wrapper]) }, [g(re, {
+			style: b(E(be)),
+			disabled: e.disabled,
+			required: e.required,
+			"is-inside-form": E(X),
+			"is-inside-input-group": E(_e),
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: se(() => [
+				h("input", v({
+					id: e.id,
+					ref_key: "elRef",
+					ref: F,
+					type: "file",
+					class: ["sr-only", E($).input],
+					disabled: e.disabled,
+					name: e.name,
+					accept: e.accept,
+					multiple: e.multiple,
+					readonly: e.readonly
+				}, ae({
+					...E(ve),
+					input: H,
+					change: V
+				}, !0)), null, 16, ce),
+				w(e.$slots, "box", { isOver: E(G) }, () => [h("div", {
+					ref_key: "dropZoneRef",
+					ref: U,
+					class: y(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", { "border-primary-500 dark:border-primary-400": E(G) }])
+				}, [
+					g(r, { icon: E(te) }, null, 8, ["icon"]),
+					h("span", le, T(e.placeholder), 1),
+					t[0] ||= h("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1)
+				], 2)]),
+				E(ge) ? p("", !0) : (S(), f(s, {
+					key: 0,
+					error: E(Y),
+					helper: e.helper
+				}, null, 8, ["error", "helper"]))
+			]),
+			_: 3
+		}, 8, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"tooltip"
+		]), w(e.$slots, "files", { files: L.value }, () => [(S(!0), m(u, null, ie(L.value, (t, n) => (S(), m("div", {
+			key: n,
+			class: "border rounded-md p-2 bg-secondary-100 my-2"
+		}, [
+			h("div", D, [
+				h("div", { class: y(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", { "p-2 bg-white": !q(t.file) }]) }, [q(t.file) ? (S(), m("img", {
+					key: 0,
+					src: de(t.file),
+					class: "w-full h-full object-cover rounded-md"
+				}, null, 8, O)) : (S(), f(r, {
+					key: 1,
+					icon: E(ee)
+				}, null, 8, ["icon"]))], 2),
+				h("div", k, [h("div", A, T(t.file.name), 1), h("div", j, T(fe(t.file.size)), 1)]),
+				h("button", {
+					type: "button",
+					class: "shrink-0",
+					onClick: (e) => ue(t.file)
+				}, [w(e.$slots, "removeIcon", {}, () => [g(r, { icon: E(i) }, null, 8, ["icon"])])], 8, M)
+			]),
+			I.value ? (S(), f(c, {
+				key: 0,
+				percentage: t.progress,
+				class: "mt-1",
+				color: t.error ? "warning" : "success"
+			}, null, 8, ["percentage", "color"])) : p("", !0),
+			t.error ? (S(), f(s, {
+				key: 1,
+				error: t.error
+			}, null, 8, ["error"])) : p("", !0)
+		]))), 128))])], 2));
+	}
+});
+//#endregion
+export { F as default };

package/lib/components/upload/fileAccept.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Matches a file against an HTML `accept` attribute value.
+ * Supports extensions (`.png`), MIME types (`image/png`), and wildcards (`image/*`).
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+ */
+export declare function isFileAccepted(file: File, accept: string): boolean;

package/lib/components/upload/fileAccept.js

@@ -0,0 +1,17 @@
+//#region src/components/upload/fileAccept.ts
+function e(e, t) {
+	let n = t.split(",").map((e) => e.trim()).filter(Boolean);
+	if (!n.length) return !0;
+	let r = e.name.toLowerCase(), i = e.type.toLowerCase();
+	return n.some((e) => {
+		let t = e.toLowerCase();
+		if (t.startsWith(".")) return r.endsWith(t);
+		if (t.endsWith("/*")) {
+			let e = t.slice(0, -2);
+			return i.startsWith(`${e}/`);
+		}
+		return i === t;
+	});
+}
+//#endregion
+export { e as isFileAccepted };

package/lib/components/upload/theme/Upload.base.theme.js

@@ -1,8 +1,4 @@
-const e = {
-  classes: {
-    wrapper: ""
-  }
-}, s = e;
-export {
-  s as default
-};
+//#region src/components/upload/theme/Upload.base.theme.ts
+var e = { classes: { wrapper: "" } };
+//#endregion
+export { e as default };

package/lib/components/upload/theme/Upload.carbon.theme.js

@@ -1,5 +1,5 @@
 import e from "./Upload.base.theme.js";
-const t = e, o = t;
-export {
-  o as default
-};
+//#region src/components/upload/theme/Upload.carbon.theme.ts
+var t = e;
+//#endregion
+export { t as default };

package/lib/composables/index.d.ts

@@ -1,4 +1,5 @@
 export * from './keys';
+export * from './resolveComponentDefaults';
 export * from './useCommon';
 export * from './useColors';
 export * from './useCSS';

package/lib/composables/keys.d.ts

@@ -5,6 +5,7 @@ import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue';
 import type { IconInjection } from '../components/icon/Icon.vue';
 import type { FormGroupInjection } from '../components/formGroup';
+import type { InputGroupInjection } from '../components/inputGroup';
 import type { AccordionInjection } from '../components/accordion';
 import type { UIOptions } from '../create';
 import type { UITheme } from '../theme';
@@ -13,6 +14,7 @@ export declare const injectThemeKey: InjectionKey<MaybeRef<UITheme>>;
 export declare const injectTabGroupKey: InjectionKey<TabGroupInjection>;
 export declare const injectFormKey: InjectionKey<FormInjection>;
 export declare const injectFormGroupKey: InjectionKey<FormGroupInjection>;
+export declare const injectInputGroupKey: InjectionKey<InputGroupInjection>;
 export declare const injectIconsKey: InjectionKey<IconInjection>;
 export declare const injectButtonGroupKey: InjectionKey<ButtonGroupInjection>;
 export declare const injectNotificationKey: InjectionKey<NotificationInjection>;

package/lib/composables/keys.js

@@ -1,12 +1,4 @@
-const o = Symbol(), t = Symbol(), n = Symbol(), c = Symbol(), e = Symbol(), y = Symbol(), i = Symbol(), m = Symbol(), s = Symbol();
-export {
-  s as injectAccordionKey,
-  i as injectButtonGroupKey,
-  e as injectFormGroupKey,
-  c as injectFormKey,
-  y as injectIconsKey,
-  m as injectNotificationKey,
-  o as injectOptionsKey,
-  n as injectTabGroupKey,
-  t as injectThemeKey
-};
+//#region src/composables/keys.ts
+var e = Symbol(), t = Symbol(), n = Symbol(), r = Symbol(), i = Symbol(), a = Symbol(), o = Symbol(), s = Symbol(), c = Symbol(), l = Symbol();
+//#endregion
+export { l as injectAccordionKey, s as injectButtonGroupKey, i as injectFormGroupKey, r as injectFormKey, o as injectIconsKey, a as injectInputGroupKey, c as injectNotificationKey, e as injectOptionsKey, n as injectTabGroupKey, t as injectThemeKey };

package/lib/composables/resolveComponentDefaults.d.ts

@@ -0,0 +1,4 @@
+import { type ComputedRef, type MaybeRef } from 'vue';
+import type { ComponentThemes } from '../theme';
+export declare function resolvePropsWithDefaults<P extends object>(props: P, configured?: Partial<P>): P;
+export declare function useResolvedComponentProps<P extends object>(namespace: keyof ComponentThemes, props: MaybeRef<P>): ComputedRef<P>;

package/lib/composables/resolveComponentDefaults.js

@@ -0,0 +1,15 @@
+import { injectOptionsKey as e } from "./keys.js";
+import { computed as t, inject as n, unref as r } from "vue";
+//#region src/composables/resolveComponentDefaults.ts
+function i(e, t) {
+	if (!t) return e;
+	let n = { ...e }, r = e;
+	for (let e of Object.keys(t)) r[e] === void 0 && (n[e] = t[e]);
+	return n;
+}
+function a(a, o) {
+	let s = n(e, {});
+	return t(() => i(r(o), s.defaults?.[a]));
+}
+//#endregion
+export { i as resolvePropsWithDefaults, a as useResolvedComponentProps };

package/lib/composables/useCSS.js

@@ -1,26 +1,30 @@
-const u = ["dark"], a = ["hover", "active", "focus", "visited"], f = (n) => u.includes(n), v = (n) => a.includes(n), d = (n) => {
-  const $ = (i, e, t, s) => `${r(i, t, s)}: ${e}`, r = (i, e, t) => `--x${n ? `-${n}` : ""}${e ? `-${e}` : ""}-${i}${t ? `-${t}` : ""}`, l = (i, e, t) => {
-    let s = {};
-    for (const o in i) {
-      const c = i[o];
-      if (!c)
-        break;
-      f(o) ? s = {
-        ...s,
-        ...l(c, o, t)
-      } : v(o) ? s = {
-        ...s,
-        ...l(c, e, o)
-      } : s[r(o, e, t)] = c;
-    }
-    return s;
-  };
-  return {
-    get: $,
-    variable: r,
-    variables: l
-  };
-};
-export {
-  d as useCSS
+//#region src/composables/useCSS.ts
+var e = ["dark"], t = [
+	"hover",
+	"active",
+	"focus",
+	"visited"
+], n = (t) => e.includes(t), r = (e) => t.includes(e), i = (e) => {
+	let t = (e, t, n, r) => `${i(e, n, r)}: ${t}`, i = (t, n, r) => `--x${e ? `-${e}` : ""}${n ? `-${n}` : ""}-${t}${r ? `-${r}` : ""}`, a = (e, t, o) => {
+		let s = {};
+		for (let c in e) {
+			let l = e[c];
+			if (!l) break;
+			n(c) ? s = {
+				...s,
+				...a(l, c, o)
+			} : r(c) ? s = {
+				...s,
+				...a(l, t, c)
+			} : s[i(c, t, o)] = l;
+		}
+		return s;
+	};
+	return {
+		get: t,
+		variable: i,
+		variables: a
+	};
 };
+//#endregion
+export { i as useCSS };

package/lib/composables/useColors.d.ts

@@ -26,6 +26,7 @@ export declare const useColors: {
         readonly color: {
             readonly type: StringConstructor;
             readonly default: string | undefined;
+            readonly description: "Theme or CSS color used for the control accents.";
         };
     };
 };

package/lib/composables/useColors.js

@@ -1,52 +1,46 @@
-import { inject as m, computed as p, unref as f } from "vue";
-import { injectThemeKey as g } from "./keys.js";
-import { tailwindColors as n, setOpacity as l, isValidColor as d, colorShade as t } from "../common/colors.js";
-import { mergeRightDeep as y } from "../common/utils.js";
-const a = {}, C = {
-  primary: n.emerald,
-  secondary: n.slate,
-  success: n.green,
-  warning: n.yellow,
-  error: n.red
-}, i = (r) => n[r], c = (r, s) => l(r, s), w = () => {
-  const r = m(g, {}), s = p(() => y(C, f(r).colors || {}));
-  return {
-    getPalette: (e) => {
-      if (!e)
-        return i("gray");
-      const o = i(e);
-      if (o)
-        return o;
-      if (a[e])
-        return a[e];
-      if (s.value[e])
-        return s.value[e];
-      if (!d(e))
-        return console.warn(`Invalid color: ${e}`), i("gray");
-      const u = {
-        50: t(e, 0.9),
-        100: t(e, 0.8),
-        200: t(e, 0.6),
-        300: t(e, 0.4),
-        400: t(e, 0.1),
-        500: e,
-        600: t(e, -0.1),
-        700: t(e, -0.25),
-        800: t(e, -0.58),
-        900: t(e, -0.7),
-        950: t(e, -0.8)
-      };
-      return a[e] = u, u;
-    },
-    getColorOpacity: c
-  };
-};
-w.props = (r) => ({
-  color: {
-    type: String,
-    default: r
-  }
-});
-export {
-  w as useColors
+import { colorShade as e, isValidColor as t, setOpacity as n, tailwindColors as r } from "../common/colors.js";
+import { injectThemeKey as i } from "./keys.js";
+import { mergeRightDeep as a } from "../common/utils.js";
+import { computed as o, inject as s, unref as c } from "vue";
+//#region src/composables/useColors.ts
+var l = {}, u = {
+	primary: r.emerald,
+	secondary: r.slate,
+	success: r.green,
+	warning: r.yellow,
+	error: r.red
+}, d = (e) => r[e], f = (e, t) => n(e, t), p = () => {
+	let n = s(i, {}), r = o(() => a(u, c(n).colors || {}));
+	return {
+		getPalette: (n) => {
+			if (!n) return d("gray");
+			let i = d(n);
+			if (i) return i;
+			if (l[n]) return l[n];
+			if (r.value[n]) return r.value[n];
+			if (!t(n)) return console.warn(`Invalid color: ${n}`), d("gray");
+			let a = {
+				50: e(n, .9),
+				100: e(n, .8),
+				200: e(n, .6),
+				300: e(n, .4),
+				400: e(n, .1),
+				500: n,
+				600: e(n, -.1),
+				700: e(n, -.25),
+				800: e(n, -.58),
+				900: e(n, -.7),
+				950: e(n, -.8)
+			};
+			return l[n] = a, a;
+		},
+		getColorOpacity: f
+	};
 };
+p.props = (e) => ({ color: {
+	type: String,
+	default: e,
+	description: "Theme or CSS color used for the control accents."
+} });
+//#endregion
+export { p as useColors };

package/lib/composables/useCommon.d.ts

@@ -7,6 +7,7 @@ export declare const useCommon: {
             readonly type: PropType<Size>;
             readonly default: "md";
             readonly validator: (value: string) => boolean;
+            readonly description: "Control size. One of xs, sm, md, lg, xl.";
         };
     };
     validators(): {

package/lib/composables/useCommon.js

@@ -1,17 +1,16 @@
-const e = () => {
-}, s = Object.freeze({
-  size: ["xs", "sm", "md", "lg", "xl"]
-});
-e.props = () => ({
-  size: {
-    type: String,
-    default: "md",
-    validator: (t) => s.size.includes(t)
-  }
-});
-e.validators = () => ({
-  ...s
-});
-export {
-  e as useCommon
-};
+//#region src/composables/useCommon.ts
+var e = () => {}, t = Object.freeze({ size: [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+] });
+e.props = () => ({ size: {
+	type: String,
+	default: "md",
+	validator: (e) => t.size.includes(e),
+	description: "Control size. One of xs, sm, md, lg, xl."
+} }), e.validators = () => ({ ...t });
+//#endregion
+export { e as useCommon };