sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseNavbar.stories.js

@@ -1,152 +1,152 @@
-import BaseNavbar from "./BaseNavbar.vue";
-import BaseNavbarItem from "./BaseNavbarItem.vue";
-import BaseNavbarSideItem from "./BaseNavbarSideItem.vue";
-import BaseAvatar from "./BaseAvatar.vue";
-import BaseMenu from "./BaseMenu.vue";
-import { Icon as BaseIcon } from "@iconify/vue";
-
-export default {
-  title: "Navigation/BaseNavbar",
-  component: BaseNavbar,
-  args: {},
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseNavbar,
-    BaseNavbarItem,
-    BaseNavbarSideItem,
-    BaseIcon,
-    BaseAvatar,
-    BaseMenu,
-  },
-  setup() {
-    const user = {
-      email: "jane@witify.io",
-      first_name: "Jane",
-      last_name: "Doe",
-      full_name: "Jane Doe",
-      avatar_url:
-        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
-    };
-
-    const menu = [
-      {
-        label: "Home",
-        to: "/",
-      },
-      {
-        label: "Products",
-        to: "/setup",
-        count: 234,
-      },
-      {
-        label: "Settings",
-        to: "/settings",
-      },
-    ];
-
-    const userMenu = [
-      {
-        label: "Home",
-        icon: "heroicons:home",
-        href: "https://google.com",
-      },
-      {
-        meta: { line: true },
-      },
-      {
-        label: "Logout",
-        icon: "heroicons:arrow-right-on-rectangle",
-        href: "https://google.com",
-      },
-    ];
-
-    return { args, menu, userMenu, user };
-  },
-  template: `
-    <div class="sticky top-0 left-0 w-full shadow">
-      <BaseNavbar v-bind="args">
-        <template #navbar>
-          <div class="flex w-full justify-between">
-            <!-- Left -->
-
-            <div class="flex justify-start grow">
-              <!-- Logo -->
-              <RouterLink to="/" class="flex flex-shrink-0 items-center">
-                <img
-                  class="block h-8 w-auto"
-                  src="https://demo.sprintify.app/img/logo/logo-side.svg"
-                  alt="Sprintify"
-                />
-              </RouterLink>
-
-              <!-- Links (desktop) -->
-              <div class="ml-10 hidden space-x-4 md:flex">
-                <BaseNavbarItem
-                  v-for="item in menu"
-                  :key="item.label"
-                  :item="item"
-                  class="flex"
-                  item-class="flex"
-                />
-              </div>
-            </div>
-
-            <!-- Right -->
-
-            <div class="hidden md:ml-6 md:flex md:items-center shrink-0">
-              <!-- Profile dropdown -->
-              <BaseMenu :items="userMenu">
-                <template #button="{ open }">
-                  <div
-                    class="flex rounded-full"
-                    :class="[open ? 'bg-slate-700 ring-4 ring-slate-200' : '']"
-                  >
-                    <BaseAvatar :user="user" />
-                  </div>
-                </template>
-              </BaseMenu>
-            </div>
-          </div>
-        </template>
-
-        <template #mobile>
-          <!-- Links mobile -->
-          <div class="space-y-1 p-2 pt-0">
-            <BaseNavbarSideItem
-              v-for="item in menu"
-              :key="item.label"
-              :item="item"
-            />
-          </div>
-    
-          <hr class="mb-4 mt-2 border-slate-200" />
-    
-          <!-- Profile links -->
-          <div class="p-2 pb-6">
-            <BaseAvatar
-              :user="user"
-              show-details
-              size="base"
-              class="px-3"
-            />
-            <div class="mt-4 space-y-1">
-              <BaseNavbarSideItem
-                v-for="item in userMenu"
-                :key="item.label"
-                :item="item"
-              />
-            </div>
-          </div>
-        </template>
-      </BaseNavbar>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseNavbar from "./BaseNavbar.vue";
+import BaseNavbarItem from "./BaseNavbarItem.vue";
+import BaseNavbarSideItem from "./BaseNavbarSideItem.vue";
+import BaseAvatar from "./BaseAvatar.vue";
+import BaseMenu from "./BaseMenu.vue";
+import { Icon as BaseIcon } from "@iconify/vue";
+
+export default {
+  title: "Navigation/BaseNavbar",
+  component: BaseNavbar,
+  args: {},
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseNavbar,
+    BaseNavbarItem,
+    BaseNavbarSideItem,
+    BaseIcon,
+    BaseAvatar,
+    BaseMenu,
+  },
+  setup() {
+    const user = {
+      email: "jane@witify.io",
+      first_name: "Jane",
+      last_name: "Doe",
+      full_name: "Jane Doe",
+      avatar_url:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
+    };
+
+    const menu = [
+      {
+        label: "Home",
+        to: "/",
+      },
+      {
+        label: "Products",
+        to: "/setup",
+        count: 234,
+      },
+      {
+        label: "Settings",
+        to: "/settings",
+      },
+    ];
+
+    const userMenu = [
+      {
+        label: "Home",
+        icon: "heroicons:home",
+        href: "https://google.com",
+      },
+      {
+        meta: { line: true },
+      },
+      {
+        label: "Logout",
+        icon: "heroicons:arrow-right-on-rectangle",
+        href: "https://google.com",
+      },
+    ];
+
+    return { args, menu, userMenu, user };
+  },
+  template: `
+    <div class="sticky top-0 left-0 w-full shadow">
+      <BaseNavbar v-bind="args">
+        <template #navbar>
+          <div class="flex w-full justify-between">
+            <!-- Left -->
+
+            <div class="flex justify-start grow">
+              <!-- Logo -->
+              <RouterLink to="/" class="flex flex-shrink-0 items-center">
+                <img
+                  class="block h-8 w-auto"
+                  src="https://demo.sprintify.app/img/logo/logo-side.svg"
+                  alt="Sprintify"
+                />
+              </RouterLink>
+
+              <!-- Links (desktop) -->
+              <div class="ml-10 hidden space-x-4 md:flex">
+                <BaseNavbarItem
+                  v-for="item in menu"
+                  :key="item.label"
+                  :item="item"
+                  class="flex"
+                  item-class="flex"
+                />
+              </div>
+            </div>
+
+            <!-- Right -->
+
+            <div class="hidden md:ml-6 md:flex md:items-center shrink-0">
+              <!-- Profile dropdown -->
+              <BaseMenu :items="userMenu">
+                <template #button="{ open }">
+                  <div
+                    class="flex rounded-full"
+                    :class="[open ? 'bg-slate-700 ring-4 ring-slate-200' : '']"
+                  >
+                    <BaseAvatar :user="user" />
+                  </div>
+                </template>
+              </BaseMenu>
+            </div>
+          </div>
+        </template>
+
+        <template #mobile>
+          <!-- Links mobile -->
+          <div class="space-y-1 p-2 pt-0">
+            <BaseNavbarSideItem
+              v-for="item in menu"
+              :key="item.label"
+              :item="item"
+            />
+          </div>
+    
+          <hr class="mb-4 mt-2 border-slate-200" />
+    
+          <!-- Profile links -->
+          <div class="p-2 pb-6">
+            <BaseAvatar
+              :user="user"
+              show-details
+              size="base"
+              class="px-3"
+            />
+            <div class="mt-4 space-y-1">
+              <BaseNavbarSideItem
+                v-for="item in userMenu"
+                :key="item.label"
+                :item="item"
+              />
+            </div>
+          </div>
+        </template>
+      </BaseNavbar>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseNavbar.vue

@@ -1,191 +1,191 @@
-<template>
-  <nav
-    ref="navRef"
-    :class="classInternal"
-    :style="{
-      maxHeight: `${maxHeight}px`,
-    }"
-  >
-    <BaseContainer size="7xl">
-      <div
-        :style="{
-          height: `${heightInner}px`,
-        }"
-        class="flex justify-between"
-      >
-        <!-- Navbar (desktop and mobile) -->
-        <div class="grow flex">
-          <slot
-            name="navbar"
-            :mobile="mobile"
-            :dark="dark"
-            :height="heightInner"
-          />
-        </div>
-
-        <!-- Mobile Burger menu button -->
-        <div
-          v-if="mobile"
-          class="-mr-2 flex items-center"
-        >
-          <button
-            type="button"
-            class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
-            :class="[
-              dark
-                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
-                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
-            ]"
-            @click="toggleMenu()"
-          >
-            <span class="sr-only">Open main menu</span>
-            <BaseIcon
-              v-if="!showMobileMenu"
-              icon="heroicons:bars-3"
-              class="block h-6 w-6"
-              aria-hidden="true"
-            />
-            <BaseIcon
-              v-else
-              icon="heroicons:x-mark"
-              class="block h-6 w-6"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-    </BaseContainer>
-
-    <!-- Mobile -->
-    <div
-      v-if="mobile && showMobileMenu"
-      class="w-full"
-      :class="backgroundClass"
-    >
-      <slot
-        name="mobile"
-        :dark="dark"
-        :toggle-menu="toggleMenu"
-        :close-menu="closeMenu"
-        :open-menu="openMenu"
-      />
-    </div>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseContainer from './BaseContainer.vue';
-import { twMerge } from 'tailwind-merge';
-import { PropType } from 'vue';
-import { useElementBounding, useWindowSize } from '@vueuse/core';
-import { disableScroll, enableScroll } from '..';
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps({
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  height: {
-    default: undefined,
-    type: Number,
-  },
-  breakpoint: {
-    default: 768,
-    type: Number,
-  },
-  class: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const window = useWindowSize();
-
-const mobile = computed(() => {
-  return window.width.value < props.breakpoint;
-});
-
-watch(
-  () => window.width.value,
-  () => {
-    if (!mobile.value) {
-      closeMenu();
-    }
-  },
-);
-
-const heightInner = computed(() => {
-  if (props.height) {
-    return props.height;
-  }
-
-  if (props.size == 'xs') {
-    return 48;
-  }
-
-  if (props.size == 'sm') {
-    return 56;
-  }
-
-  return 64;
-});
-
-const backgroundClass = computed(() => {
-  return props.dark ? 'bg-slate-800' : 'bg-white';
-});
-
-const classInternal = computed(() => {
-
-  const classes = [
-    'flex flex-col top-0 left-0 w-full',
-    backgroundClass.value,
-  ];
-
-  if (mobile.value) {
-    classes.push('overflow-y-auto');
-  }
-
-  return twMerge(classes, props.class)
-})
-
-const navRef = ref<HTMLElement | null>(null);
-const navRefRect = useElementBounding(navRef);
-
-const maxHeight = computed(() => {
-  return window.height.value - navRefRect.top.value;
-});
-
-const showMobileMenu = ref(false);
-
-function toggleMenu() {
-  if (showMobileMenu.value) {
-    closeMenu();
-  } else {
-    openMenu();
-  }
-}
-
-function openMenu() {
-  disableScroll();
-  showMobileMenu.value = true;
-}
-
-function closeMenu() {
-  enableScroll();
-  showMobileMenu.value = false;
-}
-
-provide('toggleMenu', toggleMenu);
-provide('openMenu', openMenu);
-provide('closeMenu', closeMenu);
-provide('navbar:height', heightInner);
-</script>
+<template>
+  <nav
+    ref="navRef"
+    :class="classInternal"
+    :style="{
+      maxHeight: `${maxHeight}px`,
+    }"
+  >
+    <BaseContainer size="7xl">
+      <div
+        :style="{
+          height: `${heightInner}px`,
+        }"
+        class="flex justify-between"
+      >
+        <!-- Navbar (desktop and mobile) -->
+        <div class="grow flex">
+          <slot
+            name="navbar"
+            :mobile="mobile"
+            :dark="dark"
+            :height="heightInner"
+          />
+        </div>
+
+        <!-- Mobile Burger menu button -->
+        <div
+          v-if="mobile"
+          class="-mr-2 flex items-center"
+        >
+          <button
+            type="button"
+            class="inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="[
+              dark
+                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
+                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
+            ]"
+            @click="toggleMenu()"
+          >
+            <span class="sr-only">Open main menu</span>
+            <BaseIcon
+              v-if="!showMobileMenu"
+              icon="heroicons:bars-3"
+              class="block h-6 w-6"
+              aria-hidden="true"
+            />
+            <BaseIcon
+              v-else
+              icon="heroicons:x-mark"
+              class="block h-6 w-6"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+    </BaseContainer>
+
+    <!-- Mobile -->
+    <div
+      v-if="mobile && showMobileMenu"
+      class="w-full"
+      :class="backgroundClass"
+    >
+      <slot
+        name="mobile"
+        :dark="dark"
+        :toggle-menu="toggleMenu"
+        :close-menu="closeMenu"
+        :open-menu="openMenu"
+      />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseContainer from './BaseContainer.vue';
+import { twMerge } from 'tailwind-merge';
+import { PropType } from 'vue';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
+import { disableScroll, enableScroll } from '..';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  height: {
+    default: undefined,
+    type: Number,
+  },
+  breakpoint: {
+    default: 768,
+    type: Number,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const window = useWindowSize();
+
+const mobile = computed(() => {
+  return window.width.value < props.breakpoint;
+});
+
+watch(
+  () => window.width.value,
+  () => {
+    if (!mobile.value) {
+      closeMenu();
+    }
+  },
+);
+
+const heightInner = computed(() => {
+  if (props.height) {
+    return props.height;
+  }
+
+  if (props.size == 'xs') {
+    return 48;
+  }
+
+  if (props.size == 'sm') {
+    return 56;
+  }
+
+  return 64;
+});
+
+const backgroundClass = computed(() => {
+  return props.dark ? 'bg-slate-800' : 'bg-white';
+});
+
+const classInternal = computed(() => {
+
+  const classes = [
+    'flex flex-col top-0 left-0 w-full',
+    backgroundClass.value,
+  ];
+
+  if (mobile.value) {
+    classes.push('overflow-y-auto');
+  }
+
+  return twMerge(classes, props.class)
+})
+
+const navRef = ref<HTMLElement | null>(null);
+const navRefRect = useElementBounding(navRef);
+
+const maxHeight = computed(() => {
+  return window.height.value - navRefRect.top.value;
+});
+
+const showMobileMenu = ref(false);
+
+function toggleMenu() {
+  if (showMobileMenu.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
+}
+
+function openMenu() {
+  disableScroll();
+  showMobileMenu.value = true;
+}
+
+function closeMenu() {
+  enableScroll();
+  showMobileMenu.value = false;
+}
+
+provide('toggleMenu', toggleMenu);
+provide('openMenu', openMenu);
+provide('closeMenu', closeMenu);
+provide('navbar:height', heightInner);
+</script>