@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/dist/treeshaking/components/sig/OSigList.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,513 @@
+import { useI18n } from "../../i18n/index.mjs";
+import OEmpty_default from "../empty/OEmpty.mjs";
+import OSigItem_default from "./components/OSigItem.mjs";
+import icon_search_default from "../../_virtual/~icons/sig/icon-search.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { OCol, ODivider, OIcon, OInput, OOption, OPagination, OPopover, ORadio, ORadioGroup, ORow, OSelect, OToggle } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { ElOption, ElSelect } from "element-plus";
+import { useDebounceFn, useIntersectionObserver } from "@vueuse/core";
+import "element-plus/es/components/select/style/css";
+import "element-plus/es/components/option/style/css";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+// src/components/sig/OSigList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "o-sig-filter-type"
+};
+var _hoisted_2 = { class: "o-sig-filter-title" };
+var _hoisted_3 = {
+	key: 1,
+	class: "o-sig-filter-input"
+};
+var _hoisted_4 = { class: "o-sig-filter-select-box" };
+var _hoisted_5 = {
+	key: 0,
+	class: "o-sig-search-loading"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "o-sig-search-label"
+};
+var _hoisted_7 = ["onClick"];
+var _hoisted_8 = ["title"];
+var _hoisted_9 = {
+	key: 2,
+	class: "o-sig-no-result"
+};
+var _hoisted_10 = {
+	key: 0,
+	class: "o-sig-filter-result-tip"
+};
+var _hoisted_11 = { key: 0 };
+var _hoisted_12 = { class: "o-sig-num" };
+var _hoisted_13 = {
+	key: 0,
+	class: "o-sig-num"
+};
+var _hoisted_14 = { key: 1 };
+var _hoisted_15 = { class: "o-sig-num" };
+var _hoisted_16 = {
+	key: 4,
+	class: "o-sig-pagination"
+};
+var PAGE_SIZE_DEFAULT = 10;
+var OSigList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OSigList",
+	props: {
+		sigLandscape: { default: () => [] },
+		sigList: { default: () => [] },
+		searchFn: {},
+		footerSelector: { default: "#app > .footer" }
+	},
+	emits: ["to-sig-detail"],
+	setup(__props, { emit: __emit }) {
+		const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+		const { locale: localeRef, t } = useI18n();
+		const locale = computed(() => localeRef.value);
+		const { isLaptop, isPadH, lePadV, isPhone } = useScreen();
+		const COUNT_PER_PAGE = [
+			10,
+			20,
+			30
+		];
+		const props = __props;
+		const emit = __emit;
+		const sigQuery = ref({
+			pageSize: PAGE_SIZE_DEFAULT,
+			page: 1
+		});
+		const resetSigQuery = () => {
+			sigQuery.value.page = 1;
+			sigQuery.value.pageSize = PAGE_SIZE_DEFAULT;
+		};
+		const allSigInfo = ref([]);
+		const landscapeList = ref([]);
+		const featureArr = ref([]);
+		const mergedSigList = ref([]);
+		const constructLandscapeMap = () => {
+			if (!props.sigLandscape.length) {
+				featureArr.value = [];
+				return;
+			}
+			landscapeList.value = props.sigLandscape.map(({ created_at: _created, ...rest }) => rest);
+			const seen = /* @__PURE__ */ new Set();
+			const features = [];
+			for (const item of landscapeList.value) if (item.feature_zh && !seen.has(item.feature_zh)) {
+				seen.add(item.feature_zh);
+				features.push({
+					value: item.feature_en ?? "",
+					label: {
+						zh: item.feature_zh,
+						en: item.feature_en
+					}
+				});
+			}
+			features.push({
+				value: "other",
+				label: {
+					zh: "其他",
+					en: "Other"
+				}
+			});
+			features.unshift({
+				value: "all",
+				label: {
+					zh: "全部",
+					en: "All"
+				}
+			});
+			featureArr.value = features;
+		};
+		const mergeSigList = () => {
+			const map = new Map(landscapeList.value.map((m) => [m.sig_name, m]));
+			mergedSigList.value = allSigInfo.value.map((item) => ({
+				...item,
+				...map.get(item.name) ?? {}
+			}));
+		};
+		const initData = () => {
+			allSigInfo.value = [...props.sigList].sort((a, b) => a.name.localeCompare(b.name));
+			constructLandscapeMap();
+			mergeSigList();
+		};
+		watch(() => [props.sigList, props.sigLandscape], () => {
+			initData();
+		}, { immediate: true });
+		const searchType = ref("all");
+		const placeholderType = ref(t("sig.searchSig"));
+		const sigOptions = [
+			{
+				label: t("sig.all"),
+				value: "all",
+				placeholder: t("sig.searchSig")
+			},
+			{
+				label: t("sig.sigGroup"),
+				value: "sig",
+				placeholder: t("sig.searchSigName")
+			},
+			{
+				label: t("sig.repo"),
+				value: "repos",
+				placeholder: t("sig.searchSigRepo")
+			},
+			{
+				label: t("sig.maintainerEn"),
+				value: "maintainer",
+				placeholder: t("sig.searchSigMaintainer")
+			}
+		];
+		const getSearchType = (val) => {
+			const v = String(val);
+			placeholderType.value = sigOptions.find((e) => e.value === v)?.placeholder ?? "";
+			enterSearchType.value = v;
+			hasSearchData.value = [];
+			sigSearch();
+		};
+		const uniqueArray = (array) => {
+			if (!array) return [];
+			const seen = /* @__PURE__ */ new Set();
+			return array.filter((item) => seen.has(item.name) ? false : (seen.add(item.name), true));
+		};
+		const sigInput = ref("");
+		const showPanel = ref(false);
+		const hasSearchData = ref([]);
+		const searching = ref(false);
+		const buildSearchGroups = (res, type) => {
+			const top3 = (arr) => uniqueArray(arr).sort((a, b) => b.socre - a.socre).slice(0, 3);
+			const all = [
+				{
+					id: "sig",
+					label: t("sig.sigGroup"),
+					list: top3(res["name.keyword"])
+				},
+				{
+					id: "repos",
+					label: t("sig.repo"),
+					list: top3(res.repos)
+				},
+				{
+					id: "maintainer",
+					label: t("sig.maintainerEn"),
+					list: top3(res.giteeIds)
+				}
+			];
+			return type === "all" ? all : all.filter((g) => g.id === type);
+		};
+		const sigSearch = () => {
+			if (!props.searchFn) return;
+			searching.value = true;
+			const params = {
+				keyword: sigInput.value,
+				keywordType: searchType.value
+			};
+			props.searchFn(params).then((res) => {
+				hasSearchData.value = buildSearchGroups(res, searchType.value);
+				const kw = sigInput.value;
+				if (kw) {
+					const escaped = kw.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+					const regex = new RegExp(`(${escaped})`, "gi");
+					hasSearchData.value = hasSearchData.value.map((g) => ({
+						...g,
+						list: g.list.map((item) => ({
+							...item,
+							name: item.name.replace(/<[^>]+>/g, "").replace(regex, "<span class=\"highlight-text\">$1</span>")
+						}))
+					}));
+				}
+				searching.value = false;
+			}).catch(() => {
+				hasSearchData.value = buildSearchGroups({}, searchType.value);
+				searching.value = false;
+			});
+		};
+		const debouncedSearch = useDebounceFn(() => {
+			resetSigQuery();
+			sigSearch();
+		}, 300);
+		const enterSearchType = ref("all");
+		const enterSearchInput = ref("");
+		const changeSearchInput = () => {
+			if (!sigInput.value) return;
+			showPanel.value = false;
+			enterSearchType.value = searchType.value;
+			enterSearchInput.value = sigInput.value;
+		};
+		const stripHtml = (val) => val?.replace(/<[^>]+>/g, "") ?? "";
+		const clickItem = (val) => {
+			sigInput.value = stripHtml(val);
+			enterSearchType.value = searchType.value;
+			enterSearchInput.value = sigInput.value;
+			nextTick(() => {
+				showPanel.value = false;
+			});
+		};
+		const clearInput = () => {
+			sigInput.value = "";
+			enterSearchInput.value = "";
+		};
+		const rootRef = ref();
+		const panelRef = ref();
+		const popoverVisible = computed(() => showPanel.value && !!sigInput.value);
+		const onPopoverVisibleChange = (val) => {
+			showPanel.value = val;
+		};
+		const toSigDetail = (sigName) => emit("to-sig-detail", sigName);
+		watch(() => sigInput.value, (val) => {
+			showPanel.value = !!val;
+			if (!val) enterSearchInput.value = val;
+			if (val) debouncedSearch();
+		});
+		const filterSigData = ref([]);
+		const filterSearchData = ref([]);
+		const featureType = ref("all");
+		const matchKw = (text, kw) => !!text && text.toLowerCase().includes(kw);
+		watch(() => [
+			featureType.value,
+			enterSearchType.value,
+			enterSearchInput.value,
+			sigQuery.value.page,
+			sigQuery.value.pageSize,
+			mergedSigList.value
+		], ([ftype, stype, sinput, page, pageSize, merged]) => {
+			if (!merged.length) return;
+			const kw = (sinput ?? "").toLowerCase();
+			const byFeature = ftype === "all" ? merged : merged.filter((item) => ftype === "other" ? !item.feature_en : item.feature_en === ftype);
+			let searched = byFeature;
+			if (kw && stype) searched = byFeature.filter((item) => {
+				if (stype === "sig" || stype === "all") {
+					if (matchKw(item.name, kw) || matchKw(item.description, kw)) return true;
+				}
+				if (stype === "repos" || stype === "all") {
+					if (item.repositories?.some((r) => r?.toLowerCase().includes(kw))) return true;
+				}
+				if (stype === "maintainer" || stype === "all") {
+					if (item.maintainer_info?.some((m) => matchKw(m.name, kw) || matchKw(m.gitee_id, kw))) return true;
+				}
+				return false;
+			});
+			if (kw) searched = [...searched].sort((a, b) => {
+				const aHit = a.name.toLowerCase().includes(kw);
+				return aHit === b.name.toLowerCase().includes(kw) ? 0 : aHit ? -1 : 1;
+			});
+			filterSearchData.value = searched;
+			filterSigData.value = lePadV.value ? searched.slice(0, page * pageSize) : searched.slice((page - 1) * pageSize, page * pageSize);
+		}, { immediate: true });
+		const gap = computed(() => {
+			if (isLaptop.value) return "24px 24px";
+			if (isPadH.value) return "16px 16px";
+			if (lePadV.value) return "0 12px";
+			return "32px 32px";
+		});
+		watch(lePadV, () => {
+			sigQuery.value.page = 1;
+		});
+		const clearChecked = (val) => {
+			resetSigQuery();
+			if (val) nextTick(() => {
+				featureType.value = "all";
+			});
+		};
+		const loadingRef = ref(null);
+		const getMoreDataMo = () => {
+			sigQuery.value.page++;
+		};
+		useIntersectionObserver(loadingRef, ([entry]) => {
+			if (entry?.isIntersecting && filterSigData.value.length < filterSearchData.value.length) getMoreDataMo();
+		}, { rootMargin: "200px" });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: "o-sig-list"
+			}, [
+				createElementVNode("div", { class: normalizeClass({
+					"o-sig-filter-box": true,
+					[`o-sig-filter-box-${locale.value}`]: true,
+					"o-sig-filter-box--no-filter-type": !featureArr.value.length
+				}) }, [featureArr.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					!unref(isPhone) ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", _hoisted_2, toDisplayString(unref(t)("sig.type")), 1), createVNode(unref(ORadioGroup), {
+						modelValue: featureType.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => featureType.value = $event)
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(featureArr.value, (option) => {
+							return openBlock(), createBlock(unref(ORadio), {
+								key: option.value,
+								value: option.value
+							}, {
+								radio: withCtx(({ checked }) => [createVNode(unref(OToggle), {
+									class: normalizeClass(["o-sig-tag-normal", { active: checked }]),
+									checked,
+									onClick: ($event) => clearChecked(checked)
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(option.label[locale.value]), 1)]),
+									_: 2
+								}, 1032, [
+									"class",
+									"checked",
+									"onClick"
+								])]),
+								_: 2
+							}, 1032, ["value"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["modelValue"])])) : createCommentVNode("", true),
+					unref(isPhone) ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ElSelect), {
+						modelValue: featureType.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => featureType.value = $event),
+						filterable: "",
+						size: "large",
+						placeholder: unref(t)("sig.selectOrSearchCate")
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(featureArr.value, (option) => {
+							return openBlock(), createBlock(unref(ElOption), {
+								key: option.value,
+								label: option.label[locale.value] ?? option.value,
+								value: option.value
+							}, null, 8, ["label", "value"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true),
+					createVNode(unref(ODivider), { direction: "h" })
+				], 64)) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [createElementVNode("div", {
+					ref_key: "panelRef",
+					ref: panelRef,
+					class: normalizeClass(["o-sig-filter-select", { "o-sig-filter-select-focus": showPanel.value }])
+				}, [
+					createVNode(unref(OSelect), {
+						modelValue: searchType.value,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchType.value = $event),
+						size: "large",
+						trigger: "click",
+						variant: "outline",
+						onChange: getSearchType
+					}, {
+						default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(sigOptions, (item) => {
+							return createVNode(unref(OOption), {
+								key: item.value,
+								label: item.label,
+								value: item.value
+							}, null, 8, ["label", "value"]);
+						}), 64))]),
+						_: 1
+					}, 8, ["modelValue"]),
+					createVNode(unref(OInput), {
+						modelValue: sigInput.value,
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => sigInput.value = $event),
+						size: "large",
+						clearable: "",
+						placeholder: placeholderType.value,
+						onFocusCapture: _cache[4] || (_cache[4] = ($event) => showPanel.value = true),
+						onPressEnter: changeSearchInput,
+						onClear: clearInput
+					}, {
+						prefix: withCtx(() => [createVNode(unref(OIcon), null, {
+							default: withCtx(() => [createVNode(unref(icon_search_default))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["modelValue", "placeholder"]),
+					createVNode(unref(OPopover), {
+						target: panelRef.value,
+						wrapper: rootRef.value,
+						visible: popoverVisible.value,
+						disabled: !sigInput.value,
+						position: "br",
+						trigger: "click-outclick",
+						"adjust-min-width": false,
+						"adjust-width": false,
+						"onUpdate:visible": onPopoverVisibleChange
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["o-sig-search-data", `o-sig-search-data-${locale.value}`]) }, [searching.value && !hasSearchData.value.length ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(unref(t)("sig.loading")), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(hasSearchData.value, (item) => {
+							return openBlock(), createElementBlock("div", {
+								key: item.id,
+								class: "o-sig-search-group"
+							}, [searchType.value === "all" ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(item.label), 1)) : createCommentVNode("", true), item.list.length ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(item.list, (it) => {
+								return openBlock(), createElementBlock("div", {
+									key: it.name,
+									class: "o-sig-search-item",
+									onClick: withModifiers(($event) => clickItem(it?.name), ["stop"])
+								}, [withDirectives(createElementVNode("span", {
+									title: stripHtml(it?.name),
+									class: "o-sig-search-title"
+								}, null, 8, _hoisted_8), [[unref(vDompurifyHtml), it?.name]])], 8, _hoisted_7);
+							}), 128)) : (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString(unref(t)("sig.noResult")), 1))]);
+						}), 128))], 2)]),
+						_: 1
+					}, 8, [
+						"target",
+						"wrapper",
+						"visible",
+						"disabled"
+					])
+				], 2)])], 2),
+				featureType.value !== "all" || enterSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_10, [sigInput.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
+					createElementVNode("span", null, toDisplayString(unref(t)("sig.filterResultTip1")), 1),
+					createElementVNode("span", _hoisted_12, toDisplayString(filterSearchData.value.length), 1),
+					createElementVNode("span", null, toDisplayString(unref(t)("sig.filterResultTip2")), 1),
+					locale.value === "zh" ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(sigInput.value), 1)) : createCommentVNode("", true),
+					createElementVNode("span", null, toDisplayString(unref(t)("sig.filterResultTip3")), 1)
+				])) : (openBlock(), createElementBlock("div", _hoisted_14, [
+					createElementVNode("span", null, toDisplayString(unref(t)("sig.filterResultTip4")), 1),
+					createElementVNode("span", _hoisted_15, toDisplayString(filterSearchData.value.length), 1),
+					createElementVNode("span", null, toDisplayString(unref(t)("sig.filterResultTip5")), 1)
+				]))])) : createCommentVNode("", true),
+				filterSigData.value.length ? (openBlock(), createBlock(unref(ORow), {
+					key: 1,
+					gap: gap.value,
+					wrap: "wrap",
+					class: normalizeClass(["o-sig-card-list", { "o-sig-card-list-tip": featureType.value !== "all" || enterSearchInput.value }])
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filterSigData.value, (sig) => {
+						return openBlock(), createBlock(unref(OCol), {
+							key: sig.name,
+							flex: unref(lePadV) ? "0 0 100%" : "0 0 50%"
+						}, {
+							default: withCtx(() => [createVNode(OSigItem_default, {
+								sig,
+								onToSigDetail: toSigDetail,
+								showFeature: __props.sigLandscape.length > 0
+							}, null, 8, ["sig", "showFeature"])]),
+							_: 2
+						}, 1032, ["flex"]);
+					}), 128))]),
+					_: 1
+				}, 8, ["gap", "class"])) : (openBlock(), createBlock(OEmpty_default, {
+					key: 2,
+					style: {
+						"margin-top": "40px",
+						"--result-image-width": "140px",
+						"--result-image-height": "170px"
+					}
+				})),
+				unref(lePadV) && filterSigData.value.length < filterSearchData.value.length ? (openBlock(), createElementBlock("p", {
+					key: 3,
+					ref_key: "loadingRef",
+					ref: loadingRef,
+					class: "o-sig-loading"
+				}, toDisplayString(unref(t)("sig.loading")), 513)) : createCommentVNode("", true),
+				filterSearchData.value.length > COUNT_PER_PAGE[0] ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(unref(OPagination), {
+					page: sigQuery.value.page,
+					"onUpdate:page": _cache[5] || (_cache[5] = ($event) => sigQuery.value.page = $event),
+					"page-size": sigQuery.value.pageSize,
+					"onUpdate:pageSize": _cache[6] || (_cache[6] = ($event) => sigQuery.value.pageSize = $event),
+					layout: [
+						"total",
+						"pagesize",
+						"pager",
+						"jumper"
+					],
+					total: filterSearchData.value.length,
+					"page-sizes": COUNT_PER_PAGE,
+					"show-more": true
+				}, null, 8, [
+					"page",
+					"page-size",
+					"total"
+				])])) : createCommentVNode("", true)
+			], 512);
+		};
+	}
+});
+export { OSigList_vue_vue_type_script_setup_true_lang_default as default };