@sk-web-gui/core 1.1.1 → 2.0.0

package/dist/types/components/dropdown-filter.d.ts

@@ -0,0 +1,58 @@
+declare function _exports(): {
+    '.dropdown-filter': {
+        position: string;
+        height: number;
+        border: string;
+        display: string;
+        background: string;
+        borderRadius: number;
+        '.dropdown-button': {
+            '@apply flex justify-between items-center  grow': {};
+            '.dropdown-button-icon': {
+                '@apply justify-self-end grow-0': {};
+            };
+        };
+        '.filter-container': {
+            position: string;
+            top: string;
+            left: string;
+            zIndex: number;
+            width: string;
+            background: string;
+            border: string;
+            borderRadius: number;
+            '.filter-controls': {
+                display: string;
+                justifyContent: string;
+                button: {
+                    marginLeft: string;
+                    textDecoration: string;
+                };
+            };
+            '.filter-item': {
+                '@apply px-md': {};
+                height: number;
+                display: string;
+                justifyContent: string;
+                alignItems: string;
+                borderBottom: string;
+                '> label': {
+                    '@apply w-full': {};
+                    '> .form-checkbox-label': {
+                        '@apply flex-grow': {};
+                    };
+                };
+                '&.disabled': {
+                    color: string;
+                };
+                '&:first-of-type': {
+                    borderTop: string;
+                };
+                '&:last-child': {
+                    borderBottom: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/modal.d.ts

@@ -12,6 +12,7 @@ export declare const Modal: () => {
             '@apply fixed inset-0': {};
         };
         '&-dialog': {
+            '@apply text-dark-secondary': {};
             '@apply inline-flex flex-col': {};
             '@apply text-left': {};
             '@apply align-middle': {};
@@ -32,6 +33,9 @@ export declare const Modal: () => {
         '&-content': {
             '@apply flex flex-col': {};
             '@apply py-8 pb-16 gap-12': {};
+            'h1, h2, h3, h4, h5, h6': {
+                '@apply text-dark-primary': {};
+            };
         };
         '&-footer': {
             '@apply flex flex-row justify-start': {};

package/dist/types/components/notification.d.ts

@@ -0,0 +1,48 @@
+declare function _exports(): {
+    '.notification': {
+        '@apply relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {};
+        '@apply text-body bg-white border border-neutral-200': {};
+        '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {};
+    };
+    '.notification-icon': {
+        '@apply flex-shrink-0 w-5 h-5 mr-3': {};
+        '&-info': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-success': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-error': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+        '&-warning': {
+            '--tw-text-opacity': string;
+            color: string;
+        };
+    };
+    '.notification-content': {
+        '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {};
+        '&-title': {
+            '@apply font-semibold': {};
+        };
+        '&-description': {
+            '@apply text-neutral-500 dark:text-neutral-400': {};
+        };
+    };
+    '.notification-action': {
+        '@apply absolute space-x-2': {};
+        right: number;
+        top: number;
+        '&-undo': {
+            '@apply h-auto p-0 text-small': {};
+        };
+        '&-close-button': {
+            '@apply cursor-base text-neutral-700 hover:text-body': {};
+            '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/popup-menu.d.ts

@@ -1,5 +1,9 @@
 export declare const PopupMenu: () => {
-    '.sk-popup-menu-items': {
+    '.sk-popup-menu': {
+        '@apply hidden': {};
+        '&[data-open="true"]': {
+            '@apply flex': {};
+        };
         '&[data-position="left"]': {
             '@apply mt-0 mr-8 right-[100%]': {};
             '&[data-align="end"]': {
@@ -35,7 +39,10 @@ export declare const PopupMenu: () => {
                 '@apply left-0': {};
             };
         };
-        '@apply absolute flex flex-col justify-start items-start mt-8': {};
+        '> *': {
+            '@apply max-w-full w-full': {};
+        };
+        '@apply absolute flex-col justify-start items-start mt-8': {};
         '@apply w-max': {};
         '@apply rounded-utility': {};
         '@apply bg-background-100': {};
@@ -45,7 +52,14 @@ export declare const PopupMenu: () => {
         '@apply border-0': {};
         '@apply focus-within:border-0': {};
         '@apply focus:outline-0 focus-visible:outline-0 focus-visible:ring': {};
+        '.sk-form-checkbox-label-left .sk-icon': {
+            '@apply right-8': {};
+        };
+        '.sk-form-checkbox-label-right .sk-icon': {
+            '@apply left-8': {};
+        };
         '.sk-popup-menu-item': {
+            '@apply list-none': {};
             '@apply w-full': {};
             '@apply h-[4rem]': {};
             '@apply min-h-[4rem]': {};
@@ -53,10 +67,15 @@ export declare const PopupMenu: () => {
             '@apply dark:hover:bg-primitives-overlay-lighten-1': {};
             '@apply cursor-pointer': {};
             '@apply flex flex-row shrink-0': {};
-            '@apply pl-8 pr-32 py-4 gap-12': {};
+            '@apply pl-8 pr-8 py-4 gap-12': {};
+            '@apply ring-offset-0': {};
+            '@apply focus-visible:ring ring-ring': {};
             '@apply rounded-utility': {};
             '@apply text-body font-normal': {};
-            '&.active, &:active': {
+            '> *': {
+                '@apply max-w-full': {};
+            };
+            '&:focus-visible, &:focus-within': {
                 '@apply bg-primitives-gray-200': {};
                 '@apply dark:bg-primitives-overlay-lighten-1': {};
             };
@@ -69,15 +88,29 @@ export declare const PopupMenu: () => {
             '@apply no-underline': {};
         };
         '&-group': {
-            '@apply w-full flex flex-col border-b-1 border-divider pb-4 gap-4': {};
+            '@apply w-full flex flex-col border-b-1 border-divider pb-4 pt-4 gap-4': {};
             '&:first-child': {
                 '@apply pt-0': {};
             };
             '&:last-child': {
                 '@apply border-0 pb-0': {};
             };
-            '> *': {
-                '@apply pl-8 pr-32 py-4 gap-12': {};
+        };
+        '&-items': {
+            '@apply w-full': {};
+            '@apply rounded-utility': {};
+            '@apply focus-within:ring ring-ring': {};
+            '.sk-popup-menu-item': {
+                '@apply focus-visible:ring-0 ring-transparent ring-offset-0': {};
+                '> *': {
+                    '@apply focus-visible:ring-0 ring-transparent ring-offset-0': {};
+                };
+            };
+            '&:focus-within': {
+                '.sk-popup-menu-item.active': {
+                    '@apply bg-primitives-gray-200': {};
+                    '@apply dark:bg-primitives-overlay-lighten-1': {};
+                };
             };
         };
         '&-sm': {
@@ -85,12 +118,12 @@ export declare const PopupMenu: () => {
             '.sk-popup-menu-item': {
                 '@apply h-[3.2rem]': {};
                 '@apply min-h-[3.2rem]': {};
-                '@apply gap-10 pl-8 pr-24 py-4': {};
+                '@apply gap-10 pl-8 pr-8 py-4': {};
                 '@apply text-small': {};
                 '&-group': {
                     '@apply gap-6 pb-6': {};
                     '> *': {
-                        '@apply gap-10 pl-8 pr-24 py-4': {};
+                        '@apply gap-10 pl-8 pr-8 py-4': {};
                     };
                 };
                 svg: {

package/dist/types/components/side-menu.d.ts

@@ -0,0 +1,219 @@
+declare function _exports(): {
+    '.sk-sidemenu': {
+        '@apply w-[440px]': {};
+        '&-header': {
+            '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {};
+            '.label-small': {
+                '@apply text-[1.6rem]': {};
+            };
+            '.label-button': {
+                '@apply w-full justify-between p-0 leading-[inherit]': {};
+                '&-icon': {
+                    '@apply !text-xl': {};
+                };
+            };
+            '&-label': {
+                '@apply flex items-center': {};
+                'label, .label': {
+                    '@apply text-xl font-bold flex items-center w-full': {};
+                };
+                span: {
+                    '@apply ml-auto': {};
+                };
+            };
+        };
+        '&-item': {
+            '@apply bg-white h-full': {};
+            '> ul.items': {
+                '@apply hidden': {};
+            };
+            '&.open > ul.items': {
+                '@apply block': {};
+            };
+            '&-label': {
+                '@apply flex-grow select-none flex items-center': {};
+            };
+            '&.active': {
+                '> .sk-sidemenu-wrapper': {
+                    boxShadow: string;
+                    '.sk-sidemenu-item-label': {
+                        '@apply underline': {};
+                    };
+                };
+            };
+            '& .sk-sidemenu-wrapper': {
+                '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {};
+                '.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': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply text-neutral-600 cursor-not-allowed': {};
+                        '.sk-sidemenu-item-label': {
+                            '@apply text-neutral-600': {};
+                        };
+                    };
+                };
+                '.expand': {
+                    '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {};
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                        path: {
+                            '@apply fill-gray-stroke': {};
+                        };
+                    };
+                    path: {
+                        '@apply fill-primary': {};
+                    };
+                    '&-button': {
+                        '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {};
+                    };
+                };
+            };
+            '&.open': {
+                '& + .menu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t': {};
+                };
+            };
+            '&.draggable': {
+                '&.dragenter': {
+                    '> .sk-sidemenu-wrapper': {
+                        '@apply h-full max-h-full': {};
+                    };
+                    "> .sk-sidemenu-wrapper > *:not([draggable='true'])": {
+                        '@apply pointer-events-none': {};
+                    };
+                    '& > .sk-sidemenu-wrapper::after': {
+                        '@apply bg-info-surface-accent block relative w-full h-[44px]': {};
+                        content: string;
+                    };
+                };
+                '&.moving': {
+                    '@apply hidden': {};
+                };
+                '& .sk-sidemenu-menuitem-movebutton': {
+                    '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {};
+                    svg: {
+                        '@apply h-full': {};
+                    };
+                    '&[aria-disabled="true"]': {
+                        '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {};
+                    };
+                };
+                '&.separator': {
+                    '@apply bg-transparent relative': {};
+                    '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {
+                        '@apply h-[44px]': {};
+                    };
+                };
+            };
+            '&-separator': {
+                '@apply text-divider': {};
+                height: string;
+                width: string;
+                backgroundImage: string;
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundRepeat: string;
+            };
+            '&.lvl-0': {
+                '&:first-child > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .sk-sidemenu-wrapper': {
+                    '@apply h-[64px] max-h-[64px] border border-divider': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply  py-md': {};
+                        paddingLeft: string;
+                    };
+                };
+                '.sk-sidemenu-item-link': {
+                    '@apply h-[64px] max-h-[64px]': {};
+                };
+                '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {
+                    '@apply border-t-0': {};
+                };
+                '> .items': {
+                    '@apply border-l border-r border-divider': {};
+                };
+                '&.open > .items': {
+                    '@apply border-b border-divider': {};
+                };
+                '&.separator': {
+                    '& + .lvl-0': {
+                        '@apply border-t border-divider': {};
+                    };
+                };
+                '&.separator > .sk-sidemenu-wrapper': {
+                    '@apply border-0': {};
+                };
+            };
+            '&.lvl-1': {
+                '@apply bg-gray-lighter': {};
+                '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {
+                    '@apply h-[56px] max-h-[56px]': {};
+                };
+                '&.open > .sk-sidemenu-wrapper': {
+                    '@apply border-b border-divider': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-2': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-gray-middle h-[48px] max-h-[48px]': {};
+                    '> .sk-sidemenu-item-link': {
+                        '@apply h-[48px] max-h-[48px]': {};
+                    };
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-3': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-4': {
+                '.sk-sidemenu-wrapper': {
+                    '@apply bg-[#d4d4d4]': {};
+                };
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-5': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-6': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-7': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-8': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-9': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+            '&.lvl-10': {
+                '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
+                    paddingLeft: string;
+                };
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/tab-menu.d.ts

@@ -0,0 +1,57 @@
+declare function _exports(): {
+    '.sk-tab-menu': {
+        '&-wrapper': {
+            display: string;
+            flexDirection: string;
+            margin: string;
+        };
+        '&-right': {
+            '@apply justify-end': {};
+        };
+        '&-center': {
+            '@apply justify-center': {};
+        };
+        '&-list': {
+            all: string;
+            display: string;
+            '&-stretch': {
+                '@apply w-full justify-between': {};
+            };
+        };
+        '&-underline': {
+            width: string;
+            height: number;
+            '@apply bg-gray-light': {};
+        };
+        '&-item': {
+            all: string;
+            height: number;
+            display: string;
+            padding: string;
+            marginRight: string;
+            alignItems: string;
+            position: string;
+            cursor: string;
+            '&-stretch': {
+                '@apply mr-0': {};
+            };
+            '&-right': {
+                '@apply mr-0 ml-[5rem]': {};
+            };
+            '&-center:last-of-type': {
+                '@apply mr-0': {};
+            };
+            '&.active::after': {
+                content: string;
+                display: string;
+                position: string;
+                width: string;
+                height: number;
+                top: string;
+                left: number;
+                '@apply bg-primary': {};
+            };
+        };
+    };
+};
+export = _exports;

package/dist/types/components/table-autotable.d.ts

@@ -0,0 +1,151 @@
+export declare const TableAutoTable: () => {
+    '.sk-table-wrapper': {
+        '@apply rounded-groups': {};
+        '@apply border-1': {};
+        '@apply bg-background-content': {};
+        '&-inside': {
+            '@apply border-0 rounded-t-groups': {};
+            '@apply overflow-hidden': {};
+        };
+        '&[data-variant="table"]': {
+            '&:not([data-background="true"])': {
+                '@apply border-0': {};
+                '@apply bg-transparent': {};
+            };
+            '.sk-table-wrapper-inside': {
+                '@apply border-0 rounded-b-groups': {};
+            };
+        };
+    };
+    '.sk-table': {
+        '@apply w-full text-left table-auto': {};
+        '@apply text-dark-secondary': {};
+        '&-thead': {
+            '@apply border-b-1 border-dark-primary': {};
+            '@apply h-48': {};
+            '&-tr': {
+                '@apply table-row': {};
+                '@apply text-label-small': {};
+            };
+            '&-th': {
+                '@apply py-4': {};
+                "&[data-isColumnSortable='true']": {
+                    '@apply cursor-pointer': {};
+                };
+            };
+            '&-manualth': {
+                '@apply py-4': {};
+                '@apply px-16': {};
+                "&[data-isColumnSortable='true']": {
+                    '@apply cursor-pointer': {};
+                };
+            };
+            '@apply bg-transparent': {};
+            '&[data-background="true"]': {
+                '@apply bg-vattjom-background-200 border-b-transparent': {};
+            };
+        };
+        '&-sortbutton': {
+            '@apply flex items-center': {};
+            '@apply focus-visible:ring ring-ring ring-offset-0': {};
+            '@apply focus-visible:bg-vattjom-background-200': {};
+            '@apply rounded-utility': {};
+            '@apply px-16': {};
+            '@apply h-40': {};
+            '&-icon': {
+                '@apply inline-flex pl-sm': {};
+                '&-sort': {
+                    '@apply text-dark-secondary': {};
+                    '@apply flex flex-col': {};
+                    svg: {
+                        '@apply h-16 w-16': {};
+                        '@apply first-of-type:-mb-4': {};
+                        '@apply last-of-type:-mt-4': {};
+                    };
+                    "&[data-sortmodeascending='true']": {
+                        '> *': {
+                            '@apply last-of-type:text-dark-ghost': {};
+                        };
+                    };
+                    "&[data-sortmodeascending='false']": {
+                        '> *': {
+                            '@apply first-of-type:text-dark-ghost': {};
+                        };
+                    };
+                };
+            };
+        };
+        '&-tbody': {
+            '@apply text-dark-secondary bg-transparent': {};
+            '&-tr': {
+                '@apply bg-transparent': {};
+                '@apply hover:bg-background-100': {};
+                '@apply border-b-1': {};
+                '@apply last-of-type:border-b-transparent': {};
+            };
+            '&-td': {
+                '@apply text-small': {};
+                '&-content': {
+                    '@apply inline-flex': {};
+                    '@apply justify-start items-center': {};
+                    '@apply gap-8': {};
+                    '@apply py-8 px-18': {};
+                    '@apply h-[6.3rem]': {};
+                    '@apply min-h-[6.3rem]': {};
+                };
+            };
+            '&-manualtd': {
+                '@apply text-small': {};
+                '&-content': {
+                    '@apply justify-start items-center': {};
+                    '@apply gap-8': {};
+                    '@apply py-8 px-18': {};
+                    '@apply h-[6.3rem]': {};
+                    '@apply min-h-[6.3rem]': {};
+                };
+            };
+        };
+        '&[data-dense="true"]': {
+            '.sk-table': {
+                '&-thead': {
+                    '&-th': {
+                        '@apply py-4': {};
+                    };
+                };
+                '&-tbody': {
+                    '&-td-content': {
+                        '@apply py-0': {};
+                        '@apply h-[4.7rem]': {};
+                        '@apply min-h-[4.7rem]': {};
+                    };
+                };
+            };
+        };
+        '&-paginationwrapper': {
+            '@apply w-full max-w-[60rem]': {};
+            '@apply shrink': {};
+        };
+        '&-bottom': {
+            '@apply py-14 px-16': {};
+            '@apply border-t-1': {};
+            '@apply flex flex-row': {};
+            '@apply gap-32': {};
+            '@apply justify-between items-center': {};
+            '&-section': {
+                '@apply shrink-0': {};
+                '@apply flex flex-row': {};
+                '@apply justify-start items-center': {};
+                '@apply gap-8': {};
+                '&-label': {
+                    '@apply font-normal': {};
+                    '@apply text-small': {};
+                    '@apply shrink-0': {};
+                };
+            };
+            '&-pagination': {
+                '@apply grow': {};
+                '@apply shrink': {};
+            };
+        };
+    };
+};

package/dist/types/components/user-menu.d.ts

@@ -4,6 +4,7 @@ export declare const UserMenu: () => {
         '&-button': {
             '@apply p-0 bg-transparent hover:bg-transparent': {};
             '@apply border-0': {};
+            '@apply hover:border-0': {};
             '.sk-avatar': {
                 height: string;
                 width: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -46,5 +46,5 @@
     "@sk-web-gui/theme": "1.0.2",
     "mini-svg-data-uri": "^1.4.4"
   },
-  "gitHead": "b302b4cf7ca43d683038edfc320ca03af2d0beca"
+  "gitHead": "44396836dc9e415a94ac001c48e65647bc3000f9"
 }