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

Commit 4e890c9

Browse files
codebender828codebender828
committed
fix(use-modal): provide computed variables
1 parent 3e2a200 commit 4e890c9

File tree

17 files changed

+316
-234
lines changed

17 files changed

+316
-234
lines changed

‎packages/c-focus-lock/examples/with-focus-lock-component.vue

Lines changed: 69 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,69 @@
44
Focus trap enabled: {{ isActive }}
55
</chakra.pre>
66
<c-portal to="#new-target">
7-
<c-focus-lock
8-
p="4"
9-
border="4px dashed"
10-
rounded="lg"
11-
border-color="gray.400"
12-
d="inline-block"
13-
@activate="handleActivate"
14-
@deactivate="handleDeactivate"
15-
:allow-outside-click="false"
16-
:initial-focus-ref="() => initialFocusRef"
17-
:final-focus-ref="() => finalFocusRef"
18-
#default="{ hasFocus, deactivate }"
19-
pos="relative"
20-
v-if="isActive"
21-
>
22-
<c-close-button
23-
position="absolute"
24-
top="10px"
25-
right="10px"
26-
@click="deactivate"
27-
></c-close-button>
28-
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
29-
<chakra.p mb="2">Inside focus trap</chakra.p>
30-
<c-button color-scheme="teal"> Login </c-button>
31-
<c-button :ref="initialFocus" color-scheme="yellow" mx="2"
32-
>Initial focus!</c-button
7+
<c-motion type="fade">
8+
<c-focus-lock
9+
p="4"
10+
border="4px dashed"
11+
rounded="lg"
12+
border-color="gray.400"
13+
d="inline-block"
14+
@activate="handleActivate"
15+
@deactivate="handleDeactivate"
16+
:allow-outside-click="false"
17+
:initial-focus-ref="() => initialFocusRef"
18+
:final-focus-ref="() => finalFocusRef"
19+
#default="{ hasFocus, deactivate }"
20+
pos="relative"
21+
v-if="isActive"
3322
>
34-
<c-button left-icon="user" color-scheme="red">Delete account</c-button>
35-
</c-focus-lock>
23+
<chakra.div>
24+
<c-close-button
25+
position="absolute"
26+
top="10px"
27+
right="10px"
28+
@click="deactivate"
29+
></c-close-button>
30+
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
31+
<chakra.p mb="2">Inside focus trap</chakra.p>
32+
<c-button color-scheme="teal"> Login </c-button>
33+
<c-button :ref="initialFocus" color-scheme="yellow" mx="2"
34+
>Initial focus!</c-button
35+
>
36+
<c-button left-icon="user" color-scheme="red"
37+
>Delete account</c-button
38+
>
39+
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
40+
<chakra.p mb="2">Inside focus trap</chakra.p>
41+
<c-button color-scheme="teal"> Login </c-button>
42+
<c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
43+
<c-button left-icon="user" color-scheme="red"
44+
>Delete account</c-button
45+
>
46+
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
47+
<chakra.p mb="2">Inside focus trap</chakra.p>
48+
<c-button color-scheme="teal"> Login </c-button>
49+
<c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
50+
<c-button left-icon="user" color-scheme="red"
51+
>Delete account</c-button
52+
>
53+
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
54+
<chakra.p mb="2">Inside focus trap</chakra.p>
55+
<c-button color-scheme="teal"> Login </c-button>
56+
<c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
57+
<c-button left-icon="user" color-scheme="red"
58+
>Delete account</c-button
59+
>
60+
<chakra.pre> Focus trap enabled: {{ hasFocus }} </chakra.pre>
61+
<chakra.p mb="2">Inside focus trap</chakra.p>
62+
<c-button color-scheme="teal"> Login </c-button>
63+
<c-button color-scheme="yellow" mx="2">Initial focus!</c-button>
64+
<c-button left-icon="user" color-scheme="red"
65+
>Delete account</c-button
66+
>
67+
</chakra.div>
68+
</c-focus-lock>
69+
</c-motion>
3670
</c-portal>
3771

3872
<chakra.div
@@ -59,7 +93,7 @@
5993

6094
<script lang="ts">
6195
import { useRef } from '@chakra-ui/vue-utils'
62-
import { defineComponent, ref } from 'vue'
96+
import { defineComponent, ref, watch } from 'vue'
6397
import { CFocusLock } from '../src/c-focus-lock'
6498
6599
if (!document.getElementById('new-target')) {
@@ -92,6 +126,12 @@ export default defineComponent({
92126
setTimeout(() => {})
93127
}
94128
129+
watch(isActive, () => {
130+
setTimeout(() => {
131+
isActive.value = !isActive.value
132+
}, 3000)
133+
})
134+
95135
return {
96136
isActive,
97137
handleActivate,

‎packages/c-focus-lock/examples/with-focus-lock-hook.vue

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,33 @@
55
-->
66
<chakra.div>
77
<c-portal to="#new-target">
8-
<chakra.div
9-
:ref="lock"
10-
p="4"
11-
border="4px dashed"
12-
rounded="lg"
13-
border-color="gray.400"
14-
d="inline-block"
15-
position="relative"
16-
v-if="isLocked"
17-
>
18-
<c-close-button
19-
position="absolute"
20-
top="10px"
21-
right="10px"
22-
@click="deactivate"
23-
></c-close-button>
24-
<chakra.p mb="2">Inside focus trap</chakra.p>
25-
<c-button color-scheme="teal"> Login </c-button>
26-
<c-button color-scheme="yellow" :ref="initialFocus" mx="2"
27-
>Initial focus!</c-button
8+
<c-motion type="fade">
9+
<chakra.div
10+
:ref="lock"
11+
p="4"
12+
border="4px dashed"
13+
rounded="lg"
14+
border-color="gray.400"
15+
d="inline-block"
16+
position="relative"
17+
v-if="isLocked"
2818
>
29-
<c-button left-icon="user" color-scheme="red">Delete account</c-button>
30-
</chakra.div>
19+
<c-close-button
20+
position="absolute"
21+
top="10px"
22+
right="10px"
23+
@click="deactivate"
24+
></c-close-button>
25+
<chakra.p mb="2">Inside focus trap</chakra.p>
26+
<c-button color-scheme="teal"> Login </c-button>
27+
<c-button color-scheme="yellow" :ref="initialFocus" mx="2"
28+
>Initial focus!</c-button
29+
>
30+
<c-button left-icon="user" color-scheme="red"
31+
>Delete account</c-button
32+
>
33+
</chakra.div>
34+
</c-motion>
3135
</c-portal>
3236
<chakra.div
3337
p="4"
@@ -81,7 +85,7 @@ const {
8185
const activate = async () => {
8286
isLocked.value = true
8387
// setTimeout(lockactivate)
84-
lockactivate()
88+
setTimeout(lockactivate)
8589
}
8690
8791
const deactivate = () => {

‎packages/c-focus-lock/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
},
3939
"dependencies": {
4040
"@chakra-ui/utils": "^1.5.0",
41-
"@chakra-ui/vue-system": "0.1.0-alpha.1",
41+
"@chakra-ui/vue-system": "0.1.0-alpha.2",
4242
"focus-trap": "^6.3.0"
4343
},
4444
"peerDependencies": {

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

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@
1414
* and my suspicion is that it is happening inside the library
1515
*/
1616

17-
import { h, defineComponent, PropType, computed } from 'vue'
17+
import {
18+
h,
19+
defineComponent,
20+
PropType,
21+
computed,
22+
cloneVNode,
23+
VNode,
24+
watch,
25+
} from 'vue'
1826
import { chakra } from '@chakra-ui/vue-system'
1927
import { focus, FocusableElement, __DEV__ } from '@chakra-ui/utils'
2028
import { UseFocusLockOptions, useFocusLock } from './use-focus-lock'
@@ -43,10 +51,10 @@ export const CFocusLock = defineComponent({
4351
name: 'CFocusLock',
4452
emits: ['activate', 'deactivate'],
4553
props: {
46-
finalFocusRef: [String, Function] as PropType<
54+
finalFocusRef: [String, Object, Function] as PropType<
4755
FocusLockProps['finalFocusRef']
4856
>,
49-
initialFocusRef: [String, Function] as PropType<
57+
initialFocusRef: [String, Object, Function] as PropType<
5058
FocusLockProps['initialFocusRef']
5159
>,
5260
autoFocus: {
@@ -90,7 +98,7 @@ export const CFocusLock = defineComponent({
9098
/**
9199
* Basic state for focus lock component.
92100
*/
93-
const { lock, ...focusLockState } = useFocusLock({
101+
const { lock } = useFocusLock({
94102
...props,
95103
onActivate() {
96104
emit('activate')
@@ -110,21 +118,21 @@ export const CFocusLock = defineComponent({
110118
immediate: props.autoFocus,
111119
})
112120

113-
return () =>
114-
h(
115-
chakra('div', {
116-
label: 'focus-lock',
117-
}),
118-
{
119-
// @ts-expect-error
120-
ref: lock,
121-
...attrs,
122-
},
123-
() =>
124-
slots.default?.({
125-
...focusLockState,
126-
hasFocus: focusLockState.hasFocus.value,
127-
})
128-
)
121+
return () => {
122+
const [firstChild] = slots.default?.({}) as VNode[]
123+
124+
if (!firstChild) {
125+
console.warn(
126+
`[chakra-ui:focus-lock]: Focus lock component expects at least and only one child element.`
127+
)
128+
return
129+
}
130+
131+
return cloneVNode(firstChild, {
132+
ref: lock,
133+
...attrs,
134+
'data-chakra-focus-lock': '',
135+
})
136+
}
129137
},
130138
})

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,12 @@ export function useFocusLock(
118118
}
119119
}
120120

121-
watch(contentEl, (el) => console.log('contentEl', el))
122-
123121
watch(
124122
lockEl,
125123
async (el) => {
126124
await nextTick()
127125
if (!el) return
126+
128127
trap = createFocusTrap(el, {
129128
initialFocus: initialFocusEl.value as FocusTarget,
130129
...focusLockOptions,
@@ -135,17 +134,16 @@ export function useFocusLock(
135134
// may not yet be active. So just in case,
136135
// There's a fallback call here to focus the
137136
// element after the initial focus element is focused.
137+
const container = contentEl.value || el
138138
let initialFocus = initialFocusEl.value ?? getFirstFocusable(el)
139139
if (initialFocusEl.value) {
140140
initialFocus = initialFocusEl.value
141141
} else {
142142
const focusables = getAllFocusable(contentEl.value || el)
143143
if (focusables.length) {
144-
initialFocus = focusables[0]
145-
console.log(focusables)
144+
;[initialFocus] = focusables.filter((el) => el !== container)
146145
}
147146
}
148-
console.log('initialFocusElement', initialFocus)
149147
setTimeout(() => focus(initialFocus))
150148

151149
// Apply if consumer provides onActivate option

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<c-modal v-model:is-open="isOpen">
1212
<c-modal-overlay />
1313
<c-modal-content>
14+
<c-modal-header>Modal header</c-modal-header>
1415
<chakra.div p="10">
1516
<c-button @click="isOpen = false">Hello, Modal! ⚡️</c-button>
1617
</chakra.div>

0 commit comments

Comments
 (0)