sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,166 +1,166 @@
-import { DateTime } from 'luxon';
-import PageDashboard from '../../.storybook/components/PageDashboard.vue';
-import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-
-export default {
-  title: 'Layout/BaseLayoutSidebarConfigurable',
-  component: BaseLayoutSidebarConfigurable,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    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: [
-      {
-        title: 'General',
-        actions: [
-          {
-            label: 'Dashboard',
-            to: '/',
-            icon: 'heroicons:home-20-solid',
-          },
-          {
-            label: 'Articles',
-            to: '/articles',
-            icon: 'heroicons:document-text-solid',
-            count: 3134,
-            actions: [
-              {
-                label: 'Articles',
-                to: '/articles/1',
-              },
-              {
-                label: 'Videos',
-                to: '/articles/2',
-              },
-              {
-                label: 'Training',
-                to: '/articles/3',
-              },
-              {
-                label: 'Archived',
-                to: '/articles/4',
-              },
-            ],
-          },
-
-          {
-            label: 'Users',
-            to: '/users',
-            icon: 'heroicons:users-solid',
-          },
-        ],
-      },
-      {
-        title: 'Settings',
-        actions: [
-          {
-            label: 'Account',
-            to: '/account',
-            icon: 'heroicons:cog-solid',
-          },
-          {
-            label: 'Logout',
-            action: logout,
-            icon: 'heroicons:arrow-left-on-rectangle-solid',
-          },
-        ],
-      },
-    ],
-    userMenu: [
-      {
-        label: 'Dashboard',
-        to: '/',
-        icon: 'heroicons:home-solid',
-      },
-      {
-        label: 'Settings',
-        to: '/account',
-        icon: 'heroicons:cog-solid',
-      },
-      {
-        label: 'Logout',
-        action: logout,
-        icon: 'heroicons:arrow-left-on-rectangle-20-solid',
-      },
-    ],
-    notifications: {
-      footerTo: '/',
-      footerLabel: 'See all notifications',
-      items: [
-        {
-          id: '1',
-          text: 'You have a new message',
-          created_at: DateTime.now().minus({ second: 1 }).toISO(),
-        },
-        {
-          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: {
-    BaseLayoutSidebarConfigurable,
-    PageDashboard,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseLayoutSidebarConfigurable v-bind="args">
-      <div class="py-10 bg-slate-50">
-        <PageDashboard />
-      </div>
-    </BaseLayoutSidebarConfigurable>
-  `,
-});
-
-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',
-};
-
-export const SizeXS = Template.bind({});
-SizeXS.args = {
-  size: 'xs',
-  dark: true,
-  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  size: 'sm',
-  dark: true,
-  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  size: 'md',
-  dark: true,
-  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
-};
+import { DateTime } from 'luxon';
+import PageDashboard from '../../.storybook/components/PageDashboard.vue';
+import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+
+export default {
+  title: 'Layout/BaseLayoutSidebarConfigurable',
+  component: BaseLayoutSidebarConfigurable,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    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: [
+      {
+        title: 'General',
+        actions: [
+          {
+            label: 'Dashboard',
+            to: '/',
+            icon: 'heroicons:home-20-solid',
+          },
+          {
+            label: 'Articles',
+            to: '/articles',
+            icon: 'heroicons:document-text-solid',
+            count: 3134,
+            actions: [
+              {
+                label: 'Articles',
+                to: '/articles/1',
+              },
+              {
+                label: 'Videos',
+                to: '/articles/2',
+              },
+              {
+                label: 'Training',
+                to: '/articles/3',
+              },
+              {
+                label: 'Archived',
+                to: '/articles/4',
+              },
+            ],
+          },
+
+          {
+            label: 'Users',
+            to: '/users',
+            icon: 'heroicons:users-solid',
+          },
+        ],
+      },
+      {
+        title: 'Settings',
+        actions: [
+          {
+            label: 'Account',
+            to: '/account',
+            icon: 'heroicons:cog-solid',
+          },
+          {
+            label: 'Logout',
+            action: logout,
+            icon: 'heroicons:arrow-left-on-rectangle-solid',
+          },
+        ],
+      },
+    ],
+    userMenu: [
+      {
+        label: 'Dashboard',
+        to: '/',
+        icon: 'heroicons:home-solid',
+      },
+      {
+        label: 'Settings',
+        to: '/account',
+        icon: 'heroicons:cog-solid',
+      },
+      {
+        label: 'Logout',
+        action: logout,
+        icon: 'heroicons:arrow-left-on-rectangle-20-solid',
+      },
+    ],
+    notifications: {
+      footerTo: '/',
+      footerLabel: 'See all notifications',
+      items: [
+        {
+          id: '1',
+          text: 'You have a new message',
+          created_at: DateTime.now().minus({ second: 1 }).toISO(),
+        },
+        {
+          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: {
+    BaseLayoutSidebarConfigurable,
+    PageDashboard,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseLayoutSidebarConfigurable v-bind="args">
+      <div class="py-10 bg-slate-50">
+        <PageDashboard />
+      </div>
+    </BaseLayoutSidebarConfigurable>
+  `,
+});
+
+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',
+};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+  dark: true,
+  logoUrl: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+};

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -1,167 +1,167 @@
-<template>
-  <BaseLayoutSidebar
-    :app-name="appName"
-    :logo-url="logoUrl"
-    :dark="dark"
-    :size="size"
-  >
-    <template #menu>
-      <div class="px-3 py-6">
-        <div class="space-y-8">
-          <div v-for="section in actionSections" :key="section.title">
-            <h2 v-if="section.title" class="pl-3" :class="sectionTitleClasses">
-              {{ section.title }}
-            </h2>
-            <div>
-              <div :class="[size == 'md' ? 'space-y-1' : 'space-y-0.5']">
-                <BaseNavbarSideItem
-                  v-for="item in section.actions"
-                  :key="item.label"
-                  :item="item"
-                  :dark="dark"
-                  :size="size"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #navbar>
-      <div class="flex flex-1 justify-between px-4">
-        <div class="flex flex-1">
-          <!-- Good spot for search bar... -->
-        </div>
-
-        <div class="ml-4 flex items-center md:ml-6">
-          <!-- Notification dropdown -->
-          <BaseLayoutNotificationDropdown
-            v-if="notifications"
-            :notifications-config="notifications"
-            class="mr-1 sm:mr-2"
-            :size="size"
-            @click="onNotificationClick"
-            @open="onNotificationOpen"
-          ></BaseLayoutNotificationDropdown>
-
-          <!-- Profile dropdown -->
-          <div
-            class="relative mr-2"
-            :class="{
-              'ml-2': size == 'md',
-              'ml-1': size == 'sm',
-              'ml-0': size == 'xs',
-            }"
-          >
-            <BaseMenu :items="userMenu" :size="size == 'xs' ? 'xs' : 'sm'">
-              <template #button="{ open }">
-                <div
-                  class="flex rounded-md p-1.5 hover:bg-slate-100"
-                  :class="[open ? 'bg-slate-100' : '']"
-                >
-                  <BaseAvatar :user="user" :size="size" show-details />
-                </div>
-              </template>
-            </BaseMenu>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #default>
-      <slot />
-    </template>
-  </BaseLayoutSidebar>
-</template>
-
-<script setup lang="ts">
-import { User } from '@/types/User';
-import { PropType } from 'vue';
-import { ActionItem, ActionSection, NotificationsConfig } from '../types';
-import BaseAvatar from './BaseAvatar.vue';
-import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
-import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
-import BaseMenu from './BaseMenu.vue';
-import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
-
-const emit = defineEmits(['notification:click', 'notification:open']);
-
-const props = defineProps({
-  appName: {
-    default: '',
-    type: String,
-  },
-  logoUrl: {
-    default: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
-    type: String,
-  },
-  menu: {
-    required: true,
-    type: Array as PropType<ActionItem[] | ActionSection[]>,
-  },
-  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,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const actionSections = computed((): ActionSection[] => {
-  const isActionSections = props.menu.length > 0 && 'actions' in props.menu[0];
-
-  if (isActionSections) {
-    return props.menu as ActionSection[];
-  }
-
-  return [
-    {
-      title: '',
-      actions: props.menu as ActionItem[],
-    },
-  ];
-});
-
-const sectionTitleClasses = computed((): string[] => {
-  const classList = ['mb-3 font-semibold uppercase tracking-widest'];
-
-  if (props.dark) {
-    classList.push('text-gray-400');
-  } else {
-    classList.push('text-gray-500');
-  }
-
-  if (props.size === 'xs') {
-    classList.push('text-[10px]');
-  } else if (props.size === 'sm') {
-    classList.push('text-[11px]');
-  } else if (props.size === 'md') {
-    classList.push('text-xs');
-  }
-
-  return classList;
-});
-
-function onNotificationClick(notification: Notification) {
-  emit('notification:click', notification);
-}
-
-function onNotificationOpen() {
-  emit('notification:open');
-}
-</script>
+<template>
+  <BaseLayoutSidebar
+    :app-name="appName"
+    :logo-url="logoUrl"
+    :dark="dark"
+    :size="size"
+  >
+    <template #menu>
+      <div class="px-3 py-6">
+        <div class="space-y-8">
+          <div v-for="section in actionSections" :key="section.title">
+            <h2 v-if="section.title" class="pl-3" :class="sectionTitleClasses">
+              {{ section.title }}
+            </h2>
+            <div>
+              <div :class="[size == 'md' ? 'space-y-1' : 'space-y-0.5']">
+                <BaseNavbarSideItem
+                  v-for="item in section.actions"
+                  :key="item.label"
+                  :item="item"
+                  :dark="dark"
+                  :size="size"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #navbar>
+      <div class="flex flex-1 justify-between px-4">
+        <div class="flex flex-1">
+          <!-- Good spot for search bar... -->
+        </div>
+
+        <div class="ml-4 flex items-center md:ml-6">
+          <!-- Notification dropdown -->
+          <BaseLayoutNotificationDropdown
+            v-if="notifications"
+            :notifications-config="notifications"
+            class="mr-1 sm:mr-2"
+            :size="size"
+            @click="onNotificationClick"
+            @open="onNotificationOpen"
+          ></BaseLayoutNotificationDropdown>
+
+          <!-- Profile dropdown -->
+          <div
+            class="relative mr-2"
+            :class="{
+              'ml-2': size == 'md',
+              'ml-1': size == 'sm',
+              'ml-0': size == 'xs',
+            }"
+          >
+            <BaseMenu :items="userMenu" :size="size == 'xs' ? 'xs' : 'sm'">
+              <template #button="{ open }">
+                <div
+                  class="flex rounded-md p-1.5 hover:bg-slate-100"
+                  :class="[open ? 'bg-slate-100' : '']"
+                >
+                  <BaseAvatar :user="user" :size="size" show-details />
+                </div>
+              </template>
+            </BaseMenu>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <slot />
+    </template>
+  </BaseLayoutSidebar>
+</template>
+
+<script setup lang="ts">
+import { User } from '@/types/User';
+import { PropType } from 'vue';
+import { ActionItem, ActionSection, NotificationsConfig } from '../types';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
+import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+
+const emit = defineEmits(['notification:click', 'notification:open']);
+
+const props = defineProps({
+  appName: {
+    default: '',
+    type: String,
+  },
+  logoUrl: {
+    default: 'https://sprintify.witify.io/img/logo/logo-side-dark.svg',
+    type: String,
+  },
+  menu: {
+    required: true,
+    type: Array as PropType<ActionItem[] | ActionSection[]>,
+  },
+  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,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const actionSections = computed((): ActionSection[] => {
+  const isActionSections = props.menu.length > 0 && 'actions' in props.menu[0];
+
+  if (isActionSections) {
+    return props.menu as ActionSection[];
+  }
+
+  return [
+    {
+      title: '',
+      actions: props.menu as ActionItem[],
+    },
+  ];
+});
+
+const sectionTitleClasses = computed((): string[] => {
+  const classList = ['mb-3 font-semibold uppercase tracking-widest'];
+
+  if (props.dark) {
+    classList.push('text-gray-400');
+  } else {
+    classList.push('text-gray-500');
+  }
+
+  if (props.size === 'xs') {
+    classList.push('text-[10px]');
+  } else if (props.size === 'sm') {
+    classList.push('text-[11px]');
+  } else if (props.size === 'md') {
+    classList.push('text-xs');
+  }
+
+  return classList;
+});
+
+function onNotificationClick(notification: Notification) {
+  emit('notification:click', notification);
+}
+
+function onNotificationOpen() {
+  emit('notification:open');
+}
+</script>