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

package/src/components/header/OHeader.vue

@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import ContentWrapper from '../common/ContentWrapper.vue';
-import HeaderNav from './components/HeaderNav.vue';
-import HeaderContent from './components/HeaderContent.vue';
-
-import { type NavT } from './types.ts';
-
-import { useTheme } from '@opendesign-plus/composables';
-
-const { isDark } = useTheme();
-
-export interface OHeaderT {
-  (e: 'go-home'): void;
-  (e: 'handle-click', val: any): void;
-}
-
-const emit = defineEmits<OHeaderT>();
-
-const props = defineProps<NavT>();
-
-const hoverIndex = ref();
-const hoverId = ref();
-const itemData = ref();
-const itemVisible = ref(false);
-
-const goHome = () => {
-  emit('go-home');
-};
-const handleMouseenter = (val: any) => {
-  itemData.value = val;
-  hoverIndex.value = val.id;
-  if (val?.children?.length) {
-    itemVisible.value = true;
-  }
-};
-const handleMouseleave = () => {
-  itemVisible.value = false;
-};
-const handleClick = (val: any) => {
-  emit('handle-click', val);
-};
-
-const handleMouseenterSub = (val: string) => {
-  hoverId.value = val;
-};
-const handleMouseleaveSub = (val: string) => {
-  hoverId.value = val;
-};
-</script>
-
-<template>
-  <div class="header">
-    <div class="header-wrap" :class="{ 'header-wrap-dark': isDark }">
-      <ContentWrapper class="header-content">
-        <!-- logo -->
-        <div class="header-logo" @click="goHome">
-          <slot name="logo">
-            <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
-          </slot>
-        </div>
-        <!-- nav -->
-        <div class="header-nav">
-          <slot name="nav">
-            <HeaderNav
-              v-if="props.navData"
-              :nav-data="props.navData"
-              :hoverId="hoverId"
-              :active-index="props.activeIndex"
-              @handle-mouseenter="handleMouseenter"
-              @handle-mouseleave="handleMouseleave"
-              @handle-click="handleClick"
-            ></HeaderNav>
-          </slot>
-        </div>
-        <!-- toolbar -->
-        <div v-if="$slots.toolbar" class="header-toolbar">
-          <slot name="toolbar"></slot>
-        </div>
-      </ContentWrapper>
-    </div>
-    <div class="header-nav-content">
-      <HeaderContent
-        :itemData="itemData"
-        :item-visible="itemVisible"
-        :bg-left="props.bgLeft"
-        :bg-right="props.bgRight"
-        :community="props.community"
-        :hover-index="hoverIndex"
-        @handle-mouseenter-sub="handleMouseenterSub"
-        @handle-mouseleave-sub="handleMouseleaveSub"
-      ></HeaderContent>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  --o-header-height: 72px;
-}
-.header-wrap {
-  background-color: var(--o-color-fill2);
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
-  backdrop-filter: blur(5px);
-  height: var(--o-header-height);
-}
-.header-content {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-.header-logo {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin-right: 24px;
-  flex-shrink: 0;
-}
-.logo {
-  height: 32px;
-}
-.header-nav {
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-  overflow: hidden;
-  position: relative;
-}
-.header-toolbar {
-  height: 100%;
-  position: relative;
-}
-.header-nav-content {
-  position: fixed;
-  top: var(--o-header-height);
-  left: 0;
-  right: 0;
-  background: var(--o-color-fill2);
-  z-index: 998;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
-  overflow: hidden;
-}
-
-.header-wrap-dark {
-  box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
-  .header-nav-content {
-    box-shadow: 0 3px 9px 0 rgba(var(--o-grey-4), 0.08);
-  }
-}
-</style>

package/src/components/header/OHeaderMobile.vue

@@ -1,184 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
-
-import ContentWrapper from '../common/ContentWrapper.vue';
-import HeaderNavMobile from './components/HeaderNavMobile.vue';
-
-import type { NavT, LangItemT } from './types.ts';
-
-import IconClose from '~icons/components/icon-close.svg';
-import IconMenu from '~icons/components/icon-header-menu.svg';
-
-export interface OHeaderT {
-  (e: 'go-back'): void;
-  (e: 'lang-click', val: LangItemT): void;
-  (e: 'go-home'): void;
-}
-
-const emit = defineEmits<OHeaderT>();
-
-const props = defineProps<NavT>();
-
-const goBack = () => {
-  emit('go-back');
-};
-const goHome = () => {
-  emit('go-home');
-};
-
-const menuShow = ref(false);
-const menuPanel = () => {
-  setTimeout(() => {
-    menuShow.value = !menuShow.value;
-  }, 200);
-};
-
-const mobileClick = () => {
-  menuPanel();
-};
-
-const handleClick = () => {
-  menuPanel();
-};
-
-const langClick = (val: LangItemT) => {
-  emit('lang-click', val);
-  menuPanel();
-};
-</script>
-
-<template>
-  <div class="header">
-    <div class="header-box">
-      <ContentWrapper class="header-wrap">
-        <!-- 二级路由简单头部 -->
-        <div v-if="isSimpleHeader" class="header-simple">
-          <div class="simple-header-left">
-            <OIcon @click="goBack">
-              <OIconArrowLeft />
-            </OIcon>
-            <div v-if="headerTitle" class="header-title">
-              {{ headerTitle }}
-            </div>
-          </div>
-          <div v-if="$slots.rightConfig" class="simple-header-right">
-            <slot name="rightConfig"></slot>
-          </div>
-        </div>
-        <template v-else>
-          <div class="header-left">
-            <OIcon @click="menuPanel">
-              <IconMenu v-if="!menuShow" />
-              <IconClose v-else />
-            </OIcon>
-          </div>
-          <div class="header-center">
-            <div class="header-logo" @click="goHome">
-              <slot name="logo">
-                <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
-              </slot>
-            </div>
-          </div>
-          <div class="header-right">
-            <slot name="toolbar"></slot>
-          </div>
-        </template>
-      </ContentWrapper>
-    </div>
-    <div class="header-content-mb" :class="{ 'header-content-active': menuShow }">
-      <HeaderNavMobile
-        ref="mobileNav"
-        :nav-data="navData"
-        :code-data="codeData"
-        :lang-data="langData"
-        :menu-show="menuShow"
-        @handle-click="handleClick"
-        @on-click="mobileClick"
-        @lang-click="langClick"
-      >
-        <template #tool>
-          <slot name="tool"></slot>
-        </template>
-      </HeaderNavMobile>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  --o-header-height: 56px;
-}
-.header-box {
-  background-color: var(--o-color-fill2);
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
-  backdrop-filter: blur(5px);
-}
-.header-wrap {
-  display: flex;
-  align-items: center;
-  height: var(--o-header-height);
-  justify-content: space-between;
-  position: relative;
-}
-.header-simple {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .o-icon {
-    font-size: 24px;
-  }
-  .simple-header-left {
-    display: flex;
-    gap: 16px;
-    color: var(--o-color-info1);
-    overflow: hidden;
-    flex-grow: 1;
-    .header-title {
-      color: var(--o-color-info1);
-      font-weight: 500;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      @include text2;
-    }
-  }
-  .simple-header-right {
-    flex-shrink: 0;
-    color: var(--o-color-info1);
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  .o-icon {
-    --icon-size: 24px;
-  }
-}
-.logo {
-  height: 24px;
-  width: auto;
-}
-
-.header-content-mb {
-  position: fixed;
-  top: var(--o-header-height);
-  left: 0;
-  height: 0;
-  z-index: 998;
-}
-.header-content-active {
-  width: 100%;
-  height: calc(100vh - var(--o-header-height));
-}
-</style>