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

Commit eff3659

Browse files
codebender828codebender828
committed
fix(c-grid): added fix for as prop
1 parent 9b4fc3c commit eff3659

File tree

9 files changed

+168
-88
lines changed

9 files changed

+168
-88
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
"vitepress": "^0.12.0",
114114
"vue": ">=3.0.5",
115115
"vue-jest": "^5.0.0-alpha.7",
116+
"vue-prism-editor": "^2.0.0-alpha.2",
116117
"vue-router": "^4.0.6",
117118
"vue3-perfect-scrollbar": "^1.5.5"
118119
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ const CCode = defineComponent({
2929
const styles = useStyleConfig('Code', themingProps.value)
3030

3131
return h(
32-
chakra(props.as),
33-
{
32+
chakra(props.as, {
3433
__css: {
3534
display: 'inline-block',
3635
verticalAlign: 'middle',
@@ -40,8 +39,8 @@ const CCode = defineComponent({
4039
rounded: 'sm',
4140
...styles.value,
4241
},
43-
...attrs,
44-
},
42+
}),
43+
attrs,
4544
slots
4645
)
4746
}

‎packages/layout/src/grid.ts

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import { BoxProps } from './box'
2-
import { h, defineComponent, PropType, computed, watchEffect } from 'vue'
2+
import {
3+
h,
4+
defineComponent,
5+
PropType,
6+
computed,
7+
watchEffect,
8+
Component,
9+
ConcreteComponent,
10+
} from 'vue'
311
import {
412
chakra,
513
HTMLChakraProps,
614
SystemProps,
715
ResponsiveValue,
16+
DOMElements,
817
} from '@chakra-ui/vue-system'
918
import { filterUndefined, mapResponsive } from '@chakra-ui/utils'
1019
import { SNAO } from '@chakra-ui/vue-utils'
@@ -113,6 +122,12 @@ export interface GridItemProps extends BoxProps {
113122
*/
114123
export const CGrid = defineComponent({
115124
props: {
125+
as: {
126+
type: [String, Object] as PropType<
127+
DOMElements | Component | ConcreteComponent | string
128+
>,
129+
default: 'div',
130+
},
116131
templateColumns: SNAO as PropType<GridProps['gridTemplateColumns']>,
117132
gap: SNAO as PropType<GridProps['gridGap']>,
118133
rowGap: SNAO as PropType<GridProps['gridRowGap']>,
@@ -146,8 +161,8 @@ export const CGrid = defineComponent({
146161
)
147162
return () => {
148163
return h(
149-
chakra('div', { label: 'grid', __css: styles.value, ...attrs }),
150-
{},
164+
chakra(props.as, { label: 'grid', __css: styles.value }),
165+
attrs,
151166
slots
152167
)
153168
}
@@ -162,6 +177,12 @@ function spanFn(span?: ResponsiveValue<number | 'auto'>) {
162177

163178
export const CGridItem = defineComponent({
164179
props: {
180+
as: {
181+
type: [String, Object] as PropType<
182+
DOMElements | Component | ConcreteComponent | string
183+
>,
184+
default: 'div',
185+
},
165186
colSpan: SNAO as PropType<GridItemProps['colSpan']>,
166187
colStart: SNAO as PropType<GridItemProps['colStart']>,
167188
colEnd: SNAO as PropType<GridItemProps['colEnd']>,
@@ -183,11 +204,8 @@ export const CGridItem = defineComponent({
183204

184205
return () => {
185206
return h(
186-
chakra('div', { label: 'grid__item' }),
187-
{
188-
__css: styles.value,
189-
...attrs,
190-
},
207+
chakra(props.as, { label: 'grid__item', __css: styles.value }),
208+
attrs,
191209
slots
192210
)
193211
}

‎website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"feather-icons-paths": "^1.0.8",
1818
"prism-theme-vars": "^0.1.4",
1919
"vue": ">=3.0.5",
20+
"vue-prism-editor": "^2.0.0-alpha.2",
2021
"vue-router": "^4.0.6"
2122
},
2223
"devDependencies": {

‎website/src/assets/custom-theme.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default extendTheme({
2525
body: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
2626
},
2727
shadows: {
28+
outline: `0 0 0 4px rgba(47, 133, 90, 0.62)`,
2829
search:
2930
'0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)',
3031
},

‎website/src/components/Navbar.vue

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,21 @@
2222
flex-direction="row"
2323
align-items="center"
2424
>
25-
<CBox w="45px" mr="2"><ChakraUILogoIcon /></CBox>
25+
<CBox w="30px" mr="2"><ChakraUILogoIcon /></CBox>
2626
<chakra.h1
27-
font-size="2xl"
27+
font-size="xl"
2828
font-family="heading"
29+
line-height="1.2"
2930
letter-spacing="tighter"
30-
mt="8px"
3131
:d="{ base: 'none', md: 'block' }"
3232
>
33-
Chakra Chidori
33+
chakra-ui/vue-next
34+
<c-badge
35+
font-family="mono"
36+
font-size="0.5em"
37+
text-transform="lowercase"
38+
>{{ pkg.version }}</c-badge
39+
>
3440
</chakra.h1>
3541
</chakra.a>
3642
</CFlex>
@@ -60,11 +66,11 @@
6066
</CBox>
6167
<CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
6268
<CIconButton
63-
as="a"
69+
as="router-link"
6470
variant="ghost"
6571
variant-color="gray"
6672
aria-label="View the documentation"
67-
href="/getting-started"
73+
to="#"
6874
icon="book"
6975
/>
7076
</CBox>
@@ -98,17 +104,18 @@
98104

99105
<script lang="ts">
100106
import { defineComponent } from 'vue'
101-
import { CBox, CFlex, CIconButton, CIcon } from '@chakra-ui/vue-next'
102107
import ChakraUILogoIcon from './ChakraLogoIcon.vue'
108+
import pkg from '../../../packages/core/package.json'
103109
104110
export default defineComponent({
105111
name: 'Navbar',
106112
components: {
107-
CBox,
108-
CFlex,
109-
CIconButton,
110-
CIcon,
111113
ChakraUILogoIcon,
112114
},
115+
setup() {
116+
return {
117+
pkg,
118+
}
119+
},
113120
})
114121
</script>

‎website/src/components/home/Hero.vue

Lines changed: 108 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,108 @@
11
<template>
2-
<chakra.header
2+
<c-grid
3+
as="header"
4+
:template-columns="{ base: '1fr', md: '1fr 1fr' }"
35
pos="relative"
46
bg="white"
57
:bgGradient="{ base: '', md: 'linear(to-br, white, white, vue.100)' }"
6-
:min-h="{ base: 'auto', sm: '90vh' }"
7-
:pt="{ base: '3rem', sm: '150px' }"
8+
:min-h="{
9+
base: 'calc(100vh - 60px)',
10+
sm: 'auto',
11+
md: 'calc(100vh - 60px)',
12+
}"
813
:px="[4, 10, 12]"
9-
:pb="{ base: '3rem', sm: '0' }"
14+
:py="{ base: 10, sm: 20 }"
1015
shadow="lg"
16+
gap="5"
1117
>
12-
<chakra.div>
13-
<chakra.h1
14-
maxW="16ch"
15-
:fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
16-
fontFamily="heading"
17-
letterSpacing="tighter"
18-
fontWeight="extrabold"
19-
mb="16px"
20-
lineHeight="1.2"
18+
<c-flex align="center" h="full">
19+
<c-stack spacing="6">
20+
<chakra.div>
21+
<chakra.h1
22+
maxW="16ch"
23+
:fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
24+
fontFamily="heading"
25+
letterSpacing="tighter"
26+
fontWeight="extrabold"
27+
lineHeight="1.2"
28+
>
29+
Build accessible Vue apps
30+
<chakra.span color="vue.600" px="5px">with speed</chakra.span>
31+
</chakra.h1>
32+
</chakra.div>
33+
<chakra.p
34+
:maxW="{ base: '560px', lg: '650px' }"
35+
opacity="0.7"
36+
:fontSize="{ base: 'lg', lg: 'xl' }"
37+
>
38+
Chakra UI Vue Next is a simple modular and accessible component
39+
library that gives you the building blocks to build Vue applications
40+
with speed.
41+
</chakra.p>
42+
<CFlex
43+
flex-dir="row"
44+
:justify-content="{ base: 'center', sm: 'flex-start' }"
45+
>
46+
<CButton
47+
as="a"
48+
text-decoration="none"
49+
href="https://github.com/chakra-ui/chakra-ui-vue-next"
50+
size="lg"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
color-scheme="green"
54+
bg="vue.600"
55+
:flex="{ base: '1', sm: 'none' }"
56+
>
57+
Get started
58+
</CButton>
59+
<CButton
60+
as="a"
61+
text-decoration="none"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
href="https://github.com/chakra-ui/chakra-ui-vue-next"
65+
left-icon="github"
66+
ml="4"
67+
variant="outline"
68+
color-scheme="green"
69+
size="lg"
70+
color="vue.600"
71+
:flex="{ base: '1', sm: 'none' }"
72+
>
73+
Github
74+
</CButton>
75+
</CFlex>
76+
<c-text font-weight="bold" vertical-align="center">
77+
👋 &nbsp; V1 (Chidori) is currently in experimental alpha.
78+
<c-link
79+
ml="1"
80+
color="gray.700"
81+
text-decoration="underline"
82+
to="https://www.notion.so/v1-Roadmap-e8c1387bcb4b4175a0a1720c797c3ddb"
83+
is-external
84+
>
85+
See roadmap <c-icon name="external-link"></c-icon>
86+
</c-link>
87+
</c-text>
88+
</c-stack>
89+
</c-flex>
90+
<c-flex justify="center" align="center" :mt="{ sm: '6', md: 0 }">
91+
<c-code
92+
px="5"
93+
py="4"
94+
border-radius="lg"
95+
color="whiteAlpha.900"
96+
bg="blackAlpha.800"
97+
font-weight="bold"
98+
shadow="search"
99+
:font-size="{ base: 'lg', md: '2xl' }"
21100
>
22-
Build accessible Vue apps
23-
<chakra.span color="vue.600" px="5px">with speed</chakra.span>
24-
</chakra.h1>
25-
</chakra.div>
26-
<chakra.p
27-
:maxW="{ base: '560px', lg: '650px' }"
28-
opacity="0.7"
29-
:fontSize="{ base: 'lg', lg: 'xl' }"
30-
mt="6"
31-
mb="10"
32-
>
33-
Chakra UI Vue Next is a simple modular and accessible component library
34-
that gives you the building blocks to build Vue applications with speed.
35-
</chakra.p>
36-
<CFlex
37-
flex-dir="row"
38-
:justify-content="{ base: 'center', sm: 'flex-start' }"
39-
mb="4"
40-
>
41-
<CButton
42-
as="a"
43-
text-decoration="none"
44-
href="https://github.com/chakra-ui/chakra-ui-vue-next"
45-
size="lg"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
color-scheme="green"
49-
bg="vue.600"
50-
:flex="{ base: '1', sm: 'none' }"
51-
>
52-
Get started
53-
</CButton>
54-
<CButton
55-
as="a"
56-
text-decoration="none"
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
href="https://github.com/chakra-ui/chakra-ui-vue-next"
60-
left-icon="github"
61-
ml="4"
62-
variant="outline"
63-
color-scheme="green"
64-
size="lg"
65-
color="vue.600"
66-
:flex="{ base: '1', sm: 'none' }"
67-
>
68-
Github
69-
</CButton>
70-
</CFlex>
71-
<chakra.a
101+
yarn add @chakra-ui/vue-next
102+
</c-code>
103+
</c-flex>
104+
<!-- Will hide for now -->
105+
<!-- <chakra.a
72106
href="https://chakra-ui.com/"
73107
target="_blank"
74108
rel="noopener noreferrer"
@@ -79,11 +113,12 @@
79113
mt="4"
80114
>
81115
Looking for the React.js version?
82-
</chakra.a>
83-
</chakra.header>
116+
</chakra.a> -->
117+
</c-grid>
84118
</template>
85119

86120
<script lang="ts">
121+
// import { PrismEditor } from 'vue-prism-editor'
87122
import { defineComponent } from 'vue'
88123
import { CButton, CFlex } from '@chakra-ui/vue-next'
89124
@@ -92,6 +127,14 @@ export default defineComponent({
92127
components: {
93128
CButton,
94129
CFlex,
130+
// PrismEditor,
131+
},
132+
setup() {
133+
const installCode = `yarn add @chakra-ui/vue-next`
134+
135+
return {
136+
installCode,
137+
}
95138
},
96139
})
97140
</script>

0 commit comments

Comments
 (0)