@opendesign-plus-test/components 0.0.1-rc.26 → 0.0.1-rc.28

package/src/components/header/OHeader.vue

@@ -0,0 +1,175 @@
+<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 HeaderUbmcNav from './components/HeaderUbmcNav.vue';
+
+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({
+  logo: undefined,
+  lang: undefined,
+  community: undefined,
+  navData: undefined,
+  bgLeft: undefined,
+  bgRight: undefined,
+  tagMap: undefined,
+  activeIndex: undefined,
+});
+
+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 = (val: any) => {
+  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 v-if="props.community !== 'openUBMC'" 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>
+        <!-- openUBMC nav -->
+        <div v-if="props.community === 'openUBMC'" class="header-nav-openubmc">
+          <slot name="nav">
+            <HeaderUbmcNav v-if="props.navData" :nav-data="props.navData" :has-perm="true" :tag-map="props.tagMap" />
+          </slot>
+        </div>
+        <!-- toolbar -->
+        <div v-if="$slots.toolbar" class="header-toolbar">
+          <slot name="toolbar"></slot>
+        </div>
+      </ContentWrapper>
+    </div>
+    <div v-if="props.community !== 'openUBMC'" 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-nav-openubmc {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+.header-toolbar {
+  height: 100%;
+}
+.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-mixedgray-4), 0.08);
+  .header-nav-content {
+    box-shadow: 0 3px 9px 0 rgba(var(--o-mixedgray-4), 0.08);
+  }
+}
+</style>

package/src/components/{OHeaderMoblie.vue → header/OHeaderMoblie.vue}

@@ -2,8 +2,8 @@
 import { ref } from 'vue';
 import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
 
-import ContentWrapper from './common/ContentWrapper.vue';
-import HeaderNavMoblie from './common/HeaderNavMoblie.vue';
+import ContentWrapper from '../common/ContentWrapper.vue';
+import HeaderNavMoblie from './components/HeaderNavMoblie.vue';
 
 import IconClose from '~icons/components/icon-close.svg';
 import IconMenu from '~icons/components/icon-header-menu.svg';
@@ -90,7 +90,10 @@ const mobileClick = () => {
 <style lang="scss" scoped>
 .header {
   background-color: var(--o-color-fill2);
-  position: relative;
+  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);