sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseModalSide.stories.js

@@ -1,55 +1,55 @@
-import BaseModalSide from './BaseModalSide.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
-
-export default {
-  title: 'Components/BaseModalSide',
-  component: BaseModalSide,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseModalSide,
-    BaseIcon,
-    BaseAvatar,
-  },
-  setup() {
-    const show = ref(false);
-    return { args, show };
-  },
-  template: `
-    <div class="">
-      <button @click="show = true" class="btn">Show modal</button>
-      <BaseModalSide v-model="show" v-bind="args">
-        <template #default="{close}">
-          <div class="p-8">
-            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
-
-            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
-
-            <button @click="close" class="btn mt-4">Close</button>
-          </div>
-        </template>
-      </BaseModalSide>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const CustomMaxWidth = Template.bind({});
-CustomMaxWidth.args = {
-  maxWidth: '16rem',
-};
-
-export const CustomBackdropClass = Template.bind({});
-CustomBackdropClass.args = {
-  backdropClass: 'bg-red-500 bg-opacity-70',
-};
-
-export const PreventLeave = Template.bind({});
-PreventLeave.args = {
-  closeOnOutsideClick: false,
-};
+import BaseModalSide from './BaseModalSide.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalSide',
+  component: BaseModalSide,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalSide,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalSide v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <h2 class="font-semibold text-lg mb-6">This is a center modal</h2>
+
+            <p v-for="i in 10" :key="i" class="mb-3 text-slate-600">Ipsum magna irure aliquip aute adipisicing Lorem non commodo amet. Est labore dolor laboris sint est magna quis fugiat id cillum deserunt cupidatat veniam. Exercitation dolore consequat labore deserunt laboris id. In laborum ea irure amet esse commodo et deserunt do officia et. Nulla incididunt est laboris pariatur ad duis ad reprehenderit voluptate. Tempor consectetur magna eiusmod incididunt.</p>
+
+            <button @click="close" class="btn mt-4">Close</button>
+          </div>
+        </template>
+      </BaseModalSide>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const CustomMaxWidth = Template.bind({});
+CustomMaxWidth.args = {
+  maxWidth: '16rem',
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

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-300 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="backdropClass"
-                  class="fixed inset-0 transition-opacity"
-                  @click="
-                    closeOnOutsideClick
-                      ? modal.close()
-                      : modal.refuseAnimation()
-                  "
-                />
-              </transition>
-
-              <transition
-                appear
-                enter-active-class="duration-300 ease-out"
-                enter-from-class="translate-x-20 opacity-0"
-                enter-to-class="translate-x-0 opacity-100"
-                leave-active-class="duration-200 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-xl sm:rounded-t-none"
-                  :class="[
-                    modal.animationClasses.value,
-                    clipped ? 'overflow-hidden' : '',
-                  ]"
-                >
-                  <button
-                    class="absolute -top-[4.5rem] right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20 sm:-left-[4.5rem] sm:top-2"
-                    type="button"
-                    @click="modal.close()"
-                  >
-                    <BaseIcon
-                      class="h-8 w-8 text-white"
-                      icon="heroicons:x-mark"
-                    />
-                  </button>
-                  <slot :close="modal.close" />
-                </div>
-              </transition>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useModal } from '@/composables/modal';
-import { useBreakpoints } from '@/composables/breakpoints';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: Boolean,
-  },
-  maxWidth: {
-    default: '32rem',
-    type: String,
-  },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
-  closeOnOutsideClick: {
-    default: true,
-    type: Boolean,
-  },
-  clipped: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-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-300 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="backdropClass"
+                  class="fixed inset-0 transition-opacity"
+                  @click="
+                    closeOnOutsideClick
+                      ? modal.close()
+                      : modal.refuseAnimation()
+                  "
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="translate-x-20 opacity-0"
+                enter-to-class="translate-x-0 opacity-100"
+                leave-active-class="duration-200 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-xl sm:rounded-t-none"
+                  :class="[
+                    modal.animationClasses.value,
+                    clipped ? 'overflow-hidden' : '',
+                  ]"
+                >
+                  <button
+                    class="absolute -top-[4.5rem] right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20 sm:-left-[4.5rem] sm:top-2"
+                    type="button"
+                    @click="modal.close()"
+                  >
+                    <BaseIcon
+                      class="h-8 w-8 text-white"
+                      icon="heroicons:x-mark"
+                    />
+                  </button>
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useModal } from '@/composables/modal';
+import { useBreakpoints } from '@/composables/breakpoints';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '32rem',
+    type: String,
+  },
+  backdropClass: {
+    default: 'bg-opacity-70 bg-slate-900',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+  clipped: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+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 menu-class="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 menu-class="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 = {};