march-ui 0.0.1 → 0.0.2
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/README.md +13 -11
- package/Tab/index.d.ts +3 -0
- package/Tab/index.jsx +13 -0
- package/Tabs/colors.css +54 -0
- package/Tabs/index.css +36 -0
- package/Tabs/index.d.ts +3 -0
- package/Tabs/index.jsx +35 -0
- package/UI/colors.css +27 -5
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ const App = () => {
|
|
|
65
65
|
m.mount(document.getElementById('app'), App)
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
Transpile `index.
|
|
68
|
+
Transpile `index.jsx` into `dist/index.js` and `dist/index.css` files,
|
|
69
69
|
for example, using `esbuild`:
|
|
70
70
|
|
|
71
71
|
```sh
|
|
@@ -77,16 +77,18 @@ Now open `index.html` in your favorite browser.
|
|
|
77
77
|
|
|
78
78
|
## Components
|
|
79
79
|
|
|
80
|
-
- UI
|
|
81
|
-
- Icon
|
|
82
|
-
- Button
|
|
83
|
-
- TextField
|
|
84
|
-
- ContextMenu
|
|
85
|
-
- MenuItem
|
|
86
|
-
- Splitter
|
|
87
|
-
- ThemeToggler
|
|
88
|
-
- Form
|
|
89
|
-
- Notice
|
|
80
|
+
- `UI`
|
|
81
|
+
- `Icon`
|
|
82
|
+
- `Button`
|
|
83
|
+
- `TextField`
|
|
84
|
+
- `ContextMenu`
|
|
85
|
+
- `MenuItem`
|
|
86
|
+
- `Splitter`
|
|
87
|
+
- `ThemeToggler`
|
|
88
|
+
- `Form`
|
|
89
|
+
- `Notice`
|
|
90
|
+
- `Tabs`
|
|
91
|
+
- `Tab`
|
|
90
92
|
|
|
91
93
|
## License
|
|
92
94
|
|
package/Tab/index.d.ts
ADDED
package/Tab/index.jsx
ADDED
package/Tabs/colors.css
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
html {
|
|
2
|
+
|
|
3
|
+
/* light theme */
|
|
4
|
+
|
|
5
|
+
--theme-light-tabs-background-color: hsl(0,0%,98%);
|
|
6
|
+
--theme-light-tabs-border-color: hsl(0,0%,80%);
|
|
7
|
+
--theme-light-tabs-active-background-color: hsl(0,0%,100%);
|
|
8
|
+
--theme-light-tabs-active-shadow-color: hsla(0,0%,0%,0.2);
|
|
9
|
+
--theme-light-tabs-active-text-color: var(--theme-light-accent-color);
|
|
10
|
+
|
|
11
|
+
/* dark theme */
|
|
12
|
+
|
|
13
|
+
--theme-dark-tabs-background-color: hsl(0,0%,16%);
|
|
14
|
+
--theme-dark-tabs-border-color: hsl(0,0%,25%);
|
|
15
|
+
--theme-dark-tabs-active-background-color: hsl(0,0%,9%);
|
|
16
|
+
--theme-dark-tabs-active-shadow-color: hsla(0,0%,0%,0.2);
|
|
17
|
+
--theme-dark-tabs-active-text-color: var(--theme-dark-accent-color);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.theme--light {
|
|
21
|
+
--tabs-background-color: var(--theme-light-tabs-background-color);
|
|
22
|
+
--tabs-border-color: var(--theme-light-tabs-border-color);
|
|
23
|
+
--tabs-active-background-color: var(--theme-light-tabs-active-background-color);
|
|
24
|
+
--tabs-active-shadow-color: var(--theme-light-tabs-active-shadow-color);
|
|
25
|
+
--tabs-active-text-color: var(--theme-light-tabs-active-text-color);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.theme--dark {
|
|
29
|
+
--tabs-background-color: var(--theme-dark-tabs-background-color);
|
|
30
|
+
--tabs-border-color: var(--theme-dark-tabs-border-color);
|
|
31
|
+
--tabs-active-background-color: var(--theme-dark-tabs-active-background-color);
|
|
32
|
+
--tabs-active-shadow-color: var(--theme-dark-tabs-active-shadow-color);
|
|
33
|
+
--tabs-active-text-color: var(--theme-dark-tabs-active-text-color);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (prefers-color-scheme: light) {
|
|
37
|
+
html {
|
|
38
|
+
--tabs-background-color: var(--theme-light-tabs-background-color);
|
|
39
|
+
--tabs-border-color: var(--theme-light-tabs-border-color);
|
|
40
|
+
--tabs-active-background-color: var(--theme-light-tabs-active-background-color);
|
|
41
|
+
--tabs-active-shadow-color: var(--theme-light-tabs-active-shadow-color);
|
|
42
|
+
--tabs-active-text-color: var(--theme-light-tabs-active-text-color);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media (prefers-color-scheme: dark) {
|
|
47
|
+
html {
|
|
48
|
+
--tabs-background-color: var(--theme-dark-tabs-background-color);
|
|
49
|
+
--tabs-border-color: var(--theme-dark-tabs-border-color);
|
|
50
|
+
--tabs-active-background-color: var(--theme-dark-tabs-active-background-color);
|
|
51
|
+
--tabs-active-shadow-color: var(--theme-dark-tabs-active-shadow-color);
|
|
52
|
+
--tabs-active-text-color: var(--theme-dark-tabs-active-text-color);
|
|
53
|
+
}
|
|
54
|
+
}
|
package/Tabs/index.css
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
.tabs__list {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: max-content;
|
|
4
|
+
flex-direction: row;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
padding: 0.25em;
|
|
7
|
+
border-radius: 0.25em;
|
|
8
|
+
background-color: var(--tabs-border-color);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.tabs__switch {
|
|
12
|
+
display: flex;
|
|
13
|
+
width: max-content;
|
|
14
|
+
flex-direction: row;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
border-radius: 0.25em;
|
|
17
|
+
user-select: none;
|
|
18
|
+
background-color: var(--tabs-background-color);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.tab__title {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-grow: 0;
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
padding: 0.25em 1em;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tab__title.tab__title--active {
|
|
30
|
+
position: relative;
|
|
31
|
+
cursor: default;
|
|
32
|
+
border-radius: 0.25em;
|
|
33
|
+
background-color: var(--tabs-active-background-color);
|
|
34
|
+
box-shadow: 0 0 0.5em var(--tabs-active-shadow-color);
|
|
35
|
+
color: var(--tabs-active-text-color);
|
|
36
|
+
}
|
package/Tabs/index.d.ts
ADDED
package/Tabs/index.jsx
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import './index.css'
|
|
2
|
+
import './colors.css'
|
|
3
|
+
import classNames from 'classnames'
|
|
4
|
+
|
|
5
|
+
const Tabs = ({ attrs }) => {
|
|
6
|
+
let { active } = attrs
|
|
7
|
+
return {
|
|
8
|
+
view({ children }) {
|
|
9
|
+
const tabs = children.filter(({ tag: { name } }) => name === 'Tab')
|
|
10
|
+
.map(tab => {
|
|
11
|
+
const { key, attrs: { title }, children: content } = tab
|
|
12
|
+
return { key, title, content }
|
|
13
|
+
})
|
|
14
|
+
const activeIndex = tabs.findIndex(({ key }) => key === active || active === undefined)
|
|
15
|
+
const classes = 'tabs'
|
|
16
|
+
return (
|
|
17
|
+
<div class={classes}>
|
|
18
|
+
<div class="tabs__list">
|
|
19
|
+
<div class="tabs__switch">
|
|
20
|
+
{tabs.map(({ key, title }, i) => {
|
|
21
|
+
return <div class={classNames('tab__title', {
|
|
22
|
+
'tab__title--active': i === activeIndex
|
|
23
|
+
})} onclick={() => { active = key }}>{title}</div>
|
|
24
|
+
})}
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
{activeIndex >= 0 &&
|
|
28
|
+
<div class="tabs__content">{tabs[activeIndex].content}</div>}
|
|
29
|
+
</div>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export default Tabs
|
package/UI/colors.css
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
html {
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
--accent-color-focused: hsl(266,100%,63%);
|
|
5
|
-
--accent-darken-color: hsl(266,65%,45%);
|
|
6
|
-
--accent-darken-color-focused: hsl(266,70%,50%);
|
|
7
|
-
|
|
3
|
+
|
|
8
4
|
--error-color: hsl(0,79%,50%);
|
|
9
5
|
--error-color-focused: hsl(0,79%,57%);
|
|
10
6
|
--warning-color: hsl(41,100%,50%);
|
|
@@ -14,6 +10,11 @@ html {
|
|
|
14
10
|
|
|
15
11
|
/* light theme */
|
|
16
12
|
|
|
13
|
+
--theme-light-accent-color: hsl(266,100%,58%);
|
|
14
|
+
--theme-light-accent-color-focused: hsl(266,100%,63%);
|
|
15
|
+
--theme-light-accent-darken-color: hsl(266,65%,45%);
|
|
16
|
+
--theme-light-accent-darken-color-focused: hsl(266,70%,50%);
|
|
17
|
+
|
|
17
18
|
--theme-light-color: hsl(0,0%,100%);
|
|
18
19
|
--theme-light-foreground-color: hsl(0,0%,0%);
|
|
19
20
|
--theme-light-background-color: hsl(0,0%,100%);
|
|
@@ -21,6 +22,11 @@ html {
|
|
|
21
22
|
|
|
22
23
|
/* dark theme */
|
|
23
24
|
|
|
25
|
+
--theme-dark-accent-color: hsl(266,75%,62%);
|
|
26
|
+
--theme-dark-accent-color-focused: hsl(266,100%,63%);
|
|
27
|
+
--theme-dark-accent-darken-color: hsl(266,65%,45%);
|
|
28
|
+
--theme-dark-accent-darken-color-focused: hsl(266,70%,50%);
|
|
29
|
+
|
|
24
30
|
--theme-dark-color: hsl(0,0%,0%);
|
|
25
31
|
--theme-dark-foreground-color: hsl(0,0%,100%);
|
|
26
32
|
--theme-dark-background-color: hsl(0,0%,12%);
|
|
@@ -61,6 +67,10 @@ a:hover, a:focus {
|
|
|
61
67
|
}
|
|
62
68
|
|
|
63
69
|
.theme--light {
|
|
70
|
+
--accent-color: var(--theme-light-accent-color);
|
|
71
|
+
--accent-color-focused: var(--theme-light-accent-color-focused);
|
|
72
|
+
--accent-darken-color: var(--theme-light-accent-darken-color);
|
|
73
|
+
--accent-darken-color-focused: var(--theme-light-accent-darken-color-focused);
|
|
64
74
|
--theme-color: var(--theme-light-color);
|
|
65
75
|
--foreground-color: var(--theme-light-foreground-color);
|
|
66
76
|
--background-color: var(--theme-light-background-color);
|
|
@@ -68,6 +78,10 @@ a:hover, a:focus {
|
|
|
68
78
|
}
|
|
69
79
|
|
|
70
80
|
.theme--dark {
|
|
81
|
+
--accent-color: var(--theme-dark-accent-color);
|
|
82
|
+
--accent-color-focused: var(--theme-dark-accent-color-focused);
|
|
83
|
+
--accent-darken-color: var(--theme-dark-accent-darken-color);
|
|
84
|
+
--accent-darken-color-focused: var(--theme-dark-accent-darken-color-focused);
|
|
71
85
|
--theme-color: var(--theme-dark-color);
|
|
72
86
|
--foreground-color: var(--theme-dark-foreground-color);
|
|
73
87
|
--background-color: var(--theme-dark-background-color);
|
|
@@ -76,6 +90,10 @@ a:hover, a:focus {
|
|
|
76
90
|
|
|
77
91
|
@media (prefers-color-scheme: light) {
|
|
78
92
|
html {
|
|
93
|
+
--accent-color: var(--theme-light-accent-color);
|
|
94
|
+
--accent-color-focused: var(--theme-light-accent-color-focused);
|
|
95
|
+
--accent-darken-color: var(--theme-light-accent-darken-color);
|
|
96
|
+
--accent-darken-color-focused: var(--theme-light-accent-darken-color-focused);
|
|
79
97
|
--theme-color: var(--theme-light-color);
|
|
80
98
|
--foreground-color: var(--theme-light-foreground-color);
|
|
81
99
|
--background-color: var(--theme-light-background-color);
|
|
@@ -85,6 +103,10 @@ a:hover, a:focus {
|
|
|
85
103
|
|
|
86
104
|
@media (prefers-color-scheme: dark) {
|
|
87
105
|
html {
|
|
106
|
+
--accent-color: var(--theme-dark-accent-color);
|
|
107
|
+
--accent-color-focused: var(--theme-dark-accent-color-focused);
|
|
108
|
+
--accent-darken-color: var(--theme-dark-accent-darken-color);
|
|
109
|
+
--accent-darken-color-focused: var(--theme-dark-accent-darken-color-focused);
|
|
88
110
|
--theme-color: var(--theme-dark-color);
|
|
89
111
|
--foreground-color: var(--theme-dark-foreground-color);
|
|
90
112
|
--background-color: var(--theme-dark-background-color);
|
package/index.d.ts
CHANGED
|
@@ -8,4 +8,6 @@ export type { Notice } from './Notice/index.d.ts'
|
|
|
8
8
|
export type { Splitter } from './Splitter/index.d.ts'
|
|
9
9
|
export type { TextField } from './TextField/index.d.ts'
|
|
10
10
|
export type { ThemeToggler } from './ThemeToggler/index.d.ts'
|
|
11
|
+
export type { Tab } from './Tab/index.d.ts'
|
|
12
|
+
export type { Tabs } from './Tabs/index.d.ts'
|
|
11
13
|
export type { UI } from './UI/index.d.ts'
|
package/index.js
CHANGED
|
@@ -9,3 +9,5 @@ export { default as Notice } from './Notice'
|
|
|
9
9
|
export { default as Splitter } from './Splitter'
|
|
10
10
|
export { default as TextField } from './TextField'
|
|
11
11
|
export { default as ThemeToggler } from './ThemeToggler'
|
|
12
|
+
export { default as Tab } from './Tab'
|
|
13
|
+
export { default as Tabs } from './Tabs'
|