sprintify-ui 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -39,7 +39,7 @@
     "vue-router": "^4.0.0"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.9",
+    "@headlessui/vue": "^1.7.12",
     "color2k": "^2.0.2"
   },
   "devDependencies": {

package/src/components/BaseActionItemButton.vue

@@ -4,7 +4,7 @@
     :href="action.href"
     :action="action.action"
     :class="classes"
-    class="flex items-center"
+    class="flex items-center justify-center"
   >
     <BaseIcon
       v-if="action.icon"

package/src/components/BaseDataTableRowAction.vue

@@ -8,14 +8,14 @@
   >
     <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
   </button>
-  <router-link
+  <RouterLink
     v-else-if="rowAction.to"
     :to="rowAction.to(row)"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     class="btn btn-white border border-slate-300 p-2 shadow-sm hover:bg-slate-100"
   >
     <BaseIcon :icon="rowAction.icon" class="text-slate-500" />
-  </router-link>
+  </RouterLink>
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseHeader.vue

@@ -3,37 +3,36 @@
     <BaseBreadcrumbs
       v-if="breadcrumbs"
       :breadcrumbs="breadcrumbs"
-      :class="[attributes || subtitle ? 'mb-3' : 'mb-2']"
-    ></BaseBreadcrumbs>
+      class="mb-2"
+    />
+
     <div class="lg:flex lg:items-center lg:justify-between">
       <div class="min-w-0 flex-1">
-        <div
-          class="flex flex-wrap items-center"
-          :class="[compactLayout ? 'gap-2' : 'gap-3']"
-        >
+        <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
           <h2
-            class="font-bold text-slate-900"
+            class="order-2 font-bold text-slate-900 xs:order-1"
             :class="[
               compactLayout
-                ? 'text-2xl leading-7'
-                : 'truncate text-3xl tracking-tight',
+                ? 'mr-2 text-2xl leading-7'
+                : 'mr-3 truncate text-3xl tracking-tight',
             ]"
           >
             {{ title }}
           </h2>
 
-          <BaseBadge
-            v-if="badge"
-            :color="badge.color"
-            :icon="badge.icon"
-            class="relative -bottom-px"
-          >
-            {{ badge.label }}
-          </BaseBadge>
+          <div v-if="badge" class="order-1 mb-1 xs:order-2 xs:mb-0">
+            <BaseBadge
+              :color="badge.color"
+              :icon="badge.icon"
+              class="relative xs:-bottom-[2px]"
+            >
+              {{ badge.label }}
+            </BaseBadge>
+          </div>
         </div>
         <h3
           v-if="subtitle"
-          class="mt-0.5 leading-tight text-slate-500"
+          class="mt-1 leading-tight text-slate-500"
           :class="[compactLayout ? 'text-sm' : 'truncate text-base']"
         >
           {{ subtitle }}
@@ -70,7 +69,7 @@
         />
 
         <BaseMenu
-          v-if="secondaryActions.length"
+          v-if="secondaryActions.length > 1"
           :items="secondaryActions"
           size="sm"
           position="bottom-right"
@@ -88,6 +87,11 @@
             </div>
           </template>
         </BaseMenu>
+        <BaseActionItemButton
+          v-else-if="secondaryActions.length === 1"
+          :action="secondaryActions[0]"
+          size="sm"
+        />
       </div>
 
       <div v-else class="mt-5 flex gap-2 lg:mt-0 lg:ml-4">
@@ -131,13 +135,21 @@ const props = withDefaults(
 );
 
 const primaryActionIndex = computed(() => {
-  if (!props.actions) {
+  if (!props.actions || props.actions.length === 0) {
     return undefined;
   }
+
   if (props.actions?.length === 1) {
     return 0;
   }
-  return props.actions?.findIndex((a) => a.color == 'primary');
+
+  const primaryIndex = props.actions?.findIndex((a) => a.color == 'primary');
+
+  if (primaryIndex !== -1) {
+    return primaryIndex;
+  }
+
+  return 0;
 });
 
 const primaryAction = computed(() => {
@@ -147,7 +159,7 @@ const primaryAction = computed(() => {
 
   const index = primaryActionIndex.value;
 
-  if (index) {
+  if (index !== undefined) {
     return props.actions[index];
   }
 

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -30,6 +30,7 @@
           @click="onClick"
         ></BaseLayoutNotificationItem>
       </template>
+
       <div
         v-if="notificationsConfig.items.length == 0"
         class="flex items-center justify-center p-6"
@@ -49,14 +50,11 @@
         v-if="notificationsConfig.footerTo"
         class="mt-1 border-t border-slate-200 pt-1"
       >
-        <RouterLink
-          v-slot="{ href, navigate }"
-          custom
-          :to="notificationsConfig.footerTo"
-        >
-          <MenuItem as="a" :href="href" @click="navigate">
+        <MenuItem v-slot="{ active, close }">
+          <RouterLink :to="notificationsConfig.footerTo" @mouseup="close">
             <div
               class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
+              :class="[active ? 'bg-slate-100' : '']"
             >
               {{
                 notificationsConfig.footerLabel
@@ -64,8 +62,8 @@
                   : $t('sui.see_all_notifications')
               }}
             </div>
-          </MenuItem>
-        </RouterLink>
+          </RouterLink>
+        </MenuItem>
       </div>
     </template>
   </BaseMenu>

package/src/components/BaseLayoutNotificationItem.vue

@@ -1,32 +1,18 @@
 <template>
-  <router-link
-    v-if="notification.to"
-    v-slot="{ href, navigate }"
-    custom
-    :to="notification.to"
-  >
-    <MenuItem
-      v-slot="{ active }"
-      as="a"
-      :href="href"
-      @click.prevent="onClick(navigate)"
-    >
+  <MenuItem v-if="notification.to" v-slot="{ active, close }">
+    <RouterLink :to="notification.to" @mouseup="onClick(close)">
       <BaseLayoutNotificationItemContent
         :active="active"
         :notification="notification"
       ></BaseLayoutNotificationItemContent>
-    </MenuItem>
-  </router-link>
+    </RouterLink>
+  </MenuItem>
   <div v-else>
-    <MenuItem
-      v-slot="{ active }"
-      as="button"
-      class="w-full text-left"
-      @click.prevent="onClick()"
-    >
+    <MenuItem v-slot="{ active }" as="button" class="w-full text-left">
       <BaseLayoutNotificationItemContent
         :active="active"
         :notification="notification"
+        @mouseup="onClick()"
       ></BaseLayoutNotificationItemContent>
     </MenuItem>
   </div>
@@ -47,10 +33,11 @@ const props = defineProps({
   },
 });
 
-function onClick(navigate: (() => void) | null) {
+function onClick(close: () => void | null) {
   emit('click', props.notification);
-  if (navigate) {
-    navigate();
+
+  if (close) {
+    close();
   }
 }
 </script>

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -6,9 +6,9 @@
 
         <div class="flex justify-center">
           <!-- Logo -->
-          <router-link to="/" class="flex flex-shrink-0 items-center p-2 pl-0">
+          <RouterLink 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>
+          </RouterLink>
 
           <!-- Links (desktop) -->
           <div class="ml-10 hidden space-x-4 md:flex">

package/src/components/BaseMenu.vue

@@ -27,18 +27,8 @@
           <template v-for="item in items" :key="item.label + 'link'">
             <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-slate-200" />
 
-            <router-link
-              v-else-if="item.to"
-              v-slot="{ href, navigate }"
-              custom
-              :to="item.to"
-            >
-              <MenuItem
-                v-slot="{ active }"
-                as="a"
-                :href="href"
-                @click="navigate"
-              >
+            <MenuItem v-else-if="item.to" v-slot="{ active, close }">
+              <RouterLink :to="item.to" @mouseup="close">
                 <slot name="item" :item="item">
                   <BaseMenuItem
                     :label="item.label"
@@ -49,8 +39,8 @@
                     :size="size"
                   />
                 </slot>
-              </MenuItem>
-            </router-link>
+              </RouterLink>
+            </MenuItem>
 
             <MenuItem
               v-else-if="item.href"

package/src/components/BaseNavbar.stories.js

@@ -76,13 +76,13 @@ const Template = (args) => ({
 
             <div class="flex justify-center">
               <!-- Logo -->
-              <router-link to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+              <RouterLink to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
                 <img
                   class="block h-8 w-auto"
                   src="https://sprintify.witify.io/img/logo/logo-side.svg"
                   alt="Sprintify"
                 />
-              </router-link>
+              </RouterLink>
 
               <!-- Links (desktop) -->
               <div class="ml-10 hidden space-x-4 md:flex">

package/src/components/BaseSideNavigationItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link
+  <RouterLink
     v-slot="{ href, navigate, isActive, isExactActive }"
     :to="to"
     custom
@@ -29,7 +29,7 @@
         <slot :active="isActiveInternal(isActive, isExactActive)" />
       </div>
     </a>
-  </router-link>
+  </RouterLink>
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseTabItem.vue

@@ -1,6 +1,6 @@
 <template>
   <li>
-    <router-link
+    <RouterLink
       v-slot="{ href, navigate, isActive, isExactActive }"
       :to="to"
       custom
@@ -32,7 +32,7 @@
           </div>
         </div>
       </a>
-    </router-link>
+    </RouterLink>
   </li>
 </template>
 

package/dist/types/src/components/BaseTitle.vue.d.ts

@@ -1,45 +0,0 @@
-import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-declare const _default: import("vue").DefineComponent<{
-    title: {
-        required: true;
-        type: StringConstructor;
-    };
-    subtitle: {
-        default: string;
-        type: StringConstructor;
-    };
-    level: {
-        default: number;
-        type: NumberConstructor;
-    };
-    back: {
-        default: string;
-        type: PropType<RouteLocationRaw>;
-    };
-}, unknown, unknown, {
-    titleClass(): string;
-    subtitleClass(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        required: true;
-        type: StringConstructor;
-    };
-    subtitle: {
-        default: string;
-        type: StringConstructor;
-    };
-    level: {
-        default: number;
-        type: NumberConstructor;
-    };
-    back: {
-        default: string;
-        type: PropType<RouteLocationRaw>;
-    };
-}>>, {
-    subtitle: string;
-    level: number;
-    back: RouteLocationRaw;
-}>;
-export default _default;

package/src/components/BaseTitle.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="flex w-full space-x-4">
-    <div v-if="back">
-      <router-link
-        :to="back"
-        class="block rounded-full border border-slate-200 bg-white p-2 shadow duration-150 hover:bg-slate-100"
-      >
-        <BaseIcon class="h-6 w-6" icon="mdi:chevron-left" />
-      </router-link>
-    </div>
-    <div class="grow sm:flex sm:items-start">
-      <div class="sm:flex-auto">
-        <component :is="`h${level}`" :class="titleClass">
-          {{ title }}
-        </component>
-        <p v-if="subtitle" :class="subtitleClass">
-          {{ subtitle }}
-        </p>
-      </div>
-      <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-        <slot name="actions" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-
-export default defineComponent({
-  props: {
-    title: {
-      required: true,
-      type: String,
-    },
-    subtitle: {
-      default: '',
-      type: String,
-    },
-    level: {
-      default: 1,
-      type: Number,
-    },
-    back: {
-      default: '',
-      type: [String, Object] as PropType<RouteLocationRaw>,
-    },
-  },
-  computed: {
-    titleClass(): string {
-      let classes =
-        'font-display md:leading-tight font-semibold text-slate-900';
-
-      if (this.level == 1) {
-        classes += ' md:text-3xl text-3xl leading-9';
-      }
-
-      if (this.level == 2) {
-        classes += ' md:text-xl text-xl leading-6';
-      }
-
-      return classes;
-    },
-    subtitleClass(): string {
-      let classes = 'mt-1 text-slate-600';
-
-      if (this.level == 1) {
-        classes += ' text-base leading-5';
-      }
-
-      if (this.level == 2) {
-        classes += ' text-base leading-5';
-      }
-
-      return classes;
-    },
-  },
-});
-</script>