sprintify-ui 0.6.59 → 0.6.61

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

@@ -23,10 +23,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     align: {
         type: import("vue").PropType<"left" | "right" | "center">;
-        default: undefined;
+        default: string;
     };
     colspan: {
-        type: import("vue").PropType<number>;
+        type: import("vue").PropType<string | number>;
         default: undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -52,10 +52,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     align: {
         type: import("vue").PropType<"left" | "right" | "center">;
-        default: undefined;
+        default: string;
     };
     colspan: {
-        type: import("vue").PropType<number>;
+        type: import("vue").PropType<string | number>;
         default: undefined;
     };
 }>>, {
@@ -65,7 +65,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     target: "_blank" | "_self" | "_parent" | "_top";
     href: string;
     align: "left" | "right" | "center";
-    colspan: number;
+    colspan: string | number;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -6,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     align: {
         type: import("vue").PropType<"left" | "right" | "center">;
-        default: undefined;
+        default: string;
     };
     colspan: {
         type: import("vue").PropType<number>;
@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     align: {
         type: import("vue").PropType<"left" | "right" | "center">;
-        default: undefined;
+        default: string;
     };
     colspan: {
         type: import("vue").PropType<number>;

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

@@ -1,5 +1,10 @@
+import { ClassNameValue } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    class: {
+        type: import("vue").PropType<string | false | 0 | ClassNameValue[] | null>;
+        default: undefined;
+    };
     title: {
         type: import("vue").PropType<string>;
         default: undefined;
@@ -16,7 +21,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: undefined;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+    mouseenter: (...args: any[]) => void;
+    mouseleave: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: import("vue").PropType<string | false | 0 | ClassNameValue[] | null>;
+        default: undefined;
+    };
     title: {
         type: import("vue").PropType<string>;
         default: undefined;
@@ -33,7 +46,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: undefined;
     };
-}>>, {
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onMouseenter?: ((...args: any[]) => any) | undefined;
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+}, {
+    class: string | false | 0 | ClassNameValue[] | null;
     title: string;
     to: RouteLocationRaw;
     target: "_blank" | "_self" | "_parent" | "_top";

package/package.json

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

package/src/components/BaseTable.stories.js

@@ -105,4 +105,44 @@ const TemplateRouterLink = (args) => ({
 });
 
 export const RouterLink = TemplateRouterLink.bind({});
-RouterLink.args = {};
+RouterLink.args = {};
+
+const TemplateCellClick = (args) => ({
+  components: components,
+  setup() {
+    return { args, options };
+  },
+  template: `
+  <div class="p-6">
+
+    <p class="mb-3">
+    Only the first cell is clickable
+    </p>
+
+    <BaseTable class="" v-bind="args">
+      ${headTemplate}
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in options" 
+          :key="option.value"
+        >
+          <BaseTableCell class="font-medium" href="https://google.com">
+          {{ option.label }}
+          </BaseTableCell>
+          <BaseTableCell>
+          <BaseBadge class="font-mono">
+            {{ option.value ?? 'N/A' }}
+          </BaseBadge>
+          </BaseTableCell>
+          <BaseTableCell>
+          {{ option.type ?? 'N/A' }}
+          </BaseTableCell>
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>
+  `,
+});
+
+export const CellClick = TemplateCellClick.bind({});
+CellClick.args = {};

package/src/components/BaseTableCell.vue

@@ -1,6 +1,6 @@
 <template>
   <td
-    class="p-0 border-b border-slate-200"
+    class="p-0 border-b border-slate-200 group-last/row:border-b-0"
     :align="align"
     :colspan="colspan"
   >
@@ -45,14 +45,14 @@ const props = withDefaults(defineProps<{
   target?: '_blank' | '_self' | '_parent' | '_top',
   title?: string,
   align?: 'left' | 'center' | 'right',
-  colspan?: number,
+  colspan?: number | string,
   class?: ClassNameValue,
 }>(), {
   href: undefined,
   to: undefined,
   target: undefined,
   title: undefined,
-  align: undefined,
+  align: 'left',
   colspan: undefined,
   class: undefined,
 });
@@ -83,13 +83,29 @@ const componentName = computed(() => {
 
 const classes = computed(() => {
   const base = cellClasses(cellConfig.value);
-  const click = propsInternal.value.href || propsInternal.value.to ? 'cursor-pointer' : '';
+  const click = clickable.value ? 'cursor-pointer' : '';
+  const clickRow = clickableRow.value ? 'group-hover/row:bg-slate-50' : '';
+  const clickCell = clickableCell.value ? 'hover:bg-slate-50' : '';
 
   return twMerge(
     base,
     click,
+    clickRow,
+    clickCell,
     props.class,
   );
-})
+});
+
+const clickable = computed(() => {
+  return propsInternal.value.href || propsInternal.value.to;
+});
+
+const clickableRow = computed(() => {
+  return !clickableCell.value && clickable.value;
+});
+
+const clickableCell = computed(() => {
+  return props.href || props.to;
+});
 
 </script>

package/src/components/BaseTableHeader.vue

@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<{
   colspan?: number,
 }>(), {
   class: undefined,
-  align: undefined,
+  align: 'left',
   colspan: undefined,
 });
 

package/src/components/BaseTableRow.vue

@@ -1,30 +1,53 @@
 <template>
-  <tr>
+  <tr
+    :class="classes"
+    @click="emit('click')"
+    @mouseenter="emit('mouseenter')"
+    @mouseleave="emit('mouseleave')"
+  >
     <slot />  
   </tr> 
 </template>
 
 <script lang="ts" setup>
+import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const baseTable = inject('BaseTable');
 
 if (!baseTable) {
   throw new Error('baseTable must be used within a BaseTable.');
 }
 
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);
+
 const props = withDefaults(defineProps<{
   href?: string,
   to?: RouteLocationRaw,
   target?: '_blank' | '_self' | '_parent' | '_top',
   title?: string,
+  class?: ClassNameValue,
 }>(), {
   href: undefined,
   to: undefined,
   target: undefined,
   title: undefined,
+  class: undefined,
 });
 
 provide('BaseTableRow', computed(() => props));
 
+const classes = computed(() => {
+  const base = 'group/row';
+
+  return twMerge(
+    base,
+    props.class,
+  );
+});
+
 </script>