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.
- package/README.md +163 -146
- package/alert/index.es.js +46 -15
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/auto-complete/index.es.js +8230 -231
- package/auto-complete/index.umd.js +29 -5
- package/auto-complete/style.css +1 -1
- package/avatar/index.es.js +81 -70
- package/avatar/index.umd.js +1 -1
- package/avatar/style.css +1 -1
- package/badge/index.es.js +34 -4
- package/badge/index.umd.js +1 -1
- package/badge/style.css +1 -1
- package/button/index.es.js +5706 -98
- package/button/index.umd.js +27 -1
- package/button/style.css +1 -1
- package/card/index.es.js +38 -13
- package/card/index.umd.js +1 -1
- package/card/style.css +1 -1
- package/checkbox/index.es.js +8066 -245
- package/checkbox/index.umd.js +27 -1
- package/checkbox/style.css +1 -1
- package/{date-picker → collapse}/index.d.ts +0 -0
- package/collapse/index.es.js +213 -0
- package/collapse/index.umd.js +1 -0
- package/{date-picker → collapse}/package.json +1 -1
- package/collapse/style.css +1 -0
- package/countdown/index.es.js +56 -13
- package/countdown/index.umd.js +1 -1
- package/date-picker-pro/index.d.ts +7 -0
- package/date-picker-pro/index.es.js +12020 -0
- package/date-picker-pro/index.umd.js +27 -0
- package/date-picker-pro/package.json +7 -0
- package/date-picker-pro/style.css +1 -0
- package/drawer/index.es.js +29 -4
- package/drawer/index.umd.js +1 -1
- package/drawer/style.css +1 -1
- package/dropdown/index.es.js +178 -142
- package/dropdown/index.umd.js +1 -1
- package/dropdown/style.css +1 -1
- package/editable-select/index.es.js +742 -107
- package/editable-select/index.umd.js +1 -1
- package/editable-select/style.css +1 -1
- package/form/index.es.js +544 -316
- package/form/index.umd.js +17 -17
- package/form/style.css +1 -1
- package/fullscreen/index.es.js +28 -4
- package/fullscreen/index.umd.js +1 -1
- package/fullscreen/style.css +1 -1
- package/grid/index.es.js +71 -50
- package/grid/index.umd.js +1 -1
- package/grid/style.css +1 -1
- package/icon/index.es.js +184 -23
- package/icon/index.umd.js +1 -1
- package/icon/style.css +1 -0
- package/image-preview/index.es.js +34 -11
- package/image-preview/index.umd.js +1 -1
- package/image-preview/style.css +1 -1
- package/input/index.es.js +8250 -131
- package/input/index.umd.js +27 -1
- package/input/style.css +1 -1
- package/input-number/index.es.js +275 -203
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/layout/index.es.js +34 -6
- package/layout/index.umd.js +1 -1
- package/layout/style.css +1 -1
- package/loading/index.es.js +34 -10
- package/loading/index.umd.js +1 -1
- package/loading/style.css +1 -1
- package/mention/index.d.ts +7 -0
- package/mention/index.es.js +8310 -0
- package/mention/index.umd.js +36 -0
- package/mention/package.json +7 -0
- package/mention/style.css +1 -0
- package/menu/index.d.ts +7 -0
- package/menu/index.es.js +934 -0
- package/menu/index.umd.js +1 -0
- package/menu/package.json +7 -0
- package/menu/style.css +1 -0
- package/message/index.d.ts +7 -0
- package/message/index.es.js +538 -0
- package/message/index.umd.js +1 -0
- package/message/package.json +7 -0
- package/message/style.css +1 -0
- package/modal/index.es.js +359 -170
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/notification/index.es.js +236 -65
- package/notification/index.umd.js +1 -1
- package/notification/style.css +1 -1
- package/nuxt/components/ButtonGroup.js +3 -0
- package/nuxt/components/CheckboxButton.js +3 -0
- package/nuxt/components/Collapse.js +3 -0
- package/nuxt/components/CollapseItem.js +3 -0
- package/nuxt/components/DRangeDatePickerPro.js +3 -0
- package/nuxt/components/DatePickerPro.js +3 -0
- package/nuxt/components/Icon.js +1 -0
- package/nuxt/components/IconGroup.js +3 -0
- package/nuxt/components/LABEL_DATA.js +3 -0
- package/nuxt/components/Mention.js +3 -0
- package/nuxt/components/Menu.js +3 -0
- package/nuxt/components/MenuItem.js +3 -0
- package/nuxt/components/Message.js +3 -0
- package/nuxt/components/Option.js +3 -0
- package/nuxt/components/OptionGroup.js +3 -0
- package/nuxt/components/RadioButton.js +3 -0
- package/nuxt/components/Step.js +3 -0
- package/nuxt/components/Steps.js +3 -0
- package/nuxt/components/SubMenu.js +3 -0
- package/nuxt/components/TABLE_TOKEN.js +3 -0
- package/nuxt/components/TimePicker.js +3 -0
- package/nuxt/components/TimeSelect.js +3 -0
- package/nuxt/components/animationInjectionKey.js +3 -0
- package/nuxt/components/buttonGroupInjectionKey.js +3 -0
- package/nuxt/components/buttonGroupProps.js +3 -0
- package/nuxt/components/collapseItemProps.js +3 -0
- package/nuxt/components/collapseProps.js +3 -0
- package/nuxt/components/datePickerProCommonProps.js +3 -0
- package/nuxt/components/datePickerProPanelProps.js +3 -0
- package/nuxt/components/datePickerProProps.js +3 -0
- package/nuxt/components/iconProps.js +1 -0
- package/nuxt/components/mentionProps.js +3 -0
- package/nuxt/components/messageProps.js +3 -0
- package/nuxt/components/roundInjectionKey.js +3 -0
- package/nuxt/components/skeletonItemProps.js +3 -0
- package/nuxt/components/stepProps.js +3 -0
- package/nuxt/components/stepsProps.js +3 -0
- package/nuxt/components/svgIconProps.js +3 -0
- package/nuxt/components/tableProps.js +3 -0
- package/nuxt/components/timerPickerPanelProps.js +3 -0
- package/nuxt/components/treeNodeProps.js +3 -0
- package/overlay/index.es.js +84 -125
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +7 -3
- package/pagination/index.es.js +234 -39
- package/pagination/index.umd.js +1 -1
- package/pagination/style.css +1 -1
- package/panel/style.css +1 -1
- package/popover/index.es.js +274 -220
- package/popover/index.umd.js +13 -13
- package/popover/style.css +1 -1
- package/progress/index.es.js +31 -9
- package/progress/index.umd.js +3 -3
- package/progress/style.css +1 -1
- package/radio/index.es.js +7969 -152
- package/radio/index.umd.js +27 -1
- package/radio/style.css +1 -1
- package/rate/index.es.js +46 -14
- package/rate/index.umd.js +1 -1
- package/rate/style.css +1 -1
- package/result/index.es.js +169 -22
- package/result/index.umd.js +1 -1
- package/result/style.css +1 -1
- package/search/index.es.js +3823 -1090
- package/search/index.umd.js +18 -18
- package/search/style.css +1 -1
- package/select/index.es.js +9186 -478
- package/select/index.umd.js +27 -1
- package/select/style.css +1 -1
- package/skeleton/index.es.js +110 -259
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.es.js +143 -146
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.es.js +433 -207
- package/splitter/index.umd.js +17 -17
- package/splitter/style.css +1 -1
- package/statistic/index.es.js +34 -16
- package/statistic/index.umd.js +1 -1
- package/statistic/style.css +1 -1
- package/status/index.es.js +26 -2
- package/status/index.umd.js +1 -1
- package/status/style.css +1 -1
- package/steps/index.d.ts +7 -0
- package/steps/index.es.js +386 -0
- package/steps/index.umd.js +1 -0
- package/steps/package.json +7 -0
- package/steps/style.css +1 -0
- package/style.css +1 -1
- package/switch/index.es.js +7802 -59
- package/switch/index.umd.js +27 -1
- package/switch/style.css +1 -1
- package/table/index.es.js +9769 -919
- package/table/index.umd.js +27 -1
- package/table/style.css +1 -1
- package/tabs/index.es.js +309 -96
- package/tabs/index.umd.js +1 -1
- package/tabs/style.css +1 -1
- package/tag/index.es.js +35 -7
- package/tag/index.umd.js +1 -1
- package/tag/style.css +1 -1
- package/textarea/index.es.js +7922 -78
- package/textarea/index.umd.js +35 -1
- package/textarea/style.css +1 -1
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +9549 -0
- package/time-picker/index.umd.js +27 -0
- package/time-picker/package.json +7 -0
- package/time-picker/style.css +1 -0
- package/time-select/index.d.ts +7 -0
- package/time-select/index.es.js +9585 -0
- package/time-select/index.umd.js +27 -0
- package/time-select/package.json +7 -0
- package/time-select/style.css +1 -0
- package/timeline/index.es.js +169 -22
- package/timeline/index.umd.js +1 -1
- package/timeline/style.css +1 -1
- package/tooltip/index.es.js +265 -212
- package/tooltip/index.umd.js +15 -15
- package/tooltip/style.css +1 -1
- package/tree/index.es.js +11343 -795
- package/tree/index.umd.js +27 -1
- package/tree/style.css +1 -1
- package/upload/index.es.js +494 -106
- package/upload/index.umd.js +1 -1
- package/upload/style.css +1 -1
- package/vue-devui.es.js +22849 -13614
- package/vue-devui.umd.js +30 -23
- package/date-picker/index.es.js +0 -1145
- package/date-picker/index.umd.js +0 -1
- package/date-picker/style.css +0 -1
- package/nuxt/components/DatePicker.js +0 -3
- package/nuxt/components/FormControl.js +0 -3
- package/nuxt/components/FormLabel.js +0 -3
- package/nuxt/components/StickSlider.js +0 -3
- package/nuxt/components/formControlProps.js +0 -3
- package/nuxt/components/overlayEmits.js +0 -3
- package/nuxt/components/overlayProps.js +0 -3
package/nuxt/components/Icon.js
CHANGED
package/overlay/index.es.js
CHANGED
|
@@ -1,150 +1,108 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
23
|
-
|
|
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
|
-
|
|
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
|
-
|
|
12
|
+
closeOnClickOverlay: {
|
|
65
13
|
type: Boolean,
|
|
66
14
|
default: true
|
|
67
15
|
}
|
|
68
16
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
76
|
-
function
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
(
|
|
91
|
-
if (props.
|
|
92
|
-
ctx.emit("update:
|
|
40
|
+
ctx.emit("click", event);
|
|
41
|
+
if (props.closeOnClickOverlay) {
|
|
42
|
+
ctx.emit("update:modelValue", false);
|
|
93
43
|
}
|
|
94
44
|
};
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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:
|
|
86
|
+
emits: ["update:modelValue", "click"],
|
|
131
87
|
setup(props, ctx) {
|
|
132
88
|
const {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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":
|
|
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": "
|
|
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
|
|
293
|
+
export { FixedOverlay, FlexibleOverlay, index as default, fixedOverlayProps, flexibleOverlayProps };
|
package/overlay/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
"@
|
|
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
|
}
|