sprintify-ui 0.0.189 → 0.0.190

package/package.json

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

package/src/components/BaseActionItem.vue

@@ -1,14 +1,14 @@
 <template>
   <RouterLink
-    v-if="item.to"
+    v-if="to"
     v-slot="{ isActive, href: slotHref, navigate }"
     custom
-    :to="item.to"
+    :to="to"
   >
     <a
       :active="isActive"
       :href="slotHref"
-      :class="itemClass"
+      :class="props.class"
       :aria-current="isActive ? 'page' : undefined"
       @click.prevent="onClick(navigate)"
     >
@@ -16,41 +16,34 @@
     </a>
   </RouterLink>
   <button
-    v-else-if="item.action"
+    v-else-if="action"
     type="button"
-    :class="itemClass"
-    @click="onClick(item.action)"
+    class="text-left"
+    :class="props.class"
+    @click="onClick(action)"
   >
     <slot :active="false"> </slot>
   </button>
-  <a
-    v-else-if="item.href"
-    :href="item.href"
-    :class="itemClass"
-    @click="onClick()"
-  >
+  <a v-else-if="href" :href="href" :class="props.class" @click="onClick()">
     <slot :active="false"> </slot>
   </a>
 </template>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup lang="ts">
-import { PropType } from 'vue';
-import { ActionItem } from '@/types';
+import { RouteLocationRaw } from 'vue-router';
 
-defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<ActionItem>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  itemClass: {
-    default: '',
-    type: [String, Array, Object],
-  },
-});
+const props = defineProps<{
+  to?: RouteLocationRaw;
+  href?: string;
+  action?: (() => Promise<void>) | (() => void);
+  class?: string | string[] | null;
+}>();
 
 const closeMenu = inject('closeMenu', () => {
   return;

package/src/components/BaseNavbarItem.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="flex">
     <BaseActionItem
-      :item="item"
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
       :dark="dark"
-      item-class="flex w-full"
+      class="flex w-full"
       @click="onClick"
     >
       <template #default="{ active }">

package/src/components/BaseNavbarSideItem.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <BaseActionItem
-      :item="item"
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
       :dark="dark"
-      item-class="flex w-full"
+      class="flex w-full"
       @click="onClick"
     >
       <template #default="{ active }">
@@ -23,9 +25,10 @@
     >
       <div v-for="subItem in item.actions" :key="subItem.label" class="mb-1">
         <BaseActionItem
-          :item="subItem"
-          :dark="dark"
-          :item-class="[
+          :to="subItem.to"
+          :href="subItem.href"
+          :action="subItem.action"
+          :class="[
             'flex w-full',
             dark
               ? 'text-slate-300 hover:text-white'

package/src/components/BaseShortcut.stories.js

@@ -35,7 +35,8 @@ export const Basic = Template.bind({});
 Basic.args = {
   to: '/restaurants',
   title: 'Basic shortcut',
-  icon: 'heroicons:user',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
 };
 
 export const Colors = (args) => ({
@@ -81,3 +82,21 @@ Contrast.args = {
     'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
   linkText: 'Open app',
 };
+
+export const Href = Template.bind({});
+Href.args = {
+  href: 'https://www.google.com',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};
+
+export const Action = Template.bind({});
+Action.args = {
+  action() {
+    alert(1);
+  },
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};

package/src/components/BaseShortcut.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
-    <router-link :to="to">
+    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
       <section class="whitespace-pre-line p-4">
         <!-- Icon -->
         <div
@@ -38,7 +38,7 @@
           </div>
         </div>
       </section>
-    </router-link>
+    </BaseActionItem>
   </BaseCard>
 </template>
 
@@ -48,11 +48,20 @@ import { Icon as BaseIcon } from '@iconify/vue';
 import BaseCard from './BaseCard.vue';
 import { RouteLocationRaw } from 'vue-router';
 import { getColorConfig } from '@/utils/colors';
+import BaseActionItem from './BaseActionItem.vue';
 
 const props = defineProps({
   to: {
-    required: true,
-    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    type: [String, Object, undefined] as PropType<RouteLocationRaw | undefined>,
+  },
+  href: {
+    default: undefined,
+    type: [String, undefined] as PropType<string | undefined>,
+  },
+  action: {
+    default: undefined,
+    type: [Function, undefined] as PropType<() => Promise<void> | undefined>,
   },
   title: {
     required: true,