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

Commit f4318df

Browse files
codebender828codebender828
committed
Merge branch 'feature/docs-layout' of github.com:chakra-ui/chakra-ui-vue-next into feat/drawer
2 parents b57070c + f1f7528 commit f4318df

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+11605
-175
lines changed

‎packages/layout/examples/base-simple-grid.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</c-simple-grid>
1717
</template>
1818
<script setup lang="ts">
19-
import { ref } from 'vue-demi'
19+
import { ref } from 'vue'
2020
2121
const minw = ref('100px')
2222
</script>

‎packages/layout/examples/base-wrap.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-wrap spacing="10px">
3+
<c-wrap-item>
4+
<c-center w="180px" h="80px" bg="red.200"> Box 1 </c-center>
5+
</c-wrap-item>
6+
<c-wrap-item>
7+
<c-center w="180px" h="80px" bg="green.200"> Box 2 </c-center>
8+
</c-wrap-item>
9+
<c-wrap-item>
10+
<c-center w="180px" h="80px" bg="tomato"> Box 3 </c-center>
11+
</c-wrap-item>
12+
<c-wrap-item>
13+
<c-center w="180px" h="80px" bg="blue.200"> Box 4 </c-center>
14+
</c-wrap-item>
15+
</c-wrap>
16+
</template>

‎packages/layout/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export * from './simple-grid'
1414
export * from './spacer'
1515
export * from './stack'
1616
export * from './text'
17+
export * from './wrap'

‎packages/layout/src/wrap.ts

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { Dict, mapResponsive } from '@chakra-ui/utils'
2+
import {
3+
chakra,
4+
HTMLChakraProps,
5+
SystemProps,
6+
DOMElements,
7+
tokenToCSSVar,
8+
} from '@chakra-ui/vue-system'
9+
import { getValidChildren, SNAO } from '@chakra-ui/vue-utils'
10+
import { computed, defineComponent, h, PropType } from '@vue/runtime-core'
11+
12+
export interface WrapProps extends HTMLChakraProps<'div'> {
13+
/**
14+
* The space between the each child (even if it wraps)
15+
* @type SystemProps["margin"]
16+
*/
17+
spacing?: SystemProps['margin']
18+
/**
19+
* The `justify-content` value (for cross-axis alignment)
20+
* @type SystemProps["justifyContent"]
21+
*/
22+
justify?: SystemProps['justifyContent']
23+
/**
24+
* The `align-items` value (for main axis alignment)
25+
* @type SystemProps["alignItems"]
26+
*/
27+
align?: SystemProps['alignItems']
28+
/**
29+
* The `flex-direction` value
30+
* @type SystemProps["flexDirection"]
31+
*/
32+
direction?: SystemProps['flexDirection']
33+
/**
34+
* If `true`, the children will be wrapped in a `WrapItem`
35+
*/
36+
shouldWrapChildren?: boolean
37+
}
38+
39+
/**
40+
* Used to render texts or paragraphs.
41+
*
42+
* @see Docs https://vue.chakra-ui.com/docs/typography/text
43+
*/
44+
export const CWrap = defineComponent({
45+
props: {
46+
as: {
47+
type: [Object, String] as PropType<DOMElements>,
48+
default: 'div',
49+
},
50+
spacing: SNAO as PropType<WrapProps['spacing']>,
51+
justify: SNAO as PropType<WrapProps['justify']>,
52+
align: SNAO as PropType<WrapProps['align']>,
53+
direction: SNAO as PropType<WrapProps['direction']>,
54+
shouldWrapChildren: SNAO as PropType<WrapProps['shouldWrapChildren']>,
55+
},
56+
setup(props, { slots, attrs }) {
57+
const styles = computed(() => ({
58+
'--chakra-wrap-spacing': (theme: Dict) =>
59+
mapResponsive(props.spacing, (value) =>
60+
tokenToCSSVar('space', value)(theme)
61+
),
62+
'--wrap-spacing': 'calc(var(--chakra-wrap-spacing) / 2)',
63+
display: 'flex',
64+
flexWrap: 'wrap',
65+
justifyContent: props.justify,
66+
alignItems: props.align,
67+
flexDirection: props.direction,
68+
listStyleType: 'none',
69+
padding: '0',
70+
margin: 'calc(var(--wrap-spacing) * -1)',
71+
'& > *:not(style)': {
72+
margin: 'var(--wrap-spacing)',
73+
},
74+
}))
75+
76+
const childrenToRender = props.shouldWrapChildren
77+
? getValidChildren(slots).map((child, index) =>
78+
h(CWrapItem, { key: index }, child)
79+
)
80+
: slots
81+
82+
return () => {
83+
return h(
84+
chakra(props.as, {
85+
label: 'wrap',
86+
...attrs,
87+
}),
88+
{},
89+
() =>
90+
h(
91+
chakra('ul', { label: 'wrap__list', __css: styles.value }),
92+
{},
93+
childrenToRender
94+
)
95+
)
96+
}
97+
},
98+
})
99+
100+
export interface WrapItemProps extends HTMLChakraProps<'li'> {}
101+
102+
export const CWrapItem = defineComponent({
103+
setup(_, { attrs, slots }) {
104+
return () => {
105+
return h(
106+
chakra('li', {
107+
label: 'wrap__listItem',
108+
__css: {
109+
display: 'flex',
110+
alignItems: 'flex-start',
111+
},
112+
...attrs,
113+
}),
114+
{},
115+
slots
116+
)
117+
}
118+
},
119+
})

‎packages/layout/tests/__snapshots__/layout.test.ts.snap

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -503,3 +503,52 @@ exports[`<CText /> should render properly 1`] = `
503503
</p>
504504
</DocumentFragment>
505505
`;
506+
507+
exports[`<CWrap /> & <CWrapItem /> should render properly 1`] = `
508+
<DocumentFragment>
509+
<div
510+
class="chakra-wrap css-0"
511+
>
512+
<ul
513+
class="chakra-wrap__list css-gbdy1k"
514+
>
515+
<li
516+
class="chakra-wrap__listItem css-1yp4ln"
517+
>
518+
<div
519+
class="chakra-center css-58a5xs"
520+
>
521+
Box 1
522+
</div>
523+
</li>
524+
<li
525+
class="chakra-wrap__listItem css-1yp4ln"
526+
>
527+
<div
528+
class="chakra-center css-1cf3c28"
529+
>
530+
Box 2
531+
</div>
532+
</li>
533+
<li
534+
class="chakra-wrap__listItem css-1yp4ln"
535+
>
536+
<div
537+
class="chakra-center css-1un2hvj"
538+
>
539+
Box 3
540+
</div>
541+
</li>
542+
<li
543+
class="chakra-wrap__listItem css-1yp4ln"
544+
>
545+
<div
546+
class="chakra-center css-dd3w5r"
547+
>
548+
Box 4
549+
</div>
550+
</li>
551+
</ul>
552+
</div>
553+
</DocumentFragment>
554+
`;

‎packages/layout/tests/layout.test.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import {
2525
CUnorderedList,
2626
CListIcon,
2727
CText,
28+
CWrap,
29+
CWrapItem,
2830
} from '../src'
2931
import { CFlex } from '@chakra-ui/vue-next'
3032
import { render, testA11y } from '../../test-utils/src'
@@ -404,3 +406,31 @@ describe('<CText />', () => {
404406
expect(asFragment()).toMatchSnapshot()
405407
})
406408
})
409+
410+
describe('<CWrap /> & <CWrapItem />', () => {
411+
const renderComponent = () =>
412+
render({
413+
components: { CWrap, CWrapItem, CCenter },
414+
template: `
415+
<c-wrap spacing="10px">
416+
<c-wrap-item>
417+
<c-center w="180px" h="80px" bg="red.200"> Box 1 </c-center>
418+
</c-wrap-item>
419+
<c-wrap-item>
420+
<c-center w="180px" h="80px" bg="green.200"> Box 2 </c-center>
421+
</c-wrap-item>
422+
<c-wrap-item>
423+
<c-center w="180px" h="80px" bg="tomato"> Box 3 </c-center>
424+
</c-wrap-item>
425+
<c-wrap-item>
426+
<c-center w="180px" h="80px" bg="blue.200"> Box 4 </c-center>
427+
</c-wrap-item>
428+
</c-wrap>
429+
`,
430+
})
431+
432+
it('should render properly', async () => {
433+
const { asFragment } = renderComponent()
434+
expect(asFragment()).toMatchSnapshot()
435+
})
436+
})

‎packages/theme/src/foundations/sizes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const largeSizes = {
1515
'5xl': '64rem',
1616
'6xl': '72rem',
1717
'7xl': '80rem',
18+
'8xl': '90rem',
1819
}
1920

2021
const container = {

‎packages/utils/src/vue-utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { inject, InjectionKey, provide, isVNode, Slots } from 'vue'
1+
import { inject, InjectionKey, provide, isVNode, Slots, VNode } from 'vue'
22

33
export interface CreateContextOptions {
44
/**
@@ -57,7 +57,7 @@ export function createContext<ContextType>(options: CreateContextOptions = {}) {
5757
*
5858
* see https://github.com/vuejs/vue-next/blob/HEAD/packages/runtime-core/src/helpers/renderSlot.ts
5959
*/
60-
export function getValidChildren(slots: Slots | null) {
60+
export function getValidChildren(slots: Slots | null): VNode[] {
6161
const slotArray = slots?.default?.() || []
6262
return slotArray.filter((child) => {
6363
return isVNode(child)

‎website/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,26 @@
1717
"feather-icons-paths": "^1.0.8",
1818
"prism-theme-vars": "^0.1.4",
1919
"vue": "^3.0.11",
20+
"vue-composable": "^1.0.0-beta.23",
21+
"vue-live": "2.0.0-alpha.7",
2022
"vue-prism-editor": "^2.0.0-alpha.2",
2123
"vue-router": "^4.0.6"
2224
},
2325
"devDependencies": {
2426
"@emotion/server": "^11.0.0",
2527
"@iconify/json": "^1.1.312",
2628
"@vitejs/plugin-vue": "^1.2.1",
29+
"@vitejs/plugin-vue-jsx": "^1.1.3",
2730
"@vue/compiler-sfc": "^3.0.11",
2831
"@vue/server-renderer": "^3.0.11",
2932
"@vueuse/head": "^0.5.1",
3033
"markdown-it-prism": "^2.1.6",
3134
"prismjs": "^1.23.0",
35+
"remark-autolink-headings": "^6.0.1",
36+
"remark-frontmatter": "^3.0.0",
37+
"remark-gfm": "^1.0.0",
38+
"remark-mdx-code-meta": "^1.0.0",
39+
"remark-slug": "^6.0.0",
3240
"typescript": "^4.1.3",
3341
"vite": "^2.3.8",
3442
"vite-plugin-components": "^0.8.3",

‎website/src/App.vue

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,21 @@
33
<router-view />
44
</template>
55

6-
<script lang="ts">
7-
import { defineComponent, reactive, computed } from 'vue'
8-
import { CReset } from '@chakra-ui/vue-next'
6+
<script setup lang="ts">
97
import { useHead } from '@vueuse/head'
108
11-
export default defineComponent({
12-
name: 'App',
13-
components: {
14-
CReset,
15-
},
16-
setup() {
17-
const siteData = reactive({
18-
title: 'Chakra UI Vue Next + Vite',
19-
description: 'Chakra UI Vue Next + Vite test',
20-
})
9+
const siteData = {
10+
title: 'Chakra UI Vue Next + Vite',
11+
description: 'Chakra UI Vue Next + Vite test',
12+
}
2113
22-
useHead({
23-
title: computed(() => siteData.title),
24-
meta: [
25-
{
26-
name: `description`,
27-
content: computed(() => siteData.description),
28-
},
29-
],
30-
})
31-
},
14+
useHead({
15+
title: siteData.title,
16+
meta: [
17+
{
18+
name: `description`,
19+
content: siteData.description,
20+
},
21+
],
3222
})
3323
</script>

0 commit comments

Comments
 (0)