vft 0.0.374 → 0.0.375

package/es/components/color-picker/composables/use-alpha-slider.js

@@ -1,103 +1,133 @@
-import { getClientXY as x } from "../../../utils/dom/position.js";
+import { getClientXY } from "../../../utils/dom/position.js";
 import "@vft/utils";
 import "@vueuse/core";
-import { addUnit as M } from "../../../utils/helper.js";
-import { getCurrentInstance as $, shallowRef as p, ref as m, onMounted as K, watch as H, computed as c } from "vue";
+import { addUnit } from "../../../utils/helper.js";
+import { getCurrentInstance, shallowRef, ref, onMounted, watch, computed } from "vue";
 import "lodash-es";
-import { useNamespace as R } from "../../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { draggable as W } from "../utils/draggable.js";
-const j = (e) => {
-  const f = $(), t = p(), u = p();
-  function h(i) {
-    i.target !== t.value && r(i);
+import { draggable } from "../utils/draggable.js";
+const useAlphaSlider = (props) => {
+  const instance = getCurrentInstance();
+  const thumb = shallowRef();
+  const bar = shallowRef();
+  function handleClick(event) {
+    const target = event.target;
+    if (target !== thumb.value) {
+      handleDrag(event);
+    }
   }
-  function r(i) {
-    if (!u.value || !t.value) return;
-    const l = f.vnode.el.getBoundingClientRect(), { clientX: v, clientY: d } = x(i);
-    if (e.vertical) {
-      let o = d - l.top;
-      o = Math.max(t.value.offsetHeight / 2, o), o = Math.min(o, l.height - t.value.offsetHeight / 2), e.color.set(
+  function handleDrag(event) {
+    if (!bar.value || !thumb.value) return;
+    const el = instance.vnode.el;
+    const rect = el.getBoundingClientRect();
+    const { clientX, clientY } = getClientXY(event);
+    if (!props.vertical) {
+      let left = clientX - rect.left;
+      left = Math.max(thumb.value.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+      props.color.set(
         "alpha",
         Math.round(
-          (o - t.value.offsetHeight / 2) / (l.height - t.value.offsetHeight) * 100
+          (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100
         )
       );
     } else {
-      let o = v - l.left;
-      o = Math.max(t.value.offsetWidth / 2, o), o = Math.min(o, l.width - t.value.offsetWidth / 2), e.color.set(
+      let top = clientY - rect.top;
+      top = Math.max(thumb.value.offsetHeight / 2, top);
+      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+      props.color.set(
         "alpha",
         Math.round(
-          (o - t.value.offsetWidth / 2) / (l.width - t.value.offsetWidth) * 100
+          (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100
         )
       );
     }
   }
   return {
-    thumb: t,
-    bar: u,
-    handleDrag: r,
-    handleClick: h
+    thumb,
+    bar,
+    handleDrag,
+    handleClick
   };
-}, q = (e, {
-  bar: f,
-  thumb: t,
-  handleDrag: u
+};
+const useAlphaSliderDOM = (props, {
+  bar,
+  thumb,
+  handleDrag
 }) => {
-  const h = $(), r = R("color-alpha-slider"), i = m(0), s = m(0), l = m();
-  function v() {
-    if (!t.value || e.vertical) return 0;
-    const a = h.vnode.el, n = e.color.get("alpha");
-    return a ? Math.round(
-      n * (a.offsetWidth - t.value.offsetWidth / 2) / 100
-    ) : 0;
+  const instance = getCurrentInstance();
+  const ns = useNamespace("color-alpha-slider");
+  const thumbLeft = ref(0);
+  const thumbTop = ref(0);
+  const background = ref();
+  function getThumbLeft() {
+    if (!thumb.value) return 0;
+    if (props.vertical) return 0;
+    const el = instance.vnode.el;
+    const alpha = props.color.get("alpha");
+    if (!el) return 0;
+    return Math.round(
+      alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100
+    );
   }
-  function d() {
-    if (!t.value) return 0;
-    const a = h.vnode.el;
-    if (!e.vertical) return 0;
-    const n = e.color.get("alpha");
-    return a ? Math.round(
-      n * (a.offsetHeight - t.value.offsetHeight / 2) / 100
-    ) : 0;
+  function getThumbTop() {
+    if (!thumb.value) return 0;
+    const el = instance.vnode.el;
+    if (!props.vertical) return 0;
+    const alpha = props.color.get("alpha");
+    if (!el) return 0;
+    return Math.round(
+      alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100
+    );
   }
-  function o() {
-    if (e.color && e.color.value) {
-      const { r: a, g: n, b } = e.color.toRgb();
-      return `linear-gradient(to right, rgba(${a}, ${n}, ${b}, 0) 0%, rgba(${a}, ${n}, ${b}, 1) 100%)`;
+  function getBackground() {
+    if (props.color && props.color.value) {
+      const { r, g, b } = props.color.toRgb();
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
     }
     return "";
   }
-  function g() {
-    i.value = v(), s.value = d(), l.value = o();
+  function update() {
+    thumbLeft.value = getThumbLeft();
+    thumbTop.value = getThumbTop();
+    background.value = getBackground();
   }
-  K(() => {
-    if (!f.value || !t.value) return;
-    const a = {
-      drag: (n) => {
-        u(n);
+  onMounted(() => {
+    if (!bar.value || !thumb.value) return;
+    const dragConfig = {
+      drag: (event) => {
+        handleDrag(event);
       },
-      end: (n) => {
-        u(n);
+      end: (event) => {
+        handleDrag(event);
       }
     };
-    W(f.value, a), W(t.value, a), g();
-  }), H(
-    () => e.color.get("alpha"),
-    () => g()
-  ), H(
-    () => e.color.value,
-    () => g()
+    draggable(bar.value, dragConfig);
+    draggable(thumb.value, dragConfig);
+    update();
+  });
+  watch(
+    () => props.color.get("alpha"),
+    () => update()
+  );
+  watch(
+    () => props.color.value,
+    () => update()
   );
-  const C = c(() => [r.b(), r.is("vertical", e.vertical)]), k = c(() => r.e("bar")), w = c(() => r.e("thumb")), S = c(() => ({ background: l.value })), T = c(() => ({
-    left: M(i.value),
-    top: M(s.value)
+  const rootKls = computed(() => [ns.b(), ns.is("vertical", props.vertical)]);
+  const barKls = computed(() => ns.e("bar"));
+  const thumbKls = computed(() => ns.e("thumb"));
+  const barStyle = computed(() => ({ background: background.value }));
+  const thumbStyle = computed(() => ({
+    left: addUnit(thumbLeft.value),
+    top: addUnit(thumbTop.value)
   }));
-  return { rootKls: C, barKls: k, barStyle: S, thumbKls: w, thumbStyle: T, update: g };
+  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update };
 };
 export {
-  j as useAlphaSlider,
-  q as useAlphaSliderDOM
+  useAlphaSlider,
+  useAlphaSliderDOM
 };

package/es/components/color-picker/contants.js

@@ -1,6 +1,6 @@
-const o = Symbol(
+const colorPickerContextKey = Symbol(
   "colorPickerContextKey"
 );
 export {
-  o as colorPickerContextKey
+  colorPickerContextKey
 };

package/es/components/color-picker/index.js

@@ -2,11 +2,11 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as o } from "../../utils/vue/install.js";
+import { withInstall } from "../../utils/vue/install.js";
 import "lodash-es";
-import t from "./color-picker.vue2.js";
-const s = o(t);
+import _sfc_main from "./color-picker.vue2.js";
+const VftColorPicker = withInstall(_sfc_main);
 export {
-  s as VftColorPicker,
-  s as default
+  VftColorPicker,
+  VftColorPicker as default
 };

package/es/components/color-picker/utils/color.js

@@ -1,207 +1,301 @@
-import { hasOwn as b } from "@vft/utils";
-const _ = function(a, t, e) {
+import { hasOwn } from "@vft/utils";
+const hsv2hsl = function(hue, sat, val) {
   return [
-    a,
-    t * e / ((a = (2 - t) * e) < 1 ? a : 2 - a) || 0,
-    a / 2
+    hue,
+    sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0,
+    hue / 2
   ];
-}, F = function(a) {
-  return typeof a == "string" && a.includes(".") && Number.parseFloat(a) === 1;
-}, C = function(a) {
-  return typeof a == "string" && a.includes("%");
-}, l = function(a, t) {
-  F(a) && (a = "100%");
-  const e = C(a);
-  return a = Math.min(t, Math.max(0, Number.parseFloat(`${a}`))), e && (a = Number.parseInt(`${a * t}`, 10) / 100), Math.abs(a - t) < 1e-6 ? 1 : a % t / Number.parseFloat(t);
-}, g = {
+};
+const isOnePointZero = function(n) {
+  return typeof n === "string" && n.includes(".") && Number.parseFloat(n) === 1;
+};
+const isPercentage = function(n) {
+  return typeof n === "string" && n.includes("%");
+};
+const bound01 = function(value, max) {
+  if (isOnePointZero(value)) value = "100%";
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
+  if (processPercent) {
+    value = Number.parseInt(`${value * max}`, 10) / 100;
+  }
+  if (Math.abs(value - max) < 1e-6) {
+    return 1;
+  }
+  return value % max / Number.parseFloat(max);
+};
+const INT_HEX_MAP = {
   10: "A",
   11: "B",
   12: "C",
   13: "D",
   14: "E",
   15: "F"
-}, f = (a) => {
-  a = Math.min(Math.round(a), 255);
-  const t = Math.floor(a / 16), e = a % 16;
-  return `${g[t] || t}${g[e] || e}`;
-}, $ = function({ r: a, g: t, b: e }) {
-  return Number.isNaN(+a) || Number.isNaN(+t) || Number.isNaN(+e) ? "" : `#${f(a)}${f(t)}${f(e)}`;
-}, m = {
+};
+const hexOne = (value) => {
+  value = Math.min(Math.round(value), 255);
+  const high = Math.floor(value / 16);
+  const low = value % 16;
+  return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
+};
+const toHex = function({ r, g, b }) {
+  if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b)) return "";
+  return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
+};
+const HEX_INT_MAP = {
   A: 10,
   B: 11,
   C: 12,
   D: 13,
   E: 14,
   F: 15
-}, c = function(a) {
-  return a.length === 2 ? (m[a[0].toUpperCase()] || +a[0]) * 16 + (m[a[1].toUpperCase()] || +a[1]) : m[a[1].toUpperCase()] || +a[1];
-}, k = function(a, t, e) {
-  t = t / 100, e = e / 100;
-  let s = t;
-  const n = Math.max(e, 0.01);
-  e *= 2, t *= e <= 1 ? e : 2 - e, s *= n <= 1 ? n : 2 - n;
-  const h = (e + t) / 2, r = e === 0 ? 2 * s / (n + s) : 2 * t / (e + t);
+};
+const parseHexChannel = function(hex) {
+  if (hex.length === 2) {
+    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
+  }
+  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
+};
+const hsl2hsv = function(hue, sat, light) {
+  sat = sat / 100;
+  light = light / 100;
+  let smin = sat;
+  const lmin = Math.max(light, 0.01);
+  light *= 2;
+  sat *= light <= 1 ? light : 2 - light;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (light + sat) / 2;
+  const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
   return {
-    h: a,
-    s: r * 100,
-    v: h * 100
+    h: hue,
+    s: sv * 100,
+    v: v * 100
   };
-}, M = (a, t, e) => {
-  a = l(a, 255), t = l(t, 255), e = l(e, 255);
-  const s = Math.max(a, t, e), n = Math.min(a, t, e);
+};
+const rgb2hsv = (r, g, b) => {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
   let h;
-  const r = s, i = s - n, o = s === 0 ? 0 : i / s;
-  if (s === n)
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  if (max === min) {
     h = 0;
-  else {
-    switch (s) {
-      case a: {
-        h = (t - e) / i + (t < e ? 6 : 0);
+  } else {
+    switch (max) {
+      case r: {
+        h = (g - b) / d + (g < b ? 6 : 0);
         break;
       }
-      case t: {
-        h = (e - a) / i + 2;
+      case g: {
+        h = (b - r) / d + 2;
         break;
       }
-      case e: {
-        h = (a - t) / i + 4;
+      case b: {
+        h = (r - g) / d + 4;
         break;
       }
     }
     h /= 6;
   }
-  return { h: h * 360, s: o * 100, v: r * 100 };
-}, u = function(a, t, e) {
-  a = l(a, 360) * 6, t = l(t, 100), e = l(e, 100);
-  const s = Math.floor(a), n = a - s, h = e * (1 - t), r = e * (1 - n * t), i = e * (1 - (1 - n) * t), o = s % 6, p = [e, r, h, h, i, e][o], d = [i, e, e, r, h, h][o], N = [h, h, i, e, e, r][o];
+  return { h: h * 360, s: s * 100, v: v * 100 };
+};
+const hsv2rgb = function(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
   return {
-    r: Math.round(p * 255),
-    g: Math.round(d * 255),
-    b: Math.round(N * 255)
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
   };
 };
-class O {
+class Color {
   _hue = 0;
   _saturation = 100;
   _value = 100;
   _alpha = 100;
-  enableAlpha = !1;
+  enableAlpha = false;
   format = "hex";
   value = "";
   selected;
-  constructor(t = {}) {
-    for (const e in t)
-      b(t, e) && (this[e] = t[e]);
-    t.value ? this.fromString(t.value) : this.doOnChange();
+  constructor(options = {}) {
+    for (const option in options) {
+      if (hasOwn(options, option)) {
+        this[option] = options[option];
+      }
+    }
+    if (options.value) {
+      this.fromString(options.value);
+    } else {
+      this.doOnChange();
+    }
   }
-  set(t, e) {
-    if (arguments.length === 1 && typeof t == "object") {
-      for (const s in t)
-        b(t, s) && this.set(s, t[s]);
+  set(prop, value) {
+    if (arguments.length === 1 && typeof prop === "object") {
+      for (const p in prop) {
+        if (hasOwn(prop, p)) {
+          this.set(p, prop[p]);
+        }
+      }
       return;
     }
-    this[`_${t}`] = e, this.doOnChange();
+    this[`_${prop}`] = value;
+    this.doOnChange();
   }
-  get(t) {
-    return t === "alpha" ? Math.floor(this[`_${t}`]) : this[`_${t}`];
+  get(prop) {
+    if (prop === "alpha") {
+      return Math.floor(this[`_${prop}`]);
+    }
+    return this[`_${prop}`];
   }
   toRgb() {
-    return u(this._hue, this._saturation, this._value);
+    return hsv2rgb(this._hue, this._saturation, this._value);
   }
-  fromString(t) {
-    if (!t) {
-      this._hue = 0, this._saturation = 100, this._value = 100, this.doOnChange();
+  fromString(value) {
+    if (!value) {
+      this._hue = 0;
+      this._saturation = 100;
+      this._value = 100;
+      this.doOnChange();
       return;
     }
-    const e = (s, n, h) => {
-      this._hue = Math.max(0, Math.min(360, s)), this._saturation = Math.max(0, Math.min(100, n)), this._value = Math.max(0, Math.min(100, h)), this.doOnChange();
+    const fromHSV = (h, s, v) => {
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
+      this.doOnChange();
     };
-    if (t.includes("hsl")) {
-      const s = t.replace(/hsla|hsl|\(|\)/g, "").split(/\s|,/g).filter((n) => n !== "").map(
-        (n, h) => h > 2 ? Number.parseFloat(n) : Number.parseInt(n, 10)
+    if (value.includes("hsl")) {
+      const parts = value.replace(/hsla|hsl|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
       );
-      if (s.length === 4 ? this._alpha = Number.parseFloat(s[3]) * 100 : s.length === 3 && (this._alpha = 100), s.length >= 3) {
-        const { h: n, s: h, v: r } = k(s[0], s[1], s[2]);
-        e(n, h, r);
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
       }
-    } else if (t.includes("hsv")) {
-      const s = t.replace(/hsva|hsv|\(|\)/g, "").split(/\s|,/g).filter((n) => n !== "").map(
-        (n, h) => h > 2 ? Number.parseFloat(n) : Number.parseInt(n, 10)
+    } else if (value.includes("hsv")) {
+      const parts = value.replace(/hsva|hsv|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
       );
-      s.length === 4 ? this._alpha = Number.parseFloat(s[3]) * 100 : s.length === 3 && (this._alpha = 100), s.length >= 3 && e(s[0], s[1], s[2]);
-    } else if (t.includes("rgb")) {
-      const s = t.replace(/rgba|rgb|\(|\)/g, "").split(/\s|,/g).filter((n) => n !== "").map(
-        (n, h) => h > 2 ? Number.parseFloat(n) : Number.parseInt(n, 10)
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        fromHSV(parts[0], parts[1], parts[2]);
+      }
+    } else if (value.includes("rgb")) {
+      const parts = value.replace(/rgba|rgb|\(|\)/g, "").split(/\s|,/g).filter((val) => val !== "").map(
+        (val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10)
       );
-      if (s.length === 4 ? this._alpha = Number.parseFloat(s[3]) * 100 : s.length === 3 && (this._alpha = 100), s.length >= 3) {
-        const { h: n, s: h, v: r } = M(s[0], s[1], s[2]);
-        e(n, h, r);
+      if (parts.length === 4) {
+        this._alpha = Number.parseFloat(parts[3]) * 100;
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.includes("#")) {
+      const hex = value.replace("#", "").trim();
+      if (!/^[\da-fA-F]{3}$|^[\da-fA-F]{6}$|^[\da-fA-F]{8}$/.test(hex)) return;
+      let r, g, b;
+      if (hex.length === 3) {
+        r = parseHexChannel(hex[0] + hex[0]);
+        g = parseHexChannel(hex[1] + hex[1]);
+        b = parseHexChannel(hex[2] + hex[2]);
+      } else if (hex.length === 6 || hex.length === 8) {
+        r = parseHexChannel(hex.slice(0, 2));
+        g = parseHexChannel(hex.slice(2, 4));
+        b = parseHexChannel(hex.slice(4, 6));
+      }
+      if (hex.length === 8) {
+        this._alpha = parseHexChannel(hex.slice(6)) / 255 * 100;
+      } else if (hex.length === 3 || hex.length === 6) {
+        this._alpha = 100;
       }
-    } else if (t.includes("#")) {
-      const s = t.replace("#", "").trim();
-      if (!/^[\da-fA-F]{3}$|^[\da-fA-F]{6}$|^[\da-fA-F]{8}$/.test(s)) return;
-      let n, h, r;
-      s.length === 3 ? (n = c(s[0] + s[0]), h = c(s[1] + s[1]), r = c(s[2] + s[2])) : (s.length === 6 || s.length === 8) && (n = c(s.slice(0, 2)), h = c(s.slice(2, 4)), r = c(s.slice(4, 6))), s.length === 8 ? this._alpha = c(s.slice(6)) / 255 * 100 : (s.length === 3 || s.length === 6) && (this._alpha = 100);
-      const { h: i, s: o, v: p } = M(n, h, r);
-      e(i, o, p);
+      const { h, s, v } = rgb2hsv(r, g, b);
+      fromHSV(h, s, v);
     }
   }
-  compare(t) {
-    return Math.abs(t._hue - this._hue) < 2 && Math.abs(t._saturation - this._saturation) < 1 && Math.abs(t._value - this._value) < 1 && Math.abs(t._alpha - this._alpha) < 1;
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
   }
   doOnChange() {
-    const { _hue: t, _saturation: e, _value: s, _alpha: n, format: h } = this;
-    if (this.enableAlpha)
-      switch (h) {
+    const { _hue, _saturation, _value, _alpha, format } = this;
+    if (this.enableAlpha) {
+      switch (format) {
         case "hsl": {
-          const r = _(t, e / 100, s / 100);
-          this.value = `hsla(${t}, ${Math.round(
-            r[1] * 100
-          )}%, ${Math.round(r[2] * 100)}%, ${this.get("alpha") / 100})`;
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsla(${_hue}, ${Math.round(
+            hsl[1] * 100
+          )}%, ${Math.round(hsl[2] * 100)}%, ${this.get("alpha") / 100})`;
           break;
         }
         case "hsv": {
-          this.value = `hsva(${t}, ${Math.round(e)}%, ${Math.round(
-            s
+          this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(
+            _value
           )}%, ${this.get("alpha") / 100})`;
           break;
         }
         case "hex": {
-          this.value = `${$(u(t, e, s))}${f(
-            n * 255 / 100
+          this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(
+            _alpha * 255 / 100
           )}`;
           break;
         }
         default: {
-          const { r, g: i, b: o } = u(t, e, s);
-          this.value = `rgba(${r}, ${i}, ${o}, ${this.get("alpha") / 100})`;
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`;
         }
       }
-    else
-      switch (h) {
+    } else {
+      switch (format) {
         case "hsl": {
-          const r = _(t, e / 100, s / 100);
-          this.value = `hsl(${t}, ${Math.round(r[1] * 100)}%, ${Math.round(
-            r[2] * 100
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(
+            hsl[2] * 100
           )}%)`;
           break;
         }
         case "hsv": {
-          this.value = `hsv(${t}, ${Math.round(e)}%, ${Math.round(
-            s
+          this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(
+            _value
           )}%)`;
           break;
         }
         case "rgb": {
-          const { r, g: i, b: o } = u(t, e, s);
-          this.value = `rgb(${r}, ${i}, ${o})`;
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgb(${r}, ${g}, ${b})`;
           break;
         }
-        default:
-          this.value = $(u(t, e, s));
+        default: {
+          this.value = toHex(hsv2rgb(_hue, _saturation, _value));
+        }
       }
+    }
   }
 }
 export {
-  O as default
+  Color as default
 };