@sk-web-gui/core 0.1.76 → 0.1.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/cjs/components/tab-menu.js +32 -15
  2. package/dist/cjs/components/tab-menu.js.map +1 -1
  3. package/dist/cjs/components/tabs.js +68 -0
  4. package/dist/cjs/components/tabs.js.map +1 -0
  5. package/dist/cjs/index.js +2 -1
  6. package/dist/cjs/index.js.map +1 -1
  7. package/dist/esm/components/tab-menu.js +32 -15
  8. package/dist/esm/components/tab-menu.js.map +1 -1
  9. package/dist/esm/components/tabs.js +64 -0
  10. package/dist/esm/components/tabs.js.map +1 -0
  11. package/dist/esm/index.js +2 -1
  12. package/dist/esm/index.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/tab-menu.js +58 -43
  15. package/src/components/tabs.js +64 -0
  16. package/src/index.js +120 -118
package/dist/cjs/components/tab-menu.js CHANGED
@@ -2,18 +2,31 @@
2
2
 
3
3
  module.exports = TabMenu = function TabMenu() {
4
4
  return {
5
- '.TabMenu': {
6
- '.tab-wrapper': {
5
+ '.sk-tab-menu': {
6
+ '&-wrapper': {
7
7
  display: 'flex',
8
8
  flexDirection: 'row',
9
- margin: 'auto',
10
- maxWidth: '140rem',
11
- ul: {
12
- all: 'unset',
13
- display: 'flex'
9
+ margin: 'auto'
10
+ },
11
+ '&-right': {
12
+ '@apply justify-end': {}
13
+ },
14
+ '&-center': {
15
+ '@apply justify-center': {}
16
+ },
17
+ '&-list': {
18
+ all: 'unset',
19
+ display: 'flex',
20
+ '&-stretch': {
21
+ '@apply w-full justify-between': {}
14
22
  }
15
23
  },
16
- '.TabItem': {
24
+ '&-underline': {
25
+ width: '100%',
26
+ height: 6,
27
+ '@apply bg-gray-light': {}
28
+ },
29
+ '&-item': {
17
30
  all: 'unset',
18
31
  height: 65,
19
32
  display: 'flex',
@@ -22,21 +35,25 @@ module.exports = TabMenu = function TabMenu() {
22
35
  alignItems: 'center',
23
36
  position: 'relative',
24
37
  cursor: 'pointer',
38
+ '&-stretch': {
39
+ '@apply mr-0': {}
40
+ },
41
+ '&-right': {
42
+ '@apply mr-0 ml-[5rem]': {}
43
+ },
44
+ '&-center:last-of-type': {
45
+ '@apply mr-0': {}
46
+ },
25
47
  '&.active::after': {
26
48
  content: '""',
27
49
  display: 'block',
28
50
  position: 'absolute',
29
51
  width: '100%',
30
52
  height: 6,
31
- background: '#005595',
32
53
  top: '100%',
33
- left: 0
54
+ left: 0,
55
+ '@apply bg-primary': {}
34
56
  }
35
- },
36
- '.underline': {
37
- width: '100%',
38
- height: 6,
39
- background: '#F4F4F4'
40
57
  }
41
58
  }
42
59
  };
package/dist/cjs/components/tab-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-menu.js","names":["module","exports","TabMenu","display","flexDirection","margin","maxWidth","ul","all","height","padding","marginRight","alignItems","position","cursor","content","width","background","top","left"],"sources":["../../../src/components/tab-menu.js"],"sourcesContent":["module.exports = TabMenu = () => ({\r\n '.TabMenu': {\r\n '.tab-wrapper': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: 'auto',\r\n maxWidth: '140rem',\r\n\r\n ul: {\r\n all: 'unset',\r\n display: 'flex',\r\n },\r\n },\r\n\r\n '.TabItem': {\r\n all: 'unset',\r\n height: 65,\r\n display: 'flex',\r\n padding: '0 1rem',\r\n marginRight: '5rem',\r\n alignItems: 'center',\r\n position: 'relative',\r\n cursor: 'pointer',\r\n\r\n '&.active::after': {\r\n content: '\"\"',\r\n display: 'block',\r\n position: 'absolute',\r\n width: '100%',\r\n height: 6,\r\n background: '#005595',\r\n top: '100%',\r\n left: 0,\r\n },\r\n },\r\n\r\n '.underline': {\r\n width: '100%',\r\n height: 6,\r\n background: '#F4F4F4',\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,OAAO,GAAG,SAAAA,QAAA;EAAA,OAAO;IAChC,UAAU,EAAE;MACV,cAAc,EAAE;QACdC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,KAAK;QACpBC,MAAM,EAAE,MAAM;QACdC,QAAQ,EAAE,QAAQ;QAElBC,EAAE,EAAE;UACFC,GAAG,EAAE,OAAO;UACZL,OAAO,EAAE;QACX;MACF,CAAC;MAED,UAAU,EAAE;QACVK,GAAG,EAAE,OAAO;QACZC,MAAM,EAAE,EAAE;QACVN,OAAO,EAAE,MAAM;QACfO,OAAO,EAAE,QAAQ;QACjBC,WAAW,EAAE,MAAM;QACnBC,UAAU,EAAE,QAAQ;QACpBC,QAAQ,EAAE,UAAU;QACpBC,MAAM,EAAE,SAAS;QAEjB,iBAAiB,EAAE;UACjBC,OAAO,EAAE,IAAI;UACbZ,OAAO,EAAE,OAAO;UAChBU,QAAQ,EAAE,UAAU;UACpBG,KAAK,EAAE,MAAM;UACbP,MAAM,EAAE,CAAC;UACTQ,UAAU,EAAE,SAAS;UACrBC,GAAG,EAAE,MAAM;UACXC,IAAI,EAAE;QACR;MACF,CAAC;MAED,YAAY,EAAE;QACZH,KAAK,EAAE,MAAM;QACbP,MAAM,EAAE,CAAC;QACTQ,UAAU,EAAE;MACd;IACF;EACF,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"tab-menu.js","names":["module","exports","TabMenu","display","flexDirection","margin","all","width","height","padding","marginRight","alignItems","position","cursor","content","top","left"],"sources":["../../../src/components/tab-menu.js"],"sourcesContent":["module.exports = TabMenu = () => ({\n '.sk-tab-menu': {\n '&-wrapper': {\n display: 'flex',\n flexDirection: 'row',\n margin: 'auto',\n },\n '&-right': {\n '@apply justify-end': {},\n },\n '&-center': {\n '@apply justify-center': {},\n },\n '&-list': {\n all: 'unset',\n display: 'flex',\n '&-stretch': {\n '@apply w-full justify-between': {},\n },\n },\n\n '&-underline': {\n width: '100%',\n height: 6,\n '@apply bg-gray-light': {},\n },\n '&-item': {\n all: 'unset',\n height: 65,\n display: 'flex',\n padding: '0 1rem',\n marginRight: '5rem',\n alignItems: 'center',\n position: 'relative',\n cursor: 'pointer',\n '&-stretch': {\n '@apply mr-0': {},\n },\n '&-right': {\n '@apply mr-0 ml-[5rem]': {},\n },\n '&-center:last-of-type': {\n '@apply mr-0': {},\n },\n\n '&.active::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n width: '100%',\n height: 6,\n top: '100%',\n left: 0,\n '@apply bg-primary': {},\n },\n },\n },\n});\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,OAAO,GAAG,SAAAA,QAAA;EAAA,OAAO;IAChC,cAAc,EAAE;MACd,WAAW,EAAE;QACXC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,KAAK;QACpBC,MAAM,EAAE;MACV,CAAC;MACD,SAAS,EAAE;QACT,oBAAoB,EAAE,CAAC;MACzB,CAAC;MACD,UAAU,EAAE;QACV,uBAAuB,EAAE,CAAC;MAC5B,CAAC;MACD,QAAQ,EAAE;QACRC,GAAG,EAAE,OAAO;QACZH,OAAO,EAAE,MAAM;QACf,WAAW,EAAE;UACX,+BAA+B,EAAE,CAAC;QACpC;MACF,CAAC;MAED,aAAa,EAAE;QACbI,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,CAAC;QACT,sBAAsB,EAAE,CAAC;MAC3B,CAAC;MACD,QAAQ,EAAE;QACRF,GAAG,EAAE,OAAO;QACZE,MAAM,EAAE,EAAE;QACVL,OAAO,EAAE,MAAM;QACfM,OAAO,EAAE,QAAQ;QACjBC,WAAW,EAAE,MAAM;QACnBC,UAAU,EAAE,QAAQ;QACpBC,QAAQ,EAAE,UAAU;QACpBC,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE;UACX,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,SAAS,EAAE;UACT,uBAAuB,EAAE,CAAC;QAC5B,CAAC;QACD,uBAAuB,EAAE;UACvB,aAAa,EAAE,CAAC;QAClB,CAAC;QAED,iBAAiB,EAAE;UACjBC,OAAO,EAAE,IAAI;UACbX,OAAO,EAAE,OAAO;UAChBS,QAAQ,EAAE,UAAU;UACpBL,KAAK,EAAE,MAAM;UACbC,MAAM,EAAE,CAAC;UACTO,GAAG,EAAE,MAAM;UACXC,IAAI,EAAE,CAAC;UACP,mBAAmB,EAAE,CAAC;QACxB;MACF;IACF;EACF,CAAC;AAAA,CAAC"}
package/dist/cjs/components/tabs.js ADDED
@@ -0,0 +1,68 @@
1
+ "use strict";
2
+
3
+ module.exports = Tabs = function Tabs() {
4
+ return {
5
+ '.sk-tabs': {
6
+ '&-stretch': {
7
+ '@apply w-full': {}
8
+ },
9
+ '&-list': {
10
+ '@apply block relative w-full h-[3rem]': {},
11
+ '&-stretch': {
12
+ '@apply flex justify-between': {}
13
+ },
14
+ '&-right': {
15
+ '@apply text-right': {}
16
+ },
17
+ '&-center': {
18
+ '@apply text-center': {}
19
+ },
20
+ '&-line::after': {
21
+ content: '""',
22
+ '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {}
23
+ }
24
+ },
25
+ '&-tab': {
26
+ '@apply relative mr-[3.2rem] text-base font-bold p-0 relative h-[2.8rem] inline-block': {},
27
+ '@apply text-gray': {},
28
+ '@apply cursor-pointer': {},
29
+ '&.disabled': {
30
+ '@apply cursor-not-allowed': {},
31
+ '@apply text-gray-stroke': {}
32
+ },
33
+ '&.active': {
34
+ '@apply text-body': {},
35
+ '&::after': {
36
+ content: '""',
37
+ '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {}
38
+ }
39
+ },
40
+ '&-stretch': {
41
+ '@apply mr-0': {}
42
+ },
43
+ '&-header': {
44
+ '@apply text-lg font-normal': {}
45
+ },
46
+ '&-right': {
47
+ '@apply mr-0 ml-lg': {}
48
+ },
49
+ '&:last-of-type': {
50
+ '@apply mr-0': {}
51
+ },
52
+ '&-icon': {
53
+ '&-with-label': {
54
+ '@apply mr-sm': {}
55
+ }
56
+ }
57
+ },
58
+ '&-panel': {
59
+ '@apply mt-lg': {},
60
+ '&:not(.active)': {
61
+ display: 'none',
62
+ hidden: true
63
+ }
64
+ }
65
+ }
66
+ };
67
+ };
68
+ //# sourceMappingURL=tabs.js.map
package/dist/cjs/components/tabs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.js","names":["module","exports","Tabs","content","display","hidden"],"sources":["../../../src/components/tabs.js"],"sourcesContent":["module.exports = Tabs = () => ({\n '.sk-tabs': {\n '&-stretch': {\n '@apply w-full': {},\n },\n '&-list': {\n '@apply block relative w-full h-[3rem]': {},\n '&-stretch': {\n '@apply flex justify-between': {},\n },\n '&-right': {\n '@apply text-right': {},\n },\n '&-center': {\n '@apply text-center': {},\n },\n\n '&-line::after': {\n content: '\"\"',\n '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},\n },\n },\n '&-tab': {\n '@apply relative mr-[3.2rem] text-base font-bold p-0 relative h-[2.8rem] inline-block': {},\n '@apply text-gray': {},\n '@apply cursor-pointer': {},\n '&.disabled': {\n '@apply cursor-not-allowed': {},\n '@apply text-gray-stroke': {},\n },\n '&.active': {\n '@apply text-body': {},\n '&::after': {\n content: '\"\"',\n '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},\n },\n },\n '&-stretch': {\n '@apply mr-0': {},\n },\n '&-header': {\n '@apply text-lg font-normal': {},\n },\n '&-right': {\n '@apply mr-0 ml-lg': {},\n },\n '&:last-of-type': {\n '@apply mr-0': {},\n },\n '&-icon': {\n '&-with-label': {\n '@apply mr-sm': {},\n },\n },\n },\n '&-panel': {\n '@apply mt-lg': {},\n '&:not(.active)': {\n display: 'none',\n hidden: true,\n },\n },\n },\n});\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAG,SAAAA,KAAA;EAAA,OAAO;IAC7B,UAAU,EAAE;MACV,WAAW,EAAE;QACX,eAAe,EAAE,CAAC;MACpB,CAAC;MACD,QAAQ,EAAE;QACR,wCAAwC,EAAE,CAAC,CAAC;QAC5C,WAAW,EAAE;UACX,6BAA6B,EAAE,CAAC;QAClC,CAAC;QACD,SAAS,EAAE;UACT,mBAAmB,EAAE,CAAC;QACxB,CAAC;QACD,UAAU,EAAE;UACV,oBAAoB,EAAE,CAAC;QACzB,CAAC;QAED,eAAe,EAAE;UACfC,OAAO,EAAE,IAAI;UACb,uEAAuE,EAAE,CAAC;QAC5E;MACF,CAAC;MACD,OAAO,EAAE;QACP,uFAAuF,EAAE,CAAC,CAAC;QAC3F,kBAAkB,EAAE,CAAC,CAAC;QACtB,uBAAuB,EAAE,CAAC,CAAC;QAC3B,YAAY,EAAE;UACZ,2BAA2B,EAAE,CAAC,CAAC;UAC/B,yBAAyB,EAAE,CAAC;QAC9B,CAAC;QACD,UAAU,EAAE;UACV,kBAAkB,EAAE,CAAC,CAAC;UACtB,UAAU,EAAE;YACVA,OAAO,EAAE,IAAI;YACb,2EAA2E,EAAE,CAAC;UAChF;QACF,CAAC;QACD,WAAW,EAAE;UACX,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,UAAU,EAAE;UACV,4BAA4B,EAAE,CAAC;QACjC,CAAC;QACD,SAAS,EAAE;UACT,mBAAmB,EAAE,CAAC;QACxB,CAAC;QACD,gBAAgB,EAAE;UAChB,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,QAAQ,EAAE;UACR,cAAc,EAAE;YACd,cAAc,EAAE,CAAC;UACnB;QACF;MACF,CAAC;MACD,SAAS,EAAE;QACT,cAAc,EAAE,CAAC,CAAC;QAClB,gBAAgB,EAAE;UAChBC,OAAO,EAAE,MAAM;UACfC,MAAM,EAAE;QACV;MACF;IACF;EACF,CAAC;AAAA,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -35,6 +35,7 @@ var CookieConsent = require('./components/cookie-consent');
35
35
  var Divider = require('./components/divider');
36
36
  var SideMenu = require('./components/side-menu');
37
37
  var TabMenu = require('./components/tab-menu');
38
+ var Tabs = require('./components/tabs');
38
39
  var UserMenu = require('./components/user-menu');
39
40
  var DropdownFilter = require('./components/dropdown-filter');
40
41
  var Tag = require('./components/tag');
@@ -44,7 +45,7 @@ var Header = require('./components/header');
44
45
  var SearchBar = require('./components/search-bar');
45
46
  var ProfilePicture = require('./components/profile-picture');
46
47
  var Profile = require('./components/profile');
47
- var components = [Alert, AlertBanner, Badge, Breadcrumb, ButtonGroup, Button, Checkbox, ContextMenu, Dialog, Dot, Forms, Calendar, Icon, Link, Message, Notification, Radio, Switch, Table, ZebraTable, CookieConsent, Modal, Accordion, Card, Divider, SideMenu, TabMenu, UserMenu, DropdownFilter, SearchBar, Tag, Pagination, Footer, Header, ProfilePicture, Profile];
48
+ var components = [Alert, AlertBanner, Badge, Breadcrumb, ButtonGroup, Button, Checkbox, 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];
48
49
  var defaultColors = ['primary', 'secondary'];
49
50
  module.exports = plugin.withOptions(function (options) {
50
51
  if (options === void 0) {
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["plugin","require","base","preset","Alert","AlertBanner","Badge","Breadcrumb","ButtonGroup","Checkbox","ContextMenu","Dialog","Dot","Forms","Calendar","Icon","Link","Message","Notification","Radio","Switch","Button","Accordion","Card","Table","ZebraTable","Modal","CookieConsent","Divider","SideMenu","TabMenu","UserMenu","DropdownFilter","Tag","Pagination","Footer","Header","SearchBar","ProfilePicture","Profile","components","defaultColors","module","exports","withOptions","options","colors","cssBase","_ref","addComponents","addBase","theme","optionColors","concat","map","component"],"sources":["../../src/index.js"],"sourcesContent":["const plugin = require('tailwindcss/plugin');\r\n\r\nconst base = require('./base');\r\nconst preset = require('./preset');\r\n\r\n// const colors = require(\"/colors\");\r\n// const { colors } = require('@sk-web-gui/theme');\r\n// const withOpacity = require('./with-opacity');\r\n// components\r\nconst Alert = require('./components/alert');\r\nconst AlertBanner = require('./components/alert-banner');\r\nconst Badge = require('./components/badge');\r\nconst Breadcrumb = require('./components/breadcrumb');\r\nconst ButtonGroup = require('./components/button-group');\r\n\r\nconst Checkbox = require('./components/checkbox');\r\nconst ContextMenu = require('./components/context-menu');\r\nconst Dialog = require('./components/dialog');\r\nconst Dot = require('./components/dot');\r\nconst Forms = require('./components/forms');\r\nconst Calendar = require('./components/calendar');\r\nconst Icon = require('./components/icon');\r\nconst Link = require('./components/link');\r\nconst Message = require('./components/message');\r\nconst Notification = require('./components/notification');\r\nconst Radio = require('./components/radio');\r\nconst Switch = require('./components/switch');\r\n\r\nconst Button = require('./components/button');\r\nconst Accordion = require('./components/accordion');\r\nconst Card = require('./components/card');\r\nconst Table = require('./components/table');\r\nconst ZebraTable = require('./components/zebratable');\r\n\r\nconst Modal = require('./components/modal');\r\nconst CookieConsent = require('./components/cookie-consent');\r\nconst Divider = require('./components/divider');\r\n\r\nconst SideMenu = require('./components/side-menu');\r\nconst TabMenu = require('./components/tab-menu');\r\nconst UserMenu = require('./components/user-menu');\r\n\r\nconst DropdownFilter = require('./components/dropdown-filter');\r\n\r\nconst Tag = require('./components/tag');\r\nconst Pagination = require('./components/pagination');\r\nconst Footer = require('./components/footer');\r\nconst Header = require('./components/header');\r\n\r\nconst SearchBar = require('./components/search-bar');\r\n\r\nconst ProfilePicture = require('./components/profile-picture');\r\nconst Profile = require('./components/profile');\r\n\r\nconst components = [\r\n Alert,\r\n AlertBanner,\r\n Badge,\r\n Breadcrumb,\r\n ButtonGroup,\r\n Button,\r\n Checkbox,\r\n ContextMenu,\r\n Dialog,\r\n Dot,\r\n Forms,\r\n Calendar,\r\n Icon,\r\n Link,\r\n Message,\r\n Notification,\r\n Radio,\r\n Switch,\r\n\r\n Table,\r\n ZebraTable,\r\n CookieConsent,\r\n Modal,\r\n\r\n Accordion,\r\n Card,\r\n Divider,\r\n\r\n SideMenu,\r\n TabMenu,\r\n UserMenu,\r\n\r\n DropdownFilter,\r\n\r\n SearchBar,\r\n\r\n Tag,\r\n Pagination,\r\n Footer,\r\n Header,\r\n\r\n ProfilePicture,\r\n Profile,\r\n];\r\n\r\nconst defaultColors = ['primary', 'secondary'];\r\n\r\nmodule.exports = plugin.withOptions(\r\n function (options = { colors: [], cssBase: true }) {\r\n return function ({ addComponents, addBase, theme }) {\r\n const optionColors = [...defaultColors, ...(options.colors || [])];\r\n\r\n if (options.cssBase) {\r\n addBase(base);\r\n }\r\n\r\n addComponents(components.map((component) => component(optionColors, theme)));\r\n };\r\n },\r\n function () {\r\n return preset;\r\n }\r\n);\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["plugin","require","base","preset","Alert","AlertBanner","Badge","Breadcrumb","ButtonGroup","Checkbox","ContextMenu","Dialog","Dot","Forms","Calendar","Icon","Link","Message","Notification","Radio","Switch","Button","Accordion","Card","Table","ZebraTable","Modal","CookieConsent","Divider","SideMenu","TabMenu","Tabs","UserMenu","DropdownFilter","Tag","Pagination","Footer","Header","SearchBar","ProfilePicture","Profile","components","defaultColors","module","exports","withOptions","options","colors","cssBase","_ref","addComponents","addBase","theme","optionColors","concat","map","component"],"sources":["../../src/index.js"],"sourcesContent":["const plugin = require('tailwindcss/plugin');\n\nconst base = require('./base');\nconst preset = require('./preset');\n\n// const colors = require(\"/colors\");\n// const { colors } = require('@sk-web-gui/theme');\n// const withOpacity = require('./with-opacity');\n// components\nconst Alert = require('./components/alert');\nconst AlertBanner = require('./components/alert-banner');\nconst Badge = require('./components/badge');\nconst Breadcrumb = require('./components/breadcrumb');\nconst ButtonGroup = require('./components/button-group');\n\nconst Checkbox = require('./components/checkbox');\nconst ContextMenu = require('./components/context-menu');\nconst Dialog = require('./components/dialog');\nconst Dot = require('./components/dot');\nconst Forms = require('./components/forms');\nconst Calendar = require('./components/calendar');\nconst Icon = require('./components/icon');\nconst Link = require('./components/link');\nconst Message = require('./components/message');\nconst Notification = require('./components/notification');\nconst Radio = require('./components/radio');\nconst Switch = require('./components/switch');\n\nconst Button = require('./components/button');\nconst Accordion = require('./components/accordion');\nconst Card = require('./components/card');\nconst Table = require('./components/table');\nconst ZebraTable = require('./components/zebratable');\n\nconst Modal = require('./components/modal');\nconst CookieConsent = require('./components/cookie-consent');\nconst Divider = require('./components/divider');\n\nconst SideMenu = require('./components/side-menu');\nconst TabMenu = require('./components/tab-menu');\nconst Tabs = require('./components/tabs');\nconst UserMenu = require('./components/user-menu');\n\nconst DropdownFilter = require('./components/dropdown-filter');\n\nconst Tag = require('./components/tag');\nconst Pagination = require('./components/pagination');\nconst Footer = require('./components/footer');\nconst Header = require('./components/header');\n\nconst SearchBar = require('./components/search-bar');\n\nconst ProfilePicture = require('./components/profile-picture');\nconst Profile = require('./components/profile');\n\nconst components = [\n Alert,\n AlertBanner,\n Badge,\n Breadcrumb,\n ButtonGroup,\n Button,\n Checkbox,\n ContextMenu,\n Dialog,\n Dot,\n Forms,\n Calendar,\n Icon,\n Link,\n Message,\n Notification,\n Radio,\n Switch,\n\n Table,\n ZebraTable,\n CookieConsent,\n Modal,\n\n Accordion,\n Card,\n Divider,\n\n SideMenu,\n TabMenu,\n Tabs,\n UserMenu,\n\n DropdownFilter,\n\n SearchBar,\n\n Tag,\n Pagination,\n Footer,\n Header,\n\n ProfilePicture,\n Profile,\n];\n\nconst defaultColors = ['primary', 'secondary'];\n\nmodule.exports = plugin.withOptions(\n function (options = { colors: [], cssBase: true }) {\n return function ({ addComponents, addBase, theme }) {\n const optionColors = [...defaultColors, ...(options.colors || [])];\n\n if (options.cssBase) {\n addBase(base);\n }\n\n addComponents(components.map((component) => component(optionColors, theme)));\n };\n },\n function () {\n return preset;\n }\n);\n"],"mappings":"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"}
package/dist/esm/components/tab-menu.js CHANGED
@@ -1,16 +1,29 @@
1
1
  module.exports = TabMenu = () => ({
2
- '.TabMenu': {
3
- '.tab-wrapper': {
2
+ '.sk-tab-menu': {
3
+ '&-wrapper': {
4
4
  display: 'flex',
5
5
  flexDirection: 'row',
6
- margin: 'auto',
7
- maxWidth: '140rem',
8
- ul: {
9
- all: 'unset',
10
- display: 'flex'
6
+ margin: 'auto'
7
+ },
8
+ '&-right': {
9
+ '@apply justify-end': {}
10
+ },
11
+ '&-center': {
12
+ '@apply justify-center': {}
13
+ },
14
+ '&-list': {
15
+ all: 'unset',
16
+ display: 'flex',
17
+ '&-stretch': {
18
+ '@apply w-full justify-between': {}
11
19
  }
12
20
  },
13
- '.TabItem': {
21
+ '&-underline': {
22
+ width: '100%',
23
+ height: 6,
24
+ '@apply bg-gray-light': {}
25
+ },
26
+ '&-item': {
14
27
  all: 'unset',
15
28
  height: 65,
16
29
  display: 'flex',
@@ -19,21 +32,25 @@ module.exports = TabMenu = () => ({
19
32
  alignItems: 'center',
20
33
  position: 'relative',
21
34
  cursor: 'pointer',
35
+ '&-stretch': {
36
+ '@apply mr-0': {}
37
+ },
38
+ '&-right': {
39
+ '@apply mr-0 ml-[5rem]': {}
40
+ },
41
+ '&-center:last-of-type': {
42
+ '@apply mr-0': {}
43
+ },
22
44
  '&.active::after': {
23
45
  content: '""',
24
46
  display: 'block',
25
47
  position: 'absolute',
26
48
  width: '100%',
27
49
  height: 6,
28
- background: '#005595',
29
50
  top: '100%',
30
- left: 0
51
+ left: 0,
52
+ '@apply bg-primary': {}
31
53
  }
32
- },
33
- '.underline': {
34
- width: '100%',
35
- height: 6,
36
- background: '#F4F4F4'
37
54
  }
38
55
  }
39
56
  });
package/dist/esm/components/tab-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-menu.js","names":["module","exports","TabMenu","display","flexDirection","margin","maxWidth","ul","all","height","padding","marginRight","alignItems","position","cursor","content","width","background","top","left"],"sources":["../../../src/components/tab-menu.js"],"sourcesContent":["module.exports = TabMenu = () => ({\r\n '.TabMenu': {\r\n '.tab-wrapper': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: 'auto',\r\n maxWidth: '140rem',\r\n\r\n ul: {\r\n all: 'unset',\r\n display: 'flex',\r\n },\r\n },\r\n\r\n '.TabItem': {\r\n all: 'unset',\r\n height: 65,\r\n display: 'flex',\r\n padding: '0 1rem',\r\n marginRight: '5rem',\r\n alignItems: 'center',\r\n position: 'relative',\r\n cursor: 'pointer',\r\n\r\n '&.active::after': {\r\n content: '\"\"',\r\n display: 'block',\r\n position: 'absolute',\r\n width: '100%',\r\n height: 6,\r\n background: '#005595',\r\n top: '100%',\r\n left: 0,\r\n },\r\n },\r\n\r\n '.underline': {\r\n width: '100%',\r\n height: 6,\r\n background: '#F4F4F4',\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,OAAO,GAAGA,CAAA,MAAO;EAChC,UAAU,EAAE;IACV,cAAc,EAAE;MACdC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,KAAK;MACpBC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,QAAQ;MAElBC,EAAE,EAAE;QACFC,GAAG,EAAE,OAAO;QACZL,OAAO,EAAE;MACX;IACF,CAAC;IAED,UAAU,EAAE;MACVK,GAAG,EAAE,OAAO;MACZC,MAAM,EAAE,EAAE;MACVN,OAAO,EAAE,MAAM;MACfO,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,MAAM;MACnBC,UAAU,EAAE,QAAQ;MACpBC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,SAAS;MAEjB,iBAAiB,EAAE;QACjBC,OAAO,EAAE,IAAI;QACbZ,OAAO,EAAE,OAAO;QAChBU,QAAQ,EAAE,UAAU;QACpBG,KAAK,EAAE,MAAM;QACbP,MAAM,EAAE,CAAC;QACTQ,UAAU,EAAE,SAAS;QACrBC,GAAG,EAAE,MAAM;QACXC,IAAI,EAAE;MACR;IACF,CAAC;IAED,YAAY,EAAE;MACZH,KAAK,EAAE,MAAM;MACbP,MAAM,EAAE,CAAC;MACTQ,UAAU,EAAE;IACd;EACF;AACF,CAAC,CAAC"}
1
+ {"version":3,"file":"tab-menu.js","names":["module","exports","TabMenu","display","flexDirection","margin","all","width","height","padding","marginRight","alignItems","position","cursor","content","top","left"],"sources":["../../../src/components/tab-menu.js"],"sourcesContent":["module.exports = TabMenu = () => ({\n '.sk-tab-menu': {\n '&-wrapper': {\n display: 'flex',\n flexDirection: 'row',\n margin: 'auto',\n },\n '&-right': {\n '@apply justify-end': {},\n },\n '&-center': {\n '@apply justify-center': {},\n },\n '&-list': {\n all: 'unset',\n display: 'flex',\n '&-stretch': {\n '@apply w-full justify-between': {},\n },\n },\n\n '&-underline': {\n width: '100%',\n height: 6,\n '@apply bg-gray-light': {},\n },\n '&-item': {\n all: 'unset',\n height: 65,\n display: 'flex',\n padding: '0 1rem',\n marginRight: '5rem',\n alignItems: 'center',\n position: 'relative',\n cursor: 'pointer',\n '&-stretch': {\n '@apply mr-0': {},\n },\n '&-right': {\n '@apply mr-0 ml-[5rem]': {},\n },\n '&-center:last-of-type': {\n '@apply mr-0': {},\n },\n\n '&.active::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n width: '100%',\n height: 6,\n top: '100%',\n left: 0,\n '@apply bg-primary': {},\n },\n },\n },\n});\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,OAAO,GAAGA,CAAA,MAAO;EAChC,cAAc,EAAE;IACd,WAAW,EAAE;MACXC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,KAAK;MACpBC,MAAM,EAAE;IACV,CAAC;IACD,SAAS,EAAE;MACT,oBAAoB,EAAE,CAAC;IACzB,CAAC;IACD,UAAU,EAAE;MACV,uBAAuB,EAAE,CAAC;IAC5B,CAAC;IACD,QAAQ,EAAE;MACRC,GAAG,EAAE,OAAO;MACZH,OAAO,EAAE,MAAM;MACf,WAAW,EAAE;QACX,+BAA+B,EAAE,CAAC;MACpC;IACF,CAAC;IAED,aAAa,EAAE;MACbI,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,CAAC;MACT,sBAAsB,EAAE,CAAC;IAC3B,CAAC;IACD,QAAQ,EAAE;MACRF,GAAG,EAAE,OAAO;MACZE,MAAM,EAAE,EAAE;MACVL,OAAO,EAAE,MAAM;MACfM,OAAO,EAAE,QAAQ;MACjBC,WAAW,EAAE,MAAM;MACnBC,UAAU,EAAE,QAAQ;MACpBC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,SAAS;MACjB,WAAW,EAAE;QACX,aAAa,EAAE,CAAC;MAClB,CAAC;MACD,SAAS,EAAE;QACT,uBAAuB,EAAE,CAAC;MAC5B,CAAC;MACD,uBAAuB,EAAE;QACvB,aAAa,EAAE,CAAC;MAClB,CAAC;MAED,iBAAiB,EAAE;QACjBC,OAAO,EAAE,IAAI;QACbX,OAAO,EAAE,OAAO;QAChBS,QAAQ,EAAE,UAAU;QACpBL,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,CAAC;QACTO,GAAG,EAAE,MAAM;QACXC,IAAI,EAAE,CAAC;QACP,mBAAmB,EAAE,CAAC;MACxB;IACF;EACF;AACF,CAAC,CAAC"}
package/dist/esm/components/tabs.js ADDED
@@ -0,0 +1,64 @@
1
+ module.exports = Tabs = () => ({
2
+ '.sk-tabs': {
3
+ '&-stretch': {
4
+ '@apply w-full': {}
5
+ },
6
+ '&-list': {
7
+ '@apply block relative w-full h-[3rem]': {},
8
+ '&-stretch': {
9
+ '@apply flex justify-between': {}
10
+ },
11
+ '&-right': {
12
+ '@apply text-right': {}
13
+ },
14
+ '&-center': {
15
+ '@apply text-center': {}
16
+ },
17
+ '&-line::after': {
18
+ content: '""',
19
+ '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {}
20
+ }
21
+ },
22
+ '&-tab': {
23
+ '@apply relative mr-[3.2rem] text-base font-bold p-0 relative h-[2.8rem] inline-block': {},
24
+ '@apply text-gray': {},
25
+ '@apply cursor-pointer': {},
26
+ '&.disabled': {
27
+ '@apply cursor-not-allowed': {},
28
+ '@apply text-gray-stroke': {}
29
+ },
30
+ '&.active': {
31
+ '@apply text-body': {},
32
+ '&::after': {
33
+ content: '""',
34
+ '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {}
35
+ }
36
+ },
37
+ '&-stretch': {
38
+ '@apply mr-0': {}
39
+ },
40
+ '&-header': {
41
+ '@apply text-lg font-normal': {}
42
+ },
43
+ '&-right': {
44
+ '@apply mr-0 ml-lg': {}
45
+ },
46
+ '&:last-of-type': {
47
+ '@apply mr-0': {}
48
+ },
49
+ '&-icon': {
50
+ '&-with-label': {
51
+ '@apply mr-sm': {}
52
+ }
53
+ }
54
+ },
55
+ '&-panel': {
56
+ '@apply mt-lg': {},
57
+ '&:not(.active)': {
58
+ display: 'none',
59
+ hidden: true
60
+ }
61
+ }
62
+ }
63
+ });
64
+ //# sourceMappingURL=tabs.js.map
package/dist/esm/components/tabs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.js","names":["module","exports","Tabs","content","display","hidden"],"sources":["../../../src/components/tabs.js"],"sourcesContent":["module.exports = Tabs = () => ({\n '.sk-tabs': {\n '&-stretch': {\n '@apply w-full': {},\n },\n '&-list': {\n '@apply block relative w-full h-[3rem]': {},\n '&-stretch': {\n '@apply flex justify-between': {},\n },\n '&-right': {\n '@apply text-right': {},\n },\n '&-center': {\n '@apply text-center': {},\n },\n\n '&-line::after': {\n content: '\"\"',\n '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},\n },\n },\n '&-tab': {\n '@apply relative mr-[3.2rem] text-base font-bold p-0 relative h-[2.8rem] inline-block': {},\n '@apply text-gray': {},\n '@apply cursor-pointer': {},\n '&.disabled': {\n '@apply cursor-not-allowed': {},\n '@apply text-gray-stroke': {},\n },\n '&.active': {\n '@apply text-body': {},\n '&::after': {\n content: '\"\"',\n '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},\n },\n },\n '&-stretch': {\n '@apply mr-0': {},\n },\n '&-header': {\n '@apply text-lg font-normal': {},\n },\n '&-right': {\n '@apply mr-0 ml-lg': {},\n },\n '&:last-of-type': {\n '@apply mr-0': {},\n },\n '&-icon': {\n '&-with-label': {\n '@apply mr-sm': {},\n },\n },\n },\n '&-panel': {\n '@apply mt-lg': {},\n '&:not(.active)': {\n display: 'none',\n hidden: true,\n },\n },\n },\n});\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,IAAI,GAAGA,CAAA,MAAO;EAC7B,UAAU,EAAE;IACV,WAAW,EAAE;MACX,eAAe,EAAE,CAAC;IACpB,CAAC;IACD,QAAQ,EAAE;MACR,wCAAwC,EAAE,CAAC,CAAC;MAC5C,WAAW,EAAE;QACX,6BAA6B,EAAE,CAAC;MAClC,CAAC;MACD,SAAS,EAAE;QACT,mBAAmB,EAAE,CAAC;MACxB,CAAC;MACD,UAAU,EAAE;QACV,oBAAoB,EAAE,CAAC;MACzB,CAAC;MAED,eAAe,EAAE;QACfC,OAAO,EAAE,IAAI;QACb,uEAAuE,EAAE,CAAC;MAC5E;IACF,CAAC;IACD,OAAO,EAAE;MACP,uFAAuF,EAAE,CAAC,CAAC;MAC3F,kBAAkB,EAAE,CAAC,CAAC;MACtB,uBAAuB,EAAE,CAAC,CAAC;MAC3B,YAAY,EAAE;QACZ,2BAA2B,EAAE,CAAC,CAAC;QAC/B,yBAAyB,EAAE,CAAC;MAC9B,CAAC;MACD,UAAU,EAAE;QACV,kBAAkB,EAAE,CAAC,CAAC;QACtB,UAAU,EAAE;UACVA,OAAO,EAAE,IAAI;UACb,2EAA2E,EAAE,CAAC;QAChF;MACF,CAAC;MACD,WAAW,EAAE;QACX,aAAa,EAAE,CAAC;MAClB,CAAC;MACD,UAAU,EAAE;QACV,4BAA4B,EAAE,CAAC;MACjC,CAAC;MACD,SAAS,EAAE;QACT,mBAAmB,EAAE,CAAC;MACxB,CAAC;MACD,gBAAgB,EAAE;QAChB,aAAa,EAAE,CAAC;MAClB,CAAC;MACD,QAAQ,EAAE;QACR,cAAc,EAAE;UACd,cAAc,EAAE,CAAC;QACnB;MACF;IACF,CAAC;IACD,SAAS,EAAE;MACT,cAAc,EAAE,CAAC,CAAC;MAClB,gBAAgB,EAAE;QAChBC,OAAO,EAAE,MAAM;QACfC,MAAM,EAAE;MACV;IACF;EACF;AACF,CAAC,CAAC"}
package/dist/esm/index.js CHANGED
@@ -33,6 +33,7 @@ var CookieConsent = require('./components/cookie-consent');
33
33
  var Divider = require('./components/divider');
34
34
  var SideMenu = require('./components/side-menu');
35
35
  var TabMenu = require('./components/tab-menu');
36
+ var Tabs = require('./components/tabs');
36
37
  var UserMenu = require('./components/user-menu');
37
38
  var DropdownFilter = require('./components/dropdown-filter');
38
39
  var Tag = require('./components/tag');
@@ -42,7 +43,7 @@ var Header = require('./components/header');
42
43
  var SearchBar = require('./components/search-bar');
43
44
  var ProfilePicture = require('./components/profile-picture');
44
45
  var Profile = require('./components/profile');
45
- var components = [Alert, AlertBanner, Badge, Breadcrumb, ButtonGroup, Button, Checkbox, ContextMenu, Dialog, Dot, Forms, Calendar, Icon, Link, Message, Notification, Radio, Switch, Table, ZebraTable, CookieConsent, Modal, Accordion, Card, Divider, SideMenu, TabMenu, UserMenu, DropdownFilter, SearchBar, Tag, Pagination, Footer, Header, ProfilePicture, Profile];
46
+ var components = [Alert, AlertBanner, Badge, Breadcrumb, ButtonGroup, Button, Checkbox, 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];
46
47
  var defaultColors = ['primary', 'secondary'];
47
48
  module.exports = plugin.withOptions(function (options) {
48
49
  if (options === void 0) {
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["plugin","require","base","preset","Alert","AlertBanner","Badge","Breadcrumb","ButtonGroup","Checkbox","ContextMenu","Dialog","Dot","Forms","Calendar","Icon","Link","Message","Notification","Radio","Switch","Button","Accordion","Card","Table","ZebraTable","Modal","CookieConsent","Divider","SideMenu","TabMenu","UserMenu","DropdownFilter","Tag","Pagination","Footer","Header","SearchBar","ProfilePicture","Profile","components","defaultColors","module","exports","withOptions","options","colors","cssBase","_ref","addComponents","addBase","theme","optionColors","map","component"],"sources":["../../src/index.js"],"sourcesContent":["const plugin = require('tailwindcss/plugin');\r\n\r\nconst base = require('./base');\r\nconst preset = require('./preset');\r\n\r\n// const colors = require(\"/colors\");\r\n// const { colors } = require('@sk-web-gui/theme');\r\n// const withOpacity = require('./with-opacity');\r\n// components\r\nconst Alert = require('./components/alert');\r\nconst AlertBanner = require('./components/alert-banner');\r\nconst Badge = require('./components/badge');\r\nconst Breadcrumb = require('./components/breadcrumb');\r\nconst ButtonGroup = require('./components/button-group');\r\n\r\nconst Checkbox = require('./components/checkbox');\r\nconst ContextMenu = require('./components/context-menu');\r\nconst Dialog = require('./components/dialog');\r\nconst Dot = require('./components/dot');\r\nconst Forms = require('./components/forms');\r\nconst Calendar = require('./components/calendar');\r\nconst Icon = require('./components/icon');\r\nconst Link = require('./components/link');\r\nconst Message = require('./components/message');\r\nconst Notification = require('./components/notification');\r\nconst Radio = require('./components/radio');\r\nconst Switch = require('./components/switch');\r\n\r\nconst Button = require('./components/button');\r\nconst Accordion = require('./components/accordion');\r\nconst Card = require('./components/card');\r\nconst Table = require('./components/table');\r\nconst ZebraTable = require('./components/zebratable');\r\n\r\nconst Modal = require('./components/modal');\r\nconst CookieConsent = require('./components/cookie-consent');\r\nconst Divider = require('./components/divider');\r\n\r\nconst SideMenu = require('./components/side-menu');\r\nconst TabMenu = require('./components/tab-menu');\r\nconst UserMenu = require('./components/user-menu');\r\n\r\nconst DropdownFilter = require('./components/dropdown-filter');\r\n\r\nconst Tag = require('./components/tag');\r\nconst Pagination = require('./components/pagination');\r\nconst Footer = require('./components/footer');\r\nconst Header = require('./components/header');\r\n\r\nconst SearchBar = require('./components/search-bar');\r\n\r\nconst ProfilePicture = require('./components/profile-picture');\r\nconst Profile = require('./components/profile');\r\n\r\nconst components = [\r\n Alert,\r\n AlertBanner,\r\n Badge,\r\n Breadcrumb,\r\n ButtonGroup,\r\n Button,\r\n Checkbox,\r\n ContextMenu,\r\n Dialog,\r\n Dot,\r\n Forms,\r\n Calendar,\r\n Icon,\r\n Link,\r\n Message,\r\n Notification,\r\n Radio,\r\n Switch,\r\n\r\n Table,\r\n ZebraTable,\r\n CookieConsent,\r\n Modal,\r\n\r\n Accordion,\r\n Card,\r\n Divider,\r\n\r\n SideMenu,\r\n TabMenu,\r\n UserMenu,\r\n\r\n DropdownFilter,\r\n\r\n SearchBar,\r\n\r\n Tag,\r\n Pagination,\r\n Footer,\r\n Header,\r\n\r\n ProfilePicture,\r\n Profile,\r\n];\r\n\r\nconst defaultColors = ['primary', 'secondary'];\r\n\r\nmodule.exports = plugin.withOptions(\r\n function (options = { colors: [], cssBase: true }) {\r\n return function ({ addComponents, addBase, theme }) {\r\n const optionColors = [...defaultColors, ...(options.colors || [])];\r\n\r\n if (options.cssBase) {\r\n addBase(base);\r\n }\r\n\r\n addComponents(components.map((component) => component(optionColors, theme)));\r\n };\r\n },\r\n function () {\r\n return preset;\r\n }\r\n);\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["plugin","require","base","preset","Alert","AlertBanner","Badge","Breadcrumb","ButtonGroup","Checkbox","ContextMenu","Dialog","Dot","Forms","Calendar","Icon","Link","Message","Notification","Radio","Switch","Button","Accordion","Card","Table","ZebraTable","Modal","CookieConsent","Divider","SideMenu","TabMenu","Tabs","UserMenu","DropdownFilter","Tag","Pagination","Footer","Header","SearchBar","ProfilePicture","Profile","components","defaultColors","module","exports","withOptions","options","colors","cssBase","_ref","addComponents","addBase","theme","optionColors","map","component"],"sources":["../../src/index.js"],"sourcesContent":["const plugin = require('tailwindcss/plugin');\n\nconst base = require('./base');\nconst preset = require('./preset');\n\n// const colors = require(\"/colors\");\n// const { colors } = require('@sk-web-gui/theme');\n// const withOpacity = require('./with-opacity');\n// components\nconst Alert = require('./components/alert');\nconst AlertBanner = require('./components/alert-banner');\nconst Badge = require('./components/badge');\nconst Breadcrumb = require('./components/breadcrumb');\nconst ButtonGroup = require('./components/button-group');\n\nconst Checkbox = require('./components/checkbox');\nconst ContextMenu = require('./components/context-menu');\nconst Dialog = require('./components/dialog');\nconst Dot = require('./components/dot');\nconst Forms = require('./components/forms');\nconst Calendar = require('./components/calendar');\nconst Icon = require('./components/icon');\nconst Link = require('./components/link');\nconst Message = require('./components/message');\nconst Notification = require('./components/notification');\nconst Radio = require('./components/radio');\nconst Switch = require('./components/switch');\n\nconst Button = require('./components/button');\nconst Accordion = require('./components/accordion');\nconst Card = require('./components/card');\nconst Table = require('./components/table');\nconst ZebraTable = require('./components/zebratable');\n\nconst Modal = require('./components/modal');\nconst CookieConsent = require('./components/cookie-consent');\nconst Divider = require('./components/divider');\n\nconst SideMenu = require('./components/side-menu');\nconst TabMenu = require('./components/tab-menu');\nconst Tabs = require('./components/tabs');\nconst UserMenu = require('./components/user-menu');\n\nconst DropdownFilter = require('./components/dropdown-filter');\n\nconst Tag = require('./components/tag');\nconst Pagination = require('./components/pagination');\nconst Footer = require('./components/footer');\nconst Header = require('./components/header');\n\nconst SearchBar = require('./components/search-bar');\n\nconst ProfilePicture = require('./components/profile-picture');\nconst Profile = require('./components/profile');\n\nconst components = [\n Alert,\n AlertBanner,\n Badge,\n Breadcrumb,\n ButtonGroup,\n Button,\n Checkbox,\n ContextMenu,\n Dialog,\n Dot,\n Forms,\n Calendar,\n Icon,\n Link,\n Message,\n Notification,\n Radio,\n Switch,\n\n Table,\n ZebraTable,\n CookieConsent,\n Modal,\n\n Accordion,\n Card,\n Divider,\n\n SideMenu,\n TabMenu,\n Tabs,\n UserMenu,\n\n DropdownFilter,\n\n SearchBar,\n\n Tag,\n Pagination,\n Footer,\n Header,\n\n ProfilePicture,\n Profile,\n];\n\nconst defaultColors = ['primary', 'secondary'];\n\nmodule.exports = plugin.withOptions(\n function (options = { colors: [], cssBase: true }) {\n return function ({ addComponents, addBase, theme }) {\n const optionColors = [...defaultColors, ...(options.colors || [])];\n\n if (options.cssBase) {\n addBase(base);\n }\n\n addComponents(components.map((component) => component(optionColors, theme)));\n };\n },\n function () {\n return preset;\n }\n);\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.76",
3
+ "version": "0.1.77",
4
4
  "license": "MIT",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -39,5 +39,5 @@
39
39
  "@sk-web-gui/theme": "0.1.12",
40
40
  "mini-svg-data-uri": "^1.4.4"
41
41
  },
42
- "gitHead": "31d25c7a23df03a321f83ac5bf489e23a97c0a86"
42
+ "gitHead": "da14fe91be990d3e2a58b510b828e29143ea1990"
43
43
  }
package/src/components/tab-menu.js CHANGED
@@ -1,43 +1,58 @@
1
- module.exports = TabMenu = () => ({
2
- '.TabMenu': {
3
- '.tab-wrapper': {
4
- display: 'flex',
5
- flexDirection: 'row',
6
- margin: 'auto',
7
- maxWidth: '140rem',
8
-
9
- ul: {
10
- all: 'unset',
11
- display: 'flex',
12
- },
13
- },
14
-
15
- '.TabItem': {
16
- all: 'unset',
17
- height: 65,
18
- display: 'flex',
19
- padding: '0 1rem',
20
- marginRight: '5rem',
21
- alignItems: 'center',
22
- position: 'relative',
23
- cursor: 'pointer',
24
-
25
- '&.active::after': {
26
- content: '""',
27
- display: 'block',
28
- position: 'absolute',
29
- width: '100%',
30
- height: 6,
31
- background: '#005595',
32
- top: '100%',
33
- left: 0,
34
- },
35
- },
36
-
37
- '.underline': {
38
- width: '100%',
39
- height: 6,
40
- background: '#F4F4F4',
41
- },
42
- },
43
- });
1
+ module.exports = TabMenu = () => ({
2
+ '.sk-tab-menu': {
3
+ '&-wrapper': {
4
+ display: 'flex',
5
+ flexDirection: 'row',
6
+ margin: 'auto',
7
+ },
8
+ '&-right': {
9
+ '@apply justify-end': {},
10
+ },
11
+ '&-center': {
12
+ '@apply justify-center': {},
13
+ },
14
+ '&-list': {
15
+ all: 'unset',
16
+ display: 'flex',
17
+ '&-stretch': {
18
+ '@apply w-full justify-between': {},
19
+ },
20
+ },
21
+
22
+ '&-underline': {
23
+ width: '100%',
24
+ height: 6,
25
+ '@apply bg-gray-light': {},
26
+ },
27
+ '&-item': {
28
+ all: 'unset',
29
+ height: 65,
30
+ display: 'flex',
31
+ padding: '0 1rem',
32
+ marginRight: '5rem',
33
+ alignItems: 'center',
34
+ position: 'relative',
35
+ cursor: 'pointer',
36
+ '&-stretch': {
37
+ '@apply mr-0': {},
38
+ },
39
+ '&-right': {
40
+ '@apply mr-0 ml-[5rem]': {},
41
+ },
42
+ '&-center:last-of-type': {
43
+ '@apply mr-0': {},
44
+ },
45
+
46
+ '&.active::after': {
47
+ content: '""',
48
+ display: 'block',
49
+ position: 'absolute',
50
+ width: '100%',
51
+ height: 6,
52
+ top: '100%',
53
+ left: 0,
54
+ '@apply bg-primary': {},
55
+ },
56
+ },
57
+ },
58
+ });
package/src/components/tabs.js ADDED
@@ -0,0 +1,64 @@
1
+ module.exports = Tabs = () => ({
2
+ '.sk-tabs': {
3
+ '&-stretch': {
4
+ '@apply w-full': {},
5
+ },
6
+ '&-list': {
7
+ '@apply block relative w-full h-[3rem]': {},
8
+ '&-stretch': {
9
+ '@apply flex justify-between': {},
10
+ },
11
+ '&-right': {
12
+ '@apply text-right': {},
13
+ },
14
+ '&-center': {
15
+ '@apply text-center': {},
16
+ },
17
+
18
+ '&-line::after': {
19
+ content: '""',
20
+ '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
21
+ },
22
+ },
23
+ '&-tab': {
24
+ '@apply relative mr-[3.2rem] text-base font-bold p-0 relative h-[2.8rem] inline-block': {},
25
+ '@apply text-gray': {},
26
+ '@apply cursor-pointer': {},
27
+ '&.disabled': {
28
+ '@apply cursor-not-allowed': {},
29
+ '@apply text-gray-stroke': {},
30
+ },
31
+ '&.active': {
32
+ '@apply text-body': {},
33
+ '&::after': {
34
+ content: '""',
35
+ '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
36
+ },
37
+ },
38
+ '&-stretch': {
39
+ '@apply mr-0': {},
40
+ },
41
+ '&-header': {
42
+ '@apply text-lg font-normal': {},
43
+ },
44
+ '&-right': {
45
+ '@apply mr-0 ml-lg': {},
46
+ },
47
+ '&:last-of-type': {
48
+ '@apply mr-0': {},
49
+ },
50
+ '&-icon': {
51
+ '&-with-label': {
52
+ '@apply mr-sm': {},
53
+ },
54
+ },
55
+ },
56
+ '&-panel': {
57
+ '@apply mt-lg': {},
58
+ '&:not(.active)': {
59
+ display: 'none',
60
+ hidden: true,
61
+ },
62
+ },
63
+ },
64
+ });
package/src/index.js CHANGED
@@ -1,118 +1,120 @@
1
- const plugin = require('tailwindcss/plugin');
2
-
3
- const base = require('./base');
4
- const preset = require('./preset');
5
-
6
- // const colors = require("/colors");
7
- // const { colors } = require('@sk-web-gui/theme');
8
- // const withOpacity = require('./with-opacity');
9
- // components
10
- const Alert = require('./components/alert');
11
- const AlertBanner = require('./components/alert-banner');
12
- const Badge = require('./components/badge');
13
- const Breadcrumb = require('./components/breadcrumb');
14
- const ButtonGroup = require('./components/button-group');
15
-
16
- const Checkbox = require('./components/checkbox');
17
- const ContextMenu = require('./components/context-menu');
18
- const Dialog = require('./components/dialog');
19
- const Dot = require('./components/dot');
20
- const Forms = require('./components/forms');
21
- const Calendar = require('./components/calendar');
22
- const Icon = require('./components/icon');
23
- const Link = require('./components/link');
24
- const Message = require('./components/message');
25
- const Notification = require('./components/notification');
26
- const Radio = require('./components/radio');
27
- const Switch = require('./components/switch');
28
-
29
- const Button = require('./components/button');
30
- const Accordion = require('./components/accordion');
31
- const Card = require('./components/card');
32
- const Table = require('./components/table');
33
- const ZebraTable = require('./components/zebratable');
34
-
35
- const Modal = require('./components/modal');
36
- const CookieConsent = require('./components/cookie-consent');
37
- const Divider = require('./components/divider');
38
-
39
- const SideMenu = require('./components/side-menu');
40
- const TabMenu = require('./components/tab-menu');
41
- const UserMenu = require('./components/user-menu');
42
-
43
- const DropdownFilter = require('./components/dropdown-filter');
44
-
45
- const Tag = require('./components/tag');
46
- const Pagination = require('./components/pagination');
47
- const Footer = require('./components/footer');
48
- const Header = require('./components/header');
49
-
50
- const SearchBar = require('./components/search-bar');
51
-
52
- const ProfilePicture = require('./components/profile-picture');
53
- const Profile = require('./components/profile');
54
-
55
- const components = [
56
- Alert,
57
- AlertBanner,
58
- Badge,
59
- Breadcrumb,
60
- ButtonGroup,
61
- Button,
62
- Checkbox,
63
- ContextMenu,
64
- Dialog,
65
- Dot,
66
- Forms,
67
- Calendar,
68
- Icon,
69
- Link,
70
- Message,
71
- Notification,
72
- Radio,
73
- Switch,
74
-
75
- Table,
76
- ZebraTable,
77
- CookieConsent,
78
- Modal,
79
-
80
- Accordion,
81
- Card,
82
- Divider,
83
-
84
- SideMenu,
85
- TabMenu,
86
- UserMenu,
87
-
88
- DropdownFilter,
89
-
90
- SearchBar,
91
-
92
- Tag,
93
- Pagination,
94
- Footer,
95
- Header,
96
-
97
- ProfilePicture,
98
- Profile,
99
- ];
100
-
101
- const defaultColors = ['primary', 'secondary'];
102
-
103
- module.exports = plugin.withOptions(
104
- function (options = { colors: [], cssBase: true }) {
105
- return function ({ addComponents, addBase, theme }) {
106
- const optionColors = [...defaultColors, ...(options.colors || [])];
107
-
108
- if (options.cssBase) {
109
- addBase(base);
110
- }
111
-
112
- addComponents(components.map((component) => component(optionColors, theme)));
113
- };
114
- },
115
- function () {
116
- return preset;
117
- }
118
- );
1
+ const plugin = require('tailwindcss/plugin');
2
+
3
+ const base = require('./base');
4
+ const preset = require('./preset');
5
+
6
+ // const colors = require("/colors");
7
+ // const { colors } = require('@sk-web-gui/theme');
8
+ // const withOpacity = require('./with-opacity');
9
+ // components
10
+ const Alert = require('./components/alert');
11
+ const AlertBanner = require('./components/alert-banner');
12
+ const Badge = require('./components/badge');
13
+ const Breadcrumb = require('./components/breadcrumb');
14
+ const ButtonGroup = require('./components/button-group');
15
+
16
+ const Checkbox = require('./components/checkbox');
17
+ const ContextMenu = require('./components/context-menu');
18
+ const Dialog = require('./components/dialog');
19
+ const Dot = require('./components/dot');
20
+ const Forms = require('./components/forms');
21
+ const Calendar = require('./components/calendar');
22
+ const Icon = require('./components/icon');
23
+ const Link = require('./components/link');
24
+ const Message = require('./components/message');
25
+ const Notification = require('./components/notification');
26
+ const Radio = require('./components/radio');
27
+ const Switch = require('./components/switch');
28
+
29
+ const Button = require('./components/button');
30
+ const Accordion = require('./components/accordion');
31
+ const Card = require('./components/card');
32
+ const Table = require('./components/table');
33
+ const ZebraTable = require('./components/zebratable');
34
+
35
+ const Modal = require('./components/modal');
36
+ const CookieConsent = require('./components/cookie-consent');
37
+ const Divider = require('./components/divider');
38
+
39
+ const SideMenu = require('./components/side-menu');
40
+ const TabMenu = require('./components/tab-menu');
41
+ const Tabs = require('./components/tabs');
42
+ const UserMenu = require('./components/user-menu');
43
+
44
+ const DropdownFilter = require('./components/dropdown-filter');
45
+
46
+ const Tag = require('./components/tag');
47
+ const Pagination = require('./components/pagination');
48
+ const Footer = require('./components/footer');
49
+ const Header = require('./components/header');
50
+
51
+ const SearchBar = require('./components/search-bar');
52
+
53
+ const ProfilePicture = require('./components/profile-picture');
54
+ const Profile = require('./components/profile');
55
+
56
+ const components = [
57
+ Alert,
58
+ AlertBanner,
59
+ Badge,
60
+ Breadcrumb,
61
+ ButtonGroup,
62
+ Button,
63
+ Checkbox,
64
+ ContextMenu,
65
+ Dialog,
66
+ Dot,
67
+ Forms,
68
+ Calendar,
69
+ Icon,
70
+ Link,
71
+ Message,
72
+ Notification,
73
+ Radio,
74
+ Switch,
75
+
76
+ Table,
77
+ ZebraTable,
78
+ CookieConsent,
79
+ Modal,
80
+
81
+ Accordion,
82
+ Card,
83
+ Divider,
84
+
85
+ SideMenu,
86
+ TabMenu,
87
+ Tabs,
88
+ UserMenu,
89
+
90
+ DropdownFilter,
91
+
92
+ SearchBar,
93
+
94
+ Tag,
95
+ Pagination,
96
+ Footer,
97
+ Header,
98
+
99
+ ProfilePicture,
100
+ Profile,
101
+ ];
102
+
103
+ const defaultColors = ['primary', 'secondary'];
104
+
105
+ module.exports = plugin.withOptions(
106
+ function (options = { colors: [], cssBase: true }) {
107
+ return function ({ addComponents, addBase, theme }) {
108
+ const optionColors = [...defaultColors, ...(options.colors || [])];
109
+
110
+ if (options.cssBase) {
111
+ addBase(base);
112
+ }
113
+
114
+ addComponents(components.map((component) => component(optionColors, theme)));
115
+ };
116
+ },
117
+ function () {
118
+ return preset;
119
+ }
120
+ );