@v-c/trigger 0.0.1
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/LICENSE +21 -0
- package/dist/Popup/Arrow.cjs +1 -0
- package/dist/Popup/Arrow.d.ts +8 -0
- package/dist/Popup/Arrow.js +66 -0
- package/dist/Popup/Mask.cjs +1 -0
- package/dist/Popup/Mask.d.ts +11 -0
- package/dist/Popup/Mask.js +57 -0
- package/dist/Popup/PopupContent.cjs +1 -0
- package/dist/Popup/PopupContent.d.ts +5 -0
- package/dist/Popup/PopupContent.js +21 -0
- package/dist/Popup/index.cjs +1 -0
- package/dist/Popup/index.d.ts +54 -0
- package/dist/Popup/index.js +295 -0
- package/dist/UniqueProvider/UniqueContainer.cjs +1 -0
- package/dist/UniqueProvider/UniqueContainer.d.ts +24 -0
- package/dist/UniqueProvider/UniqueContainer.js +125 -0
- package/dist/UniqueProvider/index.cjs +1 -0
- package/dist/UniqueProvider/index.d.ts +7 -0
- package/dist/UniqueProvider/index.js +167 -0
- package/dist/UniqueProvider/useTargetState.cjs +1 -0
- package/dist/UniqueProvider/useTargetState.d.ts +11 -0
- package/dist/UniqueProvider/useTargetState.js +13 -0
- package/dist/context.cjs +1 -0
- package/dist/context.d.ts +48 -0
- package/dist/context.js +27 -0
- package/dist/hooks/useAction.cjs +1 -0
- package/dist/hooks/useAction.d.ts +6 -0
- package/dist/hooks/useAction.js +17 -0
- package/dist/hooks/useAlign.cjs +1 -0
- package/dist/hooks/useAlign.d.ts +4 -0
- package/dist/hooks/useAlign.js +257 -0
- package/dist/hooks/useDelay.cjs +1 -0
- package/dist/hooks/useDelay.d.ts +1 -0
- package/dist/hooks/useDelay.js +16 -0
- package/dist/hooks/useOffsetStyle.cjs +1 -0
- package/dist/hooks/useOffsetStyle.d.ts +3 -0
- package/dist/hooks/useOffsetStyle.js +20 -0
- package/dist/hooks/useWatch.cjs +1 -0
- package/dist/hooks/useWatch.d.ts +2 -0
- package/dist/hooks/useWatch.js +26 -0
- package/dist/hooks/useWinClick.cjs +1 -0
- package/dist/hooks/useWinClick.d.ts +6 -0
- package/dist/hooks/useWinClick.js +50 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +78 -0
- package/dist/index.js +470 -0
- package/dist/interface.cjs +1 -0
- package/dist/interface.d.ts +94 -0
- package/dist/interface.js +1 -0
- package/dist/portal/dist/Context.cjs +1 -0
- package/dist/portal/dist/Context.js +14 -0
- package/dist/portal/dist/Portal.cjs +1 -0
- package/dist/portal/dist/Portal.js +73 -0
- package/dist/portal/dist/useDom.cjs +1 -0
- package/dist/portal/dist/useDom.js +34 -0
- package/dist/portal/dist/useScrollLocker.cjs +5 -0
- package/dist/portal/dist/useScrollLocker.js +28 -0
- package/dist/portal/dist/util.cjs +1 -0
- package/dist/portal/dist/util.js +6 -0
- package/dist/resize-observer/dist/Collection.cjs +1 -0
- package/dist/resize-observer/dist/Collection.js +32 -0
- package/dist/resize-observer/dist/SingleObserver/DomWrapper.cjs +1 -0
- package/dist/resize-observer/dist/SingleObserver/DomWrapper.js +11 -0
- package/dist/resize-observer/dist/SingleObserver/index.cjs +1 -0
- package/dist/resize-observer/dist/SingleObserver/index.js +81 -0
- package/dist/resize-observer/dist/index.cjs +1 -0
- package/dist/resize-observer/dist/index.js +44 -0
- package/dist/resize-observer/dist/utils/observerUtil.cjs +1 -0
- package/dist/resize-observer/dist/utils/observerUtil.js +21 -0
- package/dist/util/dist/Children/isFragment.cjs +1 -0
- package/dist/util/dist/Children/isFragment.js +7 -0
- package/dist/util/dist/Children/toArray.cjs +1 -0
- package/dist/util/dist/Children/toArray.js +11 -0
- package/dist/util/dist/Dom/canUseDom.cjs +1 -0
- package/dist/util/dist/Dom/canUseDom.js +6 -0
- package/dist/util/dist/Dom/contains.cjs +1 -0
- package/dist/util/dist/Dom/contains.js +16 -0
- package/dist/util/dist/Dom/dynamicCSS.cjs +1 -0
- package/dist/util/dist/Dom/dynamicCSS.js +73 -0
- package/dist/util/dist/Dom/findDOMNode.cjs +1 -0
- package/dist/util/dist/Dom/findDOMNode.js +12 -0
- package/dist/util/dist/Dom/isVisible.cjs +1 -0
- package/dist/util/dist/Dom/isVisible.js +22 -0
- package/dist/util/dist/Dom/shadow.cjs +1 -0
- package/dist/util/dist/Dom/shadow.js +13 -0
- package/dist/util/dist/classnames.cjs +1 -0
- package/dist/util/dist/classnames.js +30 -0
- package/dist/util/dist/getScrollBarSize.cjs +1 -0
- package/dist/util/dist/getScrollBarSize.js +37 -0
- package/dist/util/dist/props-util/index.cjs +1 -0
- package/dist/util/dist/props-util/index.js +21 -0
- package/dist/util/dist/raf.cjs +1 -0
- package/dist/util/dist/raf.js +37 -0
- package/dist/util/dist/utils/transition.cjs +1 -0
- package/dist/util/dist/utils/transition.js +21 -0
- package/dist/util/dist/warning.cjs +1 -0
- package/dist/util/dist/warning.js +48 -0
- package/dist/util.cjs +1 -0
- package/dist/util.d.ts +44 -0
- package/dist/util.js +69 -0
- package/package.json +41 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 antdv-community
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue");require("../util/dist/warning.cjs");const x=require("../util/dist/classnames.cjs"),P=s.defineComponent({props:{prefixCls:{type:String,required:!0},align:{type:Object,required:!0},arrow:{type:Object,required:!0},arrowPos:{type:Object,required:!0}},name:"Arrow",setup(p,{expose:u}){const n=s.shallowRef();return u({arrowRef:n}),()=>{const{prefixCls:a,align:t,arrow:c,arrowPos:f}=p,{className:d,content:w,style:g}=c||{},{x:y=0,y:b=0}=f;if(!t||!t.points)return null;const e={position:"absolute"};if(t.autoArrow!==!1){const i=t.points[0],l=t.points[1],r=i[0],o=i[1],q=l[0],m=l[1];r===q||!["t","b"].includes(r)?e.top=`${b}px`:r==="t"?e.top=0:e.bottom=0,o===m||!["l","r"].includes(o)?e.left=`${y}px`:o==="l"?e.left=0:e.right=0}return s.createVNode("div",{ref:n,class:x.default(`${a}-arrow`,d),style:{...e,...g}},[w])}}});exports.Arrow=P;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
|
|
2
|
+
export interface ArrowProps {
|
|
3
|
+
prefixCls: string;
|
|
4
|
+
align: AlignType;
|
|
5
|
+
arrow: ArrowTypeOuter;
|
|
6
|
+
arrowPos: ArrowPos;
|
|
7
|
+
}
|
|
8
|
+
export declare const Arrow: import('vue').DefineComponent<ArrowProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { defineComponent as x, shallowRef as q, createVNode as P } from "vue";
|
|
2
|
+
import "../util/dist/warning.js";
|
|
3
|
+
import R from "../util/dist/classnames.js";
|
|
4
|
+
const O = /* @__PURE__ */ x({
|
|
5
|
+
props: {
|
|
6
|
+
prefixCls: {
|
|
7
|
+
type: String,
|
|
8
|
+
required: !0
|
|
9
|
+
},
|
|
10
|
+
align: {
|
|
11
|
+
type: Object,
|
|
12
|
+
required: !0
|
|
13
|
+
},
|
|
14
|
+
arrow: {
|
|
15
|
+
type: Object,
|
|
16
|
+
required: !0
|
|
17
|
+
},
|
|
18
|
+
arrowPos: {
|
|
19
|
+
type: Object,
|
|
20
|
+
required: !0
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
name: "Arrow",
|
|
24
|
+
setup(p, {
|
|
25
|
+
expose: l
|
|
26
|
+
}) {
|
|
27
|
+
const s = q();
|
|
28
|
+
return l({
|
|
29
|
+
arrowRef: s
|
|
30
|
+
}), () => {
|
|
31
|
+
const {
|
|
32
|
+
prefixCls: a,
|
|
33
|
+
align: e,
|
|
34
|
+
arrow: c,
|
|
35
|
+
arrowPos: u
|
|
36
|
+
} = p, {
|
|
37
|
+
className: f,
|
|
38
|
+
content: w,
|
|
39
|
+
style: d
|
|
40
|
+
} = c || {}, {
|
|
41
|
+
x: m = 0,
|
|
42
|
+
y: g = 0
|
|
43
|
+
} = u;
|
|
44
|
+
if (!e || !e.points)
|
|
45
|
+
return null;
|
|
46
|
+
const t = {
|
|
47
|
+
position: "absolute"
|
|
48
|
+
};
|
|
49
|
+
if (e.autoArrow !== !1) {
|
|
50
|
+
const n = e.points[0], i = e.points[1], r = n[0], o = n[1], y = i[0], b = i[1];
|
|
51
|
+
r === y || !["t", "b"].includes(r) ? t.top = `${g}px` : r === "t" ? t.top = 0 : t.bottom = 0, o === b || !["l", "r"].includes(o) ? t.left = `${m}px` : o === "l" ? t.left = 0 : t.right = 0;
|
|
52
|
+
}
|
|
53
|
+
return P("div", {
|
|
54
|
+
ref: s,
|
|
55
|
+
class: R(`${a}-arrow`, f),
|
|
56
|
+
style: {
|
|
57
|
+
...t,
|
|
58
|
+
...d
|
|
59
|
+
}
|
|
60
|
+
}, [w]);
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
export {
|
|
65
|
+
O as Arrow
|
|
66
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("../util/dist/utils/transition.cjs"),d=e.defineComponent((n,{attrs:o})=>()=>{const{prefixCls:r,open:s,zIndex:i,mask:a,motion:t,mobile:l}=n;if(!a)return null;const u=p.getTransitionProps(t?.name,t);return e.createVNode(e.Transition,u,{default:()=>[s?e.createVNode("div",{style:{zIndex:i},class:[`${r}-mask`,l&&`${r}-mask-mobile`,o.class]},null):null]})},{props:{prefixCls:{type:String,required:!0},open:{type:Boolean,required:!1},zIndex:{type:Number,required:!1},mask:{type:Boolean,required:!1},motion:{type:Object,required:!1},mobile:{type:Boolean,required:!1}},inheritAttrs:!1,name:"PopupMask"});exports.default=d;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CSSMotionProps } from '../../../util/src/utils/transition';
|
|
2
|
+
export interface MaskProps {
|
|
3
|
+
prefixCls: string;
|
|
4
|
+
open?: boolean;
|
|
5
|
+
zIndex?: number;
|
|
6
|
+
mask?: boolean;
|
|
7
|
+
motion?: CSSMotionProps;
|
|
8
|
+
mobile?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Mask: import('vue').DefineSetupFnComponent<MaskProps, {}, {}, MaskProps & {}, import('vue').PublicProps>;
|
|
11
|
+
export default Mask;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { defineComponent as m, createVNode as o, Transition as u } from "vue";
|
|
2
|
+
import { getTransitionProps as f } from "../util/dist/utils/transition.js";
|
|
3
|
+
const y = /* @__PURE__ */ m((t, {
|
|
4
|
+
attrs: n
|
|
5
|
+
}) => () => {
|
|
6
|
+
const {
|
|
7
|
+
prefixCls: e,
|
|
8
|
+
open: s,
|
|
9
|
+
zIndex: a,
|
|
10
|
+
mask: i,
|
|
11
|
+
motion: r,
|
|
12
|
+
mobile: l
|
|
13
|
+
} = t;
|
|
14
|
+
if (!i)
|
|
15
|
+
return null;
|
|
16
|
+
const p = f(r?.name, r);
|
|
17
|
+
return o(u, p, {
|
|
18
|
+
default: () => [s ? o("div", {
|
|
19
|
+
style: {
|
|
20
|
+
zIndex: a
|
|
21
|
+
},
|
|
22
|
+
class: [`${e}-mask`, l && `${e}-mask-mobile`, n.class]
|
|
23
|
+
}, null) : null]
|
|
24
|
+
});
|
|
25
|
+
}, {
|
|
26
|
+
props: {
|
|
27
|
+
prefixCls: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: !0
|
|
30
|
+
},
|
|
31
|
+
open: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
required: !1
|
|
34
|
+
},
|
|
35
|
+
zIndex: {
|
|
36
|
+
type: Number,
|
|
37
|
+
required: !1
|
|
38
|
+
},
|
|
39
|
+
mask: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
required: !1
|
|
42
|
+
},
|
|
43
|
+
motion: {
|
|
44
|
+
type: Object,
|
|
45
|
+
required: !1
|
|
46
|
+
},
|
|
47
|
+
mobile: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
required: !1
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
inheritAttrs: !1,
|
|
53
|
+
name: "PopupMask"
|
|
54
|
+
});
|
|
55
|
+
export {
|
|
56
|
+
y as default
|
|
57
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue"),r=u.defineComponent((n,{slots:o})=>{const e=u.shallowRef();return()=>{const t=o?.default?.();return n.cache?(e.value||(e.value=t),e.value):(e.value=t,t)}},{props:{cache:{type:Boolean,required:!1}},name:"PopupContext"});exports.default=r;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { defineComponent as a, shallowRef as r } from "vue";
|
|
2
|
+
const u = /* @__PURE__ */ a((o, {
|
|
3
|
+
slots: t
|
|
4
|
+
}) => {
|
|
5
|
+
const e = r();
|
|
6
|
+
return () => {
|
|
7
|
+
const n = t?.default?.();
|
|
8
|
+
return o.cache ? (e.value || (e.value = n), e.value) : (e.value = n, n);
|
|
9
|
+
};
|
|
10
|
+
}, {
|
|
11
|
+
props: {
|
|
12
|
+
cache: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
required: !1
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
name: "PopupContext"
|
|
18
|
+
});
|
|
19
|
+
export {
|
|
20
|
+
u as default
|
|
21
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("../resize-observer/dist/index.cjs");require("../util/dist/warning.cjs");const Q=require("../util/dist/classnames.cjs"),U=require("../util/dist/props-util/index.cjs"),Z=require("../util/dist/utils/transition.cjs"),ee=require("../hooks/useOffsetStyle.cjs"),te=require("./Arrow.cjs"),re=require("./Mask.cjs"),oe=require("./PopupContent.cjs"),ne={autoDestroy:!0},ie=e.defineComponent((t,{attrs:C,expose:w})=>{const N=e.computed(()=>typeof t.popup=="function"?t.popup():t.popup),{offsetX:x,offsetR:k,offsetY:M,offsetB:A,open:i,ready:B,align:E}=U.toPropsRefs(t,"offsetX","offsetB","offsetY","offsetR","ready","open","align"),q=e.computed(()=>t.open||t.keepDom),f=e.computed(()=>!!t.mobile),R=t?.getPopupContainer?.length>0,D=e.computed(()=>{const{mobile:r,mask:o,maskMotion:u,motion:c}=t;return r?[r.mask,r.maskMotion,r.motion]:[o,u,c]}),d=e.shallowRef(!t.getPopupContainer||!R);e.watchEffect(async()=>{await e.nextTick();const r=t?.getPopupContainer?.length>0,o=t.target;!d.value&&r&&o&&(d.value=!0)});const S=(r,o)=>{t?.onResize?.(r,o),t?.onAlign?.()},V=ee.default(f,B,i,E,k,A,x,M),p=e.shallowRef();return w({getElement:()=>p.value,nativeElement:p}),()=>{if(!d.value)return null;const{stretch:r,targetHeight:o,targetWidth:u,portal:c,forceRender:F,getPopupContainer:P,target:z,autoDestroy:O,zIndex:h,prefixCls:l,arrow:v,arrowPos:m,align:$,onMouseEnter:j,onMouseLeave:T,onPointerEnter:H,onPointerDownCapture:I,onClick:L,fresh:W,onPrepare:b,onVisibleChanged:y}=t,a={};r&&(r.includes("height")&&o?a.height=`${o}px`:r.includes("minHeight")&&o&&(a.minHeight=`${o}px`),r.includes("width")&&u?a.width=`${u}px`:r.includes("minWidth")&&u&&(a.minWidth=`${u}px`)),i.value||(a.pointerEvents="none");const[X,Y,g]=D.value,_=g?.name??g?.motionName,s=Z.getTransitionProps(_,g),G={...s,onBeforeAppear:n=>{b?.(),s?.onBeforeAppear?.(n)},onBeforeEnter:n=>{b?.(),s?.onBeforeEnter?.(n)},onAfterAppear:n=>{s?.onAfterAppear?.(n),y?.(!0)},onAfterEnter:n=>{s?.onAfterEnter?.(n),y?.(!0)},onAfterLeave:n=>{s.onAfterLeave?.(n),y?.(!1)}},J=Q.default(l,C.class,t.className,{[`${l}-mobile`]:f.value});return console.log(q.value,i.value),e.createVNode(c,{open:F||q.value,getContainer:P&&(()=>P(z)),autoDestroy:O},{default:()=>[e.createVNode(re.default,{prefixCls:l,open:i.value,zIndex:h,mask:X,motion:Y,mobile:f.value},null),e.createVNode(K.default,{onResize:S,disabled:!i.value},{default:()=>[e.createVNode(e.Transition,G,{default:()=>[e.withDirectives(e.createVNode("div",e.mergeProps({ref:p,class:J,style:[{"--arrow-x":`${m.x||0}px`,"--arrow-y":`${m.y||0}px`},V.value,a,{boxSizing:"border-box",zIndex:h},t.style],onMouseenter:j,onMouseleave:T,onPointerenter:H,onClick:L},{onPointerdownCapture:I}),[v&&e.createVNode(te.Arrow,{prefixCls:l,arrow:v,arrowPos:m,align:$},null),e.createVNode(oe.default,{cache:!i.value&&!W},{default:()=>[N.value]})]),[[e.vShow,i.value]])]})]})]})}},{props:e.mergeDefaults({prefixCls:{type:String,required:!0},className:{type:String,required:!1},style:{type:null,required:!1},popup:{type:Function,required:!1,skipCheck:!0},target:{type:null,required:!0},onMouseEnter:{type:Function,required:!1},onMouseLeave:{type:Function,required:!1},onPointerEnter:{type:Function,required:!1},onPointerDownCapture:{type:Function,required:!1},zIndex:{type:Number,required:!1},mask:{type:Boolean,required:!1},onVisibleChanged:{type:Function,required:!0},align:{type:Object,required:!1},arrow:{type:Object,required:!1},arrowPos:{type:Object,required:!0},open:{type:Boolean,required:!0},keepDom:{type:Boolean,required:!0},fresh:{type:Boolean,required:!1},onClick:{type:Function,required:!1},motion:{type:Object,required:!1},maskMotion:{type:Object,required:!1},forceRender:{type:Boolean,required:!1},getPopupContainer:{type:Function,required:!1},autoDestroy:{type:Boolean,required:!1},portal:{type:null,required:!0},ready:{type:Boolean,required:!0},offsetX:{type:Number,required:!0},offsetY:{type:Number,required:!0},offsetR:{type:Number,required:!0},offsetB:{type:Number,required:!0},onAlign:{type:null,required:!0},onPrepare:{type:Function,required:!0},stretch:{type:String,required:!1},targetWidth:{type:Number,required:!1},targetHeight:{type:Number,required:!1},onResize:{type:null,required:!1},mobile:{type:Object,required:!1}},ne)});exports.default=ie;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ResizeObserverProps } from '../../../resize-observer/src';
|
|
2
|
+
import { CSSMotionProps } from '../../../util/src/utils/transition';
|
|
3
|
+
import { CSSProperties } from 'vue';
|
|
4
|
+
import { TriggerProps } from '../index.tsx';
|
|
5
|
+
import { AlignType, ArrowPos, ArrowTypeOuter } from '../interface.ts';
|
|
6
|
+
export interface MobileConfig {
|
|
7
|
+
mask?: boolean;
|
|
8
|
+
/** Set popup motion. You can ref `rc-motion` for more info. */
|
|
9
|
+
motion?: CSSMotionProps;
|
|
10
|
+
/** Set mask motion. You can ref `rc-motion` for more info. */
|
|
11
|
+
maskMotion?: CSSMotionProps;
|
|
12
|
+
}
|
|
13
|
+
export interface PopupProps {
|
|
14
|
+
prefixCls: string;
|
|
15
|
+
className?: string;
|
|
16
|
+
style?: CSSProperties;
|
|
17
|
+
popup?: TriggerProps['popup'];
|
|
18
|
+
target: HTMLElement;
|
|
19
|
+
onMouseEnter?: (e: MouseEvent) => void;
|
|
20
|
+
onMouseLeave?: (e: MouseEvent) => void;
|
|
21
|
+
onPointerEnter?: (e: PointerEvent) => void;
|
|
22
|
+
onPointerDownCapture?: (e: PointerEvent) => void;
|
|
23
|
+
zIndex?: number;
|
|
24
|
+
mask?: boolean;
|
|
25
|
+
onVisibleChanged: (visible: boolean) => void;
|
|
26
|
+
align?: AlignType;
|
|
27
|
+
arrow?: ArrowTypeOuter;
|
|
28
|
+
arrowPos: ArrowPos;
|
|
29
|
+
open: boolean;
|
|
30
|
+
/** Tell Portal that should keep in screen. e.g. should wait all motion end */
|
|
31
|
+
keepDom: boolean;
|
|
32
|
+
fresh?: boolean;
|
|
33
|
+
onClick?: (e: MouseEvent) => void;
|
|
34
|
+
motion?: CSSMotionProps;
|
|
35
|
+
maskMotion?: CSSMotionProps;
|
|
36
|
+
forceRender?: boolean;
|
|
37
|
+
getPopupContainer?: TriggerProps['getPopupContainer'];
|
|
38
|
+
autoDestroy?: boolean;
|
|
39
|
+
portal: any;
|
|
40
|
+
ready: boolean;
|
|
41
|
+
offsetX: number;
|
|
42
|
+
offsetY: number;
|
|
43
|
+
offsetR: number;
|
|
44
|
+
offsetB: number;
|
|
45
|
+
onAlign: VoidFunction;
|
|
46
|
+
onPrepare: () => Promise<void>;
|
|
47
|
+
stretch?: string;
|
|
48
|
+
targetWidth?: number;
|
|
49
|
+
targetHeight?: number;
|
|
50
|
+
onResize?: ResizeObserverProps['onResize'];
|
|
51
|
+
mobile?: MobileConfig;
|
|
52
|
+
}
|
|
53
|
+
declare const Popup: import('vue').DefineSetupFnComponent<PopupProps, {}, {}, PopupProps & {}, import('vue').PublicProps>;
|
|
54
|
+
export default Popup;
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
import { defineComponent as Z, computed as f, shallowRef as w, watchEffect as _, nextTick as ee, createVNode as i, Transition as te, withDirectives as re, mergeProps as oe, vShow as ne, mergeDefaults as ie } from "vue";
|
|
2
|
+
import ae from "../resize-observer/dist/index.js";
|
|
3
|
+
import "../util/dist/warning.js";
|
|
4
|
+
import ue from "../util/dist/classnames.js";
|
|
5
|
+
import { toPropsRefs as se } from "../util/dist/props-util/index.js";
|
|
6
|
+
import { getTransitionProps as le } from "../util/dist/utils/transition.js";
|
|
7
|
+
import fe from "../hooks/useOffsetStyle.js";
|
|
8
|
+
import { Arrow as pe } from "./Arrow.js";
|
|
9
|
+
import de from "./Mask.js";
|
|
10
|
+
import me from "./PopupContent.js";
|
|
11
|
+
const ce = {
|
|
12
|
+
autoDestroy: !0
|
|
13
|
+
}, ke = /* @__PURE__ */ Z((e, {
|
|
14
|
+
attrs: x,
|
|
15
|
+
expose: k
|
|
16
|
+
}) => {
|
|
17
|
+
const M = f(() => typeof e.popup == "function" ? e.popup() : e.popup), {
|
|
18
|
+
offsetX: N,
|
|
19
|
+
offsetR: B,
|
|
20
|
+
offsetY: A,
|
|
21
|
+
offsetB: E,
|
|
22
|
+
open: n,
|
|
23
|
+
ready: R,
|
|
24
|
+
align: D
|
|
25
|
+
} = se(e, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align"), P = f(() => e.open || e.keepDom), p = f(() => !!e.mobile), F = e?.getPopupContainer?.length > 0, z = f(() => {
|
|
26
|
+
const {
|
|
27
|
+
mobile: t,
|
|
28
|
+
mask: r,
|
|
29
|
+
maskMotion: a,
|
|
30
|
+
motion: c
|
|
31
|
+
} = e;
|
|
32
|
+
return t ? [t.mask, t.maskMotion, t.motion] : [r, a, c];
|
|
33
|
+
}), d = w(!e.getPopupContainer || !F);
|
|
34
|
+
_(async () => {
|
|
35
|
+
await ee();
|
|
36
|
+
const t = e?.getPopupContainer?.length > 0, r = e.target;
|
|
37
|
+
!d.value && t && r && (d.value = !0);
|
|
38
|
+
});
|
|
39
|
+
const S = (t, r) => {
|
|
40
|
+
e?.onResize?.(t, r), e?.onAlign?.();
|
|
41
|
+
}, O = fe(p, R, n, D, B, E, N, A), m = w();
|
|
42
|
+
return k({
|
|
43
|
+
getElement: () => m.value,
|
|
44
|
+
nativeElement: m
|
|
45
|
+
}), () => {
|
|
46
|
+
if (!d.value)
|
|
47
|
+
return null;
|
|
48
|
+
const {
|
|
49
|
+
stretch: t,
|
|
50
|
+
targetHeight: r,
|
|
51
|
+
targetWidth: a,
|
|
52
|
+
portal: c,
|
|
53
|
+
forceRender: $,
|
|
54
|
+
getPopupContainer: h,
|
|
55
|
+
target: j,
|
|
56
|
+
autoDestroy: T,
|
|
57
|
+
zIndex: b,
|
|
58
|
+
prefixCls: l,
|
|
59
|
+
// Arrow
|
|
60
|
+
arrow: v,
|
|
61
|
+
arrowPos: y,
|
|
62
|
+
align: H,
|
|
63
|
+
onMouseEnter: I,
|
|
64
|
+
onMouseLeave: L,
|
|
65
|
+
onPointerEnter: V,
|
|
66
|
+
onPointerDownCapture: W,
|
|
67
|
+
onClick: X,
|
|
68
|
+
fresh: Y,
|
|
69
|
+
onPrepare: C,
|
|
70
|
+
onVisibleChanged: g
|
|
71
|
+
} = e, u = {};
|
|
72
|
+
t && (t.includes("height") && r ? u.height = `${r}px` : t.includes("minHeight") && r && (u.minHeight = `${r}px`), t.includes("width") && a ? u.width = `${a}px` : t.includes("minWidth") && a && (u.minWidth = `${a}px`)), n.value || (u.pointerEvents = "none");
|
|
73
|
+
const [G, J, q] = z.value, K = q?.name ?? q?.motionName, s = le(K, q), Q = {
|
|
74
|
+
...s,
|
|
75
|
+
onBeforeAppear: (o) => {
|
|
76
|
+
C?.(), s?.onBeforeAppear?.(o);
|
|
77
|
+
},
|
|
78
|
+
onBeforeEnter: (o) => {
|
|
79
|
+
C?.(), s?.onBeforeEnter?.(o);
|
|
80
|
+
},
|
|
81
|
+
onAfterAppear: (o) => {
|
|
82
|
+
s?.onAfterAppear?.(o), g?.(!0);
|
|
83
|
+
},
|
|
84
|
+
onAfterEnter: (o) => {
|
|
85
|
+
s?.onAfterEnter?.(o), g?.(!0);
|
|
86
|
+
},
|
|
87
|
+
onAfterLeave: (o) => {
|
|
88
|
+
s.onAfterLeave?.(o), g?.(!1);
|
|
89
|
+
}
|
|
90
|
+
}, U = ue(l, x.class, e.className, {
|
|
91
|
+
[`${l}-mobile`]: p.value
|
|
92
|
+
});
|
|
93
|
+
return console.log(P.value, n.value), i(c, {
|
|
94
|
+
open: $ || P.value,
|
|
95
|
+
getContainer: h && (() => h(j)),
|
|
96
|
+
autoDestroy: T
|
|
97
|
+
}, {
|
|
98
|
+
default: () => [i(de, {
|
|
99
|
+
prefixCls: l,
|
|
100
|
+
open: n.value,
|
|
101
|
+
zIndex: b,
|
|
102
|
+
mask: G,
|
|
103
|
+
motion: J,
|
|
104
|
+
mobile: p.value
|
|
105
|
+
}, null), i(ae, {
|
|
106
|
+
onResize: S,
|
|
107
|
+
disabled: !n.value
|
|
108
|
+
}, {
|
|
109
|
+
default: () => [i(te, Q, {
|
|
110
|
+
default: () => [re(i("div", oe({
|
|
111
|
+
ref: m,
|
|
112
|
+
class: U,
|
|
113
|
+
style: [{
|
|
114
|
+
"--arrow-x": `${y.x || 0}px`,
|
|
115
|
+
"--arrow-y": `${y.y || 0}px`
|
|
116
|
+
}, O.value, u, {
|
|
117
|
+
boxSizing: "border-box",
|
|
118
|
+
zIndex: b
|
|
119
|
+
}, e.style],
|
|
120
|
+
onMouseenter: I,
|
|
121
|
+
onMouseleave: L,
|
|
122
|
+
onPointerenter: V,
|
|
123
|
+
onClick: X
|
|
124
|
+
}, {
|
|
125
|
+
onPointerdownCapture: W
|
|
126
|
+
}), [v && i(pe, {
|
|
127
|
+
prefixCls: l,
|
|
128
|
+
arrow: v,
|
|
129
|
+
arrowPos: y,
|
|
130
|
+
align: H
|
|
131
|
+
}, null), i(me, {
|
|
132
|
+
cache: !n.value && !Y
|
|
133
|
+
}, {
|
|
134
|
+
default: () => [M.value]
|
|
135
|
+
})]), [[ne, n.value]])]
|
|
136
|
+
})]
|
|
137
|
+
})]
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
}, {
|
|
141
|
+
props: /* @__PURE__ */ ie({
|
|
142
|
+
prefixCls: {
|
|
143
|
+
type: String,
|
|
144
|
+
required: !0
|
|
145
|
+
},
|
|
146
|
+
className: {
|
|
147
|
+
type: String,
|
|
148
|
+
required: !1
|
|
149
|
+
},
|
|
150
|
+
style: {
|
|
151
|
+
type: null,
|
|
152
|
+
required: !1
|
|
153
|
+
},
|
|
154
|
+
popup: {
|
|
155
|
+
type: Function,
|
|
156
|
+
required: !1,
|
|
157
|
+
skipCheck: !0
|
|
158
|
+
},
|
|
159
|
+
target: {
|
|
160
|
+
type: null,
|
|
161
|
+
required: !0
|
|
162
|
+
},
|
|
163
|
+
onMouseEnter: {
|
|
164
|
+
type: Function,
|
|
165
|
+
required: !1
|
|
166
|
+
},
|
|
167
|
+
onMouseLeave: {
|
|
168
|
+
type: Function,
|
|
169
|
+
required: !1
|
|
170
|
+
},
|
|
171
|
+
onPointerEnter: {
|
|
172
|
+
type: Function,
|
|
173
|
+
required: !1
|
|
174
|
+
},
|
|
175
|
+
onPointerDownCapture: {
|
|
176
|
+
type: Function,
|
|
177
|
+
required: !1
|
|
178
|
+
},
|
|
179
|
+
zIndex: {
|
|
180
|
+
type: Number,
|
|
181
|
+
required: !1
|
|
182
|
+
},
|
|
183
|
+
mask: {
|
|
184
|
+
type: Boolean,
|
|
185
|
+
required: !1
|
|
186
|
+
},
|
|
187
|
+
onVisibleChanged: {
|
|
188
|
+
type: Function,
|
|
189
|
+
required: !0
|
|
190
|
+
},
|
|
191
|
+
align: {
|
|
192
|
+
type: Object,
|
|
193
|
+
required: !1
|
|
194
|
+
},
|
|
195
|
+
arrow: {
|
|
196
|
+
type: Object,
|
|
197
|
+
required: !1
|
|
198
|
+
},
|
|
199
|
+
arrowPos: {
|
|
200
|
+
type: Object,
|
|
201
|
+
required: !0
|
|
202
|
+
},
|
|
203
|
+
open: {
|
|
204
|
+
type: Boolean,
|
|
205
|
+
required: !0
|
|
206
|
+
},
|
|
207
|
+
keepDom: {
|
|
208
|
+
type: Boolean,
|
|
209
|
+
required: !0
|
|
210
|
+
},
|
|
211
|
+
fresh: {
|
|
212
|
+
type: Boolean,
|
|
213
|
+
required: !1
|
|
214
|
+
},
|
|
215
|
+
onClick: {
|
|
216
|
+
type: Function,
|
|
217
|
+
required: !1
|
|
218
|
+
},
|
|
219
|
+
motion: {
|
|
220
|
+
type: Object,
|
|
221
|
+
required: !1
|
|
222
|
+
},
|
|
223
|
+
maskMotion: {
|
|
224
|
+
type: Object,
|
|
225
|
+
required: !1
|
|
226
|
+
},
|
|
227
|
+
forceRender: {
|
|
228
|
+
type: Boolean,
|
|
229
|
+
required: !1
|
|
230
|
+
},
|
|
231
|
+
getPopupContainer: {
|
|
232
|
+
type: Function,
|
|
233
|
+
required: !1
|
|
234
|
+
},
|
|
235
|
+
autoDestroy: {
|
|
236
|
+
type: Boolean,
|
|
237
|
+
required: !1
|
|
238
|
+
},
|
|
239
|
+
portal: {
|
|
240
|
+
type: null,
|
|
241
|
+
required: !0
|
|
242
|
+
},
|
|
243
|
+
ready: {
|
|
244
|
+
type: Boolean,
|
|
245
|
+
required: !0
|
|
246
|
+
},
|
|
247
|
+
offsetX: {
|
|
248
|
+
type: Number,
|
|
249
|
+
required: !0
|
|
250
|
+
},
|
|
251
|
+
offsetY: {
|
|
252
|
+
type: Number,
|
|
253
|
+
required: !0
|
|
254
|
+
},
|
|
255
|
+
offsetR: {
|
|
256
|
+
type: Number,
|
|
257
|
+
required: !0
|
|
258
|
+
},
|
|
259
|
+
offsetB: {
|
|
260
|
+
type: Number,
|
|
261
|
+
required: !0
|
|
262
|
+
},
|
|
263
|
+
onAlign: {
|
|
264
|
+
type: null,
|
|
265
|
+
required: !0
|
|
266
|
+
},
|
|
267
|
+
onPrepare: {
|
|
268
|
+
type: Function,
|
|
269
|
+
required: !0
|
|
270
|
+
},
|
|
271
|
+
stretch: {
|
|
272
|
+
type: String,
|
|
273
|
+
required: !1
|
|
274
|
+
},
|
|
275
|
+
targetWidth: {
|
|
276
|
+
type: Number,
|
|
277
|
+
required: !1
|
|
278
|
+
},
|
|
279
|
+
targetHeight: {
|
|
280
|
+
type: Number,
|
|
281
|
+
required: !1
|
|
282
|
+
},
|
|
283
|
+
onResize: {
|
|
284
|
+
type: null,
|
|
285
|
+
required: !1
|
|
286
|
+
},
|
|
287
|
+
mobile: {
|
|
288
|
+
type: Object,
|
|
289
|
+
required: !1
|
|
290
|
+
}
|
|
291
|
+
}, ce)
|
|
292
|
+
});
|
|
293
|
+
export {
|
|
294
|
+
ke as default
|
|
295
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),A=require("../util/dist/props-util/index.cjs"),B=require("../util/dist/utils/transition.cjs"),x=require("../hooks/useOffsetStyle.cjs"),N=e.defineComponent(s=>{const r=e.shallowRef(!1),{open:n,isMobile:y,align:q,ready:f,offsetR:v,offsetB:b,offsetX:m,offsetY:h}=A.toPropsRefs(s,"open","isMobile","align","ready","offsetR","offsetB","offsetX","offsetY"),l=x.default(y,f,n,q,v,b,m,h),p=e.shallowRef(l.value);return e.watchEffect(()=>{f.value&&(p.value=l.value)}),e.watch(n,i=>{i&&(r.value=!0)},{immediate:!0}),()=>{const{popupSize:i,motion:d,prefixCls:S,uniqueContainerClassName:w,arrowPos:c,uniqueContainerStyle:g}=s,u={};i&&(u.width=`${i.width}px`,u.height=`${i.height}px`);const o=B.getTransitionProps(d?.name,d),C={...o,onBeforeAppear:t=>{r.value=!0,o.onBeforeAppear?.(t)},onBeforeEnter:t=>{r.value=!0,o.onBeforeEnter?.(t)},onAfterAppear:t=>{r.value=!0,o.onAfterAppear?.(t)},onAfterEnter:t=>{r.value=!0,o.onAfterEnter?.(t)},onAfterLeave:t=>{r.value=!1,o.onAfterLeave?.(t)}},a=`${S}-unique-container`;return e.createVNode(e.Transition,C,{default:()=>[e.withDirectives(e.createVNode("div",{class:[a,w,{[`${a}-visible`]:r.value,[`${a}-hidden`]:!r.value}],style:[{"--arrow-x":`${c?.x||0}px`,"--arrow-y":`${c?.y||0}px`},p.value,u,g]},null),[[e.vShow,n.value]])]})}},{props:{prefixCls:{type:String,required:!0},isMobile:{type:Boolean,required:!0},ready:{type:Boolean,required:!0},open:{type:Boolean,required:!0},align:{type:Object,required:!0},offsetR:{type:Number,required:!0},offsetB:{type:Number,required:!0},offsetX:{type:Number,required:!0},offsetY:{type:Number,required:!0},arrowPos:{type:Object,required:!1},popupSize:{type:Object,required:!1},motion:{type:Object,required:!1},uniqueContainerClassName:{type:String,required:!1},uniqueContainerStyle:{type:null,required:!1}}});exports.default=N;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CSSMotionProps } from '../../../util/src/utils/transition';
|
|
2
|
+
import { CSSProperties } from 'vue';
|
|
3
|
+
import { AlignType, ArrowPos } from '../interface.ts';
|
|
4
|
+
export interface UniqueContainerProps {
|
|
5
|
+
prefixCls: string;
|
|
6
|
+
isMobile: boolean;
|
|
7
|
+
ready: boolean;
|
|
8
|
+
open: boolean;
|
|
9
|
+
align: AlignType;
|
|
10
|
+
offsetR: number;
|
|
11
|
+
offsetB: number;
|
|
12
|
+
offsetX: number;
|
|
13
|
+
offsetY: number;
|
|
14
|
+
arrowPos?: ArrowPos;
|
|
15
|
+
popupSize?: {
|
|
16
|
+
width: number;
|
|
17
|
+
height: number;
|
|
18
|
+
};
|
|
19
|
+
motion?: CSSMotionProps;
|
|
20
|
+
uniqueContainerClassName?: string;
|
|
21
|
+
uniqueContainerStyle?: CSSProperties;
|
|
22
|
+
}
|
|
23
|
+
declare const UniqueContainer: import('vue').DefineSetupFnComponent<UniqueContainerProps, {}, {}, UniqueContainerProps & {}, import('vue').PublicProps>;
|
|
24
|
+
export default UniqueContainer;
|