vue-devui 1.0.0-rc.7 → 1.0.0

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.
Files changed (231) hide show
  1. package/README.md +163 -146
  2. package/alert/index.es.js +46 -15
  3. package/alert/index.umd.js +1 -1
  4. package/alert/style.css +1 -1
  5. package/auto-complete/index.es.js +8230 -231
  6. package/auto-complete/index.umd.js +29 -5
  7. package/auto-complete/style.css +1 -1
  8. package/avatar/index.es.js +81 -70
  9. package/avatar/index.umd.js +1 -1
  10. package/avatar/style.css +1 -1
  11. package/badge/index.es.js +34 -4
  12. package/badge/index.umd.js +1 -1
  13. package/badge/style.css +1 -1
  14. package/button/index.es.js +5706 -98
  15. package/button/index.umd.js +27 -1
  16. package/button/style.css +1 -1
  17. package/card/index.es.js +38 -13
  18. package/card/index.umd.js +1 -1
  19. package/card/style.css +1 -1
  20. package/checkbox/index.es.js +8066 -245
  21. package/checkbox/index.umd.js +27 -1
  22. package/checkbox/style.css +1 -1
  23. package/{date-picker → collapse}/index.d.ts +0 -0
  24. package/collapse/index.es.js +213 -0
  25. package/collapse/index.umd.js +1 -0
  26. package/{date-picker → collapse}/package.json +1 -1
  27. package/collapse/style.css +1 -0
  28. package/countdown/index.es.js +56 -13
  29. package/countdown/index.umd.js +1 -1
  30. package/date-picker-pro/index.d.ts +7 -0
  31. package/date-picker-pro/index.es.js +12020 -0
  32. package/date-picker-pro/index.umd.js +27 -0
  33. package/date-picker-pro/package.json +7 -0
  34. package/date-picker-pro/style.css +1 -0
  35. package/drawer/index.es.js +29 -4
  36. package/drawer/index.umd.js +1 -1
  37. package/drawer/style.css +1 -1
  38. package/dropdown/index.es.js +178 -142
  39. package/dropdown/index.umd.js +1 -1
  40. package/dropdown/style.css +1 -1
  41. package/editable-select/index.es.js +742 -107
  42. package/editable-select/index.umd.js +1 -1
  43. package/editable-select/style.css +1 -1
  44. package/form/index.es.js +544 -316
  45. package/form/index.umd.js +17 -17
  46. package/form/style.css +1 -1
  47. package/fullscreen/index.es.js +28 -4
  48. package/fullscreen/index.umd.js +1 -1
  49. package/fullscreen/style.css +1 -1
  50. package/grid/index.es.js +71 -50
  51. package/grid/index.umd.js +1 -1
  52. package/grid/style.css +1 -1
  53. package/icon/index.es.js +184 -23
  54. package/icon/index.umd.js +1 -1
  55. package/icon/style.css +1 -0
  56. package/image-preview/index.es.js +34 -11
  57. package/image-preview/index.umd.js +1 -1
  58. package/image-preview/style.css +1 -1
  59. package/input/index.es.js +8250 -131
  60. package/input/index.umd.js +27 -1
  61. package/input/style.css +1 -1
  62. package/input-number/index.es.js +275 -203
  63. package/input-number/index.umd.js +1 -1
  64. package/input-number/style.css +1 -1
  65. package/layout/index.es.js +34 -6
  66. package/layout/index.umd.js +1 -1
  67. package/layout/style.css +1 -1
  68. package/loading/index.es.js +34 -10
  69. package/loading/index.umd.js +1 -1
  70. package/loading/style.css +1 -1
  71. package/mention/index.d.ts +7 -0
  72. package/mention/index.es.js +8310 -0
  73. package/mention/index.umd.js +36 -0
  74. package/mention/package.json +7 -0
  75. package/mention/style.css +1 -0
  76. package/menu/index.d.ts +7 -0
  77. package/menu/index.es.js +934 -0
  78. package/menu/index.umd.js +1 -0
  79. package/menu/package.json +7 -0
  80. package/menu/style.css +1 -0
  81. package/message/index.d.ts +7 -0
  82. package/message/index.es.js +538 -0
  83. package/message/index.umd.js +1 -0
  84. package/message/package.json +7 -0
  85. package/message/style.css +1 -0
  86. package/modal/index.es.js +359 -170
  87. package/modal/index.umd.js +1 -1
  88. package/modal/style.css +1 -1
  89. package/notification/index.es.js +236 -65
  90. package/notification/index.umd.js +1 -1
  91. package/notification/style.css +1 -1
  92. package/nuxt/components/ButtonGroup.js +3 -0
  93. package/nuxt/components/CheckboxButton.js +3 -0
  94. package/nuxt/components/Collapse.js +3 -0
  95. package/nuxt/components/CollapseItem.js +3 -0
  96. package/nuxt/components/DRangeDatePickerPro.js +3 -0
  97. package/nuxt/components/DatePickerPro.js +3 -0
  98. package/nuxt/components/Icon.js +1 -0
  99. package/nuxt/components/IconGroup.js +3 -0
  100. package/nuxt/components/LABEL_DATA.js +3 -0
  101. package/nuxt/components/Mention.js +3 -0
  102. package/nuxt/components/Menu.js +3 -0
  103. package/nuxt/components/MenuItem.js +3 -0
  104. package/nuxt/components/Message.js +3 -0
  105. package/nuxt/components/Option.js +3 -0
  106. package/nuxt/components/OptionGroup.js +3 -0
  107. package/nuxt/components/RadioButton.js +3 -0
  108. package/nuxt/components/Step.js +3 -0
  109. package/nuxt/components/Steps.js +3 -0
  110. package/nuxt/components/SubMenu.js +3 -0
  111. package/nuxt/components/TABLE_TOKEN.js +3 -0
  112. package/nuxt/components/TimePicker.js +3 -0
  113. package/nuxt/components/TimeSelect.js +3 -0
  114. package/nuxt/components/animationInjectionKey.js +3 -0
  115. package/nuxt/components/buttonGroupInjectionKey.js +3 -0
  116. package/nuxt/components/buttonGroupProps.js +3 -0
  117. package/nuxt/components/collapseItemProps.js +3 -0
  118. package/nuxt/components/collapseProps.js +3 -0
  119. package/nuxt/components/datePickerProCommonProps.js +3 -0
  120. package/nuxt/components/datePickerProPanelProps.js +3 -0
  121. package/nuxt/components/datePickerProProps.js +3 -0
  122. package/nuxt/components/iconProps.js +1 -0
  123. package/nuxt/components/mentionProps.js +3 -0
  124. package/nuxt/components/messageProps.js +3 -0
  125. package/nuxt/components/roundInjectionKey.js +3 -0
  126. package/nuxt/components/skeletonItemProps.js +3 -0
  127. package/nuxt/components/stepProps.js +3 -0
  128. package/nuxt/components/stepsProps.js +3 -0
  129. package/nuxt/components/svgIconProps.js +3 -0
  130. package/nuxt/components/tableProps.js +3 -0
  131. package/nuxt/components/timerPickerPanelProps.js +3 -0
  132. package/nuxt/components/treeNodeProps.js +3 -0
  133. package/overlay/index.es.js +84 -125
  134. package/overlay/index.umd.js +1 -1
  135. package/overlay/style.css +1 -1
  136. package/package.json +7 -3
  137. package/pagination/index.es.js +234 -39
  138. package/pagination/index.umd.js +1 -1
  139. package/pagination/style.css +1 -1
  140. package/panel/style.css +1 -1
  141. package/popover/index.es.js +274 -220
  142. package/popover/index.umd.js +13 -13
  143. package/popover/style.css +1 -1
  144. package/progress/index.es.js +31 -9
  145. package/progress/index.umd.js +3 -3
  146. package/progress/style.css +1 -1
  147. package/radio/index.es.js +7969 -152
  148. package/radio/index.umd.js +27 -1
  149. package/radio/style.css +1 -1
  150. package/rate/index.es.js +46 -14
  151. package/rate/index.umd.js +1 -1
  152. package/rate/style.css +1 -1
  153. package/result/index.es.js +169 -22
  154. package/result/index.umd.js +1 -1
  155. package/result/style.css +1 -1
  156. package/search/index.es.js +3823 -1090
  157. package/search/index.umd.js +18 -18
  158. package/search/style.css +1 -1
  159. package/select/index.es.js +9186 -478
  160. package/select/index.umd.js +27 -1
  161. package/select/style.css +1 -1
  162. package/skeleton/index.es.js +110 -259
  163. package/skeleton/index.umd.js +1 -1
  164. package/skeleton/style.css +1 -1
  165. package/slider/index.es.js +143 -146
  166. package/slider/index.umd.js +1 -1
  167. package/slider/style.css +1 -1
  168. package/splitter/index.es.js +433 -207
  169. package/splitter/index.umd.js +17 -17
  170. package/splitter/style.css +1 -1
  171. package/statistic/index.es.js +34 -16
  172. package/statistic/index.umd.js +1 -1
  173. package/statistic/style.css +1 -1
  174. package/status/index.es.js +26 -2
  175. package/status/index.umd.js +1 -1
  176. package/status/style.css +1 -1
  177. package/steps/index.d.ts +7 -0
  178. package/steps/index.es.js +386 -0
  179. package/steps/index.umd.js +1 -0
  180. package/steps/package.json +7 -0
  181. package/steps/style.css +1 -0
  182. package/style.css +1 -1
  183. package/switch/index.es.js +7802 -59
  184. package/switch/index.umd.js +27 -1
  185. package/switch/style.css +1 -1
  186. package/table/index.es.js +9769 -919
  187. package/table/index.umd.js +27 -1
  188. package/table/style.css +1 -1
  189. package/tabs/index.es.js +309 -96
  190. package/tabs/index.umd.js +1 -1
  191. package/tabs/style.css +1 -1
  192. package/tag/index.es.js +35 -7
  193. package/tag/index.umd.js +1 -1
  194. package/tag/style.css +1 -1
  195. package/textarea/index.es.js +7922 -78
  196. package/textarea/index.umd.js +35 -1
  197. package/textarea/style.css +1 -1
  198. package/time-picker/index.d.ts +7 -0
  199. package/time-picker/index.es.js +9549 -0
  200. package/time-picker/index.umd.js +27 -0
  201. package/time-picker/package.json +7 -0
  202. package/time-picker/style.css +1 -0
  203. package/time-select/index.d.ts +7 -0
  204. package/time-select/index.es.js +9585 -0
  205. package/time-select/index.umd.js +27 -0
  206. package/time-select/package.json +7 -0
  207. package/time-select/style.css +1 -0
  208. package/timeline/index.es.js +169 -22
  209. package/timeline/index.umd.js +1 -1
  210. package/timeline/style.css +1 -1
  211. package/tooltip/index.es.js +265 -212
  212. package/tooltip/index.umd.js +15 -15
  213. package/tooltip/style.css +1 -1
  214. package/tree/index.es.js +11343 -795
  215. package/tree/index.umd.js +27 -1
  216. package/tree/style.css +1 -1
  217. package/upload/index.es.js +494 -106
  218. package/upload/index.umd.js +1 -1
  219. package/upload/style.css +1 -1
  220. package/vue-devui.es.js +22849 -13614
  221. package/vue-devui.umd.js +30 -23
  222. package/date-picker/index.es.js +0 -1145
  223. package/date-picker/index.umd.js +0 -1
  224. package/date-picker/style.css +0 -1
  225. package/nuxt/components/DatePicker.js +0 -3
  226. package/nuxt/components/FormControl.js +0 -3
  227. package/nuxt/components/FormLabel.js +0 -3
  228. package/nuxt/components/StickSlider.js +0 -3
  229. package/nuxt/components/formControlProps.js +0 -3
  230. package/nuxt/components/overlayEmits.js +0 -3
  231. package/nuxt/components/overlayProps.js +0 -3
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { DRangeDatePickerPro as default } from '../../date-picker-pro/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { DatePickerPro as default } from '../../date-picker-pro/index.es.js'
@@ -1,2 +1,3 @@
1
+ import '../../icon/style.css'
1
2
 
2
3
  export { Icon as default } from '../../icon/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../icon/style.css'
2
+
3
+ export { IconGroup as default } from '../../icon/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../form/style.css'
2
+
3
+ export { LABEL_DATA as default } from '../../form/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../mention/style.css'
2
+
3
+ export { Mention as default } from '../../mention/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../menu/style.css'
2
+
3
+ export { Menu as default } from '../../menu/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../menu/style.css'
2
+
3
+ export { MenuItem as default } from '../../menu/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../message/style.css'
2
+
3
+ export { Message as default } from '../../message/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../select/style.css'
2
+
3
+ export { Option as default } from '../../select/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../select/style.css'
2
+
3
+ export { OptionGroup as default } from '../../select/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../radio/style.css'
2
+
3
+ export { RadioButton as default } from '../../radio/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../steps/style.css'
2
+
3
+ export { Step as default } from '../../steps/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../steps/style.css'
2
+
3
+ export { Steps as default } from '../../steps/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../menu/style.css'
2
+
3
+ export { SubMenu as default } from '../../menu/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../table/style.css'
2
+
3
+ export { TABLE_TOKEN as default } from '../../table/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../time-picker/style.css'
2
+
3
+ export { TimePicker as default } from '../../time-picker/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../time-select/style.css'
2
+
3
+ export { TimeSelect as default } from '../../time-select/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../skeleton/style.css'
2
+
3
+ export { animationInjectionKey as default } from '../../skeleton/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../button/style.css'
2
+
3
+ export { buttonGroupInjectionKey as default } from '../../button/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../button/style.css'
2
+
3
+ export { buttonGroupProps as default } from '../../button/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../collapse/style.css'
2
+
3
+ export { collapseItemProps as default } from '../../collapse/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../collapse/style.css'
2
+
3
+ export { collapseProps as default } from '../../collapse/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { datePickerProCommonProps as default } from '../../date-picker-pro/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { datePickerProPanelProps as default } from '../../date-picker-pro/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { datePickerProProps as default } from '../../date-picker-pro/index.es.js'
@@ -1,2 +1,3 @@
1
+ import '../../icon/style.css'
1
2
 
2
3
  export { iconProps as default } from '../../icon/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../mention/style.css'
2
+
3
+ export { mentionProps as default } from '../../mention/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../message/style.css'
2
+
3
+ export { messageProps as default } from '../../message/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../skeleton/style.css'
2
+
3
+ export { roundInjectionKey as default } from '../../skeleton/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../skeleton/style.css'
2
+
3
+ export { skeletonItemProps as default } from '../../skeleton/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../steps/style.css'
2
+
3
+ export { stepProps as default } from '../../steps/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../steps/style.css'
2
+
3
+ export { stepsProps as default } from '../../steps/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../icon/style.css'
2
+
3
+ export { svgIconProps as default } from '../../icon/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../table/style.css'
2
+
3
+ export { tableProps as default } from '../../table/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../date-picker-pro/style.css'
2
+
3
+ export { timerPickerPanelProps as default } from '../../date-picker-pro/index.es.js'
@@ -0,0 +1,3 @@
1
+ import '../../tree/style.css'
2
+
3
+ export { treeNodeProps as default } from '../../tree/index.es.js'
@@ -1,150 +1,108 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps } from "vue";
1
+ import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick } from "vue";
21
2
  import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
22
- var baseOverlay = "";
23
- function _isSlot(s) {
24
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
25
- }
26
- const CommonOverlay = defineComponent({
27
- setup(props, ctx) {
28
- return () => {
29
- let _slot;
30
- return createVNode(Teleport, {
31
- "to": "#d-overlay-anchor"
32
- }, {
33
- default: () => [createVNode(Transition, {
34
- "name": "devui-overlay-fade"
35
- }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
36
- default: () => [_slot]
37
- })]
38
- });
39
- };
40
- }
41
- });
42
- const overlayProps = {
43
- visible: {
44
- type: Boolean
45
- },
46
- backgroundBlock: {
3
+ const fixedOverlayProps = {
4
+ modelValue: {
47
5
  type: Boolean,
48
6
  default: false
49
7
  },
50
- backgroundClass: {
51
- type: String,
52
- default: ""
53
- },
54
- backgroundStyle: {
55
- type: [String, Object]
56
- },
57
- onBackdropClick: {
58
- type: Function
59
- },
60
- backdropClose: {
8
+ lockScroll: {
61
9
  type: Boolean,
62
10
  default: true
63
11
  },
64
- hasBackdrop: {
12
+ closeOnClickOverlay: {
65
13
  type: Boolean,
66
14
  default: true
67
15
  }
68
16
  };
69
- const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
70
- overlayStyle: {
71
- type: [String, Object],
72
- default: void 0
17
+ function lockScroll() {
18
+ if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
19
+ const scrollTop = document.documentElement.scrollTop;
20
+ const style = document.documentElement.getAttribute("style");
21
+ document.documentElement.style.position = "fixed";
22
+ document.documentElement.style.top = `-${scrollTop}px`;
23
+ document.documentElement.style.width = document.documentElement.style.width || "100%";
24
+ document.documentElement.style.overflowY = "scroll";
25
+ return () => {
26
+ if (style) {
27
+ document.documentElement.setAttribute("style", style);
28
+ } else {
29
+ document.documentElement.removeAttribute("style");
30
+ }
31
+ document.documentElement.scrollTop = scrollTop;
32
+ };
73
33
  }
74
- });
75
- const overlayEmits = ["update:visible", "backdropClick"];
76
- function useOverlayLogic(props, ctx) {
77
- const backgroundClass = computed(() => {
78
- return [
79
- "devui-overlay-background",
80
- props.backgroundClass,
81
- !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
82
- ];
83
- });
84
- const overlayClass = computed(() => {
85
- return "devui-overlay";
86
- });
87
- const handleBackdropClick = (event) => {
88
- var _a;
34
+ return;
35
+ }
36
+ function useFixedOverlay(props, ctx) {
37
+ let lockScrollCb;
38
+ const onClick = (event) => {
89
39
  event.preventDefault();
90
- (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
91
- if (props.backdropClose) {
92
- ctx.emit("update:visible", false);
40
+ ctx.emit("click", event);
41
+ if (props.closeOnClickOverlay) {
42
+ ctx.emit("update:modelValue", false);
93
43
  }
94
44
  };
95
- const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
96
- onMounted(() => {
97
- const body = document.body;
98
- const originOverflow = body.style.overflow;
99
- const originPosition = body.style.position;
100
- watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
101
- if (backgroundBlock) {
102
- const top = body.getBoundingClientRect().y;
103
- if (visible) {
104
- body.style.overflowY = "scroll";
105
- body.style.position = visible ? "fixed" : "";
106
- body.style.top = `${top}px`;
107
- } else {
108
- body.style.overflowY = originOverflow;
109
- body.style.position = originPosition;
110
- body.style.top = "";
111
- window.scrollTo(0, -top);
112
- }
113
- }
114
- });
115
- onUnmounted(() => {
116
- document.body.style.overflow = originOverflow;
117
- });
45
+ const removeBodyAdditions = () => {
46
+ lockScrollCb == null ? void 0 : lockScrollCb();
47
+ };
48
+ watch(() => props.modelValue, (val) => {
49
+ if (val) {
50
+ props.lockScroll && (lockScrollCb = lockScroll());
51
+ } else {
52
+ removeBodyAdditions();
53
+ }
118
54
  });
55
+ onUnmounted(removeBodyAdditions);
56
+ return { onClick };
57
+ }
58
+ function createBem(namespace, element, modifier) {
59
+ let cls = namespace;
60
+ if (element) {
61
+ cls += `__${element}`;
62
+ }
63
+ if (modifier) {
64
+ cls += `--${modifier}`;
65
+ }
66
+ return cls;
67
+ }
68
+ function useNamespace(block, needDot = false) {
69
+ const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
70
+ const b = () => createBem(namespace);
71
+ const e = (element) => element ? createBem(namespace, element) : "";
72
+ const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
73
+ const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
119
74
  return {
120
- backgroundClass,
121
- overlayClass,
122
- handleBackdropClick,
123
- handleOverlayBubbleCancel
75
+ b,
76
+ e,
77
+ m,
78
+ em
124
79
  };
125
80
  }
126
81
  var fixedOverlay = "";
127
82
  const FixedOverlay = defineComponent({
128
83
  name: "DFixedOverlay",
84
+ inheritAttrs: false,
129
85
  props: fixedOverlayProps,
130
- emits: overlayEmits,
86
+ emits: ["update:modelValue", "click"],
131
87
  setup(props, ctx) {
132
88
  const {
133
- backgroundClass,
134
- overlayClass,
135
- handleBackdropClick,
136
- handleOverlayBubbleCancel
137
- } = useOverlayLogic(props, ctx);
138
- return () => createVNode(CommonOverlay, null, {
139
- default: () => [props.visible && createVNode("div", {
140
- "class": backgroundClass.value,
141
- "style": props.backgroundStyle,
142
- "onClick": handleBackdropClick
143
- }, [createVNode("div", {
144
- "class": overlayClass.value,
145
- "style": props.overlayStyle,
146
- "onClick": handleOverlayBubbleCancel
147
- }, [renderSlot(ctx.slots, "default")])])]
89
+ modelValue
90
+ } = toRefs(props);
91
+ const ns = useNamespace("fixed-overlay");
92
+ const {
93
+ onClick
94
+ } = useFixedOverlay(props, ctx);
95
+ return () => createVNode(Transition, {
96
+ "name": ns.m("fade")
97
+ }, {
98
+ default: () => {
99
+ var _a, _b;
100
+ return [modelValue.value && createVNode("div", mergeProps({
101
+ "class": ns.b()
102
+ }, ctx.attrs, {
103
+ "onClick": onClick
104
+ }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
105
+ }
148
106
  });
149
107
  }
150
108
  });
@@ -292,6 +250,7 @@ const FlexibleOverlay = defineComponent({
292
250
  emit,
293
251
  expose
294
252
  }) {
253
+ const ns = useNamespace("flexible-overlay");
295
254
  const {
296
255
  arrowRef,
297
256
  overlayRef,
@@ -304,10 +263,10 @@ const FlexibleOverlay = defineComponent({
304
263
  var _a;
305
264
  return props.modelValue && createVNode("div", mergeProps({
306
265
  "ref": overlayRef,
307
- "class": "devui-flexible-overlay"
266
+ "class": ns.b()
308
267
  }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
309
268
  "ref": arrowRef,
310
- "class": "devui-flexible-overlay-arrow"
269
+ "class": ns.e("arrow")
311
270
  }, null)]);
312
271
  };
313
272
  }
@@ -331,4 +290,4 @@ var index = {
331
290
  }
332
291
  }
333
292
  };
334
- export { FixedOverlay, FlexibleOverlay, index as default, fixedOverlayProps, flexibleOverlayProps, overlayEmits, overlayProps };
293
+ export { FixedOverlay, FlexibleOverlay, index as default, fixedOverlayProps, flexibleOverlayProps };
@@ -1 +1 @@
1
- var z=Object.defineProperty,D=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var A=(l,t,a)=>t in l?z(l,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[t]=a,j=(l,t)=>{for(var a in t||(t={}))q.call(t,a)&&A(l,a,t[a]);if(V)for(var a of V(t))X.call(t,a)&&A(l,a,t[a]);return l},P=(l,t)=>D(l,M(t));(function(l,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],t):(l=typeof globalThis!="undefined"?globalThis:l||self,t(l.index={},l.Vue,l.dom))})(this,function(l,t,a){"use strict";var I="";function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const N=t.defineComponent({setup(e,i){return()=>{let r;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},L(r=t.renderSlot(i.slots,"default"))?r:{default:()=>[r]})]})}}}),p={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},k=P(j({},p),{overlayStyle:{type:[String,Object],default:void 0}}),C=["update:visible","backdropClick"];function F(e,i){const r=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),d=t.computed(()=>"devui-overlay"),n=o=>{var c;o.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&i.emit("update:visible",!1)},s=o=>o.cancelBubble=!0;return t.onMounted(()=>{const o=document.body,c=o.style.overflow,f=o.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([u,y])=>{if(y){const v=o.getBoundingClientRect().y;u?(o.style.overflowY="scroll",o.style.position=u?"fixed":"",o.style.top=`${v}px`):(o.style.overflowY=c,o.style.position=f,o.style.top="",window.scrollTo(0,-v))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:r,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}}var U="";const m=t.defineComponent({name:"DFixedOverlay",props:k,emits:C,setup(e,i){const{backgroundClass:r,overlayClass:d,handleBackdropClick:n,handleOverlayBubbleCancel:s}=F(e,i);return()=>t.createVNode(N,null,{default:()=>[e.visible&&t.createVNode("div",{class:r.value,style:e.backgroundStyle,onClick:n},[t.createVNode("div",{class:d.value,style:e.overlayStyle,onClick:s},[t.renderSlot(i.slots,"default")])])]})}}),x={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function _(e){const i=/(auto|scroll|hidden)/;for(let r=e;r=r.parentElement;r.parentElement!==document.body){const d=window.getComputedStyle(r);if(i.test(d.overflow+d.overflowX+d.overflowY))return r}return window}function R(e,i,r,d){let{x:n,y:s}=i;if(!e){const{width:o,height:c}=d;n&&r.includes("start")&&(n=12),n&&r.includes("end")&&(n=Math.round(o-24)),s&&r.includes("start")&&(s=10),s&&r.includes("end")&&(s=c-14)}return{x:n,y:s}}function T(e,i){const r=t.ref(),d=t.ref();let n=null;const s=(c,f,u,y)=>{const{x:v,y:w}=R(e.isArrowCenter,u,f,y.getBoundingClientRect()),b={top:"bottom",right:"left",bottom:"top",left:"right"}[f.split("-")[0]];Object.assign(c.style,{left:v?`${v}px`:"",top:w?`${w}px`:"",right:"",bottom:"",[b]:"-4px"})},o=async()=>{const c=e.origin,f=t.unref(r.value),u=t.unref(d.value),y=[a.offset(e.offset),a.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&y.push(a.arrow({element:u})),e.shiftOffset!==void 0&&y.push(a.shift());const{x:v,y:w,placement:b,middlewareData:B}=await a.computePosition(c,f,{strategy:"fixed",middleware:y});let g=v,O=w;if(e.shiftOffset!==void 0){const{x:E,y:S}=B.shift;E<0&&(g-=e.shiftOffset),E>0&&(g+=e.shiftOffset),S<0&&(O-=e.shiftOffset),S>0&&(O+=e.shiftOffset)}i("positionChange",b),Object.assign(f.style,{top:`${O}px`,left:`${g}px`}),e.showArrow&&s(u,b,B.arrow,f)};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(n=_(e.origin),t.nextTick(o),n==null||n.addEventListener("scroll",o),n!==window&&window.addEventListener("scroll",o),window.addEventListener("resize",o)):(n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o))}),t.onUnmounted(()=>{n==null||n.removeEventListener("scroll",o),n!==window&&window.removeEventListener("scroll",o),window.removeEventListener("resize",o)}),{arrowRef:d,overlayRef:r,updatePosition:o}}var G="";const h=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:x,emits:["update:modelValue","positionChange"],setup(e,{slots:i,attrs:r,emit:d,expose:n}){const{arrowRef:s,overlayRef:o,updatePosition:c}=T(e,d);return n({updatePosition:c}),()=>{var f;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:o,class:"devui-flexible-overlay"},r),[(f=i.default)==null?void 0:f.call(i),e.showArrow&&t.createVNode("div",{ref:s,class:"devui-flexible-overlay-arrow"},null)])}}}),Y=typeof window!="undefined";var $={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(m.name,m),e.component(h.name,h),Y&&!document.getElementById("d-overlay-anchor")){const i=document.createElement("div");i.setAttribute("id","d-overlay-anchor"),i.style.position="fixed",i.style.left="0",i.style.top="0",i.style.zIndex="1000",document.body.appendChild(i)}}};l.FixedOverlay=m,l.FlexibleOverlay=h,l.default=$,l.fixedOverlayProps=k,l.flexibleOverlayProps=x,l.overlayEmits=C,l.overlayProps=p,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
1
+ (function(a,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],l):(a=typeof globalThis!="undefined"?globalThis:a||self,l(a.index={},a.Vue,a.dom))})(this,function(a,l,f){"use strict";const b={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function P(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,t=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${e}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{t?document.documentElement.setAttribute("style",t):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function k(e,t){let n;const i=s=>{s.preventDefault(),t.emit("click",s),e.closeOnClickOverlay&&t.emit("update:modelValue",!1)},o=()=>{n==null||n()};return l.watch(()=>e.modelValue,s=>{s?e.lockScroll&&(n=P()):o()}),l.onUnmounted(o),{onClick:i}}function y(e,t,n){let i=e;return t&&(i+=`__${t}`),n&&(i+=`--${n}`),i}function g(e,t=!1){const n=t?`.devui-${e}`:`devui-${e}`;return{b:()=>y(n),e:d=>d?y(n,d):"",m:d=>d?y(n,"",d):"",em:(d,c)=>d&&c?y(n,d,c):""}}var j="";const O=l.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:b,emits:["update:modelValue","click"],setup(e,t){const{modelValue:n}=l.toRefs(e),i=g("fixed-overlay"),{onClick:o}=k(e,t);return()=>l.createVNode(l.Transition,{name:i.m("fade")},{default:()=>{var s,r;return[n.value&&l.createVNode("div",l.mergeProps({class:i.b()},t.attrs,{onClick:o}),[(r=(s=t.slots).default)==null?void 0:r.call(s)])]}})}}),A={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function L(e){const t=/(auto|scroll|hidden)/;for(let n=e;n=n.parentElement;n.parentElement!==document.body){const i=window.getComputedStyle(n);if(t.test(i.overflow+i.overflowX+i.overflowY))return n}return window}function $(e,t,n,i){let{x:o,y:s}=t;if(!e){const{width:r,height:d}=i;o&&n.includes("start")&&(o=12),o&&n.includes("end")&&(o=Math.round(r-24)),s&&n.includes("start")&&(s=10),s&&n.includes("end")&&(s=d-14)}return{x:o,y:s}}function F(e,t){const n=l.ref(),i=l.ref();let o=null;const s=(d,c,u,m)=>{const{x:w,y:v}=$(e.isArrowCenter,u,c,m.getBoundingClientRect()),h={top:"bottom",right:"left",bottom:"top",left:"right"}[c.split("-")[0]];Object.assign(d.style,{left:w?`${w}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[h]:"-4px"})},r=async()=>{const d=e.origin,c=l.unref(n.value),u=l.unref(i.value),m=[f.offset(e.offset),f.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&m.push(f.arrow({element:u})),e.shiftOffset!==void 0&&m.push(f.shift());const{x:w,y:v,placement:h,middlewareData:V}=await f.computePosition(d,c,{strategy:"fixed",middleware:m});let p=w,x=v;if(e.shiftOffset!==void 0){const{x:C,y:B}=V.shift;C<0&&(p-=e.shiftOffset),C>0&&(p+=e.shiftOffset),B<0&&(x-=e.shiftOffset),B>0&&(x+=e.shiftOffset)}t("positionChange",h),Object.assign(c.style,{top:`${x}px`,left:`${p}px`}),e.showArrow&&s(u,h,V.arrow,c)};return l.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(o=L(e.origin),l.nextTick(r),o==null||o.addEventListener("scroll",r),o!==window&&window.addEventListener("scroll",r),window.addEventListener("resize",r)):(o==null||o.removeEventListener("scroll",r),o!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r))}),l.onUnmounted(()=>{o==null||o.removeEventListener("scroll",r),o!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r)}),{arrowRef:i,overlayRef:n,updatePosition:r}}var N="";const E=l.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:A,emits:["update:modelValue","positionChange"],setup(e,{slots:t,attrs:n,emit:i,expose:o}){const s=g("flexible-overlay"),{arrowRef:r,overlayRef:d,updatePosition:c}=F(e,i);return o({updatePosition:c}),()=>{var u;return e.modelValue&&l.createVNode("div",l.mergeProps({ref:d,class:s.b()},n),[(u=t.default)==null?void 0:u.call(t),e.showArrow&&l.createVNode("div",{ref:r,class:s.e("arrow")},null)])}}}),S=typeof window!="undefined";var T={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(O.name,O),e.component(E.name,E),S&&!document.getElementById("d-overlay-anchor")){const t=document.createElement("div");t.setAttribute("id","d-overlay-anchor"),t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.zIndex="1000",document.body.appendChild(t)}}};a.FixedOverlay=O,a.FlexibleOverlay=E,a.default=T,a.fixedOverlayProps=b,a.flexibleOverlayProps=A,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
package/overlay/style.css CHANGED
@@ -1 +1 @@
1
- @keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}
1
+ .devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-devui",
3
- "version": "1.0.0-rc.7",
3
+ "version": "1.0.0",
4
4
  "license": "MIT",
5
5
  "description": "DevUI components based on Vite and Vue3",
6
6
  "keywords": [
@@ -23,18 +23,22 @@
23
23
  "main": "vue-devui.umd.js",
24
24
  "module": "vue-devui.es.js",
25
25
  "style": "style.css",
26
+ "peerDependencies": {
27
+ "vue": "^3.2"
28
+ },
26
29
  "dependencies": {
27
30
  "@devui-design/icons": "^1.3.0",
28
31
  "@floating-ui/dom": "^0.4.4",
29
32
  "@types/lodash-es": "^4.17.4",
30
- "@vueuse/core": "^7.7.1",
33
+ "@vue/shared": "^3.2.33",
34
+ "@vueuse/core": "8.9.4",
31
35
  "async-validator": "^4.0.2",
36
+ "dayjs": "^1.11.3",
32
37
  "devui-theme": "^0.0.1",
33
38
  "fs-extra": "^10.0.0",
34
39
  "lodash": "^4.17.21",
35
40
  "lodash-es": "^4.17.20",
36
41
  "mitt": "^3.0.0",
37
- "vue": "^3.1.1",
38
42
  "vue-router": "^4.0.3"
39
43
  }
40
44
  }