@opendesign-plus-test/components 0.0.1-rc.49 → 0.0.1-rc.50

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

@@ -1,100 +0,0 @@
-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/dist/vue.esm-bundler.js').DefineComponent<SearchPanelPropsT, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').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/dist/vue.esm-bundler.js').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;
-}>, {
-    keyword: string;
-    onestepItems: OSearchRecommendItem[];
-    suggestItems: OSearchRecommendItem[];
-    recommendItems: string[];
-    historyItems: string[];
-    hotItems: string[];
-    highlightKeyword: boolean;
-    hideOnKeyword: boolean;
-    showSuggestEmpty: boolean;
-    isDark: boolean;
-    historyLayout: "chips" | "list";
-}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').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;
-    };
-};

package/dist/components/search/types.d.ts

@@ -1,20 +0,0 @@
-export interface OSearchRecommendItem {
-    key: string;
-    path?: string;
-    type?: string;
-    count?: number;
-}
-export interface OSearchPayload {
-    keyword: string;
-    imageUrl?: string;
-}
-export interface OSearchImageUploadErrorPayload {
-    file: File;
-    error: unknown;
-}
-export type OSearchUploadImageFn = (file: File) => Promise<string>;
-export type OSearchItemClickType = 'history' | 'hot' | 'suggest' | 'onestep';
-export interface OSearchHighlightPart {
-    text: string;
-    match: boolean;
-}

package/src/assets/svg-icons/icon-delete-hover.svg

@@ -1,4 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path fill="#6f6f75" d="M22.5 12c0 5.799-4.701 10.5-10.5 10.5s-10.5-4.701-10.5-10.5c0-5.799 4.701-10.5 10.5-10.5s10.5 4.701 10.5 10.5z"></path>
-<path fill="#ffffff" d="M15.3 7.631c0.274-0.197 0.657-0.172 0.903 0.074 0.273 0.273 0.273 0.717 0 0.99l-3.259 3.259 3.259 3.259c0.273 0.273 0.273 0.717 0 0.99-0.246 0.246-0.63 0.271-0.903 0.074l-0.087-0.074-3.259-3.259-3.259 3.259-0.087 0.074c-0.274 0.197-0.657 0.172-0.903-0.074-0.273-0.273-0.273-0.717 0-0.99l3.259-3.259-3.259-3.259c-0.273-0.273-0.273-0.717 0-0.99 0.246-0.246 0.63-0.271 0.903-0.074l0.087 0.074 3.259 3.259 3.259-3.259 0.087-0.074z"></path>
-</svg>

package/src/assets/svg-icons/icon-image-close.svg

@@ -1,4 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M22.5 12c0 5.799-4.701 10.5-10.5 10.5s-10.5-4.701-10.5-10.5c0-5.799 4.701-10.5 10.5-10.5s10.5 4.701 10.5 10.5z"></path>
-<path fill="currentColor" d="M15.3 7.631c0.274-0.197 0.657-0.172 0.903 0.074 0.273 0.273 0.273 0.717 0 0.99l-3.259 3.259 3.259 3.259c0.273 0.273 0.273 0.717 0 0.99-0.246 0.246-0.63 0.271-0.903 0.074l-0.087-0.074-3.259-3.259-3.259 3.259-0.087 0.074c-0.274 0.197-0.657 0.172-0.903-0.074-0.273-0.273-0.273-0.717 0-0.99l3.259-3.259-3.259-3.259c-0.273-0.273-0.273-0.717 0-0.99 0.246-0.246 0.63-0.271 0.903-0.074l0.087 0.074 3.259 3.259 3.259-3.259 0.087-0.074z"></path>
-</svg>

package/src/assets/svg-icons/icon-image-upload.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path opacity="0.8" d="M19.724 4.238c1.105 0 2 0.895 2 2v6.772c0 0.387-0.313 0.7-0.7 0.7s-0.7-0.313-0.7-0.7v-0.816l-3.544 3.84c-0.248 0.268-0.661 0.301-0.948 0.075l-4.13-3.256-3.925 3.843c-0.249 0.243-0.632 0.264-0.904 0.064l-0.086-0.075c-0.27-0.276-0.266-0.72 0.011-0.99l4.365-4.273c0.251-0.246 0.647-0.267 0.923-0.050l4.104 3.235 4.134-4.478v-3.892c0-0.331-0.269-0.6-0.6-0.6h-15.45c-0.331 0-0.6 0.269-0.6 0.6v11.501c0 0.331 0.269 0.6 0.6 0.6h9.781c0.387 0 0.7 0.313 0.7 0.7s-0.313 0.7-0.7 0.7h-9.781c-1.105 0-2-0.895-2-2v-11.501c0-1.105 0.895-2 2-2h15.45zM9.532 8.878c0-0.695-0.579-1.259-1.294-1.259s-1.294 0.564-1.294 1.259c0 0.695 0.579 1.259 1.294 1.259s1.294-0.564 1.294-1.259zM16.561 18.645c-0.195-0.195-0.195-0.512 0-0.707l2.090-2.090c0.010-0.011 0.020-0.021 0.030-0.030l0.001-0.001c0.195-0.195 0.512-0.195 0.707 0l2.121 2.121c0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0l-1.284-1.284v3.57c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3.538l-1.251 1.251c-0.174 0.174-0.443 0.193-0.638 0.058l-0.069-0.058z"></path>
-</svg>

package/src/assets/svg-icons/icon-image-zoomin.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path fill="currentColor" d="M3.398 10.877c0-4.099 3.323-7.423 7.423-7.423s7.423 3.323 7.423 7.423c0 4.099-3.323 7.423-7.423 7.423s-7.423-3.323-7.423-7.423zM16.774 10.877c0-3.326-2.657-6.023-5.935-6.023s-5.935 2.696-5.935 6.023c0 3.326 2.657 6.023 5.935 6.023s5.935-2.696 5.935-6.023zM11.499 13.369c0 0.365-0.296 0.661-0.661 0.661s-0.661-0.296-0.661-0.661v-1.821h-1.775c-0.371 0-0.671-0.3-0.671-0.671s0.3-0.671 0.671-0.671h1.775v-1.821c0-0.365 0.296-0.661 0.661-0.661s0.661 0.296 0.661 0.661v1.821h1.775c0.371 0 0.671 0.3 0.671 0.671s-0.3 0.671-0.671 0.671h-1.775v1.821zM16.579 16.598c0.242-0.246 0.62-0.271 0.89-0.075l0.086 0.074 2.72 2.754c0.27 0.273 0.27 0.716 0.001 0.99-0.242 0.246-0.62 0.271-0.89 0.075l-0.086-0.074-2.72-2.754c-0.27-0.273-0.27-0.716-0.001-0.99z"></path>
-</svg>

package/src/assets/svg-icons/icon-refresh.svg

@@ -1,3 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path opacity="0.8" fill="currentColor" d="M17.947 4.273c-1.676-1.292-3.752-2.023-5.948-2.023-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75c4.032 0 7.604-2.47 9.066-6.156 0.153-0.385-0.035-0.821-0.42-0.974s-0.821 0.036-0.974 0.42c-1.237 3.119-4.26 5.209-7.672 5.209-4.556 0-8.25-3.694-8.25-8.25s3.694-8.25 8.25-8.25c1.837 0 3.574 0.604 4.983 1.673l-1.305 1.556c-0.077 0.092-0.021 0.232 0.098 0.246l4.873 0.539c0.106 0.012 0.191-0.088 0.16-0.191l-1.377-4.706c-0.034-0.115-0.182-0.146-0.259-0.054l-1.226 1.461z"></path>
-</svg>

package/src/components/search/OSearchInput.vue

@@ -1,463 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, toRef, watch } from 'vue';
-import { onClickOutside, useDebounceFn } from '@vueuse/core';
-
-import SearchImageInput from './internal/SearchImageInput.vue';
-import SearchPanel from './internal/SearchPanel.vue';
-import { useSearchHistory } from './composables/useSearchHistory';
-import { useI18n } from '@/i18n';
-import type {
-  OSearchPayload,
-  OSearchRecommendItem,
-  OSearchUploadImageFn,
-} from './types';
-
-export interface OSearchInputPropsT {
-  modelValue?: string;
-  imageUrl?: string;
-  size?: 'small' | 'medium' | 'large';
-  placeholder?: string;
-  imagePlaceholder?: string;
-
-  /** ---- Image search ---- */
-  enableImageSearch?: boolean;
-  uploadImage?: OSearchUploadImageFn;
-  maxImageSize?: number;
-  imageUploadTooltip?: string;
-
-  /** ---- Recommendation lists (controlled by parent) ---- */
-  suggestItems?: OSearchRecommendItem[];
-  onestepItems?: OSearchRecommendItem[];
-  suggestTitle?: string;
-  onestepTitle?: string;
-  noDataText?: string;
-  /** When true, show "no data" placeholder for empty suggest while typing */
-  showSuggestEmpty?: boolean;
-  highlightKeyword?: boolean;
-  debounce?: number;
-
-  /** ---- History ---- */
-  enableHistory?: boolean;
-  historyItems?: string[];
-  maxHistoryCount?: number;
-  storeHistory?: boolean;
-  storageKey?: string;
-  historyTitle?: string;
-  /** Auto-record history on search; default true */
-  autoSaveHistory?: boolean;
-
-  /** ---- "Did you mean" list (below input) ---- */
-  suggestList?: string[];
-  suggestListLabel?: string;
-  /** When true, render suggestList items as HTML (with v-html on inert string) */
-  allowHtmlInSuggest?: boolean;
-
-  /** ---- Misc ---- */
-  clearable?: boolean;
-  closeOnSearch?: boolean;
-  closeOnClickOutside?: boolean;
-  /** Show dropdown on focus even when empty (history) */
-  openOnFocus?: boolean;
-  /** Always show image as inline thumbnail inside the input; never expand preview below */
-  alwaysInlineThumbnail?: boolean;
-}
-
-const props = withDefaults(defineProps<OSearchInputPropsT>(), {
-  modelValue: '',
-  imageUrl: '',
-  size: 'large',
-  enableImageSearch: false,
-  maxImageSize: 10 * 1024 * 1024,
-  suggestItems: () => [],
-  onestepItems: () => [],
-  showSuggestEmpty: true,
-  highlightKeyword: true,
-  debounce: 300,
-  enableHistory: true,
-  historyItems: () => [],
-  maxHistoryCount: 6,
-  storeHistory: false,
-  storageKey: 'search-history',
-  autoSaveHistory: true,
-  suggestList: () => [],
-  allowHtmlInSuggest: false,
-  clearable: true,
-  closeOnSearch: true,
-  closeOnClickOutside: true,
-  openOnFocus: true,
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: string): void;
-  (e: 'update:imageUrl', url: string): void;
-  (e: 'update:historyItems', items: string[]): void;
-  (e: 'focus'): void;
-  (e: 'blur'): void;
-  (e: 'input', val: string): void;
-  (e: 'clear'): void;
-  (e: 'search', payload: OSearchPayload): void;
-  (e: 'recommend-click', item: OSearchRecommendItem): void;
-  (e: 'onestep-click', item: OSearchRecommendItem): void;
-  (e: 'history-click', val: string): void;
-  (e: 'suggest-list-click', val: string): void;
-  (e: 'delete-history', items: string[]): void;
-  (e: 'delete-history-item', val: string): void;
-  (e: 'image-upload-start', file: File): void;
-  (e: 'image-upload-success', url: string, file: File): void;
-  (e: 'image-upload-error', error: unknown, file: File): void;
-  (e: 'image-validate-error', reason: 'size' | 'type', file: File): void;
-}>();
-
-const { t } = useI18n();
-
-const inputRef = ref<InstanceType<typeof SearchImageInput>>();
-const wrapperRef = ref<HTMLElement | null>(null);
-
-const innerValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => 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;
-  if (hasSuggest) return true;
-  if (props.openOnFocus && hasHistory) return true;
-  return false;
-});
-
-// history
-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),
-});
-
-// debounced input event
-const emitInputDebounced = useDebounceFn((val: string) => {
-  emit('input', val);
-}, () => props.debounce);
-
-watch(innerValue, (val) => {
-  emitInputDebounced(val);
-});
-
-// click outside
-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 () => {
-  if (inputRef.value?.getIsUploading?.()) {
-    await inputRef.value.awaitUpload?.();
-  }
-  const keyword = 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 || undefined });
-};
-
-const handleClear = () => {
-  innerValue.value = '';
-  emit('clear');
-};
-
-const handleSuggestClick = (item: OSearchRecommendItem) => {
-  emit('recommend-click', item);
-  innerValue.value = item.key;
-  runSearch();
-};
-
-const handleOnestepClick = (item: OSearchRecommendItem) => {
-  emit('onestep-click', item);
-  if (item.path) {
-    const url = item.path;
-    if (typeof window !== 'undefined') window.open(url, '_blank', 'noopener,noreferrer');
-  }
-};
-
-const handleHistoryClick = (val: string) => {
-  emit('history-click', val);
-  innerValue.value = val;
-  runSearch();
-};
-
-const handleHistoryRemove = (val: string) => {
-  history.remove(val);
-  emit('delete-history-item', val);
-};
-
-const handleHistoryClear = () => {
-  const removed = [...history.items.value];
-  history.clearAll();
-  emit('delete-history', removed);
-};
-
-const handleSuggestListClick = (val: string) => {
-  // Strip HTML tags when raw HTML is allowed for display
-  const text = props.allowHtmlInSuggest ? val.replace(/<[^>]+>/g, '') : val;
-  emit('suggest-list-click', text);
-  innerValue.value = text;
-  runSearch();
-};
-
-const onPreviewChange = (visible: boolean) => {
-  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: File) => {
-  hasInternalImage.value = true;
-  emit('image-upload-start', file);
-};
-
-const onImageUploadSuccess = (url: string, file: File) => {
-  hasInternalImage.value = false;
-  emit('image-upload-success', url, file);
-};
-
-const onImageClear = () => {
-  hasInternalImage.value = false;
-  emit('update:imageUrl', '');
-};
-
-defineExpose({
-  focus: () => inputRef.value?.focus?.(),
-  blur: () => inputRef.value?.blur?.(),
-  search: runSearch,
-  saveHistory: (val?: string) => history.push(val ?? innerValue.value),
-});
-</script>
-
-<template>
-  <div ref="wrapperRef" class="o-search-input" :class="{ 'is-focus': isFocus }">
-    <div class="o-search-input-box">
-      <SearchImageInput
-        ref="inputRef"
-        v-model="innerValue"
-        :image-url="imageUrl"
-        :placeholder="placeholder"
-        :image-placeholder="imagePlaceholder"
-        :size="size"
-        :enable-image-search="enableImageSearch"
-        :upload-image="uploadImage"
-        :max-image-size="maxImageSize"
-        :image-upload-tooltip="imageUploadTooltip"
-        :expanded="isFocus && !props.alwaysInlineThumbnail"
-        :inline-thumbnail="showInlineThumbnail"
-        :clearable="clearable"
-        class="o-search-input-field"
-        @update:imageUrl="(url: string) => emit('update:imageUrl', url)"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @enter="runSearch"
-        @clear="handleClear"
-        @image-clear="onImageClear"
-        @image-upload-start="onImageUploadStart"
-        @image-upload-success="onImageUploadSuccess"
-        @image-upload-error="(error: unknown, file: File) => emit('image-upload-error', error, file)"
-        @image-validate-error="(reason: 'size' | 'type', file: File) => emit('image-validate-error', reason, file)"
-        @preview-change="onPreviewChange"
-      >
-        <template #prefix><slot name="input-prefix" /></template>
-        <template #suffix="slotProps"><slot name="input-suffix" v-bind="slotProps" /></template>
-        <template v-if="$slots['image-preview']" #preview="slotProps">
-          <slot name="image-preview" v-bind="slotProps" />
-        </template>
-      </SearchImageInput>
-
-      <Transition name="o-search-input-dropdown">
-        <div v-if="showDropdown" class="o-search-input-dropdown">
-          <slot name="dropdown" :keyword="modelValue">
-            <SearchPanel
-              :keyword="modelValue"
-              :onestep-items="onestepItems"
-              :onestep-title="onestepTitle"
-              :suggest-items="suggestItems"
-              :suggest-title="suggestTitle"
-              :history-items="enableHistory ? history.items.value : []"
-              :history-title="historyTitle"
-              :no-data-text="noDataText"
-              :highlight-keyword="highlightKeyword"
-              :hide-on-keyword="true"
-              :show-suggest-empty="showSuggestEmpty"
-              history-layout="list"
-              @onestep-click="handleOnestepClick"
-              @suggest-click="handleSuggestClick"
-              @history-click="handleHistoryClick"
-              @history-remove="handleHistoryRemove"
-              @history-clear="handleHistoryClear"
-            >
-              <template v-if="$slots['onestep-header']" #onestep-header="slotProps">
-                <slot name="onestep-header" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['onestep-content']" #onestep-content="slotProps">
-                <slot name="onestep-content" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['suggest-header']" #suggest-header="slotProps">
-                <slot name="suggest-header" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['suggest-content']" #suggest-content="slotProps">
-                <slot name="suggest-content" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['history-header']" #history-header="slotProps">
-                <slot name="history-header" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['history-content']" #history-content="slotProps">
-                <slot name="history-content" v-bind="slotProps" />
-              </template>
-            </SearchPanel>
-          </slot>
-        </div>
-      </Transition>
-    </div>
-
-    <div v-if="suggestList?.length" class="o-search-input-suggest-list-row">
-      <slot name="suggest-list" :items="suggestList">
-        <span class="o-search-input-suggest-list-label">{{ suggestListLabel ?? t('search.suggestListLabel') }}</span>
-        <ul class="o-search-input-suggest-list">
-          <li
-            v-for="(item, idx) in suggestList"
-            :key="item + idx"
-            class="o-search-input-suggest-list-item"
-            @click="handleSuggestListClick(item)"
-          >
-            <span v-if="allowHtmlInSuggest" v-html="item" />
-            <span v-else>{{ item }}</span>
-          </li>
-        </ul>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-search-input {
-  position: relative;
-  width: 100%;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
-
-  // Make large size 48px tall
-  :deep(.o-input.o_box-large) {
-    --_box-height: 48px;
-  }
-}
-
-.o-search-input-box {
-  position: relative;
-  width: 100%;
-}
-
-.o-search-input-field {
-  width: 100%;
-}
-
-.o-search-input-dropdown {
-  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-radius-xs);
-  box-shadow: var(--o-shadow-2);
-}
-
-.o-search-input-dropdown-enter-active,
-.o-search-input-dropdown-leave-active {
-  transition: opacity var(--o-duration-m1), transform var(--o-duration-m1);
-}
-
-.o-search-input-dropdown-enter-from,
-.o-search-input-dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.o-search-input-suggest-list-row {
-  display: flex;
-  margin-top: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-  @include tip1;
-  color: var(--o-color-info1);
-}
-
-.o-search-input-suggest-list-label {
-  color: var(--o-color-info3);
-  margin-right: 4px;
-  @include tip1;
-}
-
-.o-search-input-suggest-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.o-search-input-suggest-list-item {
-  margin-right: 8px;
-  cursor: pointer;
-  color: var(--o-color-primary1);
-
-  :deep(em) {
-    color: var(--o-color-primary1);
-    font-style: normal;
-  }
-
-  @include hover {
-    text-decoration: underline;
-  }
-}
-</style>