@sk-web-gui/core 0.1.81 → 0.1.83

package/src/components/checkbox.js

@@ -104,9 +104,16 @@ module.exports = Checkbox = (colors) => ({
     },
 
     // label
+    '&-label-left &-label': {
+      marginRight: '0.8rem',
+    },
+    '&-label-right &-label': {
+      marginLeft: '0.8rem',
+    },
+
     '&-label': {
       '@apply text-body select-none text-sm': {},
-      marginLeft: '0.8rem',
+      // marginLeft: '0.8rem',
       //"@apply text-black": {},
       // dark colors
       '@apply dark:text-neutral-100': {},

package/src/components/dropdown-filter.js

@@ -41,8 +41,12 @@ module.exports = DropdownFilter = () => ({
         alignItems: 'center',
         borderBottom: '1px solid #939393',
 
-        '> label:first-child': {
-          '@apply flex-grow': {},
+        '> label': {
+          '@apply w-full': {},
+
+          '> .form-checkbox-label': {
+            '@apply flex-grow': {},
+          },
         },
 
         '&.disabled': {

package/src/components/pagination.js

@@ -1,5 +1,5 @@
 module.exports = Pagination = () => ({
-  '.pagination': {
+  '.sk-pagination': {
     '@apply select-none': {},
 
     '&-sm': {
@@ -70,7 +70,7 @@ module.exports = Pagination = () => ({
     },
     '&.fit-content': {
       '@apply w-full max-w-full': {},
-      '.pagination-list': {
+      '.sk-pagination-list': {
         '@apply w-full flex justify-between': {},
         '&-item': {
           '@apply px-0  flex-shrink grow text-center': {},
@@ -80,7 +80,7 @@ module.exports = Pagination = () => ({
           '&.prev-next': {
             '@apply flex-shrink grow-0': {},
           },
-          '.pagination-pageLabel': {
+          '.sk-pagination-pageLabel': {
             '@apply w-full max-w-[1.5em] mx-xs': {},
           },
         },

package/src/components/tab-menu.js

@@ -1,58 +1,58 @@
-module.exports = TabMenu = () => ({
-  '.sk-tab-menu': {
-    '&-wrapper': {
-      display: 'flex',
-      flexDirection: 'row',
-      margin: 'auto',
-    },
-    '&-right': {
-      '@apply justify-end': {},
-    },
-    '&-center': {
-      '@apply justify-center': {},
-    },
-    '&-list': {
-      all: 'unset',
-      display: 'flex',
-      '&-stretch': {
-        '@apply w-full justify-between': {},
-      },
-    },
-
-    '&-underline': {
-      width: '100%',
-      height: 6,
-      '@apply bg-gray-light': {},
-    },
-    '&-item': {
-      all: 'unset',
-      height: 65,
-      display: 'flex',
-      padding: '0 1rem',
-      marginRight: '5rem',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'pointer',
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-[5rem]': {},
-      },
-      '&-center:last-of-type': {
-        '@apply mr-0': {},
-      },
-
-      '&.active::after': {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        height: 6,
-        top: '100%',
-        left: 0,
-        '@apply bg-primary': {},
-      },
-    },
-  },
-});
+module.exports = TabMenu = () => ({
+  '.sk-tab-menu': {
+    '&-wrapper': {
+      display: 'flex',
+      flexDirection: 'row',
+      margin: 'auto',
+    },
+    '&-right': {
+      '@apply justify-end': {},
+    },
+    '&-center': {
+      '@apply justify-center': {},
+    },
+    '&-list': {
+      all: 'unset',
+      display: 'flex',
+      '&-stretch': {
+        '@apply w-full justify-between': {},
+      },
+    },
+
+    '&-underline': {
+      width: '100%',
+      height: 6,
+      '@apply bg-gray-light': {},
+    },
+    '&-item': {
+      all: 'unset',
+      height: 65,
+      display: 'flex',
+      padding: '0 1rem',
+      marginRight: '5rem',
+      alignItems: 'center',
+      position: 'relative',
+      cursor: 'pointer',
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-[5rem]': {},
+      },
+      '&-center:last-of-type': {
+        '@apply mr-0': {},
+      },
+
+      '&.active::after': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: 6,
+        top: '100%',
+        left: 0,
+        '@apply bg-primary': {},
+      },
+    },
+  },
+});

package/src/components/tabs.js

@@ -1,64 +1,64 @@
-module.exports = Tabs = () => ({
-  '.sk-tabs': {
-    '&-stretch': {
-      '@apply w-full': {},
-    },
-    '&-list': {
-      '@apply  block relative w-full h-[3rem]': {},
-      '&-stretch': {
-        '@apply flex justify-between': {},
-      },
-      '&-right': {
-        '@apply text-right': {},
-      },
-      '&-center': {
-        '@apply text-center': {},
-      },
-
-      '&-line::after': {
-        content: '""',
-        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
-      },
-    },
-    '&-tab': {
-      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
-      '@apply text-gray': {},
-      '@apply cursor-pointer': {},
-      '&.disabled': {
-        '@apply cursor-not-allowed': {},
-        '@apply text-gray-stroke': {},
-      },
-      '&.active': {
-        '@apply text-body': {},
-        '&::after': {
-          content: '""',
-          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
-        },
-      },
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-header': {
-        '@apply text-lg font-normal': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-lg': {},
-      },
-      '&:last-of-type': {
-        '@apply mr-0': {},
-      },
-      '&-icon': {
-        '&-with-label': {
-          '@apply mr-sm': {},
-        },
-      },
-    },
-    '&-panel': {
-      '@apply mt-lg': {},
-      '&:not(.active)': {
-        display: 'none',
-        hidden: true,
-      },
-    },
-  },
-});
+module.exports = Tabs = () => ({
+  '.sk-tabs': {
+    '&-stretch': {
+      '@apply w-full': {},
+    },
+    '&-list': {
+      '@apply  block relative w-full h-[3rem]': {},
+      '&-stretch': {
+        '@apply flex justify-between': {},
+      },
+      '&-right': {
+        '@apply text-right': {},
+      },
+      '&-center': {
+        '@apply text-center': {},
+      },
+
+      '&-line::after': {
+        content: '""',
+        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
+      },
+    },
+    '&-tab': {
+      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
+      '@apply text-gray': {},
+      '@apply cursor-pointer': {},
+      '&.disabled': {
+        '@apply cursor-not-allowed': {},
+        '@apply text-gray-stroke': {},
+      },
+      '&.active': {
+        '@apply text-body': {},
+        '&::after': {
+          content: '""',
+          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
+        },
+      },
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-header': {
+        '@apply text-lg font-normal': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-lg': {},
+      },
+      '&:last-of-type': {
+        '@apply mr-0': {},
+      },
+      '&-icon': {
+        '&-with-label': {
+          '@apply mr-sm': {},
+        },
+      },
+    },
+    '&-panel': {
+      '@apply mt-lg': {},
+      '&:not(.active)': {
+        display: 'none',
+        hidden: true,
+      },
+    },
+  },
+});

package/src/components/zebratable.js

@@ -1,5 +1,5 @@
-(module).exports = ZebraTable = () => ({
-  '.zebratable': {
+module.exports = ZebraTable = () => ({
+  '.sk-zebratable': {
     '@apply w-full text-left table-auto': {},
 
     '&-thead': {
@@ -69,6 +69,15 @@
     '&-paginationwrapper': {
       '@apply w-full text-lg flex justify-center lg:justify-start': {},
     },
+    '&-pagination': {
+      '@apply grow': {},
+    },
+    '&.-pagination-pagesizes': {
+      '@apply grow-0': {},
+      '&.-select': {
+        '@apply w-auto': {},
+      },
+    },
 
     '&-bottomwrapper': {
       '@apply mt-lg px-lg flex items-center justify-end': {},

package/src/index.js

@@ -1,121 +1,8 @@
-const plugin = require('tailwindcss/plugin');
-
-const base = require('./base');
 const preset = require('./preset');
+const plugin = require('./plugin');
 
-// const colors = require("/colors");
-// const { colors } = require('@sk-web-gui/theme');
-// const withOpacity = require('./with-opacity');
-// components
-const Alert = require('./components/alert');
-const AlertBanner = require('./components/alert-banner');
-const Badge = require('./components/badge');
-const Breadcrumb = require('./components/breadcrumb');
-const ButtonGroup = require('./components/button-group');
-const Comments = require('./components/comments');
-const Checkbox = require('./components/checkbox');
-const ContextMenu = require('./components/context-menu');
-const Dialog = require('./components/dialog');
-const Dot = require('./components/dot');
-const Forms = require('./components/forms');
-const Calendar = require('./components/calendar');
-const Icon = require('./components/icon');
-const Link = require('./components/link');
-const Message = require('./components/message');
-const Notification = require('./components/notification');
-const Radio = require('./components/radio');
-const Switch = require('./components/switch');
-
-const Button = require('./components/button');
-const Accordion = require('./components/accordion');
-const Card = require('./components/card');
-const Table = require('./components/table');
-const ZebraTable = require('./components/zebratable');
-
-const Modal = require('./components/modal');
-const CookieConsent = require('./components/cookie-consent');
-const Divider = require('./components/divider');
-
-const SideMenu = require('./components/side-menu');
-const TabMenu = require('./components/tab-menu');
-const Tabs = require('./components/tabs');
-const UserMenu = require('./components/user-menu');
-
-const DropdownFilter = require('./components/dropdown-filter');
-
-const Tag = require('./components/tag');
-const Pagination = require('./components/pagination');
-const Footer = require('./components/footer');
-const Header = require('./components/header');
-
-const SearchBar = require('./components/search-bar');
-
-const ProfilePicture = require('./components/profile-picture');
-const Profile = require('./components/profile');
-
-const components = [
-  Alert,
-  AlertBanner,
-  Badge,
-  Breadcrumb,
-  ButtonGroup,
-  Button,
-  Checkbox,
-  Comments,
-  ContextMenu,
-  Dialog,
-  Dot,
-  Forms,
-  Calendar,
-  Icon,
-  Link,
-  Message,
-  Notification,
-  Radio,
-  Switch,
-
-  Table,
-  ZebraTable,
-  CookieConsent,
-  Modal,
-
-  Accordion,
-  Card,
-  Divider,
-
-  SideMenu,
-  TabMenu,
-  Tabs,
-  UserMenu,
-
-  DropdownFilter,
-
-  SearchBar,
-
-  Tag,
-  Pagination,
-  Footer,
-  Header,
-
-  ProfilePicture,
-  Profile,
-];
-
-const defaultColors = ['primary', 'secondary'];
-
-module.exports = plugin.withOptions(
-  function (options = { colors: [], cssBase: true }) {
-    return function ({ addComponents, addBase, theme }) {
-      const optionColors = [...defaultColors, ...(options.colors || [])];
-
-      if (options.cssBase) {
-        addBase(base);
-      }
-
-      addComponents(components.map((component) => component(optionColors, theme)));
-    };
-  },
-  function () {
-    return preset;
-  }
-);
+module.exports = {
+  default: plugin,
+  plugin: plugin,
+  preset: preset,
+};

package/src/plugin.js

@@ -0,0 +1,120 @@
+const plugin = require('tailwindcss/plugin');
+
+const base = require('./base');
+const theme = require('./theme');
+
+// components
+const Alert = require('./components/alert');
+const AlertBanner = require('./components/alert-banner');
+const Badge = require('./components/badge');
+const Breadcrumb = require('./components/breadcrumb');
+const ButtonGroup = require('./components/button-group');
+const Comments = require('./components/comments');
+const Checkbox = require('./components/checkbox');
+const ContextMenu = require('./components/context-menu');
+const Dialog = require('./components/dialog');
+const Dot = require('./components/dot');
+const Forms = require('./components/forms');
+const Calendar = require('./components/calendar');
+const Icon = require('./components/icon');
+const Link = require('./components/link');
+const Message = require('./components/message');
+const Notification = require('./components/notification');
+const Radio = require('./components/radio');
+const Switch = require('./components/switch');
+
+const Button = require('./components/button');
+const Accordion = require('./components/accordion');
+const Card = require('./components/card');
+const Table = require('./components/table');
+const ZebraTable = require('./components/zebratable');
+
+const Modal = require('./components/modal');
+const CookieConsent = require('./components/cookie-consent');
+const Divider = require('./components/divider');
+
+const SideMenu = require('./components/side-menu');
+const TabMenu = require('./components/tab-menu');
+const Tabs = require('./components/tabs');
+const UserMenu = require('./components/user-menu');
+
+const DropdownFilter = require('./components/dropdown-filter');
+
+const Tag = require('./components/tag');
+const Pagination = require('./components/pagination');
+const Footer = require('./components/footer');
+const Header = require('./components/header');
+
+const SearchBar = require('./components/search-bar');
+
+const ProfilePicture = require('./components/profile-picture');
+const Profile = require('./components/profile');
+
+const components = [
+  Alert,
+  AlertBanner,
+  Badge,
+  Breadcrumb,
+  ButtonGroup,
+  Button,
+  Checkbox,
+  Comments,
+  ContextMenu,
+  Dialog,
+  Dot,
+  Forms,
+  Calendar,
+  Icon,
+  Link,
+  Message,
+  Notification,
+  Radio,
+  Switch,
+
+  Table,
+  ZebraTable,
+  CookieConsent,
+  Modal,
+
+  Accordion,
+  Card,
+  Divider,
+
+  SideMenu,
+  TabMenu,
+  Tabs,
+  UserMenu,
+
+  DropdownFilter,
+
+  SearchBar,
+
+  Tag,
+  Pagination,
+  Footer,
+  Header,
+
+  ProfilePicture,
+  Profile,
+];
+
+const defaultColors = ['primary', 'secondary'];
+
+module.exports = plugin.withOptions(
+  function (options = { colors: [], cssBase: true }) {
+    return function ({ addComponents, addBase, theme }) {
+      const optionColors = [...defaultColors, ...(options.colors || [])];
+
+      if (options.cssBase) {
+        addBase(base);
+      }
+
+      addComponents(components.map((component) => component(optionColors, theme)));
+    };
+  },
+  function () {
+    return {
+      theme: theme,
+    };
+  }
+);