sprintify-ui 0.8.27 → 0.8.29

package/dist/tailwindcss/button.js

@@ -1,5 +1,5 @@
-module.exports = function (theme) {
-    return {
+module.exports = function ({ addComponents, theme }) {
+    addComponents({
         // Button
         '.btn': {
             position: 'relative',
@@ -257,5 +257,5 @@ module.exports = function (theme) {
                 '--tw-ring-color': theme('colors.slate.200'),
             },
         },
-    }
+    });
 }

package/dist/tailwindcss/index.js

@@ -4,19 +4,18 @@ const theme = require('./theme');
 const button = require('./button');
 const overlay = require('./overlay');
 const input = require('./input');
+const table = require('./table');
 
 const config = {
   theme: theme
 }
 
 module.exports = plugin(
-  function ({ addComponents, theme }) {
-    addComponents(
-      Object.assign({},
-        button(theme),
-        overlay(theme),
-        input(theme),
-      ));
+  function (ctx) {
+    button(ctx);
+    overlay(ctx);
+    input(ctx);
+    table(ctx);
   },
   config
 );

package/dist/tailwindcss/input.js

@@ -1,11 +1,11 @@
 const { parseColor } = require("tailwindcss/lib/util/color");
 
-module.exports = function (theme) {
+module.exports = function ({ addComponents, theme }) {
 
     const blueColor = parseColor(theme('colors.blue.600')).color.join(", ");
     const redColor = parseColor(theme('colors.red.600')).color.join(", ");
 
-    return {
+    addComponents({
         '.input-focus': {
             'border-color': `rgba(${(blueColor)}, 0.6)`,
             'zIndex': 1,
@@ -19,5 +19,5 @@ module.exports = function (theme) {
         '.input-rounded': {
             'border-radius': theme('borderRadius.md'),
         }
-    }
+    });
 }

package/dist/tailwindcss/overlay.js

@@ -1,5 +1,5 @@
-module.exports = function (theme) {
-    return {
+module.exports = function ({ addComponents }) {
+    addComponents({
         '.overlay': {
             position: 'absolute',
             top: 0,
@@ -9,5 +9,5 @@ module.exports = function (theme) {
             width: '100%',
             height: '100%',
         },
-    }
+    });
 }

package/dist/tailwindcss/table.js

@@ -0,0 +1,92 @@
+module.exports = function ({ addVariant, addComponents, e, theme }) {
+
+    // Variants
+
+    addVariant('tr', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`tr${separator}${className}`)} tr`
+        })
+    });
+
+    addVariant('th', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`th${separator}${className}`)} th`
+        })
+    });
+
+    addVariant('td', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+            return `.${e(`td${separator}${className}`)} td`
+        })
+    });
+
+    // Components
+
+    const borderWidth = theme('borderWidth.DEFAULT');
+    const borderStyle = theme('borderStyle.solid');
+    const borderColor = theme('colors.slate.200');
+
+    addComponents({
+        '.tabulation': {
+            'border-collapse': 'collapse',
+            'border-bottom-width': borderWidth,
+            'border-bottom-style': borderStyle,
+            'border-bottom-color': borderColor,
+            'border-radius': theme('borderRadius.md'),
+            'table-layout': 'fixed',
+        },
+        '.tabulation thead': {
+            'background-color': theme('colors.slate.100'),
+        },
+        '.tabulation th, .tabulation td': {
+            'padding': theme('spacing.3') + ' ' + theme('spacing.2'),
+            'text-align': 'left',
+            'border-bottom-width': borderWidth,
+            'border-bottom-style': borderStyle,
+            'border-bottom-color': borderColor,
+        },
+        '.tabulation th': {
+            'font-weight': theme('fontWeight.bold'),
+        },
+        '.tabulation.tabulation-nowrap td, .tabulation.tabulation-nowrap th': {
+            'white-space': 'nowrap',
+        },
+        '.tabulation.tabulation-flush td:first-child, .tabulation.tabulation-flush th:first-child': {
+            'padding-left': '0',
+        },
+        '.tabulation.tabulation-flush td:last-child, .tabulation.tabulation-flush th:last-child': {
+            'padding-right': '0',
+        },
+        // Sizes
+        '.tabulation-xs th, .tabulation-xs td': {
+            'padding': theme('spacing.1') + ' ' + theme('spacing.2'),
+            'font-size': theme('fontSize.xs'),
+        },
+        '.tabulation-sm th, .tabulation-sm td': {
+            'padding': theme('spacing.1') + ' ' + theme('spacing.2'),
+            'font-size': theme('fontSize.sm'),
+        },
+        '.tabulation-md th, .tabulation-md td': {
+            'padding': theme('spacing.2') + ' ' + theme('spacing.3'),
+            'font-size': theme('fontSize.sm'),
+        },
+        '.tabulation-lg th, .tabulation-lg td': {
+            'padding': theme('spacing.3') + ' ' + theme('spacing.4'),
+            'font-size': theme('fontSize.base'),
+        },
+        '.tabulation-xl th, .tabulation-xl td': {
+            'padding': theme('spacing.4') + ' ' + theme('spacing.5'),
+            'font-size': theme('fontSize.lg'),
+        },
+        // Striped
+        '.tabulation.tabulation-striped tr:nth-child(even)': {
+            'background-color': theme('colors.slate.100'),
+        },
+        // Grid
+        '.tabulation.tabulation-grid th, .tabulation.tabulation-grid td': {
+            'border-width': borderWidth,
+            'border-style': borderStyle,
+            'border-color': borderColor,
+        },
+    });
+};

package/package.json

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

package/src/components/BaseTable.stories.js

@@ -68,6 +68,38 @@ const Template = (args) => ({
     return { args, optionsLarge };
   },
   template: `
+
+  <table class="tabulation tabulation-grid tabulation-sm tabulation-striped w-full bg-white border mb-5">
+    <thead>
+      <tr>
+        <th>Label</th>
+        <th>ID</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+      <tr>
+        <td>Label</td>
+        <td>ID</td>
+        <td>Type</td>
+        <td>Description</td>
+      </tr>
+    </tbody>
+  </table>
+
   <div class="border">
     <BaseTable class="w-full" v-bind="args">
       ${headTemplate}

package/src/components/BaseTableRow.vue

@@ -21,10 +21,10 @@
 <script lang="ts" setup>
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
-import { useIntersectionObserver } from '@vueuse/core';
 import { cellClasses } from '../services/table/classes';
 import { CellConfig, TableProps } from '../services/table/types';
 import { ComputedRef, Ref } from 'vue';
+import { debounce } from 'lodash';
 
 defineOptions({
   inheritAttrs: false,
@@ -40,13 +40,66 @@ const isHead = computed(() => baseTableHead !== undefined);
 
 // Virtual scrolling
 
+const trRef = ref<HTMLTableRowElement | null>(null);
+const inViewport = ref(false);
+const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
+
 const baseTableVirtualScrollingDefaultRowHeight = inject('table:virtualScrollingDefaultRowHeight', undefined) as ComputedRef<number> | undefined;
 const setVirtualScrollingDefaultRowHeight = inject('table:setVirtualScrollingDefaultRowHeight', undefined) as ((height: number) => void) | undefined;
 
-const inViewport = ref(false);
-const trRef = ref<HTMLTableRowElement | null>(null);
+const onScrollDebounce = debounce(onScroll, 10);
 
-const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
+window.addEventListener('scroll', onScrollDebounce);
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScrollDebounce);
+});
+
+onMounted(() => {
+  onScroll();
+});
+
+
+function onScroll() {
+
+  if (isHead.value) {
+    return;
+  }
+
+  if (!baseTable?.value?.virtualScrolling) {
+    return;
+  }
+
+  const isInViewport = isElementInViewport();
+
+  inViewport.value = isInViewport;
+
+  if (isInViewport) {
+    nextTick(() => {
+      trRenderedHeight.value = trRef.value?.offsetHeight;
+
+      if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
+        setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
+      }
+    });
+  }
+}
+
+function isElementInViewport() {
+
+  if (!trRef.value) {
+    return false;
+  }
+
+  const rect = trRef.value.getBoundingClientRect();
+
+  const offsetY = 500;
+
+  return (
+    rect.top >= -offsetY &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetY
+  );
+}
 
 const height = computed(() => {
   if (isHead.value) {
@@ -84,31 +137,7 @@ const cellClass = computed(() => {
   return cellClasses(cellConfig.value) + ' text-white border-t border-gray-200';
 });
 
-if (!isHead.value && baseTable.value.virtualScrolling) {
-
-  const margin = '300px';
-
-  useIntersectionObserver(
-    trRef,
-    ([{ isIntersecting }]) => {
-
-      inViewport.value = isIntersecting;
-
-      if (isIntersecting) {
-        nextTick(() => {
-          trRenderedHeight.value = trRef.value?.offsetHeight;
-
-          if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
-            setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
-          }
-        });
-      }
-    },
-    {
-      rootMargin: margin,
-    }
-  );
-}
+// Emit
 
 const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);