sprintify-ui 0.8.23 → 0.8.24

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

@@ -61,7 +61,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     type: "button" | "submit" | "reset";
     size: "xs" | "sm" | "md" | "lg" | "xl";
     color: string;

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

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     size: "xs" | "sm" | "lg" | "base";
 }, {}>, {
     default?(_: {}): any;

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

@@ -4,7 +4,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     fixedHeader?: boolean | undefined;
     fixedColumn?: boolean | undefined;
-    grid?: boolean | undefined;
     striped?: boolean | undefined;
     flush?: boolean | undefined;
     class?: ClassNameValue;
@@ -14,7 +13,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     fixedHeader: boolean;
     fixedColumn: boolean;
-    grid: boolean;
     striped: boolean;
     flush: boolean;
     class: undefined;
@@ -26,7 +24,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     fixedHeader?: boolean | undefined;
     fixedColumn?: boolean | undefined;
-    grid?: boolean | undefined;
     striped?: boolean | undefined;
     flush?: boolean | undefined;
     class?: ClassNameValue;
@@ -36,20 +33,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     fixedHeader: boolean;
     fixedColumn: boolean;
-    grid: boolean;
     striped: boolean;
     flush: boolean;
     class: undefined;
     maxHeight: undefined;
     loading: boolean;
 }>>>, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     loading: boolean;
     maxHeight: number;
     fixedHeader: boolean;
     fixedColumn: boolean;
-    grid: boolean;
     striped: boolean;
     flush: boolean;
 }, {}>, {

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

@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onClick: undefined;
     ignoreRowInteractions: boolean;
 }>>>, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     onClick: (e: MouseEvent) => void;
     title: string;
     to: RouteLocationRaw;

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

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     class: undefined;
 }>>>, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     align: "right" | "left" | "center";
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
     colspan: number;

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

@@ -6,6 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     title?: string | undefined;
     class?: ClassNameValue;
+    selected?: boolean | undefined;
     onClick?: ((e: MouseEvent) => void) | undefined;
 }>, {
     href: undefined;
@@ -13,6 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target: undefined;
     title: undefined;
     class: undefined;
+    selected: boolean;
     onClick: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
@@ -24,6 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     title?: string | undefined;
     class?: ClassNameValue;
+    selected?: boolean | undefined;
     onClick?: ((e: MouseEvent) => void) | undefined;
 }>, {
     href: undefined;
@@ -31,18 +34,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target: undefined;
     title: undefined;
     class: undefined;
+    selected: boolean;
     onClick: undefined;
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseenter?: ((...args: any[]) => any) | undefined;
     onMouseleave?: ((...args: any[]) => any) | undefined;
 }, {
-    class: string | false | 0 | ClassNameValue[] | null;
+    class: string | false | 0 | 0n | ClassNameValue[] | null;
     onClick: (e: MouseEvent) => void;
     title: string;
     to: RouteLocationRaw;
     href: string;
     target: "_blank" | "_self" | "_parent" | "_top";
+    selected: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -5,6 +5,7 @@ export interface TableProps {
     flush?: boolean;
     fixedHeader?: boolean;
     fixedColumn?: boolean;
+    striped?: boolean;
 }
 export type CellConfig = TableProps;
 export interface CellProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.23",
+  "version": "0.8.24",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -48,7 +48,7 @@
     "@fullcalendar/vue3": "^6.1.11",
     "@headlessui/vue": "^1.7.19",
     "color2k": "^2.0.3",
-    "tailwind-merge": "^1.14.0"
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",

package/src/components/BaseTable.stories.js

@@ -18,6 +18,11 @@ export default {
       },
       options: ['none', 'xs', 'sm', 'md', 'lg'],
     },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 };
 
@@ -72,6 +77,7 @@ const Template = (args) => ({
           :key="option.value"
           :href="'https://www.google.com/search?q=' + option.label"
           target="_blank"
+          :selected="option.value === 'darth_maul'"
         >
           ${cellsTemplate}
         </BaseTableRow>
@@ -84,6 +90,16 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true,
+};
+
+export const Flush = Template.bind({});
+Flush.args = {
+  flush: true,
+};
+
 export const FixedHeader = Template.bind({});
 FixedHeader.args = {
   fixedHeader: true,
@@ -171,7 +187,7 @@ const TemplateCellClick = (args) => ({
           {{ option.type ?? 'N/A' }}
           </BaseTableCell>
           <BaseTableCell>
-           ...
+           Actions...
           </BaseTableCell>
           <BaseTableCell @click="al()">
            Click me

package/src/components/BaseTable.vue

@@ -49,7 +49,6 @@ const props = withDefaults(defineProps<{
   size?: Size,
   fixedHeader?: boolean,
   fixedColumn?: boolean,
-  grid?: boolean,
   striped?: boolean,
   flush?: boolean,
   class?: ClassNameValue,
@@ -59,7 +58,6 @@ const props = withDefaults(defineProps<{
   size: 'md',
   fixedHeader: false,
   fixedColumn: false,
-  grid: false,
   striped: false,
   flush: false,
   class: undefined,

package/src/components/BaseTableCell.vue

@@ -34,8 +34,6 @@ import { cellClasses } from '../services/table/classes'
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { cloneDeep, merge } from 'lodash';
 import { ComputedRef, StyleValue } from 'vue';
-import { useIsFirstColumn } from '../composables/isFirstColumn'
-import { useIsLastColumn } from '../composables/isLastColumn'
 
 defineOptions({
   inheritAttrs: false,
@@ -45,9 +43,11 @@ const baseTable = inject('table:props') as ComputedRef<TableProps> | undefined;
 const baseTableHead = inject('tableHead:props', undefined);
 const baseTableRow = inject('tableRow:props', undefined) as ComputedRef<CellProps> | undefined;
 const baseTableRowHover = inject('tableRow:hover', undefined) as ComputedRef<boolean> | undefined;
+const baseTableRowSelected = inject('tableRow:selected', undefined) as ComputedRef<boolean> | undefined;
 const baseTableHorizontalScrolling = inject('table:horizontalScrolling', undefined) as ComputedRef<boolean> | undefined;
 const hoverForFullRow = inject('tableRow:hoverForFullRow') as ComputedRef<boolean> | undefined;
 const setHoverForFullRow = inject('tableRow:setHoverForFullRow') as (active: boolean) => void;
+const baseTableStriped = computed(() => baseTable?.value.striped);
 
 if (!baseTableRow) {
   throw new Error('BaseTableCell must be used within a BaseTableRow.');
@@ -126,33 +126,51 @@ const hoverInternal = computed(() => {
 });
 
 const classes = computed(() => {
+
+  const hovered = clickable.value && hoverInternal.value;
+  const selected = baseTableRowSelected?.value;
+
   const base = cellClasses(cellConfig.value);
-  const baseTd = 'relative bg-white border-b border-slate-200 group-last/row:border-b-0';
+  const baseTd = 'relative border-b group-last/row:border-b-0';
   const click = clickable.value ? 'cursor-pointer' : '';
-  const hover = clickable.value && hoverInternal.value ? 'bg-slate-50' : '';
-  const firstCol = isFirstColumn.value ? 'border-r border-r-transparent' : '';
-  const horizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value && isFirstColumn.value ? 'sticky z-[1] left-0 border-r-slate-200' : '';
-  const flushLeft = baseTable?.value.flush && isFirstColumn.value ? 'pl-0' : '';
-  const flushRight = baseTable?.value.flush && isLastColumn.value ? 'pr-0' : '';
+
+  let backgroundColor = baseTableStriped.value ? 'group-even/row:bg-slate-100/70' : 'bg-white';
+
+  if (hovered) {
+    backgroundColor = 'bg-slate-100';
+  }
+
+  if (selected) {
+    backgroundColor = 'bg-slate-200';
+  }
+
+  let borderColor = 'border-slate-200';
+
+  if (selected) {
+    borderColor = 'border-slate-300';
+  }
+
+  const firstCol = 'first:border-r first:border-r-transparent';
+  const horizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value ? 'first:sticky first:z-[1] first:left-0 first:border-r-slate-200' : '';
+  const flush = baseTable?.value.flush ? 'first:pl-0 last:pr-0' : '';
 
   return twMerge(
-    base,
-    baseTd,
-    click,
-    hover,
-    firstCol,
-    horizontalScrolling,
-    flushLeft,
-    flushRight,
+    [
+      base,
+      baseTd,
+      click,
+      backgroundColor,
+      borderColor,
+      firstCol,
+      horizontalScrolling,
+      flush,
+    ],
     props.class,
   );
 });
 
 const tdRef = ref<HTMLTableCellElement | null>(null);
 
-const { isFirstColumn } = useIsFirstColumn(tdRef);
-const { isLastColumn } = useIsLastColumn(tdRef);
-
 function onClick(event: MouseEvent) {
   propsInternal.value.onClick?.(event);
 }

package/src/components/BaseTableHeader.vue

@@ -12,8 +12,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useIsFirstColumn } from '@/composables/isFirstColumn';
-import { useIsLastColumn } from '@/composables/isLastColumn';
 import { cellClasses } from '@/services/table/classes';
 import { CellConfig, TableProps } from '@/services/table/types';
 import { ClassNameValue, twMerge } from 'tailwind-merge';
@@ -59,27 +57,23 @@ const cellConfig = computed<CellConfig>(() => {
 
 const thRef = ref<HTMLTableCellElement | null>(null);
 
-const { isFirstColumn } = useIsFirstColumn(thRef);
-const { isLastColumn } = useIsLastColumn(thRef);
-
-
 const classes = computed(() => {
   const base = cellClasses(cellConfig.value);
   const baseTh = 'bg-white text-slate-500 border-b border-slate-300 group';
   const sticky = baseTable?.value.fixedHeader ? 'sticky top-0 z-[2]' : '';
-  const firstCol = isFirstColumn.value ? 'border-r border-r-transparent' : '';
-  const horizontalScrolling = baseTable?.value.fixedColumn && baseTableHorizontalScrolling?.value && isFirstColumn.value ? 'sticky z-[3] left-0 border-r-slate-200' : '';
-  const flushLeft = baseTable?.value.flush && isFirstColumn.value ? 'pl-0' : '';
-  const flushRight = baseTable?.value.flush && isLastColumn.value ? 'pr-0' : '';
+  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 flush = baseTable?.value.flush ? 'first:pl-0 last:pr-0' : '';
 
   return twMerge(
-    base,
-    baseTh,
-    sticky,
-    firstCol,
-    horizontalScrolling,
-    flushLeft,
-    flushRight,
+    [
+      base,
+      baseTh,
+      sticky,
+      firstCol,
+      horizontalScrolling,
+      flush,
+    ],
     props.class,
   );
 });

package/src/components/BaseTableRow.vue

@@ -1,5 +1,6 @@
 <template>
   <tr
+    ref="trRef"
     :class="classes"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<{
   target?: '_blank' | '_self' | '_parent' | '_top',
   title?: string,
   class?: ClassNameValue,
+  selected?: boolean,
   onClick?: (e: MouseEvent) => void,
 }>(), {
   href: undefined,
@@ -37,9 +39,17 @@ const props = withDefaults(defineProps<{
   target: undefined,
   title: undefined,
   class: undefined,
+  selected: false,
   onClick: undefined,
 });
 
+const trRef = ref<null | HTMLTableRowElement>(null);
+const parent = ref<null | undefined | HTMLElement>(null);
+
+onMounted(() => {
+  parent.value = trRef.value?.parentElement;
+});
+
 const classes = computed(() => {
   const base = 'group/row';
 
@@ -68,6 +78,7 @@ function onMouseLeave() {
 
 provide('tableRow:props', computed(() => props));
 provide('tableRow:hover', computed(() => hover.value));
+provide('tableRow:selected', computed(() => props.selected));
 provide('tableRow:setHoverForFullRow', setHoverForFullRow);
 provide('tableRow:hoverForFullRow', computed(() => hoverForFullRow.value));
 

package/src/services/table/classes.ts

@@ -1,11 +1,10 @@
-import { twMerge } from "tailwind-merge";
 import { CellConfig, CellSize } from "./types";
 
 export function cellClasses(config: CellConfig): string {
     const base = '';
     const space = size(config.size ?? 'md');
 
-    return twMerge([base, space]);
+    return [base, space].join(' ');
 }
 
 function size(size: CellSize): string {

package/src/services/table/types.ts

@@ -7,6 +7,7 @@ export interface TableProps {
     flush?: boolean;
     fixedHeader?: boolean;
     fixedColumn?: boolean;
+    striped?: boolean;
 }
 
 export type CellConfig = TableProps;

package/dist/types/composables/isFirstColumn.d.ts

@@ -1,4 +0,0 @@
-import { MaybeRef } from "vue";
-export declare function useIsFirstColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>): {
-    isFirstColumn: import("vue").ComputedRef<boolean>;
-};

package/src/composables/isFirstColumn.ts

@@ -1,31 +0,0 @@
-import { MaybeRef } from "vue";
-
-export function useIsFirstColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>) {
-
-    const leftCol = ref<HTMLTableCellElement | null>();
-
-    onMounted(() => {
-        leftCol.value = unref(tdOrTh)?.previousElementSibling as HTMLTableCellElement | null;
-    });
-
-    const isFirstColumn = computed(() => {
-
-        if (!leftCol.value) {
-            return true;
-        }
-
-        if (leftCol.value.tagName.toLowerCase() === 'th') {
-            return false;
-        }
-
-        if (leftCol.value.tagName.toLowerCase() === 'td') {
-            return false;
-        }
-
-        return true;
-    });
-
-    return {
-        isFirstColumn,
-    };
-}