sprintify-ui 0.8.28 → 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.28",
+  "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/BaseTable.vue

@@ -99,6 +99,7 @@ function scrollTop() {
 }
 
 // Virtual Scrolling
+
 const virtualScrollingDefaultRowHeight = ref(null) as Ref<number | null | undefined>;
 function setVirtualScrollingDefaultRowHeight(height: number) {
   virtualScrollingDefaultRowHeight.value = height;