Skip to content

Commit 3b0b7c0

Browse files
jevin98jevin98
committed
chore(popper): eslint format
1 parent 384f16b commit 3b0b7c0

File tree

12 files changed

+178
-169
lines changed

12 files changed

+178
-169
lines changed

‎packages/component/component/popper/component/content.vue

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
<script setup lang="ts">
2-
import type { Ref, StyleValue, CSSProperties } from "vue";
3-
import { type ContentProps, CONTENT_INJECTION_KEY } from "../types";
2+
import type { CSSProperties, Ref, StyleValue } from "vue";
3+
import type { ContentProps } from "../types";
44
5+
import { onClickOutside } from "@vueuse/core";
56
import {
6-
ref,
77
computed,
8-
provide,
98
inject,
10-
watch,
11-
useSlots,
12-
onMounted,
139
onBeforeUnmount,
10+
onMounted,
11+
provide,
12+
ref,
13+
useSlots,
14+
watch,
1415
} from "vue";
15-
import { onClickOutside } from "@vueuse/core";
16-
import { usePopper, flip, hide, offset, shift } from "../usePopper/index";
16+
import { CONTENT_INJECTION_KEY } from "../types";
17+
import { flip, hide, offset, shift, usePopper } from "../usePopper/index";
1718
1819
import {
19-
POPPER_INJECTION_KEY,
2020
arrowMiddleware,
21-
getArrowPlacement,
2221
getArrowOffer,
22+
getArrowPlacement,
23+
POPPER_INJECTION_KEY,
2324
} from "../utils";
2425
2526
const props = withDefaults(defineProps<ContentProps>(), {});
@@ -32,7 +33,7 @@ const currentContents: Array<Ref<HTMLElement>> = [];
3233
const { TriggerRef, onShow, onHidden } = inject(POPPER_INJECTION_KEY)!;
3334
const { allContents: parentAllContents = [] } = inject(
3435
CONTENT_INJECTION_KEY,
35-
{}
36+
{},
3637
);
3738
3839
const isExist = ref(props.modelValue);
@@ -53,17 +54,9 @@ watch(
5354
}
5455
innerVisible.value = props.modelValue || _visible.value;
5556
}
56-
}
57+
},
5758
);
5859
59-
const classes = computed(() => {
60-
return ["layui-popper", "layui-anim", props.popperClass];
61-
});
62-
63-
const stylees = computed(() => {
64-
return [_popperStyle.value as CSSProperties, props.popperStyle] as StyleValue;
65-
});
66-
6760
const teleportProps = computed(() => {
6861
return props.teleportProps!;
6962
});
@@ -90,6 +83,14 @@ const {
9083
],
9184
});
9285
86+
const classes = computed(() => {
87+
return ["layui-popper", "layui-anim", props.popperClass];
88+
});
89+
90+
const stylees = computed(() => {
91+
return [_popperStyle.value as CSSProperties, props.popperStyle] as StyleValue;
92+
});
93+
9394
watch(
9495
() => middlewareData.value.hide,
9596
(data) => {
@@ -98,40 +99,41 @@ watch(
9899
display: data!.referenceHidden
99100
? "none"
100101
: !innerVisible.value
101-
? "none"
102-
: "block",
102+
? "none"
103+
: "block",
103104
});
104105
}
105-
}
106+
},
106107
);
107108
108109
watch(innerVisible, () => {
109110
if (innerVisible.value) {
110111
startAutoUpdate.value && startAutoUpdate.value();
111-
} else {
112+
}
113+
else {
112114
stopAutoUpdate.value && stopAutoUpdate.value();
113115
}
114116
});
115117
116-
const removeCurrentContentLink = () => {
118+
function removeCurrentContentLink() {
117119
/**
118120
* 删除当前 `currentContents` 管理的队列
119121
*/
120122
parentAllContents.splice(
121-
parentAllContents.findIndex((contents) => contents === currentContents),
122-
1
123+
parentAllContents.findIndex(contents => contents === currentContents),
124+
1,
123125
);
124126
125127
/**
126128
* 删除在其他队列中的当前 `ContentRef`
127129
*/
128130
parentAllContents.forEach((contents) => {
129131
contents.splice(
130-
contents.findIndex((content) => content.value === ContentRef.value),
131-
1
132+
contents.findIndex(content => content.value === ContentRef.value),
133+
1,
132134
);
133135
});
134-
};
136+
}
135137
136138
onBeforeUnmount(() => {
137139
stopAutoUpdate.value && stopAutoUpdate.value();
@@ -141,11 +143,12 @@ onBeforeUnmount(() => {
141143
142144
onClickOutside(ContentRef, (event: PointerEvent) => {
143145
if (
144-
!props.clickOutsideToClose ||
145-
!innerVisible.value ||
146-
(TriggerRef.value as HTMLElement).contains(event.target as HTMLElement)
147-
)
146+
!props.clickOutsideToClose
147+
|| !innerVisible.value
148+
|| (TriggerRef.value as HTMLElement).contains(event.target as HTMLElement)
149+
) {
148150
return;
151+
}
149152
150153
for (const item of currentContents) {
151154
if (item.value?.contains(event.target as HTMLElement)) {
@@ -156,28 +159,28 @@ onClickOutside(ContentRef, (event: PointerEvent) => {
156159
onHidden();
157160
});
158161
159-
const onContentEnter = () => {
162+
function onContentEnter() {
160163
if (props.enterable && props.trigger?.includes("hover")) {
161164
onShow();
162165
}
163-
};
166+
}
164167
165-
const onContentLeave = () => {
168+
function onContentLeave() {
166169
if (props.trigger?.includes("hover")) {
167170
onHidden();
168171
}
169-
};
172+
}
170173
171-
const show = () => {
174+
function show() {
172175
onShow();
173176
_visible.value = true;
174-
};
177+
}
175178
176-
const hidden = () => {
179+
function hidden() {
177180
// TODO 兼容popConfirm组件使用当前函数关闭popper，造成modelValue未改变弹窗依然显示
178181
onHidden();
179182
_visible.value = false;
180-
};
183+
}
181184
182185
onMounted(() => {
183186
parentAllContents.forEach((content) => {
@@ -194,20 +197,20 @@ defineExpose({ show, hidden, update });
194197

195198
<template>
196199
<Teleport
200+
v-if="isExist && hasDefaultContent"
197201
:to="teleportProps.to"
198202
:disabled="teleportProps.disabled"
199-
v-if="isExist && hasDefaultContent"
200203
>
201204
<div
202-
:class="classes"
203205
v-show="innerVisible"
204-
:style="stylees"
205206
ref="ContentRef"
207+
:class="classes"
208+
:style="stylees"
206209
@mouseenter="onContentEnter"
207210
@mouseleave="onContentLeave"
208211
>
209-
<slot></slot>
210-
<div ref="ArrowRef" data-popper-arrow v-if="showArrow"></div>
212+
<slot />
213+
<div v-if="showArrow" ref="ArrowRef" data-popper-arrow />
211214
</div>
212215
</Teleport>
213216
</template>

‎packages/component/component/popper/component/forward-ref.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
import { Fragment, defineComponent, ref } from "vue";
1+
import type { ComponentPublicInstance, Ref, VNodeArrayChildren } from "vue";
22

3-
import type { Ref, ComponentPublicInstance, VNodeArrayChildren } from "vue";
3+
import { defineComponent, Fragment, ref } from "vue";
44

55
type RefSetter = (el: Element | ComponentPublicInstance | undefined) => void;
66

77
const isArray = Array.isArray;
88
const isFunction = (val: unknown): val is Function => typeof val === "function";
99

10-
const composeRefs = (...refs: (Ref<HTMLElement | undefined> | RefSetter)[]) => {
10+
function composeRefs(...refs: (Ref<HTMLElement | undefined> | RefSetter)[]) {
1111
return (el: HTMLElement | ComponentPublicInstance | null) => {
1212
refs.forEach((ref) => {
1313
if (isFunction(ref)) {
1414
ref(el as HTMLElement | ComponentPublicInstance);
15-
} else {
15+
}
16+
else {
1617
ref.value = el as HTMLElement | undefined;
1718
}
1819
});
1920
};
20-
};
21+
}
2122

22-
const ensureOnlyChild = (children: VNodeArrayChildren | undefined) => {
23+
function ensureOnlyChild(children: VNodeArrayChildren | undefined) {
2324
if (!isArray(children) || children.length > 1) {
2425
throw new Error("expect to receive a single Vue element child");
2526
}
2627
return children[0];
27-
};
28+
}
2829

2930
export default defineComponent({
3031
props: {
@@ -38,9 +39,10 @@ export default defineComponent({
3839
const setRef = composeRefs(fragmentRef, (el) => {
3940
if (el) {
4041
props.setRef(
41-
(el as HTMLElement).nextElementSibling as HTMLElement | null
42+
(el as HTMLElement).nextElementSibling as HTMLElement | null,
4243
);
43-
} else {
44+
}
45+
else {
4446
props.setRef(null);
4547
}
4648
});

‎packages/component/component/popper/component/trigger.vue

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,80 @@
22
import type { TriggerProps } from "../types";
33
44
import { inject, watch } from "vue";
5-
import ForwardRef from "./forward-ref";
65
import { POPPER_INJECTION_KEY } from "../utils";
6+
import ForwardRef from "./forward-ref";
7+
8+
const props = withDefaults(defineProps<TriggerProps>(), {});
79
810
const { TriggerRef, onShow, onHidden } = inject(POPPER_INJECTION_KEY)!;
911
10-
const props = withDefaults(defineProps<TriggerProps>(), {});
12+
const events = {
13+
click: onClick,
14+
mouseenter: onMouseenter,
15+
mouseleave: onMouseleave,
16+
contextmenu: onContextMenu,
17+
focusin: onFocusin,
18+
focusout: onFocusout,
19+
...props.customEvents,
20+
};
1121
12-
const setTriggerRef = (el: HTMLElement | null) => {
22+
function setTriggerRef(el: HTMLElement | null) {
1323
TriggerRef.value = el;
14-
};
24+
}
1525
16-
const setEvents = <T extends (e: Event) => void>(
17-
el: HTMLElement | null | undefined,
18-
events: Record<string, T>,
19-
type: "addEventListener" | "removeEventListener"
20-
) => {
26+
function setEvents<T extends (e: Event) => void>(el: HTMLElement | null | undefined, events: Record<string, T>, type: "addEventListener" | "removeEventListener") {
2127
if (el) {
2228
Object.entries(events).forEach(([name, handler]) => {
2329
el[type](name, handler);
2430
});
2531
}
26-
};
32+
}
2733
2834
watch(TriggerRef, (newEl, oldEl) => {
2935
setEvents(newEl, events, "addEventListener");
3036
setEvents(oldEl, events, "removeEventListener");
3137
});
3238
33-
const onClick = () => {
34-
if (!props.trigger?.includes("click")) return;
39+
function onClick() {
40+
if (!props.trigger?.includes("click"))
41+
return;
3542
onShow();
36-
};
43+
}
3744
38-
const onMouseenter = () => {
39-
if (!props.trigger?.includes("hover")) return;
45+
function onMouseenter() {
46+
if (!props.trigger?.includes("hover"))
47+
return;
4048
onShow();
41-
};
49+
}
4250
43-
const onMouseleave = () => {
44-
if (!props.trigger?.includes("hover")) return;
51+
function onMouseleave() {
52+
if (!props.trigger?.includes("hover"))
53+
return;
4554
onHidden();
46-
};
55+
}
4756
48-
const onContextMenu = function (e: Event) {
49-
if (!props.trigger?.includes("contextMenu")) return;
57+
function onContextMenu(e: Event) {
58+
if (!props.trigger?.includes("contextMenu"))
59+
return;
5060
e.preventDefault();
5161
onShow();
52-
};
62+
}
5363
54-
const onFocusin = () => {
55-
if (!props.trigger?.includes("focus")) return;
64+
function onFocusin() {
65+
if (!props.trigger?.includes("focus"))
66+
return;
5667
onShow();
57-
};
68+
}
5869
59-
const onFocusout = () => {
60-
if (!props.trigger?.includes("focus")) return;
70+
function onFocusout() {
71+
if (!props.trigger?.includes("focus"))
72+
return;
6173
onHidden();
62-
};
63-
64-
const events = {
65-
click: onClick,
66-
mouseenter: onMouseenter,
67-
mouseleave: onMouseleave,
68-
contextmenu: onContextMenu,
69-
focusin: onFocusin,
70-
focusout: onFocusout,
71-
...props.customEvents,
72-
};
74+
}
7375
</script>
7476

7577
<template>
76-
<forward-ref :set-ref="setTriggerRef">
78+
<ForwardRef :set-ref="setTriggerRef">
7779
<slot />
78-
</forward-ref>
80+
</ForwardRef>
7981
</template>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy