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

package/src/components/OHeaderSearch.vue

@@ -1,601 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import { OIcon, OInput, ODivider } from '@opensig/opendesign';
-import { onClickOutside } from '@vueuse/core';
-import { useScreen } from '@opendesign-plus/composables';
-
-import IconClose from '~icons/components/icon-close.svg';
-import IconSearch from '~icons/components/icon-header-search.svg';
-import IconDelete from '~icons/components/icon-header-delete.svg';
-import IconDeleteAll from '~icons/components/icon-delete.svg';
-import IconBack from '~icons/components/icon-header-back.svg';
-
-import { useI18n } from '@/i18n';
-
-export interface OHeaderSearchPropsT {
-  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; // 推荐搜索标题
-  recommendItems?: string[]; // 推荐搜索
-  searchUrl?: string; // 搜索页面 url，不为空点击热门搜索、历史记录、推荐搜索和回车搜索时自动打开页面
-  searchUrlOpenBlank?: boolean; // 是否在新窗口打开搜索页面，默认为 true
-  searchTextMobile?: string; // 手机端搜索按钮文字，默认为搜索
-}
-
-export interface OHeaderSearchEmitsT {
-  (e: 'update:modelValue', value: string): void;
-  (e: 'update:historyItems', value: string[]): void;
-  (e: 'clear'): void;
-  (e: 'search', value: string): void;
-  (e: 'delete-history', value: string[]): void;
-  (e: 'delete-history-item', value: string): void;
-}
-const { lePadV } = useScreen();
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
-  modelValue: '',
-  expandDirection: 'left',
-  clearable: true,
-  historyItems: () => [],
-  maxHistoryCount: 6,
-  storeHistory: false,
-  storageKey: 'search-history',
-  hotItems: () => [],
-  recommendItems: () => [],
-  searchUrlOpenBlank: true,
-});
-
-const emit = defineEmits<OHeaderSearchEmitsT>();
-
-const searchInput = ref(props.modelValue);
-const searchHistoryItems = ref(props.historyItems);
-const isShowDrawer = ref(false);
-const inputRef = ref();
-
-const isShowClearIcon = computed(() => {
-  return (!lePadV.value && isShowDrawer.value) || (lePadV.value && searchInput.value);
-});
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (searchInput.value !== val) {
-      searchInput.value = val;
-    }
-  }
-);
-
-watch(
-  () => searchInput.value,
-  (val) => {
-    emit('update:modelValue', val);
-  }
-);
-
-watch(
-  () => props.historyItems,
-  (val) => {
-    if (searchHistoryItems.value !== val) {
-      searchHistoryItems.value = val;
-    }
-  }
-);
-
-watch(
-  () => searchHistoryItems.value,
-  (val) => {
-    emit('update:historyItems', val);
-  }
-);
-
-onMounted(() => {
-  if (props.storeHistory && props.storageKey) {
-    try {
-      const history = JSON.parse(localStorage.getItem(props.storageKey) || '[]');
-      if (Array.isArray(history) && history.length) {
-        searchHistoryItems.value = Array.from(new Set([...searchHistoryItems.value, ...history]));
-      }
-    } catch {
-      // nothing
-    }
-  }
-});
-
-const onShowDrawer = () => {
-  isShowDrawer.value = true;
-};
-
-const onSearch = () => {
-  const input = searchInput.value.trim();
-  if (!input) {
-    return;
-  }
-
-  isShowDrawer.value = false;
-  searchHistoryItems.value.unshift(input);
-  searchHistoryItems.value = Array.from(new Set(searchHistoryItems.value));
-  if (searchHistoryItems.value.length > props.maxHistoryCount) {
-    searchHistoryItems.value.pop();
-  }
-
-  if (props.storeHistory && props.storeHistory) {
-    localStorage.setItem(props.storageKey, JSON.stringify(searchHistoryItems.value));
-  }
-  emit('search', input);
-
-  if (props.searchUrl) {
-    window.open(props.searchUrl + input, props.searchUrlOpenBlank ? '_blank' : '_self', 'noopener noreferrer');
-  }
-};
-
-const onClear = () => {
-  searchInput.value = '';
-  emit('clear');
-  if (!lePadV.value) {
-    isShowDrawer.value = false;
-  }
-};
-
-const onDeleteHistory = () => {
-  const history = [...searchHistoryItems.value];
-  searchHistoryItems.value = [];
-  if (props.storeHistory && props.storeHistory) {
-    localStorage.removeItem(props.storageKey);
-  }
-
-  emit('delete-history', history);
-};
-
-const onDeleteHistoryItem = (val: string) => {
-  searchHistoryItems.value = searchHistoryItems.value.filter((item) => item !== val);
-  if (props.storeHistory && props.storeHistory) {
-    if (searchHistoryItems.value.length) {
-      localStorage.setItem(props.storageKey, JSON.stringify(searchHistoryItems.value));
-    } else {
-      localStorage.removeItem(props.storageKey);
-    }
-  }
-
-  emit('delete-history-item', val);
-};
-
-const onWordSearch = (val: string) => {
-  searchInput.value = val;
-  onSearch();
-};
-
-const onBack = () => {
-  searchInput.value = '';
-  isShowDrawer.value = false;
-};
-
-const posWrapper = ref();
-onClickOutside(posWrapper, onClear);
-</script>
-
-<template>
-  <div class="o-header-search">
-    <div
-      ref="posWrapper"
-      :class="{
-        'o-header-search-input-pc-wrapper': !lePadV,
-        'o-header-search-input-pc-wrapper-left': !lePadV && expandDirection === 'left',
-        'o-header-search-input-pc-wrapper-right': !lePadV && expandDirection === 'right',
-        'o-header-search-input-mobile-wrapper': lePadV,
-        focus: isShowDrawer,
-      }"
-    >
-      <div class="o-header-search-input-wrapper" :class="{ focus: isShowDrawer }">
-        <OIcon v-if="lePadV && isShowDrawer" class="o-header-search-icon" @click="onBack">
-          <IconBack />
-        </OIcon>
-
-        <OInput
-          ref="inputRef"
-          v-model="searchInput"
-          class="o-header-search-input"
-          :placeholder="isShowDrawer ? expandedPlaceholder ?? t('search.expandedPlaceholder') : placeholder ?? t('search.placeholder')"
-          @focus="onShowDrawer"
-          @keyup.enter="onSearch"
-        >
-          <template #prefix>
-            <slot name="input-prefix">
-              <OIcon class="o-header-search-icon">
-                <IconSearch />
-              </OIcon>
-            </slot>
-          </template>
-
-          <template #suffix>
-            <slot name="input-suffix">
-              <OIcon v-if="clearable && isShowClearIcon" class="o-header-search-icon close" @click="onClear">
-                <IconClose />
-              </OIcon>
-            </slot>
-          </template>
-        </OInput>
-
-        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="onSearch">{{ searchTextMobile ?? t('search') }}</span>
-      </div>
-
-      <div v-show="isShowDrawer" class="o-header-search-drawer">
-        <slot name="drawer" :recommend-items="recommendItems" :history-items="searchHistoryItems" :hot-items="hotItems">
-          <!-- 搜索推荐 -->
-          <div v-if="recommendItems.length" class="o-header-search-recommend-container">
-            <slot name="recommend-header" :recommend="recommendItems" />
-            <slot name="recommend-content" :recommend="recommendItems">
-              <div v-for="item in recommendItems" class="o-header-search-recommend-item" :key="item" @click="onWordSearch(item)">
-                {{ item }}
-              </div>
-            </slot>
-          </div>
-
-          <!-- 历史记录 -->
-          <div v-else-if="searchHistoryItems.length" class="o-header-search-history-container">
-            <slot name="history-header" :history="searchHistoryItems">
-              <div class="o-header-search-history-header">
-                <span class="o-header-search-history-header-title">{{ historyTitle ?? t('search.history') }}</span>
-                <OIcon class="o-header-search-icon" @click="onDeleteHistory">
-                  <IconDeleteAll />
-                </OIcon>
-              </div>
-            </slot>
-
-            <slot name="history-content" :history="searchHistoryItems">
-              <div class="o-header-search-history-item-container">
-                <div v-for="item in searchHistoryItems" :key="item" class="o-header-search-history-item" @click="onWordSearch(item)">
-                  <span class="o-header-search-history-item-text">{{ item }}</span>
-                  <OIcon class="o-header-search-history-item-icon" @click.stop="onDeleteHistoryItem(item)">
-                    <IconDelete class="icon-delete" />
-                  </OIcon>
-                </div>
-              </div>
-            </slot>
-          </div>
-
-          <ODivider v-if="(recommendItems.length || searchHistoryItems.length) && hotItems.length" class="o-header-search-drawer-divider" />
-
-          <!-- 热门搜索 -->
-          <div v-if="hotItems.length" class="o-header-search-hot-container">
-            <slot name="hot-header" :hot="hotItems">
-              <div class="o-header-search-hot-header">{{ hotTitle ?? t('search.hot') }}</div>
-            </slot>
-
-            <slot name="hot-content" :hot="hotItems">
-              <div class="o-header-search-hot-item-container">
-                <div v-for="item in hotItems" :key="item" class="o-header-search-hot-item" @click="onWordSearch(item)">{{ item }}</div>
-              </div>
-            </slot>
-          </div>
-        </slot>
-      </div>
-    </div>
-
-    <OIcon v-if="lePadV" class="o-header-search-icon-mobile" @click="onShowDrawer">
-      <IconSearch />
-    </OIcon>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-header-search {
-  position: relative;
-  width: 160px;
-  height: 32px;
-
-  @include respond-to('<=laptop') {
-    width: 120px;
-  }
-
-  @media screen and (max-width: 1080px) {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.o-header-search-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  @include h4;
-
-  @include respond-to('<=pad_v') {
-    font-size: 20px;
-  }
-
-  .close {
-    @include x-svg-hover;
-  }
-}
-
-.o-header-search-icon-mobile {
-  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-input-pc-wrapper {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: fit-content;
-  background-color: var(--o-color-fill2);
-  z-index: 100;
-}
-
-.o-header-search-input-pc-wrapper-left {
-  right: 0;
-}
-
-.o-header-search-input-pc-wrapper-right {
-  left: 0;
-}
-
-.o-header-search-input-pc-wrapper.focus {
-  box-shadow: var(--o-shadow-2);
-  top: calc(-1 * var(--o-gap-4));
-}
-
-.o-header-search-input-mobile-wrapper {
-  display: none;
-}
-
-.o-header-search-input-mobile-wrapper.focus {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
-  height: 100vh;
-  background-color: var(--o-color-fill2);
-  z-index: 100;
-  overflow: hidden;
-}
-
-.o-header-search-input-wrapper {
-  .o-header-search-input {
-    width: 160px;
-    transition: width var(--o-easing-standard-in) var(--o-duration-m2);
-
-    @include respond-to('<=laptop') {
-      width: 120px;
-    }
-  }
-}
-
-.o-header-search-input-wrapper.focus {
-  padding: var(--o-gap-4);
-
-  @include respond-to('<=pad_v') {
-    display: flex;
-    align-items: center;
-    gap: var(--o-gap-4);
-    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
-  }
-
-  .o-header-search-input {
-    width: 480px;
-
-    @include respond-to('<=laptop') {
-      width: 240px;
-    }
-
-    @include respond-to('<=pad_v') {
-      flex: 1;
-    }
-  }
-}
-
-.o-header-search-icon.close {
-  @include x-svg-hover;
-}
-
-.o-header-search-drawer {
-  position: absolute;
-  width: 100%;
-  padding: var(--o-gap-5);
-  padding-top: var(--o-gap-2);
-  background-color: var(--o-color-fill2);
-  box-shadow: var(--o-shadow-2);
-
-  @include respond-to('<=pad_v') {
-    position: static;
-    height: calc(100vh - 50px);
-    padding-top: 0;
-    overflow-y: auto;
-    box-shadow: unset;
-  }
-}
-
-.o-header-search-drawer::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -14px;
-  height: 14px;
-  background-color: var(--o-color-fill2);
-  box-shadow: unset;
-
-  @include respond-to('<=laptop') {
-    top: -10px;
-    height: 10px;
-  }
-
-  @include respond-to('<=pad') {
-    top: -8px;
-    height: 8px;
-  }
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.o-header-search-recommend-container {
-  color: var(--o-color-info1);
-  margin-bottom: var(--o-gap-3);
-}
-
-.o-header-search-recommend-item {
-  cursor: pointer;
-  @include tip2;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-
-  @include respond-to('<=pad_v') {
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  & + & {
-    margin-top: var(--o-gap-3);
-  }
-}
-
-.o-header-search-history-container {
-  @include respond-to('<=pad_v') {
-    margin-bottom: var(--o-gap-5);
-  }
-}
-
-.o-header-search-history-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.o-header-search-history-header-title {
-  @include tip2;
-  color: var(--o-color-info3);
-
-  @include respond-to('<=pad_v') {
-    @include text2;
-    color: var(--o-color-info1);
-  }
-}
-
-.o-header-search-history-item-container {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: var(--o-gap-2);
-}
-
-.o-header-search-history-item-icon {
-  position: absolute;
-  right: -8px;
-  top: -8px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: rgb(var(--o-mixedgray-9));
-
-  .icon-delete {
-    height: 16px;
-    width: 16px;
-    color: var(--o-color-white);
-  }
-}
-
-.o-header-search-history-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  max-width: 224px;
-  height: 24px;
-  padding: 0 var(--o-gap-3);
-  background-color: var(--o-color-fill3);
-  border-radius: var(--o-radius-xs);
-  cursor: pointer;
-
-  @include hover {
-    background-color: var(--o-color-control2-light);
-    color: var(--o-color-primary1);
-
-    .o-header-search-history-item-icon {
-      display: flex;
-    }
-  }
-}
-
-.o-header-search-history-item-text {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include tip2;
-
-  @include respond-to('<=pad_v') {
-    @include text1;
-  }
-}
-
-.o-header-search-drawer-divider {
-  --o-divider-gap: var(--o-gap-4);
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.o-header-search-hot-header {
-  color: var(--o-color-info3);
-  @include tip2;
-
-  @include respond-to('<=pad_v') {
-    margin-bottom: var(--o-gap-3);
-    @include text2;
-  }
-}
-
-.o-header-search-hot-item-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--o-gap-4);
-  margin-top: var(--o-gap-3);
-  @include tip2;
-
-  @include respond-to('<=pad_v') {
-    flex-direction: column;
-    gap: 12px;
-    font-size: 12px;
-    line-height: 18px;
-  }
-}
-
-.o-header-search-hot-item {
-  color: var(--o-color-info1);
-  cursor: pointer;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-}
-
-.o-header-search-text {
-  font-size: 16px;
-  line-height: 24px;
-}
-</style>