@operato/styles 7.0.0-rc.0 β 7.0.0-rc.13
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.
- package/.storybook/preview.js +52 -0
- package/CHANGELOG.md +62 -0
- package/dist/src/common-grist-styles.js +12 -7
- package/dist/src/common-grist-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +2 -2
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/index.d.ts +0 -1
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +1 -1
- package/dist/stories/button-container-styles.stories.d.ts +1 -7
- package/dist/stories/button-container-styles.stories.js +2 -8
- package/dist/stories/button-container-styles.stories.js.map +1 -1
- package/dist/stories/common-header-styles-actions.stories.d.ts +0 -5
- package/dist/stories/common-header-styles-actions.stories.js +2 -8
- package/dist/stories/common-header-styles-actions.stories.js.map +1 -1
- package/dist/stories/common-header-styles-pure.stories.d.ts +0 -5
- package/dist/stories/common-header-styles-pure.stories.js +2 -7
- package/dist/stories/common-header-styles-pure.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/common-grist-styles.ts +12 -7
- package/src/common-header-styles.ts +2 -2
- package/src/index.ts +0 -1
- package/stories/button-container-styles.stories.ts +3 -11
- package/stories/common-header-styles-actions.stories.ts +2 -9
- package/stories/common-header-styles-pure.stories.ts +2 -8
- package/themes/app-theme.css +138 -0
- package/themes/calendar-theme.css +59 -0
- package/themes/dark.css +0 -100
- package/themes/form-theme.css +71 -0
- package/themes/grist-theme.css +45 -41
- package/themes/layout-theme.css +94 -0
- package/themes/light.css +3 -103
- package/themes/material-theme.css +23 -0
- package/themes/oops-theme.css +22 -0
- package/themes/report-theme.css +47 -0
- package/themes/spacing.css +7 -27
- package/themes/state-color.css +1 -1
- package/themes/tooltip-theme.css +11 -0
- package/dist/src/tooltip-styles.d.ts +0 -1
- package/dist/src/tooltip-styles.js +0 -29
- package/dist/src/tooltip-styles.js.map +0 -1
- package/src/tooltip-styles.ts +0 -29
- package/themes/dark-hc.css +0 -151
- package/themes/dark-mc.css +0 -151
- package/themes/light-hc.css +0 -151
- package/themes/light-mc.css +0 -151
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { i18next } from '@operato/i18n'
|
|
2
|
+
|
|
3
|
+
export const globalTypes = {
|
|
4
|
+
locale: {
|
|
5
|
+
name: 'Locale',
|
|
6
|
+
description: 'Internationalization locale',
|
|
7
|
+
toolbar: {
|
|
8
|
+
icon: 'globe',
|
|
9
|
+
items: [
|
|
10
|
+
{ value: 'en', right: 'πΊπΈ', title: 'English' },
|
|
11
|
+
{ value: 'ko', right: 'π°π·', title: 'νκ΅μ΄' },
|
|
12
|
+
{ value: 'zh', right: 'π¨π³', title: 'δΈζ' },
|
|
13
|
+
{ value: 'ja', right: 'π―π΅', title: 'ζ₯ζ¬θͺ' },
|
|
14
|
+
{ value: 'ms', right: 'π²πΎ', title: 'Bahasa Melayu' }
|
|
15
|
+
],
|
|
16
|
+
showName: true
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
theme: {
|
|
20
|
+
name: 'Theme',
|
|
21
|
+
description: 'Global theme for components',
|
|
22
|
+
toolbar: {
|
|
23
|
+
icon: 'paintbrush',
|
|
24
|
+
items: [
|
|
25
|
+
{ value: 'light', title: 'Light' },
|
|
26
|
+
{ value: 'dark', title: 'Dark' }
|
|
27
|
+
],
|
|
28
|
+
showName: true
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export const decorators = [
|
|
34
|
+
(Story, context) => {
|
|
35
|
+
const { locale, theme } = context.globals
|
|
36
|
+
|
|
37
|
+
if (locale) {
|
|
38
|
+
i18next.changeLanguage(locale)
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Set the theme class for the document
|
|
42
|
+
if (theme === 'dark') {
|
|
43
|
+
document.documentElement.classList.add('dark')
|
|
44
|
+
document.documentElement.classList.remove('light')
|
|
45
|
+
} else {
|
|
46
|
+
document.documentElement.classList.add('light')
|
|
47
|
+
document.documentElement.classList.remove('dark')
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return Story()
|
|
51
|
+
}
|
|
52
|
+
]
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,68 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* storybook preview.js ([8215c06](https://github.com/hatiolab/operato/commit/8215c06a293ecaa2df2f0b314ee5b9ff252a1434))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* header styles for data-grid ([f561e38](https://github.com/hatiolab/operato/commit/f561e38a25904057bfb91a728a8eed0e7c4e2533))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### :bug: Bug Fix
|
|
28
|
+
|
|
29
|
+
* ox-input-barcode style ([5f803bb](https://github.com/hatiolab/operato/commit/5f803bba90167c3a214998df3f860934b116d770))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## [7.0.0-rc.8](https://github.com/hatiolab/operato/compare/v7.0.0-rc.7...v7.0.0-rc.8) (2024-06-28)
|
|
34
|
+
|
|
35
|
+
**Note:** Version bump only for package @operato/styles
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [7.0.0-rc.7](https://github.com/hatiolab/operato/compare/v7.0.0-rc.6...v7.0.0-rc.7) (2024-06-28)
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### :bug: Bug Fix
|
|
45
|
+
|
|
46
|
+
* tooltip μ΄ λΆλͺ¨μ transformμ λ°μνμ§ λͺ»νλ λ¬Έμ ([992d295](https://github.com/hatiolab/operato/commit/992d2950a5407a94254b910b4b2d0d6b83d5df59))
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
## [7.0.0-rc.6](https://github.com/hatiolab/operato/compare/v7.0.0-rc.5...v7.0.0-rc.6) (2024-06-27)
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
### :bug: Bug Fix
|
|
54
|
+
|
|
55
|
+
* data grid style ([c76d068](https://github.com/hatiolab/operato/commit/c76d068bf582774c69431ce10f36c087cdb49c3f))
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
## [7.0.0-rc.2](https://github.com/hatiolab/operato/compare/v7.0.0-rc.1...v7.0.0-rc.2) (2024-06-22)
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
### :bug: Bug Fix
|
|
63
|
+
|
|
64
|
+
* styles using material-design token ([e6cbe59](https://github.com/hatiolab/operato/commit/e6cbe5941fec36048c4da1882bcc98067b0ec5ac))
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
6
68
|
## [7.0.0-rc.0](https://github.com/hatiolab/operato/compare/v2.0.0-beta.35...v7.0.0-rc.0) (2024-06-21)
|
|
7
69
|
|
|
8
70
|
|
|
@@ -25,6 +25,11 @@ export const CommonGristStyles = css `
|
|
|
25
25
|
padding: 0;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
#modes {
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: var(--spacing-small);
|
|
31
|
+
}
|
|
32
|
+
|
|
28
33
|
#sorters md-icon,
|
|
29
34
|
#modes md-icon {
|
|
30
35
|
--md-icon-size: var(--icon-size-small);
|
|
@@ -32,7 +37,7 @@ export const CommonGristStyles = css `
|
|
|
32
37
|
|
|
33
38
|
[slot='setting'] {
|
|
34
39
|
position: absolute;
|
|
35
|
-
top: -
|
|
40
|
+
top: -3px;
|
|
36
41
|
right: 0;
|
|
37
42
|
}
|
|
38
43
|
|
|
@@ -64,9 +69,9 @@ export const CommonGristStyles = css `
|
|
|
64
69
|
|
|
65
70
|
#modes > md-icon[active] {
|
|
66
71
|
border-radius: 9px;
|
|
67
|
-
background-color: var(--md-sys-color-
|
|
72
|
+
background-color: var(--md-sys-color-surface-variant);
|
|
68
73
|
opacity: 1;
|
|
69
|
-
color: var(--md-sys-color-
|
|
74
|
+
color: var(--md-sys-color-primary);
|
|
70
75
|
cursor: default;
|
|
71
76
|
}
|
|
72
77
|
|
|
@@ -85,8 +90,8 @@ export const CommonGristStyles = css `
|
|
|
85
90
|
justify-content: center;
|
|
86
91
|
gap: 0px 10px;
|
|
87
92
|
|
|
88
|
-
background-color: var(--md-sys-color-
|
|
89
|
-
color: var(--md-sys-color-on-
|
|
93
|
+
background-color: var(--md-sys-color-tertiary);
|
|
94
|
+
color: var(--md-sys-color-on-tertiary);
|
|
90
95
|
border: 0;
|
|
91
96
|
border-radius: 50%;
|
|
92
97
|
padding: 5px;
|
|
@@ -96,8 +101,8 @@ export const CommonGristStyles = css `
|
|
|
96
101
|
}
|
|
97
102
|
|
|
98
103
|
#add button:hover {
|
|
99
|
-
background-color: var(--md-sys-color-
|
|
100
|
-
color: var(--md-sys-color-primary
|
|
104
|
+
background-color: var(--md-sys-color-surface-tint);
|
|
105
|
+
color: var(--md-sys-color-on-primary);
|
|
101
106
|
box-shadow: var(--box-shadow);
|
|
102
107
|
}
|
|
103
108
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../src/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"common-grist-styles.js","sourceRoot":"","sources":["../../src/common-grist-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0InC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonGristStyles = css`\n :host {\n display: flex;\n\n width: 100%;\n }\n\n ox-grist {\n flex: 1;\n overflow-y: auto;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n gap: 0 10px;\n align-items: center;\n padding: var(--spacing-small) var(--spacing-medium);\n\n --md-icon-size: var(--icon-size-medium);\n }\n\n [slot='headroom']:empty {\n padding: 0;\n }\n\n #modes {\n display: flex;\n gap: var(--spacing-small);\n }\n\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: var(--icon-size-small);\n }\n\n [slot='setting'] {\n position: absolute;\n top: -3px;\n right: 0;\n }\n\n #sorters {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n margin-left: auto;\n margin-right: var(--spacing-small);\n padding-left: var(--spacing-tiny);\n border-bottom: var(--md-sys-color-outline);\n position: relative;\n color: var(--md-sys-color-on-secondary-container);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--spacing-tiny);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--spacing-tiny);\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: var(--md-sys-color-surface-variant);\n opacity: 1;\n color: var(--md-sys-color-primary);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n #add {\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0px 10px;\n\n background-color: var(--md-sys-color-tertiary);\n color: var(--md-sys-color-on-tertiary);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--md-sys-color-surface-tint);\n color: var(--md-sys-color-on-primary);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n }\n\n #filters {\n flex: 1;\n\n display: flex;\n align-items: center;\n }\n\n #filters > * {\n margin-right: var(--spacing-small);\n }\n\n @media only screen and (max-width: 460px) {\n [slot='headroom'] {\n box-shadow: var(--box-shadow);\n padding: 0;\n }\n\n #modes {\n display: none;\n }\n\n #add {\n position: absolute;\n top: 10px;\n right: 10px;\n }\n }\n`\n"]}
|
|
@@ -24,9 +24,9 @@ export const CommonHeaderStyles = css `
|
|
|
24
24
|
|
|
25
25
|
.filters {
|
|
26
26
|
grid-area: filters;
|
|
27
|
-
border:
|
|
27
|
+
border: none;
|
|
28
28
|
border-radius: var(--md-sys-shape-corner-small, 5px);
|
|
29
|
-
background-color: var(--md-sys-color-surface
|
|
29
|
+
background-color: var(--md-sys-color-surface);
|
|
30
30
|
padding: var(--spacing-medium) var(--spacing-large);
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: row;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonHeaderStyles = css`\n .header {\n display: grid;\n grid-template-areas:\n 'title actions'\n 'filters filters';\n gap: var(--spacing-small) var(--spacing-medium);\n padding: calc(var(--spacing-medium) / 2) var(--spacing-medium);\n\n align-items: center;\n\n .title {\n grid-area: title;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n\n font: var(--subtitle-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border:
|
|
1
|
+
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const CommonHeaderStyles = css`\n .header {\n display: grid;\n grid-template-areas:\n 'title actions'\n 'filters filters';\n gap: var(--spacing-small) var(--spacing-medium);\n padding: calc(var(--spacing-medium) / 2) var(--spacing-medium);\n\n align-items: center;\n\n .title {\n grid-area: title;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n\n font: var(--subtitle-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border: none;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-medium) var(--spacing-large);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-large);\n\n .filter {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n label {\n font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--fontsize-default) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n }\n\n .filters:empty {\n display: none;\n }\n\n .actions {\n grid-area: actions;\n margin-left: auto;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: var(--spacing-small);\n\n * {\n cursor: pointer;\n }\n\n .textbtn,\n .iconbtn {\n background-color: var(--md-sys-color-secondary-container);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n\n color: var(--md-sys-color-on-secondary-container);\n font: var(--button-font);\n\n &:hover {\n border: var(--button-activ-border);\n background-color: var(--button-activ-background-color);\n box-shadow: var(--button-active-box-shadow);\n\n color: var(--md-sys-color-on-secondary);\n }\n }\n\n .iconbtn {\n padding: var(--spacing-tiny);\n line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n @media only screen and (max-width: 460px) {\n .header {\n padding: 0;\n gap: 0;\n\n grid-template-areas:\n 'actions'\n 'filters';\n\n .title {\n display: none;\n }\n\n .filters {\n flex-wrap: wrap;\n gap: var(--spacing-medium);\n border: none;\n }\n\n .actions {\n background-color: var(--md-sys-color-on-secondary-container);\n margin: 0;\n }\n }\n }\n`\n"]}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export * from './headroom-styles';
|
|
2
2
|
export * from './scrollbar-styles';
|
|
3
3
|
export * from './spinner-styles';
|
|
4
|
-
export * from './tooltip-styles';
|
|
5
4
|
export * from './common-button-styles';
|
|
6
5
|
export * from './common-grist-styles';
|
|
7
6
|
export * from './button-container-styles';
|
package/dist/src/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export * from './headroom-styles';
|
|
2
2
|
export * from './scrollbar-styles';
|
|
3
3
|
export * from './spinner-styles';
|
|
4
|
-
export * from './tooltip-styles';
|
|
5
4
|
export * from './common-button-styles';
|
|
6
5
|
export * from './common-grist-styles';
|
|
7
6
|
export * from './button-container-styles';
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './headroom-styles'\nexport * from './scrollbar-styles'\nexport * from './spinner-styles'\nexport * from './common-button-styles'\nexport * from './common-grist-styles'\nexport * from './button-container-styles'\nexport * from './common-header-styles'\n"]}
|
|
@@ -3,12 +3,7 @@ import { TemplateResult } from 'lit';
|
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
5
|
component: string;
|
|
6
|
-
argTypes: {
|
|
7
|
-
theme: {
|
|
8
|
-
control: string;
|
|
9
|
-
options: string[];
|
|
10
|
-
};
|
|
11
|
-
};
|
|
6
|
+
argTypes: {};
|
|
12
7
|
};
|
|
13
8
|
export default _default;
|
|
14
9
|
interface Story<T> {
|
|
@@ -17,6 +12,5 @@ interface Story<T> {
|
|
|
17
12
|
argTypes?: Record<string, unknown>;
|
|
18
13
|
}
|
|
19
14
|
interface ArgTypes {
|
|
20
|
-
theme?: 'light' | 'dark';
|
|
21
15
|
}
|
|
22
16
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -5,11 +5,9 @@ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typesca
|
|
|
5
5
|
export default {
|
|
6
6
|
title: 'button-container-styles-pure',
|
|
7
7
|
component: 'div',
|
|
8
|
-
argTypes: {
|
|
9
|
-
theme: { control: 'select', options: ['light', 'dark'] }
|
|
10
|
-
}
|
|
8
|
+
argTypes: {}
|
|
11
9
|
};
|
|
12
|
-
const Template = ({
|
|
10
|
+
const Template = ({}) => html `
|
|
13
11
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
14
12
|
|
|
15
13
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
@@ -29,10 +27,6 @@ const Template = ({ theme = 'light' }) => html `
|
|
|
29
27
|
rel="stylesheet"
|
|
30
28
|
/>
|
|
31
29
|
|
|
32
|
-
<script>
|
|
33
|
-
document.body.classList.add('${theme}')
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
30
|
<style>
|
|
37
31
|
body {
|
|
38
32
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-container-styles.stories.js","sourceRoot":"","sources":["../../stories/button-container-styles.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE
|
|
1
|
+
{"version":3,"file":"button-container-styles.stories.js","sourceRoot":"","sources":["../../stories/button-container-styles.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyClD,iBAAiB,CAAC,OAAO;MACzB,qBAAqB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBlC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport { ButtonContainerStyles } from '../src/button-container-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'button-container-styles-pure',\n component: 'div',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n width: 100%;\n height: 500px;\n text-align: center;\n\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n .container {\n padding: var(--spacing-medium);\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n ${MDTypeScaleStyles.cssText}\n ${ButtonContainerStyles.cssText}\n </style>\n\n <div class=\"container md-typescale-body-medium\">\n <div class=\"button-container\" style=\"background-color: white;\">\n <button raised><md-icon>save</md-icon>save</button>\n <button outlined><md-icon>launch</md-icon>remove</button>\n <button danger><md-icon>delete</md-icon>delete</button>\n </div>\n\n <div class=\"button-container\" style=\"background-color: white;\">\n <button danger><md-icon>cancel</md-icon>cancel</button>\n <button><md-icon>done</md-icon>confirm</button>\n </div>\n\n <div class=\"button-container\" style=\"background-color: white;margin-left: unset;\">\n <button danger><md-icon>restart_alt</md-icon>reset</button>\n <div filler></div>\n <button danger><md-icon>cancel</md-icon>cancel</button>\n <button><md-icon>done</md-icon>confirm</button>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|
|
@@ -8,10 +8,6 @@ declare const _default: {
|
|
|
8
8
|
label: {
|
|
9
9
|
control: string;
|
|
10
10
|
};
|
|
11
|
-
theme: {
|
|
12
|
-
control: string;
|
|
13
|
-
options: string[];
|
|
14
|
-
};
|
|
15
11
|
};
|
|
16
12
|
};
|
|
17
13
|
export default _default;
|
|
@@ -22,6 +18,5 @@ interface Story<T> {
|
|
|
22
18
|
}
|
|
23
19
|
interface ArgTypes {
|
|
24
20
|
label?: string;
|
|
25
|
-
theme?: 'light' | 'dark';
|
|
26
21
|
}
|
|
27
22
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -7,11 +7,10 @@ export default {
|
|
|
7
7
|
title: 'common-header-styles-actions',
|
|
8
8
|
component: 'div',
|
|
9
9
|
argTypes: {
|
|
10
|
-
label: { control: 'string' }
|
|
11
|
-
theme: { control: 'select', options: ['light', 'dark'] }
|
|
10
|
+
label: { control: 'string' }
|
|
12
11
|
}
|
|
13
12
|
};
|
|
14
|
-
const Template = ({ label = ''
|
|
13
|
+
const Template = ({ label = '' }) => html `
|
|
15
14
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
16
15
|
|
|
17
16
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
@@ -31,10 +30,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
|
|
|
31
30
|
rel="stylesheet"
|
|
32
31
|
/>
|
|
33
32
|
|
|
34
|
-
<script>
|
|
35
|
-
document.body.classList.add('${theme}')
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
33
|
<style>
|
|
39
34
|
body {
|
|
40
35
|
width: 100%;
|
|
@@ -94,7 +89,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
|
|
|
94
89
|
],
|
|
95
90
|
toolbar: false
|
|
96
91
|
}}
|
|
97
|
-
}
|
|
98
92
|
>
|
|
99
93
|
</ox-context-page-toolbar>
|
|
100
94
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-header-styles-actions.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-actions.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,6CAA6C,CAAA;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"common-header-styles-actions.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-actions.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,6CAA6C,CAAA;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwC9D,iBAAiB,CAAC,OAAO;MACzB,kBAAkB,CAAC,OAAO;;;;;2BAKL,KAAK;;;;;;mBAMb;IACT,UAAU,EAAE;IACV,0CAA0C;IAC1C,sCAAsC;KACvC;IACD,UAAU,EAAE;IACV,yCAAyC;KAC1C;IACD,OAAO,EAAE;QACP;YACE,KAAK,EAAE,MAAM;YACb,0CAA0C;YAC1C,IAAI,EAAE,MAAM;SACb;QACD;YACE,KAAK,EAAE,MAAM;YACb,wCAAwC;YACxC,IAAI,EAAE,cAAc;SACrB;QACD;YACE,KAAK,EAAE,QAAQ;YACf,0CAA0C;YAC1C,IAAI,EAAE,QAAQ;SACf;KACF;IACD,OAAO,EAAE,KAAK;CACf;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/context/ox-context-page-toolbar.js'\n\nimport { CommonHeaderStyles } from '../src/common-header-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'common-header-styles-actions',\n component: 'div',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n .container {\n padding: var(--spacing-medium);\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n display: flex;\n flex-direction: column;\n gap: var(--spacing-medium);\n }\n\n ${MDTypeScaleStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div class=\"container md-typescale-body-medium\">\n <div class=\"header\">\n <div class=\"title\">${label}</div>\n\n <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n <ox-context-page-toolbar\n class=\"actions\"\n .context=${{\n exportable: {\n // name: i18next.t('title.data-set list'),\n // data: this.exportHandler.bind(this)\n },\n importable: {\n // handler: this.importHandler.bind(this)\n },\n actions: [\n {\n title: 'save',\n // action: this._updateDataSet.bind(this),\n icon: 'save'\n },\n {\n title: 'copy',\n // action: this._copyDataSet.bind(this),\n icon: 'content_copy'\n },\n {\n title: 'delete',\n // action: this._deleteDataSet.bind(this),\n icon: 'delete'\n }\n ],\n toolbar: false\n }}\n >\n </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
|
|
@@ -7,10 +7,6 @@ declare const _default: {
|
|
|
7
7
|
label: {
|
|
8
8
|
control: string;
|
|
9
9
|
};
|
|
10
|
-
theme: {
|
|
11
|
-
control: string;
|
|
12
|
-
options: string[];
|
|
13
|
-
};
|
|
14
10
|
};
|
|
15
11
|
};
|
|
16
12
|
export default _default;
|
|
@@ -21,6 +17,5 @@ interface Story<T> {
|
|
|
21
17
|
}
|
|
22
18
|
interface ArgTypes {
|
|
23
19
|
label?: string;
|
|
24
|
-
theme?: 'light' | 'dark';
|
|
25
20
|
}
|
|
26
21
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -6,11 +6,10 @@ export default {
|
|
|
6
6
|
title: 'common-header-styles-pure',
|
|
7
7
|
component: 'div',
|
|
8
8
|
argTypes: {
|
|
9
|
-
label: { control: 'string' }
|
|
10
|
-
theme: { control: 'select', options: ['light', 'dark'] }
|
|
9
|
+
label: { control: 'string' }
|
|
11
10
|
}
|
|
12
11
|
};
|
|
13
|
-
const Template = ({ label = ''
|
|
12
|
+
const Template = ({ label = '' }) => html `
|
|
14
13
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
15
14
|
|
|
16
15
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
@@ -30,10 +29,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
|
|
|
30
29
|
rel="stylesheet"
|
|
31
30
|
/>
|
|
32
31
|
|
|
33
|
-
<script>
|
|
34
|
-
document.body.classList.add('${theme}')
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
32
|
<style>
|
|
38
33
|
body {
|
|
39
34
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-header-styles-pure.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-pure.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"common-header-styles-pure.stories.js","sourceRoot":"","sources":["../../stories/common-header-styles-pure.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwC9D,iBAAiB,CAAC,OAAO;MACzB,kBAAkB,CAAC,OAAO;;;;;2BAKL,KAAK;;;;;;;;;;;;;;;CAe/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport { CommonHeaderStyles } from '../src/common-header-styles.js'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'common-header-styles-pure',\n component: 'div',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n .container {\n padding: var(--spacing-medium);\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n ${MDTypeScaleStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div class=\"container md-typescale-body-medium\">\n <div class=\"header\">\n <div class=\"title\">${label}</div>\n\n <div class=\"filters\">\n <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n <div class=\"filter\"><label>Filter</label><input type=\"text\" /></div>\n </div>\n\n <div class=\"actions\">\n <div class=\"textbtn\">Action</div>\n <div class=\"iconbtn\"><md-icon>save</md-icon></div>\n <div class=\"iconbtn\"><md-icon>delete</md-icon></div>\n </div>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
|