feat: add missing header components, refactor CSidebarBrand

Author: woothu

src/components/header/CHeaderBrand.vue

@@ -0,0 +1,37 @@
+<template>
+  <CLink v-if="wrappedInLink" v-bind="linkProps">
+    <img
+      class="c-header-brand" 
+      v-bind="$attrs"
+    />
+  </CLink>
+  <img
+    v-else
+    class="c-header-brand" 
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+import CLink from '../link/CLink'
+export default {
+  name: 'CHeaderBrand',
+  inheritAttrs: false,
+  components: {
+    CLink
+  },
+  props: {
+    wrappedInLink: [String, Object]
+  },
+  computed : {
+    linkProps () {
+      return this.getObject(this.wrappedInLink, 'href')
+    }
+  },
+  methods: {
+    getObject (prop, key) {
+      return typeof prop === 'object' ? prop : { [`${key}`]: prop }
+    }
+  }
+}
+</script>

src/components/header/CHeaderNavItem.vue

@@ -1,16 +1,24 @@
 <template>
-  <li class="c-header-nav-item">
+  <li v-if="!onlyLink" class="c-header-nav-item">
     <CLink
       class="c-header-nav-link"
       v-bind="$props"
     >
       <slot></slot>
     </CLink>
   </li>
+  <CLink
+    v-else
+    class="c-header-nav-link"
+    v-bind="Object.assign({}, $props, { onlyLink: null })"
+  >
+    <slot></slot>
+  </CLink>
 </template>
 
 <script>
-import CLink, { props } from '../link/CLink'
+import CLink, { props as linkProps } from '../link/CLink'
+const props = Object.assign({ onlyLink: Boolean }, linkProps)
 export default {
   name: 'CHeaderNavItem',
   components: {

src/components/header/CHeaderNavLink.vue

@@ -0,0 +1,19 @@
+<template>
+  <CLink
+    class="c-header-nav-link"
+    v-bind="$props"
+  >
+    <slot></slot>
+  </CLink>
+</template>
+
+<script>
+import CLink, { props } from '../link/CLink'
+export default {
+  name: 'CHeaderNavLink',
+  components: {
+    CLink
+  },
+  props
+}
+</script>

src/components/header/CSubheader.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="tag" class="c-subheader">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'CSubheader',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  }
+}
+</script>

src/components/header/index.js

@@ -1,9 +1,15 @@
 import CHeader from './CHeader'
+import CHeaderBrand from './CHeaderBrand'
 import CHeaderNav from './CHeaderNav'
 import CHeaderNavItem from './CHeaderNavItem'
+// import CHeaderNavLink from './CHeaderNavLink'
+import CSubheader from './CSubheader'
 
 export {
   CHeader,
+  CHeaderBrand,
   CHeaderNav,
-  CHeaderNavItem
+  CHeaderNavItem,
+  // CHeaderNavLink,
+  CSubheader
 }

src/components/index.d.ts

@@ -297,9 +297,21 @@ export declare class CHeader extends Vue {
   withSubheader: boolean
 }
 
+export declare class CHeaderBrand extends Vue {
+  wrappedInLink: [object, string]
+}
+
 export declare class CHeaderNav extends Vue {}
 
-export declare class CHeaderNavItem extends CLink {}
+export declare class CHeaderNavItem extends CLink {
+  onlyLink: boolean
+}
+
+export declare class CHeaderNavLink extends CLink { }
+
+export declare class CSubheader extends CLink {
+  tag: string
+}
 
 export declare class CImg extends Vue {
   src: string
@@ -467,6 +479,14 @@ export declare class CSidebar extends Vue {
   overlaid: boolean
 }
 
+export declare class CSidebarBrand extends Vue { 
+  img: [object, string]
+  imgMinimized: [object, string]
+  imgFull: [object, string]
+  wrappedInLink: [object, string]
+}
+
+
 export declare class CSidebarClose extends Vue { }
 
 export declare class CSidebarFooter extends Vue {}

src/components/sidebar/CSidebarBrand.vue

@@ -1,36 +1,24 @@
 <template>
   <div class="c-sidebar-brand">
     <slot>
-      <CLink v-if="wrappedInLink" v-bind="wrappedInLink">
+      <CLink v-if="wrappedInLink" v-bind="linkProps">
         <img
           class="c-sidebar-brand-full" 
-          :src="fullSrc || src" 
-          width="118" 
-          height="46" 
-          alt="Logo"
+          v-bind="fullAttributes" 
         >
         <img 
           class="c-sidebar-brand-minimized" 
-          :src="minimizedSrc || src"
-          width="118" 
-          height="46" 
-          alt="Logo"
+          v-bind="minimizedAttributes"
         >
       </CLink>
       <template v-else>
         <img 
-          class="c-sidebar-brand-full" 
-          :src="fullSrc || src" 
-          width="118" 
-          height="46" 
-          alt="Logo"
+          class="c-sidebar-brand-full"
+          v-bind="fullAttributes"
         >
         <img 
           class="c-sidebar-brand-minimized" 
-          :src="minimizedSrc || src"
-          width="118" 
-          height="46" 
-          alt="Logo"
+          v-bind="minimizedAttributes"
         >
       </template>
     </slot>
@@ -45,10 +33,26 @@ export default {
     CLink
   },
   props: {
-    src: String,
-    fullSrc: String,
-    minimizedSrc: String,
-    wrappedInLink: Object
+    img: [String, Object],
+    imgFull: [String, Object],
+    imgMinimized: [String, Object],
+    wrappedInLink: [String, Object]
+  },
+  computed: {
+    linkProps () {
+      return this.getObject(this.wrappedInLink, 'href')
+    },
+    minimizedAttributes () {
+      return this.getObject(this.imgMinimized || this.img, 'src')
+    },
+    fullAttributes () {
+      return this.getObject(this.imgFull || this.img, 'src')
+    }
+  },
+  methods: {
+    getObject (prop, key) {
+      return typeof prop === 'object' ? prop : { [`${key}`]: prop }
+    }
   }
 }
 </script>