@robuust-digital/vue-components 1.1.1 → 1.2.0

package/dist/tailwind/components/drawer.js

@@ -5,91 +5,95 @@ import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
  *
  * @param {Object} theme - The global theme object
  */
-export default (theme) => {
-  // Reserved keys that should not be applied to root
-  const reservedKeys = ['backdrop', 'header', 'title', 'close', 'content', 'footer'];
-
-  // Filter drawer theme object
-  const drawerRootTheme = Object.entries(theme('components.drawer') || {})
-    .filter(([key]) => !reservedKeys.includes(key))
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
-
-  return {
-    '.drawer': {
-      position: 'relative',
-      zIndex: 500,
-      ...drawerRootTheme,
-
-      // Backdrop
-      '.drawer-backdrop': {
-        backgroundColor: withAlphaValue(theme('colors.neutral.900'), 0.5),
-        ...theme('components.drawer.backdrop'),
-      },
-
-      // Header
-      '.drawer-header': {
-        padding: theme('padding.4'),
-        backgroundColor: theme('colors.white'),
-        borderColor: theme('colors.neutral.200'),
-        borderBottomWidth: theme('borderWidth.DEFAULT'),
-        borderBottomStyle: theme('borderStyle.solid'),
-
-        [`@media (min-width: ${theme('screens.sm')})`]: {
-          padding: theme('padding.6'),
-        },
-
-        ...theme('components.drawer.header'),
-      },
-
-      // Title
-      '.drawer-title': {
-        fontSize: theme('fontSize.2xl'),
-        fontWeight: theme('fontWeight.bold'),
-        color: theme('colors.neutral.900'),
-        ...theme('components.drawer.title'),
-      },
-
-      // Close
-      '.drawer-close': {
-        width: theme('width.6'),
-        height: theme('height.6'),
-        color: theme('colors.neutral.700'),
-
-        '&:hover': {
-          color: theme('colors.neutral.950'),
-        },
+export default (theme) => ({
+  ':root': {
+    '--rvc-drawer-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
+    '--rvc-drawer-padding-x': theme('padding.4'),
+    '--rvc-drawer-padding-y': theme('padding.4'),
+    '--rvc-drawer-border-color': theme('colors.slate.200'),
+    '--rvc-drawer-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-drawer-border-style': 'solid',
+    '--rvc-drawer-header-bg-color': theme('colors.white'),
+    '--rvc-drawer-title-font-size': theme('fontSize.2xl'),
+    '--rvc-drawer-title-font-weight': theme('fontWeight.bold'),
+    '--rvc-drawer-title-color': theme('colors.slate.900'),
+    '--rvc-drawer-close-size': theme('width.6'),
+    '--rvc-drawer-close-color': theme('colors.slate.700'),
+    '--rvc-drawer-close-color-hover': theme('colors.slate.900'),
+    '--rvc-drawer-content-bg-color': theme('colors.white'),
+    '--rvc-drawer-footer-bg-color': theme('colors.slate.50'),
+    '--rvc-drawer-footer-gap': theme('gap.3'),
+    '--rvc-drawer-footer-justify-content': 'space-between',
+  },
+
+  '.rvc-drawer': {
+    zIndex: 500,
+    position: 'relative',
+    ...theme('components.drawer'),
+
+    // Backdrop
+    '.rvc-drawer-backdrop': {
+      backgroundColor: 'var(--rvc-drawer-backdrop-bg-color)',
+    },
 
-        ...theme('components.drawer.close'),
-      },
+    // Header
+    '.rvc-drawer-header': {
+      paddingTop: 'var(--rvc-drawer-padding-y)',
+      paddingRight: 'var(--rvc-drawer-padding-x)',
+      paddingBottom: 'var(--rvc-drawer-padding-y)',
+      paddingLeft: 'var(--rvc-drawer-padding-x)',
+      borderColor: 'var(--rvc-drawer-border-color)',
+      borderBottomWidth: 'var(--rvc-drawer-border-width)',
+      borderBottomStyle: 'var(--rvc-drawer-border-style)',
+      backgroundColor: 'var(--rvc-drawer-header-bg-color)',
+    },
 
-      // Content
-      '.drawer-content': {
-        padding: theme('padding.4'),
-        backgroundColor: theme('colors.white'),
+    // Title
+    '.rvc-drawer-title': {
+      fontSize: 'var(--rvc-drawer-title-font-size)',
+      fontWeight: 'var(--rvc-drawer-title-font-weight)',
+      color: 'var(--rvc-drawer-title-color)',
+    },
 
-        [`@media (min-width: ${theme('screens.sm')})`]: {
-          padding: theme('padding.6'),
-        },
+    // Close
+    '.rvc-drawer-close': {
+      width: 'var(--rvc-drawer-close-size)',
+      height: 'var(--rvc-drawer-close-size)',
+      color: 'var(--rvc-drawer-close-color)',
 
-        ...theme('components.drawer.content'),
+      '&:hover': {
+        color: 'var(--rvc-drawer-close-color-hover)',
       },
+    },
 
-      // Footer
-      '.drawer-footer': {
-        padding: theme('padding.4'),
-        backgroundColor: theme('colors.neutral.50'),
-        borderColor: theme('colors.neutral.200'),
-        borderTopWidth: theme('borderWidth.DEFAULT'),
-        borderTopStyle: theme('borderStyle.solid'),
-        gap: theme('gap.3'),
-        justifyContent: 'space-between',
+    // Content
+    '.rvc-drawer-content': {
+      paddingTop: 'var(--rvc-drawer-padding-y)',
+      paddingRight: 'var(--rvc-drawer-padding-x)',
+      paddingBottom: 'var(--rvc-drawer-padding-y)',
+      paddingLeft: 'var(--rvc-drawer-padding-x)',
+      backgroundColor: 'var(--rvc-drawer-content-bg-color)',
+    },
 
-        [`@media (min-width: ${theme('screens.sm')})`]: {
-          padding: theme('padding.6'),
-        },
+    // Footer
+    '.rvc-drawer-footer': {
+      paddingTop: 'var(--rvc-drawer-padding-y)',
+      paddingRight: 'var(--rvc-drawer-padding-x)',
+      paddingBottom: 'var(--rvc-drawer-padding-y)',
+      paddingLeft: 'var(--rvc-drawer-padding-x)',
+      borderColor: 'var(--rvc-drawer-border-color)',
+      borderTopWidth: 'var(--rvc-drawer-border-width)',
+      borderTopStyle: 'var(--rvc-drawer-border-style)',
+      backgroundColor: 'var(--rvc-drawer-footer-bg-color)',
+      gap: 'var(--rvc-drawer-footer-gap)',
+      justifyContent: 'var(--rvc-drawer-footer-justify-content)',
+    },
 
-        ...theme('components.drawer.footer'),
-      },
+    // Larger screens
+    [`@media (min-width: ${theme('screens.sm')})`]: {
+      '--rvc-drawer-padding-x': theme('padding.6'),
+      '--rvc-drawer-padding-y': theme('padding.6'),
+      ...theme('components.drawer[screen-sm]'),
     },
-  };
-};
+  },
+});

package/dist/tailwind/components/lightswitch.js

@@ -0,0 +1,73 @@
+/**
+ * Lightswitch component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-lightswitch-border-radius': theme('borderRadius.full'),
+    '--rvc-lightswitch-height': '1.875rem',
+    '--rvc-lightswitch-width': '3.125rem',
+    '--rvc-lightswitch-bg-color': theme('colors.slate.200'),
+    '--rvc-lightswitch-bg-color-enabled': theme('colors.green.400'),
+    '--rvc-lightswitch-transition-property': theme('transitionProperty.colors'),
+    '--rvc-lightswitch-transition-duration': theme('transitionDuration.DEFAULT'),
+    '--rvc-lightswitch-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    '--rvc-lightswitch-label-offset': '0.5rem',
+    '--rvc-lightswitch-toggle-offset': '0.1875rem',
+    '--rvc-lightswitch-toggle-size': theme('width.6'),
+    '--rvc-lightswitch-toggle-bg-color': theme('colors.white'),
+    '--rvc-lightswitch-toggle-transition-property': theme('transitionProperty.transform'),
+    '--rvc-lightswitch-toggle-transition-duration': theme('transitionDuration.DEFAULT'),
+    '--rvc-lightswitch-toggle-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+  },
+
+  '.rvc-lightswitch-group': {
+    display: 'inline-block',
+    ...theme('components.lightswitch'),
+
+    '&:has(label)': {
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+
+    label: {
+      cursor: 'pointer',
+      paddingLeft: 'var(--rvc-lightswitch-label-offset)',
+    },
+
+    '.rvc-lightswitch': {
+      height: 'var(--rvc-lightswitch-height)',
+      transitionProperty: 'var(--rvc-lightswitch-transition-property)',
+      transitionDuration: 'var(--rvc-lightswitch-transition-duration)',
+      transitionTimingFunction: 'var(--rvc-lightswitch-transition-timing-function)',
+      width: 'var(--rvc-lightswitch-width)',
+      borderRadius: 'var(--rvc-lightswitch-border-radius)',
+      backgroundColor: 'var(--rvc-lightswitch-bg-color)',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+
+      '.rvc-lightswitch-toggle': {
+        width: 'var(--rvc-lightswitch-toggle-size)',
+        height: 'var(--rvc-lightswitch-toggle-size)',
+        transform: 'translateX(var(--rvc-lightswitch-toggle-offset))',
+        borderRadius: 'var(--rvc-lightswitch-border-radius)',
+        backgroundColor: 'var(--rvc-lightswitch-toggle-bg-color)',
+        transitionProperty: 'var(--rvc-lightswitch-toggle-transition-property)',
+        transitionDuration: 'var(--rvc-lightswitch-toggle-transition-duration)',
+        transitionTimingFunction: 'var(--rvc-lightswitch-toggle-transition-timing-function)',
+        display: 'inline-block',
+        boxShadow: theme('boxShadow.md'),
+      },
+
+      '&.rvc-lightswitch-enabled': {
+        backgroundColor: 'var(--rvc-lightswitch-bg-color-enabled)',
+
+        '.rvc-lightswitch-toggle': {
+          transform: 'translateX(calc(var(--rvc-lightswitch-width) - var(--rvc-lightswitch-toggle-size) - var(--rvc-lightswitch-toggle-offset)))',
+        },
+      },
+    },
+  },
+});

package/dist/tailwind/components/modal.js

@@ -0,0 +1,127 @@
+import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
+
+/**
+ * Modal component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-modal-backdrop-bg-color': withAlphaValue(theme('colors.slate.900'), 0.5),
+    '--rvc-modal-border-color': theme('colors.slate.200'),
+    '--rvc-modal-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-modal-border-style': 'solid',
+    '--rvc-modal-border-radius': theme('borderRadius.DEFAULT'),
+    '--rvc-modal-box-shadow': theme('boxShadow.xl'),
+    '--rvc-modal-margin-y': 0,
+    '--rvc-modal-padding-x': theme('padding.4'),
+    '--rvc-modal-padding-y': theme('padding.4'),
+    '--rvc-modal-header-bg-color': theme('colors.slate.50'),
+    '--rvc-modal-title-font-size': theme('fontSize.xl'),
+    '--rvc-modal-title-font-weight': theme('fontWeight.bold'),
+    '--rvc-modal-title-color': theme('colors.slate.900'),
+    '--rvc-modal-close-size': theme('width.6'),
+    '--rvc-modal-close-color': theme('colors.slate.700'),
+    '--rvc-modal-close-color-hover': theme('colors.slate.900'),
+    '--rvc-modal-content-bg-color': theme('colors.white'),
+    '--rvc-modal-footer-bg-color': theme('colors.white'),
+    '--rvc-modal-footer-gap': theme('gap.2'),
+  },
+
+  '.rvc-modal': {
+    zIndex: 600,
+    position: 'relative',
+    ...theme('components.modal'),
+
+    // Backdrop
+    '.rvc-modal-backdrop': {
+      backgroundColor: 'var(--rvc-modal-backdrop-bg-color)',
+    },
+
+    // Panel
+    '.rvc-modal-panel': {
+      borderColor: 'var(--rvc-modal-border-color)',
+      borderWidth: 'var(--rvc-modal-border-width)',
+      borderStyle: 'var(--rvc-modal-border-style)',
+      borderRadius: 'var(--rvc-modal-border-radius)',
+      boxShadow: 'var(--rvc-modal-box-shadow)',
+      marginTop: 'var(--rvc-modal-margin-y)',
+      marginBottom: 'var(--rvc-modal-margin-y)',
+      display: 'flex',
+      height: '100%',
+      flexDirection: 'column',
+      position: 'relative',
+      transform: 'translate(0, 0)',
+      overflow: 'hidden',
+      width: '100%',
+      textAlign: 'left',
+    },
+
+    // Header
+    '.rvc-modal-header': {
+      paddingTop: 'var(--rvc-modal-padding-y)',
+      paddingRight: 'var(--rvc-modal-padding-x)',
+      paddingBottom: 'var(--rvc-modal-padding-y)',
+      paddingLeft: 'var(--rvc-modal-padding-x)',
+      backgroundColor: 'var(--rvc-modal-header-bg-color)',
+      borderBottomColor: 'var(--rvc-modal-border-color)',
+      borderBottomWidth: 'var(--rvc-modal-border-width)',
+      borderBottomStyle: 'var(--rvc-modal-border-style)',
+    },
+
+    // Title
+    '.rvc-modal-title': {
+      fontSize: 'var(--rvc-modal-title-font-size)',
+      fontWeight: 'var(--rvc-modal-title-font-weight)',
+      color: 'var(--rvc-modal-title-color)',
+    },
+
+    // Close
+    '.rvc-modal-close': {
+      width: 'var(--rvc-modal-close-size)',
+      height: 'var(--rvc-modal-close-size)',
+      color: 'var(--rvc-modal-close-color)',
+
+      '&:hover': {
+        color: 'var(--rvc-modal-close-color-hover)',
+      },
+    },
+
+    // Content
+    '.rvc-modal-content': {
+      paddingTop: 'var(--rvc-modal-padding-y)',
+      paddingRight: 'var(--rvc-modal-padding-x)',
+      paddingBottom: 'var(--rvc-modal-padding-y)',
+      paddingLeft: 'var(--rvc-modal-padding-x)',
+      backgroundColor: 'var(--rvc-modal-content-bg-color)',
+    },
+
+    // Footer
+    '.rvc-modal-footer': {
+      paddingTop: 'var(--rvc-modal-padding-y)',
+      paddingRight: 'var(--rvc-modal-padding-x)',
+      paddingBottom: 'var(--rvc-modal-padding-y)',
+      paddingLeft: 'var(--rvc-modal-padding-x)',
+      gap: 'var(--rvc-modal-footer-gap)',
+      backgroundColor: 'var(--rvc-modal-footer-bg-color)',
+      borderTopColor: 'var(--rvc-modal-border-color)',
+      borderTopWidth: 'var(--rvc-modal-border-width)',
+      borderTopStyle: 'var(--rvc-modal-border-style)',
+      display: 'flex',
+      flexDirection: 'column',
+
+      [`@media (min-width: ${theme('screens.sm')})`]: {
+        '--rvc-modal-footer-gap': theme('gap.3'),
+
+        flexDirection: 'row-reverse',
+      },
+    },
+
+    // Larger screens
+    [`@media (min-width: ${theme('screens.sm')})`]: {
+      '--rvc-modal-padding-x': theme('padding.6'),
+      '--rvc-modal-padding-y': theme('padding.4'),
+      ...theme('components.modal[screen-sm]'),
+    },
+  },
+});

package/dist/tailwind/components/table.js

@@ -0,0 +1,109 @@
+/**
+ * DataTable component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-table-head-border-color': theme('colors.slate.300'),
+    '--rvc-table-border-color': theme('colors.slate.200'),
+    '--rvc-table-border-style': 'solid',
+    '--rvc-table-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-table-head-bg-color': theme('colors.slate.200'),
+    '--rvc-table-bg-color': theme('colors.slate.50'),
+    '--rvc-table-font-size': '0.875rem',
+    '--rvc-table-head-font-size': '0.875rem',
+    '--rvc-table-head-font-weight': theme('fontWeight.medium'),
+    '--rvc-table-font-weight': theme('fontWeight.normal'),
+    '--rvc-table-padding-x': theme('padding.2'),
+    '--rvc-table-padding-y': theme('padding.3'),
+    '--rvc-table-white-space': 'nowrap',
+    '--rvc-table-line-height': '1.1',
+    '--rvc-table-spinner-size': theme('size.5'),
+  },
+
+  '.rvc-table': {
+    ...theme('components.table'),
+
+    '&.rvc-table-striped': {
+      thead: {
+        th: {
+          paddingRight: 'var(--rvc-table-padding-x)',
+          paddingLeft: 'var(--rvc-table-padding-x)',
+          backgroundColor: 'var(--rvc-table-head-bg-color)',
+        },
+      },
+
+      'tr:nth-of-type(even)': {
+        td: {
+          backgroundColor: 'var(--rvc-table-bg-color)',
+        },
+      },
+
+      td: {
+        paddingRight: 'var(--rvc-table-padding-x)',
+        paddingLeft: 'var(--rvc-table-padding-x)',
+      },
+    },
+
+    '&:not(.rvc-table-striped)': {
+      thead: {
+        th: {
+          borderBottomWidth: 'var(--rvc-table-border-width)',
+          borderBottomColor: 'var(--rvc-table-head-border-color)',
+          borderBottomStyle: 'var(--rvc-table-border-style)',
+
+          '&:not(:first-child,:last-child)': {
+            paddingRight: 'var(--rvc-table-padding-x)',
+            paddingLeft: 'var(--rvc-table-padding-x)',
+          },
+        },
+      },
+
+      'tr:not(:last-child)': {
+        td: {
+          borderBottomWidth: 'var(--rvc-table-border-width)',
+          borderBottomColor: 'var(--rvc-table-border-color)',
+          borderBottomStyle: 'var(--rvc-table-border-style)',
+        },
+      },
+
+      'td:not(:first-child,:last-child)': {
+        paddingRight: 'var(--rvc-table-padding-x)',
+        paddingLeft: 'var(--rvc-table-padding-x)',
+      },
+    },
+
+    thead: {
+      th: {
+        paddingTop: 'var(--rvc-table-padding-y)',
+        paddingBottom: 'var(--rvc-table-padding-y)',
+        fontSize: 'var(--rvc-table-head-font-size)',
+        fontWeight: 'var(--rvc-table-head-font-weight)',
+        lineHeight: 'var(--rvc-table-line-height)',
+        whiteSpace: 'var(--rvc-table-white-space)',
+      },
+    },
+
+    td: {
+      paddingTop: 'var(--rvc-table-padding-y)',
+      paddingBottom: 'var(--rvc-table-padding-y)',
+      fontSize: 'var(--rvc-table-font-size)',
+      fontWeight: 'var(--rvc-table-font-weight)',
+      lineHeight: 'var(--rvc-table-line-height)',
+      whiteSpace: 'var(--rvc-table-white-space)',
+    },
+
+    '.rvc-table-spinner': {
+      animation: theme('animation.spin'),
+      width: 'var(--rvc-table-spinner-size)',
+      height: 'var(--rvc-table-spinner-size)',
+    },
+
+    'td.rvc-table-state': {
+      borderBottomWidth: 'var(--rvc-table-border-width)',
+      borderBottomColor: 'var(--rvc-table-border-color)',
+      borderBottomStyle: 'var(--rvc-table-border-style)',
+    },
+  },
+});

package/dist/tailwind/components/tooltip.js

@@ -0,0 +1,66 @@
+import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
+
+/**
+ * Tooltip component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-tooltip-color': theme('colors.white'),
+    '--rvc-tooltip-transition-property': 'opacity, visibility',
+    '--rvc-tooltip-transition-duration': theme('transitionDuration.DEFAULT'),
+    '--rvc-tooltip-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    '--rvc-tooltip-text-align': 'left',
+    '--rvc-tooltip-padding-x': theme('padding.4'),
+    '--rvc-tooltip-padding-y': theme('padding.4'),
+    '--rvc-tooltip-width': theme('width.max'),
+    '--rvc-tooltip-border-radius': theme('borderRadius.DEFAULT'),
+    '--rvc-tooltip-bg-color': withAlphaValue(theme('colors.neutral.700'), 0.6),
+    '--rvc-tooltip-arrow-size': theme('width.3'),
+    '--rvc-tooltip-blur-size': theme('blur.sm'),
+  },
+
+  '.rvc-tooltip': {
+    zIndex: 10,
+    color: 'var(--rvc-tooltip-color)',
+    transitionProperty: 'var(--rvc-tooltip-transition-property)',
+    transitionDuration: 'var(--rvc-tooltip-transition-duration)',
+    transitionTimingFunction: 'var(--rvc-tooltip-transition-timing-function)',
+    textAlign: 'var(--rvc-tooltip-text-align)',
+    paddingTop: 'var(--rvc-tooltip-padding-y)',
+    paddingRight: 'var(--rvc-tooltip-padding-x)',
+    paddingBottom: 'var(--rvc-tooltip-padding-y)',
+    paddingLeft: 'var(--rvc-tooltip-padding-x)',
+    width: 'var(--rvc-tooltip-width)',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    ...theme('components.tooltip'),
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: 'var(--rvc-tooltip-border-radius)',
+      backgroundColor: 'var(--rvc-tooltip-bg-color)',
+      zIndex: -1,
+    },
+
+    // Arrow
+    '.rvc-tooltip-arrow': {
+      backgroundColor: 'var(--rvc-tooltip-bg-color)',
+      width: 'var(--rvc-tooltip-arrow-size)',
+      height: 'var(--rvc-tooltip-arrow-size)',
+      clipPath: 'polygon(0 0, 50% 50%, 100% 0)',
+      zIndex: -1,
+    },
+
+    '&.rvc-tooltip-blur::before, &.rvc-tooltip-blur .rvc-tooltip-arrow': {
+      backdropFilter: 'blur(var(--rvc-tooltip-blur-size))',
+    },
+  },
+});

package/dist/tailwind/index.js

@@ -1,10 +1,19 @@
 import plugin from 'tailwindcss/plugin';
 
+// Base
+import base from './base/index.js';
+
 // Components
+import accordion from './components/accordion.js';
 import alert from './components/alert.js';
 import badge from './components/badge.js';
 import button from './components/button.js';
+import checkbox from './components/checkbox.js';
 import drawer from './components/drawer.js';
+import lightswitch from './components/lightswitch.js';
+import modal from './components/modal.js';
+import table from './components/table.js';
+import tooltip from './components/tooltip.js';
 
 /**
  * Tailwind Theme plugin
@@ -16,11 +25,18 @@ import drawer from './components/drawer.js';
  *
  * @returns {void}
  */
-export default plugin.withOptions(() => ({ addComponents, theme }) => {
+export default plugin.withOptions(() => ({ addComponents, addBase, theme }) => {
+  addBase(base(theme));
   addComponents([
+    accordion(theme),
     alert(theme),
     badge(theme),
     button(theme),
+    checkbox(theme),
     drawer(theme),
+    lightswitch(theme),
+    modal(theme),
+    table(theme),
+    tooltip(theme),
   ], { respectPrefix: false });
 });