@sk-web-gui/core 0.1.87 → 0.1.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "license": "MIT",
   "main": "src/index.js",
   "module": "dist/esm/index.js",
@@ -29,16 +29,16 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "clean-css": "^5.3.2",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
-    "tailwind-scrollbar": "^3.0.4",
-    "tailwindcss": "^3.2.7"
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "^3.3.3"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "0.1.13",
+    "@sk-web-gui/theme": "0.1.14",
     "mini-svg-data-uri": "^1.4.4"
   },
-  "gitHead": "433ca907ab7124030c8045bc5964a4f8ff5db68d"
+  "gitHead": "c34ffa09211bc344fff14ae3598af36758bbdab8"
 }

package/src/components/comments.js

@@ -1,34 +1,34 @@
-module.exports = Comments = () => ({ 
-
-    '.comment-header': {
-        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
-    },
-
-    '.comment-item':{
-        '@apply w-full': {},
-
-        '&-container': {
-            '@apply flex gap-2': {},
-        },
-        '&-text': {
-            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
-        },
-        '&-commentorpublished': {
-            '@apply float-right text-neutral-600 m-0': {},
-        },
-    },
-    '.comment-input':{
-        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
-
-        '&-inactive': {
-            '@apply text-neutral-300 !text-3xl': {},
-        },
-
-        '&-active': {
-            '@apply text-primary !text-3xl': {},
-        }
-
-    },
-
-   
+module.exports = Comments = () => ({ 
+
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
+    },
+
+    '.comment-item':{
+        '@apply w-full': {},
+
+        '&-container': {
+            '@apply flex gap-2': {},
+        },
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
+        },
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {},
+        },
+    },
+    '.comment-input':{
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
+
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {},
+        },
+
+        '&-active': {
+            '@apply text-primary !text-3xl': {},
+        }
+
+    },
+
+   
 });

package/src/components/forms.js

@@ -156,7 +156,7 @@ function formInputGroup() {
 
     '.form-input-addon': {
       '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},
-      '@apply text-neutral-600 bg-neutral-50': {},
+      '@apply text-gray bg-neutral-50': {},
       // dark colors
       '@apply dark:border-neutral-700': {},
       '@apply dark:text-neutral-100 dark:bg-white/30': {},
@@ -310,13 +310,14 @@ module.exports = Forms = (colors) => ({
   },
 
   '.form-select-list-transition': {
-    '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm': {},
+    '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm':
+      {},
     '&.showabove': {
-      '@apply mb-1 bottom-full': {}
+      '@apply mb-1 bottom-full': {},
     },
     '&:not(.showabove)': {
-      '@apply mt-1 top-full': {}
-    }
+      '@apply mt-1 top-full': {},
+    },
   },
 
   '.form-select': {
@@ -330,11 +331,10 @@ module.exports = Forms = (colors) => ({
       '@apply grow-0': {},
     },
     '&-list': {
-      '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {
-      },
+      '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {},
       '&.showabove': {
-        '@apply border-t border-b-0': {}
-      }
+        '@apply border-t border-b-0': {},
+      },
     },
     '&-has-multiple-choices': {
       '@apply flex w-full h-full justify-between items-center pr-md': {},

package/src/components/pagination.js

@@ -47,7 +47,7 @@ module.exports = Pagination = () => ({
       },
 
       "&[disabled='false']": {
-        '&-label, &-icon': {
+        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {
           '@apply cursor-pointer': {},
         },
       },

package/src/components/side-menu.js

@@ -1,8 +1,8 @@
 module.exports = Menu = () => ({
-  '.side-menu': {
+  '.sk-sidemenu': {
     '@apply w-[440px]': {},
 
-    '.menu-header': {
+    '&-header': {
       '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},
 
       '.label-small': {
@@ -10,18 +10,18 @@ module.exports = Menu = () => ({
       },
 
       '.label-button': {
-        '@apply w-full justify-between p-0': {},
+        '@apply w-full justify-between p-0 leading-[inherit]': {},
 
         '&-icon': {
           '@apply !text-xl': {},
         },
       },
 
-      '.label-header': {
+      '&-label': {
         '@apply flex items-center': {},
 
         'label, .label': {
-          '@apply text-xl font-bold': {},
+          '@apply text-xl font-bold flex items-center w-full': {},
         },
 
         span: {
@@ -30,10 +30,14 @@ module.exports = Menu = () => ({
       },
     },
 
-    '.menu-item': {
+    '&-item': {
       '@apply bg-white h-full': {},
 
-      '.items': {
+      '> ul.items': {
+        '@apply hidden': {},
+      },
+
+      '&.open > ul.items': {
         '@apply block': {},
       },
 
@@ -42,9 +46,9 @@ module.exports = Menu = () => ({
       },
 
       '&.active': {
-        '> .wrapper': {
+        '> .sk-sidemenu-wrapper': {
           boxShadow: 'inset 6px 0 0 0 #005595',
-          '.menu-item-label': {
+          '.sk-sidemenu-item-label': {
             '@apply underline': {},
           },
         },
@@ -54,11 +58,12 @@ module.exports = Menu = () => ({
         '@apply fill-primary': {},
       },
 
-      '& .wrapper': {
+      '& .sk-sidemenu-wrapper': {
         '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
 
-        '.menu-item-link': {
-          '@apply flex-grow relative flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
+        '.sk-sidemenu-item-link': {
+          '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {},
+          '@apply focus-visible:z-base': {},
         },
 
         '.expand': {
@@ -71,21 +76,21 @@ module.exports = Menu = () => ({
       },
 
       '&.open': {
-        '& + .menu-item > .wrapper': {
+        '& + .menu-item > .sk-sidemenu-wrapper': {
           '@apply border-t': {},
         },
       },
 
       '&.draggable': {
         '&.dragenter': {
-          '> .wrapper': {
+          '> .sk-sidemenu-wrapper': {
             '@apply h-full max-h-full': {},
           },
-          "> .wrapper > *:not([draggable='true'])": {
+          "> .sk-sidemenu-wrapper > *:not([draggable='true'])": {
             '@apply pointer-events-none': {},
           },
 
-          '& > .wrapper::after': {
+          '& > .sk-sidemenu-wrapper::after': {
             '@apply bg-info-light block relative w-full h-[44px]': {},
             content: "''",
           },
@@ -95,7 +100,7 @@ module.exports = Menu = () => ({
           '@apply hidden': {},
         },
 
-        '& .menu-item-move-button': {
+        '& .sk-sidemenu-menuitem-movebutton': {
           '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
 
           svg: {
@@ -115,7 +120,7 @@ module.exports = Menu = () => ({
         '&.separator': {
           '@apply bg-transparent relative': {},
 
-          '> div.wrapper, > .menu-item-link': {
+          '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {
             '@apply h-[44px]': {},
           },
         },
@@ -132,23 +137,23 @@ module.exports = Menu = () => ({
       },
 
       '&.lvl-0': {
-        '&:first-child > .wrapper': {
+        '&:first-child > .sk-sidemenu-wrapper': {
           '@apply border-t-0': {},
         },
-        '> .wrapper': {
+        '> .sk-sidemenu-wrapper': {
           '@apply h-[64px] max-h-[64px] border border-svartvik-200': {},
 
-          '> .menu-item-link': {
+          '> .sk-sidemenu-item-link': {
             '@apply  py-md': {},
             paddingLeft: '3.2rem',
           },
         },
 
-        '.menu-item-link': {
+        '.sk-sidemenu-item-link': {
           '@apply h-[64px] max-h-[64px]': {},
         },
 
-        '& + .menu-item > .wrapper': {
+        '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {
           '@apply border-t-0': {},
         },
 
@@ -160,88 +165,94 @@ module.exports = Menu = () => ({
           '@apply border-b border-svartvik-200': {},
         },
 
-        '&.separator > .wrapper': {
-          '@apply border-l-0 border-r-0': {},
+        '&.separator': {
+          '& + .lvl-0': {
+            '@apply border-t border-svartvik-200': {},
+          },
+        },
+
+        '&.separator > .sk-sidemenu-wrapper': {
+          '@apply border-0': {},
         },
       },
 
       '&.lvl-1': {
         '@apply bg-gray-lighter': {},
 
-        '> .wrapper, .menu-item-link': {
+        '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {
           '@apply h-[56px] max-h-[56px]': {},
         },
 
-        '&.open > .wrapper': {
+        '&.open > .sk-sidemenu-wrapper': {
           '@apply border-b border-svartvik-200': {},
         },
 
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '4.8rem',
         },
       },
 
       '&.lvl-2': {
-        '.wrapper': {
+        '.sk-sidemenu-wrapper': {
           '@apply bg-gray-middle h-[48px] max-h-[48px]': {},
 
-          '> .menu-item-link': {
+          '> .sk-sidemenu-item-link': {
             '@apply h-[48px] max-h-[48px]': {},
           },
         },
 
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '6.4rem',
         },
       },
 
       '&.lvl-3': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '8rem',
         },
       },
 
       '&.lvl-4': {
-        '.wrapper': {
+        '.sk-sidemenu-wrapper': {
           '@apply bg-[#d4d4d4]': {},
         },
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '9.6rem',
         },
       },
 
       '&.lvl-5': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '11.2rem',
         },
       },
 
       '&.lvl-6': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '12.8rem',
         },
       },
 
       '&.lvl-7': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '14.4rem',
         },
       },
 
       '&.lvl-8': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '16rem',
         },
       },
 
       '&.lvl-9': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '17.6rem',
         },
       },
 
       '&.lvl-10': {
-        '> .wrapper > .menu-item-link': {
+        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
           paddingLeft: '19.2rem',
         },
       },

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/index.js

@@ -1,8 +1,8 @@
-const preset = require('./preset');
-const plugin = require('./plugin');
-
-module.exports = {
-  default: plugin,
-  plugin: plugin,
-  preset: preset,
-};
+const preset = require('./preset');
+const plugin = require('./plugin');
+
+module.exports = {
+  default: plugin,
+  plugin: plugin,
+  preset: preset,
+};