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

package/src/components/header/types.ts

@@ -1,96 +0,0 @@
-type tagT = 'HOT' | 'NEW';
-
-export enum NavType {
-  NAV = 'nav',
-  CODE = 'code',
-  LANG = 'lang',
-}
-
-export interface ChildrenItemT {
-  label: string; // 标题
-  description?: string; // 描述
-  href?: string; // 链接
-  tag?: tagT; // 标签
-  icon?: any;
-  target?: string;
-  children?: ChildrenItemT[];
-}
-
-export interface ShortcutItemT {
-  label: string; // 标题
-  description?: string; // 描述
-  picture?: string; // 缩略图
-  href?: string; // 链接
-  tag?: tagT; // 标签
-  remark?: string; // 时间
-  type?: string; // 类型
-  target?: string;
-  icon?: string;
-}
-
-export interface NavItemT {
-  label: string; // 标题
-  id: string; // id
-  href?: string; // 链接
-  withPicture: boolean; // 快捷链接是否显示缩略图
-  children: ChildrenItemT[]; // 导航子项
-  shortcut: ShortcutItemT[]; // 右侧快捷链接
-  tag?: string; // 标签
-}
-
-export interface CodeItemT {
-  label: string; // 标题
-  href: string; // 链接
-  icon?: string; // icon
-}
-
-export interface LangItemT {
-  id: string; // id
-  label: string; // 全称
-  simple: string; // 简写
-}
-
-export interface CodeT {
-  label: string; // 标题
-  list: CodeItemT[]; // 代码仓数据
-}
-
-export interface LangT {
-  label: string; // 标题
-  list: LangItemT[]; // 语言数据
-}
-
-export interface NavT {
-  logo: string; // 社区logo
-  community: string; // 社区 openEuler/openUBMC/mindspore
-  navData: NavItemT[];
-  bgLeft?: string; // 导航左侧背景插图
-  bgRight?: string; // 导航右侧背景插图
-  activeIndex: string | number; // 激活态
-  codeData?: CodeT[]; // 导航右侧代码仓数据
-  langData?: LangT[]; // 导航右侧语言数据
-  isSimpleHeader?: boolean; // 移动端二级导航
-  headerTitle?: string; // 移动端二级标题
-}
-
-export interface NavLiT {
-  navData: NavItemT[];
-  activeIndex: string | number; // 激活态
-  hoverId: string | number; // hover态
-}
-
-export interface NavLiItemT {
-  itemData: NavItemT;
-  itemVisible: boolean; // 下拉面板
-  community: string; // 社区 openEuler/openUBMC/mindspore
-  bgLeft?: string; // 导航左侧背景插图
-  bgRight?: string; // 导航右侧背景插图
-  hoverIndex: string | number; // hover态
-}
-
-export interface NavMobileItemT {
-  menuShow: boolean; // 展开导航
-  navData: NavItemT[];
-  codeData?: CodeT[]; // 导航右侧代码仓数据
-  langData?: LangT[]; // 导航右侧语言数据
-}

package/src/components/header-language-switcher/OHeaderLanguageSwitcher.vue

@@ -1,253 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useLocale, useScreen } from '@opendesign-plus/composables';
-import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
-
-import IconLocale from '~icons/components/icon-locale.svg';
-
-export interface LanguageOptionT {
-  id: string;
-  label: string;
-  simple: string;
-}
-
-const props = defineProps({
-  options: {
-    type: Array as () => LanguageOptionT[],
-    default() {
-      return [
-        { id: 'zh', label: '简体中文', simple: '中' },
-        { id: 'en', label: 'English', simple: 'EN'  },
-      ];
-    },
-  },
-  type: {
-    type: String as () => 'auto' | 'common' | 'mobile',
-    default: 'auto',
-  },
-  auto: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { changeLocale, locale } = useLocale();
-
-const { lePadV } = useScreen();
-const lang = computed(() => {
-  return locale.value;
-});
-
-
-// 选择语言
-const emits = defineEmits(['change']);
-const changeLanguage = (newlang: LanguageOptionT) => {
-  if (props.auto) {
-    changeLocale();
-  }
-  emits('change', newlang);
-};
-
-const getLang = (lang: String, simple?: boolean) => {
-  const item = props.options.find((el: LanguageOptionT) => el.id === lang);
-  if (item) {
-    return simple ? item.simple : item.label;
-  }
-
-  const defaultLang = props.options[0];
-  return simple ? defaultLang.simple : defaultLang.label;
-};
-
-const isCommon = computed(() => {
-  return props.type === 'common' || (props.type === 'auto' && !lePadV.value);
-});
-</script>
-
-<template>
-  <div
-    v-if="isCommon"
-    :class="[options.length <= 1 ? 'hide-lang' : 'header-lang', disabled ? 'is-disabled' : '']"
-  >
-    <ODropdown
-      trigger="hover"
-      optionPosition="bottom"
-      :optionWrapClass="{
-        'dropdown':true,
-        'is-disabled': disabled,
-      }"
-    >
-      <div class="info-wrap">
-        <OIcon class="icon">
-          <IconLocale />
-          <div :class="['locale-tag', { 'is-en': lang === 'en' }]">{{ getLang(lang, true) }}</div>
-        </OIcon>
-      </div>
-
-      <template #dropdown>
-        <ODropdownItem
-          v-for="item in options"
-          @click="changeLanguage(item)"
-          :key="item.id"
-          :class="['list', { 'is-active': lang === item.id }]"
-        >
-          {{ getLang(item.id) }}
-        </ODropdownItem>
-      </template>
-    </ODropdown>
-  </div>
-
-  <div
-    v-else
-    :class="[options.length <= 1 ? 'hide-lang' : 'mobile-change-language', disabled ? 'is-disabled' : '']"
-  >
-    <span
-      v-for="item in options"
-      :key="item.id"
-      :class="{ active: lang === item.id }"
-      @click.stop="changeLanguage(item)"
-      >{{ getLang(item.id, true) }}</span
-    >
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.hide-lang {
-  display: none;
-}
-
-.header-lang {
-  height: calc(100% + 10px);
-  display: flex;
-  align-items: center;
-
-  .info-wrap {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    .icon {
-      font-size: var(--o-icon_size_control-m);
-      position: relative;
-      color: var(--o-color-info1);
-
-      &:hover {
-        color: var(--o-color-primary1);
-      }
-    }
-    .locale-tag {
-      position: absolute;
-      font-size: 10px;
-      height: 12px;
-      width: 12px;
-      background-color: var(--o-color-fill2);
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      left: 12px;
-      top: 11px;
-
-      &.is-en {
-        width: 16px;
-      }
-    }
-  }
-
-  &.is-disabled {
-    .info-wrap {
-      color: var(--o-color-info4);
-      cursor: not-allowed;
-
-      &:hover {
-        color: var(--o-color-info4);
-      }
-
-      .o-icon {
-        color: inherit;
-      }
-    }
-  }
-  .list {
-    background: var(--o-color-fill2);
-    cursor: pointer;
-    box-shadow: var(--o-shadow-1);
-    border-radius: var(--o-radius_control-xs);
-    padding: var(--o-gap-1);
-    width: 144px;
-  }
-}
-
-.o-dropdown {
-  height: 100%;
-}
-.o-dropdown-item {
-  background: var(--o-color-fill2);
-  cursor: pointer;
-  border-radius: var(--o-radius_control-xs);
-  padding: var(--o-gap-1);
-  min-width: 144px;
-  height: 40px;
-  color: var(--o-color-info1);
-
-  @include hover {
-    background: var(--o-color-control2-light);
-  }
-
-  &.is-active {
-    color: var(--o-color-primary1);
-    background: var(--o-color-control3-light);
-  }
-}
-.dropdown {
-  --dropdown-list-radius: var(--o-radius-xs);
-}
-
-.mobile-change-language {
-  display: flex;
-  align-items: center;
-  height: 36px;
-  span {
-    color: var(--o-color-info1);
-    margin-right: var(--o-gap-1);
-    text-align: center;
-    @include text1;
-    cursor: pointer;
-    &.active {
-      color: var(--o-color-primary1);
-      font-weight: 500;
-    }
-    &:not(:last-child) {
-      &:after {
-        content: '|';
-        margin-left: var(--o-gap-1);
-        color: var(--o-color-info1);
-      }
-    }
-  }
-
-  &.is-disabled {
-    span {
-      color: var(--o-color-info4);
-      cursor: not-allowed;
-      @include hover {
-        color: var(--o-color-info4);
-      }
-
-      &:after {
-        color: inherit;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.o-dropdown-list.is-disabled {
-  display: none;
-}
-</style>

package/src/components/header-language-switcher/index.ts

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