vue-devui 1.0.0-beta.18 → 1.0.0-beta.19

package/color-picker/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { ref, watch, defineComponent, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject, getCurrentInstance, computed, nextTick, resolveComponent, readonly, unref, Teleport, Transition } from "vue";
+import { ref, watch, defineComponent, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject, getCurrentInstance, computed, toRefs, nextTick, resolveComponent, readonly, unref, Teleport, Transition } from "vue";
 function colorPickerResize(colorCubeRef, top, left) {
   var _a;
   const rect = (_a = colorCubeRef.value) == null ? void 0 : _a.getBoundingClientRect();
@@ -135,7 +135,7 @@ var Tabs = defineComponent({
       default: null
     }
   },
-  emits: ["update:modelValue", "activeTabChange"],
+  emits: ["update:modelValue", "active-tab-change"],
   setup(props, {
     emit,
     slots
@@ -163,7 +163,6 @@ var Tabs = defineComponent({
           if (result.then) {
             changeResult = result;
           } else {
-            console.log(result);
             changeResult = Promise.resolve(result);
           }
         }
@@ -186,7 +185,7 @@ var Tabs = defineComponent({
             this.offsetLeft = tabEl.getBoundingClientRect().left - this.tabsEle.nativeElement.getBoundingClientRect().left;
             this.offsetWidth = tabEl.getBoundingClientRect().width;
           }
-          emit("activeTabChange", tab.id);
+          emit("active-tab-change", tab.id);
         }
       });
     };
@@ -263,7 +262,7 @@ var Tab = defineComponent({
     slots
   }) {
     const tabs2 = inject("tabs");
-    tabs2.state.slots.push(slots.dTabTitle);
+    tabs2.state.slots.push(slots.title);
     tabs2.state.data.push(props);
     return () => {
       const {
@@ -318,8 +317,9 @@ class DOMUtils {
     };
     const downFn = (event) => {
       var _a;
-      if (isDragging)
+      if (isDragging) {
         return;
+      }
       document.onselectstart = () => false;
       document.ondragstart = () => false;
       DOMUtils.addEventListener(document, "mousemove", moveFn);
@@ -440,16 +440,16 @@ class DOMUtils {
     if (event.clientX > originX && event.clientY > originY) {
       angle = 180 - angle;
     }
-    if (event.clientX == originX && event.clientY > originY) {
+    if (event.clientX === originX && event.clientY > originY) {
       angle = 180;
     }
-    if (event.clientX > originX && event.clientY == originY) {
+    if (event.clientX > originX && event.clientY === originY) {
       angle = 90;
     }
     if (event.clientX < originX && event.clientY > originY) {
       angle = 180 + angle;
     }
-    if (event.clientX < originX && event.clientY == originY) {
+    if (event.clientX < originX && event.clientY === originY) {
       angle = 270;
     }
     if (event.clientX < originX && event.clientY < originY) {
@@ -496,8 +496,9 @@ function HSVAtoRGBA(hsva) {
   return { r: rgb[0], g: rgb[1], b: rgb[2], a };
 }
 function RGBAtoHSVA(rgba) {
-  if (!rgba)
+  if (!rgba) {
     return { h: 0, s: 1, v: 1, a: 1 };
+  }
   const r = rgba.r / 255;
   const g = rgba.g / 255;
   const b = rgba.b / 255;
@@ -513,8 +514,9 @@ function RGBAtoHSVA(rgba) {
       h = 60 * (4 + (r - g) / (max - min));
     }
   }
-  if (h < 0)
+  if (h < 0) {
     h = h + 360;
+  }
   const s = max === 0 ? 0 : (max - min) / max;
   const hsv = [h, s, max];
   return { h: Math.round(hsv[0]), s: hsv[1], v: hsv[2], a: rgba.a };
@@ -640,8 +642,9 @@ function fromHex(hex2) {
   return fromHexa(parseHex(hex2));
 }
 function parseColor(color2, oldColor) {
-  if (!color2)
+  if (!color2) {
     return fromRGBA({ r: 0, g: 0, b: 0, a: 1 });
+  }
   if (typeof color2 === "string") {
     if (color2.indexOf("#") !== -1)
       ;
@@ -673,8 +676,9 @@ function parseColor(color2, oldColor) {
       }
       return fromHSVA({ h: parts[0], s: parts[1], v: parts[2], a: alpha });
     }
-    if (color2 === "transparent")
+    if (color2 === "transparent") {
       return fromHexa("#00000000");
+    }
     const hex2 = parseHex(color2);
     if (oldColor && hex2 === oldColor.hexa) {
       return oldColor;
@@ -683,24 +687,28 @@ function parseColor(color2, oldColor) {
     }
   }
   if (typeof color2 === "object") {
-    if (color2.hasOwnProperty("alpha"))
+    if (color2.hasOwnProperty("alpha")) {
       return color2;
+    }
     const a = color2.hasOwnProperty("a") ? parseFloat(color2.a) : 1;
     if (has(color2, ["r", "g", "b"])) {
-      if (oldColor && color2 === oldColor.rgba)
+      if (oldColor && color2 === oldColor.rgba) {
         return oldColor;
-      else
+      } else {
         return fromRGBA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "l"])) {
-      if (oldColor && color2 === oldColor.hsla)
+      if (oldColor && color2 === oldColor.hsla) {
         return oldColor;
-      else
+      } else {
         return fromHSLA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "v"])) {
-      if (oldColor && color2 === oldColor.hsva)
+      if (oldColor && color2 === oldColor.hsva) {
         return oldColor;
-      else
+      } else {
         return fromHSVA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     }
   }
   return fromRGBA({ r: 255, g: 0, b: 0, a: 1 });
@@ -721,8 +729,9 @@ function extractColor(color2, input, mode, showAlpha) {
   const blue = keepDecimal(color2.rgba.b);
   const hsvSaturation = keepDecimal(color2.hsva.s, 2);
   const value = keepDecimal(color2.hsva.v, 2);
-  if (input == null)
+  if (input == null) {
     return color2;
+  }
   function isShowAlpha(mode2) {
     return showAlpha ? mode2 + "a" : mode2;
   }
@@ -740,12 +749,13 @@ function extractColor(color2, input, mode, showAlpha) {
   }
   if (typeof input === "object") {
     const shouldStrip = typeof input.a === "number" && input.a === 0 ? !!input.a : !input.a;
-    if (has(input, ["r", "g", "b"]))
+    if (has(input, ["r", "g", "b"])) {
       return stripAlpha(color2.rgba, shouldStrip);
-    else if (has(input, ["h", "s", "l"]))
+    } else if (has(input, ["h", "s", "l"])) {
       return stripAlpha(color2.hsla, shouldStrip);
-    else if (has(input, ["h", "s", "v"]))
+    } else if (has(input, ["h", "s", "v"])) {
       return stripAlpha(color2.hsva, shouldStrip);
+    }
   }
 }
 const colorPickerPaletteProps = {
@@ -804,20 +814,6 @@ var colorPalette = defineComponent({
       canvas.fillStyle = valueGradient;
       canvas.fillRect(0, 0, parentWidth, props.height);
     }
-    function clickPalette(event) {
-      const target = event.target;
-      if (target !== paletteElement.value) {
-        handleDrag(event);
-      }
-    }
-    function updatePosition() {
-      var _a, _b;
-      if (paletteInstance) {
-        const parentWidth = paletteElement.value.offsetWidth;
-        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
-        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
-      }
-    }
     function handleDrag(event) {
       const parentWidth = paletteElement.value.offsetWidth;
       if (paletteInstance) {
@@ -845,6 +841,20 @@ var colorPalette = defineComponent({
         ctx.emit("changeTextColor", isChangeTextColor.value);
       }
     }
+    function clickPalette(event) {
+      const target = event.target;
+      if (target !== paletteElement.value) {
+        handleDrag(event);
+      }
+    }
+    function updatePosition() {
+      var _a, _b;
+      if (paletteInstance) {
+        const parentWidth = paletteElement.value.offsetWidth;
+        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
+        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
+      }
+    }
     onMounted(() => {
       renderCanvas();
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
@@ -930,12 +940,6 @@ var colorHueSlider = defineComponent({
         top: 0
       }, clickTransfrom.value);
     });
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -953,6 +957,12 @@ var colorHueSlider = defineComponent({
         }));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
@@ -1017,12 +1027,6 @@ var colorAlphaSlider = defineComponent({
     const clickTransfrom = ref(DEFAULT_TRANSITION);
     const barElement = ref(null);
     const cursorElement = ref(null);
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -1037,6 +1041,12 @@ var colorAlphaSlider = defineComponent({
         })));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     const getBackgroundStyle = computed(() => {
       return {
         background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})`
@@ -2445,55 +2455,53 @@ const colorPickerHistoryProps = {
     type: Object
   }
 };
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
 var Icon = defineComponent({
   name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
+  props: iconProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
     const {
       name,
       size,
       color: color2,
       classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color: color2
-      }
-    }, null);
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color2.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var colorHistory$1 = "";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };