Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit ae854f4

Browse files
codebender828codebender828
committed
feat(props): enabled filtering for undefined
1 parent da5ccb2 commit ae854f4

File tree

3 files changed

+94
-249
lines changed

3 files changed

+94
-249
lines changed

‎src/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
<h1>{{ state.count }}</h1>
77
<br>
88
<Box
9-
:w="['auto']"
9+
:w="['auto', '50%']"
1010
px="5"
1111
py="5"
1212
shadow="lg"
1313
my="5"
1414
mb="5"
1515
rounded="sm"
16-
background-color="yellow.200"
17-
color="yellow.700"
16+
background-color="blue.200"
17+
color="blue.700"
1818
>
1919
This is the new box component
2020
</Box>

‎src/components/Box/index.js‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'vue-styled-components'
2-
import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system'
2+
import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system'
33
import { baseBoxProps } from './props'
44
import styledConfig from './config'
55

@@ -35,19 +35,8 @@ const clamp = props => {
3535
}
3636
}
3737

38-
// TODO: Implement Ripple (For Button)
39-
40-
/**
41-
* Note: All styled components in vue-styled-components forward all their props.
42-
* If the prop is not registered in the child, it is then it is bound as a native
43-
* HTML attribute
44-
* @see https://github.com/styled-components/vue-styled-components#passed-props
45-
* TODO: Will need to revisit this for Image component.
46-
*/
47-
const Box = styled('div', {
48-
...baseBoxProps
49-
50-
})(
38+
// Compose @style-system style functions
39+
const system = compose(
5140
layout,
5241
color,
5342
space,
@@ -64,4 +53,34 @@ const Box = styled('div', {
6453
clamp
6554
)
6655

56+
/**
57+
* @description Clears out all undefined props that are undefined from the props object
58+
* @param {Object} props
59+
* @returns {Object} Sanitized props object with defined values.
60+
*/
61+
function cleanProps (props) {
62+
for (const prop in props) {
63+
if (/* props[prop] === null|| */ props[prop] === undefined) {
64+
delete props[prop]
65+
}
66+
}
67+
return props
68+
}
69+
70+
/**
71+
* Note: All styled components in vue-styled-components forward all their props.
72+
* If the prop is not registered in the child, it is then it is bound as a native
73+
* HTML attribute
74+
* @see https://github.com/styled-components/vue-styled-components#passed-props
75+
* TODO: Will need to revisit this for Image component.
76+
*/
77+
const Box = styled('div', {
78+
...baseBoxProps
79+
})`
80+
${props => {
81+
const sanitizedProps = cleanProps(props)
82+
return system(sanitizedProps)
83+
}}
84+
`
85+
6786
export default Box

‎src/components/Box/props.js‎

Lines changed: 58 additions & 232 deletions
Original file line numberDiff line numberDiff line change
@@ -1,244 +1,70 @@
11
export const baseBoxProps = {
2-
color: {
3-
type: String,
4-
default: 'inherit'
5-
},
6-
w: {
7-
type: [Number, String, Array],
8-
default: 'auto'
9-
},
10-
minW: {
11-
type: [String, Array],
12-
default: 'auto'
13-
},
14-
maxW: {
15-
type: [String, Array],
16-
default: 'auto'
17-
},
18-
h: {
19-
type: [Number, String, Array],
20-
default: 'auto'
21-
},
22-
minH: {
23-
type: [String, Array],
24-
default: 'auto'
25-
},
26-
maxH: {
27-
type: [String, Array],
28-
default: 'auto'
29-
},
30-
d: {
31-
type: [String, Array],
32-
default: 'block'
33-
},
34-
lineClamp: {
35-
type: [String, Number, Array],
36-
default: 0
37-
},
38-
truncate: {
39-
type: [Boolean, Number],
40-
default: false
41-
},
42-
px: {
43-
type: [Number, String, Array],
44-
default: 'auto'
45-
},
46-
py: {
47-
type: [Number, String, Array],
48-
default: 'auto'
49-
},
50-
mt: {
51-
type: [Number, String, Array],
52-
default: 'auto'
53-
},
54-
mr: {
55-
type: [Number, String, Array],
56-
default: 'auto'
57-
},
58-
ml: {
59-
type: [Number, String, Array],
60-
default: 'auto'
61-
},
62-
mb: {
63-
type: [Number, String, Array],
64-
default: 'auto'
65-
},
66-
mx: {
67-
type: [Number, String, Array],
68-
default: 'auto'
69-
},
70-
my: {
71-
type: [Number, String, Array],
72-
default: 'auto'
73-
},
74-
rounded: {
75-
type: [String, Array],
76-
default: 'auto'
77-
},
78-
roundedTop: {
79-
type: [String, Array],
80-
default: 'auto'
81-
},
82-
roundedBottom: {
83-
type: [String, Array],
84-
default: 'auto'
85-
},
86-
roundedLeft: {
87-
type: [String, Array],
88-
default: 'auto'
89-
},
90-
roundedRight: {
91-
type: [String, Array],
92-
default: 'auto'
93-
},
94-
roundedTopRight: {
95-
type: [String, Array],
96-
default: 'auto'
97-
},
98-
roundedTopLeft: {
99-
type: [String, Array],
100-
default: 'auto'
101-
},
102-
roundedBottomRight: {
103-
type: [String, Array],
104-
default: 'auto'
105-
},
106-
roundedBottomLeft: {
107-
type: [String, Array],
108-
default: 'auto'
109-
},
110-
shadow: {
111-
type: [Number, String, Array],
112-
default: 'none'
113-
},
114-
backgroundColor: {
115-
type: String,
116-
default: 'none'
117-
},
118-
pos: {
119-
type: [String, Array],
120-
default: 'relative'
121-
},
122-
flexDir: {
123-
type: [String, Array],
124-
default: 'row'
125-
},
126-
borderWidth: {
127-
type: [String, Array],
128-
default: 'none'
129-
}
2+
color: String,
3+
w: [Number, String, Array],
4+
minW: [String, Array],
5+
maxW: [String, Array],
6+
h: [Number, String, Array],
7+
minH: [String, Array],
8+
maxH: [String, Array],
9+
d: [String, Array],
10+
lineClamp: [String, Number, Array],
11+
truncate: [Boolean, Number],
12+
px: [Number, String, Array],
13+
py: [Number, String, Array],
14+
mt: [Number, String, Array],
15+
mr: [Number, String, Array],
16+
ml: [Number, String, Array],
17+
mb: [Number, String, Array],
18+
mx: [Number, String, Array],
19+
my: [Number, String, Array],
20+
rounded: [String, Array],
21+
roundedTop: [String, Array],
22+
roundedBottom: [String, Array],
23+
roundedLeft: [String, Array],
24+
roundedRight: [String, Array],
25+
roundedTopRight: [String, Array],
26+
roundedTopLeft: [String, Array],
27+
roundedBottomRight: [String, Array],
28+
roundedBottomLeft: [String, Array],
29+
shadow: [Number, String, Array],
30+
backgroundColor: String,
31+
pos: [String, Array],
32+
borderWidth: [String, Array]
13033
}
13134

13235
const allProps = {
133-
color: {
134-
type: String,
135-
default: 'inherit'
136-
},
137-
bg: {
138-
type: String,
139-
default: 'unset'
140-
},
141-
w: {
142-
type: [Number, String, Array],
143-
default: 'auto'
144-
},
145-
minW: {
146-
type: [String, Array],
147-
default: 'auto'
148-
},
149-
maxW: {
150-
type: [String, Array],
151-
default: 'auto'
152-
},
153-
h: {
154-
type: [Number, String, Array],
155-
default: 'auto'
156-
},
157-
minH: {
158-
type: [String, Array],
159-
default: 'auto'
160-
},
161-
maxH: {
162-
type: [String, Array],
163-
default: 'auto'
164-
},
165-
d: {
166-
type: [String, Array],
167-
default: 'block'
168-
},
169-
lineClamp: {
170-
type: [String, Number, Array],
171-
default: 0
172-
},
173-
truncate: {
174-
type: [Boolean, Number],
175-
default: false
176-
},
177-
px: {
178-
type: [Number, String, Array],
179-
default: 'auto'
180-
},
181-
py: {
182-
type: [Number, String, Array],
183-
default: 'auto'
184-
},
185-
rounded: {
186-
type: [String, Array],
187-
default: 'none'
188-
},
189-
roundedTop: {
190-
type: [String, Array],
191-
default: 'none'
192-
},
193-
roundedBottom: {
194-
type: [String, Array],
195-
default: 'none'
196-
},
197-
roundedLeft: {
198-
type: [String, Array],
199-
default: 'none'
200-
},
201-
roundedRight: {
202-
type: [String, Array],
203-
default: 'none'
204-
},
205-
roundedTopRight: {
206-
type: [String, Array],
207-
default: 'none'
208-
},
209-
roundedTopLeft: {
210-
type: [String, Array],
211-
default: 'none'
212-
},
213-
roundedBottomRight: {
214-
type: [String, Array],
215-
default: 'none'
216-
},
217-
roundedBottomLeft: {
218-
type: [String, Array],
219-
default: 'none'
220-
},
221-
shadow: {
222-
type: [Number, String, Array],
223-
default: 'none'
224-
},
225-
backgroundColor: {
226-
type: String,
227-
default: 'none'
228-
},
229-
pos: {
230-
type: [String, Array],
231-
default: 'relative'
232-
},
233-
flexDir: {
234-
type: [String, Array],
235-
default: 'row'
236-
},
36+
color: String,
37+
bg: String,
38+
w: [Number, String, Array],
39+
minW: [String, Array],
40+
maxW: [String, Array],
41+
h: [Number, String, Array],
42+
minH: [String, Array],
43+
maxH: [String, Array],
44+
d: [String, Array],
45+
lineClamp: [String, Number, Array],
46+
truncate: [Boolean, Number],
47+
px: [Number, String, Array],
48+
py: [Number, String, Array],
49+
rounded: [String, Array],
50+
roundedTop: [String, Array],
51+
roundedBottom: [String, Array],
52+
roundedLeft: [String, Array],
53+
roundedRight: [String, Array],
54+
roundedTopRight: [String, Array],
55+
roundedTopLeft: [String, Array],
56+
roundedBottomRight: [String, Array],
57+
roundedBottomLeft: [String, Array],
58+
shadow: [Number, String, Array],
59+
backgroundColor: String,
60+
pos: [String, Array],
61+
flexDir: [String, Array],
23762
bgImg: [String, Array],
23863
bgImage: [String, Array],
23964
bgSize: [String, Array],
24065
bgPos: [String, Array],
24166
bgRepeat: [String, Array],
67+
borderWidth: [String, Array],
24268
textDecoration: [String, Array],
24369
overflowX: [String, Array],
24470
overflowY: [String, Array],

0 commit comments

Comments
 (0)