vue-devui 1.0.0-beta.14 → 1.0.0-beta.15

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 (23) hide show
  1. package/README.md +3 -0
  2. package/auto-complete/style.css +1 -1
  3. package/carousel/index.es.js +5 -5
  4. package/carousel/index.umd.js +1 -1
  5. package/comment/index.es.js +3 -2
  6. package/comment/index.umd.js +1 -1
  7. package/comment/style.css +1 -1
  8. package/drawer/index.es.js +137 -58
  9. package/drawer/index.umd.js +1 -1
  10. package/nuxt/components/CarouselItem.js +3 -0
  11. package/package.json +21 -1
  12. package/splitter/index.es.js +69 -115
  13. package/splitter/index.umd.js +1 -1
  14. package/style.css +1 -1
  15. package/tag/index.es.js +2 -2
  16. package/tag/index.umd.js +1 -1
  17. package/tag/style.css +1 -1
  18. package/tooltip/index.es.js +69 -115
  19. package/tooltip/index.umd.js +1 -1
  20. package/transfer/index.es.js +68 -114
  21. package/transfer/index.umd.js +1 -1
  22. package/vue-devui.es.js +213 -178
  23. package/vue-devui.umd.js +5 -5
package/tag/index.es.js CHANGED
@@ -23,8 +23,8 @@ const tagProps = {
23
23
  };
24
24
  function useClass(props) {
25
25
  return computed(() => {
26
- const { type, color } = props;
27
- return `devui-tag devui-tag-${type || (color ? "colorful" : "") || "default"}`;
26
+ const { type, color, deletable } = props;
27
+ return `devui-tag devui-tag-${type || (color ? "colorful" : "") || "default"} ${deletable ? "devui-tag-deletable" : ""}`;
28
28
  });
29
29
  }
30
30
  function useColor(props) {
package/tag/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const f={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function p(t){return e.computed(()=>{const{type:n,color:a}=t;return`devui-tag devui-tag-${n||(a?"colorful":"")||"default"}`})}function g(t){return e.computed(()=>{const{color:n,type:a}=t,i={primary:"#5e7ce0",success:"#50d4ab",warning:"#fac20a",danger:"#f66f6a"},c={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!n&&a?i[a]:c[n]||n})}var D="",l=e.defineComponent({name:"DTag",props:f,emits:["click","tagDelete","checkedChange"],setup(t,{slots:n,emit:a}){const{type:i,color:c,checked:r,titleContent:y,deletable:C}=e.toRefs(t),m=p(t),d=g(t),v=y.value||"",w=()=>!i.value&&!c.value,s=e.ref(!0),b=()=>{a("click")},k=()=>{s.value=!1,a("tagDelete")},T=()=>C.value?e.createVNode("a",{class:"remove-button",onClick:k},[w()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:d.value},null)]):null,S=e.watch(r,u=>{console.log("checkedChange"),a("checkedChange",u)});return e.onUnmounted(()=>S()),()=>{var u;return s.value&&e.withDirectives(e.createVNode("div",{class:"devui-tag",onClick:b},[e.createVNode("span",{class:m.value,style:{display:"block",color:r.value?"#fff":d.value,backgroundColor:r.value?d.value:c.value?"#fff":""},title:v},[(u=n.default)==null?void 0:u.call(n),T()])]),[[e.vShow,s.value]])}}});l.install=function(t){t.component(l.name,l)};var h={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"70%",install(t){t.use(l)}};o.Tag=l,o.default=h,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
1
+ (function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const f={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function p(t){return e.computed(()=>{const{type:a,color:n,deletable:c}=t;return`devui-tag devui-tag-${a||(n?"colorful":"")||"default"} ${c?"devui-tag-deletable":""}`})}function g(t){return e.computed(()=>{const{color:a,type:n}=t,c={primary:"#5e7ce0",success:"#50d4ab",warning:"#fac20a",danger:"#f66f6a"},r={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!a&&n?c[n]:r[a]||a})}var D="",l=e.defineComponent({name:"DTag",props:f,emits:["click","tagDelete","checkedChange"],setup(t,{slots:a,emit:n}){const{type:c,color:r,checked:u,titleContent:y,deletable:C}=e.toRefs(t),m=p(t),i=g(t),v=y.value||"",b=()=>!c.value&&!r.value,s=e.ref(!0),w=()=>{n("click")},k=()=>{s.value=!1,n("tagDelete")},T=()=>C.value?e.createVNode("a",{class:"remove-button",onClick:k},[b()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:i.value},null)]):null,S=e.watch(u,d=>{console.log("checkedChange"),n("checkedChange",d)});return e.onUnmounted(()=>S()),()=>{var d;return s.value&&e.withDirectives(e.createVNode("div",{class:"devui-tag",onClick:w},[e.createVNode("span",{class:m.value,style:{display:"block",color:u.value?"#fff":i.value,backgroundColor:u.value?i.value:r.value?"#fff":""},title:v},[(d=a.default)==null?void 0:d.call(a),T()])]),[[e.vShow,s.value]])}}});l.install=function(t){t.component(l.name,l)};var h={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"70%",install(t){t.use(l)}};o.Tag=l,o.default=h,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
package/tag/style.css CHANGED
@@ -1 +1 @@
1
- .devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag{padding:0 8px;min-height:20px;font-size:12px;font-size:var(--devui-font-size, 12px);line-height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);display:block;align-items:center;position:relative;cursor:default}.devui-tag .devui-tag.devui-tag-default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f3f6f8)}.devui-tag .devui-tag.devui-tag-primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc);border-color:var(--devui-primary-line, #5e7ce0)}.devui-tag .devui-tag.devui-tag-success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab)}.devui-tag .devui-tag.devui-tag-warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841)}.devui-tag .devui-tag.devui-tag-danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a)}.devui-tag .devui-tag.devui-tag-colorful{background-color:#fff}.devui-tag .remove-button{display:inline-block;margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;border-radius:50%;text-align:center;position:relative;top:-.22em;vertical-align:middle}
1
+ @charset "UTF-8";.devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag{padding:0 8px;min-height:20px;font-size:12px;font-size:var(--devui-font-size, 12px);line-height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);display:block;align-items:center;position:relative;cursor:default}.devui-tag .devui-tag.devui-tag-default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f3f6f8)}.devui-tag .devui-tag.devui-tag-primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc);border-color:var(--devui-primary-line, #5e7ce0)}.devui-tag .devui-tag.devui-tag-success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab)}.devui-tag .devui-tag.devui-tag-warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841)}.devui-tag .devui-tag.devui-tag-danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a)}.devui-tag .devui-tag.devui-tag-colorful{background-color:#fff}.devui-tag .devui-tag.devui-tag-deletable{padding-right:32px}.devui-tag .remove-button{display:inline-block;margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;border-radius:50%;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag .remove-button i{vertical-align:0}
package/tooltip/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, reactive, ref, onMounted, watch, onBeforeUnmount, renderSlot, useSlots, createVNode } from "vue";
1
+ import { defineComponent, reactive, ref, onMounted, onBeforeUnmount, renderSlot, useSlots, createVNode } from "vue";
2
2
  const tooltipProps = {
3
3
  position: {
4
4
  type: String,
@@ -20,140 +20,94 @@ const tooltipProps = {
20
20
  default: "100"
21
21
  }
22
22
  };
23
- const EventListener = {
24
- listen: function(target, eventType, callback) {
25
- if (target.addEventListener) {
26
- target.addEventListener(eventType, callback, false);
27
- return {
28
- remove() {
29
- target.removeEventListener(target, callback, false);
30
- }
31
- };
32
- } else {
33
- target.attchEvent(eventType, callback);
34
- return {
35
- remove() {
36
- target.detachEvent(eventType, callback);
37
- }
38
- };
39
- }
40
- }
41
- };
42
23
  var tooltip = "";
43
24
  var Tooltip = defineComponent({
44
25
  name: "DTooltip",
45
26
  props: tooltipProps,
46
- setup(props, ctx) {
27
+ setup(props) {
47
28
  const position = reactive({
48
29
  left: 0,
49
30
  top: 0
50
31
  });
51
- const show = ref(false);
52
- const slotElement = ref(null);
53
- const tooltip2 = ref(null);
54
- const arrow = ref(null);
55
- const tooltipcontent = ref(null);
56
- let enterEvent;
57
- let leaveEvent;
58
32
  const arrowStyle = (attr, value) => {
59
- arrow.value.style[attr] = value;
60
- };
61
- const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
62
- let start;
63
- if (parseInt(delay) >= 0) {
64
- return function() {
65
- if (start) {
66
- clearTimeout(start);
67
- }
68
- start = setTimeout(fn, parseInt(delay));
69
- };
70
- } else {
71
- console.error("the value of delay is bigger than 0 and the type of delay must be string!");
72
- return;
73
- }
33
+ document.getElementById("devui-arrow").style[attr] = value;
74
34
  };
35
+ const slotElement = ref(null);
75
36
  onMounted(() => {
76
- if (!show.value) {
77
- tooltip2.value.style.opacity = "0";
78
- }
79
- enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
80
- show.value = true;
81
- }, props.mouseEnterDelay));
82
- leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
83
- if (show.value) {
84
- setTimeout(function() {
85
- show.value = false;
86
- }, props.mouseLeaveDelay);
87
- }
88
- });
89
- });
90
- watch(show, function(newValue, oldValue) {
91
- if (newValue) {
92
- tooltip2.value.style.opacity = "1";
93
- tooltip2.value.style.zIndex = "999";
94
- arrow.value.style.border = "5px solid transparent";
95
- switch (props.position) {
96
- case "top":
97
- position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
98
- position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
99
- arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
100
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
101
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
102
- break;
103
- case "right":
104
- position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
105
- position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
106
- arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
107
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
108
- arrow.value.style.left = "-0px";
109
- break;
110
- case "bottom":
111
- position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
112
- position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
113
- arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
114
- arrow.value.style.top = "-10px";
115
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
116
- break;
117
- case "left":
118
- position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
119
- position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
120
- arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
121
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
122
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
123
- break;
124
- default:
125
- console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
126
- break;
127
- }
128
- tooltip2.value.style.top = position.top + "px";
129
- tooltip2.value.style.left = position.left + "px";
130
- } else {
131
- position.top = 0;
132
- position.left = 0;
133
- tooltip2.value.style.opacity = "0";
134
- }
37
+ slotElement.value.children[0].onmouseenter = function() {
38
+ const tooltip2 = document.createElement("div");
39
+ const arrow = document.createElement("div");
40
+ const tooltipcontent = document.createElement("div");
41
+ tooltip2.classList.add("tooltip");
42
+ arrow.classList.add("arrow");
43
+ tooltipcontent.classList.add("tooltipcontent");
44
+ arrow.id = "devui-arrow";
45
+ tooltip2.id = "devui-tooltip1";
46
+ setTimeout(() => {
47
+ document.getElementById("devui-tooltip").appendChild(tooltip2);
48
+ tooltip2.appendChild(arrow);
49
+ tooltip2.appendChild(tooltipcontent);
50
+ tooltipcontent.innerHTML = props.content;
51
+ tooltip2.style.opacity = "1";
52
+ tooltip2.style.zIndex = "999";
53
+ arrow.style.border = "5px solid transparent";
54
+ switch (props.position) {
55
+ case "top":
56
+ position.left = slotElement.value.children[0].offsetLeft - tooltip2.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
57
+ position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.offsetHeight;
58
+ arrow.style.top = `${tooltipcontent.offsetHeight}px`;
59
+ arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
60
+ arrow.style.borderTop = "5px solid rgb(70, 77, 110)";
61
+ break;
62
+ case "bottom":
63
+ position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
64
+ position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.offsetWidth / 2 - 5;
65
+ arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
66
+ arrow.style.top = "-10px";
67
+ arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
68
+ arrow.style.borderBottom = "5px solid rgb(70, 77, 110)";
69
+ break;
70
+ case "left":
71
+ position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
72
+ position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.offsetWidth;
73
+ arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
74
+ arrow.style.left = `${tooltipcontent.offsetWidth + 10}px`;
75
+ arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
76
+ arrow.style.borderLeft = "5px solid rgb(70, 77, 110)";
77
+ break;
78
+ case "right":
79
+ position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
80
+ position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
81
+ arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
82
+ arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
83
+ arrow.style.left = "-0px";
84
+ arrow.style.borderRight = "5px solid rgb(70, 77, 110)";
85
+ break;
86
+ }
87
+ tooltip2.style.top = position.top + 5 + "px";
88
+ tooltip2.style.left = position.left + "px";
89
+ }, props.mouseEnterDelay);
90
+ };
91
+ slotElement.value.children[0].onmouseleave = function() {
92
+ setTimeout(() => {
93
+ document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow"));
94
+ document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"));
95
+ }, props.mouseLeaveDelay);
96
+ };
135
97
  });
136
98
  onBeforeUnmount(() => {
137
- enterEvent.remove();
138
- leaveEvent.remove();
99
+ slotElement.value.children[0].onmouseenter = null;
100
+ slotElement.value.children[0].onmouseleave = null;
139
101
  });
140
102
  return () => {
141
103
  const defaultSlot = renderSlot(useSlots(), "default");
142
104
  return createVNode("div", {
143
- "class": "devui-tooltip"
105
+ "class": "devui-tooltip",
106
+ "id": "devui-tooltip"
144
107
  }, [createVNode("div", {
145
108
  "class": "slotElement",
146
109
  "ref": slotElement
147
- }, [defaultSlot]), createVNode("div", {
148
- "class": "tooltip",
149
- "ref": tooltip2
150
- }, [createVNode("div", {
151
- "class": "arrow",
152
- "ref": arrow
153
- }, null), createVNode("div", {
154
- "class": "tooltipcontent",
155
- "ref": tooltipcontent
156
- }, [props.content])])]);
110
+ }, [defaultSlot])]);
157
111
  };
158
112
  }
159
113
  });
package/tooltip/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const g={position:{type:String,default:"top"},showAnimation:{type:Boolean,default:!0},content:{type:String},mouseLeaveDelay:{type:String,default:"150"},mouseEnterDelay:{type:String,default:"100"}},h={listen:function(l,c,t){return l.addEventListener?(l.addEventListener(c,t,!1),{remove(){l.removeEventListener(l,t,!1)}}):(l.attchEvent(c,t),{remove(){l.detachEvent(c,t)}})}};var T="",r=e.defineComponent({name:"DTooltip",props:g,setup(l,c){const t=e.reactive({left:0,top:0}),u=e.ref(!1),o=e.ref(null),f=e.ref(null),i=e.ref(null),n=e.ref(null);let y,m;const p=(a,d)=>{i.value.style[a]=d},b=function(a,d=l.mouseEnterDelay){let v;if(parseInt(d)>=0)return function(){v&&clearTimeout(v),v=setTimeout(a,parseInt(d))};console.error("the value of delay is bigger than 0 and the type of delay must be string!")};return e.onMounted(()=>{u.value||(f.value.style.opacity="0"),y=h.listen(o.value.children[0],"mouseenter",b(function(){u.value=!0},l.mouseEnterDelay)),m=h.listen(o.value.children[0],"mouseleave",function(){u.value&&setTimeout(function(){u.value=!1},l.mouseLeaveDelay)})}),e.watch(u,function(a,d){if(a){switch(f.value.style.opacity="1",f.value.style.zIndex="999",i.value.style.border="5px solid transparent",l.position){case"top":t.left=o.value.children[0].offsetLeft-f.value.offsetWidth/2+o.value.children[0].offsetWidth/2-5,t.top=o.value.children[0].offsetTop-10-n.value.offsetHeight,p("borderTop","5px solid rgb(70, 77, 110)"),i.value.style.top=`${n.value.offsetHeight}px`,i.value.style.left=`${n.value.offsetWidth/2+5}px`;break;case"right":t.left=o.value.children[0].offsetLeft+o.value.children[0].offsetWidth,t.top=o.value.children[0].offsetTop+o.value.children[0].offsetHeight/2-n.value.offsetHeight/2,p("borderRight","5px solid rgb(70, 77, 110)"),i.value.style.top=`${n.value.offsetHeight/2-5}px`,i.value.style.left="-0px";break;case"bottom":t.top=o.value.children[0].offsetHeight+o.value.children[0].offsetTop+10,t.left=o.value.children[0].offsetLeft+o.value.children[0].offsetWidth/2-n.value.offsetWidth/2-5,p("borderBottom","5px solid rgb(70, 77, 110)"),i.value.style.top="-10px",i.value.style.left=`${n.value.offsetWidth/2+5}px`;break;case"left":t.top=o.value.children[0].offsetTop+o.value.children[0].offsetHeight/2-n.value.offsetHeight/2,t.left=o.value.children[0].offsetLeft-20-n.value.offsetWidth,p("borderLeft","5px solid rgb(70, 77, 110)"),i.value.style.left=`${n.value.offsetWidth+10}px`,i.value.style.top=`${n.value.offsetHeight/2-5}px`;break;default:console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");break}f.value.style.top=t.top+"px",f.value.style.left=t.left+"px"}else t.top=0,t.left=0,f.value.style.opacity="0"}),e.onBeforeUnmount(()=>{y.remove(),m.remove()}),()=>{const a=e.renderSlot(e.useSlots(),"default");return e.createVNode("div",{class:"devui-tooltip"},[e.createVNode("div",{class:"slotElement",ref:o},[a]),e.createVNode("div",{class:"tooltip",ref:f},[e.createVNode("div",{class:"arrow",ref:i},null),e.createVNode("div",{class:"tooltipcontent",ref:n},[l.content])])])}}});r.install=function(l){l.component(r.name,r)};var x={title:"Tooltip\u63D0\u793A",category:"\u53CD\u9988",status:"50%",install(l){l.use(r)}};s.Tooltip=r,s.default=x,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
1
+ (function(d,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(d=typeof globalThis!="undefined"?globalThis:d||self,i(d.index={},d.Vue))})(this,function(d,i){"use strict";const u={position:{type:String,default:"top"},showAnimation:{type:Boolean,default:!0},content:{type:String},mouseLeaveDelay:{type:String,default:"150"},mouseEnterDelay:{type:String,default:"100"}};var p="",f=i.defineComponent({name:"DTooltip",props:u,setup(s){const n=i.reactive({left:0,top:0}),r=(o,t)=>{document.getElementById("devui-arrow").style[o]=t},e=i.ref(null);return i.onMounted(()=>{e.value.children[0].onmouseenter=function(){const o=document.createElement("div"),t=document.createElement("div"),l=document.createElement("div");o.classList.add("tooltip"),t.classList.add("arrow"),l.classList.add("tooltipcontent"),t.id="devui-arrow",o.id="devui-tooltip1",setTimeout(()=>{switch(document.getElementById("devui-tooltip").appendChild(o),o.appendChild(t),o.appendChild(l),l.innerHTML=s.content,o.style.opacity="1",o.style.zIndex="999",t.style.border="5px solid transparent",s.position){case"top":n.left=e.value.children[0].offsetLeft-o.offsetWidth/2+e.value.children[0].offsetWidth/2-5,n.top=e.value.children[0].offsetTop-10-l.offsetHeight,t.style.top=`${l.offsetHeight}px`,t.style.left=`${l.offsetWidth/2+5}px`,t.style.borderTop="5px solid rgb(70, 77, 110)";break;case"bottom":n.top=e.value.children[0].offsetHeight+e.value.children[0].offsetTop+10,n.left=e.value.children[0].offsetLeft+e.value.children[0].offsetWidth/2-l.offsetWidth/2-5,r("borderBottom","5px solid rgb(70, 77, 110)"),t.style.top="-10px",t.style.left=`${l.offsetWidth/2+5}px`,t.style.borderBottom="5px solid rgb(70, 77, 110)";break;case"left":n.top=e.value.children[0].offsetTop+e.value.children[0].offsetHeight/2-l.offsetHeight/2,n.left=e.value.children[0].offsetLeft-20-l.offsetWidth,r("borderLeft","5px solid rgb(70, 77, 110)"),t.style.left=`${l.offsetWidth+10}px`,t.style.top=`${l.offsetHeight/2-5}px`,t.style.borderLeft="5px solid rgb(70, 77, 110)";break;case"right":n.left=e.value.children[0].offsetLeft+e.value.children[0].offsetWidth,n.top=e.value.children[0].offsetTop+e.value.children[0].offsetHeight/2-l.offsetHeight/2,r("borderRight","5px solid rgb(70, 77, 110)"),t.style.top=`${l.offsetHeight/2-5}px`,t.style.left="-0px",t.style.borderRight="5px solid rgb(70, 77, 110)";break}o.style.top=n.top+5+"px",o.style.left=n.left+"px"},s.mouseEnterDelay)},e.value.children[0].onmouseleave=function(){setTimeout(()=>{document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow")),document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"))},s.mouseLeaveDelay)}}),i.onBeforeUnmount(()=>{e.value.children[0].onmouseenter=null,e.value.children[0].onmouseleave=null}),()=>{const o=i.renderSlot(i.useSlots(),"default");return i.createVNode("div",{class:"devui-tooltip",id:"devui-tooltip"},[i.createVNode("div",{class:"slotElement",ref:e},[o])])}}});f.install=function(s){s.component(f.name,f)};var a={title:"Tooltip\u63D0\u793A",category:"\u53CD\u9988",status:"50%",install(s){s.use(f)}};d.Tooltip=f,d.default=a,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
package/transfer/index.es.js CHANGED
@@ -1061,140 +1061,94 @@ const tooltipProps = {
1061
1061
  default: "100"
1062
1062
  }
1063
1063
  };
1064
- const EventListener = {
1065
- listen: function(target, eventType, callback) {
1066
- if (target.addEventListener) {
1067
- target.addEventListener(eventType, callback, false);
1068
- return {
1069
- remove() {
1070
- target.removeEventListener(target, callback, false);
1071
- }
1072
- };
1073
- } else {
1074
- target.attchEvent(eventType, callback);
1075
- return {
1076
- remove() {
1077
- target.detachEvent(eventType, callback);
1078
- }
1079
- };
1080
- }
1081
- }
1082
- };
1083
1064
  var tooltip = "";
1084
1065
  var DTooltip = defineComponent({
1085
1066
  name: "DTooltip",
1086
1067
  props: tooltipProps,
1087
- setup(props, ctx) {
1068
+ setup(props) {
1088
1069
  const position = reactive({
1089
1070
  left: 0,
1090
1071
  top: 0
1091
1072
  });
1092
- const show = ref(false);
1093
- const slotElement = ref(null);
1094
- const tooltip2 = ref(null);
1095
- const arrow = ref(null);
1096
- const tooltipcontent = ref(null);
1097
- let enterEvent;
1098
- let leaveEvent;
1099
1073
  const arrowStyle = (attr, value) => {
1100
- arrow.value.style[attr] = value;
1101
- };
1102
- const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
1103
- let start;
1104
- if (parseInt(delay) >= 0) {
1105
- return function() {
1106
- if (start) {
1107
- clearTimeout(start);
1108
- }
1109
- start = setTimeout(fn, parseInt(delay));
1110
- };
1111
- } else {
1112
- console.error("the value of delay is bigger than 0 and the type of delay must be string!");
1113
- return;
1114
- }
1074
+ document.getElementById("devui-arrow").style[attr] = value;
1115
1075
  };
1076
+ const slotElement = ref(null);
1116
1077
  onMounted(() => {
1117
- if (!show.value) {
1118
- tooltip2.value.style.opacity = "0";
1119
- }
1120
- enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
1121
- show.value = true;
1122
- }, props.mouseEnterDelay));
1123
- leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
1124
- if (show.value) {
1125
- setTimeout(function() {
1126
- show.value = false;
1127
- }, props.mouseLeaveDelay);
1128
- }
1129
- });
1130
- });
1131
- watch(show, function(newValue, oldValue) {
1132
- if (newValue) {
1133
- tooltip2.value.style.opacity = "1";
1134
- tooltip2.value.style.zIndex = "999";
1135
- arrow.value.style.border = "5px solid transparent";
1136
- switch (props.position) {
1137
- case "top":
1138
- position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
1139
- position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
1140
- arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
1141
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
1142
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
1143
- break;
1144
- case "right":
1145
- position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
1146
- position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
1147
- arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
1148
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
1149
- arrow.value.style.left = "-0px";
1150
- break;
1151
- case "bottom":
1152
- position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
1153
- position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
1154
- arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
1155
- arrow.value.style.top = "-10px";
1156
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
1157
- break;
1158
- case "left":
1159
- position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
1160
- position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
1161
- arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
1162
- arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
1163
- arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
1164
- break;
1165
- default:
1166
- console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
1167
- break;
1168
- }
1169
- tooltip2.value.style.top = position.top + "px";
1170
- tooltip2.value.style.left = position.left + "px";
1171
- } else {
1172
- position.top = 0;
1173
- position.left = 0;
1174
- tooltip2.value.style.opacity = "0";
1175
- }
1078
+ slotElement.value.children[0].onmouseenter = function() {
1079
+ const tooltip2 = document.createElement("div");
1080
+ const arrow = document.createElement("div");
1081
+ const tooltipcontent = document.createElement("div");
1082
+ tooltip2.classList.add("tooltip");
1083
+ arrow.classList.add("arrow");
1084
+ tooltipcontent.classList.add("tooltipcontent");
1085
+ arrow.id = "devui-arrow";
1086
+ tooltip2.id = "devui-tooltip1";
1087
+ setTimeout(() => {
1088
+ document.getElementById("devui-tooltip").appendChild(tooltip2);
1089
+ tooltip2.appendChild(arrow);
1090
+ tooltip2.appendChild(tooltipcontent);
1091
+ tooltipcontent.innerHTML = props.content;
1092
+ tooltip2.style.opacity = "1";
1093
+ tooltip2.style.zIndex = "999";
1094
+ arrow.style.border = "5px solid transparent";
1095
+ switch (props.position) {
1096
+ case "top":
1097
+ position.left = slotElement.value.children[0].offsetLeft - tooltip2.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
1098
+ position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.offsetHeight;
1099
+ arrow.style.top = `${tooltipcontent.offsetHeight}px`;
1100
+ arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
1101
+ arrow.style.borderTop = "5px solid rgb(70, 77, 110)";
1102
+ break;
1103
+ case "bottom":
1104
+ position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
1105
+ position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.offsetWidth / 2 - 5;
1106
+ arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
1107
+ arrow.style.top = "-10px";
1108
+ arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
1109
+ arrow.style.borderBottom = "5px solid rgb(70, 77, 110)";
1110
+ break;
1111
+ case "left":
1112
+ position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
1113
+ position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.offsetWidth;
1114
+ arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
1115
+ arrow.style.left = `${tooltipcontent.offsetWidth + 10}px`;
1116
+ arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
1117
+ arrow.style.borderLeft = "5px solid rgb(70, 77, 110)";
1118
+ break;
1119
+ case "right":
1120
+ position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
1121
+ position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
1122
+ arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
1123
+ arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
1124
+ arrow.style.left = "-0px";
1125
+ arrow.style.borderRight = "5px solid rgb(70, 77, 110)";
1126
+ break;
1127
+ }
1128
+ tooltip2.style.top = position.top + 5 + "px";
1129
+ tooltip2.style.left = position.left + "px";
1130
+ }, props.mouseEnterDelay);
1131
+ };
1132
+ slotElement.value.children[0].onmouseleave = function() {
1133
+ setTimeout(() => {
1134
+ document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow"));
1135
+ document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"));
1136
+ }, props.mouseLeaveDelay);
1137
+ };
1176
1138
  });
1177
1139
  onBeforeUnmount(() => {
1178
- enterEvent.remove();
1179
- leaveEvent.remove();
1140
+ slotElement.value.children[0].onmouseenter = null;
1141
+ slotElement.value.children[0].onmouseleave = null;
1180
1142
  });
1181
1143
  return () => {
1182
1144
  const defaultSlot = renderSlot(useSlots(), "default");
1183
1145
  return createVNode("div", {
1184
- "class": "devui-tooltip"
1146
+ "class": "devui-tooltip",
1147
+ "id": "devui-tooltip"
1185
1148
  }, [createVNode("div", {
1186
1149
  "class": "slotElement",
1187
1150
  "ref": slotElement
1188
- }, [defaultSlot]), createVNode("div", {
1189
- "class": "tooltip",
1190
- "ref": tooltip2
1191
- }, [createVNode("div", {
1192
- "class": "arrow",
1193
- "ref": arrow
1194
- }, null), createVNode("div", {
1195
- "class": "tooltipcontent",
1196
- "ref": tooltipcontent
1197
- }, [props.content])])]);
1151
+ }, [defaultSlot])]);
1198
1152
  };
1199
1153
  }
1200
1154
  });