sprintify-ui 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

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/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>