@havue/components 1.2.1 → 1.2.2

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 (9) hide show
  1. package/dist/components.full.js +12 -26
  2. package/dist/components.full.min.js +1 -1
  3. package/dist/components.full.min.js.map +1 -1
  4. package/dist/components.mjs +1 -164
  5. package/dist/components.umd.js +8 -162
  6. package/dist/style.css +1 -1
  7. package/dist/types/drag-and-drop/src/index.d.ts +3 -1
  8. package/dist/types/drag-and-drop/src/manager/index.d.ts +3 -3
  9. package/package.json +6 -5
package/dist/components.mjs CHANGED
@@ -1,167 +1,4 @@
1
- import './style.css';
2
1
  export * from "@havue/color-picker";
3
2
  export * from "@havue/drag-and-drop";
4
3
  export * from "@havue/drag-and-scale";
5
- import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, createCommentVNode } from "vue";
6
- const withInstall = (main, extra) => {
7
- main.install = (app) => {
8
- for (const comp of [main, ...Object.values({})]) {
9
- app.component(comp.name, comp);
10
- }
11
- };
12
- return main;
13
- };
14
- function getValidIPItemValue(val) {
15
- const num = parseInt(val + "");
16
- return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
17
- }
18
- function getRange(el) {
19
- const ret = {
20
- begin: null,
21
- end: null,
22
- result: null
23
- };
24
- ret.begin = el.selectionStart || 0;
25
- ret.end = el.selectionEnd || 0;
26
- ret.result = el.value.substring(ret.begin, ret.end);
27
- el.focus();
28
- return ret;
29
- }
30
- const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
31
- const _hoisted_2 = { key: 0 };
32
- const _sfc_main = /* @__PURE__ */ defineComponent({
33
- ...{
34
- name: "HvIpInput"
35
- },
36
- __name: "IpInput",
37
- props: {
38
- modelValue: { default: "..." },
39
- disabled: { type: Boolean, default: false }
40
- },
41
- emits: ["update:model-value"],
42
- setup(__props, { emit: __emit }) {
43
- const emits = __emit;
44
- const props = __props;
45
- const inputRefs = ref([]);
46
- const values = ref([]);
47
- watch(
48
- () => props.modelValue,
49
- (value) => {
50
- value = value + "";
51
- const strs = value.split(".");
52
- values.value = Array(4).fill("").map((_, i) => {
53
- return getValidIPItemValue(strs[i] + "");
54
- });
55
- },
56
- {
57
- immediate: true
58
- }
59
- );
60
- function onIPChange() {
61
- const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
62
- return emits("update:model-value", ip);
63
- }
64
- function handleChange(e, i) {
65
- var _a;
66
- if (props.disabled) {
67
- return;
68
- }
69
- const curValue = e.target.value;
70
- const num = getValidIPItemValue(curValue);
71
- values.value[i] = num;
72
- e.target.value = num;
73
- onIPChange();
74
- if (num === "") {
75
- return e.preventDefault();
76
- }
77
- if (String(num).length === 3 && i < 3) {
78
- (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
79
- }
80
- }
81
- function handleKeyDown(e, i) {
82
- let domId = i;
83
- const { end } = getRange(e.target);
84
- switch (e.keyCode) {
85
- case 37:
86
- case 8: {
87
- if (end === 0 && i > 0) {
88
- domId = i - 1;
89
- }
90
- break;
91
- }
92
- case 39: {
93
- if (end === e.target.value.length && i < 3) {
94
- domId = i + 1;
95
- }
96
- break;
97
- }
98
- case 110:
99
- case 190: {
100
- e.preventDefault();
101
- if (i < 3) {
102
- domId = i + 1;
103
- }
104
- break;
105
- }
106
- }
107
- const inputEl = inputRefs.value[domId];
108
- inputEl.focus();
109
- if (domId < i) {
110
- const len = inputEl.value.length;
111
- inputEl.selectionStart = inputEl.selectionEnd = len;
112
- } else if (domId > i) {
113
- inputEl.selectionStart = inputEl.selectionEnd = 0;
114
- }
115
- }
116
- function handlePaste(e, i) {
117
- if (!e.clipboardData || !e.clipboardData.getData) {
118
- return;
119
- }
120
- const pasteData = e.clipboardData.getData("text/plain");
121
- if (!pasteData) {
122
- return;
123
- }
124
- const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
125
- if (value.length !== 4 - i) {
126
- return;
127
- }
128
- if (!value.every((item) => item !== "")) {
129
- return;
130
- }
131
- value.forEach((val, j) => {
132
- values.value[i + j] = val + "";
133
- });
134
- onIPChange();
135
- return e.preventDefault();
136
- }
137
- return (_ctx, _cache) => {
138
- return openBlock(), createElementBlock("div", {
139
- class: normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
140
- }, [
141
- (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (value, i) => {
142
- return openBlock(), createElementBlock("div", {
143
- class: "hv-ip-input-item",
144
- key: i
145
- }, [
146
- createElementVNode("input", {
147
- ref_for: true,
148
- ref_key: "inputRefs",
149
- ref: inputRefs,
150
- type: "text",
151
- value,
152
- disabled: props.disabled,
153
- onInput: (e) => handleChange(e, i),
154
- onKeydown: (e) => handleKeyDown(e, i),
155
- onPaste: (e) => handlePaste(e, i)
156
- }, null, 40, _hoisted_1),
157
- i !== 3 ? (openBlock(), createElementBlock("i", _hoisted_2, ".")) : createCommentVNode("", true)
158
- ]);
159
- }), 128))
160
- ], 2);
161
- };
162
- }
163
- });
164
- const HvIpInput = withInstall(_sfc_main);
165
- export {
166
- HvIpInput
167
- };
4
+ export * from "@havue/ip-input";
package/dist/components.umd.js CHANGED
@@ -1,167 +1,7 @@
1
1
  (function(global, factory) {
2
- 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));
3
- })(this, function(exports2, colorPicker, dragAndDrop, dragAndScale, vue) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@havue/color-picker"), require("@havue/drag-and-drop"), require("@havue/drag-and-scale"), require("@havue/ip-input")) : typeof define === "function" && define.amd ? define(["exports", "@havue/color-picker", "@havue/drag-and-drop", "@havue/drag-and-scale", "@havue/ip-input"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.components = {}, global.colorPicker, global.dragAndDrop, global.dragAndScale, global.ipInput));
3
+ })(this, function(exports2, colorPicker, dragAndDrop, dragAndScale, ipInput) {
4
4
  "use strict";
5
- const withInstall = (main, extra) => {
6
- main.install = (app) => {
7
- for (const comp of [main, ...Object.values({})]) {
8
- app.component(comp.name, comp);
9
- }
10
- };
11
- return main;
12
- };
13
- function getValidIPItemValue(val) {
14
- const num = parseInt(val + "");
15
- return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
16
- }
17
- function getRange(el) {
18
- const ret = {
19
- begin: null,
20
- end: null,
21
- result: null
22
- };
23
- ret.begin = el.selectionStart || 0;
24
- ret.end = el.selectionEnd || 0;
25
- ret.result = el.value.substring(ret.begin, ret.end);
26
- el.focus();
27
- return ret;
28
- }
29
- const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
30
- const _hoisted_2 = { key: 0 };
31
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
32
- ...{
33
- name: "HvIpInput"
34
- },
35
- __name: "IpInput",
36
- props: {
37
- modelValue: { default: "..." },
38
- disabled: { type: Boolean, default: false }
39
- },
40
- emits: ["update:model-value"],
41
- setup(__props, { emit: __emit }) {
42
- const emits = __emit;
43
- const props = __props;
44
- const inputRefs = vue.ref([]);
45
- const values = vue.ref([]);
46
- vue.watch(
47
- () => props.modelValue,
48
- (value) => {
49
- value = value + "";
50
- const strs = value.split(".");
51
- values.value = Array(4).fill("").map((_, i) => {
52
- return getValidIPItemValue(strs[i] + "");
53
- });
54
- },
55
- {
56
- immediate: true
57
- }
58
- );
59
- function onIPChange() {
60
- const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
61
- return emits("update:model-value", ip);
62
- }
63
- function handleChange(e, i) {
64
- var _a;
65
- if (props.disabled) {
66
- return;
67
- }
68
- const curValue = e.target.value;
69
- const num = getValidIPItemValue(curValue);
70
- values.value[i] = num;
71
- e.target.value = num;
72
- onIPChange();
73
- if (num === "") {
74
- return e.preventDefault();
75
- }
76
- if (String(num).length === 3 && i < 3) {
77
- (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
78
- }
79
- }
80
- function handleKeyDown(e, i) {
81
- let domId = i;
82
- const { end } = getRange(e.target);
83
- switch (e.keyCode) {
84
- case 37:
85
- case 8: {
86
- if (end === 0 && i > 0) {
87
- domId = i - 1;
88
- }
89
- break;
90
- }
91
- case 39: {
92
- if (end === e.target.value.length && i < 3) {
93
- domId = i + 1;
94
- }
95
- break;
96
- }
97
- case 110:
98
- case 190: {
99
- e.preventDefault();
100
- if (i < 3) {
101
- domId = i + 1;
102
- }
103
- break;
104
- }
105
- }
106
- const inputEl = inputRefs.value[domId];
107
- inputEl.focus();
108
- if (domId < i) {
109
- const len = inputEl.value.length;
110
- inputEl.selectionStart = inputEl.selectionEnd = len;
111
- } else if (domId > i) {
112
- inputEl.selectionStart = inputEl.selectionEnd = 0;
113
- }
114
- }
115
- function handlePaste(e, i) {
116
- if (!e.clipboardData || !e.clipboardData.getData) {
117
- return;
118
- }
119
- const pasteData = e.clipboardData.getData("text/plain");
120
- if (!pasteData) {
121
- return;
122
- }
123
- const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
124
- if (value.length !== 4 - i) {
125
- return;
126
- }
127
- if (!value.every((item) => item !== "")) {
128
- return;
129
- }
130
- value.forEach((val, j) => {
131
- values.value[i + j] = val + "";
132
- });
133
- onIPChange();
134
- return e.preventDefault();
135
- }
136
- return (_ctx, _cache) => {
137
- return vue.openBlock(), vue.createElementBlock("div", {
138
- class: vue.normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
139
- }, [
140
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(values.value, (value, i) => {
141
- return vue.openBlock(), vue.createElementBlock("div", {
142
- class: "hv-ip-input-item",
143
- key: i
144
- }, [
145
- vue.createElementVNode("input", {
146
- ref_for: true,
147
- ref_key: "inputRefs",
148
- ref: inputRefs,
149
- type: "text",
150
- value,
151
- disabled: props.disabled,
152
- onInput: (e) => handleChange(e, i),
153
- onKeydown: (e) => handleKeyDown(e, i),
154
- onPaste: (e) => handlePaste(e, i)
155
- }, null, 40, _hoisted_1),
156
- i !== 3 ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_2, ".")) : vue.createCommentVNode("", true)
157
- ]);
158
- }), 128))
159
- ], 2);
160
- };
161
- }
162
- });
163
- const HvIpInput = withInstall(_sfc_main);
164
- exports2.HvIpInput = HvIpInput;
165
5
  Object.keys(colorPicker).forEach((k) => {
166
6
  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
167
7
  enumerable: true,
@@ -180,5 +20,11 @@
180
20
  get: () => dragAndScale[k]
181
21
  });
182
22
  });
23
+ Object.keys(ipInput).forEach((k) => {
24
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
25
+ enumerable: true,
26
+ get: () => ipInput[k]
27
+ });
28
+ });
183
29
  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
184
30
  });
package/dist/style.css CHANGED
@@ -1 +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.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-0118404d]{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-0118404d] .el-select{--el-select-width: 60px}.hv-color_picker__form .hv-color-picker__form-type[data-v-0118404d] .el-select .el-select__wrapper{padding:6px}.hv-color_picker__form .hv-color-picker__form-type[data-v-0118404d] .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-0118404d]{display:flex;flex:1}.hv-color_picker__form .hv-color-picker__form-body[data-v-0118404d] .el-input-number{--el-text-color-regular: #c2c6cc;flex:23;width:23%}.hv-color_picker__form .hv-color-picker__form-body[data-v-0118404d] .el-input-number.hv-color-picker__form-opacity{flex:31}.hv-color_picker__form .hv-color-picker__form-body[data-v-0118404d] .el-input-number .el-input__wrapper{padding:0 4px}.hv-color_picker__form .hv-color-picker__form-body[data-v-0118404d] .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-695472bf]{width:fit-content;cursor:grab}.hv-draggable.disabled[data-v-695472bf]{cursor:not-allowed}.hv-draggable__clone-item[data-v-695472bf]{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}
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 .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{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{position:relative;width:216px;height:216px}.hv-color-picker__color-area-outer .hv-color-picker__color-area{width:100%;height:100%}.hv-color-picker__color-area-outer .hv-color-picker__color-area: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: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{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{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 .el-select{--el-select-width: 60px}.hv-color_picker__form .hv-color-picker__form-type .el-select .el-select__wrapper{padding:6px}.hv-color_picker__form .hv-color-picker__form-type .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{display:flex;flex:1}.hv-color_picker__form .hv-color-picker__form-body .el-input-number{--el-text-color-regular: #c2c6cc;flex:23;width:23%}.hv-color_picker__form .hv-color-picker__form-body .el-input-number.hv-color-picker__form-opacity{flex:31}.hv-color_picker__form .hv-color-picker__form-body .el-input-number .el-input__wrapper{padding:0 4px}.hv-color_picker__form .hv-color-picker__form-body .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{margin-bottom:4px;font-size:12px;color:#cad1e0}.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: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:nth-child(10n){margin-right:0}.hv-color-picker-normal{box-sizing:border-box;width:248px;padding:16px;overflow:hidden;background-color:#22252a}.hv-color-picker-normal .hv-color-picker__color-select-box{display:flex;gap:14px;align-items:center;margin-top:6px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper{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{cursor:not-allowed}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper:hover{background-color:#3c4452}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__dropper:active{color:#0977e5;background-color:#0977e533}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders{flex:1}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders .el-slider{height:24px}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders .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 .el-slider .el-slider__bar{opacity:0}.hv-color-picker-normal .hv-color-picker__color-select-box .hv-color-picker__sliders .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 .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 .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 .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{margin-bottom:12px}.hv-draggable{width:fit-content;cursor:grab}.hv-draggable.disabled{cursor:not-allowed}.hv-draggable__clone-item{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/drag-and-drop/src/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import type { SFCWithInstall } from '@havue/utils';
2
2
  import Draggable from './Draggable.vue';
3
3
  import Droppable from './Droppable.vue';
4
+ import { DnDManagerInstance } from './manager';
4
5
  export declare const HvDraggable: SFCWithInstall<typeof Draggable>;
5
6
  export declare const HvDroppable: SFCWithInstall<typeof Droppable>;
6
- export type { DragAndDropPoint, DragAndDropDragType, DnDManager } from './manager';
7
+ export type { DragAndDropPoint, DragAndDropDragType, DnDManager, DnDManagerEvents } from './manager';
8
+ export { DnDManagerInstance };
package/dist/types/drag-and-drop/src/manager/index.d.ts CHANGED
@@ -21,11 +21,11 @@ export type DnDManagerEvents = {
21
21
  };
22
22
  export declare class DnDManager extends EventBus<DnDManagerEvents> {
23
23
  /** 是否开始拖动 | Whether to start dragging */
24
- isDragStart: boolean;
24
+ private isDragStart;
25
25
  /** 拖动元素类型 | Drag type */
26
- dragType: DragAndDropDragType | undefined;
26
+ private dragType;
27
27
  /** Draggable传递的数据，供Droppable使用 | Draggable passes data for use by Droppable */
28
- dragData: any;
28
+ private dragData;
29
29
  private isSendFirstMovePos;
30
30
  /** 长按一定时间才触发 onStart | Press and hold for a certain amount of time to trigger onStart */
31
31
  private touchStartPressTime;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@havue/components",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "Some components for Vue3",
5
5
  "keywords": [
6
6
  "havue",
@@ -14,10 +14,11 @@
14
14
  "url": "git+https://github.com/HappyPedestrian/havue.git"
15
15
  },
16
16
  "dependencies": {
17
- "@havue/shared": "^1.2.1",
18
- "@havue/drag-and-drop": "^1.2.1",
19
- "@havue/color-picker": "^1.2.1",
20
- "@havue/drag-and-scale": "^1.2.1"
17
+ "@havue/shared": "^1.2.2",
18
+ "@havue/drag-and-drop": "^1.2.2",
19
+ "@havue/color-picker": "^1.2.2",
20
+ "@havue/drag-and-scale": "^1.2.2",
21
+ "@havue/ip-input": "^1.2.2"
21
22
  },
22
23
  "devDependencies": {
23
24
  "vue": "^3.3.0"