Skip to content

Commit d1d67da

Browse files
teleskop150750teleskop150750
committed
feat: ToggleGroup
1 parent 6a7a112 commit d1d67da

File tree

14 files changed

+836
-296
lines changed

14 files changed

+836
-296
lines changed

‎packages/vue-primitives/src/App.vue‎

Lines changed: 20 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<script setup lang="ts">
2-
import { computed, shallowRef } from 'vue'
2+
import { computed, onMounted, shallowRef, watchSyncEffect } from 'vue'
33
// import Foo from '../src/Foo.vue'
44
// import Primitive from './primitive/Primitive.vue'
5-
import Toggle from './toggle/Toggle.vue'
6-
import RovingFocusGroup from './roving-focus/RovingFocusGroup.vue'
7-
import RovingFocusItem from './roving-focus/RovingFocusItem.vue'
5+
import { Toggle } from './toggle/index.ts'
6+
import { ToggleGroup, ToggleGroupItem } from './toggle-group/index.ts'
87
98
const open = shallowRef(true)
109
const dis = shallowRef(true)
@@ -25,21 +24,22 @@ const on = computed(() => {
2524
}
2625
})
2726
28-
// watchEffect(() => {
29-
// console.log('open', on.value)
30-
// })
31-
32-
// const a1 = shallowRef()
33-
// const a2 = shallowRef()
34-
// const a3 = shallowRef()
35-
// const a4 = shallowRef()
36-
3727
function log(event: Event) {
3828
if (dis.value) {
3929
event.preventDefault()
4030
}
4131
console.error('LOG')
4232
}
33+
34+
const a = shallowRef<any>()
35+
36+
watchSyncEffect(() => {
37+
console.log('a:', a.value?.$el)
38+
})
39+
40+
onMounted(() => {
41+
// console.log(a.value)
42+
})
4343
</script>
4444

4545
<template>
@@ -52,44 +52,20 @@ function log(event: Event) {
5252
</button>
5353

5454
<div>
55-
<RovingFocusGroup>
56-
<RovingFocusItem>
55+
<ToggleGroup type="single">
56+
<ToggleGroupItem value="1">
5757
1
58-
</RovingFocusItem>
59-
<RovingFocusItem>
58+
</ToggleGroupItem>
59+
<ToggleGroupItem value="2">
6060
2
61-
</RovingFocusItem>
62-
</RovingFocusGroup>
63-
</div>
64-
<div>
65-
<!-- <Primitive ref="a1" class="baz" @click="log">
66-
content
67-
</Primitive> -->
68-
</div>
69-
<div>
70-
<!-- <Primitive ref="a2" as="button" type="button" class="baz" @click="log">
71-
content
72-
</Primitive> -->
73-
</div>
74-
<div>
75-
<!-- <Primitive ref="a3" as-child class="baz" @click="log">
76-
<button type="button">
77-
content
78-
</button>
79-
</Primitive> -->
80-
</div>
81-
<div>
82-
<!-- <Primitive ref="a4" :as="Foo" class="baz" @click="log">
83-
content
84-
</Primitive> -->
61+
</ToggleGroupItem>
62+
</ToggleGroup>
8563
</div>
64+
8665
<div>
8766
<Toggle v-on="on">
8867
Toggle
8968
</Toggle>
90-
<!-- <button @click="log">
91-
Toggle
92-
</button> -->
9369
</div>
9470
<div>
9571
<pre>{{ on }}</pre>

‎packages/vue-primitives/src/collection/stories/Collection.stories.tsx‎

Lines changed: 63 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Item = defineComponent({
2424
// },
2525
setup(_, { slots, attrs }) {
2626
const currentElement = shallowRef<HTMLElement>()
27-
Collection.useCollectionItem(currentElement, attrs)
27+
Collection.useCollectionItem(currentElement, attrs as unknown as ItemData)
2828

2929
return () => (
3030
<li ref={currentElement} class="item" style={{ opacity: attrs.disabled ? 0.3 : undefined }} {...{ [ITEM_DATA_ATTR]: '' }}>
@@ -109,76 +109,72 @@ export function WithFragment() {
109109
)
110110
}
111111

112-
const DynamicInsertionDemo = defineComponent({
113-
setup() {
114-
const hasTomato = shallowRef(false)
115-
116-
function setHasTomato(value: boolean) {
117-
hasTomato.value = value
118-
}
119-
120-
function log() {
121-
console.warn('Items:', Array.from(document.querySelectorAll(`[${ITEM_DATA_ATTR}]`)))
122-
}
123-
124-
return () => (
125-
<>
126-
<button onClick={() => setHasTomato(!hasTomato.value)}>
127-
{hasTomato ? 'Remove' : 'Add'}
128-
{' '}
129-
Tomato
130-
</button>
131-
<button onClick={() => log()} style={{ marginLeft: 10 }}>
132-
Force Update
133-
</button>
134-
135-
<List>
136-
<Item>Red</Item>
137-
{ hasTomato.value && <Tomato />}
138-
<Item {...{ disabled: true }}>
139-
Green
140-
</Item>
141-
<Item>Blue</Item>
142-
<LogItems />
143-
</List>
144-
</>
145-
)
146-
},
147-
})
148-
149112
export function DynamicInsertion() {
150-
return <DynamicInsertionDemo />
113+
return defineComponent({
114+
setup() {
115+
const hasTomato = shallowRef(false)
116+
117+
function setHasTomato(value: boolean) {
118+
hasTomato.value = value
119+
}
120+
121+
function log() {
122+
console.warn('Items:', Array.from(document.querySelectorAll(`[${ITEM_DATA_ATTR}]`)))
123+
}
124+
125+
return () => (
126+
<>
127+
<button onClick={() => setHasTomato(!hasTomato.value)}>
128+
{hasTomato ? 'Remove' : 'Add'}
129+
{' '}
130+
Tomato
131+
</button>
132+
<button onClick={() => log()} style={{ marginLeft: 10 }}>
133+
Force Update
134+
</button>
135+
136+
<List>
137+
<Item>Red</Item>
138+
{ hasTomato.value && <Tomato />}
139+
<Item {...{ disabled: true }}>
140+
Green
141+
</Item>
142+
<Item>Blue</Item>
143+
<LogItems />
144+
</List>
145+
</>
146+
)
147+
},
148+
})
151149
}
152150

153-
const WithChangingItemDemo = defineComponent({
154-
setup() {
155-
const isDisabled = shallowRef(false)
156-
157-
function setIsDisabled(value: boolean) {
158-
isDisabled.value = value
159-
}
160-
161-
return () => (
162-
<>
163-
<button onClick={() => setIsDisabled(!isDisabled.value)}>
164-
{isDisabled ? 'Enable' : 'Disable'}
165-
{' '}
166-
Green
167-
</button>
168-
169-
<List>
170-
<Item>Red</Item>
171-
<Item {...{ disabled: isDisabled.value }}>Green</Item>
172-
<Item>Blue</Item>
173-
<LogItems />
174-
</List>
175-
</>
176-
)
177-
},
178-
})
179-
180151
export function WithChangingItem() {
181-
return <WithChangingItemDemo />
152+
return defineComponent({
153+
setup() {
154+
const isDisabled = shallowRef(false)
155+
156+
function setIsDisabled(value: boolean) {
157+
isDisabled.value = value
158+
}
159+
160+
return () => (
161+
<>
162+
<button onClick={() => setIsDisabled(!isDisabled.value)}>
163+
{isDisabled ? 'Enable' : 'Disable'}
164+
{' '}
165+
Green
166+
</button>
167+
168+
<List>
169+
<Item>Red</Item>
170+
<Item {...{ disabled: isDisabled.value }}>Green</Item>
171+
<Item>Blue</Item>
172+
<LogItems />
173+
</List>
174+
</>
175+
)
176+
},
177+
})
182178
}
183179

184180
export function Nested() {

‎packages/vue-primitives/src/roving-focus/RovingFocusGroup.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
1616
preventScrollOnEntryFocus: false,
1717
})
1818
const emit = defineEmits<RovingFocusGroupEmits>()
19-
2019
const attrs = useAttrs()
21-
const rootElRef = shallowRef<HTMLElement>()
20+
21+
const elRef = shallowRef<HTMLElement>()
2222
2323
const dir = useDirection(() => props.dir)
2424
const currentTabStopId = useControllableState(props, emit, 'currentTabStopId', props.defaultCurrentTabStopId)
2525
26-
const collectionContext = Collection.provideCollectionContext(rootElRef)
26+
const collectionContext = Collection.provideCollectionContext(elRef)
2727
const getItems = useCollection(collectionContext)
2828
const isTabbingBackOut = shallowRef(false)
2929
let isClickFocus = false
@@ -91,11 +91,12 @@ provideRovingFocusContext({
9191

9292
<template>
9393
<Primitive
94-
:ref="(el: any) => rootElRef = (el?.$el ?? el) || undefined"
94+
:ref="(el: any) => elRef = (el?.$el ?? el) || undefined"
9595
:as="as"
9696
:as-child="asChild"
9797
:tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
9898
:data-orientation="orientation"
99+
style="outline: none;"
99100
v-bind="{
100101
...attrs,
101102
onMousedown,

‎packages/vue-primitives/src/roving-focus/RovingFocusItem.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<RovingFocusItemProps>(), {
1818
active: true,
1919
as: 'span',
2020
})
21-
2221
const attrs = useAttrs()
2322
2423
const id = computed(() => props.tabStopId || useId())

0 commit comments

Comments
 (0)