@symbo.ls/datepicker 0.0.1
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/package.json +7 -0
- package/packages/react/index.js +1 -0
- package/packages/react/package.json +7 -0
- package/src/index.js +115 -0
- package/src/style.js +100 -0
package/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'use strict'
|
package/src/index.js
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
import style from './style'
|
|
4
|
+
|
|
5
|
+
import Icon from '../../icon/src'
|
|
6
|
+
import Shape from '../../shape/src'
|
|
7
|
+
import { Block } from '../Block'
|
|
8
|
+
|
|
9
|
+
export const DatePicker = {
|
|
10
|
+
style,
|
|
11
|
+
|
|
12
|
+
proto: [Shape, Block],
|
|
13
|
+
props: {
|
|
14
|
+
theme: 'lightDark',
|
|
15
|
+
padding: 'A',
|
|
16
|
+
round: 'Z',
|
|
17
|
+
depth: 16
|
|
18
|
+
},
|
|
19
|
+
|
|
20
|
+
aside: {
|
|
21
|
+
childProto: { tag: 'button' },
|
|
22
|
+
...[
|
|
23
|
+
{ text: '2020' },
|
|
24
|
+
{ text: '2021' },
|
|
25
|
+
{ text: '2022' },
|
|
26
|
+
{ text: '2023' },
|
|
27
|
+
{ text: '2024' },
|
|
28
|
+
{ text: '2025' },
|
|
29
|
+
{ text: '2026' },
|
|
30
|
+
{ text: '2026' },
|
|
31
|
+
{ text: '2026' }
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
main: {
|
|
36
|
+
header: {
|
|
37
|
+
icon: {
|
|
38
|
+
proto: Icon,
|
|
39
|
+
props: { icon: 'arrowMediumLeft' }
|
|
40
|
+
},
|
|
41
|
+
month: {
|
|
42
|
+
childProto: { tag: 'span' },
|
|
43
|
+
...[
|
|
44
|
+
{ text: 'january' },
|
|
45
|
+
{ text: 'february' },
|
|
46
|
+
{ text: 'march' },
|
|
47
|
+
{ text: 'april' },
|
|
48
|
+
{ text: 'may' },
|
|
49
|
+
{ text: 'june' },
|
|
50
|
+
{ text: 'july' },
|
|
51
|
+
{ text: 'august' },
|
|
52
|
+
{ text: 'september' },
|
|
53
|
+
{ text: 'october' },
|
|
54
|
+
{ text: 'november' },
|
|
55
|
+
{ text: 'december' }
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
icon2: {
|
|
59
|
+
proto: Icon,
|
|
60
|
+
props: { icon: 'arrowMediumRight' }
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
days: {
|
|
64
|
+
tag: 'section',
|
|
65
|
+
header: {
|
|
66
|
+
childProto: { tag: 'span' },
|
|
67
|
+
...[
|
|
68
|
+
{ text: 'Mo' },
|
|
69
|
+
{ text: 'Tu' },
|
|
70
|
+
{ text: 'We' },
|
|
71
|
+
{ text: 'Th' },
|
|
72
|
+
{ text: 'Fr' },
|
|
73
|
+
{ text: 'Sa' },
|
|
74
|
+
{ text: 'Su' }
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
content: {
|
|
78
|
+
childProto: { tag: 'button' },
|
|
79
|
+
...[
|
|
80
|
+
{ text: '1' },
|
|
81
|
+
{ text: '2' },
|
|
82
|
+
{ text: '3' },
|
|
83
|
+
{ text: '4' },
|
|
84
|
+
{ text: '5' },
|
|
85
|
+
{ text: '6' },
|
|
86
|
+
{ text: '7' },
|
|
87
|
+
{ text: '8' },
|
|
88
|
+
{ text: '9' },
|
|
89
|
+
{ text: '10' },
|
|
90
|
+
{ text: '11' },
|
|
91
|
+
{ text: '12' },
|
|
92
|
+
{ text: '13' },
|
|
93
|
+
{ text: '14' },
|
|
94
|
+
{ text: '15' },
|
|
95
|
+
{ text: '16' },
|
|
96
|
+
{ text: '17' },
|
|
97
|
+
{ text: '18' },
|
|
98
|
+
{ text: '19' },
|
|
99
|
+
{ text: '20' },
|
|
100
|
+
{ text: '21' },
|
|
101
|
+
{ text: '22' },
|
|
102
|
+
{ text: '23' },
|
|
103
|
+
{ text: '24' },
|
|
104
|
+
{ text: '25' },
|
|
105
|
+
{ text: '26' },
|
|
106
|
+
{ text: '27' },
|
|
107
|
+
{ text: '28' },
|
|
108
|
+
{ text: '29' },
|
|
109
|
+
{ text: '30' },
|
|
110
|
+
{ text: '31' }
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
package/src/style.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
maxWidth: `${336 / 16}em`,
|
|
5
|
+
maxHeight: `${260 / 16}em`,
|
|
6
|
+
display: 'flex',
|
|
7
|
+
padding: '0 1em',
|
|
8
|
+
boxSizing: 'border-box',
|
|
9
|
+
borderRadius: '10px',
|
|
10
|
+
button: {
|
|
11
|
+
border: 'none',
|
|
12
|
+
outline: 'none',
|
|
13
|
+
background: 'transparent',
|
|
14
|
+
cursor: 'pointer'
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
aside: {
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column',
|
|
20
|
+
overflowX: 'auto',
|
|
21
|
+
paddingRight: `${10 / 16}em`,
|
|
22
|
+
|
|
23
|
+
button: {
|
|
24
|
+
opacity: 0.5,
|
|
25
|
+
marginBottom: `${22 / 12}em`
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
main: {
|
|
30
|
+
flex: 1,
|
|
31
|
+
paddingTop: `${14 / 16}em`,
|
|
32
|
+
paddingBottom: `${10 / 16}em`,
|
|
33
|
+
overflow: 'hidden',
|
|
34
|
+
|
|
35
|
+
display: 'flex',
|
|
36
|
+
flexDirection: 'column',
|
|
37
|
+
|
|
38
|
+
'> header': {
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
height: 'auto',
|
|
42
|
+
overflow: 'hidden',
|
|
43
|
+
width: '100%',
|
|
44
|
+
padding: `0 ${8 / 16}em ${14 / 16}em ${8 / 16}em`,
|
|
45
|
+
boxSizing: 'border-box'
|
|
46
|
+
},
|
|
47
|
+
'> header > svg': {
|
|
48
|
+
cursor: 'pointer'
|
|
49
|
+
},
|
|
50
|
+
|
|
51
|
+
'> header > div': {
|
|
52
|
+
display: 'flex',
|
|
53
|
+
overflow: 'hidden',
|
|
54
|
+
flex: 1
|
|
55
|
+
},
|
|
56
|
+
'> header span': {
|
|
57
|
+
minWidth: '100%',
|
|
58
|
+
textTransform: 'capitalize',
|
|
59
|
+
textAlign: 'center',
|
|
60
|
+
fontWeight: 'bold'
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
section: {
|
|
64
|
+
flex: 1,
|
|
65
|
+
display: 'flex',
|
|
66
|
+
flexDirection: 'column'
|
|
67
|
+
},
|
|
68
|
+
'section > header': {
|
|
69
|
+
height: 'auto',
|
|
70
|
+
display: 'grid',
|
|
71
|
+
gridTemplateColumns: 'repeat(7, 1fr)',
|
|
72
|
+
gap: '6px',
|
|
73
|
+
paddingBottom: `${2 / 16}em`
|
|
74
|
+
},
|
|
75
|
+
'section > header span': {
|
|
76
|
+
textAlign: 'center',
|
|
77
|
+
fontWeight: 'bold'
|
|
78
|
+
},
|
|
79
|
+
'section > header span:nth-child(6)': {
|
|
80
|
+
opacity: 0.5
|
|
81
|
+
},
|
|
82
|
+
'section > header span:nth-child(7)': {
|
|
83
|
+
opacity: 0.5
|
|
84
|
+
},
|
|
85
|
+
'section > div': {
|
|
86
|
+
flex: 1,
|
|
87
|
+
display: 'grid',
|
|
88
|
+
gridTemplateColumns: 'repeat(7, 1fr)',
|
|
89
|
+
gap: '6px'
|
|
90
|
+
},
|
|
91
|
+
'section > div button': {
|
|
92
|
+
},
|
|
93
|
+
'section > div button:nth-child(7n)': {
|
|
94
|
+
opacity: 0.5
|
|
95
|
+
},
|
|
96
|
+
'section > div button:nth-child(7n - 1)': {
|
|
97
|
+
opacity: 0.5
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|