sprintify-ui 0.6.41 → 0.6.43

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

@@ -1,4 +1,8 @@
 import { Breadcrumb, ActionItem } from '@/types';
+import BaseBadge from './BaseBadge.vue';
+type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
+    label: string;
+};
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: import("vue").PropType<string>;
@@ -28,11 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     badge: {
-        type: import("vue").PropType<{
-            icon: string;
-            label: string;
-            color: string;
-        }>;
+        type: import("vue").PropType<BaseBadgeProps>;
         default: undefined;
     };
     maxActions: {
@@ -68,11 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     badge: {
-        type: import("vue").PropType<{
-            icon: string;
-            label: string;
-            color: string;
-        }>;
+        type: import("vue").PropType<BaseBadgeProps>;
         default: undefined;
     };
     maxActions: {
@@ -88,11 +84,7 @@ declare const _default: import("vue").DefineComponent<{
         label: string;
     }[];
     subtitle: string;
-    badge: {
-        icon: string;
-        label: string;
-        color: string;
-    };
+    badge: BaseBadgeProps;
     maxActions: number;
 }, {}>;
 export default _default;

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

@@ -21,6 +21,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     color: {
         default: string;
         type: PropType<ActionColors>;
@@ -50,6 +54,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     color: {
         default: string;
         type: PropType<ActionColors>;
@@ -65,6 +73,7 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     size: "xs" | "sm" | "md";
     description: string;
+    disabled: boolean;
     count: number;
 }, {}>;
 export default _default;

package/dist/types/src/types/index.d.ts

@@ -180,6 +180,7 @@ export interface RowAction {
     icon: string;
     action?: (row: CollectionItem) => Promise<void> | void;
     to?: (row: CollectionItem) => RouteLocationRaw;
+    href?: (row: CollectionItem) => string;
     disabled?: (row: CollectionItem) => boolean;
 }
 export interface CropperConfig {

package/package.json

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

package/src/components/BaseDataTable.stories.js

@@ -116,12 +116,18 @@ Demo.args = {
   ],
   rowActions: [
     {
-      label: 'Open Google',
-      icon: 'heroicons:link',
+      label: 'Href',
+      icon: 'heroicons:link-20-solid',
+      href: () => 'https://google.com',
+    },
+    {
+      label: 'Action',
+      icon: 'heroicons:arrow-right-20-solid',
       action() {
         alert('hit');
       },
     },
+
   ],
   sections: [
     {

package/src/components/BaseDataTable.vue

@@ -691,6 +691,7 @@ function rowActionMenuItems(row: CollectionItem): ActionItem[] {
         }
         : undefined,
       to: action.to ? action.to(row) : undefined,
+      href: action.href ? action.href(row) : undefined,
     };
   });
 }

package/src/components/BaseDataTableRowAction.vue

@@ -18,14 +18,35 @@
       }"
     />
   </button>
-  <RouterLink
+  <component
+    :is="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'a'"
+    v-else-if="rowAction.href"
+    :href="rowAction.href(row)"
+    class="btn btn-white border border-slate-300 shadow-sm"
+    :class="{
+      'btn-xs px-1.5 py-1': size === 'sm',
+      'btn-sm px-2 py-1.5': size === 'md',
+      'opacity-50 cursor-not-allowed': rowAction.disabled && rowAction.disabled(row),
+    }"
+    :disabled="rowAction.disabled && rowAction.disabled(row)"
+  >
+    <BaseIcon
+      :icon="rowAction.icon"
+      class="text-slate-500"
+      :class="{
+        'h-3 w-3': size === 'sm',
+      }"
+    />
+  </component>
+  <component
+    :is="(rowAction.disabled && rowAction.disabled(row)) ? 'span' : 'router-link'"
     v-else-if="rowAction.to"
     :to="rowAction.to(row)"
-    :disabled="rowAction.disabled && rowAction.disabled(row)"
     class="btn btn-white border border-slate-300 shadow-sm hover:bg-slate-100"
     :class="{
       'btn-xs px-1.5 py-1': size === 'sm',
       'btn-sm px-2 py-1.5': size === 'md',
+      'opacity-50 cursor-not-allowed': rowAction.disabled && rowAction.disabled(row),
     }"
   >
     <BaseIcon
@@ -35,7 +56,7 @@
         'h-3 w-3': size === 'sm',
       }"
     />
-  </RouterLink>
+  </component>
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseHeader.vue

@@ -18,11 +18,10 @@
             class="order-1 mb-1 xs:order-2 xs:mb-0"
           >
             <BaseBadge
-              :color="badge.color"
-              :icon="badge.icon"
+              v-bind="badge"
               class="relative xs:-bottom-[2px]"
             >
-              {{ badge.label }}
+              {{ badge?.label }}
             </BaseBadge>
           </div>
         </div>
@@ -106,13 +105,17 @@ import BaseBadge from './BaseBadge.vue';
 import BaseMenu from './BaseMenu.vue';
 import { cloneDeep } from 'lodash';
 
+type BaseBadgeProps = InstanceType<typeof BaseBadge>["$props"] & {
+  label: string;
+};
+
 const props = withDefaults(
   defineProps<{
     title: string;
     subtitle?: string;
     attributes?: { icon: string; label: string }[];
     actions?: ActionItem[];
-    badge?: { icon: string; label: string; color: string };
+    badge?: BaseBadgeProps;
     layout?: 'default' | 'compact';
     breadcrumbs?: Breadcrumb[];
     maxActions?: number;

package/src/components/BaseMenu.vue

@@ -53,7 +53,8 @@
                   v-else-if="item.to"
                   v-slot="{ active, close }"
                 >
-                  <RouterLink
+                  <component
+                    :is="item.disabled ? 'span' : 'router-link'"
                     :to="item.to"
                     @mouseup="close"
                   >
@@ -66,17 +67,18 @@
                         :count="item.count"
                         :icon="item.icon"
                         :color="item.color"
+                        :disabled="item.disabled"
                         :active="active"
                         :size="size"
                       />
                     </slot>
-                  </RouterLink>
+                  </component>
                 </MenuItem>
 
                 <MenuItem
                   v-else-if="item.href"
                   v-slot="{ active }"
-                  as="a"
+                  :as="item.disabled ? 'span' : 'a'"
                   :href="item.href"
                 >
                   <slot
@@ -88,6 +90,7 @@
                       :count="item.count"
                       :icon="item.icon"
                       :color="item.color"
+                      :disabled="item.disabled"
                       :active="active"
                       :size="size"
                     />
@@ -100,7 +103,7 @@
                   as="button"
                   type="button"
                   class="w-full"
-                  @click="item.action"
+                  @click="item.disabled ? false : item.action()"
                 >
                   <slot
                     name="item"
@@ -112,6 +115,7 @@
                       :count="item.count"
                       :icon="item.icon"
                       :color="item.color"
+                      :disabled="item.disabled"
                       :active="active"
                       :size="size"
                     />

package/src/components/BaseMenuItem.vue

@@ -1,8 +1,12 @@
 <template>
   <div
     :style="buttonStyles"
-    class="rounded leading-tight hover:bg-slate-100"
-    :class="[active ? 'bg-slate-100' : 'bg-white']"
+    class="rounded leading-tight "
+    :class="[
+      !disabled ? 'hover:bg-slate-100' : '',
+      active && !disabled ? 'bg-slate-100' : 'bg-white',
+      disabled ? 'opacity-50 cursor-not-allowed' : ''
+    ]"
   >
     <div
       class="flex"
@@ -66,6 +70,10 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
   color: {
     default: 'dark',
     type: String as PropType<ActionColors>,

package/src/types/index.ts

@@ -224,6 +224,7 @@ export interface RowAction {
   icon: string;
   action?: (row: CollectionItem) => Promise<void> | void;
   to?: (row: CollectionItem) => RouteLocationRaw;
+  href?: (row: CollectionItem) => string;
   disabled?: (row: CollectionItem) => boolean;
 }