@opendesign-plus/components 0.0.1-rc.16

package/src/components/OHeaderSearch.vue

@@ -0,0 +1,601 @@
+<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>