sprintify-ui 0.10.10 → 0.10.12

package/dist/types/components/BaseDataTableTemplate.vue.d.ts

@@ -22,9 +22,10 @@ declare function __VLS_template(): {
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: {
-                readonly size?: Size | undefined;
+                readonly size?: import("../services/table/types").CellSize | undefined;
                 readonly fixedHeader?: boolean | undefined;
                 readonly fixedColumn?: boolean | undefined;
+                readonly grid?: boolean | undefined;
                 readonly striped?: boolean | undefined;
                 readonly flush?: boolean | undefined;
                 readonly class?: import("tailwind-merge").ClassNameValue;
@@ -46,21 +47,12 @@ declare function __VLS_template(): {
             $host: Element | null;
             $emit: (event: string, ...args: any[]) => void;
             $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<{
-                size?: Size;
-                fixedHeader?: boolean;
-                fixedColumn?: boolean;
-                striped?: boolean;
-                flush?: boolean;
-                class?: import("tailwind-merge").ClassNameValue;
-                maxHeight?: number;
-                loading?: boolean;
-                virtualScrolling?: boolean;
-            }> & Readonly<{}>, {
+            $options: import("vue").ComponentOptionsBase<Readonly<import("../services/table/types").TableProps> & Readonly<{}>, {
                 scrollTop: () => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 class: string | false | 0 | 0n | import("tailwind-merge").ClassNameValue[] | null;
-                size: Size;
+                size: import("../services/table/types").CellSize;
+                grid: boolean;
                 loading: boolean;
                 fixedHeader: boolean;
                 fixedColumn: boolean;
@@ -90,7 +82,8 @@ declare function __VLS_template(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             class: string | false | 0 | 0n | import("tailwind-merge").ClassNameValue[] | null;
-            size: Size;
+            size: import("../services/table/types").CellSize;
+            grid: boolean;
             loading: boolean;
             fixedHeader: boolean;
             fixedColumn: boolean;
@@ -98,17 +91,7 @@ declare function __VLS_template(): {
             flush: boolean;
             maxHeight: number;
             virtualScrolling: boolean;
-        }> & Omit<Readonly<{
-            size?: Size;
-            fixedHeader?: boolean;
-            fixedColumn?: boolean;
-            striped?: boolean;
-            flush?: boolean;
-            class?: import("tailwind-merge").ClassNameValue;
-            maxHeight?: number;
-            loading?: boolean;
-            virtualScrolling?: boolean;
-        }> & Readonly<{}>, "scrollTop" | ("class" | "size" | "loading" | "fixedHeader" | "fixedColumn" | "striped" | "flush" | "maxHeight" | "virtualScrolling")> & import("vue").ShallowUnwrapRef<{
+        }> & Omit<Readonly<import("../services/table/types").TableProps> & Readonly<{}>, "scrollTop" | ("class" | "size" | "grid" | "loading" | "fixedHeader" | "fixedColumn" | "striped" | "flush" | "maxHeight" | "virtualScrolling")> & import("vue").ShallowUnwrapRef<{
             scrollTop: () => void;
         }> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {

package/dist/types/components/BaseTable.vue.d.ts

@@ -1,16 +1,4 @@
-import { ClassNameValue } from 'tailwind-merge';
-import { Size } from '@/utils/sizes';
-type __VLS_Props = {
-    size?: Size;
-    fixedHeader?: boolean;
-    fixedColumn?: boolean;
-    striped?: boolean;
-    flush?: boolean;
-    class?: ClassNameValue;
-    maxHeight?: number;
-    loading?: boolean;
-    virtualScrolling?: boolean;
-};
+import { TableProps } from '@/services/table/types';
 declare function scrollTop(): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -24,11 +12,12 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_component: import("vue").DefineComponent<TableProps, {
     scrollTop: typeof scrollTop;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    class: string | false | 0 | 0n | ClassNameValue[] | null;
-    size: Size;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    class: string | false | 0 | 0n | import("tailwind-merge").ClassNameValue[] | null;
+    size: import("@/services/table/types").CellSize;
+    grid: boolean;
     loading: boolean;
     fixedHeader: boolean;
     fixedColumn: boolean;

package/dist/types/services/table/types.d.ts

@@ -1,11 +1,17 @@
+import { Size } from "@/utils/sizes";
+import { ClassNameValue } from "tailwind-merge";
 import { RouteLocationRaw } from "vue-router";
-export type CellSize = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+export type CellSize = 'none' | Size;
 export interface TableProps {
     size?: CellSize;
-    flush?: boolean;
     fixedHeader?: boolean;
     fixedColumn?: boolean;
+    grid?: boolean;
     striped?: boolean;
+    flush?: boolean;
+    class?: ClassNameValue;
+    maxHeight?: number;
+    loading?: boolean;
     virtualScrolling?: boolean;
 }
 export type CellConfig = TableProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseTable.stories.js

@@ -35,7 +35,7 @@ const headTemplate = `<BaseTableHead>
 </BaseTableRow>
 </BaseTableHead>`;
 
-const cellsTemplate = `<BaseTableCell @mouseenter="showAlert()" class="font-medium whitespace-nowrap">
+const cellsTemplate = `<BaseTableCell class="font-medium whitespace-nowrap">
 {{ option.label }}
 </BaseTableCell>
 <BaseTableCell>
@@ -64,14 +64,11 @@ const components = {
 const Template = (args) => ({
   components: components,
   setup() {
-    function showAlert() {
-      alert("hover");
-    }
-    return { args, optionsLarge, showAlert };
+    return { args, optionsLarge };
   },
   template: `
-  <div class="border">
-    <BaseTable class="w-full border td:border" v-bind="args">
+  <div class="">
+    <BaseTable class="w-full" v-bind="args">
       ${headTemplate}
       <BaseTableBody>
         <BaseTableRow 
@@ -92,6 +89,11 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Grid = Template.bind({});
+Grid.args = {
+  grid: true,
+};
+
 export const Striped = Template.bind({});
 Striped.args = {
   striped: true,

package/src/components/BaseTable.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="relative">
+  <div class="relative max-w-full">
     <div
       ref="scrollableRef"
-      class="overflow-x-auto overflow-y-auto"
+      class="overflow-x-auto overflow-y-auto max-w-full"
       data-scroll-lock-scrollable
       :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
     >
@@ -36,30 +36,21 @@
 </template>
 
 <script lang="ts" setup>
-import { ClassNameValue, twMerge } from 'tailwind-merge';
+import { twMerge } from 'tailwind-merge';
 import { useScroll } from '@vueuse/core';
 import BaseSpinnerLarge from '@/svg/BaseSpinnerLarge.vue';
-import { Size } from '@/utils/sizes';
+import { TableProps } from '@/services/table/types';
 import { Ref } from 'vue';
 
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<{
-  size?: Size,
-  fixedHeader?: boolean,
-  fixedColumn?: boolean,
-  striped?: boolean,
-  flush?: boolean,
-  class?: ClassNameValue,
-  maxHeight?: number,
-  loading?: boolean,
-  virtualScrolling?: boolean,
-}>(), {
+const props = withDefaults(defineProps<TableProps>(), {
   size: 'md',
   fixedHeader: false,
   fixedColumn: false,
+  grid: false,
   striped: false,
   flush: false,
   class: undefined,
@@ -70,7 +61,7 @@ const props = withDefaults(defineProps<{
 
 const classes = computed(() => {
 
-  const base = 'border-separate border-spacing-0 text-sm';
+  const base = 'text-sm';
 
   if (!props.class) {
     return base;

package/src/components/BaseTableCell.vue

@@ -87,6 +87,7 @@ const cellConfig = computed<CellConfig>(() => {
     size: baseTable?.value?.size,
     flush: baseTable?.value?.flush,
     head: isHead.value,
+    grid: baseTable?.value?.grid,
   }
 });
 
@@ -134,10 +135,11 @@ const classes = computed(() => {
   const selected = baseTableRowSelected?.value;
 
   const base = cellClasses(cellConfig.value);
-  const baseTd = 'relative first:border-r border-b group-last/row:border-b-0';
+  const baseTd = 'relative border-b group-last/row:border-b-0';
+  const baseTdGrid = baseTable?.value.grid ? 'border-r last:border-r-0' : '';
   const click = clickable.value ? 'cursor-pointer' : '';
 
-  let backgroundColor = baseTableStriped.value ? 'group-even/row:bg-slate-100/70' : 'bg-white';
+  let backgroundColor = baseTableStriped.value ? 'group-even/row:bg-slate-50 group-odd/row:bg-white' : 'bg-white';
 
   if (hovered) {
     backgroundColor = 'bg-slate-100';
@@ -153,24 +155,21 @@ const classes = computed(() => {
     borderColor = 'border-slate-300';
   }
 
-  let borderColorRight = 'first:border-r-transparent';
-
   const hasHorizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value;
-  if (hasHorizontalScrolling) {
-    borderColorRight = 'first:border-r-slate-200';
-  }
 
-  const horizontalScrolling = hasHorizontalScrolling ? 'first:sticky first:z-[1] first:left-0' : '';
+  const horizontalScrolling = baseTable?.value.fixedColumn ? "first:sticky first:z-[1] first:left-0" : '';
+  const horizontalScrollingActive = hasHorizontalScrolling ? "first:after:content-[''] first:after:absolute first:after:h-full first:after:w-px first:after:bg-slate-200 first:after:top-0 first:after:-right-px" : '';
   const flush = baseTable?.value.flush ? 'first:pl-0 last:pr-0' : '';
 
   const internalClasses = [
     base,
     baseTd,
+    baseTdGrid,
     click,
     backgroundColor,
     borderColor,
-    borderColorRight,
     horizontalScrolling,
+    horizontalScrollingActive,
     flush,
   ];
 

package/src/components/BaseTableHeader.vue

@@ -59,18 +59,23 @@ const thRef = ref<HTMLTableCellElement | null>(null);
 
 const classes = computed(() => {
   const base = cellClasses(cellConfig.value);
-  const baseTh = 'bg-white text-slate-500 border-b border-slate-300 group';
+  const baseTh = 'bg-white text-slate-500 border-b border-slate-200 group before:content-[""] before:absolute before:-bottom-px before:left-0 before:w-full before:h-px before:bg-slate-200 before:z-[1]';
+  const baseThGrid = baseTable?.value.grid ? 'border-r last:border-r-0' : '';
   const sticky = baseTable?.value.fixedHeader ? 'sticky top-0 z-[2]' : '';
-  const firstCol = 'first:border-r first:border-r-transparent';
-  const horizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value ? 'first:sticky first:z-[3] first:left-0 first:border-r-slate-200' : '';
+
+  const hasHorizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value;
+  const horizontalScrolling = baseTable?.value.fixedColumn ? "first:sticky first:z-[3] first:left-0" : '';
+  const horizontalScrollingActive = hasHorizontalScrolling ? "first:after:content-[''] first:after:absolute first:after:h-full first:after:w-px first:after:bg-slate-200 first:after:top-0 first:after:-right-px" : '';
+
   const flush = baseTable?.value.flush ? 'first:pl-0 last:pr-0' : '';
 
   const internalClasses = [
     base,
     baseTh,
+    baseThGrid,
     sticky,
-    firstCol,
     horizontalScrolling,
+    horizontalScrollingActive,
     flush,
   ];
 

package/src/services/table/classes.ts

@@ -9,6 +9,10 @@ export function cellClasses(config: CellConfig): string {
 
 function size(size: CellSize): string {
 
+    if (size == 'none') {
+        return '';
+    }
+
     if (size == 'xs') {
         return 'px-1 py-0.5';
     }
@@ -25,5 +29,9 @@ function size(size: CellSize): string {
         return 'px-4 py-3';
     }
 
+    if (size == 'xl') {
+        return 'px-6 py-4';
+    }
+
     return '';
 }

package/src/services/table/types.ts

@@ -1,14 +1,20 @@
+import { Size } from "@/utils/sizes";
+import { ClassNameValue } from "tailwind-merge";
 import { RouteLocationRaw } from "vue-router";
 
-export type CellSize = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+export type CellSize = 'none' | Size;
 
 export interface TableProps {
-    size?: CellSize;
-    flush?: boolean;
-    fixedHeader?: boolean;
-    fixedColumn?: boolean;
-    striped?: boolean;
-    virtualScrolling?: boolean;
+    size?: CellSize,
+    fixedHeader?: boolean,
+    fixedColumn?: boolean,
+    grid?: boolean,
+    striped?: boolean,
+    flush?: boolean,
+    class?: ClassNameValue,
+    maxHeight?: number,
+    loading?: boolean,
+    virtualScrolling?: boolean,
 }
 
 export type CellConfig = TableProps;