sprintify-ui 0.1.16 → 0.1.17

package/src/components/BaseLayoutStacked.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="sticky top-0 z-20 w-full shadow-sm">
-    <BaseSystemAlert
-      v-for="systemAlert in systemAlerts"
-      :key="systemAlert.id"
-      :color="systemAlert.color"
-      :to="systemAlert.to"
-      :action="systemAlert.action"
-      :closable="systemAlert.closable"
-      @close="systemAlertStore.remove(systemAlert)"
-    >
-      {{ systemAlert.message }}
-    </BaseSystemAlert>
-
-    <BaseNavbar :dark="dark">
-      <template #navbar>
-        <slot name="navbar" />
-      </template>
-
-      <template #mobile>
-        <slot name="mobile" />
-      </template>
-    </BaseNavbar>
-  </div>
-
-  <div>
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useSystemAlertStore } from '../stores/systemAlerts';
-import BaseNavbar from './BaseNavbar.vue';
-import BaseSystemAlert from './BaseSystemAlert.vue';
-
-defineProps({
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-/**
- * System Alerts
- */
-
-const systemAlertStore = useSystemAlertStore();
-
-const systemAlerts = computed(() => {
-  return systemAlertStore.systemAlerts;
-});
-</script>
+<template>
+  <div class="sticky top-0 z-20 w-full shadow-sm">
+    <BaseSystemAlert
+      v-for="systemAlert in systemAlerts"
+      :key="systemAlert.id"
+      :color="systemAlert.color"
+      :to="systemAlert.to"
+      :action="systemAlert.action"
+      :closable="systemAlert.closable"
+      @close="systemAlertStore.remove(systemAlert)"
+    >
+      {{ systemAlert.message }}
+    </BaseSystemAlert>
+
+    <BaseNavbar :dark="dark">
+      <template #navbar>
+        <slot name="navbar" />
+      </template>
+
+      <template #mobile>
+        <slot name="mobile" />
+      </template>
+    </BaseNavbar>
+  </div>
+
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useSystemAlertStore } from '../stores/systemAlerts';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+defineProps({
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+/**
+ * System Alerts
+ */
+
+const systemAlertStore = useSystemAlertStore();
+
+const systemAlerts = computed(() => {
+  return systemAlertStore.systemAlerts;
+});
+</script>

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,141 +1,141 @@
-<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"
-          ></BaseLayoutNotificationDropdown>
-
-          <!-- Profile dropdown -->
-          <BaseMenu menu-class="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"
+          ></BaseLayoutNotificationDropdown>
+
+          <!-- Profile dropdown -->
+          <BaseMenu menu-class="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>