@aurouscia/au-color-picker 0.0.4 → 0.0.5

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 (3) hide show
  1. package/dist/au-color-picker.es.js +19 -19
  2. package/dist/style.css +1 -1
  3. package/package.json +1 -1
package/dist/au-color-picker.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { defineComponent as ee, ref as k, onMounted as le, onUnmounted as ue, openBlock as L, createElementBlock as V, normalizeStyle as $, isRef as ie, createElementVNode as d, computed as Y, onBeforeMount as re, watch as ce, createVNode as ve, withDirectives as fe, vModelSelect as de, createCommentVNode as pe } from "vue";
2
- import S from "color-convert";
1
+ import { defineComponent as ee, ref as S, onMounted as le, onUnmounted as ue, openBlock as L, createElementBlock as V, normalizeStyle as $, isRef as ie, createElementVNode as d, computed as Y, onBeforeMount as re, watch as ce, createVNode as ve, withDirectives as fe, vModelSelect as de, createCommentVNode as pe } from "vue";
2
+ import k from "color-convert";
3
3
  function ge(g, v) {
4
4
  const x = g.x - v.x, c = g.y - v.y;
5
5
  return x ** 2 + c ** 2;
@@ -21,9 +21,9 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
21
21
  },
22
22
  emits: ["changed"],
23
23
  setup(g, { expose: v, emit: x }) {
24
- const c = k(), H = k();
24
+ const c = S(), H = S();
25
25
  let I, u;
26
- const N = { x: 199, y: 199 }, U = (F + G) / 2, X = F ** 2, M = G ** 2, r = (C - A) / 2, b = r + A, m = k(0), B = k(100), P = k(100), R = g;
26
+ const N = { x: 199, y: 199 }, U = (F + G) / 2, X = F ** 2, M = G ** 2, r = (C - A) / 2, b = r + A, m = S(0), B = S(100), P = S(100), R = g;
27
27
  let f;
28
28
  function T() {
29
29
  var n, a;
@@ -31,7 +31,7 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
31
31
  if (!e || !t)
32
32
  throw Error("canvas context getting error");
33
33
  if (R.initialHex) {
34
- const h = S.hex.hsv(R.initialHex);
34
+ const h = k.hex.hsv(R.initialHex);
35
35
  m.value = h[0], B.value = h[1], P.value = h[2];
36
36
  }
37
37
  I = e, u = t, f = I.getImageData(0, 0, C, E), z(), s(), j(), I.putImageData(f, 0, 0);
@@ -41,7 +41,7 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
41
41
  for (let t = 0; t < E; t++) {
42
42
  const n = { x: e, y: t };
43
43
  if (o(n)) {
44
- const a = n.y * C * 4 + n.x * 4, h = l(n), _ = S.hsv.rgb([h, 100, 100]);
44
+ const a = n.y * C * 4 + n.x * 4, h = l(n), _ = k.hsv.rgb([h, 100, 100]);
45
45
  f.data[a] = _[0], f.data[a + 1] = _[1], f.data[a + 2] = _[2], f.data[a + 3] = 255;
46
46
  }
47
47
  }
@@ -58,7 +58,7 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
58
58
  for (let t = 0; t < E; t++) {
59
59
  const n = { x: e, y: t };
60
60
  if (w(n)) {
61
- const a = n.y * C * 4 + n.x * 4, { s: h, v: _ } = y(n), q = S.hsv.rgb([m.value, h, _]);
61
+ const a = n.y * C * 4 + n.x * 4, { s: h, v: _ } = y(n), q = k.hsv.rgb([m.value, h, _]);
62
62
  f.data[a] = q[0], f.data[a + 1] = q[1], f.data[a + 2] = q[2], f.data[a + 3] = 255;
63
63
  }
64
64
  }
@@ -99,7 +99,7 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
99
99
  }
100
100
  function j(e) {
101
101
  if (e) {
102
- const ae = S.hsv.hex([m.value, B.value, P.value]);
102
+ const ae = k.hsv.hex([m.value, B.value, P.value]);
103
103
  se("changed", ae);
104
104
  }
105
105
  const t = (m.value / 360 * 2 + 1) * Math.PI, n = Math.cos(t) * U + C / 2, a = Math.sin(t) * U + E / 2, h = B.value / 100 * A + r, _ = (1 - P.value / 100) * A + r;
@@ -108,7 +108,7 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
108
108
  u.strokeStyle = q, u.fillStyle = q, u.beginPath(), u.arc(h, _, K - 2, 0, 2 * Math.PI), u.stroke(), u.beginPath(), u.arc(h, _, J, 0, 2 * Math.PI), u.fill();
109
109
  }
110
110
  function oe(e) {
111
- const t = S.hex.hsv(e);
111
+ const t = k.hex.hsv(e);
112
112
  m.value = t[0], B.value = t[1], P.value = t[2], s(), I.putImageData(f, 0, 0), j();
113
113
  }
114
114
  const se = x;
@@ -151,10 +151,10 @@ const C = 400, E = 400, Z = 200, ye = 200, F = 190, G = 150, A = 200, K = 16, J
151
151
  function Q(g) {
152
152
  return /^#([0-9A-F]{3}){1,2}$/i.test(g);
153
153
  }
154
- const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
154
+ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, Se = {
155
155
  key: 0,
156
156
  class: "acpSingleInput"
157
- }, Se = ["value"], we = {
157
+ }, ke = ["value"], we = {
158
158
  key: 1,
159
159
  class: "acpTripleInputs"
160
160
  }, _e = ["value"], be = ["value"], Be = ["value"], He = {
@@ -173,8 +173,8 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
173
173
  setup(g, { expose: v, emit: x }) {
174
174
  const c = g, H = Y(() => {
175
175
  let l = {};
176
- return c.entryStyles && Object.assign(l, c.entryStyles), l.backgroundColor = r.value, c.pos === "right" ? l.right = "0px" : l.left = "0px", u.value || (l.transition = "0s", Object.assign(l, c.entryActiveStyles)), l;
177
- }), I = k(), u = k(!1);
176
+ return l.boxShadow = "none", c.entryStyles && Object.assign(l, c.entryStyles), l.backgroundColor = r.value, c.pos === "right" ? l.right = "0px" : l.left = "0px", u.value && (l.transition = "0s", Object.assign(l, c.entryActiveStyles)), l;
177
+ }), I = S(), u = S(!1);
178
178
  function N() {
179
179
  u.value = !1;
180
180
  }
@@ -184,7 +184,7 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
184
184
  function X(l) {
185
185
  r.value = f(l), T();
186
186
  }
187
- const M = k("hex"), r = k("#ff0000"), b = Y(() => S.hex.rgb(r.value)), m = Y(() => S.hex.hsv(r.value));
187
+ const M = S("hex"), r = S("#ff0000"), b = Y(() => k.hex.rgb(r.value)), m = Y(() => k.hex.hsv(r.value));
188
188
  function B(l) {
189
189
  var s;
190
190
  const o = l.target;
@@ -209,7 +209,7 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
209
209
  else {
210
210
  i > 255 ? i = 255 : i < 0 && (i = 0);
211
211
  const p = [...b.value];
212
- o == "r" ? p[0] = i : o == "g" ? p[1] = i : p[2] = i, r.value = f(S.rgb.hex(p)), (y = I.value) == null || y.enforceTo(r.value), s.value = i.toString(), T();
212
+ o == "r" ? p[0] = i : o == "g" ? p[1] = i : p[2] = i, r.value = f(k.rgb.hex(p)), (y = I.value) == null || y.enforceTo(r.value), s.value = i.toString(), T();
213
213
  return;
214
214
  }
215
215
  }
@@ -227,7 +227,7 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
227
227
  else {
228
228
  o === "h" ? i > 359 && (i = 359) : i > 100 && (i = 100), i < 0 && (i = 0);
229
229
  const p = [...m.value];
230
- o == "h" ? p[0] = i : o == "s" ? p[1] = i : p[2] = i, r.value = f(S.hsv.hex(p)), s.value = i.toString(), (y = I.value) == null || y.enforceTo(r.value), T();
230
+ o == "h" ? p[0] = i : o == "s" ? p[1] = i : p[2] = i, r.value = f(k.hsv.hex(p)), s.value = i.toString(), (y = I.value) == null || y.enforceTo(r.value), T();
231
231
  return;
232
232
  }
233
233
  }
@@ -277,13 +277,13 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
277
277
  ]), 512), [
278
278
  [de, M.value]
279
279
  ]),
280
- M.value == "hex" ? (L(), V("div", ke, [
280
+ M.value == "hex" ? (L(), V("div", Se, [
281
281
  d("input", {
282
282
  value: r.value,
283
283
  onBlur: B,
284
284
  spellcheck: "false",
285
285
  maxlength: "7"
286
- }, null, 40, Se)
286
+ }, null, 40, ke)
287
287
  ])) : M.value == "rgb" ? (L(), V("div", we, [
288
288
  d("input", {
289
289
  value: b.value[0],
@@ -318,7 +318,7 @@ const Ie = { class: "acpRing" }, Pe = { class: "acpParams" }, ke = {
318
318
  ], 4)) : pe("", !0)
319
319
  ]));
320
320
  }
321
- }), Ae = /* @__PURE__ */ te(De, [["__scopeId", "data-v-e44e35b3"]]);
321
+ }), Ae = /* @__PURE__ */ te(De, [["__scopeId", "data-v-31687938"]]);
322
322
  export {
323
323
  Ae as AuColorPicker,
324
324
  Ce as AuColorPickerRing
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .acpRingBody[data-v-7f97ab8e]{position:relative}canvas[data-v-7f97ab8e]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.acpEntry[data-v-e44e35b3]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-e44e35b3]{margin-top:3px;position:absolute}.acpPanel .acpParams[data-v-e44e35b3]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpPanel .acpParams select[data-v-e44e35b3],.acpPanel .acpParams input[data-v-e44e35b3]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpPanel .acpParams input[data-v-e44e35b3]{text-align:center}.acpPanel .acpParams .acpSingleInput input[data-v-e44e35b3]{width:120px}.acpPanel .acpParams .acpTripleInputs[data-v-e44e35b3]{display:flex;justify-content:space-around}.acpPanel .acpParams .acpTripleInputs input[data-v-e44e35b3]{width:40px}.acpPanel .acpDoneBtn[data-v-e44e35b3]{display:flex;justify-content:center;align-items:center;padding:8px}.acpPanel .acpDoneBtn button[data-v-e44e35b3]{background:none;border:none;color:gray;font-size:16px;cursor:pointer}.acpPanel .acpDoneBtn button[data-v-e44e35b3]:hover{color:#000}.acpPanel[data-v-e44e35b3]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acp[data-v-e44e35b3]{position:relative;width:fit-content}
1
+ .acpRingBody[data-v-7f97ab8e]{position:relative}canvas[data-v-7f97ab8e]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.acpEntry[data-v-31687938]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-31687938]{margin-top:3px;position:absolute}.acpPanel .acpParams[data-v-31687938]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpPanel .acpParams select[data-v-31687938],.acpPanel .acpParams input[data-v-31687938]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpPanel .acpParams input[data-v-31687938]{text-align:center}.acpPanel .acpParams .acpSingleInput input[data-v-31687938]{width:120px}.acpPanel .acpParams .acpTripleInputs[data-v-31687938]{display:flex;justify-content:space-around}.acpPanel .acpParams .acpTripleInputs input[data-v-31687938]{width:40px}.acpPanel .acpDoneBtn[data-v-31687938]{display:flex;justify-content:center;align-items:center;padding:8px}.acpPanel .acpDoneBtn button[data-v-31687938]{background:none;border:none;color:gray;font-size:16px;cursor:pointer}.acpPanel .acpDoneBtn button[data-v-31687938]:hover{color:#000}.acpPanel[data-v-31687938]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acp[data-v-31687938]{position:relative;width:fit-content}
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "description": "vue3颜色选择器组件",
12
12
  "keywords": ["vue", "color", "component"],
13
- "version": "0.0.4",
13
+ "version": "0.0.5",
14
14
  "type": "module",
15
15
  "files": [
16
16
  "dist"