npm - @monashakeri/vue-smart-tree-select - Versions diffs - 1.0.0 - Mend

@monashakeri/vue-smart-tree-select 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +5 -0
package/dist/style.css +2 -0
package/dist/vue-smart-tree-select.es.js +297 -0
package/dist/vue-smart-tree-select.umd.js +1 -0
package/package.json +53 -0

package/dist/vue-smart-tree-select.es.js ADDED Viewed

@@ -0,0 +1,297 @@
+import { Fragment as e, Transition as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, normalizeClass as s, openBlock as c, renderList as l, toDisplayString as u, vModelText as d, vShow as f, withCtx as p, withDirectives as m, withKeys as h, withModifiers as g } from "vue";
+//#region \0plugin-vue:export-helper
+var _ = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, v = {
+	name: "SmartTreeSelect",
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		options: {
+			type: Array,
+			default: () => []
+		},
+		placeholder: {
+			type: String,
+			default: "انتخاب کنید"
+		},
+		searchPlaceholder: {
+			type: String,
+			default: "جست‌وجو در موارد..."
+		},
+		childTitleMode: {
+			type: String,
+			default: "child",
+			validator: (e) => ["child", "parent-child"].includes(e)
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	data() {
+		return {
+			isDropdownOpen: !1,
+			searchQuery: "",
+			expandedGroups: {},
+			expandedDropdownGroups: {}
+		};
+	},
+	computed: {
+		selectedCount() {
+			return this.modelValue.length;
+		},
+		filteredOptions() {
+			let e = this.searchQuery.trim().toLocaleLowerCase("fa");
+			return e ? this.options.map((t) => {
+				let n = t.children || [], r = t.title.toLocaleLowerCase("fa").includes(e), i = n.filter((t) => t.title.toLocaleLowerCase("fa").includes(e));
+				return !r && !i.length ? null : {
+					...t,
+					children: r ? n : i
+				};
+			}).filter(Boolean) : this.options;
+		},
+		groupedSelectedItems() {
+			let e = new Set(this.modelValue);
+			return this.options.map((t) => {
+				let n = (t.children || []).filter((t) => e.has(t._id));
+				return n.length ? {
+					parentId: t._id,
+					parentTitle: t.title,
+					children: n
+				} : null;
+			}).filter(Boolean);
+		}
+	},
+	watch: {
+		searchQuery(e) {
+			e.trim() && this.filteredOptions.forEach((e) => {
+				this.expandedDropdownGroups[e._id] = !0;
+			});
+		},
+		groupedSelectedItems: {
+			immediate: !0,
+			handler(e) {
+				e.forEach((e) => {
+					this.expandedGroups[e.parentId] === void 0 && (this.expandedGroups[e.parentId] = !0);
+				});
+			}
+		}
+	},
+	mounted() {
+		document.addEventListener("pointerdown", this.handleClickOutside);
+	},
+	beforeUnmount() {
+		document.removeEventListener("pointerdown", this.handleClickOutside);
+	},
+	methods: {
+		handleClickOutside(e) {
+			this.$refs.root?.contains(e.target) || this.closeDropdown();
+		},
+		openDropdown() {
+			this.isDropdownOpen = !0, this.$nextTick(() => {
+				this.$refs.searchInput?.focus();
+			});
+		},
+		closeDropdown() {
+			this.isDropdownOpen = !1, this.searchQuery = "";
+		},
+		toggleDropdown() {
+			this.isDropdownOpen ? this.closeDropdown() : this.openDropdown();
+		},
+		isExpanded(e) {
+			return !!this.expandedDropdownGroups[e];
+		},
+		toggleDropdownAccordion(e) {
+			this.expandedDropdownGroups[e] = !this.expandedDropdownGroups[e];
+		},
+		toggleAccordion(e) {
+			this.expandedGroups[e] = !this.expandedGroups[e];
+		},
+		formatChildTitle(e, t) {
+			return this.childTitleMode === "parent-child" ? `${e} - ${t}` : t;
+		},
+		isChildSelected(e) {
+			return this.modelValue.includes(e._id);
+		},
+		isParentSelected(e) {
+			return e.children?.length > 0 && e.children.every((e) => this.modelValue.includes(e._id));
+		},
+		isParentIndeterminate(e) {
+			let t = (e.children || []).filter((e) => this.modelValue.includes(e._id)).length;
+			return t > 0 && t < e.children.length;
+		},
+		updateValue(e) {
+			this.$emit("update:modelValue", e), this.$emit("change", e);
+		},
+		toggleChild(e) {
+			let t = this.isChildSelected(e) ? this.modelValue.filter((t) => t !== e._id) : [...this.modelValue, e._id];
+			this.updateValue(t);
+		},
+		toggleParent(e, t) {
+			let n = e.children.map((e) => e._id), r = t.target.checked ? [.../* @__PURE__ */ new Set([...this.modelValue, ...n])] : this.modelValue.filter((e) => !n.includes(e));
+			this.updateValue(r);
+		},
+		clearAll() {
+			this.updateValue([]);
+		},
+		removeChild(e) {
+			this.updateValue(this.modelValue.filter((t) => t !== e._id));
+		},
+		removeGroup(e) {
+			let t = new Set(e.children.map((e) => e._id));
+			this.updateValue(this.modelValue.filter((e) => !t.has(e)));
+		}
+	}
+}, y = ["aria-expanded"], b = { class: "select-trigger__content" }, x = {
+	key: 0,
+	class: "count-badge"
+}, S = { class: "select-trigger__label" }, C = { class: "select-trigger__actions" }, w = { class: "dropdown__header" }, T = { class: "search-box" }, E = ["placeholder"], D = { class: "selection-summary" }, O = {
+	class: "tree-list",
+	role: "listbox",
+	"aria-multiselectable": "true"
+}, k = { class: "parent-row" }, A = { class: "check-control" }, j = [
+	"checked",
+	"indeterminate",
+	"aria-label",
+	"onChange"
+], M = ["aria-expanded", "onClick"], N = { class: "parent-toggle__title" }, P = { class: "parent-toggle__count" }, F = {
+	key: 0,
+	class: "children-list"
+}, I = ["checked", "onChange"], L = {
+	key: 0,
+	class: "empty-state"
+}, R = {
+	key: 0,
+	class: "selected-groups"
+}, z = { class: "selected-group__header" }, B = ["aria-expanded", "onClick"], V = { class: "parent-toggle__count" }, H = ["aria-label", "onClick"], U = { class: "chips" }, W = ["aria-label", "onClick"];
+function G(_, v, G, K, q, J) {
+	return c(), r("div", {
+		ref: "root",
+		class: "smart-tree-select",
+		dir: "rtl",
+		onKeydown: v[9] ||= h((...e) => J.closeDropdown && J.closeDropdown(...e), ["esc"])
+	}, [
+		i("button", {
+			type: "button",
+			class: s(["select-trigger", { "is-open": q.isDropdownOpen }]),
+			"aria-expanded": String(q.isDropdownOpen),
+			"aria-haspopup": "listbox",
+			onClick: v[2] ||= (...e) => J.toggleDropdown && J.toggleDropdown(...e),
+			onKeydown: [v[3] ||= h(g((...e) => J.openDropdown && J.openDropdown(...e), ["prevent"]), ["down"]), v[4] ||= h(g((...e) => J.toggleDropdown && J.toggleDropdown(...e), ["prevent"]), ["enter"])]
+		}, [i("span", b, [J.selectedCount ? (c(), r("span", x, u(J.selectedCount), 1)) : n("", !0), i("span", S, u(J.selectedCount ? `${J.selectedCount} مورد انتخاب شده` : G.placeholder), 1)]), i("span", C, [J.selectedCount ? (c(), r("span", {
+			key: 0,
+			class: "clear-button",
+			role: "button",
+			tabindex: "0",
+			"aria-label": "پاک کردن انتخاب‌ها",
+			onClick: v[0] ||= g((...e) => J.clearAll && J.clearAll(...e), ["stop"]),
+			onKeydown: v[1] ||= h(g((...e) => J.clearAll && J.clearAll(...e), ["stop", "prevent"]), ["enter"])
+		}, " × ", 32)) : n("", !0), (c(), r("svg", {
+			class: s(["chevron", { "is-open": q.isDropdownOpen }]),
+			viewBox: "0 0 20 20"
+		}, [...v[10] ||= [i("path", { d: "m5 7 5 5 5-5" }, null, -1)]], 2))])], 42, y),
+		o(t, { name: "tree-dropdown" }, {
+			default: p(() => [q.isDropdownOpen ? (c(), r("section", {
+				key: 0,
+				class: "dropdown",
+				onClick: v[8] ||= g(() => {}, ["stop"])
+			}, [i("div", w, [i("div", T, [
+				v[11] ||= i("svg", {
+					viewBox: "0 0 20 20",
+					"aria-hidden": "true"
+				}, [i("circle", {
+					cx: "8.5",
+					cy: "8.5",
+					r: "5.5"
+				}), i("path", { d: "m13 13 4 4" })], -1),
+				m(i("input", {
+					ref: "searchInput",
+					"onUpdate:modelValue": v[5] ||= (e) => q.searchQuery = e,
+					type: "search",
+					autocomplete: "off",
+					placeholder: G.searchPlaceholder,
+					"aria-label": "جست‌وجو در گزینه‌ها"
+				}, null, 8, E), [[d, q.searchQuery]]),
+				q.searchQuery ? (c(), r("button", {
+					key: 0,
+					type: "button",
+					class: "search-clear",
+					"aria-label": "پاک کردن جست‌وجو",
+					onClick: v[6] ||= (e) => q.searchQuery = ""
+				}, " × ")) : n("", !0)
+			]), i("div", D, [i("span", null, u(J.selectedCount ? `${J.selectedCount} انتخاب شده` : "هنوز موردی انتخاب نشده"), 1), J.selectedCount ? (c(), r("button", {
+				key: 0,
+				type: "button",
+				class: "text-button",
+				onClick: v[7] ||= (...e) => J.clearAll && J.clearAll(...e)
+			}, " حذف همه ")) : n("", !0)])]), i("div", O, [(c(!0), r(e, null, l(J.filteredOptions, (a) => (c(), r("article", {
+				key: a._id,
+				class: "tree-group"
+			}, [i("div", k, [i("label", A, [i("input", {
+				type: "checkbox",
+				checked: J.isParentSelected(a),
+				indeterminate: J.isParentIndeterminate(a),
+				"aria-label": `انتخاب همه موارد ${a.title}`,
+				onChange: (e) => J.toggleParent(a, e)
+			}, null, 40, j), v[12] ||= i("span", {
+				class: "check-control__box",
+				"aria-hidden": "true"
+			}, [i("svg", { viewBox: "0 0 16 16" }, [i("path", { d: "m3 8 3 3 7-7" })])], -1)]), i("button", {
+				type: "button",
+				class: "parent-toggle",
+				"aria-expanded": String(J.isExpanded(a._id)),
+				onClick: (e) => J.toggleDropdownAccordion(a._id)
+			}, [
+				i("span", N, u(a.title), 1),
+				i("span", P, u(a.children.length), 1),
+				(c(), r("svg", {
+					class: s(["group-chevron", { "is-open": J.isExpanded(a._id) }]),
+					viewBox: "0 0 20 20"
+				}, [...v[13] ||= [i("path", { d: "m5 7 5 5 5-5" }, null, -1)]], 2))
+			], 8, M)]), o(t, { name: "tree-children" }, {
+				default: p(() => [J.isExpanded(a._id) && a.children.length ? (c(), r("div", F, [(c(!0), r(e, null, l(a.children, (e) => (c(), r("label", {
+					key: e._id,
+					class: s(["child-row", { "is-selected": J.isChildSelected(e) }])
+				}, [
+					i("input", {
+						type: "checkbox",
+						checked: J.isChildSelected(e),
+						onChange: (t) => J.toggleChild(e)
+					}, null, 40, I),
+					v[14] ||= i("span", { class: "native-check" }, null, -1),
+					i("span", null, u(J.formatChildTitle(a.title, e.title)), 1)
+				], 2))), 128))])) : n("", !0)]),
+				_: 2
+			}, 1024)]))), 128)), J.filteredOptions.length ? n("", !0) : (c(), r("div", L, [...v[15] ||= [i("strong", null, "نتیجه‌ای پیدا نشد", -1), i("span", null, "عبارت جست‌وجو را تغییر دهید.", -1)]]))])])) : n("", !0)]),
+			_: 1
+		}),
+		J.groupedSelectedItems.length ? (c(), r("section", R, [(c(!0), r(e, null, l(J.groupedSelectedItems, (t) => (c(), r("div", {
+			key: t.parentId,
+			class: "selected-group"
+		}, [i("div", z, [i("button", {
+			type: "button",
+			class: "selected-group__toggle",
+			"aria-expanded": String(q.expandedGroups[t.parentId]),
+			onClick: (e) => J.toggleAccordion(t.parentId)
+		}, [i("span", null, u(t.parentTitle), 1), i("span", V, u(t.children.length), 1)], 8, B), i("button", {
+			type: "button",
+			class: "remove-group",
+			"aria-label": `حذف تمام موارد ${t.parentTitle}`,
+			onClick: (e) => J.removeGroup(t)
+		}, " حذف همه ", 8, H)]), m(i("div", U, [(c(!0), r(e, null, l(t.children, (e) => (c(), r("span", {
+			key: e._id,
+			class: "chip"
+		}, [a(u(J.formatChildTitle(t.parentTitle, e.title)) + " ", 1), i("button", {
+			type: "button",
+			"aria-label": `حذف ${J.formatChildTitle(t.parentTitle, e.title)}`,
+			onClick: (t) => J.removeChild(e)
+		}, " × ", 8, W)]))), 128))], 512), [[f, q.expandedGroups[t.parentId]]])]))), 128))])) : n("", !0)
+	], 544);
+}
+//#endregion
+//#region src/index.js
+var K = /* @__PURE__ */ _(v, [["render", G], ["__scopeId", "data-v-31e70ee7"]]);
+//#endregion
+export { K as default };

package/dist/vue-smart-tree-select.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "name": "@monashakeri/vue-smart-tree-select",
+  "version": "1.0.0",
+  "description": "A customizable RTL-friendly tree select component for Vue 2.",
+  "main": "./dist/vue-smart-tree-select.umd.js",
+  "module": "./dist/vue-smart-tree-select.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-smart-tree-select.es.js",
+      "require": "./dist/vue-smart-tree-select.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "tree-select",
+    "multiselect",
+    "rtl",
+    "persian",
+    "farsi",
+    "vazirmatn"
+  ],
+  "author": "Mona Shakeri",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monashakerii/vue-smart-tree-select.git"
+  },
+  "bugs": {
+    "url": "https://github.com/monashakerii/vue-smart-tree-select/issues"
+  },
+  "homepage": "https://github.com/monashakerii/vue-smart-tree-select#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.mjs",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@fontsource/vazirmatn": "^5.3.0",
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.8"
+  }
+}