@opendesign-plus/components 0.0.1-rc.103 → 0.0.1-rc.104

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/composables/useImageSearch.mjs

@@ -1,134 +1,116 @@
-import { ref, onBeforeUnmount } from "vue";
+import { onBeforeUnmount, ref } from "vue";
+// src/components/search/composables/useImageSearch.ts
 function useImageSearch(options) {
-  const previewUrl = ref("");
-  const file = ref(null);
-  const uploadedUrl = ref("");
-  const isUploading = ref(false);
-  let uploadPromise = null;
-  const validate = (f) => {
-    var _a, _b, _c, _d;
-    const allowed = (_a = options.allowedImageTypes) == null ? void 0 : _a.value;
-    const typeOk = allowed && allowed.length > 0 ? allowed.includes(f.type) : (_b = f.type) == null ? void 0 : _b.startsWith("image/");
-    if (!f.type || !typeOk) {
-      (_c = options.onValidationError) == null ? void 0 : _c.call(options, "type", f);
-      return false;
-    }
-    if (options.maxImageSize.value > 0 && f.size > options.maxImageSize.value) {
-      (_d = options.onValidationError) == null ? void 0 : _d.call(options, "size", f);
-      return false;
-    }
-    return true;
-  };
-  const reset = () => {
-    if (previewUrl.value) {
-      try {
-        URL.revokeObjectURL(previewUrl.value);
-      } catch {
-      }
-    }
-    previewUrl.value = "";
-    file.value = null;
-    uploadedUrl.value = "";
-    isUploading.value = false;
-    uploadPromise = null;
-  };
-  const setExternalUrl = (url) => {
-    if (!url) {
-      if (!file.value) reset();
-      return;
-    }
-    if (uploadedUrl.value === url) return;
-    if (previewUrl.value && previewUrl.value.startsWith("blob:")) {
-      try {
-        URL.revokeObjectURL(previewUrl.value);
-      } catch {
-      }
-    }
-    uploadedUrl.value = url;
-    previewUrl.value = url;
-    file.value = null;
-  };
-  const handleImageFile = (f) => {
-    var _a, _b;
-    if (!validate(f)) return;
-    reset();
-    file.value = f;
-    previewUrl.value = URL.createObjectURL(f);
-    (_a = options.onUploadStart) == null ? void 0 : _a.call(options, f);
-    const fn = (_b = options.uploadImage) == null ? void 0 : _b.value;
-    if (!fn) {
-      return;
-    }
-    isUploading.value = true;
-    uploadPromise = Promise.resolve().then(() => fn(f)).then((url) => {
-      var _a2;
-      if (url && file.value === f) {
-        uploadedUrl.value = url;
-        (_a2 = options.onUploadSuccess) == null ? void 0 : _a2.call(options, url, f);
-      }
-    }).catch((err) => {
-      var _a2;
-      (_a2 = options.onUploadError) == null ? void 0 : _a2.call(options, err, f);
-    }).finally(() => {
-      isUploading.value = false;
-    });
-  };
-  const onPaste = (event) => {
-    var _a;
-    const items = (_a = event.clipboardData) == null ? void 0 : _a.items;
-    if (!items) return;
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.type.startsWith("image/")) {
-        const f = item.getAsFile();
-        if (f) handleImageFile(f);
-        break;
-      }
-    }
-  };
-  const onDragOver = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  const onDrop = (event) => {
-    var _a, _b;
-    event.preventDefault();
-    event.stopPropagation();
-    const f = (_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
-    if (f && f.type.startsWith("image/")) {
-      handleImageFile(f);
-    }
-  };
-  const onFileChange = (event) => {
-    var _a;
-    const target = event.target;
-    const f = (_a = target.files) == null ? void 0 : _a[0];
-    if (f) handleImageFile(f);
-    if (target) target.value = "";
-  };
-  const pickFile = (input) => {
-    if (!input) return;
-    input.value = "";
-    input.click();
-  };
-  const awaitUpload = () => uploadPromise ?? Promise.resolve();
-  onBeforeUnmount(reset);
-  return {
-    previewUrl,
-    file,
-    uploadedUrl,
-    isUploading,
-    onPaste,
-    onDrop,
-    onDragOver,
-    onFileChange,
-    pickFile,
-    handleImageFile,
-    reset,
-    setExternalUrl,
-    awaitUpload
-  };
+	const previewUrl = ref("");
+	const file = ref(null);
+	const uploadedUrl = ref("");
+	const isUploading = ref(false);
+	let uploadPromise = null;
+	const validate = (f) => {
+		const allowed = options.allowedImageTypes?.value;
+		const typeOk = allowed && allowed.length > 0 ? allowed.includes(f.type) : f.type?.startsWith("image/");
+		if (!f.type || !typeOk) {
+			options.onValidationError?.("type", f);
+			return false;
+		}
+		if (options.maxImageSize.value > 0 && f.size > options.maxImageSize.value) {
+			options.onValidationError?.("size", f);
+			return false;
+		}
+		return true;
+	};
+	const reset = () => {
+		if (previewUrl.value) try {
+			URL.revokeObjectURL(previewUrl.value);
+		} catch {}
+		previewUrl.value = "";
+		file.value = null;
+		uploadedUrl.value = "";
+		isUploading.value = false;
+		uploadPromise = null;
+	};
+	const setExternalUrl = (url) => {
+		if (!url) {
+			if (!file.value) reset();
+			return;
+		}
+		if (uploadedUrl.value === url) return;
+		if (previewUrl.value && previewUrl.value.startsWith("blob:")) try {
+			URL.revokeObjectURL(previewUrl.value);
+		} catch {}
+		uploadedUrl.value = url;
+		previewUrl.value = url;
+		file.value = null;
+	};
+	const handleImageFile = (f) => {
+		if (!validate(f)) return;
+		reset();
+		file.value = f;
+		previewUrl.value = URL.createObjectURL(f);
+		options.onUploadStart?.(f);
+		const fn = options.uploadImage?.value;
+		if (!fn) return;
+		isUploading.value = true;
+		uploadPromise = Promise.resolve().then(() => fn(f)).then((url) => {
+			if (url && file.value === f) {
+				uploadedUrl.value = url;
+				options.onUploadSuccess?.(url, f);
+			}
+		}).catch((err) => {
+			options.onUploadError?.(err, f);
+		}).finally(() => {
+			isUploading.value = false;
+		});
+	};
+	const onPaste = (event) => {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item.type.startsWith("image/")) {
+				const f = item.getAsFile();
+				if (f) handleImageFile(f);
+				break;
+			}
+		}
+	};
+	const onDragOver = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const f = event.dataTransfer?.files?.[0];
+		if (f && f.type.startsWith("image/")) handleImageFile(f);
+	};
+	const onFileChange = (event) => {
+		const target = event.target;
+		const f = target.files?.[0];
+		if (f) handleImageFile(f);
+		if (target) target.value = "";
+	};
+	const pickFile = (input) => {
+		if (!input) return;
+		input.value = "";
+		input.click();
+	};
+	const awaitUpload = () => uploadPromise ?? Promise.resolve();
+	onBeforeUnmount(reset);
+	return {
+		previewUrl,
+		file,
+		uploadedUrl,
+		isUploading,
+		onPaste,
+		onDrop,
+		onDragOver,
+		onFileChange,
+		pickFile,
+		handleImageFile,
+		reset,
+		setExternalUrl,
+		awaitUpload
+	};
 }
-export {
-  useImageSearch
-};
+export { useImageSearch };