sprintify-ui 0.2.19 → 0.2.21

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -1,109 +1,109 @@
-import BaseContainer from './BaseContainer.vue';
-import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
-
-export default {
-  title: 'Layout/BaseLayoutStackedConfigurable',
-  component: BaseLayoutStackedConfigurable,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    appName: 'Sprintify',
-    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',
-    },
-    menu: [
-      {
-        label: 'Products',
-        to: '/',
-        count: 234,
-      },
-      {
-        label: 'Users',
-        to: '/setup',
-      },
-      {
-        label: 'Account',
-        to: '/settings',
-        icon: 'heroicons:cog',
-      },
-    ],
-    userMenu: [
-      {
-        label: 'Dashboard',
-        to: '/',
-        icon: 'heroicons-home',
-      },
-      {
-        label: 'Settings',
-        to: '/account',
-        icon: 'heroicons:cog',
-      },
-      {
-        label: 'Logout',
-        action: logout,
-        icon: 'heroicons:arrow-left-on-rectangle',
-      },
-    ],
-    notifications: {
-      footerTo: '/',
-      footerLabel: 'See all notifications',
-      items: [
-        {
-          id: '1',
-          text: 'You have a new message',
-          to: '/',
-          created_at: '2022-12-08T19:16:10Z',
-        },
-        {
-          id: '2',
-          text: 'Your inbox is now full. Please empty your inbox before it goes bang.',
-          to: '/',
-          created_at: '2022-01-01T00:00:00',
-        },
-      ],
-    },
-  },
-};
-
-async function logout() {
-  alert('logout');
-}
-
-const Template = (args) => ({
-  components: {
-    BaseLayoutStackedConfigurable,
-    BaseContainer,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseLayoutStackedConfigurable v-bind="args">
-      <div class="py-16">
-        <BaseContainer size="3xl">
-          <p v-for="i in 20" class="mb-1">
-            Amet occaecat enim pariatur incididunt enim laborum enim. Duis cillum in in excepteur sit excepteur laboris consectetur magna. Commodo proident labore commodo duis veniam do nisi irure ipsum officia excepteur non. Nisi cillum mollit tempor ut.
-          </p>
-        </BaseContainer>
-      </div>
-    </BaseLayoutStackedConfigurable>
-  `,
-});
-
-export const Light = Template.bind({});
-Light.args = {
-  dark: false,
-  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  dark: true,
-  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
-};
+import BaseContainer from './BaseContainer.vue';
+import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
+
+export default {
+  title: 'Layout/BaseLayoutStackedConfigurable',
+  component: BaseLayoutStackedConfigurable,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    appName: 'Sprintify',
+    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',
+    },
+    menu: [
+      {
+        label: 'Products',
+        to: '/',
+        count: 234,
+      },
+      {
+        label: 'Users',
+        to: '/setup',
+      },
+      {
+        label: 'Account',
+        to: '/settings',
+        icon: 'heroicons:cog',
+      },
+    ],
+    userMenu: [
+      {
+        label: 'Dashboard',
+        to: '/',
+        icon: 'heroicons-home',
+      },
+      {
+        label: 'Settings',
+        to: '/account',
+        icon: 'heroicons:cog',
+      },
+      {
+        label: 'Logout',
+        action: logout,
+        icon: 'heroicons:arrow-left-on-rectangle',
+      },
+    ],
+    notifications: {
+      footerTo: '/',
+      footerLabel: 'See all notifications',
+      items: [
+        {
+          id: '1',
+          text: 'You have a new message',
+          to: '/',
+          created_at: '2022-12-08T19:16:10Z',
+        },
+        {
+          id: '2',
+          text: 'Your inbox is now full. Please empty your inbox before it goes bang.',
+          to: '/',
+          created_at: '2022-01-01T00:00:00',
+        },
+      ],
+    },
+  },
+};
+
+async function logout() {
+  alert('logout');
+}
+
+const Template = (args) => ({
+  components: {
+    BaseLayoutStackedConfigurable,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseLayoutStackedConfigurable v-bind="args">
+      <div class="py-16">
+        <BaseContainer size="3xl">
+          <p v-for="i in 20" class="mb-1">
+            Amet occaecat enim pariatur incididunt enim laborum enim. Duis cillum in in excepteur sit excepteur laboris consectetur magna. Commodo proident labore commodo duis veniam do nisi irure ipsum officia excepteur non. Nisi cillum mollit tempor ut.
+          </p>
+        </BaseContainer>
+      </div>
+    </BaseLayoutStackedConfigurable>
+  `,
+});
+
+export const Light = Template.bind({});
+Light.args = {
+  dark: false,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side.svg',
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -1,158 +1,158 @@
-<template>
-  <BaseLayoutStacked :dark="dark">
-    <template #navbar>
-      <div class="flex h-16 justify-between">
-        <!-- Left -->
-
-        <div class="flex justify-center">
-          <!-- Logo -->
-          <RouterLink
-            to="/"
-            class="flex flex-shrink-0 items-center p-2 pl-0"
-          >
-            <img
-              class="block h-8 w-auto"
-              :src="logoUrl"
-              :alt="appName"
-            >
-          </RouterLink>
-
-          <!-- Links (desktop) -->
-          <div class="ml-10 hidden space-x-4 md:flex">
-            <BaseNavbarItem
-              v-for="item in menu"
-              :key="item.label"
-              :item="item"
-              :dark="dark"
-            />
-          </div>
-        </div>
-
-        <!-- Right -->
-        <div class="flex items-center md:ml-6">
-          <!-- Notification dropdown -->
-          <BaseLayoutNotificationDropdown
-            v-if="notifications"
-            class="mr-4 md:mr-5"
-            :dark="dark"
-            :notifications-config="notifications"
-            @click="onNotificationClick"
-            @open="onNotificationOpen"
-          />
-
-          <!-- Profile dropdown -->
-          <BaseMenu
-            tw-menu="w-52"
-            class="hidden md:block"
-            :items="userMenu"
-          >
-            <template #button="{ open }">
-              <div
-                class="flex rounded-full"
-                :class="[open ? '' : '']"
-              >
-                <BaseAvatar
-                  :class="dark ? 'text-white' : ''"
-                  :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"
-          :dark="dark"
-        />
-      </div>
-
-      <hr
-        class="mb-4 mt-2"
-        :class="[dark ? 'border-slate-700' : 'border-slate-200']"
-      >
-
-      <!-- Profile links -->
-      <div class="p-2 pb-6">
-        <BaseAvatar
-          :user="user"
-          show-details
-          size="base"
-          class="px-3"
-          :class="dark ? 'text-white' : ''"
-        />
-        <div class="mt-4 space-y-1">
-          <BaseNavbarSideItem
-            v-for="item in userMenu"
-            :key="item.label"
-            :item="item"
-            :dark="dark"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #default>
-      <slot name="default" />
-    </template>
-  </BaseLayoutStacked>
-</template>
-
-<script lang="ts" setup>
-import { User } from '@/types/User';
-import { PropType } from 'vue';
-import { ActionItem, NotificationsConfig } from '../types';
-import BaseAvatar from './BaseAvatar.vue';
-import BaseLayoutStacked from './BaseLayoutStacked.vue';
-import BaseMenu from './BaseMenu.vue';
-import BaseNavbarItem from './BaseNavbarItem.vue';
-import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
-import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
-
-const emit = defineEmits(['notification:click', 'notification:open']);
-
-defineProps({
-  appName: {
-    default: '',
-    type: String,
-  },
-  logoUrl: {
-    default: 'https://sprintify.witify.io/img/logo/logo-side.svg',
-    type: String,
-  },
-  menu: {
-    required: true,
-    type: Array as PropType<ActionItem[]>,
-  },
-  userMenu: {
-    required: true,
-    type: Array as PropType<ActionItem[]>,
-  },
-  user: {
-    required: true,
-    type: Object as PropType<User>,
-  },
-  notifications: {
-    default: undefined,
-    type: Object as PropType<NotificationsConfig>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-function onNotificationClick(notification: Notification) {
-  emit('notification:click', notification);
-}
-
-function onNotificationOpen() {
-  emit('notification:open');
-}
-</script>
+<template>
+  <BaseLayoutStacked :dark="dark">
+    <template #navbar>
+      <div class="flex h-16 justify-between">
+        <!-- Left -->
+
+        <div class="flex justify-center">
+          <!-- Logo -->
+          <RouterLink
+            to="/"
+            class="flex flex-shrink-0 items-center p-2 pl-0"
+          >
+            <img
+              class="block h-8 w-auto"
+              :src="logoUrl"
+              :alt="appName"
+            >
+          </RouterLink>
+
+          <!-- Links (desktop) -->
+          <div class="ml-10 hidden space-x-4 md:flex">
+            <BaseNavbarItem
+              v-for="item in menu"
+              :key="item.label"
+              :item="item"
+              :dark="dark"
+            />
+          </div>
+        </div>
+
+        <!-- Right -->
+        <div class="flex items-center md:ml-6">
+          <!-- Notification dropdown -->
+          <BaseLayoutNotificationDropdown
+            v-if="notifications"
+            class="mr-4 md:mr-5"
+            :dark="dark"
+            :notifications-config="notifications"
+            @click="onNotificationClick"
+            @open="onNotificationOpen"
+          />
+
+          <!-- Profile dropdown -->
+          <BaseMenu
+            tw-menu="w-52"
+            class="hidden md:block"
+            :items="userMenu"
+          >
+            <template #button="{ open }">
+              <div
+                class="flex rounded-full"
+                :class="[open ? '' : '']"
+              >
+                <BaseAvatar
+                  :class="dark ? 'text-white' : ''"
+                  :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"
+          :dark="dark"
+        />
+      </div>
+
+      <hr
+        class="mb-4 mt-2"
+        :class="[dark ? 'border-slate-700' : 'border-slate-200']"
+      >
+
+      <!-- Profile links -->
+      <div class="p-2 pb-6">
+        <BaseAvatar
+          :user="user"
+          show-details
+          size="base"
+          class="px-3"
+          :class="dark ? 'text-white' : ''"
+        />
+        <div class="mt-4 space-y-1">
+          <BaseNavbarSideItem
+            v-for="item in userMenu"
+            :key="item.label"
+            :item="item"
+            :dark="dark"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <slot name="default" />
+    </template>
+  </BaseLayoutStacked>
+</template>
+
+<script lang="ts" setup>
+import { User } from '@/types/User';
+import { PropType } from 'vue';
+import { ActionItem, NotificationsConfig } from '../types';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseLayoutStacked from './BaseLayoutStacked.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
+
+const emit = defineEmits(['notification:click', 'notification:open']);
+
+defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side.svg',
+    type: String,
+  },
+  menu: {
+    required: true,
+    type: Array as PropType<ActionItem[]>,
+  },
+  userMenu: {
+    required: true,
+    type: Array as PropType<ActionItem[]>,
+  },
+  user: {
+    required: true,
+    type: Object as PropType<User>,
+  },
+  notifications: {
+    default: undefined,
+    type: Object as PropType<NotificationsConfig>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+function onNotificationClick(notification: Notification) {
+  emit('notification:click', notification);
+}
+
+function onNotificationOpen() {
+  emit('notification:open');
+}
+</script>

package/src/components/BaseLoadingCover.stories.js

@@ -1,55 +1,55 @@
-import BaseLoadingCover from './BaseLoadingCover.vue';
-
-export default {
-  title: 'Layout/BaseLoadingCover',
-  component: BaseLoadingCover,
-  args: {
-    delay: 0,
-    modelValue: true,
-    size: 'sm',
-  },
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'lg'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseLoadingCover,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div class="relative bg-slate-100 p-6 py-10">
-      <p class="text-center text-slate-700">Non dolor consectetur et occaecat.</p>
-      <BaseLoadingCover v-bind="args" />
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const SmallSpinner = Template.bind({});
-SmallSpinner.args = {
-  size: 'sm',
-};
-
-export const LargeSpinner = Template.bind({});
-LargeSpinner.args = {
-  size: 'lg',
-};
-
-export const SpinnerCustomClass = Template.bind({});
-SpinnerCustomClass.args = {
-  twIcon: 'text-red-500 w-10 h-10',
-};
-
-export const BackdropCustomClass = Template.bind({});
-BackdropCustomClass.args = {
-  twBackdrop: 'bg-slate-100 opacity-50',
-};
+import BaseLoadingCover from './BaseLoadingCover.vue';
+
+export default {
+  title: 'Layout/BaseLoadingCover',
+  component: BaseLoadingCover,
+  args: {
+    delay: 0,
+    modelValue: true,
+    size: 'sm',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="relative bg-slate-100 p-6 py-10">
+      <p class="text-center text-slate-700">Non dolor consectetur et occaecat.</p>
+      <BaseLoadingCover v-bind="args" />
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SmallSpinner = Template.bind({});
+SmallSpinner.args = {
+  size: 'sm',
+};
+
+export const LargeSpinner = Template.bind({});
+LargeSpinner.args = {
+  size: 'lg',
+};
+
+export const SpinnerCustomClass = Template.bind({});
+SpinnerCustomClass.args = {
+  twIcon: 'text-red-500 w-10 h-10',
+};
+
+export const BackdropCustomClass = Template.bind({});
+BackdropCustomClass.args = {
+  twBackdrop: 'bg-slate-100 opacity-50',
+};