@havue/components 1.1.1 → 1.2.0

package/dist/components.mjs

@@ -1,3 +1,167 @@
+import './style.css';
 export * from "@havue/color-picker";
 export * from "@havue/drag-and-drop";
 export * from "@havue/drag-and-scale";
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, createCommentVNode } from "vue";
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values({})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  return main;
+};
+function getValidIPItemValue(val) {
+  const num = parseInt(val + "");
+  return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
+}
+function getRange(el) {
+  const ret = {
+    begin: null,
+    end: null,
+    result: null
+  };
+  ret.begin = el.selectionStart || 0;
+  ret.end = el.selectionEnd || 0;
+  ret.result = el.value.substring(ret.begin, ret.end);
+  el.focus();
+  return ret;
+}
+const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "HvIpInput"
+  },
+  __name: "IpInput",
+  props: {
+    modelValue: { default: "..." },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const inputRefs = ref([]);
+    const values = ref([]);
+    watch(
+      () => props.modelValue,
+      (value) => {
+        value = value + "";
+        const strs = value.split(".");
+        values.value = Array(4).fill("").map((_, i) => {
+          return getValidIPItemValue(strs[i] + "");
+        });
+      },
+      {
+        immediate: true
+      }
+    );
+    function onIPChange() {
+      const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
+      return emits("update:model-value", ip);
+    }
+    function handleChange(e, i) {
+      var _a;
+      if (props.disabled) {
+        return;
+      }
+      const curValue = e.target.value;
+      const num = getValidIPItemValue(curValue);
+      values.value[i] = num;
+      e.target.value = num;
+      onIPChange();
+      if (num === "") {
+        return e.preventDefault();
+      }
+      if (String(num).length === 3 && i < 3) {
+        (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
+      }
+    }
+    function handleKeyDown(e, i) {
+      let domId = i;
+      const { end } = getRange(e.target);
+      switch (e.keyCode) {
+        case 37:
+        case 8: {
+          if (end === 0 && i > 0) {
+            domId = i - 1;
+          }
+          break;
+        }
+        case 39: {
+          if (end === e.target.value.length && i < 3) {
+            domId = i + 1;
+          }
+          break;
+        }
+        case 110:
+        case 190: {
+          e.preventDefault();
+          if (i < 3) {
+            domId = i + 1;
+          }
+          break;
+        }
+      }
+      const inputEl = inputRefs.value[domId];
+      inputEl.focus();
+      if (domId < i) {
+        const len = inputEl.value.length;
+        inputEl.selectionStart = inputEl.selectionEnd = len;
+      } else if (domId > i) {
+        inputEl.selectionStart = inputEl.selectionEnd = 0;
+      }
+    }
+    function handlePaste(e, i) {
+      if (!e.clipboardData || !e.clipboardData.getData) {
+        return;
+      }
+      const pasteData = e.clipboardData.getData("text/plain");
+      if (!pasteData) {
+        return;
+      }
+      const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
+      if (value.length !== 4 - i) {
+        return;
+      }
+      if (!value.every((item) => item !== "")) {
+        return;
+      }
+      value.forEach((val, j) => {
+        values.value[i + j] = val + "";
+      });
+      onIPChange();
+      return e.preventDefault();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (value, i) => {
+          return openBlock(), createElementBlock("div", {
+            class: "hv-ip-input-item",
+            key: i
+          }, [
+            createElementVNode("input", {
+              ref_for: true,
+              ref_key: "inputRefs",
+              ref: inputRefs,
+              type: "text",
+              value,
+              disabled: props.disabled,
+              onInput: (e) => handleChange(e, i),
+              onKeydown: (e) => handleKeyDown(e, i),
+              onPaste: (e) => handlePaste(e, i)
+            }, null, 40, _hoisted_1),
+            i !== 3 ? (openBlock(), createElementBlock("i", _hoisted_2, ".")) : createCommentVNode("", true)
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const HvIpInput = withInstall(_sfc_main);
+export {
+  HvIpInput
+};

package/dist/components.umd.js

@@ -1,7 +1,167 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@havue/color-picker"), require("@havue/drag-and-drop"), require("@havue/drag-and-scale")) : typeof define === "function" && define.amd ? define(["exports", "@havue/color-picker", "@havue/drag-and-drop", "@havue/drag-and-scale"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.components = {}, global.colorPicker, global.dragAndDrop, global.dragAndScale));
-})(this, function(exports2, colorPicker, dragAndDrop, dragAndScale) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@havue/color-picker"), require("@havue/drag-and-drop"), require("@havue/drag-and-scale"), require("vue")) : typeof define === "function" && define.amd ? define(["exports", "@havue/color-picker", "@havue/drag-and-drop", "@havue/drag-and-scale", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.components = {}, global.colorPicker, global.dragAndDrop, global.dragAndScale, global.Vue));
+})(this, function(exports2, colorPicker, dragAndDrop, dragAndScale, vue) {
   "use strict";
+  const withInstall = (main, extra) => {
+    main.install = (app) => {
+      for (const comp of [main, ...Object.values({})]) {
+        app.component(comp.name, comp);
+      }
+    };
+    return main;
+  };
+  function getValidIPItemValue(val) {
+    const num = parseInt(val + "");
+    return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
+  }
+  function getRange(el) {
+    const ret = {
+      begin: null,
+      end: null,
+      result: null
+    };
+    ret.begin = el.selectionStart || 0;
+    ret.end = el.selectionEnd || 0;
+    ret.result = el.value.substring(ret.begin, ret.end);
+    el.focus();
+    return ret;
+  }
+  const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
+  const _hoisted_2 = { key: 0 };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvIpInput"
+    },
+    __name: "IpInput",
+    props: {
+      modelValue: { default: "..." },
+      disabled: { type: Boolean, default: false }
+    },
+    emits: ["update:model-value"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const inputRefs = vue.ref([]);
+      const values = vue.ref([]);
+      vue.watch(
+        () => props.modelValue,
+        (value) => {
+          value = value + "";
+          const strs = value.split(".");
+          values.value = Array(4).fill("").map((_, i) => {
+            return getValidIPItemValue(strs[i] + "");
+          });
+        },
+        {
+          immediate: true
+        }
+      );
+      function onIPChange() {
+        const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
+        return emits("update:model-value", ip);
+      }
+      function handleChange(e, i) {
+        var _a;
+        if (props.disabled) {
+          return;
+        }
+        const curValue = e.target.value;
+        const num = getValidIPItemValue(curValue);
+        values.value[i] = num;
+        e.target.value = num;
+        onIPChange();
+        if (num === "") {
+          return e.preventDefault();
+        }
+        if (String(num).length === 3 && i < 3) {
+          (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
+        }
+      }
+      function handleKeyDown(e, i) {
+        let domId = i;
+        const { end } = getRange(e.target);
+        switch (e.keyCode) {
+          case 37:
+          case 8: {
+            if (end === 0 && i > 0) {
+              domId = i - 1;
+            }
+            break;
+          }
+          case 39: {
+            if (end === e.target.value.length && i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+          case 110:
+          case 190: {
+            e.preventDefault();
+            if (i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+        }
+        const inputEl = inputRefs.value[domId];
+        inputEl.focus();
+        if (domId < i) {
+          const len = inputEl.value.length;
+          inputEl.selectionStart = inputEl.selectionEnd = len;
+        } else if (domId > i) {
+          inputEl.selectionStart = inputEl.selectionEnd = 0;
+        }
+      }
+      function handlePaste(e, i) {
+        if (!e.clipboardData || !e.clipboardData.getData) {
+          return;
+        }
+        const pasteData = e.clipboardData.getData("text/plain");
+        if (!pasteData) {
+          return;
+        }
+        const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
+        if (value.length !== 4 - i) {
+          return;
+        }
+        if (!value.every((item) => item !== "")) {
+          return;
+        }
+        value.forEach((val, j) => {
+          values.value[i + j] = val + "";
+        });
+        onIPChange();
+        return e.preventDefault();
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(values.value, (value, i) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: "hv-ip-input-item",
+              key: i
+            }, [
+              vue.createElementVNode("input", {
+                ref_for: true,
+                ref_key: "inputRefs",
+                ref: inputRefs,
+                type: "text",
+                value,
+                disabled: props.disabled,
+                onInput: (e) => handleChange(e, i),
+                onKeydown: (e) => handleKeyDown(e, i),
+                onPaste: (e) => handlePaste(e, i)
+              }, null, 40, _hoisted_1),
+              i !== 3 ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_2, ".")) : vue.createCommentVNode("", true)
+            ]);
+          }), 128))
+        ], 2);
+      };
+    }
+  });
+  const HvIpInput = withInstall(_sfc_main);
+  exports2.HvIpInput = HvIpInput;
   Object.keys(colorPicker).forEach((k) => {
     if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
       enumerable: true,

package/dist/style.css

@@ -1 +1 @@
-.hv-color-picker__color-form{width:100%;overflow:hidden}.hv-color-picker__color-form .mb-12{margin-bottom:12px}.hv-color-picker__color-form .el-input{--el-input-border-color: #30343b}.hv-color-picker__color-form .el-input .el-input__wrapper{padding-right:10px;padding-left:10px;background-color:#101114;border-radius:2px}.hv-color-picker__color-form .el-input .el-input__wrapper .el-input__inner{text-align:left}.hv-color-picker__color-form .hv-color-picker__form-group{display:flex;align-items:center}.hv-color-picker__color-form .hv-color-picker__form-group .hv-color-picker__form-label{width:72px}.hv-color-picker__color-form .hv-color-picker__form-group .el-input{flex:1}.hv-color-picker__preset .hv-color-picker__preset-title{margin-bottom:4px;font-size:12px;color:#fff}.hv-color-picker__preset .hv-color-picker__preset-list{display:flex;flex-wrap:wrap;justify-content:space-between}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item{width:16px;height:16px;margin-right:calc((100% - 160px) / 9);margin-bottom:4px;border-radius:50%}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item:nth-child(10n){margin-right:0}.hv-color-picker{box-sizing:border-box;width:264px;padding:12px;font-size:12px;color:#fff;background-color:#212326;border:1px solid #353d46;border-radius:4px;box-shadow:0 12px 24px #00000080}.hv-color-picker .hv-color-picker__title{margin-bottom:12px;font-weight:700}.hv-color-picker .hv-color-picker__area-outer{width:auto;border:5px solid #000;border-radius:3px}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area{position:relative;width:auto;height:168px;overflow:hidden;background-color:#000}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area canvas{width:100%;height:100%}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area .hv-color-picker__circle{position:absolute;box-sizing:border-box;width:18px;height:18px;border:3px solid #dcdcdc;border-radius:50%;box-shadow:0 2px 4px -1px #0000001f,0 4px 5px #00000014,0 1px 10px #0000000d;transform:translate(-50%,-50%)}.hv-color-picker .hv-color-picker__slider{position:relative;display:flex;align-items:center;justify-content:space-between}.hv-color-picker .hv-color-picker__slider .hv-color-picker__origin-color{width:18px;height:18px;margin-left:12px;border-radius:2px}.hv-color-picker .el-slider{box-sizing:border-box}.hv-color-picker .el-slider .el-slider__runway{width:210px;height:8px;background:var(--el-slider-runway-bg-color)}.hv-color-picker .el-slider .el-slider__runway .el-slider__bar{background-color:transparent}.hv-color-picker .el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button{box-sizing:border-box;width:18px;height:18px;background-color:var(--el-slider-main-bg-color);border-color:#fff;border-width:3px}.hv-draggable[data-v-1d116395]{width:fit-content;cursor:grab}.hv-draggable.disabled[data-v-1d116395]{cursor:not-allowed}.hv-draggable__clone-item[data-v-1d116395]{position:fixed;top:0;left:0;z-index:99999;width:fit-content;cursor:grabbing;opacity:.8;will-change:transform}.hv-droppable{position:relative;width:fit-content}.hv-drag-and-scale{--drag-box-border-width: 1px;--scale-area-width: 30px;--scale-mark-gap: 2px;--scale-mark-width: 3px;--scale-mark-inset: calc(0px - (var(--scale-mark-width) + var(--scale-mark-gap) + var(--drag-box-border-width)));--scale-mark-line-width: calc(var(--scale-area-width) / 2);--scale-area-inset: calc(0px - var(--scale-area-width) / 2 + var(--scale-mark-width) + var(--scale-mark-gap));position:relative;box-sizing:border-box;border:var(--drag-box-border-width) dashed #fff}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark{position:absolute;inset:var(--scale-mark-inset);background:linear-gradient(to right,#fff,#fff) left top no-repeat,linear-gradient(to right,#fff,#fff) right top no-repeat,linear-gradient(to right,#fff,#fff) center top no-repeat,linear-gradient(to right,#fff,#fff) left bottom no-repeat,linear-gradient(to right,#fff,#fff) right bottom no-repeat,linear-gradient(to right,#fff,#fff) center bottom no-repeat,linear-gradient(to bottom,#fff,#fff) left top no-repeat,linear-gradient(to bottom,#fff,#fff) left bottom no-repeat,linear-gradient(to bottom,#fff,#fff) left center no-repeat,linear-gradient(to bottom,#fff,#fff) right top no-repeat,linear-gradient(to bottom,#fff,#fff) right bottom no-repeat,linear-gradient(to bottom,#fff,#fff) right center no-repeat;background-size:var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-line-width) var(--scale-mark-width),var(--scale-mark-width) var(--scale-mark-line-width),var(--scale-mark-width) var(--scale-mark-line-width),var(--scale-mark-width) var(--scale-mark-line-width),var(--scale-mark-width) var(--scale-mark-line-width),var(--scale-mark-width) var(--scale-mark-line-width),var(--scale-mark-width) var(--scale-mark-line-width)}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box{position:absolute;inset:var(--scale-area-inset);box-sizing:border-box;display:flex;flex-direction:column}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block{box-sizing:border-box;display:flex;width:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-right{box-sizing:border-box;width:var(--scale-area-width);max-width:33.3333%;height:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-center{box-sizing:border-box;flex:1;height:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box.disabled .hv-drag-and-scale__area-block *{cursor:not-allowed!important}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle{flex:1}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-right{height:100%;cursor:ew-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-center{flex:1;height:100%;cursor:move}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-right{cursor:nw-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-right,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-left{cursor:ne-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom{box-sizing:border-box;height:var(--scale-area-width);max-height:33.3333%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-center,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-center{cursor:ns-resize}
+.hv-color-picker__color-form{width:100%;overflow:hidden}.hv-color-picker__color-form .mb-12{margin-bottom:12px}.hv-color-picker__color-form .el-input{--el-input-border-color: #30343b}.hv-color-picker__color-form .el-input .el-input__wrapper{padding-right:10px;padding-left:10px;background-color:#101114;border-radius:2px}.hv-color-picker__color-form .el-input .el-input__wrapper .el-input__inner{text-align:left}.hv-color-picker__color-form .hv-color-picker__form-group{display:flex;align-items:center}.hv-color-picker__color-form .hv-color-picker__form-group .hv-color-picker__form-label{width:72px}.hv-color-picker__color-form .hv-color-picker__form-group .el-input{flex:1}.hv-color-picker__preset .hv-color-picker__preset-title{margin-bottom:4px;font-size:12px;color:#fff}.hv-color-picker__preset .hv-color-picker__preset-list{display:flex;flex-wrap:wrap;justify-content:space-between}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item{width:16px;height:16px;margin-right:calc((100% - 160px) / 9);margin-bottom:4px;border-radius:50%}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item:nth-child(10n){margin-right:0}.hv-color-picker{box-sizing:border-box;width:264px;padding:12px;font-size:12px;color:#fff;background-color:#212326;border:1px solid #353d46;border-radius:4px;box-shadow:0 12px 24px #00000080}.hv-color-picker .hv-color-picker__title{margin-bottom:12px;font-weight:700}.hv-color-picker .hv-color-picker__area-outer{width:auto;border:5px solid #000;border-radius:3px}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area{position:relative;width:auto;height:168px;overflow:hidden;background-color:#000}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area.is-disabled{cursor:not-allowed}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area canvas{width:100%;height:100%}.hv-color-picker .hv-color-picker__area-outer .hv-color-picker__area .hv-color-picker__circle{position:absolute;box-sizing:border-box;width:18px;height:18px;border:3px solid #dcdcdc;border-radius:50%;box-shadow:0 2px 4px -1px #0000001f,0 4px 5px #00000014,0 1px 10px #0000000d;transform:translate(-50%,-50%)}.hv-color-picker .hv-color-picker__slider{position:relative;display:flex;align-items:center;justify-content:space-between}.hv-color-picker .hv-color-picker__slider .hv-color-picker__origin-color{width:18px;height:18px;margin-left:12px;border-radius:2px}.hv-color-picker .el-slider{box-sizing:border-box}.hv-color-picker .el-slider .el-slider__runway{width:210px;height:8px;background:var(--el-slider-runway-bg-color)}.hv-color-picker .el-slider .el-slider__runway .el-slider__bar{background-color:transparent}.hv-color-picker .el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button{box-sizing:border-box;width:18px;height:18px;background-color:var(--el-slider-main-bg-color);border-color:#fff;border-width:3px}.hv-color-picker__color-area-outer[data-v-d4f5b081]{position:relative;width:216px;height:216px}.hv-color-picker__color-area-outer .hv-color-picker__color-area[data-v-d4f5b081]{width:100%;height:100%}.hv-color-picker__color-area-outer .hv-color-picker__color-area[data-v-d4f5b081]:before{position:absolute;right:0;left:0;width:100%;height:100%;pointer-events:none;content:"";background:linear-gradient(to right,#fff 1px,transparent 215px)}.hv-color-picker__color-area-outer .hv-color-picker__color-area[data-v-d4f5b081]:after{position:absolute;right:0;left:0;width:100%;height:100%;pointer-events:none;content:"";background:linear-gradient(to bottom,transparent 1px,#000 215px)}.hv-color-picker__color-area-outer .hv-color-picker__color-area .hv-color-picker__circle[data-v-d4f5b081]{position:absolute;z-index:1;box-sizing:border-box;width:12px;height:12px;pointer-events:none;border:2px solid #fff;border-radius:100%;box-shadow:0 0 0 1px #0003;transform:translate(-50%,50%)}.el-select__popper.el-popper.hv-color-picker-popper{--el-bg-color-overlay: #131519;--el-border-color: #3c4452;--el-fill-color-light: #0977e5;--el-border-color-light: #565d6b}.el-select__popper.el-popper.hv-color-picker-popper .el-select-dropdown__item{color:#a8b0c1}.hv-color_picker__form[data-v-855a2e17]{display:flex;gap:6px;margin-top:6px;--el-fill-color-blank: #131519;--el-border-color: #3c4452}.hv-color_picker__form .hv-color-picker__form-type[data-v-855a2e17] .el-select{--el-select-width: 60px}.hv-color_picker__form .hv-color-picker__form-type[data-v-855a2e17] .el-select .el-select__wrapper{padding:6px}.hv-color_picker__form .hv-color-picker__form-type[data-v-855a2e17] .el-select .el-select__wrapper .el-select__placeholder{width:fit-content;text-overflow:inherit;color:#c2c6cc}.hv-color_picker__form .hv-color-picker__form-body[data-v-855a2e17]{display:flex}.hv-color_picker__form .hv-color-picker__form-body[data-v-855a2e17] .el-input-number{--el-text-color-regular: #c2c6cc;flex:1;width:23%}.hv-color_picker__form .hv-color-picker__form-body[data-v-855a2e17] .el-input-number:last-child{width:31%}.hv-color_picker__form .hv-color-picker__form-body[data-v-855a2e17] .el-input-number .el-input__wrapper{padding:0 4px}.hv-color_picker__form .hv-color-picker__form-body[data-v-855a2e17] .el-input-number .el-input__wrapper .el-input__suffix .el-input__suffix-inner span{margin-left:0}.hv-color-picker__preset .hv-color-picker__preset-title[data-v-c15cc053]{margin-bottom:4px;font-size:12px;color:#cad1e0}.hv-color-picker__preset .hv-color-picker__preset-list[data-v-c15cc053]{display:flex;flex-wrap:wrap;justify-content:space-between}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item[data-v-c15cc053]{width:18px;height:18px;margin-right:calc((100% - 180px) / 9);margin-bottom:4px;cursor:pointer;border-radius:2px}.hv-color-picker__preset .hv-color-picker__preset-list .hv-color-picker__preset-list-item[data-v-c15cc053]:nth-child(10n){margin-right:0}.hv-color-picker-normal[data-v-fbafd973]{box-sizing:border-box;width:248px;padding:16px;overflow:hidden;background-color:#22252a}.hv-color-picker-normal .hv-color-picker__color-select-box[data-v-fbafd973]{display:flex;gap:14px;align-items:center;margin-top:6px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper[data-v-fbafd973]{width:28px;height:28px;color:#cad1e0;cursor:pointer;border-radius:4px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper.is-disabled[data-v-fbafd973]{cursor:not-allowed}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper[data-v-fbafd973]:hover{background-color:#3c4452}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper[data-v-fbafd973]:active{color:#0977e5;background-color:#0977e533}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973]{flex:1}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .el-slider{height:24px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .el-slider .el-slider__runway{--el-slider-height: 12px;--el-slider-border-radius: 6px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .el-slider .el-slider__bar{opacity:0}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .el-slider .el-slider__button-wrapper{top:50%;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);--el-slider-button-wrapper-size: 20px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .el-slider .el-slider__button-wrapper .el-slider__button{box-sizing:border-box;width:14px;height:14px;background-color:var(--el-slider-button-bg-color);border-color:#fff;border-width:3px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .hv-color-picker__hue-slider .el-slider__runway{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders[data-v-fbafd973] .hv-color-picker__alpha-slider .el-slider__runway{--el-slider-main-bg-color: var(--hv-cur-full-alpha-color);--el-slider-button-bg-color: var(--hv-cur-full-alpha-color);background:linear-gradient(to right,transparent 0%,var(--el-slider-main-bg-color) 100%),linear-gradient(to right,#e1e1e1,#e1e1e1 50%,#fff 50%,#fff) 0 0/12px 50% repeat-x,linear-gradient(to right,#e1e1e1,#e1e1e1 50%,#fff 50%,#fff) 6px 6px/12px 50% repeat-x}.hv-color-picker-normal .mb-12[data-v-fbafd973]{margin-bottom:12px}.hv-draggable[data-v-2309f70a]{width:fit-content;cursor:grab}.hv-draggable.disabled[data-v-2309f70a]{cursor:not-allowed}.hv-draggable__clone-item[data-v-2309f70a]{position:fixed;top:0;left:0;z-index:99999;width:fit-content;cursor:grabbing;opacity:.8;will-change:transform}.hv-droppable{position:relative;width:fit-content}.hv-drag-and-scale{--hv-dns-border-width: 1px;--hv-dns-response-width: 30px;--hv-dns-mark-gap: 2px;--hv-dns-mark-width: 3px;--hv-dns-mark-inset: calc(0px - (var(--hv-dns-mark-width) + var(--hv-dns-mark-gap) + var(--hv-dns-border-width)));--hv-dns-mark-border-width: calc(var(--hv-dns-response-width) / 2);--hv-dns-inset: calc(0px - var(--hv-dns-response-width) / 2 + var(--hv-dns-mark-width) + var(--hv-dns-mark-gap));position:relative;box-sizing:border-box;border:var(--hv-dns-border-width) dashed #fff}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark{position:absolute;inset:var(--hv-dns-mark-inset);background:linear-gradient(to right,#fff,#fff) left top no-repeat,linear-gradient(to right,#fff,#fff) right top no-repeat,linear-gradient(to right,#fff,#fff) center top no-repeat,linear-gradient(to right,#fff,#fff) left bottom no-repeat,linear-gradient(to right,#fff,#fff) right bottom no-repeat,linear-gradient(to right,#fff,#fff) center bottom no-repeat,linear-gradient(to bottom,#fff,#fff) left top no-repeat,linear-gradient(to bottom,#fff,#fff) left bottom no-repeat,linear-gradient(to bottom,#fff,#fff) left center no-repeat,linear-gradient(to bottom,#fff,#fff) right top no-repeat,linear-gradient(to bottom,#fff,#fff) right bottom no-repeat,linear-gradient(to bottom,#fff,#fff) right center no-repeat;background-size:var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-border-width) var(--hv-dns-mark-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width),var(--hv-dns-mark-width) var(--hv-dns-mark-border-width)}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box{position:absolute;inset:var(--hv-dns-inset);box-sizing:border-box;display:flex;flex-direction:column}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block{box-sizing:border-box;display:flex;width:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-right{box-sizing:border-box;width:var(--hv-dns-response-width);max-width:33.3333%;height:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-block .hv-drag-and-scale__area-center{box-sizing:border-box;flex:1;height:100%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box.disabled .hv-drag-and-scale__area-block *{cursor:not-allowed!important}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle{flex:1}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-right{height:100%;cursor:ew-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-middle .hv-drag-and-scale__area-center{flex:1;height:100%;cursor:move}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-left,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-right{cursor:nw-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-right,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-left{cursor:ne-resize}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom{box-sizing:border-box;height:var(--hv-dns-response-width);max-height:33.3333%}.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-top .hv-drag-and-scale__area-center,.hv-drag-and-scale .hv-drag-and-scale__zoom-mark .hv-drag-and-scale__area-box .hv-drag-and-scale__area-bottom .hv-drag-and-scale__area-center{cursor:ns-resize}.hv-ip-input{--hv-ip-input-width: 30px;display:inline-block;padding:6px 8px;font-size:14px;line-height:19px;outline:none;border:1px solid #373d48;border-radius:4px}.hv-ip-input input{width:var(--hv-ip-input-width);text-align:center;outline:none;background-color:transparent;border:none}.hv-ip-input.is-disabled,.hv-ip-input.is-disabled input{cursor:not-allowed}.hv-ip-input .hv-ip-input-item{display:inline-block}

package/dist/types/color-picker/src/color-picker-normal/ColorPicker.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue: string;
+    disabled?: boolean;
+    enableAlpha?: boolean;
+    presetTitle?: string;
+    presetColors?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    enableAlpha: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/color-picker/src/color-picker-normal/children/ColorArea/ColorArea.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    saturation: number;
+    value: number;
+    color: string;
+    hueColor: string;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:saturation": (value: number) => any;
+    "update:value": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:saturation"?: ((value: number) => any) | undefined;
+    "onUpdate:value"?: ((value: number) => any) | undefined;
+}>, {
+    value: number;
+    saturation: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/color-picker/src/color-picker-normal/children/ColorArea/hooks/useInteraction.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+export declare function useInteraction(disabled: Ref<boolean>): {
+    colorAreaRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    circlePickerCoordinate: {
+        x: number;
+        y: number;
+    };
+    setCirclePickerCoordinate: (x: number, y: number) => void;
+};

package/dist/types/color-picker/src/color-picker-normal/children/ColorForm/ColorForm.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    modelValue: string;
+    disabled?: boolean;
+    enableAlpha?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/color-picker/src/color-picker-rainbow/ColorPicker.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    modelValue: string;
+    disabled?: boolean;
+    title?: string;
+    presetTitle?: string;
+    presetColors?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/color-picker/src/{children → color-picker-rainbow/children}/ColorForm/ColorForm.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     modelValue: string;
+    disabled?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     change: (value: string) => any;

package/dist/types/color-picker/src/color-picker-rainbow/children/PresetColors/PresetColors.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    title?: string;
+    presetColors?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/color-picker/src/{hooks → color-picker-rainbow/hooks}/useOperateEvent.d.ts

@@ -1,4 +1,7 @@
-export declare function useOperateEvent(): {
+import { MaybeRef } from 'vue';
+export declare function useOperateEvent(options: {
+    disabled: MaybeRef<boolean>;
+}): {
     colorAreaRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     circlePickerCoordinate: {
         x: number;

package/dist/types/color-picker/src/{utils → color-picker-rainbow/utils}/color.d.ts

@@ -11,13 +11,13 @@ export type HsvColorType = {
 };
 export declare function hexToColor(hex: string): ColorConstruct;
 /**
- * 输入rgb，返回16进制颜色
+ * 获取16进制颜色 | Gets the hexadecimal color
  * @param {ColorConstruct} color
  * @returns {string}
  */
 export declare function colorToHex(color: ColorConstruct): string;
 /**
- * 根据颜色值，计算得到hsv深度100的颜色和当前深度值
+ * 根据颜色值，计算得到hsv深度100的颜色和当前深度值 | Based on the color value, the color and the current depth value of hsv depth 100 are calculated
  * @param { ColorConstruct } color
  * @returns {
  *   color: ColorConstruct
@@ -30,17 +30,17 @@ export declare function getLightColorAndDepth(color: ColorConstruct): {
     value: number;
 };
 /**
- * 根据高亮区域的颜色和缩放比例，计算得到原始rgb颜色值
+ * 根据高亮区域的颜色和缩放比例，计算得到原始rgb颜色值 | According to the color of the highlighted area and the zoom ratio, the original rgb color value is calculated
  * @param { ColorConstruct } color
- * @param { number } value 深度 [0-100]
+ * @param { number } value 深度(value) [0-100]
  * @returns ColorConstruct
  *
  */
 export declare function getOriginColorByLightAndDepth(color: ColorConstruct, value: number): ColorConstruct;
 /**
- * 根据canvas高亮区域的颜色和深度值，计算得到原始hex颜色值
+ * 根据canvas高亮区域的颜色和深度值，计算得到原始hex颜色值 | The raw hex color values are computed from the color and depth values of the highlighted areas of the canvas
  * @param { ColorConstruct } color
- * @param { number } value 深度 [0-100]
+ * @param { number } value 深度(value) [0-100]
  * @returns string
  *
  */

package/dist/types/color-picker/src/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_COLOR = "#FFFFFF";

package/dist/types/color-picker/src/index.d.ts

@@ -1,4 +1,26 @@
 import type { SFCWithInstall } from '@havue/utils';
-import ColorPicker from './ColorPicker.vue';
-export declare const HvColorPicker: SFCWithInstall<typeof ColorPicker>;
+import ColorPickerRainbow from './color-picker-rainbow/ColorPicker.vue';
+import ColorPickerNormal from './color-picker-normal/ColorPicker.vue';
+export * from './constants';
+export declare const HvColorPicker: SFCWithInstall<typeof ColorPickerRainbow>;
+export declare const HvColorPickerRainbow: SFCWithInstall<import("vue").DefineComponent<{
+    modelValue: string;
+    disabled?: boolean;
+    title?: string;
+    presetTitle?: string;
+    presetColors?: string[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue: string;
+    disabled?: boolean;
+    title?: string;
+    presetTitle?: string;
+    presetColors?: string[];
+}> & Readonly<{
+    "onUpdate:model-value"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>>;
+export declare const HvColorPickerNormal: SFCWithInstall<typeof ColorPickerNormal>;
 export default HvColorPicker;

package/dist/types/drag-and-drop/src/Draggable.vue.d.ts

@@ -14,7 +14,7 @@ type __VLS_Props = {
     data?: any;
 };
 declare const dragItemRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
-/** 是否开始拖动 */
+/** 是否开始拖动 | Whether to start dragging */
 declare const isDragThis: import("vue").Ref<boolean, boolean>;
 declare const cloneNodeStyle: import("vue").ComputedRef<{
     transform: string;
@@ -24,7 +24,7 @@ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    'hv-drag-item'?: (props: typeof __VLS_3) => any;
+    'drag-item'?: (props: typeof __VLS_3) => any;
 } & {
     default?: (props: typeof __VLS_5) => any;
 }>;

package/dist/types/drag-and-drop/src/Droppable.vue.d.ts

@@ -1,6 +1,7 @@
 import type { DragAndDropDragType, DragAndDropPoint } from './manager';
 type __VLS_Props = {
     acceptDragType: DragAndDropDragType | Array<DragAndDropDragType>;
+    disabled?: boolean;
 };
 declare const dropAreaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;