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

package/dist/treeshaking/components/search-result/OSearchResult.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,154 @@
+import { useI18n } from "../../i18n/index.mjs";
+import OSearchResultEmpty_default from "./components/OSearchResultEmpty.mjs";
+import OSearchResultFeedback_default from "./components/OSearchResultFeedback.mjs";
+import OSearchResultFeedbackBanner_default from "./components/OSearchResultFeedbackBanner.mjs";
+import OSearchResultRelative_default from "./components/OSearchResultRelative.mjs";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, onUnmounted, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { ODivider, OOption, OPagination, OSelect, OSkeleton, OSkeletonText, isArray } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { useThrottleFn } from "@vueuse/core";
+// src/components/search-result/OSearchResult.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-search-result-content-wrap" };
+var _hoisted_2 = { class: "o-search-result-left-content" };
+var _hoisted_3 = { class: "o-search-result-content-skeleton-loading" };
+var _hoisted_4 = {
+	key: 1,
+	class: "o-search-result-mb-bottom-text"
+};
+var _hoisted_5 = { class: "o-search-result-right-content" };
+var OSearchResult_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OSearchResult",
+	props: /*@__PURE__*/ mergeModels({
+		versions: {},
+		items: {},
+		loading: { type: Boolean },
+		relativeItems: {},
+		total: { default: 0 },
+		pageSizes: { default: () => [
+			10,
+			20,
+			50
+		] },
+		submitFeedback: {},
+		noMore: { type: Boolean },
+		scrollContainer: {},
+		bottomOffset: { default: 30 },
+		hideTabOnMobile: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"version": {},
+		"versionModifiers": {},
+		"page": { default: 1 },
+		"pageModifiers": {},
+		"pageSize": { default: 10 },
+		"pageSizeModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["click-relative-search-item", "reach-bottom"], [
+		"update:version",
+		"update:page",
+		"update:pageSize"
+	]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const versionVal = useModel(__props, "version");
+		const page = useModel(__props, "page");
+		const pageSize = useModel(__props, "pageSize");
+		const emit = __emit;
+		const { lePad, lePadV } = useScreen();
+		const { t } = useI18n();
+		let scrollEl = null;
+		const getScrollEl = () => {
+			if (!props.scrollContainer) return window;
+			if (typeof props.scrollContainer === "string") return document.querySelector(props.scrollContainer) ?? window;
+			return props.scrollContainer;
+		};
+		const onScroll = useThrottleFn(() => {
+			if (!lePadV.value || props.loading || props.noMore) return;
+			const el = scrollEl;
+			if (!el) return;
+			const isWin = el === window;
+			const scrollTop = isWin ? window.scrollY : el.scrollTop;
+			const clientHeight = isWin ? window.innerHeight : el.clientHeight;
+			const scrollHeight = isWin ? document.documentElement.scrollHeight : el.scrollHeight;
+			if (scrollTop + clientHeight >= scrollHeight - props.bottomOffset) emit("reach-bottom");
+		}, 200);
+		const bindScroll = () => {
+			unbindScroll();
+			if (!props.scrollContainer) return;
+			scrollEl = getScrollEl();
+			scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		};
+		const unbindScroll = () => {
+			scrollEl?.removeEventListener("scroll", onScroll);
+			scrollEl = null;
+		};
+		watch(() => props.scrollContainer, bindScroll);
+		onMounted(bindScroll);
+		onUnmounted(unbindScroll);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["o-search-result", { "is-hide-tab-mobile": __props.hideTabOnMobile }]) }, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+				renderSlot(_ctx.$slots, "content-header", {}, () => [unref(isArray)(__props.versions) && __props.versions.length ? (openBlock(), createBlock(unref(OSelect), {
+					key: 0,
+					modelValue: versionVal.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => versionVal.value = $event),
+					size: "large",
+					class: "o-search-result-version-select"
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.versions, (item) => {
+						return openBlock(), createBlock(unref(OOption), {
+							key: item.value,
+							value: item.value,
+							label: item.label
+						}, null, 8, ["value", "label"]);
+					}), 128))]),
+					_: 1
+				}, 8, ["modelValue"])) : createCommentVNode("", true)], true),
+				createVNode(unref(OSkeleton), {
+					animation: "",
+					loading: __props.loading && (!unref(lePadV) || page.value === 1)
+				}, {
+					template: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(), createElementBlock(Fragment, null, renderList(7, (_, i) => {
+						return openBlock(), createElementBlock(Fragment, { key: i }, [createVNode(unref(OSkeletonText), { rows: 3 }), i !== 6 ? (openBlock(), createBlock(unref(ODivider), {
+							key: 0,
+							class: "o-search-result-content-skeleton-divider"
+						})) : createCommentVNode("", true)], 64);
+					}), 64))])]),
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["o-search-result-content", { "is-empty": !unref(isArray)(__props.items) || __props.items.length === 0 }]) }, [!unref(isArray)(__props.items) || __props.items.length === 0 ? renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [createVNode(OSearchResultEmpty_default)], true) : renderSlot(_ctx.$slots, "list", {
+						key: 1,
+						items: __props.items
+					}, void 0, true)], 2)]),
+					_: 3
+				}, 8, ["loading"]),
+				createVNode(OSearchResultFeedbackBanner_default, { submit: __props.submitFeedback }, null, 8, ["submit"]),
+				!__props.loading && __props.total > 0 && !unref(lePadV) ? (openBlock(), createBlock(unref(OPagination), {
+					key: 0,
+					page: page.value,
+					"onUpdate:page": _cache[1] || (_cache[1] = ($event) => page.value = $event),
+					"page-size": pageSize.value,
+					"onUpdate:pageSize": _cache[2] || (_cache[2] = ($event) => pageSize.value = $event),
+					total: __props.total,
+					"page-sizes": __props.pageSizes,
+					layout: [
+						"total",
+						"pagesize",
+						"pager",
+						"jumper"
+					],
+					class: "o-search-result-pagination"
+				}, null, 8, [
+					"page",
+					"page-size",
+					"total",
+					"page-sizes"
+				])) : createCommentVNode("", true),
+				unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_4, [__props.noMore ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(t)("search.reachBottom")), 1)], 64)) : !__props.loading && page.value >= 1 && __props.items.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(t)("search.loadMore")), 1)], 64)) : __props.loading && page.value > 1 && __props.items.length ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(t)("search.loading")), 1)], 64)) : createCommentVNode("", true)])) : createCommentVNode("", true)
+			]), !unref(lePad) ? renderSlot(_ctx.$slots, "right", { key: 0 }, () => [createElementVNode("div", _hoisted_5, [createVNode(OSearchResultRelative_default, {
+				"relative-items": __props.relativeItems,
+				onClickRelativeSearchItem: _cache[3] || (_cache[3] = ($event) => emit("click-relative-search-item", $event))
+			}, null, 8, ["relative-items"]), createVNode(OSearchResultFeedback_default, { submit: __props.submitFeedback }, null, 8, ["submit"])])], true) : createCommentVNode("", true)])], 2);
+		};
+	}
+});
+export { OSearchResult_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/search-result/OSearchResult.vue_vue_type_style_index_0_scoped_9d8dd556_lang.css

@@ -0,0 +1,165 @@
+.hover-icon-rotate .o-icon[data-v-9d8dd556] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-9d8dd556] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-result[data-v-9d8dd556] {
+  --o-search-result-page-header-hight: 0px;
+  --o-search-result-page-footer-hight: 0px;
+  --o-search-result-radius: var(--o-radius-xs);
+  --o-search-result-header-height: 280px;
+  --o-search-content-padding-top: 40px;
+  --o-search-content-padding-bottom: 72px;
+  --o-search-content-padding-left: 0px;
+  --o-search-content-padding-right: 0px;
+  --o-search-content-min-height: calc(
+    100vh - var(--o-search-result-page-header-hight) - var(--o-search-result-page-footer-hight) - var(--o-search-result-header-height) - var(
+        --o-search-content-padding-top
+      ) - var(--o-search-content-padding-bottom)
+  );
+  background-color: var(--o-color-fill2);
+}
+@media (max-width: 1680px) {
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 220px;
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 56px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 180px;
+    --o-search-content-padding-top: 16px;
+    --o-search-content-padding-bottom: 40px;
+    --o-search-content-padding-left: 32px;
+    --o-search-content-padding-right: 32px;
+}
+}
+@media (max-width: 840px) {
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 90px;
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 40px;
+}
+}
+@media (max-width: 600px) {
+.o-search-result[data-v-9d8dd556] {
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 32px;
+    --o-search-content-padding-left: 24px;
+    --o-search-content-padding-right: 24px;
+}
+}
+@media (max-width: 840px) {
+.o-search-result.is-hide-tab-mobile[data-v-9d8dd556] {
+    --o-search-result-header-height: 56px;
+}
+}
+.o-search-result .o-search-result-content-wrap[data-v-9d8dd556] {
+  display: flex;
+  max-width: var(--grid-20);
+  min-height: var(--o-search-content-min-height);
+  padding: var(--o-search-content-padding-top) var(--o-search-content-padding-right) var(--o-search-content-padding-bottom) var(--o-search-content-padding-left);
+  margin: 0 auto;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-9d8dd556] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: var(--o-search-content-min-height);
+  padding-right: var(--grid-column-gutter);
+  border-right: 1px solid var(--o-color-control4);
+}
+@media (max-width: 1200px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-9d8dd556] {
+    border-right: none;
+    padding-right: 0;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-9d8dd556] {
+  width: var(--grid-5);
+  padding-left: var(--grid-column-gutter);
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-9d8dd556] {
+    width: var(--grid-6);
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] {
+  margin-top: 24px;
+  margin-bottom: 32px;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(1) {
+  width: 52%;
+  height: 28px;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(2) {
+  height: 48px;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(3) {
+  width: 38%;
+  height: 18px;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-divider[data-v-9d8dd556] {
+  margin: 16px 0;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-version-select[data-v-9d8dd556] {
+  width: 320px;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] {
+  flex: 1;
+  padding: 24px 0;
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] {
+    padding: 16px 0;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:first-child) {
+  padding-top: 16px;
+  border-top: 1px solid var(--o-color-control4);
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:first-child) {
+    padding-top: 12px;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:last-child) {
+  padding-bottom: 16px;
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:last-child) {
+    padding-bottom: 12px;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content.is-empty[data-v-9d8dd556] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 32px;
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
+    margin-top: 24px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
+    margin-top: 16px;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-mb-bottom-text[data-v-9d8dd556] {
+  margin-top: 16px;
+  color: var(--o-color-info3);
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+}

package/dist/treeshaking/components/search-result/OSearchResultHeader.mjs

@@ -0,0 +1,6 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import OSearchResultHeader_vue_vue_type_script_setup_true_lang_default from "./OSearchResultHeader.vue_vue_type_script_setup_true_lang.mjs";
+import './OSearchResultHeader.vue_vue_type_style_index_0_scoped_70bc0c95_lang.css';
+// src/components/search-result/OSearchResultHeader.vue
+var OSearchResultHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(OSearchResultHeader_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-70bc0c95"]]);
+export { OSearchResultHeader_default as default };