@fiscozen/navbar 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/navbar",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Design System Navbar Component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,7 +9,7 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/button": "^0.1.8"
+    "@fiscozen/button": "^1.0.1-next.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -33,8 +33,8 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@fiscozen/composables": "^0.1.33",
-    "@fiscozen/style": "^0.1.3"
+    "@fiscozen/style": "^0.1.8-next.0",
+    "@fiscozen/composables": "^0.1.38"
   },
   "scripts": {
     "coverage": "vitest run --coverage",

package/src/FzNavbar.vue

@@ -1,26 +1,34 @@
 <script lang="ts" setup>
-import { ref, onBeforeMount, onMounted, onUnmounted, computed } from 'vue'
+import { computed } from 'vue'
 import { FzIconButton } from '@fiscozen/button'
 import { FzNavbarEmits, FzNavbarProps } from './types'
-import {breakpoints} from '@fiscozen/style';
-import {useBreakpoints} from '@fiscozen/composables';
+import { breakpoints } from '@fiscozen/style'
+import { useBreakpoints } from '@fiscozen/composables'
 
 const props = withDefaults(defineProps<FzNavbarProps>(), {
-  variant: 'horizontal'
+  variant: 'horizontal',
+  breakpoints: undefined
+})
+
+const computedBreakpoints = computed(() => {
+  return {
+    ...breakpoints,
+    ...(props.breakpoints ?? {})
+  }
 })
 
 const emit = defineEmits<FzNavbarEmits>()
 
-const {isGreater} = useBreakpoints(breakpoints);
-const isGreaterThanLg = isGreater('lg');
-const isMobile = computed(() => !isGreaterThanLg.value);
+const { isGreater } = useBreakpoints(computedBreakpoints.value)
+const isGreaterThanLg = isGreater('lg')
+const isMobile = computed(() => !isGreaterThanLg.value)
 const isVertical = computed(() => Boolean(props.variant === 'vertical'))
 const isHorizontal = computed(() => Boolean(props.variant === 'horizontal'))
 </script>
 
 <template>
   <header
-    class="flex p-12 shadow z-10"
+    class="z-10 flex p-12 shadow"
     :class="{
       'justify-between': isMobile,
       'h-full w-56 flex-col': isVertical && !isMobile,

package/src/types.ts

@@ -1,3 +1,5 @@
+import { Breakpoint } from '@fiscozen/style'
+
 export type FzNavbarVariant = 'horizontal' | 'vertical'
 
 interface FzNavbarProps {
@@ -9,6 +11,10 @@ interface FzNavbarProps {
    * Whether the main navigation menu is open (mobile)
    */
   isMenuOpen?: boolean
+  /**
+   * Override breakpoint for manage custom size inside navbar
+   */
+  breakpoints?: Partial<Record<Breakpoint, `${number}px`>>
 }
 
 type FzNavbarEmits = {

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './src/index'