@feugene/granularity 0.2.0 → 0.3.1

package/dist/components/DsFormFile/chunks/DsFormFile-BFfRuM1G.js

@@ -0,0 +1,248 @@
+import { t as e } from "../../../chunks/x--kxrj3ez.js";
+import { t } from "../../DsButton/chunks/DsButton-9cB_fHZt.js";
+import { t as n } from "../../../chunks/_plugin-vue_export-helper-CHO2XVys.js";
+import { t as r } from "../../DsIcon/chunks/DsIcon-Bk6qc4Kh.js";
+import { i } from "../../../chunks/directives-K8Vo0VhP.js";
+import { l as a, o, u as s } from "../../../chunks/fileValidation-LFD-vwil.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, markRaw as g, nextTick as _, normalizeClass as v, openBlock as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, watch as T, withCtx as E, withDirectives as D, withModifiers as O } from "vue";
+import '../../../DsFormFile.css';//#region ~icons/lucide/upload
+var k = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function A(e, t) {
+	return y(), f("svg", k, [...t[0] ||= [p("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+	}, null, -1)]]);
+}
+var j = g({
+	name: "lucide-upload",
+	render: A
+}), M = [
+	"multiple",
+	"accept",
+	"disabled"
+], N = { class: "flex flex-col gap-2" }, P = { class: "flex flex-wrap items-center gap-3" }, ee = { class: "ml-2" }, F = { class: "ml-2" }, I = { class: "ml-2" }, L = ["title"], R = {
+	key: 3,
+	class: "text-sm text-[var(--muted-fg)]",
+	"data-ds-form-file-placeholder": ""
+}, z = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, B = ["title"], V = ["disabled", "onClick"], H = {
+	key: 0,
+	class: "text-sm text-[var(--ds-danger)]",
+	"data-ds-form-file-errors": ""
+}, U = /* @__PURE__ */ n(/* @__PURE__ */ h({
+	name: "DsFormFile",
+	__name: "DsFormFile",
+	props: {
+		modelValue: {},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		accept: { default: void 0 },
+		validators: { default: void 0 },
+		uploadText: { default: "Upload file" },
+		changeText: { default: "Change file" },
+		removeText: { default: "Remove" },
+		clearAllText: { default: "Clear all" },
+		placeholder: { default: "No files selected" },
+		validate: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"validation",
+		"update:errors"
+	],
+	setup(n, { emit: h }) {
+		let g = n, k = h, A = b(null), U = b([]), W = l(() => g.multiple ? Array.isArray(g.modelValue) ? g.modelValue : [] : g.modelValue instanceof File ? [g.modelValue] : []), G = l(() => W.value.length > 0);
+		function K() {
+			A.value && (A.value.value = "");
+		}
+		function q(e) {
+			U.value = e, k("validation", e), k("update:errors", e);
+		}
+		function J() {
+			U.value.length !== 0 && q([]);
+		}
+		function Y() {
+			g.disabled || A.value?.click();
+		}
+		function X(e) {
+			let t = g.multiple ? e : e[0] ?? null;
+			k("update:modelValue", t), k("change", t);
+		}
+		async function Z(e) {
+			let t = (e) => !!e && typeof e.then == "function", n = g.validate ? async ({ files: e }) => await g.validate?.(e) ?? [] : void 0, r = a(e, [
+				o(g.accept),
+				...g.validators ?? [],
+				...n ? [n] : []
+			], {
+				source: "input",
+				multiple: g.multiple
+			}), { files: i, issues: s } = t(r) ? await r : r;
+			if (s.length > 0) {
+				q(s), K(), await _();
+				return;
+			}
+			J(), X(i), K(), await _();
+		}
+		async function Q(e) {
+			if (g.disabled) return;
+			let t = e.target, n = t?.files ? Array.prototype.slice.call(t.files) : [];
+			t && (t.value = ""), await _(), await Z(n);
+		}
+		function $() {
+			g.disabled || (J(), K(), k("clear"), k("update:modelValue", g.multiple ? [] : null), k("change", g.multiple ? [] : null));
+		}
+		function te(e) {
+			if (g.disabled) return;
+			if (!g.multiple) {
+				$();
+				return;
+			}
+			let t = W.value.slice();
+			t.splice(e, 1), k("update:modelValue", t), k("change", t);
+		}
+		function ne(e) {
+			return e.fileName ? `${e.fileName}: ${e.message}` : e.message;
+		}
+		let re = l(() => {
+			let e = g.validate ? async ({ files: e }) => await g.validate?.(e) ?? [] : void 0, t = [
+				o(g.accept),
+				...g.validators ?? [],
+				...e ? [e] : []
+			];
+			return {
+				enabled: !g.disabled,
+				multiple: g.multiple,
+				validators: t,
+				onFiles: async (e) => {
+					J(), X(e), K(), await _();
+				},
+				onError: (e) => {
+					e instanceof s ? q(e.issues) : q([{
+						code: "accept",
+						message: "Failed to validate dropped files"
+					}]);
+				}
+			};
+		});
+		return T(() => g.modelValue, (e) => {
+			A.value && (!e || Array.isArray(e) && e.length === 0) && (A.value.value = "");
+		}), (a, o) => D((y(), f("div", {
+			"data-ds-form-file": "",
+			class: v(["rounded-[var(--ds-radius-md)]", n.disabled ? "opacity-60 cursor-not-allowed" : ""])
+		}, [p("input", {
+			ref_key: "inputRef",
+			ref: A,
+			"data-ds-form-file-input": "",
+			type: "file",
+			tabindex: "-1",
+			"aria-hidden": "true",
+			class: "absolute opacity-0 w-px h-px pointer-events-none",
+			multiple: n.multiple,
+			accept: n.accept,
+			disabled: n.disabled,
+			onChange: Q
+		}, null, 40, M), p("div", N, [
+			p("div", P, [
+				m(t, {
+					variant: "secondary",
+					size: "sm",
+					"data-ds-form-file-upload-btn": "",
+					disabled: n.disabled,
+					onClick: O(Y, ["prevent"])
+				}, {
+					default: E(() => [m(r, {
+						size: "sm",
+						"aria-hidden": "true"
+					}, {
+						default: E(() => [m(w(j))]),
+						_: 1
+					}), p("span", ee, C(G.value ? n.changeText : n.uploadText), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				G.value && !n.multiple ? (y(), u(t, {
+					key: 0,
+					variant: "secondary",
+					size: "sm",
+					"data-ds-form-file-clear-btn": "",
+					disabled: n.disabled,
+					onClick: O($, ["prevent"])
+				}, {
+					default: E(() => [m(r, {
+						size: "sm",
+						"aria-hidden": "true"
+					}, {
+						default: E(() => [m(w(e))]),
+						_: 1
+					}), p("span", F, C(n.removeText), 1)]),
+					_: 1
+				}, 8, ["disabled"])) : d("", !0),
+				n.multiple && G.value ? (y(), u(t, {
+					key: 1,
+					variant: "secondary",
+					size: "sm",
+					"data-ds-form-file-clear-all-btn": "",
+					disabled: n.disabled,
+					onClick: O($, ["prevent"])
+				}, {
+					default: E(() => [m(r, {
+						size: "sm",
+						"aria-hidden": "true"
+					}, {
+						default: E(() => [m(w(e))]),
+						_: 1
+					}), p("span", I, C(n.clearAllText), 1)]),
+					_: 1
+				}, 8, ["disabled"])) : d("", !0),
+				!n.multiple && G.value ? (y(), f("span", {
+					key: 2,
+					class: "text-sm text-[var(--muted-fg)] truncate max-w-[240px]",
+					"data-ds-form-file-single-name": "",
+					title: W.value[0]?.name
+				}, C(W.value[0]?.name), 9, L)) : d("", !0),
+				G.value ? d("", !0) : (y(), f("span", R, C(n.placeholder), 1))
+			]),
+			n.multiple && G.value ? (y(), f("div", z, [(y(!0), f(c, null, x(W.value, (e, t) => (y(), f("div", {
+				key: `${e.name}-${e.size}-${t}`,
+				class: "flex items-center gap-2",
+				"data-ds-form-file-item": ""
+			}, [p("span", {
+				class: "text-sm text-[var(--muted-fg)] truncate max-w-[240px]",
+				title: e.name,
+				"data-ds-form-file-item-name": ""
+			}, C(e.name), 9, B), p("button", {
+				type: "button",
+				class: "text-xs text-[var(--muted-fg)] hover:text-[var(--fg)]",
+				"data-ds-form-file-item-remove": "",
+				disabled: n.disabled,
+				onClick: O((e) => te(t), ["prevent"])
+			}, C(n.removeText), 9, V)]))), 128))])) : d("", !0),
+			S(a.$slots, "errors", { errors: U.value }, () => [U.value.length ? (y(), f("div", H, [(y(!0), f(c, null, x(U.value, (e, t) => (y(), f("div", {
+				key: t,
+				"data-ds-form-file-error": ""
+			}, C(ne(e)), 1))), 128))])) : d("", !0)], !0)
+		])], 2)), [[w(i), re.value]]);
+	}
+}), [["__scopeId", "data-v-13235f84"]]);
+//#endregion
+export { U as t };

package/dist/components/DsFormFile/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsFormFile-C5ldcCAs.js";
-import { n as t, t as n } from "../../chunks/config-DuaBaVyF.js";
-export { e as DsFormFile, e as default, n as dsFormFileConfig, t as dsFormFileSafelist };
+import { t as e } from "./chunks/DsFormFile-BFfRuM1G.js";
+import { t } from "../../chunks/config-C2wd640N.js";
+export { e as DsFormFile, e as default, t as dsFormFileConfig };

package/dist/components/DsFormSection/chunks/DsFormSection-Dzspqv9R.js

@@ -0,0 +1,27 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, renderSlot as a, toDisplayString as o, unref as s, useId as c } from "vue";
+//#region src/components/DsFormSection/DsFormSection.vue?vue&type=script&setup=true&lang.ts
+var l = ["aria-labelledby", "aria-describedby"], u = ["id"], d = ["id"], f = /* @__PURE__ */ r({
+	__name: "DsFormSection",
+	props: {
+		title: {},
+		description: { default: void 0 }
+	},
+	setup(r) {
+		let f = c(), p = c();
+		return (c, m) => (i(), t("section", {
+			"data-ds-form-section": "",
+			class: "grid gap-4",
+			"aria-labelledby": s(f),
+			"aria-describedby": r.description ? s(p) : void 0
+		}, [n("div", null, [n("div", {
+			id: s(f),
+			class: "text-[14px] font-700"
+		}, o(r.title), 9, u), r.description ? (i(), t("div", {
+			key: 0,
+			id: s(p),
+			class: "mt-1 text-[13px] text-[var(--muted-fg)]"
+		}, o(r.description), 9, d)) : e("", !0)]), a(c.$slots, "default")], 8, l));
+	}
+});
+//#endregion
+export { f as t };

package/dist/components/DsFormSection/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../chunks/DsFormSection-DmIDIQg7.js";
-import { n as t, t as n } from "../../chunks/config-DJ7xDo-q.js";
-export { e as DsFormSection, e as default, n as dsFormSectionConfig, t as dsFormSectionSafelist };
+import { t as e } from "./chunks/DsFormSection-Dzspqv9R.js";
+import { t } from "../../chunks/config-DQdLgKLJ.js";
+export { e as DsFormSection, e as default, t as dsFormSectionConfig };

package/dist/components/DsIcon/chunks/DsIcon-Bk6qc4Kh.js

@@ -0,0 +1,25 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeStyle as r, openBlock as i, renderSlot as a } from "vue";
+import '../../../DsIcon.css';//#endregion
+//#region src/components/DsIcon/DsIcon.vue
+var o = /* @__PURE__ */ n({
+	__name: "DsIcon",
+	props: { size: {} },
+	setup(n) {
+		let o = {
+			sm: 16,
+			md: 18,
+			lg: 20
+		};
+		function s(e) {
+			return typeof e == "number" ? e : o[e];
+		}
+		let c = n, l = e(() => c.size ?? "md"), u = e(() => ({ "--ds-icon-size": `${s(l.value)}px` }));
+		return (e, n) => (i(), t("span", {
+			"data-ds-icon": "",
+			class: "ds-icon inline-flex items-center justify-center align-middle",
+			style: r(u.value)
+		}, [a(e.$slots, "default")], 4));
+	}
+});
+//#endregion
+export { o as t };

package/dist/components/DsIcon/index.js

@@ -1,3 +1,3 @@
-import { n as e, t } from "../../chunks/DsIcon-Q-KQGAQU.js";
-import { t as n } from "../../chunks/config-BrwOndwO.js";
-export { t as DsIcon, t as default, n as dsIconConfig, e as resolveDsIconSizePx };
+import { t as e } from "./chunks/DsIcon-Bk6qc4Kh.js";
+import { t } from "../../chunks/config-DpluHp1i.js";
+export { e as DsIcon, e as default, t as dsIconConfig };