@sk-web-gui/core 0.1.9 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "cc78666be80b991b22524f2abdaddd24bc00d418"
+  "gitHead": "5fe44be8bf968a1a252dfbec38ee2e164339b50b"
 }

package/src/components/pagination.js

@@ -0,0 +1,70 @@
+module.exports = Pagination = () => ({
+  ".pagination": {
+    "@apply select-none": {},
+
+    "&-sm": {
+      "@apply text-xs": {},
+    },
+
+    "&-md": {
+      "@apply text-lg": {},
+    },
+
+    "&-lg": {
+      "@apply text-xl": {},
+    },
+
+    "&-list": {
+      "@apply flex items-baseline": {},
+    },
+
+    "&-pageLabel": {
+      "@apply cursor-pointer m-sm": {},
+      width: "1.5em",
+      height: "1.75em",
+
+      "&[aria-disabled='true']": {
+        "@apply border-primary border-b cursor-default text-primary": {},
+      },
+    },
+
+    "&-prevNextButton": {
+      "@apply ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none":
+        {},
+
+      "&[data-reverse=true]": {
+        "@apply mr-4 ml-0 flex-row-reverse": {},
+
+        ".pagination-prevNextButton-label": {
+          "@apply mr-sm ml-0": {},
+        },
+      },
+
+      "&[disabled]": {
+        "@apply opacity-50 cursor-default": {},
+      },
+
+      "&[disabled='false']": {
+        "&-label, &-icon": {
+          "@apply cursor-pointer": {},
+        },
+      },
+
+      "&-label": {
+        "@apply hidden sm:inline ml-sm leading-none": {},
+      },
+
+      "&-icon": {
+        "@apply m-1 align-text-bottom leading-none flex items-center": {},
+
+        ".material-icons-outlined": {
+          fontSize: ".675em",
+        },
+      },
+    },
+
+    "&-ellipsis": {
+      "@apply inline-block w-16 text-center": {},
+    },
+  },
+});

package/src/components/table.js

@@ -10,4 +10,4 @@ module.exports = Table = () => ({
             }
         }
     },
-});
+});

package/src/components/tag.js

@@ -53,7 +53,7 @@ module.exports = Tag = (colors) => ({
     borderRadius: "3.2rem",
 
     "&-text": {
-      padding: "0.4285em 0"
+      padding: "0.5em 0"
     },
 
     "&-sm": {

package/src/components/zebratable.js

@@ -0,0 +1,59 @@
+module.exports = ZebraTable = () => ({
+    ".zebratable": {
+        "@apply w-full text-left table-auto": {},
+
+
+        "&-thead": {
+
+            "&-tr": {
+                "@apply text-sm hidden lg:table-row": {},
+            },
+
+            "&-th": {
+                "@apply py-sm first-of-type:pl-lg": {},
+
+                "&[data-isColumnSortable='true']": {
+                    "@apply py-sm cursor-pointer": {},
+                },
+            },
+        },
+
+        "&-icon": {
+            "&-sort": {
+                "@apply ml-2 text-black transform rotate-90": {},
+    
+                "&[data-sortmodeascending='false']": {
+                    "@apply -rotate-90": {},
+                },
+            },
+
+            "&-more": {
+                "@apply pl-sm text-gray-300": {},
+            },
+        },
+
+        "&-sortbutton": {
+            "@apply flex items-center": {},
+        },
+
+        ".material-icons-outlined": {
+            fontSize: "1.25em",
+        },
+
+        "&-tbody": {
+            "@apply lg:bg-white": {},
+
+            "&-tr": {
+                "@apply bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg": {},
+            },
+
+            "&-td": {
+                "@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent": {},
+            },
+        },
+
+        "&-paginationwrapper": {
+            "@apply px-lg my-lg w-full text-lg flex justify-center lg:justify-start": {},
+        },
+    },
+});

package/src/index.js

@@ -22,6 +22,7 @@ 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");
@@ -30,6 +31,7 @@ const Divider = require("./components/divider");
 const UserMenu = require("./components/user-menu");
 
 const Tag = require("./components/tag");
+const Pagination = require("./components/pagination");
 
 const components = [
   Alert,
@@ -48,6 +50,7 @@ const components = [
   Switch,
 
   Table,
+  ZebraTable,
   CookieConsent,
   Modal,
 
@@ -58,6 +61,7 @@ const components = [
   UserMenu,
 
   Tag,
+  Pagination,
 ];
 
 const defaultColors = ["primary", "secondary"];
@@ -148,6 +152,7 @@ module.exports = plugin.withOptions(
             base: "var(--vc-cursor)",
           },
           spacing: {
+            xs: "4px",
             sm: "8px",
             md: "16px",
             lg: "24px",