@fiscozen/navbar 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/navbar",
-  "version": "0.1.3",
+  "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",
@@ -19,12 +19,12 @@
     "@vitest/coverage-v8": "^1.2.1",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.0",
-    "vite-plugin-dts": "^3.8.3",
     "eslint": "^8.49.0",
     "jsdom": "^23.0.1",
     "prettier": "^3.0.3",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/tsconfig": "^0.1.0",
@@ -32,6 +32,10 @@
     "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "ISC",
+  "dependencies": {
+    "@fiscozen/style": "^0.1.8-next.0",
+    "@fiscozen/composables": "^0.1.38"
+  },
   "scripts": {
     "coverage": "vitest run --coverage",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",

package/src/FzNavbar.vue

@@ -1,38 +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'
 
 const props = withDefaults(defineProps<FzNavbarProps>(), {
-  variant: 'horizontal'
+  variant: 'horizontal',
+  breakpoints: undefined
 })
 
-const emit = defineEmits<FzNavbarEmits>()
-
-const width = ref(0)
-
-const onResize = () => {
-  width.value = window.innerWidth
-}
-onBeforeMount(() => {
-  onResize()
+const computedBreakpoints = computed(() => {
+  return {
+    ...breakpoints,
+    ...(props.breakpoints ?? {})
+  }
 })
 
-onMounted(() => {
-  window.addEventListener('resize', onResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
-})
+const emit = defineEmits<FzNavbarEmits>()
 
-const isMobile = computed(() => Boolean(width.value <= 1024))
+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 = {