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

package/dist/treeshaking/components/search/OSearchInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,407 @@
+import { useI18n } from "../../i18n/index.mjs";
+import SearchImageInput_default from "./internal/SearchImageInput.mjs";
+import SearchPanel_default from "./internal/SearchPanel.mjs";
+import { useSearchHistory } from "./composables/useSearchHistory.mjs";
+import { Fragment, Transition, computed, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, watch, withCtx } from "vue";
+import { onClickOutside, useDebounceFn } from "@vueuse/core";
+// src/components/search/OSearchInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-search-input-box" };
+var _hoisted_2 = {
+	key: 0,
+	class: "o-search-input-dropdown"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "o-search-input-suggest-list-row"
+};
+var _hoisted_4 = { class: "o-search-input-suggest-list-label" };
+var _hoisted_5 = { class: "o-search-input-suggest-list" };
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = { key: 0 };
+var OSearchInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OSearchInput",
+	props: {
+		modelValue: { default: "" },
+		imageUrl: { default: "" },
+		size: { default: "large" },
+		placeholder: {},
+		imagePlaceholder: {},
+		enableImageSearch: {
+			type: Boolean,
+			default: false
+		},
+		uploadImage: {},
+		maxImageSize: { default: 10485760 },
+		imageUploadTooltip: {},
+		allowedImageTypes: {},
+		suggestItems: { default: () => [] },
+		onestepItems: { default: () => [] },
+		suggestTitle: {},
+		onestepTitle: {},
+		noDataText: {},
+		showSuggestEmpty: {
+			type: Boolean,
+			default: true
+		},
+		highlightKeyword: {
+			type: Boolean,
+			default: true
+		},
+		debounce: { default: 300 },
+		enableHistory: {
+			type: Boolean,
+			default: true
+		},
+		historyItems: { default: () => [] },
+		maxHistoryCount: { default: 6 },
+		storeHistory: {
+			type: Boolean,
+			default: false
+		},
+		storageKey: { default: "search-history" },
+		historyTitle: {},
+		autoSaveHistory: {
+			type: Boolean,
+			default: true
+		},
+		hotItems: { default: () => [] },
+		hotTitle: {},
+		suggestList: { default: () => [] },
+		suggestListLabel: {},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		closeOnSearch: {
+			type: Boolean,
+			default: true
+		},
+		closeOnClickOutside: {
+			type: Boolean,
+			default: true
+		},
+		openOnFocus: {
+			type: Boolean,
+			default: true
+		},
+		alwaysInlineThumbnail: { type: Boolean }
+	},
+	emits: [
+		"update:modelValue",
+		"update:imageUrl",
+		"update:historyItems",
+		"focus",
+		"blur",
+		"input",
+		"clear",
+		"search",
+		"recommend-click",
+		"onestep-click",
+		"history-click",
+		"hot-click",
+		"suggest-list-click",
+		"delete-history",
+		"delete-history-item",
+		"image-upload-start",
+		"image-upload-success",
+		"image-upload-error",
+		"image-validate-error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		function parseSuggest(raw) {
+			const segments = [];
+			const re = /<em>(.*?)<\/em>/g;
+			let last = 0;
+			let m;
+			while ((m = re.exec(raw)) !== null) {
+				if (m.index > last) segments.push({
+					text: raw.slice(last, m.index),
+					em: false
+				});
+				segments.push({
+					text: m[1],
+					em: true
+				});
+				last = m.index + m[0].length;
+			}
+			if (last < raw.length) segments.push({
+				text: raw.slice(last),
+				em: false
+			});
+			return segments;
+		}
+		const inputRef = ref();
+		const wrapperRef = ref(null);
+		const innerValue = computed({
+			get: () => props.modelValue,
+			set: (val) => emit("update:modelValue", val)
+		});
+		const isFocus = ref(false);
+		const isPreviewOpen = ref(false);
+		const justClosedPreview = ref(false);
+		const hasInternalImage = ref(false);
+		const showDropdown = computed(() => {
+			if (!isFocus.value) return false;
+			if (props.imageUrl || hasInternalImage.value) return false;
+			const hasSuggest = !!innerValue.value && (props.suggestItems.length > 0 || props.onestepItems.length > 0 || props.showSuggestEmpty);
+			const hasHistory = props.enableHistory && history.items.value.length > 0 && !innerValue.value;
+			const hasHot = props.hotItems.length > 0 && !innerValue.value;
+			if (hasSuggest) return true;
+			if (props.openOnFocus && (hasHistory || hasHot)) return true;
+			return false;
+		});
+		const historyItemsRef = toRef(props, "historyItems");
+		const storageKeyRef = toRef(props, "storageKey");
+		const storeHistoryRef = toRef(props, "storeHistory");
+		const maxHistoryRef = toRef(props, "maxHistoryCount");
+		const history = useSearchHistory({
+			initial: historyItemsRef,
+			storageKey: storageKeyRef,
+			storeHistory: storeHistoryRef,
+			maxHistoryCount: maxHistoryRef,
+			onChange: (items) => emit("update:historyItems", items)
+		});
+		let suppressNextInput = false;
+		const emitInputDebounced = useDebounceFn((val) => {
+			if (suppressNextInput) {
+				suppressNextInput = false;
+				return;
+			}
+			emit("input", val);
+		}, () => props.debounce);
+		watch(innerValue, (val) => {
+			emitInputDebounced(val);
+		});
+		onClickOutside(wrapperRef, () => {
+			if (!props.closeOnClickOutside) return;
+			if (isPreviewOpen.value || justClosedPreview.value) return;
+			isFocus.value = false;
+		});
+		const handleFocus = () => {
+			isFocus.value = true;
+			emit("focus");
+		};
+		const handleBlur = () => {
+			emit("blur");
+		};
+		const runSearch = async (overrideKeyword) => {
+			if (inputRef.value?.getIsUploading?.()) await inputRef.value.awaitUpload?.();
+			const keyword = overrideKeyword !== void 0 ? overrideKeyword.trim() : innerValue.value.trim();
+			const imageUrl = inputRef.value?.getUploadedUrl?.() || props.imageUrl;
+			if (!keyword && !imageUrl) return;
+			if (props.autoSaveHistory && keyword) history.push(keyword);
+			if (props.closeOnSearch) isFocus.value = false;
+			emit("search", {
+				keyword,
+				imageUrl: imageUrl || void 0
+			});
+		};
+		const handleClear = () => {
+			innerValue.value = "";
+			emit("clear");
+		};
+		const handleSuggestClick = (item) => {
+			emit("recommend-click", item);
+			suppressNextInput = true;
+			innerValue.value = item.key;
+			runSearch(item.key ?? "");
+		};
+		const handleOnestepClick = (item) => {
+			emit("onestep-click", item);
+			if (item.path) {
+				const url = item.path;
+				if (typeof window !== "undefined") window.open(url, "_blank", "noopener,noreferrer");
+			}
+		};
+		const handleHistoryClick = (val) => {
+			emit("history-click", val);
+			runSearch(val);
+		};
+		const handleHotClick = (val) => {
+			emit("hot-click", val);
+			runSearch(val);
+		};
+		const handleHistoryRemove = (val) => {
+			history.remove(val);
+			emit("delete-history-item", val);
+		};
+		const handleHistoryClear = () => {
+			const removed = [...history.items.value];
+			history.clearAll();
+			emit("delete-history", removed);
+		};
+		const handleSuggestListClick = (val) => {
+			const text = val.replace(/<[^>]+>/g, "");
+			emit("suggest-list-click", text);
+			suppressNextInput = true;
+			innerValue.value = text;
+			runSearch(text);
+		};
+		const onPreviewChange = (visible) => {
+			isPreviewOpen.value = visible;
+			if (!visible) {
+				justClosedPreview.value = true;
+				setTimeout(() => {
+					justClosedPreview.value = false;
+				}, 100);
+			}
+		};
+		const showInlineThumbnail = computed(() => !!props.imageUrl && (props.alwaysInlineThumbnail || !isFocus.value));
+		const onImageUploadStart = (file) => {
+			hasInternalImage.value = true;
+			emit("image-upload-start", file);
+		};
+		const onImageUploadSuccess = (url, file) => {
+			hasInternalImage.value = false;
+			emit("image-upload-success", url, file);
+		};
+		const onImageClear = () => {
+			hasInternalImage.value = false;
+			emit("update:imageUrl", "");
+		};
+		__expose({
+			focus: () => inputRef.value?.focus?.(),
+			blur: () => inputRef.value?.blur?.(),
+			search: runSearch,
+			saveHistory: (val) => history.push(val ?? innerValue.value)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass(["o-search-input", { "is-focus": isFocus.value }])
+			}, [createElementVNode("div", _hoisted_1, [createVNode(SearchImageInput_default, {
+				ref_key: "inputRef",
+				ref: inputRef,
+				modelValue: innerValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+				"image-url": __props.imageUrl,
+				placeholder: __props.placeholder,
+				"image-placeholder": __props.imagePlaceholder,
+				size: __props.size,
+				"enable-image-search": __props.enableImageSearch,
+				"upload-image": __props.uploadImage,
+				"max-image-size": __props.maxImageSize,
+				"image-upload-tooltip": __props.imageUploadTooltip,
+				"allowed-image-types": __props.allowedImageTypes,
+				expanded: isFocus.value && !props.alwaysInlineThumbnail,
+				"inline-thumbnail": showInlineThumbnail.value,
+				clearable: __props.clearable,
+				class: "o-search-input-field",
+				"onUpdate:imageUrl": _cache[1] || (_cache[1] = (url) => emit("update:imageUrl", url)),
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onEnter: runSearch,
+				onClear: handleClear,
+				onImageClear,
+				onImageUploadStart,
+				onImageUploadSuccess,
+				onImageUploadError: _cache[2] || (_cache[2] = (error, file) => emit("image-upload-error", error, file)),
+				onImageValidateError: _cache[3] || (_cache[3] = (reason, file) => emit("image-validate-error", reason, file)),
+				onPreviewChange
+			}, createSlots({
+				prefix: withCtx(() => [renderSlot(_ctx.$slots, "input-prefix", {}, void 0, true)]),
+				suffix: withCtx((slotProps) => [renderSlot(_ctx.$slots, "input-suffix", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+				_: 2
+			}, [_ctx.$slots["image-preview"] ? {
+				name: "preview",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "image-preview", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"modelValue",
+				"image-url",
+				"placeholder",
+				"image-placeholder",
+				"size",
+				"enable-image-search",
+				"upload-image",
+				"max-image-size",
+				"image-upload-tooltip",
+				"allowed-image-types",
+				"expanded",
+				"inline-thumbnail",
+				"clearable"
+			]), createVNode(Transition, { name: "o-search-input-dropdown" }, {
+				default: withCtx(() => [showDropdown.value ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "dropdown", { keyword: __props.modelValue }, () => [createVNode(SearchPanel_default, {
+					keyword: __props.modelValue,
+					"onestep-items": __props.onestepItems,
+					"onestep-title": __props.onestepTitle,
+					"suggest-items": __props.suggestItems,
+					"suggest-title": __props.suggestTitle,
+					"history-items": __props.enableHistory ? unref(history).items.value : [],
+					"history-title": __props.historyTitle,
+					"hot-items": __props.hotItems,
+					"hot-title": __props.hotTitle,
+					"no-data-text": __props.noDataText,
+					"highlight-keyword": __props.highlightKeyword,
+					"hide-on-keyword": true,
+					"show-suggest-empty": __props.showSuggestEmpty,
+					"history-layout": "list",
+					onOnestepClick: handleOnestepClick,
+					onSuggestClick: handleSuggestClick,
+					onHistoryClick: handleHistoryClick,
+					onHistoryRemove: handleHistoryRemove,
+					onHistoryClear: handleHistoryClear,
+					onHotClick: handleHotClick
+				}, createSlots({ _: 2 }, [
+					_ctx.$slots["onestep-header"] ? {
+						name: "onestep-header",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "onestep-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "0"
+					} : void 0,
+					_ctx.$slots["onestep-content"] ? {
+						name: "onestep-content",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "onestep-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "1"
+					} : void 0,
+					_ctx.$slots["suggest-header"] ? {
+						name: "suggest-header",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "suggest-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "2"
+					} : void 0,
+					_ctx.$slots["suggest-content"] ? {
+						name: "suggest-content",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "suggest-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "3"
+					} : void 0,
+					_ctx.$slots["history-header"] ? {
+						name: "history-header",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "history-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "4"
+					} : void 0,
+					_ctx.$slots["history-content"] ? {
+						name: "history-content",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "history-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "5"
+					} : void 0
+				]), 1032, [
+					"keyword",
+					"onestep-items",
+					"onestep-title",
+					"suggest-items",
+					"suggest-title",
+					"history-items",
+					"history-title",
+					"hot-items",
+					"hot-title",
+					"no-data-text",
+					"highlight-keyword",
+					"show-suggest-empty"
+				])], true)])) : createCommentVNode("", true)]),
+				_: 3
+			})]), __props.suggestList?.length ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "suggest-list", { items: __props.suggestList }, () => [createElementVNode("span", _hoisted_4, toDisplayString(__props.suggestListLabel ?? unref(t)("search.suggestListLabel")), 1), createElementVNode("ul", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.suggestList, (item, idx) => {
+				return openBlock(), createElementBlock("li", {
+					key: item + idx,
+					class: "o-search-input-suggest-list-item",
+					onClick: ($event) => handleSuggestListClick(item)
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(parseSuggest(item), (seg) => {
+					return openBlock(), createElementBlock(Fragment, { key: seg.text + String(seg.em) }, [seg.em ? (openBlock(), createElementBlock("em", _hoisted_7, toDisplayString(seg.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(seg.text), 1)], 64))], 64);
+				}), 128))], 8, _hoisted_6);
+			}), 128))])], true)])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+export { OSearchInput_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/search/OSearchInput.vue_vue_type_style_index_0_scoped_ee331b07_lang.css

@@ -0,0 +1,158 @@
+.hover-icon-rotate .o-icon[data-v-ee331b07] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-ee331b07] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-input[data-v-ee331b07] {
+  position: relative;
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-search-input-radius, var(--o-radius-xs));
+}
+.o-search-input[data-v-ee331b07] .o-input.o_box {
+  --_box-radius: var(--o-search-input-radius, var(--o-radius-xs));
+}
+.o-search-input[data-v-ee331b07] .o-input.o_box-large {
+  --_box-height: 48px;
+}
+.o-search-input[data-v-ee331b07] .o-search-image-input-icon {
+  font-size: 24px;
+}
+.o-search-input[data-v-ee331b07] .o-search-image-input-upload-btn {
+  width: 24px;
+  height: 24px;
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.o-search-input[data-v-ee331b07] .o-input.o_box-large {
+    --_box-height: 40px;
+}
+}
+@media (max-width: 840px) {
+.o-search-input[data-v-ee331b07] .o-input.o_box-large {
+    --_box-height: 32px;
+}
+.o-search-input[data-v-ee331b07] .o-search-image-input-icon {
+    font-size: 16px;
+}
+.o-search-input[data-v-ee331b07] .o-search-image-input-upload-btn {
+    width: 16px;
+    height: 16px;
+}
+}
+.o-search-input-box[data-v-ee331b07] {
+  position: relative;
+  width: 100%;
+}
+.o-search-input-field[data-v-ee331b07] {
+  width: 100%;
+}
+.o-search-input-dropdown[data-v-ee331b07] {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: var(--o-gap-4);
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-search-input-dropdown-radius, var(--o-search-input-radius, var(--o-radius-xs)));
+  box-shadow: var(--o-shadow-2);
+}
+.o-search-input-dropdown-enter-active[data-v-ee331b07],
+.o-search-input-dropdown-leave-active[data-v-ee331b07] {
+  transition: opacity var(--o-duration-m1), transform var(--o-duration-m1);
+}
+.o-search-input-dropdown-enter-from[data-v-ee331b07],
+.o-search-input-dropdown-leave-to[data-v-ee331b07] {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+  display: flex;
+  margin-top: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-search-input-suggest-list-row[data-v-ee331b07] {
+  color: var(--o-color-info1);
+}
+.o-search-input-suggest-list-label[data-v-ee331b07] {
+  color: var(--o-color-info3);
+  margin-right: 4px;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-input-suggest-list-label[data-v-ee331b07] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-input-suggest-list-label[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-input-suggest-list-label[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-input-suggest-list-label[data-v-ee331b07] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-search-input-suggest-list[data-v-ee331b07] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.o-search-input-suggest-list-item[data-v-ee331b07] {
+  margin-right: 8px;
+  cursor: pointer;
+  color: var(--o-color-primary1);
+}
+.o-search-input-suggest-list-item[data-v-ee331b07] em {
+  color: var(--o-color-primary1);
+  font-style: normal;
+}
+@media (hover: hover) {
+.o-search-input-suggest-list-item[data-v-ee331b07]:hover {
+    text-decoration: underline;
+}
+}

package/dist/treeshaking/components/search/composables/useImageSearch.d.ts

@@ -0,0 +1,48 @@
+import { Ref } from 'vue';
+import { OSearchUploadImageFn } from '../types';
+export interface UseImageSearchOptions {
+    uploadImage?: Ref<OSearchUploadImageFn | undefined>;
+    maxImageSize: Ref<number>;
+    allowedImageTypes?: Ref<string[]>;
+    onUploadStart?: (file: File) => void;
+    onUploadSuccess?: (url: string, file: File) => void;
+    onUploadError?: (error: unknown, file: File) => void;
+    onValidationError?: (reason: 'size' | 'type', file: File) => void;
+}
+export declare function useImageSearch(options: UseImageSearchOptions): {
+    previewUrl: Ref<string, string>;
+    file: Ref<{
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: () => Promise<ArrayBuffer>;
+        bytes: () => Promise<Uint8Array>;
+        slice: (start?: number, end?: number, contentType?: string) => Blob;
+        stream: () => ReadableStream<Uint8Array>;
+        text: () => Promise<string>;
+    } | null, File | {
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: () => Promise<ArrayBuffer>;
+        bytes: () => Promise<Uint8Array>;
+        slice: (start?: number, end?: number, contentType?: string) => Blob;
+        stream: () => ReadableStream<Uint8Array>;
+        text: () => Promise<string>;
+    } | null>;
+    uploadedUrl: Ref<string, string>;
+    isUploading: Ref<boolean, boolean>;
+    onPaste: (event: ClipboardEvent) => void;
+    onDrop: (event: DragEvent) => void;
+    onDragOver: (event: DragEvent) => void;
+    onFileChange: (event: Event) => void;
+    pickFile: (input: HTMLInputElement | undefined) => void;
+    handleImageFile: (f: File) => void;
+    reset: () => void;
+    setExternalUrl: (url: string) => void;
+    awaitUpload: () => Promise<void>;
+};