8000 feat(components)!: refactor components and make them consistent (#4912) · vueuse/vueuse@8c521d4 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8c521d4

Browse files
ilyaliaoilyaliao
authored
feat(components)!: refactor components and make them consistent (#4912)
1 parent b2aa062 commit 8c521d4

File tree

72 files changed

+1260
-466
lines changed

Some content is hidden

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

72 files changed

+1260
-466
lines changed

‎packages/core/onClickOutside/component.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import type { RenderableComponent } from '../types'
2-
import type { OnClickOutsideOptions } from './index'
1+
import type { OnClickOutsideOptions, RenderableComponent } from '@vueuse/core'
32
import { onClickOutside } from '@vueuse/core'
43
import { defineComponent, h, shallowRef } from 'vue'
54

65
export interface OnClickOutsideProps extends RenderableComponent {
76
options?: Omit<OnClickOutsideOptions, 'controls'>
87
}
8+
// eslint-disable-next-line ts/consistent-type-definitions
9+
export type OnClickOutsideEmits = {
10+
trigger: (event: Event) => void
11+
}
912

10-
export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProps>({
11-
name: 'OnClickOutside',
12-
props: ['as', 'options'] as unknown as undefined,
13-
emits: ['trigger'],
14-
setup(props, { slots, emit }) {
13+
export const OnClickOutside = /* #__PURE__ */ defineComponent<
14+
OnClickOutsideProps,
15+
OnClickOutsideEmits
16+
>(
17+
(props, { slots, emit }) => {
1518
const target = shallowRef<HTMLDivElement>()
1619
onClickOutside(target, (e) => {
1720
emit('trigger', e)
@@ -22,4 +25,9 @@ export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProp
2225
return h(props.as || 'div', { ref: target }, slots.default())
2326
}
2427
},
25-
})
28+
{
29+
name: 'OnClickOutside',
30+
props: ['as', 'options'],
31+
emits: ['trigger'],
32+
},
33+
)

‎packages/core/onClickOutside/directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import type { OnClickOutsideHandler, OnClickOutsideOptions } from '@vueuse/core'
12
import type { Fn } from '@vueuse/shared'
23
import type { ObjectDirective } from 'vue'
3-
import type { OnClickOutsideHandler, OnClickOutsideOptions } from './index'
4-
import { onClickOutside } from './index'
4+
import { onClickOutside } from '@vueuse/core'
55

66
type StopHandle = Fn | { stop: Fn, cancel: Fn, trigger: (event: Event) => void }
77

‎packages/core/onKeyStroke/directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import type { OnKeyStrokeOptions } from '@vueuse/core'
12
import type { ObjectDirective } from 'vue'
2-
import type { OnKeyStrokeOptions } from './index'
3-
import { onKeyStroke } from './index'
3+
import { onKeyStroke } from '@vueuse/core'
44

55
type BindingValueFunction = (event: KeyboardEvent) => void
66

‎packages/core/onLongPress/component.ts‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
1-
import type { RenderableComponent } from '../types'
2-
import type { OnLongPressOptions } from './index'
1+
import type { OnLongPressOptions, RenderableComponent, UseOnLongPressReturn } from '@vueuse/core'
2+
import type { SlotsType } from 'vue'
3+
import { onLongPress } from '@vueuse/core'
34
import { defineComponent, h, shallowRef } from 'vue'
4-
import { onLongPress } from './index'
55

66
export interface OnLongPressProps extends RenderableComponent {
77
options?: OnLongPressOptions
88
}
9+
// eslint-disable-next-line ts/consistent-type-definitions
10+
export type OnLongPressEmits = {
11+
trigger: (event: PointerEvent) => void
12+
}
13+
14+
interface OnLongPressSlots {
15+
default: (data: UseOnLongPressReturn) => any
16+
}
917

10-
export const OnLongPress = /* #__PURE__ */ defineComponent<OnLongPressProps>({
11-
name: 'OnLongPress',
12-
props: ['as', 'options'] as unknown as undefined,
13-
emits: ['trigger'],
14-
setup(props, { slots, emit }) {
18+
export const OnLongPress = /* #__PURE__ */ defineComponent<
19+
OnLongPressProps,
20+
OnLongPressEmits,
21+
string,
22+
SlotsType<OnLongPressSlots>
23+
>(
24+
(props, { slots, emit }) => {
1525
const target = shallowRef<HTMLElement>()
16-
onLongPress(
26+
const data = onLongPress(
1727
target,
1828
(e) => {
1929
emit('trigger', e)
2030
},
2131
props.options,
2232
)
33+
2334
return () => {
2435
if (slots.default)
25-
return h(props.as || 'div', { ref: target }, slots.default())
36+
return h(props.as || 'div', { ref: target }, slots.default(data))
2637
}
2738
},
28-
})
39+
{
40+
name: 'OnLongPress',
41+
props: ['as', 'options'],
42+
emits: ['trigger'],
43+
},
44+
)

‎packages/core/onLongPress/directive.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import type { OnLongPressOptions } from '@vueuse/core'
12
import type { ObjectDirective } from 'vue'
2-
import type { OnLongPressOptions } from './index'
3-
4-
import { onLongPress } from './index'
3+
import { onLongPress } from '@vueuse/core'
54

65
type BindingValueFunction = (evt: PointerEvent) => void
76

‎packages/core/onLongPress/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,5 @@ export function onLongPress(
155155

156156
return stop
157157
}
158+
159+
export type UseOnLongPressReturn = ReturnType<typeof onLongPress>

‎packages/core/useActiveElement/component.ts‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,36 @@
1+
import type { UseActiveElementOptions, UseActiveElementReturn } from '@vueuse/core'
2+
import type { Reactive, SlotsType } from 'vue'
13
import { useActiveElement } from '@vueuse/core'
24
import { defineComponent, reactive } from 'vue'
35

4-
export const UseActiveElement = /* #__PURE__ */ defineComponent({
5-
name: 'UseActiveElement',
6-
setup(props, { slots }) {
6+
export interface UseActiveElementProps extends UseActiveElementOptions {}
7+
interface UseActiveElementSlots {
8+
default: (data: Reactive<{ element: UseActiveElementReturn }>) => any
9+
}
10+
11+
export const UseActiveElement = /* #__PURE__ */ defineComponent<
12+
UseActiveElementProps,
13+
Record<string, never>,
14+
string,
15+
SlotsType<UseActiveElementSlots>
16+
>(
17+
(props, { slots }) => {
718
const data = reactive({
8-
element: useActiveElement(),
19+
element: useActiveElement(props),
920
})
1021

1122
return () => {
1223
if (slots.default)
1324
return slots.default(data)
1425
}
1526
},
16-
})
27+
{
28+
name: 'UseActiveElement',
29+
props: [
30+
'deep',
31+
'triggerOnRemoval',
32+
'window',
33+
'document',
34+
],
35+
},
36+
)

‎packages/core/useActiveElement/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ watch(activeElement, (el) => {
2626
```vue
2727
<template>
2828
<UseActiveElement v-slot="{ element }">
29-
Active element is {{ element.dataset.id }}
29+
Active element is {{ element?.dataset.id }}
3030
</UseActiveElement>
3131
</template>
3232
```

‎packages/core/useActiveElement/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,5 @@ export function useActiveElement<T extends HTMLElement>(
8383

8484
return activeElement
8585
}
86+
87+
export type UseActiveElementReturn = ReturnType<typeof useActiveElement>

‎packages/core/useBattery/component.ts‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
1+
import type { ConfigurableNavigator, UseBatteryReturn } from '@vueuse/core'
2+
import type { Reactive, SlotsType } from 'vue'
13
import { useBattery } from '@vueuse/core'
24
import { defineComponent, reactive } from 'vue'
35

4-
export const UseBattery = /* #__PURE__ */ defineComponent({
5-
name: 'UseBattery',
6-
setup(props, { slots }) {
6+
export interface UseBatteryProps extends ConfigurableNavigator {}
7+
interface UseBatterySlots {
8+
default: (data: Reactive<UseBatteryReturn>) => any
9+
}
10+
11+
export const UseBattery = /* #__PURE__ */ defineComponent<
12+
UseBatteryProps,
13+
Record<string, never>,
14+
string,
15+
SlotsType<UseBatterySlots>
16+
>(
17+
(props, { slots }) => {
718
const data = reactive(useBattery(props))
819

920
return () => {
1021
if (slots.default)
1122
return slots.default(data)
1223
}
1324
},
14-
})
25+
{
26+
name: 'UseBattery',
27+
props: ['navigator'],
28+
},
29+
)

0 commit comments

Comments
 (0)
0