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

package/src/components/search/internal/SearchPanel.vue

@@ -1,431 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { OIcon } from '@opensig/opendesign';
-import IconDelete from '~icons/components/icon-delete-hover.svg';
-import IconDeleteAll from '~icons/components/icon-delete.svg';
-import IconRefresh from '~icons/components/icon-refresh.svg';
-import HighlightText from './HighlightText.vue';
-import { useI18n } from '@/i18n';
-import type { 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';
-}
-
-const props = withDefaults(defineProps<SearchPanelPropsT>(), {
-  keyword: '',
-  onestepItems: () => [],
-  suggestItems: () => [],
-  recommendItems: () => [],
-  historyItems: () => [],
-  hotItems: () => [],
-  highlightKeyword: true,
-  hideOnKeyword: false,
-  showSuggestEmpty: false,
-  isDark: false,
-  historyLayout: 'chips',
-});
-
-const emit = defineEmits<{
-  (e: 'onestep-click', item: OSearchRecommendItem): void;
-  (e: 'suggest-click', item: OSearchRecommendItem): void;
-  (e: 'recommend-click', val: string): void;
-  (e: 'history-click', val: string): void;
-  (e: 'hot-click', val: string): void;
-  (e: 'history-remove', val: string): void;
-  (e: 'history-clear'): void;
-  (e: 'hot-refresh'): void;
-}>();
-
-const { t } = useI18n();
-
-const hasKeyword = computed(() => !!props.keyword?.trim());
-
-const showOnestep = computed(() => hasKeyword.value && props.onestepItems.length > 0);
-const showSuggest = computed(() => hasKeyword.value && (props.suggestItems.length > 0 || props.showSuggestEmpty));
-const showRecommend = computed(
-  () => !hasKeyword.value && props.recommendItems.length > 0
-);
-const showHistory = computed(
-  () => (!props.hideOnKeyword || !hasKeyword.value) && props.historyItems.length > 0
-);
-const showHot = computed(
-  () => (!props.hideOnKeyword || !hasKeyword.value) && props.hotItems.length > 0
-);
-
-const showSuggestDivider = computed(() => showOnestep.value && showSuggest.value);
-const showHistoryHotDivider = computed(() => showHistory.value && showHot.value);
-</script>
-
-<template>
-  <div class="o-search-panel">
-    <!-- ONESTEP / 搜索直达 -->
-    <div v-if="showOnestep" class="o-search-panel-section o-search-panel-onestep">
-      <slot name="onestep-header" :items="onestepItems">
-        <div class="o-search-panel-section-title onestep">{{ onestepTitle ?? t('search.onestep') }}</div>
-      </slot>
-      <slot name="onestep-content" :items="onestepItems" :keyword="keyword">
-        <div
-          v-for="item in onestepItems"
-          :key="item.key + (item.path ?? '')"
-          class="o-search-panel-item o-search-panel-onestep-item"
-          @click="emit('onestep-click', item)"
-        >
-          <HighlightText :text="item.key" :keyword="keyword" :enabled="highlightKeyword" />
-          <span v-if="item.type" class="o-search-panel-onestep-tag">{{ item.type }}</span>
-        </div>
-      </slot>
-    </div>
-
-    <div v-if="showSuggestDivider" class="o-search-panel-divider"></div>
-
-    <!-- SUGGEST / 搜索建议 (rich items) -->
-    <div v-if="showSuggest" class="o-search-panel-section o-search-panel-suggest">
-      <slot name="suggest-header" :items="suggestItems">
-        <div class="o-search-panel-section-title suggest">{{ suggestTitle ?? t('search.suggest') }}</div>
-      </slot>
-      <slot name="suggest-content" :items="suggestItems" :keyword="keyword">
-        <template v-if="suggestItems.length">
-          <div
-            v-for="item in suggestItems"
-            :key="item.key"
-            class="o-search-panel-item"
-            @click="emit('suggest-click', item)"
-          >
-            <HighlightText :text="item.key" :keyword="keyword" :enabled="highlightKeyword" />
-          </div>
-        </template>
-        <div v-else class="o-search-panel-no-data">{{ noDataText ?? t('search.noData') }}</div>
-      </slot>
-    </div>
-
-    <!-- RECOMMEND (legacy plain string list, shown when no keyword) -->
-    <div v-if="showRecommend" class="o-search-panel-section o-search-panel-recommend">
-      <slot name="recommend-header" :items="recommendItems" />
-      <slot name="recommend-content" :items="recommendItems">
-        <div
-          v-for="item in recommendItems"
-          :key="item"
-          class="o-search-panel-recommend-item"
-          @click="emit('recommend-click', item)"
-        >
-          {{ item }}
-        </div>
-      </slot>
-    </div>
-
-    <!-- HISTORY / 历史记录 -->
-    <div v-if="showHistory" class="o-search-panel-section o-search-panel-history">
-      <slot name="history-header" :items="historyItems">
-        <div class="o-search-panel-common-header">
-          <span class="o-search-panel-section-title">{{ historyTitle ?? t('search.history') }}</span>
-          <OIcon v-if="historyLayout !== 'list'" class="o-search-panel-icon" @click.stop="emit('history-clear')">
-            <IconDeleteAll />
-          </OIcon>
-        </div>
-      </slot>
-      <slot name="history-content" :items="historyItems">
-        <!-- list layout: full-width rows, no delete icon -->
-        <template v-if="historyLayout === 'list'">
-          <div
-            v-for="item in historyItems"
-            :key="item"
-            class="o-search-panel-history-row"
-            @click="emit('history-click', item)"
-          >
-            <span class="o-search-panel-history-row-text">{{ item }}</span>
-          </div>
-        </template>
-        <!-- chips layout (default): tag-cloud -->
-        <template v-else>
-          <div class="o-search-panel-history-list">
-            <div
-              v-for="item in historyItems"
-              :key="item"
-              class="o-search-panel-history-item"
-              :class="{ 'is-dark': isDark }"
-              @click="emit('history-click', item)"
-            >
-              <span class="o-search-panel-history-text">{{ item }}</span>
-              <OIcon class="o-search-panel-history-remove" @click.stop="emit('history-remove', item)">
-                <IconDelete />
-              </OIcon>
-            </div>
-          </div>
-        </template>
-      </slot>
-    </div>
-
-    <div v-if="showHistoryHotDivider" class="o-search-panel-divider"></div>
-
-    <!-- HOT / 热门搜索 -->
-    <div v-if="showHot" class="o-search-panel-section o-search-panel-hot">
-      <slot name="hot-header" :items="hotItems">
-        <div class="o-search-panel-common-header">
-          <div class="o-search-panel-section-title">{{ hotTitle ?? t('search.hot') }}</div>
-          <OIcon class="o-search-panel-icon" @click.stop="emit('hot-refresh')">
-            <IconRefresh />
-          </OIcon>
-        </div>
-      </slot>
-      <slot name="hot-content" :items="hotItems">
-        <div class="o-search-panel-hot-list">
-          <div
-            v-for="item in hotItems"
-            :key="item"
-            class="o-search-panel-hot-item"
-            @click="emit('hot-click', item)"
-          >
-            {{ item }}
-          </div>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-search-panel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--o-gap-4);
-}
-
-.o-search-panel-section + .o-search-panel-section {
-  // sections rely on explicit dividers / gap from parent
-}
-
-.o-search-panel-section-title {
-
-  &.suggest,
-  &.onestep {
-    margin-bottom: var(--o-gap-3);
-  }
-
-  @include tip1;
-  color: var(--o-color-info3);
-  font-weight: 400;
-
-  @include respond-to('<=pad_v') {
-    color: var(--o-color-info1);
-    @include text2;
-  }
-}
-
-.o-search-panel-item {
-  @include tip1;
-  padding: 5px var(--o-gap-3);
-  cursor: pointer;
-  color: var(--o-color-info1);
-  border-radius: var(--o-radius-xs);
-  margin: 0 calc(-1 * var(--o-gap-3));
-
-  &:hover {
-    background-color: var(--o-color-control2-light);
-  }
-
-  &:active {
-    background-color: var(--o-color-control3-light);
-  }
-
-  @include respond-to('<=pad_v') {
-    @include text1;
-  }
-}
-
-.o-search-panel-onestep-item {
-  display: flex;
-  align-items: center;
-  white-space: pre-wrap;
-}
-
-.o-search-panel-onestep-tag {
-  @include tip2;
-  height: 20px;
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border-radius: 4px;
-  font-weight: 400;
-  margin-left: 8px;
-  border: 1px solid var(--o-color-control4);
-  color: var(--o-color-info3);
-}
-
-.o-search-panel-no-data {
-  @include tip2;
-  color: var(--o-color-info3);
-  padding: 0 8px;
-
-  @include respond-to('<=pad_v') {
-    @include text1;
-  }
-}
-
-.o-search-panel-recommend-item {
-  @include tip1;
-  padding: 5px 8px;
-  cursor: pointer;
-  color: var(--o-color-info1);
-  border-radius: var(--o-radius-xs);
-
-  &:hover {
-    background-color: var(--o-color-control2-light);
-  }
-}
-
-.o-search-panel-divider {
-  background: var(--o-color-control4);
-  width: 100%;
-  height: 1px;
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-}
-
-.o-search-panel-common-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.o-search-panel-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 16px;
-
-  &:hover {
-    color: var(--o-color-primary1);
-  }
-}
-
-.o-search-panel-history-list {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: var(--o-gap-3);
-}
-
-// ---- chips layout ----
-.o-search-panel-history-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  max-width: 224px;
-  height: 24px;
-  padding: 3px var(--o-gap-3);
-  background-color: var(--o-color-control2-light);
-  border-radius: var(--o-radius-xs);
-  color: var(--o-color-info1);
-  cursor: pointer;
-
-  @include hover {
-    background-color: var(--o-color-control3-light);
-    color: var(--o-color-primary1);
-
-    .o-search-panel-history-remove {
-      display: inline-flex;
-    }
-  }
-
-  &.is-dark {
-    @include hover {
-      background-color: rgb(var(--o-mixedgray-7));
-    }
-  }
-
-  @include respond-to('<=pad_v') {
-    height: 28px;
-  }
-}
-
-.o-search-panel-history-text {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include tip2;
-
-  @include respond-to('<=pad_v') {
-    @include text1;
-  }
-}
-
-.o-search-panel-history-remove {
-  position: absolute;
-  right: -8px;
-  top: -8px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-
-  :deep(svg) {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-// ---- list layout ----
-.o-search-panel-history-row {
-  padding: 4px 8px;
-  border-radius: var(--o-radius-xs);
-  cursor: pointer;
-  color: var(--o-color-info1);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include tip1;
-
-  @include hover {
-    background-color: var(--o-color-control2-light);
-    color: var(--o-color-primary1);
-  }
-}
-
-.o-search-panel-hot-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--o-gap-3) var(--o-gap-4);
-  margin-top: var(--o-gap-3);
-  @include tip1;
-
-  @include respond-to('<=pad_v') {
-    display: block;
-    @include text1;
-  }
-}
-
-.o-search-panel-hot-item {
-  color: var(--o-color-info1);
-  cursor: pointer;
-
-  @include respond-to('<=pad_v') {                                                     
-    margin-top: var(--o-gap-3);                                                        
-  }  
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-}
-</style>

package/src/components/section/OSection.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { isArray, OLink, OIcon } from '@opensig/opendesign';
-import IconChevronRight from '~icons/components/icon-chevron-right.svg';
-
-export interface SectionPropsT {
-  title?: string | Array<string>;
-  subtitle?: string;
-  full?: boolean;
-  headerJustifyCenter?: boolean;
-  footer?: string;
-  footerHref?: string;
-}
-
-const props = withDefaults(defineProps<SectionPropsT>(), {
-  title: undefined,
-  subtitle: undefined,
-  full: false,
-  headerJustifyCenter: true,
-  footer: undefined,
-  footerHref: undefined,
-});
-</script>
-
-<template>
-  <div class="app-section" :class="{ 'is-full': props.full }">
-    <div class="section-wrapper">
-      <slot name="main">
-        <!-- header -->
-        <div v-if="$slots.header || props.title || props.subtitle" class="section-header" :class="{ 'is-left': !props.headerJustifyCenter }">
-          <slot name="header">
-            <template v-if="isArray(props.title)">
-              <h2 v-for="item in props.title" :key="item" class="section-title">
-                {{ item }}
-              </h2>
-            </template>
-            <h2 v-else-if="$slots.title || props.title" class="section-title">
-              <slot name="title">
-                {{ props.title }}
-              </slot>
-            </h2>
-            <p v-if="$slots.subtitle || props.subtitle" class="section-subtitle">
-              <slot name="subtitle">
-                {{ props.subtitle }}
-              </slot>
-            </p>
-          </slot>
-        </div>
-
-        <!-- body -->
-        <div v-if="$slots.default" class="section-body">
-          <slot></slot>
-        </div>
-
-        <!-- footer -->
-        <div v-if="$slots.footer || props.footer" class="section-footer">
-          <slot name="footer">
-            <OLink :href="props.footerHref" target="_blank">
-              {{ props.footer }}
-              <template #suffix>
-                <OIcon class="footer-icon"><IconChevronRight /> </OIcon>
-              </template>
-            </OLink>
-          </slot>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-section {
-  --o-gap-section: var(--o-gap-7);
-  .section-wrapper {
-    margin: var(--o-gap-section) auto 0;
-  }
-
-  &.is-full {
-    .section-body {
-      max-width: 100%;
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  &:last-child {
-    .section-wrapper {
-      padding-bottom: var(--o-gap-section);
-    }
-  }
-
-  .section-header {
-    &.is-left {
-      .section-title,
-      .section-subtitle {
-        justify-content: start;
-      }
-    }
-  }
-
-  .section-title {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    color: var(--o-color-info1);
-    text-align: center;
-    @include display3;
-    font-weight: 500;
-  }
-
-  .section-subtitle {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    color: var(--o-color-info2);
-    @include text1;
-
-    @include respond('pad-laptop') {
-      margin-top: 8px;
-    }
-
-    @include respond('phone') {
-      margin-top: 12px;
-      text-align: center;
-    }
-  }
-
-  .section-body {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    margin-top: var(--o-gap-7);
-  }
-
-  .section-footer {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-    color: var(--o-color-info1);
-
-    display: flex;
-    justify-content: center;
-    @include text1;
-
-    margin-top: 32px;
-
-    :deep(.o-btn) {
-      border-radius: var(--btn-height);
-    }
-
-    @include respond('<=laptop') {
-      margin-top: 16px;
-    }
-
-    @include respond('phone') {
-      margin-top: 12px;
-    }
-
-    &:hover {
-      .footer-icon {
-        fill: var(--link-color-active);
-      }
-    }
-  }
-
-  .footer-icon {
-    font-size: 16px;
-    height: 24px;
-  }
-}
-</style>

package/src/components/section/index.ts

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