sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseModalSide.vue

@@ -1,116 +1,116 @@
-<template>
-  <Teleport to="body">
-    <transition
-      name="modal"
-      enter-active-class="duration-300"
-      leave-active-class="duration-200"
-    >
-      <div v-show="modelValue">
-        <div
-          data-scroll-lock-scrollable
-          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-        >
-          <div class="flex min-h-full w-full pt-20 sm:pt-0">
-            <div class="min-h-full grow">
-              <transition
-                appear
-                enter-active-class="duration-200 ease-out"
-                enter-from-class="opacity-0"
-                enter-to-class="opacity-100"
-                leave-active-class="duration-200 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-              >
-                <div
-                  v-show="modelValue"
-                  :class="twMerge(
-                    'fixed inset-0 bg-slate-300 bg-opacity-60 transition-opacity',
-                    twBackdrop
-                  )"
-                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
-                />
-              </transition>
-
-              <transition
-                appear
-                enter-active-class="duration-200 ease-out"
-                enter-from-class="translate-x-20 opacity-0"
-                enter-to-class="translate-x-0 opacity-100"
-                leave-active-class="duration-100 ease-in"
-                leave-from-class="translate-x-0 opacity-100"
-                leave-to-class="translate-x-20 opacity-0"
-              >
-                <div
-                  v-show="modelValue"
-                  :style="{
-                    maxWidth: realMaxWidth,
-                  }"
-                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl sm:rounded-t-none"
-                  :class="[
-                    modal.animationClasses.value,
-                    clipped ? 'overflow-hidden' : '',
-                  ]"
-                >
-                  <button
-                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg sm:-left-[3rem] sm:top-2 duration-300 transition-shadow"
-                    type="button"
-                    @click="modal.close()"
-                  >
-                    <BaseIcon
-                      class="h-5 w-5 text-black"
-                      icon="heroicons:x-mark"
-                    />
-                  </button>
-                  <slot :close="modal.close" />
-                </div>
-              </transition>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { twMerge } from 'tailwind-merge';
-import { useModal } from '@/composables/modal';
-import { useBreakpoints } from '@/composables/breakpoints';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: Boolean,
-  },
-  maxWidth: {
-    default: '32rem',
-    type: String,
-  },
-  closeOnOutsideClick: {
-    default: true,
-    type: Boolean,
-  },
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-  twBackdrop: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const breakpoints = useBreakpoints();
-
-const realMaxWidth = computed((): string => {
-  return breakpoints.greater('sm').value ? props.maxWidth : '100%';
-});
-
-const modal = useModal(
-  computed(() => props.modelValue),
-  emit
-);
-</script>
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          data-scroll-lock-scrollable
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+        >
+          <div class="flex min-h-full w-full pt-20 sm:pt-0">
+            <div class="min-h-full grow">
+              <transition
+                appear
+                enter-active-class="duration-200 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :class="twMerge(
+                    'fixed inset-0 bg-slate-300 bg-opacity-60 transition-opacity',
+                    twBackdrop
+                  )"
+                  @click="closeOnOutsideClick ? modal.close() : modal.refuseAnimation()"
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-200 ease-out"
+                enter-from-class="translate-x-20 opacity-0"
+                enter-to-class="translate-x-0 opacity-100"
+                leave-active-class="duration-100 ease-in"
+                leave-from-class="translate-x-0 opacity-100"
+                leave-to-class="translate-x-20 opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :style="{
+                    maxWidth: realMaxWidth,
+                  }"
+                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl sm:rounded-t-none"
+                  :class="[
+                    modal.animationClasses.value,
+                    clipped ? 'overflow-hidden' : '',
+                  ]"
+                >
+                  <button
+                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg sm:-left-[3rem] sm:top-2 duration-300 transition-shadow"
+                    type="button"
+                    @click="modal.close()"
+                  >
+                    <BaseIcon
+                      class="h-5 w-5 text-black"
+                      icon="heroicons:x-mark"
+                    />
+                  </button>
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import { useModal } from '@/composables/modal';
+import { useBreakpoints } from '@/composables/breakpoints';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '32rem',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const breakpoints = useBreakpoints();
+
+const realMaxWidth = computed((): string => {
+  return breakpoints.greater('sm').value ? props.maxWidth : '100%';
+});
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  emit
+);
+</script>

package/src/components/BaseNavbar.stories.js

@@ -1,151 +1,151 @@
-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: 'Layout/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',
-      },
-      {
-        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 h-16 justify-between">
-            <!-- Left -->
-
-            <div class="flex justify-center">
-              <!-- Logo -->
-              <RouterLink to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
-                <img
-                  class="block h-8 w-auto"
-                  src="https://sprintify.witify.io/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"
-                  item-class="flex"
-                />
-              </div>
-            </div>
-
-            <!-- Right -->
-
-            <div class="hidden md:ml-6 md:flex md:items-center">
-              <!-- Profile dropdown -->
-              <BaseMenu tw-menu="w-52" :items="userMenu">
-                <template #button="{ open }">
-                  <div
-                    class="flex rounded-full"
-                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
-                  >
-                    <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: 'Layout/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',
+      },
+      {
+        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 h-16 justify-between">
+            <!-- Left -->
+
+            <div class="flex justify-center">
+              <!-- Logo -->
+              <RouterLink to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+                <img
+                  class="block h-8 w-auto"
+                  src="https://sprintify.witify.io/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"
+                  item-class="flex"
+                />
+              </div>
+            </div>
+
+            <!-- Right -->
+
+            <div class="hidden md:ml-6 md:flex md:items-center">
+              <!-- Profile dropdown -->
+              <BaseMenu tw-menu="w-52" :items="userMenu">
+                <template #button="{ open }">
+                  <div
+                    class="flex rounded-full"
+                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
+                  >
+                    <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 = {};