@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/header-search/OHeaderSearch.vue

@@ -1,628 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, toRef, watch } from 'vue';
-import { OIcon } from '@opensig/opendesign';
-import { onClickOutside, useDebounceFn } from '@vueuse/core';
-import { useScreen } from '@opendesign-plus/composables';
-
-import SearchImageInput from '../search/internal/SearchImageInput.vue';
-import SearchPanel from '../search/internal/SearchPanel.vue';
-import { useSearchHistory } from '../search/composables/useSearchHistory';
-import { useI18n } from '@/i18n';
-import type {
-  OSearchPayload,
-  OSearchRecommendItem,
-  OSearchUploadImageFn,
-} from '../search/types';
-
-import IconSearch from '~icons/components/icon-header-search.svg';
-import IconBack from '~icons/components/icon-header-back.svg';
-
-export interface OHeaderSearchPropsT {
-  /** ---- Backward-compatible props ---- */
-  modelValue?: string;
-  placeholder?: string; // 搜索框默认提示
-  expandedPlaceholder?: string; // 搜索框展开后提示
-  expandDirection?: 'left' | 'right'; // 搜索框展开方向，默认为 left
-  clearable?: boolean; // 是否显示清除按钮，默认显示
-  historyItems?: string[]; // 搜索历史记录
-  maxHistoryCount?: number; // 最多保存的搜索历史记录数，默认 6 条
-  storeHistory?: boolean; // 是否使用 localStorage 存储搜索历史记录，存储之后初始化时会自动加载搜索历史记录，默认为 false
-  historyTitle?: string; // 历史记录标题
-  storageKey?: string; // localStorage 存储搜索历史记录的 key，默认为 search-history
-  hotItems?: string[]; // 热门搜索
-  hotTitle?: string; // 推荐搜索标题
-  /** Legacy plain-string recommend list. Shown when input is empty. */
-  recommendItems?: string[];
-  searchUrl?: string;
-  searchUrlOpenBlank?: boolean;
-  searchTextMobile?: string;
-  imagePlaceholder?: string;
-  enableImageSearch?: boolean;
-  imageUrl?: string;
-  uploadImage?: OSearchUploadImageFn;
-  maxImageSize?: number;
-  imageUploadTooltip?: string;
-  suggestItems?: OSearchRecommendItem[];
-  onestepItems?: OSearchRecommendItem[];
-  suggestTitle?: string;
-  onestepTitle?: string;
-  noDataText?: string;
-  highlightKeyword?: boolean;
-  /** Debounce ms for the `input` event */
-  debounce?: number;
-  /** Auto-record history on search; default true */
-  autoSaveHistory?: boolean;
-  /** Show "no data" empty state in suggest section while typing */
-  showSuggestEmpty?: boolean;
-  allowedImageTypes?: string[];
-  /** 强制指定移动端模式，不传时由内部 lePadV 断点自动判断 */
-  mobile?: boolean;
-}
-
-const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
-  modelValue: '',
-  expandDirection: 'left',
-  clearable: true,
-  historyItems: () => [],
-  maxHistoryCount: 6,
-  storeHistory: false,
-  storageKey: 'search-history',
-  hotItems: () => [],
-  recommendItems: () => [],
-  searchUrlOpenBlank: true,
-  enableImageSearch: false,
-  imageUrl: '',
-  maxImageSize: 10 * 1024 * 1024,
-  suggestItems: () => [],
-  onestepItems: () => [],
-  highlightKeyword: true,
-  debounce: 300,
-  autoSaveHistory: true,
-  showSuggestEmpty: true,
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'update:historyItems', value: string[]): void;
-  (e: 'update:imageUrl', url: string): void;
-  (e: 'focus'): void;
-  (e: 'blur'): void;
-  (e: 'input', val: string): void;
-  (e: 'clear'): void;
-  /** Backward compatible: previously `(val: string)`. Now emits payload. */
-  (e: 'search', payload: OSearchPayload): void;
-  (e: 'recommend-click', item: OSearchRecommendItem | string): void;
-  (e: 'onestep-click', item: OSearchRecommendItem): void;
-  (e: 'history-click', val: string): void;
-  (e: 'hot-click', val: string): void;
-  (e: 'hot-refresh'): void;
-  (e: 'delete-history', value: string[]): void;
-  (e: 'delete-history-item', value: 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 { lePadV } = useScreen();
-const { t } = useI18n();
-
-// mobile=true → 强制移动端；未传或 false → 回退到内部断点 lePadV
-const isMobileMode = computed(() => props.mobile === true || lePadV.value);
-
-const wrapperRef = ref<HTMLElement | null>(null);
-const inputRef = ref<InstanceType<typeof SearchImageInput>>();
-const isShowDrawer = ref(false);
-const internalImageStaged = ref(false);
-const internalImageUrl = ref('');
-const hasImage = computed(() => !!props.imageUrl || internalImageStaged.value);
-
-const innerValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
-});
-
-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),
-});
-
-const placeholder = computed(() => {
-  if (props.imageUrl) {
-    return props.imagePlaceholder ?? t('search.extendedPlaceholder');
-  }
-  if (isShowDrawer.value && props.enableImageSearch) {
-    return props.imagePlaceholder ?? t('search.imagePlaceholder');
-  }
-  if (isShowDrawer.value) {
-    return props.expandedPlaceholder ?? t('search.expandedPlaceholder');
-  }
-  return props.placeholder ?? t('search.placeholder');
-});
-
-// debounce input event
-const emitInputDebounced = useDebounceFn((val: string) => emit('input', val), () => props.debounce);
-watch(innerValue, (val) => emitInputDebounced(val));
-
-// click outside (desktop only)
-onClickOutside(wrapperRef, () => {
-  if (isMobileMode.value) return;
-  closeDrawer();
-});
-
-const openDrawer = () => {
-  isShowDrawer.value = true;
-};
-
-const closeDrawer = () => {
-  if (isMobileMode.value) return;
-  isShowDrawer.value = false;
-};
-
-const handleFocus = () => {
-  openDrawer();
-  emit('focus');
-};
-
-const handleBlur = () => {
-  emit('blur');
-};
-
-const runSearch = async (overrideKeyword?: string) => {
-  if (inputRef.value?.getIsUploading?.()) {
-    await inputRef.value.awaitUpload?.();
-  }
-  const keyword = overrideKeyword !== undefined ? overrideKeyword.trim() : innerValue.value.trim();
-  const imageUrl = internalImageUrl.value || inputRef.value?.getUploadedUrl?.() || props.imageUrl;
-
-  if (!keyword && !imageUrl) return;
-
-  if (props.autoSaveHistory && keyword) {
-    history.push(keyword);
-  }
-
-  emit('search', { keyword, imageUrl: imageUrl || undefined });
-  inputRef.value?.blur?.();
-  isShowDrawer.value = false;
-
-  if (props.searchUrl) {
-    const params = new URLSearchParams();
-    if (keyword) params.set('q', keyword);
-    if (imageUrl) params.set('imageUrl', imageUrl);
-    const sep = props.searchUrl.includes('?') ? '&' : '?';
-    const url = `${props.searchUrl}${sep}${params.toString()}`;
-    if (typeof window !== 'undefined') {
-      window.open(url, props.searchUrlOpenBlank ? '_blank' : '_self', props.searchUrlOpenBlank ? 'noopener,noreferrer' : '');
-    }
-  }
-};
-
-const handleClear = () => {
-  innerValue.value = '';
-  emit('clear');
-  inputRef.value?.focus?.();
-};
-
-const handleSuggestClick = (item: OSearchRecommendItem) => {
-  emit('recommend-click', item);
-  innerValue.value = item.key;
-  runSearch(item.key ?? '');
-};
-
-const handleRecommendClick = (val: string) => {
-  emit('recommend-click', val);
-  runSearch(val);
-};
-
-const handleOnestepClick = (item: OSearchRecommendItem) => {
-  emit('onestep-click', item);
-  if (item.path && typeof window !== 'undefined') {
-    window.open(item.path, '_blank', 'noopener,noreferrer');
-  }
-};
-
-const handleHistoryClick = (val: string) => {
-  emit('history-click', val);
-  runSearch(val);
-};
-
-const handleHotClick = (val: string) => {
-  emit('hot-click', val);
-  runSearch(val);
-};
-
-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 handleBack = () => {
-  innerValue.value = '';
-  internalImageStaged.value = false;
-  emit('update:imageUrl', '');
-  isShowDrawer.value = false;
-};
-
-const handleImageUploadStart = (file: File) => {
-  internalImageStaged.value = true;
-  internalImageUrl.value = '';
-  emit('image-upload-start', file);
-};
-
-const handleImageUploadSuccess = (url: string, file: File) => {
-  internalImageUrl.value = url;
-  emit('update:imageUrl', url);
-  emit('image-upload-success', url, file);
-};
-
-const handleImageClear = () => {
-  internalImageStaged.value = false;
-  internalImageUrl.value = '';
-  emit('update:imageUrl', '');
-};
-
-const showPanel = computed(() => {
-  if (!isShowDrawer.value) return false;
-  if (hasImage.value) return false;
-  return true;
-});
-
-defineExpose({
-  focus: () => inputRef.value?.focus?.(),
-  blur: () => inputRef.value?.blur?.(),
-  open: openDrawer,
-  close: closeDrawer,
-  search: runSearch,
-});
-</script>
-
-<template>
-  <div class="o-header-search" :class="{ 'is-mobile-mode': isMobileMode }">
-    <div
-      ref="wrapperRef"
-      class="o-header-search-pos"
-      :class="{
-        'is-pc': !isMobileMode,
-        'is-mobile': isMobileMode,
-        'is-left': expandDirection === 'left',
-        'is-right': expandDirection === 'right',
-        'is-focus': isShowDrawer,
-      }"
-    >
-      <div class="o-header-search-row" :class="{ 'is-focus': isShowDrawer }">
-        <OIcon v-if="isMobileMode && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
-          <IconBack />
-        </OIcon>
-
-        <SearchImageInput
-          ref="inputRef"
-          v-model="innerValue"
-          :image-url="imageUrl"
-          :placeholder="placeholder"
-          :enable-image-search="enableImageSearch"
-          :upload-image="uploadImage"
-          :max-image-size="maxImageSize"
-          :image-upload-tooltip="imageUploadTooltip"
-          :clearable="clearable && isShowDrawer"
-          :expanded="isShowDrawer && hasImage"
-          :allowed-image-types="allowedImageTypes"
-          size="medium"
-          class="o-header-search-input"
-          :class="{ 'is-collapsed': !isShowDrawer }"
-          @update:imageUrl="(url: string) => emit('update:imageUrl', url)"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @enter="runSearch"
-          @clear="handleClear"
-          @image-clear="handleImageClear"
-          @image-upload-start="handleImageUploadStart"
-          @image-upload-success="handleImageUploadSuccess"
-          @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)"
-        >
-          <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>
-
-        <span v-if="isMobileMode && isShowDrawer" class="o-header-search-text" @click="runSearch">
-          {{ searchTextMobile ?? t('search') }}
-        </span>
-      </div>
-
-      <Transition name="o-header-search-drawer">
-        <div v-if="showPanel" class="o-header-search-drawer">
-          <slot
-            name="drawer"
-            :recommend-items="recommendItems"
-            :history-items="history.items.value"
-            :hot-items="hotItems"
-            :suggest-items="suggestItems"
-            :onestep-items="onestepItems"
-            :keyword="modelValue"
-          >
-            <SearchPanel
-              :keyword="modelValue"
-              :onestep-items="onestepItems"
-              :onestep-title="onestepTitle"
-              :suggest-items="suggestItems"
-              :suggest-title="suggestTitle"
-              :recommend-items="recommendItems"
-              :history-items="history.items.value"
-              :history-title="historyTitle"
-              :hot-items="hotItems"
-              :hot-title="hotTitle"
-              :no-data-text="noDataText"
-              :highlight-keyword="highlightKeyword"
-              :hide-on-keyword="true"
-              :show-suggest-empty="showSuggestEmpty"
-              @onestep-click="handleOnestepClick"
-              @suggest-click="handleSuggestClick"
-              @recommend-click="handleRecommendClick"
-              @history-click="handleHistoryClick"
-              @history-remove="handleHistoryRemove"
-              @history-clear="handleHistoryClear"
-              @hot-click="handleHotClick"
-              @hot-refresh="emit('hot-refresh')"
-            >
-              <template v-if="$slots['recommend-header']" #recommend-header="slotProps">
-                <slot name="recommend-header" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['recommend-content']" #recommend-content="slotProps">
-                <slot name="recommend-content" v-bind="slotProps" />
-              </template>
-              <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>
-              <template v-if="$slots['hot-header']" #hot-header="slotProps">
-                <slot name="hot-header" v-bind="slotProps" />
-              </template>
-              <template v-if="$slots['hot-content']" #hot-content="slotProps">
-                <slot name="hot-content" v-bind="slotProps" />
-              </template>
-            </SearchPanel>
-          </slot>
-        </div>
-      </Transition>
-    </div>
-
-    <OIcon v-if="isMobileMode" class="o-header-search-mobile-icon" @click="openDrawer">
-      <IconSearch />
-    </OIcon>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-header-search {
-  position: relative;
-  width: 160px;
-  height: 32px;
-
-  @include respond-to('<=laptop') {
-    width: 120px;
-  }
-
-  @include respond-to('<=pad_v') {
-    width: 24px;
-    height: 24px;
-    margin-left: auto;
-  }
-}
-
-.o-header-search-pos {
-  position: absolute;
-  top: 0;
-  width: fit-content;
-  background-color: var(--o-color-fill2);
-  z-index: 100;
-
-  &.is-left {
-    right: 0;
-  }
-  &.is-right {
-    left: 0;
-  }
-  &.is-mobile {
-    display: none;
-  }
-  &.is-pc.is-focus {
-    box-shadow: var(--o-shadow-2);
-    top: calc(-1 * var(--o-gap-4));
-    border-radius: var(--o-radius-xs);
-  }
-
-  &.is-mobile.is-focus {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    display: block;
-    height: 100vh;
-    background-color: var(--o-color-fill2);
-    z-index: 100;
-    overflow-y: auto;
-  }
-}
-
-.o-header-search-row {
-  display: flex;
-  align-items: start;
-
-  &.is-focus {
-    padding: var(--o-gap-4);
-    border-radius: var(--o-radius-xs);
-
-    @include respond-to('<=pad_v') {
-      gap: var(--o-gap-4);
-      padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
-      border-radius: unset;
-    }
-  }
-}
-
-.o-header-search-input {
-  width: 160px;
-  transition: width var(--o-duration-m2) var(--o-easing-standard-in);
-
-  @include respond-to('<=laptop') {
-    width: 120px;
-  }
-}
-
-.o-header-search-row.is-focus .o-header-search-input {
-  width: 480px;
-
-  @include respond-to('laptop') {
-    width: 360px;
-  }
-
-  @include respond-to('pad_h') {
-    width: 272px;
-  }
-
-  @include respond-to('<=pad_v') {
-    flex: 1;
-    width: auto;
-  }
-}
-
-.o-header-search-back-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 20px;
-  height: 30px;
-}
-
-.o-header-search-text {
-  white-space: nowrap;
-  font-size: 16px;
-  line-height: 24px;
-  cursor: pointer;
-  color: var(--o-color-info1);
-  height: 30px;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-}
-
-.o-header-search-drawer {
-  position: absolute;
-  width: 100%;
-  padding: var(--o-gap-4);
-  padding-top: 0;
-  background-color: var(--o-color-fill2);
-  box-shadow: var(--o-shadow-2);
-  border-radius: 0 0 var(--o-radius-xs) var(--o-radius-xs);
-
-  @include respond-to('<=pad_v') {
-    position: static;
-    height: calc(100vh - 50px);
-    padding-top: 0;
-    overflow-y: auto;
-    box-shadow: unset;
-    border-radius: unset;
-  }
-}
-
-.o-header-search-drawer::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(-1 * var(--o-gap-4));
-  height: calc(var(--o-gap-4) + 1px);
-  background-color: var(--o-color-fill2);
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.o-header-search-mobile-icon {
-  font-size: 24px;
-  line-height: 28px;
-  color: var(--o-color-info1);
-  cursor: pointer;
-  display: none;
-
-  @include respond-to('<=pad_v') {
-    display: block;
-  }
-}
-
-.o-header-search-drawer-enter-active {
-  transition: opacity var(--o-duration-m1);
-}
-
-.o-header-search-drawer-enter-from {
-  opacity: 0;
-}
-
-// 外部传入 mobile=true 时，复制 <=pad_v 的全部样式，不依赖媒体查询
-.o-header-search.is-mobile-mode {
-  width: 24px;
-  height: 24px;
-
-  .o-header-search-mobile-icon {
-    display: block;
-  }
-
-  .o-header-search-row.is-focus {
-    gap: var(--o-gap-4);
-    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
-    border-radius: unset;
-  }
-
-  .o-header-search-row.is-focus .o-header-search-input {
-    flex: 1;
-    width: auto;
-  }
-
-  .o-header-search-drawer {
-    position: static;
-    height: calc(100vh - 50px);
-    padding-top: 0;
-    overflow-y: auto;
-    box-shadow: unset;
-    border-radius: unset;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-</style>

package/src/components/header-search/index.ts

@@ -1,10 +0,0 @@
-import _OHeaderSearch from './OHeaderSearch.vue';
-import type { App } from 'vue';
-
-const OHeaderSearch = Object.assign(_OHeaderSearch, {
-  install(app: App) {
-    app.component('OHeaderSearch', _OHeaderSearch);
-  },
-});
-
-export { OHeaderSearch };