sard 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all-components.js +1 -2
- package/components/index.js +2 -2
- package/components/popover/popover.js +1 -1
- package/components/sticky/index.css +1 -1
- package/components/sticky/sticky.js +53 -49
- package/components/swipe-action/common.d.ts +5 -18
- package/components/swipe-action/common.js +2 -3
- package/components/swipe-action/index.d.ts +1 -3
- package/components/swipe-action/index.js +1 -3
- package/components/swipe-action/swipe-action.d.ts +5 -1
- package/components/swipe-action/swipe-action.js +36 -13
- package/global.d.ts +0 -1
- package/index.css +1 -1
- package/index.js +2 -2
- package/package.json +1 -1
- package/use/useClickOutside.d.ts +2 -2
- package/use/useClickOutside.js +2 -2
- package/components/swipe-action/swipe-action-group.d.ts +0 -13
- package/components/swipe-action/swipe-action-group.js +0 -39
package/all-components.js
CHANGED
|
@@ -104,7 +104,7 @@ import { StatusBar } from "./components/status-bar/index.js";
|
|
|
104
104
|
import { Stepper } from "./components/stepper/index.js";
|
|
105
105
|
import { Step, Steps } from "./components/steps/index.js";
|
|
106
106
|
import { Sticky, StickyBox } from "./components/sticky/index.js";
|
|
107
|
-
import { SwipeAction
|
|
107
|
+
import { SwipeAction } from "./components/swipe-action/index.js";
|
|
108
108
|
import { Swiper, SwiperItem } from "./components/swiper/index.js";
|
|
109
109
|
import { Switch } from "./components/switch/index.js";
|
|
110
110
|
import { Tabbar, TabbarItem } from "./components/tabbar/index.js";
|
|
@@ -262,7 +262,6 @@ var all_components_default = {
|
|
|
262
262
|
Sticky,
|
|
263
263
|
StickyBox,
|
|
264
264
|
SwipeAction,
|
|
265
|
-
SwipeActionGroup,
|
|
266
265
|
Swiper,
|
|
267
266
|
SwiperItem,
|
|
268
267
|
Switch,
|
package/components/index.js
CHANGED
|
@@ -123,7 +123,7 @@ import { StatusBar } from "./status-bar/index.js";
|
|
|
123
123
|
import { Stepper } from "./stepper/index.js";
|
|
124
124
|
import { Step, Steps } from "./steps/index.js";
|
|
125
125
|
import { Sticky, StickyBox } from "./sticky/index.js";
|
|
126
|
-
import { SwipeAction
|
|
126
|
+
import { SwipeAction } from "./swipe-action/index.js";
|
|
127
127
|
import { Swiper, SwiperItem } from "./swiper/index.js";
|
|
128
128
|
import { Switch } from "./switch/index.js";
|
|
129
129
|
import { Tabbar, TabbarItem } from "./tabbar/index.js";
|
|
@@ -139,4 +139,4 @@ import { Tree, TreeBranch, TreeNode } from "./tree/index.js";
|
|
|
139
139
|
import { Upload, UploadPreview } from "./upload/index.js";
|
|
140
140
|
import { Waterfall, WaterfallItem, WaterfallLoad } from "./waterfall/index.js";
|
|
141
141
|
import { Watermark } from "./watermark/index.js";
|
|
142
|
-
export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, InfiniteList, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, Space, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction,
|
|
142
|
+
export { ADD_SWIPER_CONTEXT_KEY, Accordion, AccordionItem, ActionSheet, ActionSheetItem, Alert, Avatar, AvatarGroup, BackTop, Badge, Barcode, Button, Calendar, CalendarInput, CalendarPopout, Card, Cascader, CascaderInput, CascaderPopout, Checkbox, CheckboxGroup, CheckboxInput, CheckboxPopout, Col, Collapse, ColorPicker, ColorPickerInput, ColorPickerPopout, Compact, CoolIcon, CountDown, CountTo, CropImage, DateStrip, DatetimePicker, DatetimePickerInput, DatetimePickerPopout, DatetimeRangePicker, DatetimeRangePickerInput, DatetimeRangePickerPopout, Descriptions, DescriptionsItem, Dialog, Divider, Dnd, DndHandle, DndItem, Dropdown, DropdownItem, Ellipsis, Empty, Fab, FabItem, FloatingBubble, FloatingPanel, Form, FormItem, FormItemPlain, FormPlain, Grid, GridItem, Image, Indexes, IndexesAnchor, IndexesNav, InfiniteList, Input, Keyboard, KeyboardPopout, List, ListItem, LoadMore, Loading, Marquee, Menu, MenuItem, Motion, Navbar, NavbarItem, NavbarPit, NoticeBar, Notify, Overlay, Pagination, PasswordInput, Picker, PickerInput, PickerPopout, PickerView, PickerViewColumn, Popout, PopoutInput, Popover, Popup, PreviewImage, ProgressBar, ProgressCircle, PullDownRefresh, PuzzleVerify, Qrcode, REMOVE_SWIPER_CONTEXT_KEY, Radio, RadioGroup, RadioInput, RadioPopout, Rate, ReadMore, Result, RotateVerify, Row, SWIPER_AUTO_HEIGHT_KEY, ScrollList, ScrollSpy, ScrollSpyAnchor, Search, Segmented, SegmentedItem, Select, SelectInput, SelectOption, SelectOptionGroup, SelectPopout, ShareSheet, ShareSheetIcon, ShareSheetItem, ShareSheetRow, Sidebar, SidebarItem, Signature, Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonParagraph, SkeletonTitle, SlideVerify, Slider, Space, StatusBar, Step, Stepper, Steps, Sticky, StickyBox, SwipeAction, Swiper, SwiperItem, Switch, Tab, Tabbar, TabbarItem, TabbarPit, Table, Tabs, Tag, Text, Timeline, TimelineItem, Toast, Tree, TreeBranch, TreeNode, Upload, UploadPreview, Waterfall, WaterfallItem, WaterfallLoad, Watermark, actionSheet, createActionSheet, createCropImage, createDialog, createNotify, createPreviewImage, createToast, cropImage, dialog, formatTime, getCurrentTime, notify, omitFormPopoutProps, partitionPopoutInputProps, plateEnglishLetterKeys, plateProvinceKeys, plateSuffixKeys, previewImage, safeAreaInsets, spaceSizes, toast, useCountDown, useElementBackTop, useFormContext, useFormItem, useFormItemContext, useFormPopout, useInPopup, useLoadMore, useMotioning, usePageBackTop, usePopoutInput, usePopupEnter, usePopupVisibleHookProvide, windowInfo };
|
|
@@ -60,7 +60,7 @@ var popover_default = /*@__PURE__*/ defineComponent({
|
|
|
60
60
|
const popperRef = useTemplateRef("popper");
|
|
61
61
|
useClickOutside(popperRef, () => {
|
|
62
62
|
innerVisible.value = false;
|
|
63
|
-
},
|
|
63
|
+
}, () => innerVisible.value && props.outsideClosable);
|
|
64
64
|
const [popperPos, arrowPos] = usePopper(mergedRef, popperRef, innerVisible, {
|
|
65
65
|
position: () => props.position,
|
|
66
66
|
refGap: () => props.refGap,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.s-sticky{display:block}.s-sticky__fixation{position:relative;z-index:1}.s-sticky-box{position:relative}
|
|
1
|
+
.s-sticky{display:block}.s-sticky__fixation{position:relative;z-index:1;width:fit-content;height:fit-content}.s-sticky-box{position:relative}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { createBem } from "../../utils/bem.js";
|
|
2
2
|
import { isNumber } from "../../utils/is.js";
|
|
3
|
+
import { useWindowResize } from "../../use/useWindowResize.js";
|
|
3
4
|
import { useIntersectionObserver } from "../../use/useIntersectionObserver.js";
|
|
5
|
+
import { usePageScroll } from "../../use/usePageScroll.js";
|
|
4
6
|
import { useResizeObserver } from "../../use/useResizeObserver.js";
|
|
5
7
|
import { stickyContextKey } from "./common.js";
|
|
6
8
|
import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, reactive, ref, renderSlot, toValue, unref, useTemplateRef, watch } from "vue";
|
|
@@ -31,14 +33,28 @@ var sticky_default = /*@__PURE__*/ defineComponent({
|
|
|
31
33
|
bottom: ""
|
|
32
34
|
});
|
|
33
35
|
const boundingBox = ref("none");
|
|
34
|
-
const
|
|
36
|
+
const fixationSize = useResizeObserver(useTemplateRef("fixation"));
|
|
35
37
|
const context = inject(stickyContextKey, null);
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
const updatePosition = () => {
|
|
39
|
+
const target = targetRef.value;
|
|
40
|
+
if (!target) return;
|
|
41
|
+
let position = "relative";
|
|
42
|
+
let top = "";
|
|
43
|
+
let bottom = "";
|
|
44
|
+
const targetRect = target.getBoundingClientRect();
|
|
45
|
+
if (isNumber(props.marginTop) && targetRect.top < -props.marginTop) {
|
|
46
|
+
position = "fixed";
|
|
47
|
+
top = -props.marginTop + "px";
|
|
48
|
+
} else if (isNumber(props.marginBottom) && targetRect.bottom > window.innerHeight + props.marginBottom) {
|
|
49
|
+
position = "fixed";
|
|
50
|
+
bottom = -props.marginBottom + "px";
|
|
51
|
+
}
|
|
52
|
+
Object.assign(positionStyle, {
|
|
53
|
+
position,
|
|
54
|
+
top,
|
|
55
|
+
bottom
|
|
56
|
+
});
|
|
57
|
+
};
|
|
42
58
|
const { intersectionRatio } = useIntersectionObserver({
|
|
43
59
|
target: targetRef,
|
|
44
60
|
threshold: [1],
|
|
@@ -49,76 +65,64 @@ var sticky_default = /*@__PURE__*/ defineComponent({
|
|
|
49
65
|
targetRef,
|
|
50
66
|
() => props.marginTop,
|
|
51
67
|
() => props.marginBottom
|
|
52
|
-
],
|
|
53
|
-
const target = targetRef.value;
|
|
54
|
-
if (!target) return;
|
|
55
|
-
Object.assign(positionStyle, {
|
|
56
|
-
position: "relative",
|
|
57
|
-
top: "",
|
|
58
|
-
bottom: ""
|
|
59
|
-
});
|
|
60
|
-
const targetRect = target.getBoundingClientRect();
|
|
61
|
-
if (intersectionRatio.value < 1) {
|
|
62
|
-
if (isNumber(props.marginTop) && targetRect.top < -props.marginTop) {
|
|
63
|
-
positionStyle.position = "fixed";
|
|
64
|
-
positionStyle.top = -props.marginTop + "px";
|
|
65
|
-
} else if (isNumber(props.marginBottom) && targetRect.bottom > window.innerHeight + props.marginBottom) {
|
|
66
|
-
positionStyle.position = "fixed";
|
|
67
|
-
positionStyle.bottom = -props.marginBottom + "px";
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}, {
|
|
68
|
+
], updatePosition, {
|
|
71
69
|
immediate: true,
|
|
72
70
|
flush: "post"
|
|
73
71
|
});
|
|
72
|
+
usePageScroll(updatePosition);
|
|
73
|
+
useWindowResize(updatePosition);
|
|
74
74
|
if (context) {
|
|
75
75
|
const { isIntersecting } = useIntersectionObserver({
|
|
76
76
|
target: context.box,
|
|
77
77
|
threshold: [0],
|
|
78
78
|
rootMargin: computed(() => {
|
|
79
|
-
return `${(props.marginTop || 0) -
|
|
79
|
+
return `${(props.marginTop || 0) - fixationSize.height}px 0px ${(props.marginBottom || 0) - fixationSize.height}px`;
|
|
80
80
|
})
|
|
81
81
|
});
|
|
82
|
-
|
|
83
|
-
isIntersecting,
|
|
84
|
-
targetRef,
|
|
85
|
-
context.box
|
|
86
|
-
], () => {
|
|
82
|
+
const updateBoundingBox = () => {
|
|
87
83
|
const box = toValue(context.box);
|
|
88
84
|
if (!box) return;
|
|
89
85
|
const boxRect = box.getBoundingClientRect();
|
|
90
|
-
if (boxRect.top > window.innerHeight -
|
|
91
|
-
else if (boxRect.bottom <
|
|
86
|
+
if (boxRect.top > window.innerHeight - fixationSize.height + (props.marginBottom || 0)) boundingBox.value = "top";
|
|
87
|
+
else if (boxRect.bottom < fixationSize.height - (props.marginTop || 0)) boundingBox.value = "bottom";
|
|
92
88
|
else boundingBox.value = "none";
|
|
89
|
+
};
|
|
90
|
+
watch([
|
|
91
|
+
isIntersecting,
|
|
92
|
+
targetRef,
|
|
93
|
+
context.box
|
|
94
|
+
], updateBoundingBox, {
|
|
95
|
+
immediate: true,
|
|
96
|
+
flush: "post"
|
|
93
97
|
});
|
|
98
|
+
usePageScroll(updateBoundingBox);
|
|
99
|
+
useWindowResize(updateBoundingBox);
|
|
94
100
|
}
|
|
95
|
-
__expose({});
|
|
96
101
|
const stickyStyle = computed(() => {
|
|
97
|
-
|
|
102
|
+
const { width, height } = fixationSize;
|
|
103
|
+
return {
|
|
104
|
+
width: width ? width + "px" : "auto",
|
|
105
|
+
height: height ? height + "px" : "auto"
|
|
106
|
+
};
|
|
98
107
|
});
|
|
99
108
|
const fixationStyle = computed(() => {
|
|
100
|
-
return [
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
boundingBox.value === "
|
|
104
|
-
|
|
105
|
-
top: boundingBox.value === "top" ? 0 : "",
|
|
106
|
-
bottom: boundingBox.value === "bottom" ? 0 : ""
|
|
107
|
-
}
|
|
108
|
-
];
|
|
109
|
+
return [{ zIndex: props.zIndex }, boundingBox.value === "none" ? positionStyle : {
|
|
110
|
+
position: "absolute",
|
|
111
|
+
top: boundingBox.value === "top" ? 0 : "",
|
|
112
|
+
bottom: boundingBox.value === "bottom" ? 0 : ""
|
|
113
|
+
}];
|
|
109
114
|
});
|
|
115
|
+
__expose({});
|
|
110
116
|
return (_ctx, _cache) => {
|
|
111
117
|
return openBlock(), createElementBlock("div", {
|
|
112
118
|
ref: "target",
|
|
113
119
|
class: normalizeClass(unref(bem).b()),
|
|
114
120
|
style: normalizeStyle(stickyStyle.value)
|
|
115
121
|
}, [createElementVNode("div", {
|
|
122
|
+
ref: "fixation",
|
|
116
123
|
class: normalizeClass(unref(bem).e("fixation")),
|
|
117
124
|
style: normalizeStyle(fixationStyle.value)
|
|
118
|
-
}, [
|
|
119
|
-
ref: "bound",
|
|
120
|
-
class: normalizeClass(unref(bem).e("bound"))
|
|
121
|
-
}, [renderSlot(_ctx.$slots, "default")], 2)], 6)], 6);
|
|
125
|
+
}, [renderSlot(_ctx.$slots, "default")], 6)], 6);
|
|
122
126
|
};
|
|
123
127
|
}
|
|
124
128
|
});
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import type { InjectionKey } from 'vue';
|
|
2
1
|
import type { DefaultProps } from '../config';
|
|
3
2
|
export type SwipeActionVisible = 'left' | 'right' | false;
|
|
3
|
+
export type SwipeActionAsyncHide = (callback: (resolve: () => void, reject: () => void) => void) => void;
|
|
4
4
|
export interface SwipeActionProps {
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
visible?: SwipeActionVisible;
|
|
7
|
+
outsideClosable?: boolean;
|
|
7
8
|
}
|
|
9
|
+
export declare const defaultSwipeActionProps: DefaultProps<SwipeActionProps>;
|
|
8
10
|
export interface SwipeActionSlots {
|
|
9
11
|
default?(props: Record<string, never>): any;
|
|
10
12
|
left?(props: {
|
|
11
13
|
hide: () => void;
|
|
14
|
+
asyncHide: SwipeActionAsyncHide;
|
|
12
15
|
}): any;
|
|
13
16
|
right?(props: {
|
|
14
17
|
hide: () => void;
|
|
18
|
+
asyncHide: SwipeActionAsyncHide;
|
|
15
19
|
}): any;
|
|
16
20
|
}
|
|
17
21
|
export interface SwipeActionEmits {
|
|
@@ -20,20 +24,3 @@ export interface SwipeActionEmits {
|
|
|
20
24
|
export interface SwipeActionExpose {
|
|
21
25
|
hide: () => void;
|
|
22
26
|
}
|
|
23
|
-
export interface SwipeActionGroupProps {
|
|
24
|
-
multiple?: boolean;
|
|
25
|
-
}
|
|
26
|
-
export declare const defaultSwipeActionGroupProps: DefaultProps<SwipeActionGroupProps>;
|
|
27
|
-
export interface SwipeActionGroupSlots {
|
|
28
|
-
default?(props: Record<string, never>): any;
|
|
29
|
-
}
|
|
30
|
-
export interface SwipeActionGroupExpose {
|
|
31
|
-
closeAll: () => void;
|
|
32
|
-
}
|
|
33
|
-
export interface SwipeActionGroupContext {
|
|
34
|
-
multiple: SwipeActionGroupProps['multiple'];
|
|
35
|
-
register: (id: string, expose: SwipeActionExpose) => void;
|
|
36
|
-
unregister: (id: string) => void;
|
|
37
|
-
closeAll: (exceptId?: string) => void;
|
|
38
|
-
}
|
|
39
|
-
export declare const swipeActionGroupContextKey: InjectionKey<SwipeActionGroupContext>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region packages/sard/components/swipe-action/common.ts
|
|
2
|
-
const
|
|
3
|
-
const swipeActionGroupContextKey = Symbol("swipeActionGroupContext");
|
|
2
|
+
const defaultSwipeActionProps = { outsideClosable: true };
|
|
4
3
|
//#endregion
|
|
5
|
-
export {
|
|
4
|
+
export { defaultSwipeActionProps };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { type EnhancedComponent } from '../../utils';
|
|
2
2
|
import _SwipeAction from './swipe-action.vue';
|
|
3
|
-
import _SwipeActionGroup from './swipe-action-group.vue';
|
|
4
3
|
export declare const SwipeAction: EnhancedComponent<typeof _SwipeAction>;
|
|
5
|
-
export declare const SwipeActionGroup: EnhancedComponent<typeof _SwipeActionGroup>;
|
|
6
4
|
export default SwipeAction;
|
|
7
|
-
export type { SwipeActionProps, SwipeActionSlots, SwipeActionEmits, SwipeActionExpose, SwipeActionVisible,
|
|
5
|
+
export type { SwipeActionProps, SwipeActionSlots, SwipeActionEmits, SwipeActionExpose, SwipeActionVisible, SwipeActionAsyncHide, } from './common';
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { enhanceComponent } from "../../utils/component.js";
|
|
2
2
|
import swipe_action_default from "./swipe-action.js";
|
|
3
|
-
import swipe_action_group_default from "./swipe-action-group.js";
|
|
4
3
|
//#region packages/sard/components/swipe-action/index.ts
|
|
5
4
|
const SwipeAction = enhanceComponent(swipe_action_default);
|
|
6
|
-
const SwipeActionGroup = enhanceComponent(swipe_action_group_default);
|
|
7
5
|
//#endregion
|
|
8
|
-
export { SwipeAction, SwipeAction as default
|
|
6
|
+
export { SwipeAction, SwipeAction as default };
|
|
@@ -4,7 +4,11 @@ declare const __VLS_base: import("vue").DefineComponent<SwipeActionProps, SwipeA
|
|
|
4
4
|
"update:visible": (value: SwipeActionVisible) => any;
|
|
5
5
|
}, string, import("vue").PublicProps, Readonly<SwipeActionProps> & Readonly<{
|
|
6
6
|
"onUpdate:visible"?: ((value: SwipeActionVisible) => any) | undefined;
|
|
7
|
-
}>, {
|
|
7
|
+
}>, {
|
|
8
|
+
visible: SwipeActionVisible;
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
outsideClosable: boolean;
|
|
11
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
12
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
9
13
|
declare const _default: typeof __VLS_export;
|
|
10
14
|
export default _default;
|
|
@@ -4,12 +4,13 @@ import { usePointerDown } from "../../use/usePointerDown.js";
|
|
|
4
4
|
import { useInitialVelocity } from "../../use/useInitialVelocity.js";
|
|
5
5
|
import { useStopMovedClick } from "../../use/useStopMovedClick.js";
|
|
6
6
|
import { useRtl } from "../../use/useRtl.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { useClickOutside } from "../../use/useClickOutside.js";
|
|
8
|
+
import { defaultSwipeActionProps } from "./common.js";
|
|
9
|
+
import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch, withModifiers } from "vue";
|
|
9
10
|
//#region packages/sard/components/swipe-action/swipe-action.vue
|
|
10
11
|
var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
11
12
|
__name: "swipe-action",
|
|
12
|
-
props: {
|
|
13
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
13
14
|
disabled: {
|
|
14
15
|
type: Boolean,
|
|
15
16
|
required: false
|
|
@@ -17,16 +18,19 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
|
17
18
|
visible: {
|
|
18
19
|
type: [String, Boolean],
|
|
19
20
|
required: false
|
|
21
|
+
},
|
|
22
|
+
outsideClosable: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
required: false
|
|
20
25
|
}
|
|
21
|
-
},
|
|
26
|
+
}, defaultSwipeActionProps),
|
|
22
27
|
emits: ["update:visible"],
|
|
23
28
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
24
29
|
const props = __props;
|
|
25
30
|
const slots = useSlots();
|
|
26
31
|
const emit = __emit;
|
|
27
32
|
const bem = createBem("swipe-action");
|
|
28
|
-
|
|
29
|
-
const swipeActionId = uniqid();
|
|
33
|
+
uniqid();
|
|
30
34
|
const innerVisible = ref(props.visible || false);
|
|
31
35
|
watch(() => props.visible, () => {
|
|
32
36
|
if (props.visible !== innerVisible.value) {
|
|
@@ -40,14 +44,30 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
|
40
44
|
emit("update:visible", visible);
|
|
41
45
|
}
|
|
42
46
|
};
|
|
47
|
+
let closeDisabled = false;
|
|
43
48
|
const hide = () => {
|
|
49
|
+
if (closeDisabled) return;
|
|
44
50
|
triggerVisible(false);
|
|
45
51
|
setTranslateXByVisible(false);
|
|
46
52
|
};
|
|
53
|
+
const asyncHide = (callback) => {
|
|
54
|
+
closeDisabled = true;
|
|
55
|
+
const resolve = () => {
|
|
56
|
+
closeDisabled = false;
|
|
57
|
+
hide();
|
|
58
|
+
};
|
|
59
|
+
const reject = () => {
|
|
60
|
+
closeDisabled = false;
|
|
61
|
+
};
|
|
62
|
+
callback(resolve, reject);
|
|
63
|
+
};
|
|
47
64
|
const onContentClick = () => {
|
|
48
65
|
if (!props.disabled && !isStoppedClick.value) hide();
|
|
49
66
|
};
|
|
50
67
|
const { isStoppedClick, onPointerDown: onContentPointerDown, onPointerMove, onPointerUp } = useStopMovedClick();
|
|
68
|
+
useClickOutside(useTemplateRef("root"), () => {
|
|
69
|
+
hide();
|
|
70
|
+
}, () => props.outsideClosable, "touchstart");
|
|
51
71
|
const leftRef = useTemplateRef("left");
|
|
52
72
|
const rightRef = useTemplateRef("right");
|
|
53
73
|
let leftWidth = null;
|
|
@@ -69,16 +89,12 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
|
69
89
|
translateX.value = visible === "left" ? leftWidth || 0 : visible === "right" ? -(rightWidth || 0) : 0;
|
|
70
90
|
};
|
|
71
91
|
onMounted(() => {
|
|
72
|
-
groupContext?.register(swipeActionId, { hide });
|
|
73
92
|
getWidth();
|
|
74
93
|
if (innerVisible.value) setTranslateXByVisible(innerVisible.value);
|
|
75
94
|
});
|
|
76
|
-
onBeforeUnmount(() => {
|
|
77
|
-
groupContext?.unregister(swipeActionId);
|
|
78
|
-
});
|
|
79
95
|
const onTouchStart = (event) => {
|
|
96
|
+
closeDisabled = false;
|
|
80
97
|
if (props.disabled || !slots.left && !slots.right) return;
|
|
81
|
-
groupContext?.closeAll(swipeActionId);
|
|
82
98
|
const { clientX, clientY } = event.touches[0];
|
|
83
99
|
startX = clientX;
|
|
84
100
|
startY = clientY;
|
|
@@ -139,6 +155,7 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
|
139
155
|
});
|
|
140
156
|
return (_ctx, _cache) => {
|
|
141
157
|
return openBlock(), createElementBlock("div", {
|
|
158
|
+
ref: "root",
|
|
142
159
|
class: normalizeClass(unref(bem).b()),
|
|
143
160
|
onTouchstart: onTouchStart,
|
|
144
161
|
onTouchmove: onTouchMove,
|
|
@@ -159,13 +176,19 @@ var swipe_action_default = /*@__PURE__*/ defineComponent({
|
|
|
159
176
|
ref: "left",
|
|
160
177
|
class: normalizeClass(unref(bem).e("left")),
|
|
161
178
|
onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
|
|
162
|
-
}, [renderSlot(_ctx.$slots, "left", {
|
|
179
|
+
}, [renderSlot(_ctx.$slots, "left", {
|
|
180
|
+
hide,
|
|
181
|
+
asyncHide
|
|
182
|
+
})], 2)) : createCommentVNode("v-if", true),
|
|
163
183
|
slots.right ? (openBlock(), createElementBlock("div", {
|
|
164
184
|
key: 1,
|
|
165
185
|
ref: "right",
|
|
166
186
|
class: normalizeClass(unref(bem).e("right")),
|
|
167
187
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
|
|
168
|
-
}, [renderSlot(_ctx.$slots, "right", {
|
|
188
|
+
}, [renderSlot(_ctx.$slots, "right", {
|
|
189
|
+
hide,
|
|
190
|
+
asyncHide
|
|
191
|
+
})], 2)) : createCommentVNode("v-if", true)
|
|
169
192
|
], 38)], 34);
|
|
170
193
|
};
|
|
171
194
|
}
|
package/global.d.ts
CHANGED
|
@@ -141,7 +141,6 @@ declare module 'vue' {
|
|
|
141
141
|
SSticky: typeof import('./components/sticky/sticky').default
|
|
142
142
|
SStickyBox: typeof import('./components/sticky/sticky-box').default
|
|
143
143
|
SSwipeAction: typeof import('./components/swipe-action/swipe-action').default
|
|
144
|
-
SSwipeActionGroup: typeof import('./components/swipe-action/swipe-action-group').default
|
|
145
144
|
SSwiper: typeof import('./components/swiper/swiper').default
|
|
146
145
|
SSwiperItem: typeof import('./components/swiper/swiper-item').default
|
|
147
146
|
SSwitch: typeof import('./components/switch/switch').default
|