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

Commit db47143

Browse files
codebender828codebender828
authored
Merge pull request #76 from chakra-ui/feat/drawer
feat(overlay components): `CDrawer` and `CModal` components
2 parents d38bbda + 18d5e74 commit db47143

Some content is hidden

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

54 files changed

+1754
-312
lines changed

‎.changeset/two-moles-worry.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
'@chakra-ui/c-accordion': patch
3+
'@chakra-ui/c-alert': patch
4+
'@chakra-ui/c-button': patch
5+
'@chakra-ui/c-close-button': patch
6+
'@chakra-ui/c-code': patch
7+
'@chakra-ui/c-color-mode': patch
8+
'@chakra-ui/c-flex': patch
9+
'@chakra-ui/c-focus-lock': patch
10+
'@chakra-ui/c-icon': patch
11+
'@chakra-ui/c-modal': patch
12+
'@chakra-ui/c-motion': patch
13+
'@chakra-ui/c-popper': patch
14+
'@chakra-ui/c-portal': patch
15+
'@chakra-ui/c-reset': patch
16+
'@chakra-ui/c-scroll-lock': patch
17+
'@chakra-ui/c-spinner': patch
18+
'@chakra-ui/c-theme-provider': patch
19+
'@chakra-ui/c-visually-hidden': patch
20+
'@chakra-ui/vue-next': patch
21+
'@chakra-ui/vue-layout': patch
22+
'@chakra-ui/vue-system': patch
23+
'@chakra-ui/vue-test-utils': patch
24+
'@chakra-ui/vue-theme': patch
25+
'@chakra-ui/vue-theme-tools': patch
26+
'@chakra-ui/vue-utils': patch
27+
'@chakra-ui/vue-a11y': patch
28+
'@chakra-ui/vue-composables': patch
29+
'@chakra-ui/vue-auto-import': patch
30+
'@chakra-ui/vue-docs': patch
31+
---
32+
33+
Adds Drawer and AlertDialog components

‎.codesandbox/ci.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"installCommand": "csb:install",
3+
"buildCommand": "build",
4+
"packages": [
5+
"packages/c-accordion",
6+
"packages/c-alert",
7+
"packages/c-button",
8+
"packages/c-close-button",
9+
"packages/c-code",
10+
"packages/c-color-mode",
11+
"packages/c-flex",
12+
"packages/c-focus-lock",
13+
"packages/c-icon",
14+
"packages/c-modal",
15+
"packages/c-motion",
16+
"packages/c-popper",
17+
"packages/c-portal",
18+
"packages/c-reset",
19+
"packages/c-scroll-lock",
20+
"packages/c-spinner",
21+
"packages/c-theme-provider",
22+
"packages/c-visually-hidden",
23+
"packages/core",
24+
"packages/layout",
25+
"packages/nuxt",
26+
"packages/system",
27+
"packages/test-utils",
28+
"packages/theme",
29+
"packages/theme-tools",
30+
"packages/utils",
31+
"packages/vue-a11y",
32+
"packages/vue-composables"
33+
],
34+
"sandboxes": ["chakra-ui-vue-v1-jcidb"],
35+
"node": "14"
36+
}

‎components.d.ts

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.4 auto-imported
2+
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.5 auto-imported
33
* components using `vite-plugin-components`
44
*
55
* @see: https://github.com/antfu/vite-plugin-components#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2021-07-01T09:59:46.739Z
9+
* This file was generated on 2021-07-06T07:42:41.009Z
1010
*/
1111

1212
import { ChakraProps } from '@chakra-ui/vue-system'
@@ -25,6 +25,12 @@ type JsxComponentCustomProps = {
2525
vShow?: boolean
2626
vHtml?: JsxNode
2727
vSlots?: SlotDirective
28+
'v-model'?: unknown
29+
'v-models'?: unknown[]
30+
'v-custom'?: unknown[]
31+
'v-show'?: boolean
32+
'v-html'?: JsxNode
33+
'v-slots'?: SlotDirective
2834
} & Omit<HTMLAttributes, 'innerHTML'> & {
2935
innerHTML?: JsxNode
3036
}
@@ -75,7 +81,22 @@ declare module 'vue' {
7581
CModalBody: typeof import('@chakra-ui/vue-next')['CModalBody']
7682
CModalFooter: typeof import('@chakra-ui/vue-next')['CModalFooter']
7783
CModalCloseButton: typeof import('@chakra-ui/vue-next')['CModalCloseButton']
84+
CDrawer: typeof import('@chakra-ui/vue-next')['CDrawer']
85+
CDrawerContent: typeof import('@chakra-ui/vue-next')['CDrawerContent']
86+
CDrawerBody: typeof import('@chakra-ui/vue-next')['CDrawerBody']
87+
CDrawerCloseButton: typeof import('@chakra-ui/vue-next')['CDrawerCloseButton']
88+
CDrawerFooter: typeof import('@chakra-ui/vue-next')['CDrawerFooter']
89+
CDrawerHeader: typeof import('@chakra-ui/vue-next')['CDrawerHeader']
90+
CDrawerOverlay: typeof import('@chakra-ui/vue-next')['CDrawerOverlay']
91+
CAlertDialog: typeof import('@chakra-ui/vue-next')['CAlertDialog']
92+
CAlertDialogContent: typeof import('@chakra-ui/vue-next')['CAlertDialogContent']
93+
CAlertDialogBody: typeof import('@chakra-ui/vue-next')['CAlertDialogBody']
94+
CAlertDialogCloseButton: typeof import('@chakra-ui/vue-next')['CAlertDialogCloseButton']
95+
CAlertDialogFooter: typeof import('@chakra-ui/vue-next')['CAlertDialogFooter']
96+
CAlertDialogHeader: typeof import('@chakra-ui/vue-next')['CAlertDialogHeader']
97+
CAlertDialogOverlay: typeof import('@chakra-ui/vue-next')['CAlertDialogOverlay']
7898
CMotion: typeof import('@chakra-ui/vue-next')['CMotion']
99+
CAnimatePresence: typeof import('@chakra-ui/vue-next')['CAnimatePresence']
79100
CPortal: typeof import('@chakra-ui/vue-next')['CPortal']
80101
CScrollLock: typeof import('@chakra-ui/vue-next')['CScrollLock']
81102
CVisuallyHidden: typeof import('@chakra-ui/vue-next')['CVisuallyHidden']

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"pkgs:check": "manypkg check",
1616
"pkgs:fix": "manypkg fix",
1717
"postinstall": "yarn bootstrap",
18+
"csb:install": "yarn && yarn bootstrap",
1819
"bootstrap": "yarn run lerna bootstrap",
1920
"scaffold": "hygen generator",
2021
"release": "yarn changeset publish",

‎packages/c-flex/src/flex.ts renamed to ‎packages/c-flex/src/flex.tsx

+8-11
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
DOMElements,
66
ThemingProps,
77
SystemStyleObject,
8+
ComponentWithProps,
9+
DeepPartial,
810
} from '@chakra-ui/vue-system'
911

1012
export interface FlexProps {
@@ -52,7 +54,7 @@ export interface FlexProps {
5254
shrink?: SystemStyleObject['flexShrink']
5355
}
5456

55-
const CFlex = defineComponent({
57+
const CFlex: ComponentWithProps<DeepPartial<FlexProps>> = defineComponent({
5658
props: {
5759
as: {
5860
type: [Object, String] as PropType<DOMElements>,
@@ -83,16 +85,11 @@ const CFlex = defineComponent({
8385
h: props.size,
8486
w: props.size,
8587
})
86-
return () =>
87-
h(
88-
chakra(props.as),
89-
{
90-
label: 'flex',
91-
__css: styles,
92-
...attrs,
93-
},
94-
slots
95-
)
88+
return () => (
89+
<chakra.div as={props.as} __label="flex" __css={styles} {...attrs}>
90+
{slots}
91+
</chakra.div>
92+
)
9693
},
9794
})
9895

‎packages/c-focus-lock/src/c-focus-lock.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,20 @@
1515
*/
1616

1717
import { defineComponent, PropType, computed, cloneVNode, VNode } from 'vue'
18-
import { focus, FocusableElement, warn, __DEV__ } from '@chakra-ui/utils'
18+
import {
19+
focus,
20+
FocusableElement,
21+
isFunction,
22+
warn,
23+
__DEV__,
24+
} from '@chakra-ui/utils'
1925
import { useFocusLock } from './use-focus-lock'
2026
import type { UseFocusLockOptions } from './use-focus-lock'
2127
import type { FocusTarget } from 'focus-trap'
2228

23-
type RefProp = () => HTMLElement | string | object | undefined
29+
type RefProp =
30+
| (() => HTMLElement | string | object | undefined | unknown)
31+
| string
2432

2533
export interface FocusLockProps extends UseFocusLockOptions {
2634
/**
@@ -73,7 +81,9 @@ export const CFocusLock = defineComponent({
7381
const finalFocusElement = computed(() => {
7482
let finalFocus
7583
if (props.finalFocusRef) {
76-
const finalFocusRef = props.finalFocusRef?.() || props.finalFocusRef
84+
const finalFocusRef = isFunction(props.finalFocusRef)
85+
? props.finalFocusRef?.()
86+
: props.finalFocusRef
7787
if (typeof finalFocusRef === 'string') {
7888
finalFocus = document.querySelector<FocusableElement & Element>(
7989
finalFocusRef

‎packages/c-modal/examples/alert-dialog-simple.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<chakra.div
3+
d="flex"
4+
justify-content="center"
5+
align-items="center"
6+
h="full"
7+
w="100%"
8+
>
9+
<c-button color-scheme="red" data-testid="open-modal" @click="open"
10+
>Delete customer</c-button
11+
>
12+
<!-- eslint-disable-next-line -->
13+
<c-alert-dialog v-model="isOpen" :least-destructive-ref="() => initialFocus">
14+
<c-alert-dialog-overlay />
15+
<c-alert-dialog-content>
16+
<c-alert-dialog-header>Delete Customer</c-alert-dialog-header>
17+
<c-alert-dialog-close-button data-testid="close-button" />
18+
<c-alert-dialog-body>
19+
Are you sure? You can't undo this action afterwards.
20+
</c-alert-dialog-body>
21+
22+
<c-alert-dialog-footer>
23+
<c-button @click="close" mr="3" ref="initialFocus"> Cancel </c-button>
24+
<c-button id="initialFocus" color-scheme="red">Delete</c-button>
25+
</c-alert-dialog-footer>
26+
</c-alert-dialog-content>
27+
</c-alert-dialog>
28+
</chakra.div>
29+
</template>
30+
31+
<script setup lang="ts">
32+
import { ref } from 'vue'
33+
34+
const initialFocus = ref(null)
35+
36+
const isOpen = ref(false)
37+
const open = () => {
38+
isOpen.value = true
39+
}
40+
41+
const close = () => {
42+
isOpen.value = false
43+
}
44+
</script>

‎packages/c-modal/examples/drawer-simple.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-button @click="toggleOpen">Open</c-button>
3+
<c-drawer v-model="isOpen">
4+
<c-drawer-overlay />
5+
<c-drawer-content>
6+
<div>This is the drawer content</div>
7+
<button @click="isOpen = false">This is a button</button>
8+
</c-drawer-content>
9+
</c-drawer>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { useToggle } from '@vueuse/core'
14+
15+
const [isOpen, toggleOpen] = useToggle(false)
16+
</script>

‎packages/c-modal/examples/drawer-with-much-content.vue

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<template>
2+
<c-button @click="toggleOpen">Open</c-button>
3+
<c-drawer v-model="isOpen" placement="bottom" size="md">
4+
<c-drawer-overlay />
5+
<c-drawer-content>
6+
<c-drawer-header border-bottom-width="1px">Basic Drawer</c-drawer-header>
7+
<c-drawer-close-button />
8+
<c-drawer-body>
9+
<input placeholder="Type here..." />
10+
<p>
11+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit,
12+
ligula sit amet pharetra accumsan, nulla augue fermentum dui, eget
13+
finibus diam sapien eget nisi. Fusce posuere tempus cursus. Nulla
14+
cursus dapibus ligula, sit amet facilisis libero tempor non. Quisque
15+
pharetra porttitor volutpat. Nulla eu volutpat tellus, a luctus neque.
16+
Duis at finibus ipsum. Nam gravida, eros vel auctor gravida, ipsum
17+
ante elementum ipsum, eget mattis purus justo et risus. Lorem ipsum
18+
dolor sit amet, consectetur adipiscing elit. Nunc faucibus tellus vel
19+
justo venenatis ultrices. Nam tincidunt felis quis gravida
20+
condimentum. Suspendisse non est ac nibh egestas consequat vehicula
21+
vitae odio. Fusce auctor metus ac mi elementum, non volutpat tortor
22+
luctus. Integer ultricies metus sed urna vestibulum, at dignissim diam
23+
condimentum. Etiam non diam iaculis, consectetur metus euismod,
24+
scelerisque purus. Maecenas pellentesque urna sit amet massa pretium
25+
congue. Mauris est justo, porttitor sed vestibulum at, efficitur in
26+
nulla. Ut nec dolor finibus augue pulvinar rhoncus. Aliquam auctor,
27+
nibh eget euismod vulputate, ante sem facilisis purus, at viverra
28+
libero velit bibendum lacus. Aenean blandit lorem urna, ut condimentum
29+
sapien cursus sit amet. Fusce augue ligula, suscipit nec pretium ut,
30+
venenatis ac ligula. Ut interdum, ipsum at tincidunt ultricies, mi est
31+
ultrices dui, eu pulvinar purus lorem eget ex. Praesent non eros
32+
felis. Donec ac elementum arcu. Praesent rutrum cursus ante, quis
33+
ornare mauris placerat eu. Cras auctor lacinia tincidunt. Integer
34+
dapibus felis quis urna fermentum, quis gravida dolor finibus. Sed non
35+
sapien urna. Nunc mattis enim eget enim consequat sodales. Aliquam
36+
pretium est ante, nec posuere lectus tempus sit amet. Fusce mattis
37+
tempor vulputate. Maecenas volutpat nunc nec ante sagittis fringilla.
38+
Etiam nec augue sed lacus faucibus tristique vitae id dolor. Sed
39+
posuere tortor et volutpat vulputate. Mauris ut sodales mauris. Nunc
40+
nulla risus, euismod eget fermentum vitae, mollis ac elit. Morbi
41+
ullamcorper, est ut tristique ultrices, enim augue commodo eros, ac
42+
aliquet quam ex quis lorem. Aenean vehicula tortor justo, suscipit
43+
consectetur libero tempus id. Vivamus sit amet pellentesque risus, ac
44+
mollis orci. Vestibulum accumsan, neque ac imperdiet cursus, nisi
45+
turpis luctus nulla, vitae ullamcorper nisi sem quis erat. Proin
46+
ullamcorper metus nec dui elementum, ut dapibus nisi tempus. Ut
47+
malesuada tellus eu commodo vulputate. Proin tristique, nulla nec
48+
finibus commodo, urna libero posuere purus, eu dictum dui felis
49+
pretium sapien. Vestibulum felis enim, pharetra tristique molestie id,
50+
viverra quis ante. Ut nulla ipsum, commodo ac ornare non, lobortis
51+
hendrerit dolor. Quisque quis pellentesque nunc. Donec varius quam
52+
massa. Vestibulum maximus urna id laoreet consequat. Phasellus ut
53+
pulvinar ex. Suspendisse vitae placerat dolor, vel elementum quam.
54+
Maecenas vestibulum felis sed metus posuere ultricies. Nulla sodales
55+
erat eros. Etiam elit ligula, elementum molestie maximus vel,
56+
condimentum id urna. Pellentesque molestie ut justo vel rhoncus. Duis
57+
sed quam varius, aliquet libero a, facilisis ante. Aliquam eget quam
58+
erat. Duis dictum odio in nunc bibendum pharetra. Aenean accumsan dui
59+
sit amet nibh condimentum, eget suscipit nisl blandit. Suspendisse
60+
potenti. Donec vel eleifend mauris. Morbi a tellus commodo, porta urna
61+
ac, aliquam tellus. Sed finibus facilisis neque sit amet fringilla.
62+
Pellentesque aliquam placerat nisi. Mauris quam risus, feugiat ac nibh
63+
et, aliquet mattis sapien. Nullam pharetra orci id nisi ultrices, et
64+
rhoncus dolor lobortis. Suspendisse venenatis ipsum eu sem facilisis,
65+
non fermentum lectus porttitor. Nunc tristique augue non dui tempor,
66+
venenatis pharetra nisi commodo. Aenean bibendum nisl scelerisque
67+
ligula egestas tincidunt. Aliquam fringilla blandit nunc at interdum.
68+
Maecenas tempus sed ipsum et iaculis. Pellentesque cursus elit velit,
69+
sed vulputate augue euismod a. Vivamus imperdiet scelerisque purus, at
70+
ultricies enim elementum sed. Suspendisse potenti. Suspendisse
71+
suscipit vulputate lacus. Donec auctor tincidunt lorem, in volutpat
72+
dolor pretium ut. Maecenas sed erat id sem dignissim aliquam. Fusce
73+
bibendum augue est, et dapibus sem molestie ac. Pellentesque nec arcu
74+
vehicula, faucibus mi vel, porta quam. Nunc scelerisque tristique
75+
varius. Mauris tristique enim diam, id hendrerit lacus euismod ac.
76+
Curabitur posuere dui nunc, at lacinia sem porttitor in. Sed facilisis
77+
dui vitae enim commodo, vel auctor purus sodales. Nam dictum quam non
78+
urna pretium, a commodo est luctus. Nulla pellentesque elit in justo
79+
elementum, feugiat malesuada nibh venenatis. Nunc ac pharetra mauris,
80+
non luctus orci. Lorem ipsum dolor sit amet, consectetur adipiscing
81+
elit. Nullam quis iaculis lorem. Donec id nunc mattis, pellentesque
82+
magna vel, scelerisque justo. Suspendisse potenti. Ut non lacus
83+
sapien. Quisque eget venenatis tellus. Cras ipsum felis, facilisis
84+
sagittis enim a, ultrices volutpat tellus. Vestibulum sed luctus orci,
85+
eget tincidunt nibh. Aenean suscipit tortor nec felis suscipit, et
86+
suscipit turpis finibus. Morbi aliquam ligula in nunc euismod, ac
87+
fermentum est dignissim. Cras elit dolor, aliquet a ligula eu,
88+
vulputate ultricies nisi. In a ullamcorper purus. Nulla consectetur in
89+
neque ut dapibus. Nullam eu lobortis leo. Integer eget dui dapibus,
90+
accumsan nisl sit amet, cursus ligula. Nam iaculis volutpat dui, sit
91+
amet aliquam odio aliquam vel. Morbi consectetur augue ornare, iaculis
92+
magna facilisis, fringilla lacus. Etiam in tempor elit, eu pulvinar
93+
nunc. Praesent quis lectus mollis, interdum sem sed, hendrerit justo.
94+
Nunc nec urna vehicula, posuere nisl id, tincidunt tortor. Sed
95+
porttitor maximus turpis, convallis sodales nunc vestibulum nec. Nulla
96+
sed venenatis enim, et iaculis nisi. In eros neque, suscipit vitae
97+
porta ut, auctor nec massa. Vivamus gravida, neque pharetra auctor
98+
facilisis, sapien eros eleifend purus, convallis sagittis sem diam a
99+
leo. Nam sit amet pulvinar sapien. Cras tempor volutpat dolor vitae
100+
tincidunt. Pellentesque rutrum elit vitae turpis elementum, a lacinia
101+
ligula mattis. Nulla sit amet augue vitae odio auctor feugiat quis eu
102+
nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
103+
mi lacus, elementum id ante in, porta rutrum lorem. Suspendisse tempus
104+
convallis mi vitae tempor. Donec nec tortor rhoncus, ornare lectus at,
105+
lobortis nibh. Suspendisse potenti. Proin ac tortor eu nulla iaculis
106+
blandit. Donec enim purus, egestas sed elit sit amet, tempor elementum
107+
elit. Donec in viverra purus. Phasellus quam odio, hendrerit et magna
108+
sit amet, tincidunt sagittis dolor. Vestibulum feugiat quis libero
109+
eget rhoncus. Maecenas tempus, nisl varius dictum rhoncus, nisl neque
110+
feugiat est, non ultricies mi augue non mauris. Generated 10
111+
paragraphs, 996 words, 6777 bytes of Lorem Ipsum
112+
</p>
113+
</c-drawer-body>
114+
<c-drawer-footer />
115+
</c-drawer-content>
116+
</c-drawer>
117+
</template>
118+
119+
<script setup lang="ts">
120+
import { useToggle } from '@vueuse/core'
121+
122+
const [isOpen, toggleOpen] = useToggle(false)
123+
</script>

0 commit comments

Comments
 (0)