sprintify-ui 0.2.19 → 0.2.21

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -1,181 +1,181 @@
-<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"
-          />
-
-          <!-- 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"
+          />
+
+          <!-- 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>

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>