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

package/dist/treeshaking/components/search/internal/SearchImageInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,291 @@
+import { useI18n } from "../../../i18n/index.mjs";
+import icon_close_default from "../../../_virtual/~icons/components/icon-close.mjs";
+import { useImageSearch } from "../composables/useImageSearch.mjs";
+import icon_header_search_default from "../../../_virtual/~icons/components/icon-header-search.mjs";
+import icon_image_upload_default from "../../../_virtual/~icons/components/icon-image-upload.mjs";
+import icon_delete_hover_default from "../../../_virtual/~icons/components/icon-delete-hover.mjs";
+import icon_image_zoomin_default from "../../../_virtual/~icons/components/icon-image-zoomin.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { OFigure, OIcon, OInput, OPopover } from "@opensig/opendesign";
+// src/components/search/internal/SearchImageInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-search-image-input-row" };
+var _hoisted_2 = {
+	key: 0,
+	class: "o-search-image-input-thumb"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "o-search-image-input-preview"
+};
+var _hoisted_4 = { class: "o-search-image-input-preview-wrapper" };
+var _hoisted_5 = { class: "o-search-image-input-preview-zoom" };
+var _hoisted_6 = ["accept"];
+var SearchImageInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchImageInput",
+	props: {
+		modelValue: { default: "" },
+		imageUrl: { default: "" },
+		placeholder: {},
+		imagePlaceholder: {},
+		size: { default: "medium" },
+		enableImageSearch: {
+			type: Boolean,
+			default: false
+		},
+		uploadImage: {},
+		maxImageSize: { default: 10485760 },
+		imageUploadTooltip: {},
+		expanded: {
+			type: Boolean,
+			default: true
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		showSuffix: {
+			type: Boolean,
+			default: true
+		},
+		inlineThumbnail: {
+			type: Boolean,
+			default: false
+		},
+		preview: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		allowedImageTypes: { default: () => [
+			"image/jpeg",
+			"image/png",
+			"image/gif",
+			"image/webp"
+		] }
+	},
+	emits: [
+		"update:modelValue",
+		"update:imageUrl",
+		"focus",
+		"blur",
+		"enter",
+		"clear",
+		"image-clear",
+		"image-upload-start",
+		"image-upload-success",
+		"image-upload-error",
+		"image-validate-error",
+		"preview-change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		const uploadImageRef = computed(() => props.uploadImage);
+		const maxImageSizeRef = computed(() => props.maxImageSize);
+		const allowedImageTypesRef = computed(() => props.allowedImageTypes);
+		const acceptAttr = computed(() => (props.allowedImageTypes ?? []).join(","));
+		const image = useImageSearch({
+			uploadImage: uploadImageRef,
+			maxImageSize: maxImageSizeRef,
+			allowedImageTypes: allowedImageTypesRef,
+			onUploadStart: (file) => emit("image-upload-start", file),
+			onUploadSuccess: (url, file) => {
+				emit("update:imageUrl", url);
+				emit("image-upload-success", url, file);
+			},
+			onUploadError: (error, file) => emit("image-upload-error", error, file),
+			onValidationError: (reason, file) => emit("image-validate-error", reason, file)
+		});
+		const fileInputRef = ref();
+		const inputRef = ref();
+		const uploadBtnRef = ref(null);
+		const innerValue = computed({
+			get: () => props.modelValue,
+			set: (val) => emit("update:modelValue", val)
+		});
+		watch(() => props.imageUrl, (val) => {
+			image.setExternalUrl(val);
+		}, { immediate: true });
+		const showThumbnail = computed(() => !!image.previewUrl.value);
+		const placeholder = computed(() => {
+			if (showThumbnail.value) return props.imagePlaceholder ?? t("search.extendedPlaceholder");
+			return props.placeholder ?? t("search.placeholder");
+		});
+		const handleClear = () => {
+			innerValue.value = "";
+			if (showThumbnail.value) handleImageClear();
+			emit("clear");
+		};
+		const handleImageClear = () => {
+			image.reset();
+			emit("update:imageUrl", "");
+			emit("image-clear");
+		};
+		const handleUploadClick = () => {
+			image.pickFile(fileInputRef.value);
+			nextTick(() => inputRef.value?.focus?.());
+		};
+		const handleFileSelect = (event) => {
+			image.onFileChange(event);
+			nextTick(() => inputRef.value?.focus?.());
+		};
+		const handlePaste = (event) => {
+			if (!props.enableImageSearch) return;
+			image.onPaste(event);
+		};
+		const handleDragOver = (event) => {
+			if (!props.enableImageSearch) return;
+			image.onDragOver(event);
+		};
+		const handleDrop = (event) => {
+			if (!props.enableImageSearch) return;
+			image.onDrop(event);
+		};
+		const onPreviewChange = (visible) => {
+			emit("preview-change", visible);
+		};
+		const hasValue = computed(() => !!innerValue.value || showThumbnail.value);
+		const awaitUpload = () => image.awaitUpload();
+		__expose({
+			focus: () => inputRef.value?.focus?.(),
+			blur: () => inputRef.value?.blur?.(),
+			awaitUpload,
+			getUploadedUrl: () => image.uploadedUrl.value,
+			getIsUploading: () => image.isUploading.value,
+			resetImage: () => {
+				image.reset();
+				emit("update:imageUrl", "");
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["o-search-image-input", {
+					"has-image": showThumbnail.value,
+					"is-expanded": __props.expanded && showThumbnail.value
+				}]),
+				onDragover: handleDragOver,
+				onDrop: handleDrop
+			}, [
+				createElementVNode("div", _hoisted_1, [createVNode(unref(OInput), {
+					ref_key: "inputRef",
+					ref: inputRef,
+					modelValue: innerValue.value,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => innerValue.value = $event),
+					placeholder: placeholder.value,
+					size: __props.size,
+					disabled: __props.disabled,
+					class: "o-search-image-input-input",
+					onPressEnter: _cache[4] || (_cache[4] = ($event) => emit("enter")),
+					onFocus: _cache[5] || (_cache[5] = (e) => emit("focus", e)),
+					onBlur: _cache[6] || (_cache[6] = (e) => emit("blur", e)),
+					onPaste: handlePaste
+				}, createSlots({
+					prefix: withCtx(() => [renderSlot(_ctx.$slots, "prefix", {}, () => [createVNode(unref(OIcon), { class: "o-search-image-input-icon" }, {
+						default: withCtx(() => [createVNode(unref(icon_header_search_default))]),
+						_: 1
+					})], true), __props.inlineThumbnail && showThumbnail.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+						createVNode(unref(OFigure), {
+							src: unref(image).previewUrl.value,
+							alt: "",
+							class: "o-search-image-input-thumb-figure"
+						}, null, 8, ["src"]),
+						createElementVNode("div", {
+							class: "o-search-image-input-thumb-zoom",
+							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+						}, [createVNode(unref(OIcon), { class: "o-search-image-input-thumb-zoom-icon" }, {
+							default: withCtx(() => [createVNode(unref(icon_image_zoomin_default))]),
+							_: 1
+						})], 32),
+						createVNode(unref(OIcon), {
+							class: "o-search-image-input-thumb-remove",
+							onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+							onClick: withModifiers(handleImageClear, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(icon_delete_hover_default))]),
+							_: 1
+						})
+					])) : createCommentVNode("", true)]),
+					_: 2
+				}, [__props.showSuffix ? {
+					name: "suffix",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "suffix", { hasValue: hasValue.value }, () => [
+						__props.enableImageSearch ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							ref_key: "uploadBtnRef",
+							ref: uploadBtnRef,
+							class: "o-search-image-input-upload-btn"
+						}, [createVNode(unref(OIcon), {
+							class: "o-search-image-input-icon upload",
+							onClick: withModifiers(handleUploadClick, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(icon_image_upload_default))]),
+							_: 1
+						})], 512)) : createCommentVNode("", true),
+						__props.enableImageSearch && uploadBtnRef.value ? (openBlock(), createBlock(unref(OPopover), {
+							key: 1,
+							trigger: "hover",
+							position: "bottom",
+							target: uploadBtnRef.value,
+							"body-class": "o-search-image-input-tooltip"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.imageUploadTooltip ?? unref(t)("search.imageUploadTooltip")), 1)]),
+							_: 1
+						}, 8, ["target"])) : createCommentVNode("", true),
+						__props.clearable && hasValue.value ? (openBlock(), createBlock(unref(OIcon), {
+							key: 2,
+							class: "o-search-image-input-icon close",
+							onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+							onClick: withModifiers(handleClear, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(icon_close_default))]),
+							_: 1
+						})) : createCommentVNode("", true)
+					], true)]),
+					key: "0"
+				} : void 0]), 1032, [
+					"modelValue",
+					"placeholder",
+					"size",
+					"disabled"
+				])]),
+				__props.expanded && showThumbnail.value ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "preview", {
+					previewUrl: unref(image).previewUrl.value,
+					remove: handleImageClear
+				}, () => [createElementVNode("div", _hoisted_4, [
+					createVNode(unref(OFigure), {
+						src: unref(image).previewUrl.value,
+						preview: __props.preview,
+						alt: "",
+						class: "o-search-image-input-preview-figure",
+						onPreview: onPreviewChange
+					}, null, 8, ["src", "preview"]),
+					createElementVNode("div", _hoisted_5, [createVNode(unref(OIcon), { class: "o-search-image-input-preview-zoom-icon" }, {
+						default: withCtx(() => [createVNode(unref(icon_image_zoomin_default))]),
+						_: 1
+					})]),
+					createVNode(unref(OIcon), {
+						class: "o-search-image-input-preview-remove",
+						onClick: withModifiers(handleImageClear, ["stop"])
+					}, {
+						default: withCtx(() => [createVNode(unref(icon_delete_hover_default))]),
+						_: 1
+					})
+				])], true)])) : createCommentVNode("", true),
+				__props.enableImageSearch ? (openBlock(), createElementBlock("input", {
+					key: 1,
+					ref_key: "fileInputRef",
+					ref: fileInputRef,
+					type: "file",
+					accept: acceptAttr.value,
+					class: "o-search-image-input-file",
+					onChange: handleFileSelect
+				}, null, 40, _hoisted_6)) : createCommentVNode("", true)
+			], 34);
+		};
+	}
+});
+export { SearchImageInput_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/search/internal/SearchImageInput.vue_vue_type_style_index_0_scoped_4a3e5145_lang.css

@@ -0,0 +1,242 @@
+.hover-icon-rotate .o-icon[data-v-4a3e5145] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-4a3e5145] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-image-input[data-v-4a3e5145] {
+  --radius: var(--o-search-image-input-radius, var(--o-search-input-radius, var(--o-radius-xs)));
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius);
+  transition: box-shadow var(--o-duration-m1);
+}
+.o-search-image-input.is-expanded[data-v-4a3e5145] {
+  box-shadow: 0 0 0 1px var(--o-color-primary1);
+}
+.o-search-image-input.is-expanded[data-v-4a3e5145] .o-input.el-input .el-input__wrapper,
+.o-search-image-input.is-expanded[data-v-4a3e5145] .o_box-main {
+  border: 0 solid transparent !important;
+  border-radius: var(--radius) var(--radius) 0 0;
+  box-shadow: none !important;
+}
+.o-search-image-input-row[data-v-4a3e5145] {
+  display: flex;
+  align-items: center;
+}
+.o-search-image-input-input[data-v-4a3e5145] {
+  width: 100%;
+  --_box-bg-color: var(--o-color-fill2);
+  --_box-bg-color-hover: var(--o-color-fill2);
+  --_box-bg-color-focus: var(--o-color-fill2);
+  --_box-bg-color-disabled: var(--o-color-fill2);
+}
+@media (max-width: 840px) {
+.o-search-image-input-input[data-v-4a3e5145] input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 1440px) {
+.o-search-image-input-input.o_box-medium[data-v-4a3e5145] {
+    --_box-height: 32px;
+}
+}
+.o-search-image-input-icon[data-v-4a3e5145] {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 16px;
+}
+.o-search-image-input-icon.close[data-v-4a3e5145] {
+  font-size: 16px;
+  margin-left: var(--o-gap-2);
+}
+.o-search-image-input-icon.close[data-v-4a3e5145] {
+  overflow: hidden;
+}
+.o-search-image-input-icon.close svg[data-v-4a3e5145] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.o-search-image-input-icon.close:hover svg[data-v-4a3e5145] {
+    transform: rotate(180deg);
+}
+}
+.o-search-image-input-icon.upload[data-v-4a3e5145] {
+  fill: var(--o-color-info1);
+}
+@media (max-width: 840px) {
+.o-search-image-input-icon[data-v-4a3e5145] {
+    font-size: 24px;
+}
+.o-search-image-input-icon.close[data-v-4a3e5145] {
+    font-size: 24px;
+}
+}
+.o-search-image-input-upload-btn[data-v-4a3e5145] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-upload-btn[data-v-4a3e5145]:hover {
+    background-color: var(--o-color-control2-light);
+}
+.o-search-image-input-upload-btn:hover .o-search-image-input-icon.upload[data-v-4a3e5145] {
+    color: var(--o-color-primary2);
+}
+}
+@media (max-width: 840px) {
+.o-search-image-input-upload-btn[data-v-4a3e5145] {
+    width: 24px;
+    height: 24px;
+}
+}
+.o-search-image-input-file[data-v-4a3e5145] {
+  display: none;
+}
+.o-search-image-input-thumb[data-v-4a3e5145] {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-thumb:hover .o-search-image-input-thumb-remove[data-v-4a3e5145],
+  .o-search-image-input-thumb:hover .o-search-image-input-thumb-zoom[data-v-4a3e5145] {
+    opacity: 1;
+}
+}
+.o-search-image-input-thumb-figure[data-v-4a3e5145] {
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-thumb-figure[data-v-4a3e5145] img {
+  height: 40px;
+  width: 40px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.o-search-image-input-thumb-figure[data-v-4a3e5145] {
+    height: 32px;
+    width: 32px;
+}
+}
+@media (max-width: 840px) {
+.o-search-image-input-thumb-figure[data-v-4a3e5145] {
+    height: 24px;
+    width: 24px;
+}
+}
+.o-search-image-input-thumb-zoom[data-v-4a3e5145] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-zoom .o-search-image-input-thumb-zoom-icon[data-v-4a3e5145] {
+  color: #fff;
+  font-size: 16px;
+}
+.o-search-image-input-thumb-remove[data-v-4a3e5145] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-remove[data-v-4a3e5145] svg {
+  width: 16px;
+  height: 16px;
+  fill: rgb(var(--o-mixedgray-9));
+}
+.o-search-image-input-preview[data-v-4a3e5145] {
+  padding: 0 12px 8px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-wrapper[data-v-4a3e5145] {
+  position: relative;
+  display: inline-flex;
+  overflow: visible;
+  margin-top: 8px;
+}
+@media (hover: hover) {
+.o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-remove[data-v-4a3e5145],
+  .o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-zoom[data-v-4a3e5145] {
+    opacity: 1;
+}
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom[data-v-4a3e5145] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom .o-search-image-input-preview-zoom-icon[data-v-4a3e5145] {
+  color: #fff;
+  font-size: 24px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-4a3e5145] {
+  height: 72px;
+  width: 72px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-4a3e5145] img {
+  height: 72px;
+  width: 72px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-4a3e5145] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-4a3e5145] svg {
+  width: 16px;
+  height: 16px;
+}

package/dist/treeshaking/components/search/internal/SearchImageInput.vue_vue_type_style_index_1_lang.css

@@ -0,0 +1,38 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-search-image-input-tooltip {
+  padding: var(--o-gap-3) var(--o-gap-4);
+  max-width: 240px;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}

package/dist/treeshaking/components/search/internal/SearchPanel.mjs

@@ -0,0 +1,6 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import SearchPanel_vue_vue_type_script_setup_true_lang_default from "./SearchPanel.vue_vue_type_script_setup_true_lang.mjs";
+import './SearchPanel.vue_vue_type_style_index_0_scoped_a5767f01_lang.css';
+// src/components/search/internal/SearchPanel.vue
+var SearchPanel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchPanel_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a5767f01"]]);
+export { SearchPanel_default as default };

package/dist/treeshaking/components/search/internal/SearchPanel.vue.d.ts

@@ -0,0 +1,100 @@
+import { OSearchRecommendItem } from '../types';
+export interface SearchPanelPropsT {
+    keyword?: string;
+    onestepItems?: OSearchRecommendItem[];
+    onestepTitle?: string;
+    suggestItems?: OSearchRecommendItem[];
+    suggestTitle?: string;
+    recommendItems?: string[];
+    historyItems?: string[];
+    historyTitle?: string;
+    hotItems?: string[];
+    hotTitle?: string;
+    noDataText?: string;
+    highlightKeyword?: boolean;
+    /** When true, show history+hot sections only if keyword is empty */
+    hideOnKeyword?: boolean;
+    /** When true, show suggest empty state ("no data") even when list is empty */
+    showSuggestEmpty?: boolean;
+    isDark?: boolean;
+    /** 'chips' = tag-cloud (header dropdown), 'list' = full-width rows (page search) */
+    historyLayout?: 'chips' | 'list';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'onestep-header'?(_: {
+            items: OSearchRecommendItem[];
+        }): any;
+        'onestep-content'?(_: {
+            items: OSearchRecommendItem[];
+            keyword: string;
+        }): any;
+        'suggest-header'?(_: {
+            items: OSearchRecommendItem[];
+        }): any;
+        'suggest-content'?(_: {
+            items: OSearchRecommendItem[];
+            keyword: string;
+        }): any;
+        'recommend-header'?(_: {
+            items: string[];
+        }): any;
+        'recommend-content'?(_: {
+            items: string[];
+        }): any;
+        'history-header'?(_: {
+            items: string[];
+        }): any;
+        'history-content'?(_: {
+            items: string[];
+        }): any;
+        'hot-header'?(_: {
+            items: string[];
+        }): any;
+        'hot-content'?(_: {
+            items: string[];
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SearchPanelPropsT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "onestep-click": (item: OSearchRecommendItem) => any;
+    "suggest-click": (item: OSearchRecommendItem) => any;
+    "recommend-click": (val: string) => any;
+    "history-click": (val: string) => any;
+    "hot-click": (val: string) => any;
+    "history-remove": (val: string) => any;
+    "history-clear": () => any;
+    "hot-refresh": () => any;
+}, string, import('vue').PublicProps, Readonly<SearchPanelPropsT> & Readonly<{
+    "onOnestep-click"?: ((item: OSearchRecommendItem) => any) | undefined;
+    "onSuggest-click"?: ((item: OSearchRecommendItem) => any) | undefined;
+    "onRecommend-click"?: ((val: string) => any) | undefined;
+    "onHistory-click"?: ((val: string) => any) | undefined;
+    "onHot-click"?: ((val: string) => any) | undefined;
+    "onHistory-remove"?: ((val: string) => any) | undefined;
+    "onHistory-clear"?: (() => any) | undefined;
+    "onHot-refresh"?: (() => any) | undefined;
+}>, {
+    isDark: boolean;
+    keyword: string;
+    onestepItems: OSearchRecommendItem[];
+    suggestItems: OSearchRecommendItem[];
+    recommendItems: string[];
+    historyItems: string[];
+    hotItems: string[];
+    highlightKeyword: boolean;
+    hideOnKeyword: boolean;
+    showSuggestEmpty: boolean;
+    historyLayout: "chips" | "list";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};