vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10
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/accordion/index.d.ts +7 -0
- package/accordion/index.es.js +237 -1
- package/accordion/index.umd.js +1 -1
- package/accordion/style.css +1 -1
- package/alert/index.d.ts +7 -0
- package/alert/index.es.js +175 -1
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/anchor/index.d.ts +7 -0
- package/anchor/index.es.js +263 -1
- package/anchor/index.umd.js +1 -1
- package/avatar/index.d.ts +7 -0
- package/avatar/index.es.js +301 -1
- package/avatar/index.umd.js +1 -1
- package/back-top/index.d.ts +7 -0
- package/back-top/index.es.js +128 -0
- package/back-top/index.umd.js +1 -0
- package/back-top/package.json +7 -0
- package/back-top/style.css +1 -0
- package/badge/index.d.ts +7 -0
- package/badge/index.es.js +95 -1
- package/badge/index.umd.js +1 -1
- package/breadcrumb/index.d.ts +7 -0
- package/breadcrumb/index.es.js +127 -1
- package/breadcrumb/index.umd.js +1 -1
- package/breadcrumb/style.css +1 -1
- package/button/index.d.ts +7 -0
- package/button/index.es.js +190 -1
- package/button/index.umd.js +1 -1
- package/card/index.d.ts +7 -0
- package/card/index.es.js +61 -1
- package/card/index.umd.js +1 -1
- package/carousel/index.d.ts +7 -0
- package/carousel/index.es.js +329 -1
- package/carousel/index.umd.js +1 -1
- package/cascader/index.d.ts +7 -0
- package/cascader/index.es.js +1343 -1
- package/cascader/index.umd.js +1 -1
- package/cascader/style.css +1 -1
- package/checkbox/index.d.ts +7 -0
- package/checkbox/index.es.js +377 -1
- package/checkbox/index.umd.js +1 -1
- package/comment/index.d.ts +7 -0
- package/comment/index.es.js +85 -0
- package/comment/index.umd.js +1 -0
- package/comment/package.json +7 -0
- package/comment/style.css +1 -0
- package/countdown/index.d.ts +7 -0
- package/countdown/index.es.js +176 -0
- package/countdown/index.umd.js +1 -0
- package/countdown/package.json +7 -0
- package/countdown/style.css +1 -0
- package/date-picker/index.d.ts +7 -0
- package/date-picker/index.es.js +1172 -1
- package/date-picker/index.umd.js +1 -1
- package/date-picker/style.css +1 -1
- package/dragdrop/index.d.ts +7 -0
- package/dragdrop/index.es.js +32 -0
- package/dragdrop/index.umd.js +1 -0
- package/dragdrop/package.json +7 -0
- package/drawer/index.d.ts +7 -0
- package/drawer/index.es.js +288 -0
- package/drawer/index.umd.js +1 -0
- package/drawer/package.json +7 -0
- package/drawer/style.css +1 -0
- package/dropdown/index.d.ts +7 -0
- package/dropdown/index.es.js +527 -0
- package/dropdown/index.umd.js +1 -0
- package/dropdown/package.json +7 -0
- package/dropdown/style.css +1 -0
- package/editable-select/index.d.ts +7 -0
- package/editable-select/index.es.js +5793 -1
- package/editable-select/index.umd.js +27 -1
- package/editable-select/style.css +1 -1
- package/form/index.d.ts +7 -0
- package/form/index.es.js +2244 -0
- package/form/index.umd.js +1 -0
- package/form/package.json +7 -0
- package/form/style.css +1 -0
- package/fullscreen/index.d.ts +7 -0
- package/fullscreen/index.es.js +163 -1
- package/fullscreen/index.umd.js +1 -1
- package/gantt/index.d.ts +7 -0
- package/gantt/index.es.js +535 -0
- package/gantt/index.umd.js +1 -0
- package/gantt/package.json +7 -0
- package/gantt/style.css +1 -0
- package/grid/index.d.ts +7 -0
- package/grid/index.es.js +269 -0
- package/grid/index.umd.js +1 -0
- package/grid/package.json +7 -0
- package/grid/style.css +1 -0
- package/icon/index.d.ts +7 -0
- package/icon/index.es.js +75 -1
- package/icon/index.umd.js +1 -1
- package/image-preview/index.d.ts +7 -0
- package/image-preview/index.es.js +480 -1
- package/image-preview/index.umd.js +1 -1
- package/image-preview/style.css +1 -1
- package/index.d.ts +7 -0
- package/input/index.d.ts +7 -0
- package/input/index.es.js +190 -1
- package/input/index.umd.js +1 -1
- package/input-icon/index.d.ts +7 -0
- package/input-icon/index.es.js +332 -0
- package/input-icon/index.umd.js +1 -0
- package/input-icon/package.json +7 -0
- package/input-icon/style.css +1 -0
- package/input-number/index.d.ts +7 -0
- package/input-number/index.es.js +240 -1
- package/input-number/index.umd.js +1 -1
- package/input-number/style.css +1 -1
- package/layout/index.d.ts +7 -0
- package/layout/index.es.js +100 -0
- package/layout/index.umd.js +1 -0
- package/layout/package.json +7 -0
- package/layout/style.css +1 -0
- package/loading/index.d.ts +7 -0
- package/loading/index.es.js +256 -1
- package/loading/index.umd.js +1 -1
- package/modal/index.d.ts +7 -0
- package/modal/index.es.js +1027 -1
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/nav-sprite/index.d.ts +7 -0
- package/nav-sprite/index.es.js +742 -0
- package/nav-sprite/index.umd.js +1 -0
- package/nav-sprite/package.json +7 -0
- package/nuxt/components/Accordion.js +3 -0
- package/nuxt/components/Alert.js +3 -0
- package/nuxt/components/Anchor.js +3 -0
- package/nuxt/components/Aside.js +3 -0
- package/nuxt/components/Avatar.js +3 -0
- package/nuxt/components/BackTop.js +3 -0
- package/nuxt/components/Badge.js +3 -0
- package/nuxt/components/Breadcrumb.js +3 -0
- package/nuxt/components/Button.js +3 -0
- package/nuxt/components/Card.js +3 -0
- package/nuxt/components/Carousel.js +3 -0
- package/nuxt/components/Cascader.js +3 -0
- package/nuxt/components/Checkbox.js +3 -0
- package/nuxt/components/Col.js +3 -0
- package/nuxt/components/Column.js +3 -0
- package/nuxt/components/Comment.js +3 -0
- package/nuxt/components/Content.js +3 -0
- package/nuxt/components/Countdown.js +3 -0
- package/nuxt/components/DatePicker.js +3 -0
- package/nuxt/components/Drawer.js +3 -0
- package/nuxt/components/Dropdown.js +3 -0
- package/nuxt/components/EditableSelect.js +3 -0
- package/nuxt/components/FixedOverlay.js +3 -0
- package/nuxt/components/FlexibleOverlay.js +3 -0
- package/nuxt/components/Footer.js +3 -0
- package/nuxt/components/Form.js +3 -0
- package/nuxt/components/FormControl.js +3 -0
- package/nuxt/components/FormItem.js +3 -0
- package/nuxt/components/FormLabel.js +3 -0
- package/nuxt/components/FormOperation.js +3 -0
- package/nuxt/components/Fullscreen.js +3 -0
- package/nuxt/components/Gantt.js +3 -0
- package/nuxt/components/Header.js +3 -0
- package/nuxt/components/Icon.js +2 -0
- package/nuxt/components/ImagePreviewService.js +3 -0
- package/nuxt/components/Input.js +3 -0
- package/nuxt/components/InputIcon.js +3 -0
- package/nuxt/components/InputNumber.js +3 -0
- package/nuxt/components/Layout.js +3 -0
- package/nuxt/components/Loading.js +3 -0
- package/nuxt/components/LoadingService.js +3 -0
- package/nuxt/components/Modal.js +3 -0
- package/nuxt/components/MultiUpload.js +3 -0
- package/nuxt/components/NavSprite.js +2 -0
- package/nuxt/components/Pagination.js +3 -0
- package/nuxt/components/Panel.js +3 -0
- package/nuxt/components/Popover.js +3 -0
- package/nuxt/components/Progress.js +3 -0
- package/nuxt/components/QuadrantDiagram.js +3 -0
- package/nuxt/components/Radio.js +3 -0
- package/nuxt/components/RadioGroup.js +3 -0
- package/nuxt/components/Rate.js +3 -0
- package/nuxt/components/ReadTip.js +3 -0
- package/nuxt/components/Result.js +3 -0
- package/nuxt/components/Row.js +3 -0
- package/nuxt/components/Search.js +3 -0
- package/nuxt/components/Select.js +3 -0
- package/nuxt/components/Skeleton.js +3 -0
- package/nuxt/components/SkeletonItem.js +3 -0
- package/nuxt/components/Slider.js +3 -0
- package/nuxt/components/Splitter.js +3 -0
- package/nuxt/components/Statistic.js +3 -0
- package/nuxt/components/Status.js +3 -0
- package/nuxt/components/StepsGuide.js +3 -0
- package/nuxt/components/StickSlider.js +3 -0
- package/nuxt/components/Sticky.js +2 -0
- package/nuxt/components/Switch.js +3 -0
- package/nuxt/components/Table.js +3 -0
- package/nuxt/components/Tabs.js +3 -0
- package/nuxt/components/Tag.js +3 -0
- package/nuxt/components/TagInput.js +3 -0
- package/nuxt/components/Textarea.js +3 -0
- package/nuxt/components/TimeAxis.js +3 -0
- package/nuxt/components/TimeAxisItem.js +3 -0
- package/nuxt/components/TimePicker.js +3 -0
- package/nuxt/components/Toast.js +3 -0
- package/nuxt/components/ToastService.js +3 -0
- package/nuxt/components/Tooltip.js +3 -0
- package/nuxt/components/Transfer.js +3 -0
- package/nuxt/components/Tree.js +3 -0
- package/nuxt/components/TreeSelect.js +3 -0
- package/nuxt/components/Upload.js +3 -0
- package/nuxt/components/buttonProps.js +3 -0
- package/nuxt/index.js +13 -0
- package/overlay/index.d.ts +7 -0
- package/overlay/index.es.js +368 -1
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +8 -33
- package/pagination/index.d.ts +7 -0
- package/pagination/index.es.js +642 -1
- package/pagination/index.umd.js +1 -1
- package/panel/index.d.ts +7 -0
- package/panel/index.es.js +205 -1
- package/panel/index.umd.js +1 -1
- package/panel/style.css +1 -1
- package/popover/index.d.ts +7 -0
- package/popover/index.es.js +236 -1
- package/popover/index.umd.js +1 -1
- package/popover/style.css +1 -1
- package/progress/index.d.ts +7 -0
- package/progress/index.es.js +153 -1
- package/progress/index.umd.js +3 -1
- package/quadrant-diagram/index.d.ts +7 -0
- package/quadrant-diagram/index.es.js +489 -1
- package/quadrant-diagram/index.umd.js +1 -1
- package/radio/index.d.ts +7 -0
- package/radio/index.es.js +225 -1
- package/radio/index.umd.js +1 -1
- package/rate/index.d.ts +7 -0
- package/rate/index.es.js +220 -1
- package/rate/index.umd.js +1 -1
- package/read-tip/index.d.ts +7 -0
- package/read-tip/index.es.js +258 -0
- package/read-tip/index.umd.js +1 -0
- package/read-tip/package.json +7 -0
- package/read-tip/style.css +1 -0
- package/result/index.d.ts +7 -0
- package/result/index.es.js +119 -0
- package/result/index.umd.js +1 -0
- package/result/package.json +7 -0
- package/result/style.css +1 -0
- package/ripple/index.d.ts +7 -0
- package/ripple/index.es.js +181 -1
- package/ripple/index.umd.js +1 -1
- package/search/index.d.ts +7 -0
- package/search/index.es.js +543 -1
- package/search/index.umd.js +1 -1
- package/select/index.d.ts +7 -0
- package/select/index.es.js +706 -1
- package/select/index.umd.js +1 -1
- package/skeleton/index.d.ts +7 -0
- package/skeleton/index.es.js +297 -1
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.d.ts +7 -0
- package/slider/index.es.js +199 -1
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.d.ts +7 -0
- package/splitter/index.es.js +636 -1
- package/splitter/index.umd.js +1 -1
- package/statistic/index.d.ts +7 -0
- package/statistic/index.es.js +280 -0
- package/statistic/index.umd.js +1 -0
- package/statistic/package.json +7 -0
- package/statistic/style.css +1 -0
- package/status/index.d.ts +7 -0
- package/status/index.es.js +42 -1
- package/status/index.umd.js +1 -1
- package/steps-guide/index.d.ts +7 -0
- package/steps-guide/index.es.js +239 -1
- package/steps-guide/index.umd.js +1 -1
- package/steps-guide/style.css +1 -1
- package/sticky/index.d.ts +7 -0
- package/sticky/index.es.js +197 -1
- package/sticky/index.umd.js +1 -1
- package/style.css +1 -1
- package/switch/index.d.ts +7 -0
- package/switch/index.es.js +100 -1
- package/switch/index.umd.js +1 -1
- package/switch/style.css +1 -1
- package/table/index.d.ts +7 -0
- package/table/index.es.js +1626 -1
- package/table/index.umd.js +1 -1
- package/table/style.css +1 -1
- package/tabs/index.d.ts +7 -0
- package/tabs/index.es.js +195 -1
- package/tabs/index.umd.js +1 -1
- package/tabs/style.css +1 -1
- package/tag/index.d.ts +7 -0
- package/tag/index.es.js +131 -0
- package/tag/index.umd.js +1 -0
- package/tag/package.json +7 -0
- package/tag/style.css +1 -0
- package/tag-input/index.d.ts +7 -0
- package/tag-input/index.es.js +329 -1
- package/tag-input/index.umd.js +1 -1
- package/textarea/index.d.ts +7 -0
- package/textarea/index.es.js +132 -0
- package/textarea/index.umd.js +1 -0
- package/textarea/package.json +7 -0
- package/textarea/style.css +1 -0
- package/time-axis/index.d.ts +7 -0
- package/time-axis/index.es.js +299 -0
- package/time-axis/index.umd.js +1 -0
- package/time-axis/package.json +7 -0
- package/time-axis/style.css +1 -0
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +1053 -1
- package/time-picker/index.umd.js +1 -1
- package/time-picker/style.css +1 -1
- package/toast/index.d.ts +7 -0
- package/toast/index.es.js +2060 -1
- package/toast/index.umd.js +1 -1
- package/toast/style.css +1 -1
- package/tooltip/index.d.ts +7 -0
- package/tooltip/index.es.js +171 -1
- package/tooltip/index.umd.js +1 -1
- package/transfer/index.d.ts +7 -0
- package/transfer/index.es.js +1725 -1
- package/transfer/index.umd.js +1 -1
- package/transfer/style.css +1 -1
- package/tree/index.d.ts +7 -0
- package/tree/index.es.js +907 -1
- package/tree/index.umd.js +1 -1
- package/tree/style.css +1 -1
- package/tree-select/index.d.ts +7 -0
- package/tree-select/index.es.js +528 -0
- package/tree-select/index.umd.js +1 -0
- package/tree-select/package.json +7 -0
- package/tree-select/style.css +1 -0
- package/upload/index.d.ts +7 -0
- package/upload/index.es.js +3179 -1
- package/upload/index.umd.js +1 -1
- package/upload/style.css +1 -1
- package/vue-devui.es.js +27755 -1
- package/vue-devui.umd.js +29 -1
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
import { defineComponent, toRefs, reactive, ref, onMounted, createVNode, Teleport, Fragment, onUnmounted } from "vue";
|
|
18
|
+
const readTipProps = {
|
|
19
|
+
readTipOptions: {
|
|
20
|
+
type: Object
|
|
21
|
+
},
|
|
22
|
+
defaultTemplateProps: {
|
|
23
|
+
type: Object
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
var readTip = "";
|
|
27
|
+
var TipsTemplate = defineComponent({
|
|
28
|
+
name: "DReadTipTemplate",
|
|
29
|
+
props: readTipProps,
|
|
30
|
+
emits: [],
|
|
31
|
+
setup(props, ctx) {
|
|
32
|
+
const {
|
|
33
|
+
defaultTemplateProps
|
|
34
|
+
} = toRefs(props);
|
|
35
|
+
let rule = defaultTemplateProps.value;
|
|
36
|
+
const query = (rule == null ? void 0 : rule.id) ? `#${rule.id}` : rule.selector;
|
|
37
|
+
const styles = reactive({});
|
|
38
|
+
if (typeof rule.dataFn === "function") {
|
|
39
|
+
const dataFn = rule.dataFn({
|
|
40
|
+
element: document.querySelector(query),
|
|
41
|
+
rule
|
|
42
|
+
});
|
|
43
|
+
rule = __spreadValues(__spreadValues({}, rule), dataFn);
|
|
44
|
+
}
|
|
45
|
+
const temp = ref(null);
|
|
46
|
+
const deviation = (x) => {
|
|
47
|
+
let deviationConstant = x > 24 ? 0 : -(x / 2) + 2;
|
|
48
|
+
if (x <= 10) {
|
|
49
|
+
deviationConstant = -10;
|
|
50
|
+
}
|
|
51
|
+
return deviationConstant;
|
|
52
|
+
};
|
|
53
|
+
onMounted(() => {
|
|
54
|
+
const domBounding = document.querySelector(query).getBoundingClientRect();
|
|
55
|
+
const {
|
|
56
|
+
width,
|
|
57
|
+
height
|
|
58
|
+
} = domBounding;
|
|
59
|
+
const distance = 10;
|
|
60
|
+
let positionTop = 0;
|
|
61
|
+
const heightDeviation = deviation(height);
|
|
62
|
+
const widthDeviation = deviation(width);
|
|
63
|
+
let positionLeft = 0;
|
|
64
|
+
const targetDom = document.querySelector(".read-tip-container").getBoundingClientRect();
|
|
65
|
+
if (rule.appendToBody) {
|
|
66
|
+
positionTop = domBounding.y + document.documentElement.scrollTop;
|
|
67
|
+
positionLeft = domBounding.x;
|
|
68
|
+
}
|
|
69
|
+
switch (rule.position) {
|
|
70
|
+
case "top":
|
|
71
|
+
styles.top = positionTop - targetDom.height - distance + "px";
|
|
72
|
+
styles.left = positionLeft + widthDeviation + "px";
|
|
73
|
+
break;
|
|
74
|
+
case "left":
|
|
75
|
+
styles.top = positionTop + heightDeviation + "px";
|
|
76
|
+
styles.left = positionLeft - targetDom.width - distance + "px";
|
|
77
|
+
break;
|
|
78
|
+
case "bottom":
|
|
79
|
+
styles.top = positionTop + domBounding.height + distance + "px";
|
|
80
|
+
styles.left = positionLeft + widthDeviation + "px";
|
|
81
|
+
break;
|
|
82
|
+
case "right":
|
|
83
|
+
styles.top = positionTop + heightDeviation + "px";
|
|
84
|
+
styles.left = positionLeft + domBounding.width + distance + "px";
|
|
85
|
+
break;
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
return () => {
|
|
89
|
+
return createVNode(Teleport, {
|
|
90
|
+
"to": rule.appendToBody ? "body" : query
|
|
91
|
+
}, {
|
|
92
|
+
default: () => {
|
|
93
|
+
var _a;
|
|
94
|
+
return [createVNode("div", {
|
|
95
|
+
"ref": temp,
|
|
96
|
+
"class": ["read-tip-container", rule.position, rule.overlayClassName],
|
|
97
|
+
"style": styles
|
|
98
|
+
}, [createVNode("span", {
|
|
99
|
+
"class": "after"
|
|
100
|
+
}, null), rule.contentTemplate ? (_a = ctx.slots) == null ? void 0 : _a.default() : createVNode(Fragment, null, [createVNode("div", {
|
|
101
|
+
"class": "title"
|
|
102
|
+
}, [rule.title]), createVNode("div", {
|
|
103
|
+
"class": "content"
|
|
104
|
+
}, [rule.content])])])];
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
var ReadTip = defineComponent({
|
|
111
|
+
name: "DReadTip",
|
|
112
|
+
props: readTipProps,
|
|
113
|
+
emits: [],
|
|
114
|
+
setup(props, ctx) {
|
|
115
|
+
const defaultOptions = {
|
|
116
|
+
trigger: "hover",
|
|
117
|
+
showAnimate: false,
|
|
118
|
+
mouseenterTime: 100,
|
|
119
|
+
mouseleaveTime: 100,
|
|
120
|
+
position: "top",
|
|
121
|
+
overlayClassName: "",
|
|
122
|
+
appendToBody: true,
|
|
123
|
+
rules: {
|
|
124
|
+
selector: null
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const options = __spreadValues(__spreadValues({}, defaultOptions), props.readTipOptions);
|
|
128
|
+
const defaultSlot = ref(null);
|
|
129
|
+
const onMouseenter = (rule) => () => {
|
|
130
|
+
setTimeout(() => {
|
|
131
|
+
if (rule.id) {
|
|
132
|
+
const a = refRules.find((u) => u.id === rule.id);
|
|
133
|
+
a.status = true;
|
|
134
|
+
}
|
|
135
|
+
rule.status = true;
|
|
136
|
+
}, rule.mouseenterTime || options.mouseenterTime);
|
|
137
|
+
};
|
|
138
|
+
const onMouseleave = (rule) => () => {
|
|
139
|
+
setTimeout(() => {
|
|
140
|
+
if (rule.id) {
|
|
141
|
+
const a = refRules.find((u) => u.id === rule.id);
|
|
142
|
+
a.status = false;
|
|
143
|
+
}
|
|
144
|
+
rule.status = false;
|
|
145
|
+
}, rule.mouseleaveTime || options.mouseleaveTime);
|
|
146
|
+
};
|
|
147
|
+
const init = (rules2, trigger = "hover") => {
|
|
148
|
+
rules2.map((rule) => {
|
|
149
|
+
rule.status = false;
|
|
150
|
+
trigger = rule.trigger || trigger;
|
|
151
|
+
rule.overlayClassName = rule.overlayClassName || options.overlayClassName;
|
|
152
|
+
rule.position = rule.position || options.position;
|
|
153
|
+
rule.contentTemplate = !!ctx.slots.contentTemplate;
|
|
154
|
+
if (!("appendToBody" in rule))
|
|
155
|
+
rule.appendToBody = options.appendToBody;
|
|
156
|
+
const doms = defaultSlot.value.querySelectorAll(rule.selector);
|
|
157
|
+
[...doms].map((dom, index2) => {
|
|
158
|
+
if (rule.appendToBody === false)
|
|
159
|
+
dom.style.position = "relative";
|
|
160
|
+
let newRule = reactive({
|
|
161
|
+
id: null
|
|
162
|
+
});
|
|
163
|
+
const id = rule.selector.slice(rule.selector[0] === "." ? 1 : 0) + index2;
|
|
164
|
+
if (index2 > 0) {
|
|
165
|
+
newRule = __spreadValues({}, rule);
|
|
166
|
+
dom.id = id;
|
|
167
|
+
newRule.id = id;
|
|
168
|
+
rules2.push(newRule);
|
|
169
|
+
}
|
|
170
|
+
if (trigger === "hover") {
|
|
171
|
+
dom.addEventListener("mouseenter", onMouseenter(newRule.id ? newRule : rule));
|
|
172
|
+
dom.addEventListener("mouseleave", onMouseleave(newRule.id ? newRule : rule));
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
return rules2;
|
|
177
|
+
};
|
|
178
|
+
function show(dom, rule) {
|
|
179
|
+
rule.status = true;
|
|
180
|
+
}
|
|
181
|
+
const rules = (rules2) => {
|
|
182
|
+
if (rules2 === null)
|
|
183
|
+
return;
|
|
184
|
+
if (typeof rules2 === "object" && !Array.isArray(rules2)) {
|
|
185
|
+
rules2 = [rules2];
|
|
186
|
+
}
|
|
187
|
+
rules2 = [...rules2];
|
|
188
|
+
Array.isArray(rules2) && rules2.map((rule) => {
|
|
189
|
+
rule.status = false;
|
|
190
|
+
});
|
|
191
|
+
return rules2;
|
|
192
|
+
};
|
|
193
|
+
const refRules = reactive(rules(options.rules));
|
|
194
|
+
const clickFn = () => {
|
|
195
|
+
refRules.forEach((element) => {
|
|
196
|
+
element.status = false;
|
|
197
|
+
});
|
|
198
|
+
};
|
|
199
|
+
onMounted(() => {
|
|
200
|
+
init(refRules, options.trigger);
|
|
201
|
+
document.addEventListener("click", clickFn, true);
|
|
202
|
+
});
|
|
203
|
+
onUnmounted(() => {
|
|
204
|
+
document.removeEventListener("click", clickFn);
|
|
205
|
+
});
|
|
206
|
+
const onClick = (e) => {
|
|
207
|
+
for (const rule of refRules) {
|
|
208
|
+
const doms = defaultSlot.value.querySelectorAll(rule.selector);
|
|
209
|
+
for (const dom of doms) {
|
|
210
|
+
if (doms.length > 1) {
|
|
211
|
+
if (dom === e.target && rule.id) {
|
|
212
|
+
show(dom, rule);
|
|
213
|
+
return;
|
|
214
|
+
} else if (dom === e.target && !rule.id && !dom.id) {
|
|
215
|
+
show(dom, rule);
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
} else if (dom === e.target) {
|
|
219
|
+
show(dom, rule);
|
|
220
|
+
return;
|
|
221
|
+
} else {
|
|
222
|
+
rule.status = false;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
return () => {
|
|
228
|
+
var _a;
|
|
229
|
+
return createVNode("div", {
|
|
230
|
+
"class": "devui-read-tip"
|
|
231
|
+
}, [createVNode("div", {
|
|
232
|
+
"ref": defaultSlot,
|
|
233
|
+
"onClick": onClick
|
|
234
|
+
}, [(_a = ctx.slots) == null ? void 0 : _a.default()]), refRules.map((rule) => createVNode("div", {
|
|
235
|
+
"data-test": "todo"
|
|
236
|
+
}, [rule.status && createVNode(TipsTemplate, {
|
|
237
|
+
"defaultTemplateProps": __spreadValues({}, rule)
|
|
238
|
+
}, {
|
|
239
|
+
default: () => {
|
|
240
|
+
var _a2;
|
|
241
|
+
return [rule.contentTemplate && ((_a2 = ctx.slots) == null ? void 0 : _a2.contentTemplate())];
|
|
242
|
+
}
|
|
243
|
+
})]))]);
|
|
244
|
+
};
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
ReadTip.install = function(app) {
|
|
248
|
+
app.component(ReadTip.name, ReadTip);
|
|
249
|
+
};
|
|
250
|
+
var index = {
|
|
251
|
+
title: "ReadTip \u9605\u8BFB\u63D0\u793A",
|
|
252
|
+
category: "\u53CD\u9988",
|
|
253
|
+
status: "100%",
|
|
254
|
+
install(app) {
|
|
255
|
+
app.use(ReadTip);
|
|
256
|
+
}
|
|
257
|
+
};
|
|
258
|
+
export { ReadTip, index as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var q=Object.defineProperty;var k=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var w=(a,e,d)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[e]=d,y=(a,e)=>{for(var d in e||(e={}))D.call(e,d)&&w(a,d,e[d]);if(k)for(var d of k(e))O.call(e,d)&&w(a,d,e[d]);return a};(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const d={readTipOptions:{type:Object},defaultTemplateProps:{type:Object}};var x="",A=e.defineComponent({name:"DReadTipTemplate",props:d,emits:[],setup(p,g){const{defaultTemplateProps:b}=e.toRefs(p);let n=b.value;const f=(n==null?void 0:n.id)?`#${n.id}`:n.selector,c=e.reactive({});if(typeof n.dataFn=="function"){const i=n.dataFn({element:document.querySelector(f),rule:n});n=y(y({},n),i)}const B=e.ref(null),N=i=>{let h=i>24?0:-(i/2)+2;return i<=10&&(h=-10),h};return e.onMounted(()=>{const i=document.querySelector(f).getBoundingClientRect(),{width:h,height:l}=i,m=10;let u=0;const t=N(l),s=N(h);let o=0;const r=document.querySelector(".read-tip-container").getBoundingClientRect();switch(n.appendToBody&&(u=i.y+document.documentElement.scrollTop,o=i.x),n.position){case"top":c.top=u-r.height-m+"px",c.left=o+s+"px";break;case"left":c.top=u+t+"px",c.left=o-r.width-m+"px";break;case"bottom":c.top=u+i.height+m+"px",c.left=o+s+"px";break;case"right":c.top=u+t+"px",c.left=o+i.width+m+"px";break}}),()=>e.createVNode(e.Teleport,{to:n.appendToBody?"body":f},{default:()=>{var i;return[e.createVNode("div",{ref:B,class:["read-tip-container",n.position,n.overlayClassName],style:c},[e.createVNode("span",{class:"after"},null),n.contentTemplate?(i=g.slots)==null?void 0:i.default():e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"title"},[n.title]),e.createVNode("div",{class:"content"},[n.content])])])]}})}}),v=e.defineComponent({name:"DReadTip",props:d,emits:[],setup(p,g){const n=y(y({},{trigger:"hover",showAnimate:!1,mouseenterTime:100,mouseleaveTime:100,position:"top",overlayClassName:"",appendToBody:!0,rules:{selector:null}}),p.readTipOptions),f=e.ref(null),c=t=>()=>{setTimeout(()=>{if(t.id){const s=l.find(o=>o.id===t.id);s.status=!0}t.status=!0},t.mouseenterTime||n.mouseenterTime)},B=t=>()=>{setTimeout(()=>{if(t.id){const s=l.find(o=>o.id===t.id);s.status=!1}t.status=!1},t.mouseleaveTime||n.mouseleaveTime)},N=(t,s="hover")=>(t.map(o=>{o.status=!1,s=o.trigger||s,o.overlayClassName=o.overlayClassName||n.overlayClassName,o.position=o.position||n.position,o.contentTemplate=!!g.slots.contentTemplate,"appendToBody"in o||(o.appendToBody=n.appendToBody),[...f.value.querySelectorAll(o.selector)].map((C,V)=>{o.appendToBody===!1&&(C.style.position="relative");let T=e.reactive({id:null});const R=o.selector.slice(o.selector[0]==="."?1:0)+V;V>0&&(T=y({},o),C.id=R,T.id=R,t.push(T)),s==="hover"&&(C.addEventListener("mouseenter",c(T.id?T:o)),C.addEventListener("mouseleave",B(T.id?T:o)))})}),t);function i(t,s){s.status=!0}const h=t=>{if(t!==null)return typeof t=="object"&&!Array.isArray(t)&&(t=[t]),t=[...t],Array.isArray(t)&&t.map(s=>{s.status=!1}),t},l=e.reactive(h(n.rules)),m=()=>{l.forEach(t=>{t.status=!1})};e.onMounted(()=>{N(l,n.trigger),document.addEventListener("click",m,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",m)});const u=t=>{for(const s of l){const o=f.value.querySelectorAll(s.selector);for(const r of o)if(o.length>1){if(r===t.target&&s.id){i(r,s);return}else if(r===t.target&&!s.id&&!r.id){i(r,s);return}}else if(r===t.target){i(r,s);return}else s.status=!1}};return()=>{var t;return e.createVNode("div",{class:"devui-read-tip"},[e.createVNode("div",{ref:f,onClick:u},[(t=g.slots)==null?void 0:t.default()]),l.map(s=>e.createVNode("div",{"data-test":"todo"},[s.status&&e.createVNode(A,{defaultTemplateProps:y({},s)},{default:()=>{var o;return[s.contentTemplate&&((o=g.slots)==null?void 0:o.contentTemplate())]}})]))])}}});v.install=function(p){p.component(v.name,v)};var S={title:"ReadTip \u9605\u8BFB\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(p){p.use(v)}};a.ReadTip=v,a.default=S,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-read-tip{position:relative}.devui-read-tip .title{font-size:16px}.source{overflow:initial}.read-tip-container{font-size:var(--devui-font-size, 12px);position:absolute;width:max-content;height:max-content;line-height:1.5;border:none;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e);color:var(--devui-feedback-overlay-text, #dfe1e6);overflow-wrap:break-word;padding:10px;z-index:50}.read-tip-container .after{content:"";width:12px;height:12px;transform:rotate(45deg);position:absolute;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.read-tip-container.top .after{bottom:-4px}.read-tip-container.left .after{right:-4px}.read-tip-container.right .after{left:-4px}.read-tip-container.bottom .after{top:-4px}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
import { defineComponent, createVNode } from "vue";
|
|
18
|
+
const resultProps = {
|
|
19
|
+
icon: {
|
|
20
|
+
type: String,
|
|
21
|
+
default: "info"
|
|
22
|
+
},
|
|
23
|
+
title: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: ""
|
|
26
|
+
},
|
|
27
|
+
desc: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: ""
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
var Icon = defineComponent({
|
|
33
|
+
name: "DIcon",
|
|
34
|
+
props: {
|
|
35
|
+
name: {
|
|
36
|
+
type: String,
|
|
37
|
+
required: true
|
|
38
|
+
},
|
|
39
|
+
size: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: "inherit"
|
|
42
|
+
},
|
|
43
|
+
color: {
|
|
44
|
+
type: String,
|
|
45
|
+
default: "inherit"
|
|
46
|
+
},
|
|
47
|
+
classPrefix: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: "icon"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
setup(props) {
|
|
53
|
+
return __spreadValues({}, props);
|
|
54
|
+
},
|
|
55
|
+
render() {
|
|
56
|
+
const {
|
|
57
|
+
name,
|
|
58
|
+
size,
|
|
59
|
+
color,
|
|
60
|
+
classPrefix
|
|
61
|
+
} = this;
|
|
62
|
+
return /^((https?):)?\/\//.test(name) ? createVNode("img", {
|
|
63
|
+
"src": name,
|
|
64
|
+
"alt": name.split("/")[name.split("/").length - 1],
|
|
65
|
+
"style": {
|
|
66
|
+
width: size,
|
|
67
|
+
verticalAlign: "text-bottom"
|
|
68
|
+
}
|
|
69
|
+
}, null) : createVNode("i", {
|
|
70
|
+
"class": `${classPrefix} ${classPrefix}-${name}`,
|
|
71
|
+
"style": {
|
|
72
|
+
fontSize: size,
|
|
73
|
+
color
|
|
74
|
+
}
|
|
75
|
+
}, null);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
var result = "";
|
|
79
|
+
var Result = defineComponent({
|
|
80
|
+
name: "DResult",
|
|
81
|
+
props: resultProps,
|
|
82
|
+
setup(props, ctx) {
|
|
83
|
+
let IconEnum;
|
|
84
|
+
(function(IconEnum2) {
|
|
85
|
+
IconEnum2["success"] = "right-o";
|
|
86
|
+
IconEnum2["danger"] = "error-o";
|
|
87
|
+
IconEnum2["warning"] = "warning-o";
|
|
88
|
+
IconEnum2["info"] = "info-o";
|
|
89
|
+
})(IconEnum || (IconEnum = {}));
|
|
90
|
+
return () => {
|
|
91
|
+
var _a, _b, _c, _d;
|
|
92
|
+
return createVNode("div", {
|
|
93
|
+
"class": "devui-result"
|
|
94
|
+
}, [ctx.slots.icon ? createVNode("div", null, [(_a = ctx.slots) == null ? void 0 : _a.icon()]) : createVNode(Icon, {
|
|
95
|
+
"name": IconEnum[props.icon] || "",
|
|
96
|
+
"class": `devui-result__icon-${props.icon}`,
|
|
97
|
+
"size": "64px"
|
|
98
|
+
}, null), createVNode("div", {
|
|
99
|
+
"class": "devui-result__title"
|
|
100
|
+
}, [ctx.slots.title ? (_b = ctx.slots) == null ? void 0 : _b.title() : props.title]), createVNode("div", {
|
|
101
|
+
"class": "devui-result__desc"
|
|
102
|
+
}, [ctx.slots.desc ? (_c = ctx.slots) == null ? void 0 : _c.desc() : props.desc]), createVNode("div", {
|
|
103
|
+
"class": "devui-result__extra"
|
|
104
|
+
}, [ctx.slots.extra ? (_d = ctx.slots) == null ? void 0 : _d.extra() : ""])]);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
Result.install = function(app) {
|
|
109
|
+
app.component(Result.name, Result);
|
|
110
|
+
};
|
|
111
|
+
var index = {
|
|
112
|
+
title: "Result \u7ED3\u679C",
|
|
113
|
+
category: "\u53CD\u9988",
|
|
114
|
+
status: "100%",
|
|
115
|
+
install(app) {
|
|
116
|
+
app.use(Result);
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
export { Result, index as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var m=Object.defineProperty;var c=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var f=(t,e,s)=>e in t?m(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,p=(t,e)=>{for(var s in e||(e={}))h.call(e,s)&&f(t,s,e[s]);if(c)for(var s of c(e))S.call(e,s)&&f(t,s,e[s]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";const s={icon:{type:String,default:"info"},title:{type:String,default:""},desc:{type:String,default:""}};var g=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(i){return p({},i)},render(){const{name:i,size:n,color:o,classPrefix:l}=this;return/^((https?):)?\/\//.test(i)?e.createVNode("img",{src:i,alt:i.split("/")[i.split("/").length-1],style:{width:n,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${l} ${l}-${i}`,style:{fontSize:n,color:o}},null)}}),_="",r=e.defineComponent({name:"DResult",props:s,setup(i,n){let o;return function(l){l.success="right-o",l.danger="error-o",l.warning="warning-o",l.info="info-o"}(o||(o={})),()=>{var l,d,u,a;return e.createVNode("div",{class:"devui-result"},[n.slots.icon?e.createVNode("div",null,[(l=n.slots)==null?void 0:l.icon()]):e.createVNode(g,{name:o[i.icon]||"",class:`devui-result__icon-${i.icon}`,size:"64px"},null),e.createVNode("div",{class:"devui-result__title"},[n.slots.title?(d=n.slots)==null?void 0:d.title():i.title]),e.createVNode("div",{class:"devui-result__desc"},[n.slots.desc?(u=n.slots)==null?void 0:u.desc():i.desc]),e.createVNode("div",{class:"devui-result__extra"},[n.slots.extra?(a=n.slots)==null?void 0:a.extra():""])])}}});r.install=function(i){i.component(r.name,r)};var y={title:"Result \u7ED3\u679C",category:"\u53CD\u9988",status:"100%",install(i){i.use(r)}};t.Result=r,t.default=y,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
|
package/result/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.devui-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:30px}.devui-result__icon-success:before{color:var(--devui-success, #50d4ab)}.devui-result__icon-danger:before{color:var(--devui-danger, #f66f6a)}.devui-result__icon-warning:before{color:var(--devui-warning, #fac20a)}.devui-result__icon-info:before{color:var(--devui-info, #5e7ce0)}.devui-result__title{margin-top:20px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size-lg, 14px)}.devui-result__desc{margin-top:10px;color:var(--devui-text-weak, #575d6c);font-size:var(--devui-font-size-md, 12px)}.devui-result__extra{margin-top:30px}
|
package/ripple/index.es.js
CHANGED
|
@@ -1 +1,181 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
const DEFAULT_PLUGIN_OPTIONS = {
|
|
18
|
+
directive: "ripple",
|
|
19
|
+
color: "currentColor",
|
|
20
|
+
initialOpacity: 0.2,
|
|
21
|
+
finalOpacity: 0.1,
|
|
22
|
+
duration: 0.8,
|
|
23
|
+
easing: "ease-out",
|
|
24
|
+
delayTime: 75,
|
|
25
|
+
disabled: false
|
|
26
|
+
};
|
|
27
|
+
const createContainer = ({
|
|
28
|
+
borderTopLeftRadius,
|
|
29
|
+
borderTopRightRadius,
|
|
30
|
+
borderBottomLeftRadius,
|
|
31
|
+
borderBottomRightRadius
|
|
32
|
+
}) => {
|
|
33
|
+
const rippleContainer = document.createElement("div");
|
|
34
|
+
rippleContainer.style.top = "0";
|
|
35
|
+
rippleContainer.style.left = "0";
|
|
36
|
+
rippleContainer.style.width = "100%";
|
|
37
|
+
rippleContainer.style.height = "100%";
|
|
38
|
+
rippleContainer.style.position = "absolute";
|
|
39
|
+
rippleContainer.style.borderRadius = `${borderTopLeftRadius} ${borderTopRightRadius} ${borderBottomRightRadius} ${borderBottomLeftRadius}`;
|
|
40
|
+
rippleContainer.style.overflow = "hidden";
|
|
41
|
+
rippleContainer.style.pointerEvents = "none";
|
|
42
|
+
rippleContainer.style.webkitMaskImage = "-webkit-radial-gradient(white, black)";
|
|
43
|
+
return rippleContainer;
|
|
44
|
+
};
|
|
45
|
+
const createrippleElement = (x, y, size, options) => {
|
|
46
|
+
const rippleElement = document.createElement("div");
|
|
47
|
+
rippleElement.style.position = "absolute";
|
|
48
|
+
rippleElement.style.width = `${size}px`;
|
|
49
|
+
rippleElement.style.height = `${size}px`;
|
|
50
|
+
rippleElement.style.top = `${y}px`;
|
|
51
|
+
rippleElement.style.left = `${x}px`;
|
|
52
|
+
rippleElement.style.background = options.color;
|
|
53
|
+
rippleElement.style.borderRadius = "50%";
|
|
54
|
+
rippleElement.style.opacity = `${options.initialOpacity}`;
|
|
55
|
+
rippleElement.style.transform = `translate(-50%,-50%) scale(0)`;
|
|
56
|
+
rippleElement.style.transition = `transform ${options.duration}s ${options.easing}, opacity ${options.duration}s ${options.easing}`;
|
|
57
|
+
return rippleElement;
|
|
58
|
+
};
|
|
59
|
+
function magnitude(x1, y1, x2, y2) {
|
|
60
|
+
const deltaX = x1 - x2;
|
|
61
|
+
const deltaY = y1 - y2;
|
|
62
|
+
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
63
|
+
}
|
|
64
|
+
function getDistanceToFurthestCorner(x, y, { width, height }) {
|
|
65
|
+
const topLeft = magnitude(x, y, 0, 0);
|
|
66
|
+
const topRight = magnitude(x, y, width, 0);
|
|
67
|
+
const bottomLeft = magnitude(x, y, 0, height);
|
|
68
|
+
const bottomRight = magnitude(x, y, width, height);
|
|
69
|
+
return Math.max(topLeft, topRight, bottomLeft, bottomRight);
|
|
70
|
+
}
|
|
71
|
+
const getRelativePointer = ({ x, y }, { top, left }) => ({
|
|
72
|
+
x: x - left,
|
|
73
|
+
y: y - top
|
|
74
|
+
});
|
|
75
|
+
const RIPPLE_COUNT = "vRippleCountInternal";
|
|
76
|
+
function incrementRippleCount(el) {
|
|
77
|
+
const count = getRippleCount(el);
|
|
78
|
+
setRippleCount(el, count + 1);
|
|
79
|
+
}
|
|
80
|
+
function decrementRippleCount(el) {
|
|
81
|
+
const count = getRippleCount(el);
|
|
82
|
+
setRippleCount(el, count - 1);
|
|
83
|
+
}
|
|
84
|
+
function setRippleCount(el, count) {
|
|
85
|
+
el.dataset[RIPPLE_COUNT] = count.toString();
|
|
86
|
+
}
|
|
87
|
+
function getRippleCount(el) {
|
|
88
|
+
var _a;
|
|
89
|
+
return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
|
|
90
|
+
}
|
|
91
|
+
function deleteRippleCount(el) {
|
|
92
|
+
delete el.dataset[RIPPLE_COUNT];
|
|
93
|
+
}
|
|
94
|
+
const MULTIPLE_NUMBER = 2.05;
|
|
95
|
+
const ripple = (event, el, options) => {
|
|
96
|
+
const rect = el.getBoundingClientRect();
|
|
97
|
+
const computedStyles = window.getComputedStyle(el);
|
|
98
|
+
const { x, y } = getRelativePointer(event, rect);
|
|
99
|
+
const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect);
|
|
100
|
+
const rippleContainer = createContainer(computedStyles);
|
|
101
|
+
const rippleEl = createrippleElement(x, y, size, options);
|
|
102
|
+
incrementRippleCount(el);
|
|
103
|
+
let originalPositionValue = "";
|
|
104
|
+
if (computedStyles.position === "static") {
|
|
105
|
+
if (el.style.position)
|
|
106
|
+
originalPositionValue = el.style.position;
|
|
107
|
+
el.style.position = "relative";
|
|
108
|
+
}
|
|
109
|
+
rippleContainer.appendChild(rippleEl);
|
|
110
|
+
el.appendChild(rippleContainer);
|
|
111
|
+
let shouldDissolveripple = false;
|
|
112
|
+
const releaseripple = (e) => {
|
|
113
|
+
if (typeof e !== "undefined") {
|
|
114
|
+
document.removeEventListener("pointerup", releaseripple);
|
|
115
|
+
document.removeEventListener("pointercancel", releaseripple);
|
|
116
|
+
}
|
|
117
|
+
if (shouldDissolveripple)
|
|
118
|
+
dissolveripple();
|
|
119
|
+
else
|
|
120
|
+
shouldDissolveripple = true;
|
|
121
|
+
};
|
|
122
|
+
const dissolveripple = () => {
|
|
123
|
+
rippleEl.style.transition = "opacity 150ms linear";
|
|
124
|
+
rippleEl.style.opacity = "0";
|
|
125
|
+
setTimeout(() => {
|
|
126
|
+
rippleContainer.remove();
|
|
127
|
+
decrementRippleCount(el);
|
|
128
|
+
if (getRippleCount(el) === 0) {
|
|
129
|
+
deleteRippleCount(el);
|
|
130
|
+
el.style.position = originalPositionValue;
|
|
131
|
+
}
|
|
132
|
+
}, 150);
|
|
133
|
+
};
|
|
134
|
+
document.addEventListener("pointerup", releaseripple);
|
|
135
|
+
document.addEventListener("pointercancel", releaseripple);
|
|
136
|
+
const token = setTimeout(() => {
|
|
137
|
+
document.removeEventListener("pointercancel", cancelripple);
|
|
138
|
+
requestAnimationFrame(() => {
|
|
139
|
+
rippleEl.style.transform = `translate(-50%,-50%) scale(1)`;
|
|
140
|
+
rippleEl.style.opacity = `${options.finalOpacity}`;
|
|
141
|
+
setTimeout(() => releaseripple(), options.duration * 1e3);
|
|
142
|
+
});
|
|
143
|
+
}, options.delayTime);
|
|
144
|
+
const cancelripple = () => {
|
|
145
|
+
clearTimeout(token);
|
|
146
|
+
rippleContainer.remove();
|
|
147
|
+
document.removeEventListener("pointerup", releaseripple);
|
|
148
|
+
document.removeEventListener("pointercancel", releaseripple);
|
|
149
|
+
document.removeEventListener("pointercancel", cancelripple);
|
|
150
|
+
};
|
|
151
|
+
document.addEventListener("pointercancel", cancelripple);
|
|
152
|
+
};
|
|
153
|
+
const optionMap = new WeakMap();
|
|
154
|
+
const globalOptions = __spreadValues({}, DEFAULT_PLUGIN_OPTIONS);
|
|
155
|
+
var RippleDirective = {
|
|
156
|
+
mounted(el, binding) {
|
|
157
|
+
var _a;
|
|
158
|
+
optionMap.set(el, (_a = binding.value) != null ? _a : {});
|
|
159
|
+
el.addEventListener("pointerdown", (event) => {
|
|
160
|
+
const options = optionMap.get(el);
|
|
161
|
+
if (binding.value && binding.value.disabled)
|
|
162
|
+
return;
|
|
163
|
+
if (options === false)
|
|
164
|
+
return;
|
|
165
|
+
ripple(event, el, __spreadValues(__spreadValues({}, globalOptions), options));
|
|
166
|
+
});
|
|
167
|
+
},
|
|
168
|
+
updated(el, binding) {
|
|
169
|
+
var _a;
|
|
170
|
+
optionMap.set(el, (_a = binding.value) != null ? _a : {});
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
var index = {
|
|
174
|
+
title: "Ripple \u6C34\u6CE2\u7EB9",
|
|
175
|
+
category: "\u901A\u7528",
|
|
176
|
+
status: "100%",
|
|
177
|
+
install(app) {
|
|
178
|
+
app.directive("Ripple", RippleDirective);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
export { RippleDirective, index as default };
|
package/ripple/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var B=Object.defineProperty;var T=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var $=(s,r,a)=>r in s?B(s,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[r]=a,y=(s,r)=>{for(var a in r||(r={}))F.call(r,a)&&$(s,a,r[a]);if(T)for(var a of T(r))j.call(r,a)&&$(s,a,r[a]);return s};(function(s,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(s=typeof globalThis!="undefined"?globalThis:s||self,r(s.index={}))})(this,function(s){"use strict";const r={directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.8,easing:"ease-out",delayTime:75,disabled:!1},a=({borderTopLeftRadius:t,borderTopRightRadius:e,borderBottomLeftRadius:i,borderBottomRightRadius:o})=>{const n=document.createElement("div");return n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%",n.style.position="absolute",n.style.borderRadius=`${t} ${e} ${o} ${i}`,n.style.overflow="hidden",n.style.pointerEvents="none",n.style.webkitMaskImage="-webkit-radial-gradient(white, black)",n},w=(t,e,i,o)=>{const n=document.createElement("div");return n.style.position="absolute",n.style.width=`${i}px`,n.style.height=`${i}px`,n.style.top=`${e}px`,n.style.left=`${t}px`,n.style.background=o.color,n.style.borderRadius="50%",n.style.opacity=`${o.initialOpacity}`,n.style.transform="translate(-50%,-50%) scale(0)",n.style.transition=`transform ${o.duration}s ${o.easing}, opacity ${o.duration}s ${o.easing}`,n};function u(t,e,i,o){const n=t-i,l=e-o;return Math.sqrt(n*n+l*l)}function M(t,e,{width:i,height:o}){const n=u(t,e,0,0),l=u(t,e,i,0),d=u(t,e,0,o),g=u(t,e,i,o);return Math.max(n,l,d,g)}const O=({x:t,y:e},{top:i,left:o})=>({x:t-o,y:e-i}),f="vRippleCountInternal";function P(t){const e=v(t);R(t,e+1)}function k(t){const e=v(t);R(t,e-1)}function R(t,e){t.dataset[f]=e.toString()}function v(t){var e;return parseInt((e=t.dataset[f])!=null?e:"0",10)}function I(t){delete t.dataset[f]}const x=2.05,S=(t,e,i)=>{const o=e.getBoundingClientRect(),n=window.getComputedStyle(e),{x:l,y:d}=O(t,o),g=x*M(l,d,o),m=a(n),p=w(l,d,g,i);P(e);let h="";n.position==="static"&&(e.style.position&&(h=e.style.position),e.style.position="relative"),m.appendChild(p),e.appendChild(m);let b=!1;const c=A=>{typeof A!="undefined"&&(document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c)),b?U():b=!0},U=()=>{p.style.transition="opacity 150ms linear",p.style.opacity="0",setTimeout(()=>{m.remove(),k(e),v(e)===0&&(I(e),e.style.position=h)},150)};document.addEventListener("pointerup",c),document.addEventListener("pointercancel",c);const N=setTimeout(()=>{document.removeEventListener("pointercancel",C),requestAnimationFrame(()=>{p.style.transform="translate(-50%,-50%) scale(1)",p.style.opacity=`${i.finalOpacity}`,setTimeout(()=>c(),i.duration*1e3)})},i.delayTime),C=()=>{clearTimeout(N),m.remove(),document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c),document.removeEventListener("pointercancel",C)};document.addEventListener("pointercancel",C)},E=new WeakMap,_=y({},r);var L={mounted(t,e){var i;E.set(t,(i=e.value)!=null?i:{}),t.addEventListener("pointerdown",o=>{const n=E.get(t);e.value&&e.value.disabled||n!==!1&&S(o,t,y(y({},_),n))})},updated(t,e){var i;E.set(t,(i=e.value)!=null?i:{})}},D={title:"Ripple \u6C34\u6CE2\u7EB9",category:"\u901A\u7528",status:"100%",install(t){t.directive("Ripple",L)}};s.RippleDirective=L,s.default=D,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
|