@destyler/popover 0.0.1-beta.2 → 0.0.1-beta.5

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/dist/index.cjs CHANGED
@@ -39,9 +39,9 @@ const DestylerBinder = vue.defineComponent({
39
39
  default: true
40
40
  }
41
41
  },
42
- setup(props, { slots }) {
42
+ setup(props) {
43
43
  vue.provide("DestylerBinder", vue.getCurrentInstance()?.proxy);
44
- const DestylerBinder = vue.inject("DestylerBinder", null);
44
+ const DestylerBinder2 = vue.inject("DestylerBinder", null);
45
45
  const targetRef = vue.ref(null);
46
46
  const followerResizeListeners = /* @__PURE__ */ new Set();
47
47
  const followerScrollListeners = /* @__PURE__ */ new Set();
@@ -56,8 +56,8 @@ const DestylerBinder = vue.defineComponent({
56
56
  };
57
57
  const setTargetRef = (el) => {
58
58
  targetRef.value = el;
59
- if (DestylerBinder && props.syncTargetWithParent)
60
- DestylerBinder.setTargetRef(el);
59
+ if (DestylerBinder2 && props.syncTargetWithParent)
60
+ DestylerBinder2.setTargetRef(el);
61
61
  };
62
62
  let scrollableNodes = [];
63
63
  const ensureScrollListener = () => {
@@ -731,19 +731,15 @@ const DestylerPopoverBody = vue.defineComponent({
731
731
  }, slots);
732
732
  return [body2];
733
733
  };
734
- contentNode = vue.h(
735
- "div",
736
- vue.mergeProps({
737
- ref: body,
738
- destyler: "popover-body-toggle",
739
- onMouseenter: handleMouseEnter,
740
- onMouseleave: handleMouseLeave
741
- }, attrs),
742
- internalTrapFocus ? vue.h(DestylerFocusTrap, {
743
- active: props.show,
744
- autoFocus: true
745
- }, renderContentInnerNode) : renderContentInnerNode()
746
- );
734
+ contentNode = vue.h("div", vue.mergeProps({
735
+ ref: body,
736
+ destyler: "popover-body-toggle",
737
+ onMouseenter: handleMouseEnter,
738
+ onMouseleave: handleMouseLeave
739
+ }, attrs), internalTrapFocus ? vue.h(DestylerFocusTrap, {
740
+ active: props.show,
741
+ autoFocus: true
742
+ }, renderContentInnerNode) : renderContentInnerNode());
747
743
  } else {
748
744
  contentNode = renderBody(body, handleMouseEnter, handleMouseLeave);
749
745
  }
@@ -872,7 +868,7 @@ const DestylerPopover = vue.defineComponent({
872
868
  inheritAttrs: false,
873
869
  props: destylerPopoverProps,
874
870
  __popover__: true,
875
- setup(props, { slots, attrs }) {
871
+ setup(props) {
876
872
  const isMounted = composition.useIsMounted();
877
873
  const binderInst = vue.ref(null);
878
874
  const controlledShow = vue.computed(() => props.show);
@@ -1123,34 +1119,26 @@ const DestylerPopover = vue.defineComponent({
1123
1119
  }
1124
1120
  }
1125
1121
  }
1126
- return vue.h(
1127
- DestylerBinder,
1128
- {
1129
- ref: "binderInst",
1130
- syncTarget: !popoverInside,
1131
- syncTargetWithParent: this.$props.internalSyncTargetWithParent
1132
- },
1133
- () => {
1134
- return [
1135
- this.$props.internalTrapFocus && this.getMergedShow() ? vue.withDirectives(vue.h("div"), [[directives.zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
1136
- this.positionManually ? null : vue.h(DestylerTarget, null, {
1137
- default: () => triggerVNode
1138
- }),
1139
- vue.h(
1140
- DestylerPopoverBody,
1141
- shared.keep(this.$props, bodyPropKeys, {
1142
- ...this.$attrs,
1143
- show: this.getMergedShow()
1144
- }),
1145
- {
1146
- default: () => this.$slots.default?.(),
1147
- header: () => this.$slots.header?.(),
1148
- footer: () => this.$slots.footer?.()
1149
- }
1150
- )
1151
- ];
1152
- }
1153
- );
1122
+ return vue.h(DestylerBinder, {
1123
+ ref: "binderInst",
1124
+ syncTarget: !popoverInside,
1125
+ syncTargetWithParent: this.$props.internalSyncTargetWithParent
1126
+ }, () => {
1127
+ return [
1128
+ this.$props.internalTrapFocus && this.getMergedShow() ? vue.withDirectives(vue.h("div"), [[directives.zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
1129
+ this.positionManually ? null : vue.h(DestylerTarget, null, {
1130
+ default: () => triggerVNode
1131
+ }),
1132
+ vue.h(DestylerPopoverBody, shared.keep(this.$props, bodyPropKeys, {
1133
+ ...this.$attrs,
1134
+ show: this.getMergedShow()
1135
+ }), {
1136
+ default: () => this.$slots.default?.(),
1137
+ header: () => this.$slots.header?.(),
1138
+ footer: () => this.$slots.footer?.()
1139
+ })
1140
+ ];
1141
+ });
1154
1142
  }
1155
1143
  });
1156
1144
 
package/dist/index.d.cts CHANGED
@@ -1,4 +1,3 @@
1
- import * as vue from 'vue';
2
1
  import { Ref, VNode, ComputedRef, PropType } from 'vue';
3
2
  import { MaybeArray, ExtractPublicPropTypes } from '@destyler/shared';
4
3
  import { ComponentResolver } from 'unplugin-vue-components';
@@ -105,162 +104,7 @@ interface BodyInstance {
105
104
  syncPosition: () => void;
106
105
  [key: string]: unknown;
107
106
  }
108
- declare const DestylerPopover: vue.DefineComponent<{
109
- show: {
110
- type: PropType<boolean | undefined>;
111
- default: undefined;
112
- };
113
- defaultShow: {
114
- type: PropType<boolean>;
115
- };
116
- trigger: {
117
- type: PropType<PopoverTrigger>;
118
- default: string;
119
- };
120
- delay: {
121
- type: NumberConstructor;
122
- default: number;
123
- };
124
- duration: {
125
- type: NumberConstructor;
126
- default: number;
127
- };
128
- x: {
129
- type: PropType<number>;
130
- };
131
- y: {
132
- type: PropType<number>;
133
- };
134
- disabled: {
135
- type: PropType<boolean>;
136
- };
137
- getDisabled: {
138
- type: PropType<() => boolean>;
139
- };
140
- displayDirective: {
141
- type: PropType<"show" | "if">;
142
- default: string;
143
- };
144
- zIndex: {
145
- type: PropType<number>;
146
- };
147
- internalSyncTargetWithParent: {
148
- type: PropType<boolean>;
149
- };
150
- internalInheritedEventHandlers: {
151
- type: PropType<TriggerEventHandlers[]>;
152
- default: () => never[];
153
- };
154
- internalTrapFocus: {
155
- type: PropType<boolean>;
156
- };
157
- onClickoutside: {
158
- type: PropType<(e: MouseEvent) => void>;
159
- };
160
- 'onUpdate:show': {
161
- type: PropType<MaybeArray<(value: boolean) => void>>;
162
- };
163
- onUpdateShow: {
164
- type: PropType<MaybeArray<(value: boolean) => void>>;
165
- };
166
- onShow: {
167
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
168
- };
169
- onHide: {
170
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
171
- };
172
- internalRenderBody: {
173
- type: PropType<InternalRenderBody>;
174
- };
175
- }, {
176
- binderInst: Ref<{
177
- targetRef: HTMLElement | null;
178
- } | null>;
179
- positionManually: ComputedRef<boolean>;
180
- mergedShowConsideringDisabledProp: ComputedRef<boolean | undefined>;
181
- uncontrolledShow: Ref<boolean | undefined>;
182
- setShow: (value: boolean) => void;
183
- getMergedShow: () => boolean;
184
- handleClick: () => void;
185
- handleMouseEnter: () => void;
186
- handleMouseLeave: () => void;
187
- handleFocus: () => void;
188
- handleBlur: () => void;
189
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
190
- show: {
191
- type: PropType<boolean | undefined>;
192
- default: undefined;
193
- };
194
- defaultShow: {
195
- type: PropType<boolean>;
196
- };
197
- trigger: {
198
- type: PropType<PopoverTrigger>;
199
- default: string;
200
- };
201
- delay: {
202
- type: NumberConstructor;
203
- default: number;
204
- };
205
- duration: {
206
- type: NumberConstructor;
207
- default: number;
208
- };
209
- x: {
210
- type: PropType<number>;
211
- };
212
- y: {
213
- type: PropType<number>;
214
- };
215
- disabled: {
216
- type: PropType<boolean>;
217
- };
218
- getDisabled: {
219
- type: PropType<() => boolean>;
220
- };
221
- displayDirective: {
222
- type: PropType<"show" | "if">;
223
- default: string;
224
- };
225
- zIndex: {
226
- type: PropType<number>;
227
- };
228
- internalSyncTargetWithParent: {
229
- type: PropType<boolean>;
230
- };
231
- internalInheritedEventHandlers: {
232
- type: PropType<TriggerEventHandlers[]>;
233
- default: () => never[];
234
- };
235
- internalTrapFocus: {
236
- type: PropType<boolean>;
237
- };
238
- onClickoutside: {
239
- type: PropType<(e: MouseEvent) => void>;
240
- };
241
- 'onUpdate:show': {
242
- type: PropType<MaybeArray<(value: boolean) => void>>;
243
- };
244
- onUpdateShow: {
245
- type: PropType<MaybeArray<(value: boolean) => void>>;
246
- };
247
- onShow: {
248
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
249
- };
250
- onHide: {
251
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
252
- };
253
- internalRenderBody: {
254
- type: PropType<InternalRenderBody>;
255
- };
256
- }>>, {
257
- show: boolean | undefined;
258
- trigger: PopoverTrigger;
259
- delay: number;
260
- duration: number;
261
- displayDirective: "show" | "if";
262
- internalInheritedEventHandlers: TriggerEventHandlers[];
263
- }, {}>;
107
+ declare const DestylerPopover: any;
264
108
 
265
109
  declare const popoverBodyProps: {
266
110
  show: {
@@ -306,102 +150,7 @@ declare const popoverBodyProps: {
306
150
  type: PropType<(e: MouseEvent) => void>;
307
151
  };
308
152
  };
309
- declare const DestylerPopoverBody: vue.DefineComponent<{
310
- show: {
311
- type: PropType<boolean>;
312
- };
313
- trigger: {
314
- type: PropType<PopoverTrigger>;
315
- };
316
- delay: {
317
- type: PropType<number>;
318
- };
319
- duration: {
320
- type: PropType<number>;
321
- };
322
- displayDirective: {
323
- type: PropType<"show" | "if">;
324
- };
325
- x: {
326
- type: PropType<number>;
327
- };
328
- y: {
329
- type: PropType<number>;
330
- };
331
- flip: {
332
- type: PropType<boolean>;
333
- };
334
- internalTrapFocus: {
335
- type: PropType<boolean>;
336
- };
337
- overlap: {
338
- type: PropType<boolean>;
339
- };
340
- keepAliveOnHover: {
341
- type: PropType<boolean>;
342
- };
343
- scrollable: {
344
- type: PropType<boolean>;
345
- };
346
- internalDeactivateImmediately: {
347
- type: PropType<boolean>;
348
- };
349
- onClickoutside: {
350
- type: PropType<(e: MouseEvent) => void>;
351
- };
352
- }, {
353
- displayed: vue.Ref<boolean>;
354
- isMounted: vue.Ref<boolean>;
355
- zIndex: vue.Ref<number | undefined>;
356
- follower: vue.Ref<{
357
- syncPosition: () => void;
358
- } | null>;
359
- followerEnabled: vue.Ref<boolean | undefined>;
360
- renderContentNode: () => VNode | null;
361
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
362
- show: {
363
- type: PropType<boolean>;
364
- };
365
- trigger: {
366
- type: PropType<PopoverTrigger>;
367
- };
368
- delay: {
369
- type: PropType<number>;
370
- };
371
- duration: {
372
- type: PropType<number>;
373
- };
374
- displayDirective: {
375
- type: PropType<"show" | "if">;
376
- };
377
- x: {
378
- type: PropType<number>;
379
- };
380
- y: {
381
- type: PropType<number>;
382
- };
383
- flip: {
384
- type: PropType<boolean>;
385
- };
386
- internalTrapFocus: {
387
- type: PropType<boolean>;
388
- };
389
- overlap: {
390
- type: PropType<boolean>;
391
- };
392
- keepAliveOnHover: {
393
- type: PropType<boolean>;
394
- };
395
- scrollable: {
396
- type: PropType<boolean>;
397
- };
398
- internalDeactivateImmediately: {
399
- type: PropType<boolean>;
400
- };
401
- onClickoutside: {
402
- type: PropType<(e: MouseEvent) => void>;
403
- };
404
- }>>, {}, {}>;
153
+ declare const DestylerPopoverBody: any;
405
154
 
406
155
  declare function DestylerPopoverResolver(): ComponentResolver;
407
156
 
package/dist/index.d.mts CHANGED
@@ -1,4 +1,3 @@
1
- import * as vue from 'vue';
2
1
  import { Ref, VNode, ComputedRef, PropType } from 'vue';
3
2
  import { MaybeArray, ExtractPublicPropTypes } from '@destyler/shared';
4
3
  import { ComponentResolver } from 'unplugin-vue-components';
@@ -105,162 +104,7 @@ interface BodyInstance {
105
104
  syncPosition: () => void;
106
105
  [key: string]: unknown;
107
106
  }
108
- declare const DestylerPopover: vue.DefineComponent<{
109
- show: {
110
- type: PropType<boolean | undefined>;
111
- default: undefined;
112
- };
113
- defaultShow: {
114
- type: PropType<boolean>;
115
- };
116
- trigger: {
117
- type: PropType<PopoverTrigger>;
118
- default: string;
119
- };
120
- delay: {
121
- type: NumberConstructor;
122
- default: number;
123
- };
124
- duration: {
125
- type: NumberConstructor;
126
- default: number;
127
- };
128
- x: {
129
- type: PropType<number>;
130
- };
131
- y: {
132
- type: PropType<number>;
133
- };
134
- disabled: {
135
- type: PropType<boolean>;
136
- };
137
- getDisabled: {
138
- type: PropType<() => boolean>;
139
- };
140
- displayDirective: {
141
- type: PropType<"show" | "if">;
142
- default: string;
143
- };
144
- zIndex: {
145
- type: PropType<number>;
146
- };
147
- internalSyncTargetWithParent: {
148
- type: PropType<boolean>;
149
- };
150
- internalInheritedEventHandlers: {
151
- type: PropType<TriggerEventHandlers[]>;
152
- default: () => never[];
153
- };
154
- internalTrapFocus: {
155
- type: PropType<boolean>;
156
- };
157
- onClickoutside: {
158
- type: PropType<(e: MouseEvent) => void>;
159
- };
160
- 'onUpdate:show': {
161
- type: PropType<MaybeArray<(value: boolean) => void>>;
162
- };
163
- onUpdateShow: {
164
- type: PropType<MaybeArray<(value: boolean) => void>>;
165
- };
166
- onShow: {
167
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
168
- };
169
- onHide: {
170
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
171
- };
172
- internalRenderBody: {
173
- type: PropType<InternalRenderBody>;
174
- };
175
- }, {
176
- binderInst: Ref<{
177
- targetRef: HTMLElement | null;
178
- } | null>;
179
- positionManually: ComputedRef<boolean>;
180
- mergedShowConsideringDisabledProp: ComputedRef<boolean | undefined>;
181
- uncontrolledShow: Ref<boolean | undefined>;
182
- setShow: (value: boolean) => void;
183
- getMergedShow: () => boolean;
184
- handleClick: () => void;
185
- handleMouseEnter: () => void;
186
- handleMouseLeave: () => void;
187
- handleFocus: () => void;
188
- handleBlur: () => void;
189
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
190
- show: {
191
- type: PropType<boolean | undefined>;
192
- default: undefined;
193
- };
194
- defaultShow: {
195
- type: PropType<boolean>;
196
- };
197
- trigger: {
198
- type: PropType<PopoverTrigger>;
199
- default: string;
200
- };
201
- delay: {
202
- type: NumberConstructor;
203
- default: number;
204
- };
205
- duration: {
206
- type: NumberConstructor;
207
- default: number;
208
- };
209
- x: {
210
- type: PropType<number>;
211
- };
212
- y: {
213
- type: PropType<number>;
214
- };
215
- disabled: {
216
- type: PropType<boolean>;
217
- };
218
- getDisabled: {
219
- type: PropType<() => boolean>;
220
- };
221
- displayDirective: {
222
- type: PropType<"show" | "if">;
223
- default: string;
224
- };
225
- zIndex: {
226
- type: PropType<number>;
227
- };
228
- internalSyncTargetWithParent: {
229
- type: PropType<boolean>;
230
- };
231
- internalInheritedEventHandlers: {
232
- type: PropType<TriggerEventHandlers[]>;
233
- default: () => never[];
234
- };
235
- internalTrapFocus: {
236
- type: PropType<boolean>;
237
- };
238
- onClickoutside: {
239
- type: PropType<(e: MouseEvent) => void>;
240
- };
241
- 'onUpdate:show': {
242
- type: PropType<MaybeArray<(value: boolean) => void>>;
243
- };
244
- onUpdateShow: {
245
- type: PropType<MaybeArray<(value: boolean) => void>>;
246
- };
247
- onShow: {
248
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
249
- };
250
- onHide: {
251
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
252
- };
253
- internalRenderBody: {
254
- type: PropType<InternalRenderBody>;
255
- };
256
- }>>, {
257
- show: boolean | undefined;
258
- trigger: PopoverTrigger;
259
- delay: number;
260
- duration: number;
261
- displayDirective: "show" | "if";
262
- internalInheritedEventHandlers: TriggerEventHandlers[];
263
- }, {}>;
107
+ declare const DestylerPopover: any;
264
108
 
265
109
  declare const popoverBodyProps: {
266
110
  show: {
@@ -306,102 +150,7 @@ declare const popoverBodyProps: {
306
150
  type: PropType<(e: MouseEvent) => void>;
307
151
  };
308
152
  };
309
- declare const DestylerPopoverBody: vue.DefineComponent<{
310
- show: {
311
- type: PropType<boolean>;
312
- };
313
- trigger: {
314
- type: PropType<PopoverTrigger>;
315
- };
316
- delay: {
317
- type: PropType<number>;
318
- };
319
- duration: {
320
- type: PropType<number>;
321
- };
322
- displayDirective: {
323
- type: PropType<"show" | "if">;
324
- };
325
- x: {
326
- type: PropType<number>;
327
- };
328
- y: {
329
- type: PropType<number>;
330
- };
331
- flip: {
332
- type: PropType<boolean>;
333
- };
334
- internalTrapFocus: {
335
- type: PropType<boolean>;
336
- };
337
- overlap: {
338
- type: PropType<boolean>;
339
- };
340
- keepAliveOnHover: {
341
- type: PropType<boolean>;
342
- };
343
- scrollable: {
344
- type: PropType<boolean>;
345
- };
346
- internalDeactivateImmediately: {
347
- type: PropType<boolean>;
348
- };
349
- onClickoutside: {
350
- type: PropType<(e: MouseEvent) => void>;
351
- };
352
- }, {
353
- displayed: vue.Ref<boolean>;
354
- isMounted: vue.Ref<boolean>;
355
- zIndex: vue.Ref<number | undefined>;
356
- follower: vue.Ref<{
357
- syncPosition: () => void;
358
- } | null>;
359
- followerEnabled: vue.Ref<boolean | undefined>;
360
- renderContentNode: () => VNode | null;
361
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
362
- show: {
363
- type: PropType<boolean>;
364
- };
365
- trigger: {
366
- type: PropType<PopoverTrigger>;
367
- };
368
- delay: {
369
- type: PropType<number>;
370
- };
371
- duration: {
372
- type: PropType<number>;
373
- };
374
- displayDirective: {
375
- type: PropType<"show" | "if">;
376
- };
377
- x: {
378
- type: PropType<number>;
379
- };
380
- y: {
381
- type: PropType<number>;
382
- };
383
- flip: {
384
- type: PropType<boolean>;
385
- };
386
- internalTrapFocus: {
387
- type: PropType<boolean>;
388
- };
389
- overlap: {
390
- type: PropType<boolean>;
391
- };
392
- keepAliveOnHover: {
393
- type: PropType<boolean>;
394
- };
395
- scrollable: {
396
- type: PropType<boolean>;
397
- };
398
- internalDeactivateImmediately: {
399
- type: PropType<boolean>;
400
- };
401
- onClickoutside: {
402
- type: PropType<(e: MouseEvent) => void>;
403
- };
404
- }>>, {}, {}>;
153
+ declare const DestylerPopoverBody: any;
405
154
 
406
155
  declare function DestylerPopoverResolver(): ComponentResolver;
407
156
 
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as vue from 'vue';
2
1
  import { Ref, VNode, ComputedRef, PropType } from 'vue';
3
2
  import { MaybeArray, ExtractPublicPropTypes } from '@destyler/shared';
4
3
  import { ComponentResolver } from 'unplugin-vue-components';
@@ -105,162 +104,7 @@ interface BodyInstance {
105
104
  syncPosition: () => void;
106
105
  [key: string]: unknown;
107
106
  }
108
- declare const DestylerPopover: vue.DefineComponent<{
109
- show: {
110
- type: PropType<boolean | undefined>;
111
- default: undefined;
112
- };
113
- defaultShow: {
114
- type: PropType<boolean>;
115
- };
116
- trigger: {
117
- type: PropType<PopoverTrigger>;
118
- default: string;
119
- };
120
- delay: {
121
- type: NumberConstructor;
122
- default: number;
123
- };
124
- duration: {
125
- type: NumberConstructor;
126
- default: number;
127
- };
128
- x: {
129
- type: PropType<number>;
130
- };
131
- y: {
132
- type: PropType<number>;
133
- };
134
- disabled: {
135
- type: PropType<boolean>;
136
- };
137
- getDisabled: {
138
- type: PropType<() => boolean>;
139
- };
140
- displayDirective: {
141
- type: PropType<"show" | "if">;
142
- default: string;
143
- };
144
- zIndex: {
145
- type: PropType<number>;
146
- };
147
- internalSyncTargetWithParent: {
148
- type: PropType<boolean>;
149
- };
150
- internalInheritedEventHandlers: {
151
- type: PropType<TriggerEventHandlers[]>;
152
- default: () => never[];
153
- };
154
- internalTrapFocus: {
155
- type: PropType<boolean>;
156
- };
157
- onClickoutside: {
158
- type: PropType<(e: MouseEvent) => void>;
159
- };
160
- 'onUpdate:show': {
161
- type: PropType<MaybeArray<(value: boolean) => void>>;
162
- };
163
- onUpdateShow: {
164
- type: PropType<MaybeArray<(value: boolean) => void>>;
165
- };
166
- onShow: {
167
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
168
- };
169
- onHide: {
170
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
171
- };
172
- internalRenderBody: {
173
- type: PropType<InternalRenderBody>;
174
- };
175
- }, {
176
- binderInst: Ref<{
177
- targetRef: HTMLElement | null;
178
- } | null>;
179
- positionManually: ComputedRef<boolean>;
180
- mergedShowConsideringDisabledProp: ComputedRef<boolean | undefined>;
181
- uncontrolledShow: Ref<boolean | undefined>;
182
- setShow: (value: boolean) => void;
183
- getMergedShow: () => boolean;
184
- handleClick: () => void;
185
- handleMouseEnter: () => void;
186
- handleMouseLeave: () => void;
187
- handleFocus: () => void;
188
- handleBlur: () => void;
189
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
190
- show: {
191
- type: PropType<boolean | undefined>;
192
- default: undefined;
193
- };
194
- defaultShow: {
195
- type: PropType<boolean>;
196
- };
197
- trigger: {
198
- type: PropType<PopoverTrigger>;
199
- default: string;
200
- };
201
- delay: {
202
- type: NumberConstructor;
203
- default: number;
204
- };
205
- duration: {
206
- type: NumberConstructor;
207
- default: number;
208
- };
209
- x: {
210
- type: PropType<number>;
211
- };
212
- y: {
213
- type: PropType<number>;
214
- };
215
- disabled: {
216
- type: PropType<boolean>;
217
- };
218
- getDisabled: {
219
- type: PropType<() => boolean>;
220
- };
221
- displayDirective: {
222
- type: PropType<"show" | "if">;
223
- default: string;
224
- };
225
- zIndex: {
226
- type: PropType<number>;
227
- };
228
- internalSyncTargetWithParent: {
229
- type: PropType<boolean>;
230
- };
231
- internalInheritedEventHandlers: {
232
- type: PropType<TriggerEventHandlers[]>;
233
- default: () => never[];
234
- };
235
- internalTrapFocus: {
236
- type: PropType<boolean>;
237
- };
238
- onClickoutside: {
239
- type: PropType<(e: MouseEvent) => void>;
240
- };
241
- 'onUpdate:show': {
242
- type: PropType<MaybeArray<(value: boolean) => void>>;
243
- };
244
- onUpdateShow: {
245
- type: PropType<MaybeArray<(value: boolean) => void>>;
246
- };
247
- onShow: {
248
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
249
- };
250
- onHide: {
251
- type: PropType<MaybeArray<(value: boolean) => void> | undefined>;
252
- };
253
- internalRenderBody: {
254
- type: PropType<InternalRenderBody>;
255
- };
256
- }>>, {
257
- show: boolean | undefined;
258
- trigger: PopoverTrigger;
259
- delay: number;
260
- duration: number;
261
- displayDirective: "show" | "if";
262
- internalInheritedEventHandlers: TriggerEventHandlers[];
263
- }, {}>;
107
+ declare const DestylerPopover: any;
264
108
 
265
109
  declare const popoverBodyProps: {
266
110
  show: {
@@ -306,102 +150,7 @@ declare const popoverBodyProps: {
306
150
  type: PropType<(e: MouseEvent) => void>;
307
151
  };
308
152
  };
309
- declare const DestylerPopoverBody: vue.DefineComponent<{
310
- show: {
311
- type: PropType<boolean>;
312
- };
313
- trigger: {
314
- type: PropType<PopoverTrigger>;
315
- };
316
- delay: {
317
- type: PropType<number>;
318
- };
319
- duration: {
320
- type: PropType<number>;
321
- };
322
- displayDirective: {
323
- type: PropType<"show" | "if">;
324
- };
325
- x: {
326
- type: PropType<number>;
327
- };
328
- y: {
329
- type: PropType<number>;
330
- };
331
- flip: {
332
- type: PropType<boolean>;
333
- };
334
- internalTrapFocus: {
335
- type: PropType<boolean>;
336
- };
337
- overlap: {
338
- type: PropType<boolean>;
339
- };
340
- keepAliveOnHover: {
341
- type: PropType<boolean>;
342
- };
343
- scrollable: {
344
- type: PropType<boolean>;
345
- };
346
- internalDeactivateImmediately: {
347
- type: PropType<boolean>;
348
- };
349
- onClickoutside: {
350
- type: PropType<(e: MouseEvent) => void>;
351
- };
352
- }, {
353
- displayed: vue.Ref<boolean>;
354
- isMounted: vue.Ref<boolean>;
355
- zIndex: vue.Ref<number | undefined>;
356
- follower: vue.Ref<{
357
- syncPosition: () => void;
358
- } | null>;
359
- followerEnabled: vue.Ref<boolean | undefined>;
360
- renderContentNode: () => VNode | null;
361
- }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
362
- show: {
363
- type: PropType<boolean>;
364
- };
365
- trigger: {
366
- type: PropType<PopoverTrigger>;
367
- };
368
- delay: {
369
- type: PropType<number>;
370
- };
371
- duration: {
372
- type: PropType<number>;
373
- };
374
- displayDirective: {
375
- type: PropType<"show" | "if">;
376
- };
377
- x: {
378
- type: PropType<number>;
379
- };
380
- y: {
381
- type: PropType<number>;
382
- };
383
- flip: {
384
- type: PropType<boolean>;
385
- };
386
- internalTrapFocus: {
387
- type: PropType<boolean>;
388
- };
389
- overlap: {
390
- type: PropType<boolean>;
391
- };
392
- keepAliveOnHover: {
393
- type: PropType<boolean>;
394
- };
395
- scrollable: {
396
- type: PropType<boolean>;
397
- };
398
- internalDeactivateImmediately: {
399
- type: PropType<boolean>;
400
- };
401
- onClickoutside: {
402
- type: PropType<(e: MouseEvent) => void>;
403
- };
404
- }>>, {}, {}>;
153
+ declare const DestylerPopoverBody: any;
405
154
 
406
155
  declare function DestylerPopoverResolver(): ComponentResolver;
407
156
 
package/dist/index.mjs CHANGED
@@ -37,9 +37,9 @@ const DestylerBinder = defineComponent({
37
37
  default: true
38
38
  }
39
39
  },
40
- setup(props, { slots }) {
40
+ setup(props) {
41
41
  provide("DestylerBinder", getCurrentInstance()?.proxy);
42
- const DestylerBinder = inject("DestylerBinder", null);
42
+ const DestylerBinder2 = inject("DestylerBinder", null);
43
43
  const targetRef = ref(null);
44
44
  const followerResizeListeners = /* @__PURE__ */ new Set();
45
45
  const followerScrollListeners = /* @__PURE__ */ new Set();
@@ -54,8 +54,8 @@ const DestylerBinder = defineComponent({
54
54
  };
55
55
  const setTargetRef = (el) => {
56
56
  targetRef.value = el;
57
- if (DestylerBinder && props.syncTargetWithParent)
58
- DestylerBinder.setTargetRef(el);
57
+ if (DestylerBinder2 && props.syncTargetWithParent)
58
+ DestylerBinder2.setTargetRef(el);
59
59
  };
60
60
  let scrollableNodes = [];
61
61
  const ensureScrollListener = () => {
@@ -729,19 +729,15 @@ const DestylerPopoverBody = defineComponent({
729
729
  }, slots);
730
730
  return [body2];
731
731
  };
732
- contentNode = h(
733
- "div",
734
- mergeProps({
735
- ref: body,
736
- destyler: "popover-body-toggle",
737
- onMouseenter: handleMouseEnter,
738
- onMouseleave: handleMouseLeave
739
- }, attrs),
740
- internalTrapFocus ? h(DestylerFocusTrap, {
741
- active: props.show,
742
- autoFocus: true
743
- }, renderContentInnerNode) : renderContentInnerNode()
744
- );
732
+ contentNode = h("div", mergeProps({
733
+ ref: body,
734
+ destyler: "popover-body-toggle",
735
+ onMouseenter: handleMouseEnter,
736
+ onMouseleave: handleMouseLeave
737
+ }, attrs), internalTrapFocus ? h(DestylerFocusTrap, {
738
+ active: props.show,
739
+ autoFocus: true
740
+ }, renderContentInnerNode) : renderContentInnerNode());
745
741
  } else {
746
742
  contentNode = renderBody(body, handleMouseEnter, handleMouseLeave);
747
743
  }
@@ -870,7 +866,7 @@ const DestylerPopover = defineComponent({
870
866
  inheritAttrs: false,
871
867
  props: destylerPopoverProps,
872
868
  __popover__: true,
873
- setup(props, { slots, attrs }) {
869
+ setup(props) {
874
870
  const isMounted = useIsMounted();
875
871
  const binderInst = ref(null);
876
872
  const controlledShow = computed(() => props.show);
@@ -1121,34 +1117,26 @@ const DestylerPopover = defineComponent({
1121
1117
  }
1122
1118
  }
1123
1119
  }
1124
- return h(
1125
- DestylerBinder,
1126
- {
1127
- ref: "binderInst",
1128
- syncTarget: !popoverInside,
1129
- syncTargetWithParent: this.$props.internalSyncTargetWithParent
1130
- },
1131
- () => {
1132
- return [
1133
- this.$props.internalTrapFocus && this.getMergedShow() ? withDirectives(h("div"), [[zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
1134
- this.positionManually ? null : h(DestylerTarget, null, {
1135
- default: () => triggerVNode
1136
- }),
1137
- h(
1138
- DestylerPopoverBody,
1139
- keep(this.$props, bodyPropKeys, {
1140
- ...this.$attrs,
1141
- show: this.getMergedShow()
1142
- }),
1143
- {
1144
- default: () => this.$slots.default?.(),
1145
- header: () => this.$slots.header?.(),
1146
- footer: () => this.$slots.footer?.()
1147
- }
1148
- )
1149
- ];
1150
- }
1151
- );
1120
+ return h(DestylerBinder, {
1121
+ ref: "binderInst",
1122
+ syncTarget: !popoverInside,
1123
+ syncTargetWithParent: this.$props.internalSyncTargetWithParent
1124
+ }, () => {
1125
+ return [
1126
+ this.$props.internalTrapFocus && this.getMergedShow() ? withDirectives(h("div"), [[zindexable, { enabled: this.getMergedShow(), zIndex: this.$props.zIndex }]]) : null,
1127
+ this.positionManually ? null : h(DestylerTarget, null, {
1128
+ default: () => triggerVNode
1129
+ }),
1130
+ h(DestylerPopoverBody, keep(this.$props, bodyPropKeys, {
1131
+ ...this.$attrs,
1132
+ show: this.getMergedShow()
1133
+ }), {
1134
+ default: () => this.$slots.default?.(),
1135
+ header: () => this.$slots.header?.(),
1136
+ footer: () => this.$slots.footer?.()
1137
+ })
1138
+ ];
1139
+ });
1152
1140
  }
1153
1141
  });
1154
1142
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@destyler/popover",
3
- "version": "0.0.1-beta.2",
3
+ "version": "0.0.1-beta.5",
4
4
  "description": "unstyled popover component for vue",
5
5
  "author": "Elone Hoo <elonehoo@gmail.com>",
6
6
  "license": "MIT",
@@ -23,9 +23,9 @@
23
23
  "vue": "^3.3.4"
24
24
  },
25
25
  "dependencies": {
26
- "@destyler/composition": "0.0.1-beta.2",
27
- "@destyler/directives": "0.0.1-beta.2",
28
- "@destyler/shared": "0.0.1-beta.2"
26
+ "@destyler/composition": "0.0.1-beta.5",
27
+ "@destyler/directives": "0.0.1-beta.5",
28
+ "@destyler/shared": "0.0.1-beta.5"
29
29
  },
30
30
  "scripts": {
31
31
  "clear": "rimraf ./dist",