sprintify-ui 0.6.59 → 0.6.60

package/dist/sprintify-ui.es.js

@@ -44279,7 +44279,7 @@ const v5 = ["align", "colspan"], y5 = /* @__PURE__ */ be({
     to: { default: void 0 },
     target: { default: void 0 },
     title: { default: void 0 },
-    align: { default: void 0 },
+    align: { default: "left" },
     colspan: { default: void 0 },
     class: { type: [Array, String, null, Number, Boolean], default: void 0 }
   },
@@ -44288,24 +44288,26 @@ const v5 = ["align", "colspan"], y5 = /* @__PURE__ */ be({
     if (!i)
       throw new Error("BaseTableCell must be used within a BaseTableRow.");
     const o = L(() => r !== void 0), a = L(() => {
-      var c, p;
+      var h, g;
       return {
-        spacing: (c = e == null ? void 0 : e.value) == null ? void 0 : c.spacing,
-        flush: (p = e == null ? void 0 : e.value) == null ? void 0 : p.flush,
+        spacing: (h = e == null ? void 0 : e.value) == null ? void 0 : h.spacing,
+        flush: (g = e == null ? void 0 : e.value) == null ? void 0 : g.flush,
         head: o.value
       };
     }), l = L(() => wa(Gt(i.value), t)), s = L(() => l.value.href ? "a" : l.value.to ? "router-link" : "div"), d = L(() => {
-      const c = Ab(a.value), p = l.value.href || l.value.to ? "cursor-pointer" : "";
+      const h = Ab(a.value), g = c.value ? "cursor-pointer" : "", m = p.value ? "group-hover/row:bg-slate-50" : "", v = f.value ? "hover:bg-slate-50" : "";
       return kt(
-        c,
-        p,
+        h,
+        g,
+        m,
+        v,
         t.class
       );
-    });
-    return (c, p) => (B(), K("td", {
-      class: "p-0 border-b border-slate-200",
-      align: c.align,
-      colspan: c.colspan
+    }), c = L(() => l.value.href || l.value.to), p = L(() => !f.value && c.value), f = L(() => t.href || t.to);
+    return (h, g) => (B(), K("td", {
+      class: "p-0 border-b border-slate-200 group-last/row:border-b-0",
+      align: h.align,
+      colspan: h.colspan
     }, [
       (B(), De(In(C(s)), {
         class: de(C(d)),
@@ -44315,7 +44317,7 @@ const v5 = ["align", "colspan"], y5 = /* @__PURE__ */ be({
         target: C(l).target
       }, {
         default: ge(() => [
-          Ne(c.$slots, "default")
+          Ne(h.$slots, "default")
         ]),
         _: 3
       }, 8, ["class", "to", "href", "title", "target"]))
@@ -44339,7 +44341,7 @@ const v5 = ["align", "colspan"], y5 = /* @__PURE__ */ be({
   __name: "BaseTableHeader",
   props: {
     class: { type: [Array, String, null, Number, Boolean], default: void 0 },
-    align: { default: void 0 },
+    align: { default: "left" },
     colspan: { default: void 0 }
   },
   setup(n) {
@@ -44374,20 +44376,29 @@ const v5 = ["align", "colspan"], y5 = /* @__PURE__ */ be({
     ], 8, w5));
   }
 }), E5 = /* @__PURE__ */ be({
+  inheritAttrs: !1,
   __name: "BaseTableRow",
   props: {
     href: { default: void 0 },
     to: { default: void 0 },
     target: { default: void 0 },
-    title: { default: void 0 }
+    title: { default: void 0 },
+    class: { type: [Array, String, null, Number, Boolean], default: void 0 }
   },
   setup(n) {
     const t = n;
     if (!pt("BaseTable"))
       throw new Error("baseTable must be used within a BaseTable.");
-    return mt("BaseTableRow", L(() => t)), (r, i) => (B(), K("tr", null, [
-      Ne(r.$slots, "default")
-    ]));
+    mt("BaseTableRow", L(() => t));
+    const r = L(() => kt(
+      "group/row",
+      t.class
+    ));
+    return (i, o) => (B(), K("tr", {
+      class: de(C(r))
+    }, [
+      Ne(i.$slots, "default")
+    ], 2));
   }
 }), S5 = { class: "base-tabs relative" }, _5 = /* @__PURE__ */ j("div", { class: "absolute bottom-0 left-0 h-px w-full bg-slate-300" }, null, -1), k5 = { class: "flex text-center" }, A5 = /* @__PURE__ */ be({
   __name: "BaseTabs",

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;
@@ -17,6 +22,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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;
@@ -34,6 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: 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.60",
   "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,12 +1,17 @@
 <template>
-  <tr>
+  <tr :class="classes">
     <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) {
@@ -18,13 +23,24 @@ const props = withDefaults(defineProps<{
   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>