sprintify-ui 0.7.11 → 0.8.0

package/src/components/BaseTable.stories.js

@@ -12,24 +12,25 @@ export default {
   component: BaseTable,
   args: {},
   argTypes: {
-    spacing: {
+    size: {
       control: {
         type: 'select',
       },
-      options: ['none', 'sm', 'md', 'lg'],
+      options: ['none', 'xs', 'sm', 'md', 'lg'],
     },
   },
 };
 
 const headTemplate = `<BaseTableHead>
 <BaseTableRow>
-  <BaseTableHeader>Label</BaseTableHeader>
-  <BaseTableHeader>ID</BaseTableHeader>
+  <BaseTableHeader sortable>Label</BaseTableHeader>
+  <BaseTableHeader sortable>ID</BaseTableHeader>
   <BaseTableHeader>Type</BaseTableHeader>
+  <BaseTableHeader>Description</BaseTableHeader>
 </BaseTableRow>
 </BaseTableHead>`;
 
-const cellsTemplate = `<BaseTableCell class="font-medium">
+const cellsTemplate = `<BaseTableCell class="font-medium whitespace-nowrap">
 {{ option.label }}
 </BaseTableCell>
 <BaseTableCell>
@@ -40,6 +41,9 @@ const cellsTemplate = `<BaseTableCell class="font-medium">
 <BaseTableCell>
 {{ option.type ?? 'N/A' }}
 </BaseTableCell>
+<BaseTableCell class="whitespace-nowrap">
+Long description ...
+</BaseTableCell>
 `;
 
 const components = {
@@ -59,8 +63,8 @@ const Template = (args) => ({
     return { args, options };
   },
   template: `
-  <div class="p-6">
-    <BaseTable class="" v-bind="args">
+  <div class="border">
+    <BaseTable class="w-full" v-bind="args">
       ${headTemplate}
       <BaseTableBody>
         <BaseTableRow 
@@ -80,6 +84,17 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const FixedHeader = Template.bind({});
+FixedHeader.args = {
+  fixedHeader: true,
+  maxHeight: 300,
+};
+
+export const FixedColumn = Template.bind({});
+FixedColumn.args = {
+  fixedColumn: true,
+};
+
 const TemplateRouterLink = (args) => ({
   components: components,
   setup() {
@@ -94,7 +109,6 @@ const TemplateRouterLink = (args) => ({
           v-for="option in options" 
           :key="option.value"
           :to="'/articles/' + option.value"
-          target="_blank"
           :title="option.label"
         >
           ${cellsTemplate}
@@ -110,26 +124,45 @@ RouterLink.args = {};
 const TemplateCellClick = (args) => ({
   components: components,
   setup() {
-    return { args, options };
+
+    const al = function () {
+      alert('clicked');
+    };
+
+    return { args, options, al };
   },
   template: `
   <div class="p-6">
 
-    <p class="mb-3">
-    Only the first cell is clickable
-    </p>
+    <div class="text-sm mb-5">
+      <p>Row = a link to Bing</p>
+      <p>Cell #1 = a link to Google</p>
+      <p>Cell #2 = RouterLink to article </p>
+      <p>Cell #5 = Click </p>
+    </div>
 
     <BaseTable class="" v-bind="args">
-      ${headTemplate}
+      <BaseTableHead>
+        <BaseTableRow>
+          <BaseTableHeader sortable>Label</BaseTableHeader>
+          <BaseTableHeader sortable>ID</BaseTableHeader>
+          <BaseTableHeader>Type</BaseTableHeader>
+          <BaseTableHeader>Actions</BaseTableHeader>
+          <BaseTableHeader>Click</BaseTableHeader>
+          <BaseTableHeader>Ignore</BaseTableHeader>
+        </BaseTableRow>
+      </BaseTableHead>
       <BaseTableBody>
         <BaseTableRow 
           v-for="option in options" 
           :key="option.value"
+          href="https://bing.com"
+          target="_blank"
         >
-          <BaseTableCell class="font-medium" href="https://google.com">
+          <BaseTableCell class="font-medium" href="https://google.com" target="_blank">
           {{ option.label }}
           </BaseTableCell>
-          <BaseTableCell>
+          <BaseTableCell :to="'/articles/' + option.value">
           <BaseBadge class="font-mono">
             {{ option.value ?? 'N/A' }}
           </BaseBadge>
@@ -137,6 +170,15 @@ const TemplateCellClick = (args) => ({
           <BaseTableCell>
           {{ option.type ?? 'N/A' }}
           </BaseTableCell>
+          <BaseTableCell>
+           ...
+          </BaseTableCell>
+          <BaseTableCell @click="al()">
+           Click me
+          </BaseTableCell>
+          <BaseTableCell ignore-row-interactions>
+            ignore row interactions
+          </BaseTableCell>
         </BaseTableRow>
       </BaseTableBody>
     </BaseTable>

package/src/components/BaseTable.vue

@@ -1,38 +1,100 @@
 <template>
-  <table :class="classes">
-    <slot />  
-  </table> 
+  <div class="relative">
+    <div
+      ref="scrollableRef"
+      class="overflow-x-auto overflow-y-auto"
+      data-scroll-lock-scrollable
+      :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
+    >
+      <table :class="classes">
+        <slot />
+      </table>
+    </div>
+
+    <slot name="loading">
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition ease-in duration-200"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="loading"
+          class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
+        >
+          <div class="absolute h-full w-full bg-white bg-opacity-60" />
+
+          <div class="pt-20">
+            <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
+          </div>
+        </div>
+      </Transition>
+    </slot>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ClassNameValue, twMerge } from 'tailwind-merge';
-import { CellSpacing } from '../services/table/types'
+import { useScroll } from '@vueuse/core';
+import BaseSpinnerLarge from '@/svg/BaseSpinnerLarge.vue';
+import { Size } from '@/utils/sizes';
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const props = withDefaults(defineProps<{
-  spacing?: CellSpacing,
+  size?: Size,
+  fixedHeader?: boolean,
+  fixedColumn?: boolean,
   grid?: boolean,
   striped?: boolean,
   flush?: boolean,
   class?: ClassNameValue,
+  maxHeight?: number,
+  loading?: boolean,
 }>(), {
-  spacing: 'md',
+  size: 'md',
+  fixedHeader: false,
+  fixedColumn: false,
   grid: false,
   striped: false,
   flush: false,
   class: undefined,
+  maxHeight: undefined,
+  loading: false,
 });
 
-provide('BaseTable', computed(() => props));
-
 const classes = computed(() => {
   return twMerge(
-    'text-sm',
+    'border-separate border-spacing-0 text-sm',
     props.class,
   );
 });
 
+// Sticky styles
+
+const horizontalScrolling = ref(false);
+const scrollableRef = ref<null | HTMLElement>(null);
+
+const { x } = useScroll(scrollableRef);
+watch(x, (value) => {
+  horizontalScrolling.value = value > 0;
+});
+
+function scrollTop() {
+  if (scrollableRef.value) {
+    scrollableRef.value.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+}
+
+provide('table:props', computed(() => props));
+provide('table:horizontalScrolling', computed(() => horizontalScrolling.value));
+
+defineExpose({
+  scrollTop,
+});
+
 </script>

package/src/components/BaseTableBody.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 
-const baseTable = inject('BaseTable');
+const baseTable = inject('table:props');
 
 if (!baseTable) {
   throw new Error('BaseTableBody must be used within a BaseTable.');

package/src/components/BaseTableCell.vue

@@ -1,37 +1,53 @@
 <template>
   <td
-    class="p-0 border-b border-slate-200 group-last/row:border-b-0"
+    ref="tdRef"
     :align="align"
     :colspan="colspan"
+    :class="classes"
+    :style="style"
+    :title="propsInternal.title"
+    @click="onClick"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
-    <component
-      :is="componentName"
-      :class="classes"
-      :to="propsInternal.to"
+    <a
+      v-if="propsInternal.href"
       :href="propsInternal.href"
-      :title="propsInternal.title"
       :target="propsInternal.target"
-    >
-      <slot />
-    </component>
+      tabindex="0"
+      class="absolute inset-0 focus:outline-none"
+    />
+    <RouterLink
+      v-if="propsInternal.to"
+      :to="propsInternal.to"
+      tabindex="0"
+      class="absolute inset-0 focus:outline-none"
+    />
+    <slot :hover="hoverInternal" />
   </td> 
 </template>
 
 <script lang="ts" setup>
-import { RouteLocationRaw } from 'vue-router';
+import { RouteLocationRaw, RouterLink } from 'vue-router';
 import { TableProps, CellConfig, CellProps } from '../services/table/types'
 import { cellClasses } from '../services/table/classes'
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { cloneDeep, merge } from 'lodash';
-import { ComputedRef } from 'vue';
+import { ComputedRef, StyleValue } from 'vue';
+import { useIsFirstColumn } from '../composables/isFirstColumn'
+import { useIsLastColumn } from '../composables/isLastColumn'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const baseTable = inject('BaseTable') as ComputedRef<TableProps> | undefined;
-const baseTableHead = inject('BaseTableHead', undefined);
-const baseTableRow = inject('BaseTableRow', undefined) as ComputedRef<CellProps> | undefined;
+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 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;
 
 if (!baseTableRow) {
   throw new Error('BaseTableCell must be used within a BaseTableRow.');
@@ -47,6 +63,9 @@ const props = withDefaults(defineProps<{
   align?: 'left' | 'center' | 'right',
   colspan?: number | string,
   class?: ClassNameValue,
+  style?: StyleValue,
+  onClick?: (e: MouseEvent) => void,
+  ignoreRowInteractions?: boolean,
 }>(), {
   href: undefined,
   to: undefined,
@@ -55,57 +74,96 @@ const props = withDefaults(defineProps<{
   align: 'left',
   colspan: undefined,
   class: undefined,
+  style: undefined,
+  onClick: undefined,
+  ignoreRowInteractions: false,
 });
 
 const cellConfig = computed<CellConfig>(() => {
   return {
-    spacing: baseTable?.value?.spacing,
+    size: baseTable?.value?.size,
     flush: baseTable?.value?.flush,
     head: isHead.value,
   }
 });
 
-const propsInternal = computed<CellProps>(() => {
-  return merge(cloneDeep(baseTableRow.value), props);
+const ignoreRowInteractionsInternal = computed(() => {
+  if (props.onClick || props.href || props.to) {
+    return true;
+  }
+
+  return props.ignoreRowInteractions;
 });
 
-const componentName = computed(() => {
-  if (propsInternal.value.href) {
-    return 'a';
+const propsInternal = computed<CellProps>(() => {
+
+  const baseTableRowMutated = cloneDeep(baseTableRow.value);
+
+  if (ignoreRowInteractionsInternal.value) {
+    baseTableRowMutated.href = undefined;
+    baseTableRowMutated.to = undefined;
+    baseTableRowMutated.target = undefined;
+    baseTableRowMutated.onClick = undefined;
   }
 
-  if (propsInternal.value.to) {
-    return 'router-link';
+  return merge(baseTableRowMutated, props);
+});
+
+const clickable = computed(() => {
+  return !!propsInternal.value.onClick || !!propsInternal.value.href || !!propsInternal.value.to;
+});
+
+const hover = ref(false);
+
+const hoverInternal = computed(() => {
+  // Hover for cell only
+  if (ignoreRowInteractionsInternal.value) {
+    return hover.value;
   }
 
-  return 'div';
+  // Hover for full row
+  return (baseTableRowHover?.value ?? false) && (hoverForFullRow?.value ?? true);
 });
 
 const classes = computed(() => {
   const base = cellClasses(cellConfig.value);
+  const baseTd = 'relative bg-white border-b border-slate-200 group-last/row:border-b-0';
   const click = clickable.value ? 'cursor-pointer' : '';
-  const clickRow = clickableRow.value ? 'group-hover/row:bg-slate-50' : '';
-  const clickCell = clickableCell.value ? 'hover:bg-slate-50' : '';
+  const hover = clickable.value && hoverInternal.value ? 'bg-slate-50' : '';
+  const firstCol = isFirstColumn.value ? 'duration-300 transition-[border] 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' : '';
 
   return twMerge(
     base,
+    baseTd,
     click,
-    clickRow,
-    clickCell,
+    hover,
+    firstCol,
+    horizontalScrolling,
+    flushLeft,
+    flushRight,
     props.class,
   );
 });
 
-const clickable = computed(() => {
-  return propsInternal.value.href || propsInternal.value.to;
-});
+const tdRef = ref<HTMLTableCellElement | null>(null);
 
-const clickableRow = computed(() => {
-  return !clickableCell.value && clickable.value;
-});
+const { isFirstColumn } = useIsFirstColumn(tdRef);
+const { isLastColumn } = useIsLastColumn(tdRef);
 
-const clickableCell = computed(() => {
-  return props.href || props.to;
-});
+function onClick(event: MouseEvent) {
+  propsInternal.value.onClick?.(event);
+}
+
+function onMouseEnter() {
+  hover.value = true;
+  setHoverForFullRow(ignoreRowInteractionsInternal.value ? false : true)
+}
+
+function onMouseLeave() {
+  hover.value = false;
+}
 
 </script>

package/src/components/BaseTableColumn.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
 import { defineComponent, h, PropType } from 'vue';
+import { BaseTableColumnData, CollectionItem } from '..';
+import { RouteLocationRaw } from 'vue-router';
 
 export default defineComponent({
   name: 'BaseTableColumn',
+  inheritAttrs: false,
   props: {
     label: {
       default: '',
@@ -12,6 +15,10 @@ export default defineComponent({
       default: '',
       type: [String, Number],
     },
+    class: {
+      default: '',
+      type: [String, Array, Object],
+    },
     field: {
       default: '',
       type: String,
@@ -44,8 +51,8 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
-    clickable: {
-      default: true,
+    ignoreRowInteractions: {
+      default: false,
       type: Boolean,
     },
     toggle: {
@@ -64,6 +71,22 @@ export default defineComponent({
       default: undefined,
       type: Function,
     },
+    to: {
+      default: undefined,
+      type: Function as PropType<(row: CollectionItem) => RouteLocationRaw>,
+    },
+    href: {
+      default: undefined,
+      type: Function as PropType<(row: CollectionItem) => string>,
+    },
+    target: {
+      default: undefined,
+      type: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
+    },
+    onClick: {
+      default: undefined,
+      type: Function as PropType<(row: CollectionItem, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void>,
+    },
     /** Adds native attributes to th :th-attrs="(column)" => ({})" */
     thAttrs: {
       type: Function,

package/src/components/BaseTableHead.vue

@@ -1,23 +1,35 @@
 <template>
-  <thead>
+  <thead
+    :class="classes"
+  >
     <slot />  
   </thead> 
 </template>
 
 <script lang="ts" setup>
+import { ClassNameValue, twMerge } from 'tailwind-merge';
 
 const props = withDefaults(defineProps<{
-  sticky?: boolean,
+  class?: ClassNameValue,
 }>(), {
-  sticky: false,
+  class: undefined,
 });
 
-const baseTable = inject('BaseTable');
+const baseTable = inject('table:props');
 
 if (!baseTable) {
   throw new Error('BaseTableHead must be used within a BaseTable.');
 }
 
-provide('BaseTableHead', computed(() => props));
+provide('tableHead:props', computed(() => props));
+
+const classes = computed(() => {
+  const base = '';
+
+  return twMerge(
+    base,
+    props.class,
+  );
+});
 
 </script>

package/src/components/BaseTableHeader.vue

@@ -1,23 +1,27 @@
 <template>
   <th
-    class="p-0 border-b border-slate-200"
+    ref="thRef"
+    :class="classes"
     :align="align"
     :colspan="colspan"
+    :style="style"
+    @click="onClick"
   >
-    <div :class="classes">
-      <slot />  
-    </div>
+    <slot />
   </th> 
 </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';
-import { ComputedRef } from 'vue';
+import { ComputedRef, StyleValue } from 'vue';
 
-const baseTable = inject('BaseTable') as ComputedRef<TableProps> | undefined;
-const baseTableHead = inject('BaseTableHead', undefined);
+const baseTable = inject('table:props') as ComputedRef<TableProps> | undefined;
+const baseTableHead = inject('tableHead:props', undefined);
+const baseTableHorizontalScrolling = inject('table:horizontalScrolling', undefined) as ComputedRef<boolean> | undefined;
 
 if (!baseTableHead) {
   throw new Error('BaseTableCell must be used within a BaseTableHead.');
@@ -27,33 +31,58 @@ defineOptions({
   inheritAttrs: false,
 });
 
+const emit = defineEmits(['click']);
+
 const props = withDefaults(defineProps<{
   class?: ClassNameValue,
+  style?: StyleValue,
   align?: 'left' | 'center' | 'right',
   colspan?: number,
 }>(), {
   class: undefined,
+  style: undefined,
   align: 'left',
   colspan: undefined,
 });
 
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+
 const cellConfig = computed<CellConfig>(() => {
   return {
-    spacing: baseTable?.value?.spacing,
+    size: baseTable?.value?.size,
     flush: baseTable?.value?.flush,
     head: true,
   }
 });
 
+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 ? 'duration-300 transition-[border] 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' : '';
 
   return twMerge(
-    'text-slate-500 font-normal',
     base,
+    baseTh,
+    sticky,
+    firstCol,
+    horizontalScrolling,
+    flushLeft,
+    flushRight,
     props.class,
   );
-})
+});
 
 
 </script>