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

Commit cd5ffeb

Browse files
codebender828codebender828
committed
feat: improve playground sidebar appearance
1 parent 858a959 commit cd5ffeb

File tree

16 files changed

+792
-62
lines changed

16 files changed

+792
-62
lines changed

‎nodemon.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"watch": ["packages", "scripts/parse-routes.ts"],
3+
"ext": "vue",
4+
"ignore": ["packages/**/*.test.ts"],
5+
"exec": "yarn playground:routes"
6+
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"bootstrap": "yarn run lerna bootstrap",
1414
"scaffold": "hygen",
1515
"build": "lerna run build --no-private --stream",
16-
"dev": "yarn playground:routes && NODE_ENV=development vite serve playground --config ./vite.config.ts",
16+
"dev": "concurrently 'NODE_ENV=development vite serve playground --config ./vite.config.ts' 'yarn playground:routes'",
1717
"playground:routes": "ts-node ./scripts/parse-routes.ts",
1818
"playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground --config ./vite.config.ts",
1919
"test": "jest",
@@ -71,6 +71,7 @@
7171
"jest-transform-stub": "^2.0.0",
7272
"lerna": "^3.22.1",
7373
"lint-staged": "^10.5.3",
74+
"nodemon": "^2.0.7",
7475
"prettier": "^2.1.2",
7576
"pretty": "^2.0.0",
7677
"recursive-readdir": "^2.2.2",

‎packages/c-alert/examples/fix-hover.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<chakra.div
3+
bg="blue.400"
4+
:_hover="{ bg: 'yellow.500' }"
5+
font-weight="bold"
6+
color="white"
7+
px="4"
8+
py="3"
9+
>
10+
Fixing pseudo styles
11+
</chakra.div>
12+
</template>

‎packages/c-icon/examples/base-icon.vue

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<template>
2-
<c-icon> HELLO ALERT </c-icon>
2+
<div>
3+
<c-icon> HELLO ALERT </c-icon>
4+
</div>
35
</template>
46

57
<script lang="ts">
6-
import { CIcon } from '@chakra-ui/c-icon/src'
7-
import { defineComponent } from 'vue'
8+
// import { CIcon } from '@chakra-ui/c-icon/src'
9+
// import { defineComponent } from 'vue'
810
9-
export default defineComponent({
10-
name: 'BaseCIconExample',
11-
components: { CIcon },
12-
})
11+
// export default defineComponent({
12+
// components: { CIcon },
13+
// })
14+
//
1315
</script>

‎packages/c-icon/package.json

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,13 @@
1212
"files": [
1313
"dist"
1414
],
15-
"exports": {
16-
".": {
17-
"require": "./dist/cjs/index.js",
18-
"default": "./dist/esm/index.js"
19-
}
20-
},
21-
"publishConfig": {
22-
"access": "public"
23-
},
2415
"repository": {
2516
"type": "git",
2617
"url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
2718
},
2819
"bugs": {
2920
"url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
3021
},
31-
"sideEffects": false,
3222
"scripts": {
3323
"build": "concurrently yarn:build:*",
3424
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",

‎packages/c-icon/src/icon.internals.ts

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
export interface InternalIcon {
2+
path: string
3+
viewBox?: string
4+
}
5+
6+
const icons: Record<string, InternalIcon> = {
7+
star: {
8+
path: `
9+
<path
10+
fill="currentColor"
11+
d="M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z"
12+
/>
13+
`,
14+
},
15+
email: {
16+
path: `
17+
<g fill="currentColor">
18+
<path d="M11.114,14.556a1.252,1.252,0,0,0,1.768,0L22.568,4.87a.5.5,0,0,0-.281-.849A1.966,1.966,0,0,0,22,4H2a1.966,1.966,0,0,0-.289.021.5.5,0,0,0-.281.849Z" />
19+
<path d="M23.888,5.832a.182.182,0,0,0-.2.039l-6.2,6.2a.251.251,0,0,0,0,.354l5.043,5.043a.75.75,0,1,1-1.06,1.061l-5.043-5.043a.25.25,0,0,0-.354,0l-2.129,2.129a2.75,2.75,0,0,1-3.888,0L7.926,13.488a.251.251,0,0,0-.354,0L2.529,18.531a.75.75,0,0,1-1.06-1.061l5.043-5.043a.251.251,0,0,0,0-.354l-6.2-6.2a.18.18,0,0,0-.2-.039A.182.182,0,0,0,0,6V18a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V6A.181.181,0,0,0,23.888,5.832Z" />
20+
</g>
21+
`,
22+
},
23+
phone: {
24+
viewBox: '0 0 14 14',
25+
path: `
26+
<path
27+
fill="currentColor"
28+
d="M2.20731,0.0127209 C2.1105,-0.0066419 1.99432,-0.00664663 1.91687,0.032079 C0.871279,0.438698 0.212942,1.92964 0.0580392,2.95587 C-0.426031,6.28627 2.20731,9.17133 4.62766,11.0689 C6.77694,12.7534 10.9012,15.5223 13.3409,12.8503 C13.6507,12.5211 14.0186,12.037 13.9993,11.553 C13.9412,10.7397 13.186,10.1588 12.6051,9.71349 C12.1598,9.38432 11.2304,8.47427 10.6495,8.49363 C10.1267,8.51299 9.79754,9.05515 9.46837,9.38432 L8.88748,9.96521 C8.79067,10.062 7.55145,9.24878 7.41591,9.15197 C6.91248,8.8228 6.4284,8.45491 6.00242,8.04829 C5.57644,7.64167 5.18919,7.19632 4.86002,6.73161 C4.7632,6.59607 3.96933,5.41495 4.04678,5.31813 C4.04678,5.31813 4.72448,4.58234 4.91811,4.2919 C5.32473,3.67229 5.63453,3.18822 5.16982,2.45243 C4.99556,2.18135 4.78257,1.96836 4.55021,1.73601 C4.14359,1.34875 3.73698,0.942131 3.27227,0.612963 C3.02055,0.419335 2.59457,0.0708094 2.20731,0.0127209 Z"
29+
/>
30+
`,
31+
},
32+
info: {
33+
path: `
34+
<path
35+
fill="currentColor"
36+
d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
37+
/>
38+
`,
39+
},
40+
'warning-alt': {
41+
path: `
42+
<path
43+
fill="currentColor"
44+
d="M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"
45+
/>`,
46+
},
47+
check: {
48+
path: `
49+
<g fill="currentColor">
50+
<polygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039" />
51+
</g>
52+
`,
53+
viewBox: '0 0 14 14',
54+
},
55+
'check-circle': {
56+
path: `
57+
<path
58+
fill="currentColor"
59+
d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
60+
/>`,
61+
},
62+
exclamation: {
63+
path: `
64+
<path
65+
fill="currentColor"
66+
d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
67+
/>`,
68+
},
69+
'question-outline': {
70+
viewBox: '0 0 24 24',
71+
path: `
72+
<g stroke="currentColor" strokeWidth="1.5">
73+
<path
74+
strokeLinecap="full"
75+
fill="none"
76+
d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
77+
/>
78+
<path
79+
fill="none"
80+
strokeLinecap="full"
81+
d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
82+
/>
83+
<circle fill="none" strokeMiterlimit="10" cx="12" cy="12" r="11.25" />
84+
</g>
85+
`,
86+
},
87+
close: {
88+
path: `
89+
<path
90+
fill="currentColor"
91+
d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
92+
/>`,
93+
},
94+
'chevron-right': {
95+
path: `
96+
<path
97+
fill="currentColor"
98+
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
99+
/>`,
100+
},
101+
'chevron-left': {
102+
path: `
103+
<path
104+
fill="currentColor"
105+
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
106+
/>`,
107+
},
108+
'chevron-down': {
109+
path: `
110+
<path
111+
fill="currentColor"
112+
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
113+
/>`,
114+
},
115+
'chevron-up': {
116+
path: `
117+
<path
118+
fill="currentColor"
119+
d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
120+
/>`,
121+
},
122+
'arrow-forward': {
123+
path: `
124+
<path
125+
fill="currentColor"
126+
d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
127+
/>`,
128+
},
129+
'arrow-up': {
130+
path: `
131+
<path
132+
fill="currentColor"
133+
d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
134+
/>`,
135+
},
136+
'arrow-down': {
137+
path: `
138+
<path
139+
fill="currentColor"
140+
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
141+
/>`,
142+
},
143+
add: {
144+
path: `
145+
<path
146+
fill="currentColor"
147+
d="M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z"
148+
/>
149+
`,
150+
},
151+
minus: {
152+
path: `
153+
<g fill="currentColor">
154+
<rect height="4" width="20" x="2" y="10" />
155+
</g>
156+
`,
157+
},
158+
moon: {
159+
path: `
160+
<path
161+
fill="currentColor"
162+
d="M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"
163+
/>
164+
`,
165+
},
166+
sun: {
167+
path: `
168+
<g
169+
strokeLinejoin="full"
170+
strokeLinecap="full"
171+
strokeWidth="2"
172+
fill="none"
173+
stroke="currentColor"
174+
>
175+
<circle cx="12" cy="12" r="5" />
176+
<path d="M12 1v2" />
177+
<path d="M12 21v2" />
178+
<path d="M4.22 4.22l1.42 1.42" />
179+
<path d="M18.36 18.36l1.42 1.42" />
180+
<path d="M1 12h2" />
181+
<path d="M21 12h2" />
182+
<path d="M4.22 19.78l1.42-1.42" />
183+
<path d="M18.36 5.64l1.42-1.42" />
184+
</g>
185+
`,
186+
},
187+
warning: {
188+
path: `
189+
<path
190+
fill="currentColor"
191+
d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
192+
/>`,
193+
},
194+
'small-close': {
195+
path: `
196+
<path
197+
d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z"
198+
fillRule="evenodd"
199+
fill="currentColor"
200+
/>
201+
`,
202+
viewBox: '0 0 16 16',
203+
},
204+
'triangle-up': {
205+
path: `
206+
<path
207+
fill="currentColor"
208+
d="M12.8,5.4c-0.377-0.504-1.223-0.504-1.6,0l-9,12c-0.228,0.303-0.264,0.708-0.095,1.047 C2.275,18.786,2.621,19,3,19h18c0.379,0,0.725-0.214,0.895-0.553c0.169-0.339,0.133-0.744-0.095-1.047L12.8,5.4z"
209+
/>
210+
`,
211+
},
212+
'triangle-down': {
213+
path: `
214+
<path
215+
fill="currentColor"
216+
d="M21,5H3C2.621,5,2.275,5.214,2.105,5.553C1.937,5.892,1.973,6.297,2.2,6.6l9,12 c0.188,0.252,0.485,0.4,0.8,0.4s0.611-0.148,0.8-0.4l9-12c0.228-0.303,0.264-0.708,0.095-1.047C21.725,5.214,21.379,5,21,5z"
217+
/>
218+
`,
219+
},
220+
}
221+
222+
export default icons

‎packages/c-icon/src/icon.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { h, defineComponent, PropType } from 'vue'
2+
import { chakra, DOMElements } from '@chakra-ui/vue-system'
3+
import { InternalIcon } from './icon.internals'
4+
5+
const fallbackIcon: InternalIcon = {
6+
path: `
7+
<g stroke="currentColor" strokeWidth="1.5">
8+
<path
9+
strokeLinecap="round"
10+
fill="none"
11+
d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
12+
/>
13+
<path
14+
fill="currentColor"
15+
strokeLinecap="round"
16+
d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
17+
/>
18+
<circle fill="none" strokeMiterlimit="10" cx="12" cy="12" r="11.25" />
19+
</g>
20+
`,
21+
viewBox: '0 0 24 24',
22+
}
23+
24+
export const CIcon = defineComponent({
25+
props: {
26+
as: {
27+
type: [Object, String] as PropType<DOMElements>,
28+
default: 'div',
29+
},
30+
},
31+
setup(props, { slots, attrs }) {
32+
return () => h(chakra(props.as), { ...attrs }, slots)
33+
},
34+
})

‎packages/c-icon/src/index.ts

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1 @@
1-
import { h, defineComponent, PropType } from 'vue'
2-
import { chakra, DOMElements } from '@chakra-ui/vue-system'
3-
4-
export const CIcon = defineComponent({
5-
props: {
6-
as: {
7-
type: [Object, String] as PropType<DOMElements>,
8-
default: 'div',
9-
},
10-
},
11-
setup(props, { slots, attrs }) {
12-
return () => h(chakra(props.as), { ...attrs }, slots)
13-
},
14-
})
1+
export * from './icon'

‎packages/system/src/chakra.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const chakra: IChakraFactory = (
2323
const { class: inheritedClass, ...rest } = attrs
2424
const { styles, attrs: _attrs } = extractStyleAttrs(rest)
2525
const className = _css(css(styles)({ theme }))
26-
2726
const _componentName = componentName ? `chakra-${componentName}` : ''
2827

2928
return () =>

0 commit comments

Comments
 (0)