@v-c/dropdown 1.0.2 → 1.0.3

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/Dropdown.js CHANGED
@@ -1,21 +1,15 @@
1
1
  import useAccessibility from "./hooks/useAccessibility.js";
2
- import Overlay_default from "./Overlay.js";
3
- import placements_default from "./placements.js";
2
+ import Overlay from "./Overlay.js";
3
+ import placements from "./placements.js";
4
4
  import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef } from "vue";
5
5
  import { Trigger } from "@v-c/trigger";
6
6
  import { clsx } from "@v-c/util";
7
7
  import { filterEmpty, removeUndefined, toPropsRefs } from "@v-c/util/dist/props-util";
8
+ //#region src/Dropdown.tsx
8
9
  function _isSlot(s) {
9
10
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
10
11
  }
11
- var defaults = {
12
- prefixCls: "vc-dropdown",
13
- arrow: false,
14
- placement: "bottomLeft",
15
- placements: placements_default,
16
- trigger: ["hover"]
17
- };
18
- var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
12
+ var Dropdown = /* @__PURE__ */ defineComponent((props, { expose, slots }) => {
19
13
  const { autoFocus } = toPropsRefs(props, "autoFocus");
20
14
  const triggerVisible = shallowRef();
21
15
  const mergedVisible = computed(() => {
@@ -47,7 +41,7 @@ var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }
47
41
  };
48
42
  return () => {
49
43
  const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align, ...otherProps } = props;
50
- const getMenuElement = () => createVNode(Overlay_default, {
44
+ const getMenuElement = () => createVNode(Overlay, {
51
45
  "ref": overlayRef,
52
46
  "overlay": overlay,
53
47
  "prefixCls": prefixCls,
@@ -93,7 +87,7 @@ var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }
93
87
  "getPopupContainer": getPopupContainer
94
88
  }), _isSlot(childrenNode) ? childrenNode : { default: () => [childrenNode] });
95
89
  };
96
- }, { props: /* @__PURE__ */ mergeDefaults({
90
+ }, { props: /*@__PURE__*/ mergeDefaults({
97
91
  minOverlayWidthMatchTrigger: {
98
92
  type: Boolean,
99
93
  required: false,
@@ -202,7 +196,7 @@ var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }
202
196
  default: void 0
203
197
  },
204
198
  getPopupContainer: {
205
- type: Function,
199
+ type: [Function, Boolean],
206
200
  required: false,
207
201
  default: void 0
208
202
  },
@@ -231,5 +225,12 @@ var Dropdown_default = /* @__PURE__ */ defineComponent((props, { expose, slots }
231
225
  required: false,
232
226
  default: void 0
233
227
  }
234
- }, defaults) });
235
- export { Dropdown_default as default };
228
+ }, {
229
+ prefixCls: "vc-dropdown",
230
+ arrow: false,
231
+ placement: "bottomLeft",
232
+ placements,
233
+ trigger: ["hover"]
234
+ }) });
235
+ //#endregion
236
+ export { Dropdown as default };
package/dist/Overlay.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Fragment, createVNode, defineComponent, shallowRef } from "vue";
2
- var Overlay_default = /* @__PURE__ */ defineComponent((props) => {
2
+ //#region src/Overlay.tsx
3
+ var Overlay = /* @__PURE__ */ defineComponent((props) => {
3
4
  const overlayRef = shallowRef();
4
5
  const setRef = (el) => {
5
6
  overlayRef.value = el;
@@ -34,4 +35,5 @@ var Overlay_default = /* @__PURE__ */ defineComponent((props) => {
34
35
  default: void 0
35
36
  }
36
37
  } });
37
- export { Overlay_default as default };
38
+ //#endregion
39
+ export { Overlay as default };
@@ -1,6 +1,7 @@
1
1
  import { shallowRef, watch } from "vue";
2
2
  import KeyCode from "@v-c/util/dist/KeyCode";
3
3
  import raf from "@v-c/util/dist/raf";
4
+ //#region src/hooks/useAccessibility.ts
4
5
  var { ESC, TAB } = KeyCode;
5
6
  function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef }) {
6
7
  const focusMenuRef = shallowRef(false);
@@ -45,4 +46,5 @@ function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, ove
45
46
  });
46
47
  });
47
48
  }
49
+ //#endregion
48
50
  export { useAccessibility as default };
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
1
- import Dropdown_default from "./Dropdown.js";
2
- var src_default = Dropdown_default;
1
+ import Dropdown from "./Dropdown.js";
2
+ //#region src/index.tsx
3
+ var src_default = Dropdown;
4
+ //#endregion
3
5
  export { src_default as default };
@@ -1,9 +1,10 @@
1
+ //#region src/placements.ts
1
2
  var autoAdjustOverflow = {
2
3
  adjustX: 1,
3
4
  adjustY: 1
4
5
  };
5
6
  var targetOffset = [0, 0];
6
- var placements_default = {
7
+ var placements = {
7
8
  topLeft: {
8
9
  points: ["bl", "tl"],
9
10
  overflow: autoAdjustOverflow,
@@ -41,4 +42,5 @@ var placements_default = {
41
42
  targetOffset
42
43
  }
43
44
  };
44
- export { placements_default as default };
45
+ //#endregion
46
+ export { placements as default };
package/package.json CHANGED
@@ -1,10 +1,15 @@
1
1
  {
2
2
  "name": "@v-c/dropdown",
3
3
  "type": "module",
4
- "version": "1.0.2",
4
+ "version": "1.0.3",
5
5
  "description": "dropdown ui component for vue",
6
6
  "author": "",
7
7
  "license": "MIT",
8
+ "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/dropdown",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/antdv-next/vue-components.git"
12
+ },
8
13
  "publishConfig": {
9
14
  "access": "public"
10
15
  },
@@ -15,7 +20,7 @@
15
20
  ".": {
16
21
  "types": "./dist/index.d.ts",
17
22
  "import": "./dist/index.js",
18
- "require": "./dist/index.cjs"
23
+ "default": "./dist/index.js"
19
24
  },
20
25
  "./dist/*": "./dist/*",
21
26
  "./package.json": "./package.json"
@@ -29,8 +34,8 @@
29
34
  "vue": "^3.0.0"
30
35
  },
31
36
  "dependencies": {
32
- "@v-c/trigger": "^1.0.6",
33
- "@v-c/util": "^1.0.9"
37
+ "@v-c/trigger": "^1.0.17",
38
+ "@v-c/util": "^1.0.19"
34
39
  },
35
40
  "scripts": {
36
41
  "build": "vite build",
package/dist/Dropdown.cjs DELETED
@@ -1,241 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
6
- const require_useAccessibility = require("./hooks/useAccessibility.cjs");
7
- const require_Overlay = require("./Overlay.cjs");
8
- const require_placements = require("./placements.cjs");
9
- let vue = require("vue");
10
- let _v_c_trigger = require("@v-c/trigger");
11
- let _v_c_util = require("@v-c/util");
12
- let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
13
- function _isSlot(s) {
14
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
15
- }
16
- var defaults = {
17
- prefixCls: "vc-dropdown",
18
- arrow: false,
19
- placement: "bottomLeft",
20
- placements: require_placements.default,
21
- trigger: ["hover"]
22
- };
23
- var Dropdown = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots }) => {
24
- const { autoFocus } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "autoFocus");
25
- const triggerVisible = (0, vue.shallowRef)();
26
- const mergedVisible = (0, vue.computed)(() => {
27
- return props?.visible ?? triggerVisible.value;
28
- });
29
- const mergedMotionName = (0, vue.computed)(() => {
30
- const { prefixCls, transitionName, animation } = props;
31
- return animation ? `${prefixCls}-${animation}` : transitionName;
32
- });
33
- const triggerRef = (0, vue.shallowRef)();
34
- const overlayRef = (0, vue.shallowRef)();
35
- const childRef = (0, vue.shallowRef)();
36
- expose({ triggerRef });
37
- const handleVisibleChange = (visible) => {
38
- triggerVisible.value = visible;
39
- props.onVisibleChange?.(visible);
40
- };
41
- require_useAccessibility.default({
42
- visible: mergedVisible,
43
- triggerRef: childRef,
44
- onVisibleChange: handleVisibleChange,
45
- autoFocus,
46
- overlayRef
47
- });
48
- const onClick = (e) => {
49
- const { onOverlayClick } = props;
50
- triggerVisible.value = false;
51
- if (onOverlayClick) onOverlayClick(e);
52
- };
53
- return () => {
54
- const { overlay, prefixCls, arrow, hideAction, trigger, placement, placements, overlayClassName, getPopupContainer, showAction, overlayStyle, align, ...otherProps } = props;
55
- const getMenuElement = () => (0, vue.createVNode)(require_Overlay.default, {
56
- "ref": overlayRef,
57
- "overlay": overlay,
58
- "prefixCls": prefixCls,
59
- "arrow": arrow
60
- }, null);
61
- const getMenuElementOrLambda = () => {
62
- if (typeof overlay === "function") return getMenuElement;
63
- return getMenuElement();
64
- };
65
- const getMinOverlayWidthMatchTrigger = () => {
66
- const { minOverlayWidthMatchTrigger, alignPoint } = props;
67
- if (minOverlayWidthMatchTrigger !== void 0) return minOverlayWidthMatchTrigger;
68
- return !alignPoint;
69
- };
70
- const getOpenClassName = () => {
71
- const { openClassName } = props;
72
- if (openClassName !== void 0) return openClassName;
73
- return `${prefixCls}-open`;
74
- };
75
- const children = (0, _v_c_util_dist_props_util.filterEmpty)(slots?.default?.() ?? [])?.[0];
76
- const childrenNode = (0, vue.createVNode)(children, {
77
- class: (0, _v_c_util.clsx)(mergedVisible.value && getOpenClassName()),
78
- ref: childRef
79
- });
80
- let triggerHideAction = hideAction;
81
- if (!triggerHideAction && trigger?.includes("contextMenu")) triggerHideAction = ["click"];
82
- return (0, vue.createVNode)(_v_c_trigger.Trigger, (0, vue.mergeProps)({ "builtinPlacements": placements }, (0, _v_c_util_dist_props_util.removeUndefined)(otherProps), {
83
- "prefixCls": prefixCls,
84
- "ref": triggerRef,
85
- "popupClassName": (0, _v_c_util.clsx)(overlayClassName, { [`${prefixCls}-show-arrow`]: arrow }),
86
- "popupStyle": overlayStyle,
87
- "action": trigger,
88
- "showAction": showAction,
89
- "hideAction": triggerHideAction,
90
- "popupPlacement": placement,
91
- "popupAlign": align,
92
- "popupMotion": { name: mergedMotionName.value },
93
- "popupVisible": mergedVisible.value,
94
- "stretch": getMinOverlayWidthMatchTrigger() ? "minWidth" : "",
95
- "popup": getMenuElementOrLambda(),
96
- "onOpenChange": handleVisibleChange,
97
- "onPopupClick": onClick,
98
- "getPopupContainer": getPopupContainer
99
- }), _isSlot(childrenNode) ? childrenNode : { default: () => [childrenNode] });
100
- };
101
- }, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
102
- minOverlayWidthMatchTrigger: {
103
- type: Boolean,
104
- required: false,
105
- default: void 0
106
- },
107
- arrow: {
108
- type: Boolean,
109
- required: false,
110
- default: void 0
111
- },
112
- onVisibleChange: {
113
- type: Function,
114
- required: false,
115
- default: void 0
116
- },
117
- onOverlayClick: {
118
- type: Function,
119
- required: false,
120
- default: void 0
121
- },
122
- prefixCls: {
123
- type: String,
124
- required: false,
125
- default: void 0
126
- },
127
- transitionName: {
128
- type: String,
129
- required: false,
130
- default: void 0
131
- },
132
- overlayClassName: {
133
- type: String,
134
- required: false,
135
- default: void 0
136
- },
137
- openClassName: {
138
- type: String,
139
- required: false,
140
- default: void 0
141
- },
142
- animation: {
143
- type: String,
144
- required: false,
145
- default: void 0
146
- },
147
- align: {
148
- type: Object,
149
- required: false,
150
- default: void 0
151
- },
152
- overlayStyle: {
153
- type: Object,
154
- required: false,
155
- default: void 0
156
- },
157
- placement: {
158
- required: false,
159
- default: void 0
160
- },
161
- placements: {
162
- type: Object,
163
- required: false,
164
- default: void 0
165
- },
166
- overlay: {
167
- type: [
168
- Function,
169
- Object,
170
- String,
171
- Number,
172
- null,
173
- Boolean,
174
- Array
175
- ],
176
- required: false,
177
- default: void 0
178
- },
179
- trigger: {
180
- type: [String, Array],
181
- required: false,
182
- default: void 0
183
- },
184
- alignPoint: {
185
- type: Boolean,
186
- required: false,
187
- default: void 0
188
- },
189
- showAction: {
190
- type: Array,
191
- required: false,
192
- default: void 0
193
- },
194
- hideAction: {
195
- type: Array,
196
- required: false,
197
- default: void 0
198
- },
199
- visible: {
200
- type: Boolean,
201
- required: false,
202
- default: void 0
203
- },
204
- autoFocus: {
205
- type: Boolean,
206
- required: false,
207
- default: void 0
208
- },
209
- getPopupContainer: {
210
- type: Function,
211
- required: false,
212
- default: void 0
213
- },
214
- mouseEnterDelay: {
215
- type: Number,
216
- required: false,
217
- default: void 0
218
- },
219
- mouseLeaveDelay: {
220
- type: Number,
221
- required: false,
222
- default: void 0
223
- },
224
- onPopupAlign: {
225
- type: Function,
226
- required: false,
227
- default: void 0
228
- },
229
- builtinPlacements: {
230
- type: Object,
231
- required: false,
232
- default: void 0
233
- },
234
- autoDestroy: {
235
- type: Boolean,
236
- required: false,
237
- default: void 0
238
- }
239
- }, defaults) });
240
- var Dropdown_default = Dropdown;
241
- exports.default = Dropdown_default;
package/dist/Overlay.cjs DELETED
@@ -1,43 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- var Overlay = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
8
- const overlayRef = (0, vue.shallowRef)();
9
- const setRef = (el) => {
10
- overlayRef.value = el;
11
- };
12
- return () => {
13
- const { overlay, arrow, prefixCls } = props;
14
- const overlayNode = typeof overlay === "function" ? overlay?.() : overlay;
15
- return (0, vue.createVNode)(vue.Fragment, null, [arrow && (0, vue.createVNode)("div", { "class": `${prefixCls}-arrow` }, null), (0, vue.createVNode)(overlayNode, { ref: setRef })]);
16
- };
17
- }, { props: {
18
- overlay: {
19
- type: [
20
- Function,
21
- Object,
22
- String,
23
- Number,
24
- null,
25
- Boolean,
26
- Array
27
- ],
28
- required: false,
29
- default: void 0
30
- },
31
- arrow: {
32
- type: Boolean,
33
- required: false,
34
- default: void 0
35
- },
36
- prefixCls: {
37
- type: String,
38
- required: false,
39
- default: void 0
40
- }
41
- } });
42
- var Overlay_default = Overlay;
43
- exports.default = Overlay_default;
@@ -1,21 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __copyProps = (to, from, except, desc) => {
8
- if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
9
- key = keys[i];
10
- if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
11
- get: ((k) => from[k]).bind(null, key),
12
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
13
- });
14
- }
15
- return to;
16
- };
17
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
18
- value: mod,
19
- enumerable: true
20
- }) : target, mod));
21
- exports.__toESM = __toESM;
@@ -1,55 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
8
- _v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
9
- let _v_c_util_dist_raf = require("@v-c/util/dist/raf");
10
- _v_c_util_dist_raf = require_rolldown_runtime.__toESM(_v_c_util_dist_raf);
11
- var { ESC, TAB } = _v_c_util_dist_KeyCode.default;
12
- function useAccessibility({ visible, triggerRef, onVisibleChange, autoFocus, overlayRef }) {
13
- const focusMenuRef = (0, vue.shallowRef)(false);
14
- const handleCloseMenuAndReturnFocus = () => {
15
- if (visible.value) {
16
- triggerRef.value?.focus?.();
17
- onVisibleChange?.(false);
18
- }
19
- };
20
- const focusMenu = () => {
21
- if (overlayRef?.value?.focus) {
22
- overlayRef.value.focus();
23
- focusMenuRef.value = true;
24
- return true;
25
- }
26
- return false;
27
- };
28
- const handleKeyDown = (event) => {
29
- switch (event.keyCode) {
30
- case ESC:
31
- handleCloseMenuAndReturnFocus();
32
- break;
33
- case TAB: {
34
- let focusResult = false;
35
- if (!focusMenuRef.value) focusResult = focusMenu();
36
- if (focusResult) event.preventDefault();
37
- else handleCloseMenuAndReturnFocus();
38
- break;
39
- }
40
- }
41
- };
42
- (0, vue.watch)(visible, (_n, _o, onCleanup) => {
43
- if (visible.value) {
44
- window.addEventListener("keydown", handleKeyDown);
45
- if (autoFocus) (0, _v_c_util_dist_raf.default)(focusMenu, 3);
46
- onCleanup(() => {
47
- window.removeEventListener("keydown", handleKeyDown);
48
- focusMenuRef.value = false;
49
- });
50
- } else onCleanup(() => {
51
- focusMenuRef.value = false;
52
- });
53
- });
54
- }
55
- exports.default = useAccessibility;
package/dist/index.cjs DELETED
@@ -1,7 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_Dropdown = require("./Dropdown.cjs");
6
- var src_default = require_Dropdown.default;
7
- exports.default = src_default;
@@ -1,49 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- var autoAdjustOverflow = {
6
- adjustX: 1,
7
- adjustY: 1
8
- };
9
- var targetOffset = [0, 0];
10
- var placements = {
11
- topLeft: {
12
- points: ["bl", "tl"],
13
- overflow: autoAdjustOverflow,
14
- offset: [0, -4],
15
- targetOffset
16
- },
17
- top: {
18
- points: ["bc", "tc"],
19
- overflow: autoAdjustOverflow,
20
- offset: [0, -4],
21
- targetOffset
22
- },
23
- topRight: {
24
- points: ["br", "tr"],
25
- overflow: autoAdjustOverflow,
26
- offset: [0, -4],
27
- targetOffset
28
- },
29
- bottomLeft: {
30
- points: ["tl", "bl"],
31
- overflow: autoAdjustOverflow,
32
- offset: [0, 4],
33
- targetOffset
34
- },
35
- bottom: {
36
- points: ["tc", "bc"],
37
- overflow: autoAdjustOverflow,
38
- offset: [0, 4],
39
- targetOffset
40
- },
41
- bottomRight: {
42
- points: ["tr", "br"],
43
- overflow: autoAdjustOverflow,
44
- offset: [0, 4],
45
- targetOffset
46
- }
47
- };
48
- var placements_default = placements;
49
- exports.default = placements_default;