sprintify-ui 0.0.19 → 0.0.21

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -0,0 +1,129 @@
+import BaseContainer from './BaseContainer.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',
+          },
+          {
+            label: 'Articles',
+            to: '/articles',
+            icon: 'heroicons:document-text',
+          },
+          {
+            label: 'Users',
+            to: '/users',
+            icon: 'heroicons:users',
+          },
+        ],
+      },
+      {
+        title: 'Settings',
+        actions: [
+          {
+            label: 'Account',
+            to: '/account',
+            icon: 'heroicons:cog',
+          },
+          {
+            label: 'Logout',
+            action: logout,
+            icon: 'heroicons:arrow-left-on-rectangle',
+          },
+        ],
+      },
+    ],
+    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-01-01T00:00:00',
+        },
+        {
+          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: {
+    BaseContainer,
+    BaseLayoutSidebarConfigurable,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseLayoutSidebarConfigurable 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>
+    </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',
+};

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -0,0 +1,118 @@
+<template>
+  <BaseLayoutSidebar :app-name="appName" :logo-url="logoUrl" :dark="dark">
+    <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="mb-3 pl-3 text-xs font-semibold uppercase tracking-widest"
+              :class="dark ? 'text-slate-400' : 'text-slate-500'"
+            >
+              {{ section.title }}
+            </h2>
+            <div>
+              <div class="space-y-1">
+                <BaseNavbarSideItem
+                  v-for="item in section.actions"
+                  :key="item.label"
+                  :item="item"
+                  :dark="dark"
+                />
+              </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"
+          ></BaseLayoutNotificationDropdown>
+
+          <!-- Profile dropdown -->
+          <div class="relative ml-3 mr-3">
+            <BaseMenu :items="userMenu">
+              <template #button="{ open }">
+                <div class="flex" :class="[open ? '' : '']">
+                  <BaseAvatar :user="user" 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/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 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,
+  },
+});
+
+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[],
+    },
+  ];
+});
+</script>

package/src/components/BaseLayoutStacked.vue

@@ -0,0 +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>

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -0,0 +1,110 @@
+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,
+        type: 'RouterLink',
+      },
+      {
+        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

@@ -0,0 +1,129 @@
+<template>
+  <BaseLayoutStacked :dark="dark">
+    <template #navbar>
+      <div class="flex h-16 justify-between">
+        <!-- Left -->
+
+        <div class="flex justify-center">
+          <!-- Logo -->
+          <router-link to="/" class="flex flex-shrink-0 items-center p-2 pl-0">
+            <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
+          </router-link>
+
+          <!-- 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"
+          ></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/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';
+
+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,
+  },
+});
+</script>

package/src/components/BaseMediaItem.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="rounded border border-slate-300 bg-white shadow">
+  <div class="rounded bg-white shadow">
     <div class="relative flex">
       <div class="shrink-0">
-        <BaseMediaPreview class="h-14 w-14 rounded-l" :media="media" />
+        <BaseMediaPreview class="h-12 w-12 rounded-l" :media="media" />
       </div>
       <component
         :is="url ? 'a' : 'p'"
         :href="url"
         target="_blank"
-        class="grow overflow-hidden px-3 pt-3"
+        class="flex grow items-center overflow-hidden px-3"
       >
         <div class="text-left leading-tight">
-          <p class="grow truncate text-sm font-medium">
+          <p class="mb-px grow truncate text-[13px] font-medium">
             {{ name }}
           </p>
-          <p class="shrink-0 text-[10px] font-medium text-slate-400">
+          <p class="shrink-0 text-[10px] text-slate-400">
             {{ size }}
           </p>
         </div>
       </component>
-      <div v-if="showRemove" class="shrink-0 p-2">
+      <div v-if="showRemove" class="shrink-0 p-0.5">
         <button
           type="button"
-          class="rounded-full bg-slate-400 p-1 text-white hover:bg-slate-500"
+          class="rounded-full bg-white p-1 text-slate-400 hover:bg-slate-100"
           @click="$emit('remove')"
         >
           <BaseIcon icon="heroicons:x-mark-20-solid" class="h-4 w-4"></BaseIcon>

package/src/components/BaseMediaLibrary.vue

@@ -22,16 +22,16 @@
           <div
             class="rounded border border-dashed p-6 duration-150"
             :class="[
-              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-slate-100',
+              baseFileUploaderProps.dragging ? 'bg-blue-100' : 'bg-white',
               baseFileUploaderProps.disabled
                 ? 'cursor-not-allowed border-slate-300'
-                : 'border-slate-300 hover:bg-slate-50',
+                : 'border-slate-300 hover:bg-slate-100',
             ]"
           >
             <div :class="[baseFileUploaderProps.disabled ? 'opacity-30' : '']">
               <BaseIcon
                 icon="heroicons:arrow-up-on-square"
-                class="mx-auto mb-3 h-6 w-6 text-primary-500"
+                class="mx-auto mb-3 h-6 w-6 text-slate-500"
               />
               <div class="text-center">
                 <p class="mb-0 text-sm font-medium leading-tight">

package/src/components/BaseMediaPreview.vue

@@ -20,7 +20,7 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-slate-200"
+      class="flex h-full w-full items-center justify-center bg-slate-100"
     >
       <BaseIcon
         v-if="extension == 'pdf'"

package/src/components/BaseMenu.vue

@@ -1,5 +1,10 @@
 <template>
-  <Menu v-slot="{ open }" as="div" class="relative text-left">
+  <Menu
+    v-slot="{ open }"
+    as="div"
+    class="text-left"
+    :class="[position == 'custom' ? 'static' : 'relative']"
+  >
     <div>
       <MenuButton class="flex">
         <slot name="button" :open="open" />
@@ -18,7 +23,7 @@
         :class="[menuClass, menuPositionClass]"
         class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
-        <slot name="items">
+        <slot name="items" :items="items">
           <template v-for="item in items" :key="item.label + 'link'">
             <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-gray-200" />
 
@@ -95,15 +100,18 @@ const props = defineProps({
   },
   menuClass: {
     default: 'w-48',
-    type: String,
+    type: [String, Array, Object],
   },
   position: {
     default: 'bottom-left',
-    type: String as PropType<'bottom-left' | 'bottom-right'>,
+    type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
   },
 });
 
 const menuPositionClass = computed(() => {
+  if (props.position == 'custom') {
+    return '';
+  }
   if (props.position == 'bottom-left') {
     return 'origin-top-right right-0';
   }