@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,306 lines (1,305 loc) • 48.2 kB
JavaScript
var He = Object.defineProperty;
var xe = (u, e, i) => e in u ? He(u, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : u[e] = i;
var n = (u, e, i) => xe(u, typeof e != "symbol" ? e + "" : e, i);
import { ref as b, defineComponent as Z, onMounted as K, watch as E, createVNode as y, withModifiers as Q, createTextVNode as fe, computed as O, onBeforeMount as we, withDirectives as q, vShow as J, vModelText as ye, inject as Be } from "vue";
import { resolveAppearance as Me, createPropsResolver as $e } from "../dynamic-resolver/index.esm.js";
import { useDesignerComponent as Re } from "../designer-canvas/index.esm.js";
import { withInstall as Ve } from "../common/index.esm.js";
const Ne = "https://json-schema.org/draft/2020-12/schema", Ee = "https://farris-design.gitee.io/color-picker.schema.json", Ae = "color-picker", Oe = "A Farris Component", Le = "object", je = {
id: {
description: "The unique identifier for color picker",
type: "string"
},
type: {
description: "The type string of color picker",
type: "string",
default: "color-picker"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Fe = [
"id",
"type"
], Ue = {
$schema: Ne,
$id: Ee,
title: Ae,
description: Oe,
type: Le,
properties: je,
required: Fe
};
function qe(u, e, i) {
return e;
}
const De = /* @__PURE__ */ new Map([
["appearance", Me]
]), Xe = "color-picker", Ce = "A Farris Component", Ye = "object", Ge = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, We = {
title: Xe,
description: Ce,
type: Ye,
categories: Ge
}, ve = {
/** 初始颜色 */
color: { type: String, default: "#e1e2e3" },
/** 禁用 */
disabled: { type: Boolean, default: !1 },
/** 预置颜色 */
presets: { type: Array, default: [] },
/** 允许颜色为空 */
allowColorNull: { type: Boolean, default: !1 },
/** 颜色值变化事件 */
onValueChanged: { type: Function, default: () => {
} }
}, ke = $e(ve, Ue, De, qe, We);
class ie {
}
class pe extends ie {
constructor(e, i, t, r) {
super(), this.cyan = e, this.magenta = i, this.yellow = t, this.black = r;
}
toString() {
return `cmyk(${this.getCyan()}%, ${this.getMagenta()}%, ${this.getYellow()}%, ${this.getBlack()}%)`;
}
getCyan() {
return Math.round(this.cyan);
}
getMagenta() {
return Math.round(this.magenta);
}
getYellow() {
return Math.round(this.yellow);
}
getBlack() {
return Math.round(this.black);
}
}
class ee extends ie {
constructor(e, i, t, r) {
super(), this.hue = e, this.saturation = i, this.lightness = t, this.alpha = r;
}
toString(e = !0) {
return e ? `hsla(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%, ${this.getAlpha()})` : `hsl(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%)`;
}
getHue() {
return Math.round(this.hue);
}
getSaturation() {
return Math.round(this.saturation);
}
getLightness() {
return Math.round(this.lightness);
}
getAlpha() {
return Math.round(this.alpha * 100) / 100;
}
}
class te extends ie {
constructor(e, i, t, r) {
super(), this.hue = e, this.saturation = i, this.value = t, this.alpha = r;
}
toString(e = !0) {
return e ? `hsva(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%, ${this.getAlpha()})` : `hsv(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%)`;
}
getHue() {
return Math.round(this.hue);
}
getSaturation() {
return Math.round(this.saturation);
}
getValue() {
return Math.round(this.value);
}
getAlpha() {
return Math.round(this.alpha * 100) / 100;
}
}
class s extends ie {
constructor(e, i, t, r) {
super(), this.red = e, this.green = i, this.blue = t, this.alpha = r;
}
toString(e = !0) {
return e ? `rgba(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()}, ${this.getAlpha()})` : `rgb(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()})`;
}
getRed() {
return Math.round(this.red);
}
getGreen() {
return Math.round(this.green);
}
getBlue() {
return Math.round(this.blue);
}
getAlpha() {
return Math.round(this.alpha * 100) / 100;
}
}
const a = class a {
};
n(a, "transparent", new s(0, 0, 0, 0)), n(a, "aliceblue", new s(240, 248, 255, 1)), n(a, "antiquewhite", new s(250, 235, 215, 1)), n(a, "aqua", new s(0, 255, 255, 1)), n(a, "aquamarine", new s(127, 255, 212, 1)), n(a, "azure", new s(240, 255, 255, 1)), n(a, "beige", new s(245, 245, 220, 1)), n(a, "bisque", new s(255, 228, 196, 1)), n(a, "black", new s(0, 0, 0, 1)), n(a, "blanchedalmond", new s(255, 235, 205, 1)), n(a, "blue", new s(0, 0, 255, 1)), n(a, "blueviolet", new s(138, 43, 226, 1)), n(a, "brown", new s(165, 42, 42, 1)), n(a, "burlywood", new s(222, 184, 135, 1)), n(a, "cadetblue", new s(95, 158, 160, 1)), n(a, "chartreuse", new s(127, 255, 0, 1)), n(a, "chocolate", new s(210, 105, 30, 1)), n(a, "coral", new s(255, 127, 80, 1)), n(a, "cornflowerblue", new s(100, 149, 237, 1)), n(a, "cornsilk", new s(255, 248, 220, 1)), n(a, "crimson", new s(220, 20, 60, 1)), n(a, "cyan", new s(0, 255, 255, 1)), n(a, "darkblue", new s(0, 0, 139, 1)), n(a, "darkcyan", new s(0, 139, 139, 1)), n(a, "darkgoldenrod", new s(184, 134, 11, 1)), n(a, "darkgray", new s(169, 169, 169, 1)), n(a, "darkgreen", new s(0, 100, 0, 1)), n(a, "darkgrey", a.darkgray), n(a, "darkkhaki", new s(189, 183, 107, 1)), n(a, "darkmagenta", new s(139, 0, 139, 1)), n(a, "darkolivegreen", new s(85, 107, 47, 1)), n(a, "darkorange", new s(255, 140, 0, 1)), n(a, "darkorchid", new s(153, 50, 204, 1)), n(a, "darkred", new s(139, 0, 0, 1)), n(a, "darksalmon", new s(233, 150, 122, 1)), n(a, "darkseagreen", new s(143, 188, 143, 1)), n(a, "darkslateblue", new s(72, 61, 139, 1)), n(a, "darkslategray", new s(47, 79, 79, 1)), n(a, "darkslategrey", a.darkslategray), n(a, "darkturquoise", new s(0, 206, 209, 1)), n(a, "darkviolet", new s(148, 0, 211, 1)), n(a, "deeppink", new s(255, 20, 147, 1)), n(a, "deepskyblue", new s(0, 191, 255, 1)), n(a, "dimgray", new s(105, 105, 105, 1)), n(a, "dimgrey", a.dimgray), n(a, "dodgerblue", new s(30, 144, 255, 1)), n(a, "firebrick", new s(178, 34, 34, 1)), n(a, "floralwhite", new s(255, 250, 240, 1)), n(a, "forestgreen", new s(34, 139, 34, 1)), n(a, "fuchsia", new s(255, 0, 255, 1)), n(a, "gainsboro", new s(220, 220, 220, 1)), n(a, "ghostwhite", new s(248, 248, 255, 1)), n(a, "gold", new s(255, 215, 0, 1)), n(a, "goldenrod", new s(218, 165, 32, 1)), n(a, "gray", new s(128, 128, 128, 1)), n(a, "grey", a.gray), n(a, "green", new s(0, 128, 0, 1)), n(a, "greenyellow", new s(173, 255, 47, 1)), n(a, "honeydew", new s(240, 255, 240, 1)), n(a, "hotpink", new s(255, 105, 180, 1)), n(a, "indianred", new s(205, 92, 92, 1)), n(a, "indigo", new s(75, 0, 130, 1)), n(a, "ivory", new s(255, 255, 240, 1)), n(a, "khaki", new s(240, 230, 140, 1)), n(a, "lavender", new s(230, 230, 250, 1)), n(a, "lavenderblush", new s(255, 240, 245, 1)), n(a, "lawngreen", new s(124, 252, 0, 1)), n(a, "lemonchiffon", new s(255, 250, 205, 1)), n(a, "lightblue", new s(173, 216, 230, 1)), n(a, "lightcoral", new s(240, 128, 128, 1)), n(a, "lightcyan", new s(224, 255, 255, 1)), n(a, "lightgoldenrodyellow", new s(250, 250, 210, 1)), n(a, "lightgray", new s(211, 211, 211, 1)), n(a, "lightgreen", new s(144, 238, 144, 1)), n(a, "lightgrey", a.lightgray), n(a, "lightpink", new s(255, 182, 193, 1)), n(a, "lightsalmon", new s(255, 160, 122, 1)), n(a, "lightseagreen", new s(32, 178, 170, 1)), n(a, "lightskyblue", new s(135, 206, 250, 1)), n(a, "lightslategray", new s(119, 136, 153, 1)), n(a, "lightslategrey", a.lightslategray), n(a, "lightsteelblue", new s(176, 196, 222, 1)), n(a, "lightyellow", new s(255, 255, 224, 1)), n(a, "lime", new s(0, 255, 0, 1)), n(a, "limegreen", new s(50, 205, 50, 1)), n(a, "linen", new s(250, 240, 230, 1)), n(a, "magenta", new s(255, 0, 255, 1)), n(a, "maroon", new s(128, 0, 0, 1)), n(a, "mediumaquamarine", new s(102, 205, 170, 1)), n(a, "mediumblue", new s(0, 0, 205, 1)), n(a, "mediumorchid", new s(186, 85, 211, 1)), n(a, "mediumpurple", new s(147, 112, 219, 1)), n(a, "mediumseagreen", new s(60, 179, 113, 1)), n(a, "mediumslateblue", new s(123, 104, 238, 1)), n(a, "mediumspringgreen", new s(0, 250, 154, 1)), n(a, "mediumturquoise", new s(72, 209, 204, 1)), n(a, "mediumvioletred", new s(199, 21, 133, 1)), n(a, "midnightblue", new s(25, 25, 112, 1)), n(a, "mintcream", new s(245, 255, 250, 1)), n(a, "mistyrose", new s(255, 228, 225, 1)), n(a, "moccasin", new s(255, 228, 181, 1)), n(a, "navajowhite", new s(255, 222, 173, 1)), n(a, "navy", new s(0, 0, 128, 1)), n(a, "oldlace", new s(253, 245, 230, 1)), n(a, "olive", new s(128, 128, 0, 1)), n(a, "olivedrab", new s(107, 142, 35, 1)), n(a, "orange", new s(255, 165, 0, 1)), n(a, "orangered", new s(255, 69, 0, 1)), n(a, "orchid", new s(218, 112, 214, 1)), n(a, "palegoldenrod", new s(238, 232, 170, 1)), n(a, "palegreen", new s(152, 251, 152, 1)), n(a, "paleturquoise", new s(175, 238, 238, 1)), n(a, "palevioletred", new s(219, 112, 147, 1)), n(a, "papayawhip", new s(255, 239, 213, 1)), n(a, "peachpuff", new s(255, 218, 185, 1)), n(a, "peru", new s(205, 133, 63, 1)), n(a, "pink", new s(255, 192, 203, 1)), n(a, "plum", new s(221, 160, 221, 1)), n(a, "powderblue", new s(176, 224, 230, 1)), n(a, "purple", new s(128, 0, 128, 1)), n(a, "red", new s(255, 0, 0, 1)), n(a, "rosybrown", new s(188, 143, 143, 1)), n(a, "royalblue", new s(65, 105, 225, 1)), n(a, "saddlebrown", new s(139, 69, 19, 1)), n(a, "salmon", new s(250, 128, 114, 1)), n(a, "sandybrown", new s(244, 164, 96, 1)), n(a, "seagreen", new s(46, 139, 87, 1)), n(a, "seashell", new s(255, 245, 238, 1)), n(a, "sienna", new s(160, 82, 45, 1)), n(a, "silver", new s(192, 192, 192, 1)), n(a, "skyblue", new s(135, 206, 235, 1)), n(a, "slateblue", new s(106, 90, 205, 1)), n(a, "slategray", new s(112, 128, 144, 1)), n(a, "slategrey", a.slategray), n(a, "snow", new s(255, 250, 250, 1)), n(a, "springgreen", new s(0, 255, 127, 1)), n(a, "steelblue", new s(70, 130, 180, 1)), n(a, "tan", new s(210, 180, 140, 1)), n(a, "teal", new s(0, 128, 128, 1)), n(a, "thistle", new s(216, 191, 216, 1)), n(a, "tomato", new s(255, 99, 71, 1)), n(a, "turquoise", new s(64, 224, 208, 1)), n(a, "violet", new s(238, 130, 238, 1)), n(a, "wheat", new s(245, 222, 179, 1)), n(a, "white", new s(255, 255, 255, 1)), n(a, "whitesmoke", new s(245, 245, 245, 1)), n(a, "yellow", new s(255, 255, 0, 1)), n(a, "yellowgreen", new s(154, 205, 50, 1));
let ge = a;
class I {
constructor(e) {
/**
* base color used to calculate other
* default color
* rgb(255, 0, 0)
* hsl(0, 100%, 50%)
* 初始色#ff0000
*/
n(this, "hsva", new te(0, 1, 1, 1));
n(this, "rgba", new s(255, 0, 0, 1));
e && this.stringToColor(e);
}
static from(e) {
return typeof e == "string" ? new I(e) : e instanceof I ? e.clone() : e instanceof s ? new I().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof te ? new I().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof ee ? new I().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new I(e);
}
/**
* make from existing color new color object
*/
clone() {
return I.from(this.getRgba());
}
/**
* define Color from hex, rgb, rgba, hsl, hsla or cmyk string
*/
setFromString(e) {
return this.stringToColor(e);
}
/**
* define Color from HSV values
*/
setHsva(e, i = 100, t = 100, r = 1) {
return e != null && (this.hsva.hue = e), i != null && (this.hsva.saturation = i), t != null && (this.hsva.value = t), r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.hsva.alpha = r), this.rgba = this.hsvaToRgba(this.hsva), this;
}
/**
* define Color from RGBa
*/
setRgba(e, i, t, r = 1) {
return e != null && (this.rgba.red = e), i != null && (this.rgba.green = i), t != null && (this.rgba.blue = t), r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.rgba.alpha = r), this.hsva = this.rgbaToHsva(this.rgba), this;
}
/**
* define Color from HSLa
*/
setHsla(e, i, t, r = 1) {
r != null && (r = r > 1 ? 1 : r < 0 ? 0 : r, this.rgba.alpha = r);
const k = new ee(e, i, t, r);
return this.rgba = this.hslaToRgba(k), this.hsva = this.rgbaToHsva(this.rgba), this;
}
/**
* return hexadecimal value formatted as '#341d2a' or '#341d2aFF' if alhpa channel is enabled
*/
toHexString(e = !1) {
let i = "#" + (16777216 | this.rgba.getRed() << 16 | this.rgba.getGreen() << 8 | this.rgba.getBlue()).toString(16).substr(1);
return e && (i += (256 | Math.round(this.rgba.alpha * 255)).toString(16).substr(1)), i.toUpperCase();
}
/**
* return rgba string formatted as rgba(52, 29, 42, 1)
*/
toRgbaString() {
return this.rgba.toString();
}
/**
* return rgb string formatted as rgb(52, 29, 42)
*/
toRgbString() {
return this.rgba.toString(!1);
}
/**
* return hsla string formatted as hsla(327, 29%, 16%, 1)
*/
toHslaString() {
return this.getHsla().toString();
}
/**
* return hsl string formatted as hsl(327, 29%, 16%)
*/
toHslString() {
return this.getHsla().toString(!1);
}
/**
* return hsva string formatted as hsva(327, 29%, 16%, 100%)
*/
toHsvaString() {
return this.hsva.toString();
}
/**
* return hsv string formatted as hsv(327, 29%, 16%)
*/
toHsvString() {
return this.hsva.toString(!1);
}
/**
* return Cmyk string formatted as cmyk(100%, 100%, 100%, 100%)
*/
toCmykString() {
return this.getCmyk().toString();
}
getHsva() {
return new te(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
}
getRgba() {
return new s(this.rgba.red, this.rgba.green, this.rgba.blue, this.rgba.alpha);
}
getHsla() {
return this.rgbaToHsla(this.rgba);
}
getCmyk() {
return this.rgbaToCmyk(this.rgba);
}
hsvaToHsla(e) {
const { hue: i } = e, t = e.saturation / 100, r = e.value / 100, k = (2 - t) * e.value / 2, l = t * r / (k <= 1 ? k : 2 - k) || 0;
return new ee(i, k * 100, l * 100, e.alpha);
}
hslaToHsva(e) {
const { hue: i } = e, t = e.lightness / 100 * 2, r = e.saturation / 100 * (t <= 1 ? t : 2 - t), k = (t + r) / 2, l = 2 * r / (t + r) || 0;
return new te(i, l, k, e.alpha);
}
rgbaToHsva(e) {
const i = e.red / 255, t = e.green / 255, r = e.blue / 255, { alpha: k } = e, l = Math.max(i, t, r), g = Math.min(i, t, r), w = l - g;
let m = 0, h = l === 0 ? 0 : w / l, d = l;
if (l !== g) {
switch (l) {
case i:
m = (t - r) / w + (t < r ? 6 : 0);
break;
case t:
m = 2 + (r - i) / w;
break;
case r:
m = 4 + (i - t) / w;
break;
}
m /= 6;
}
return m *= 360, h *= 100, d *= 100, new te(m, h, d, k);
}
hsvaToRgba(e) {
let i = 1, t = 0, r = 0;
const k = e.saturation / 100, l = e.value / 100, { alpha: g } = e, w = e.hue / 60, m = Math.floor(w), h = w - m, d = (1 - k) * l, v = (1 - k * h) * l, P = (1 - k * (1 - h)) * l;
switch (m) {
case 6:
case 0:
i = l, t = P, r = d;
break;
case 1:
i = v, t = l, r = d;
break;
case 2:
i = d, t = l, r = P;
break;
case 3:
i = d, t = v, r = l;
break;
case 4:
i = P, t = d, r = l;
break;
case 5:
i = l, t = d, r = v;
break;
}
return i *= 255, t *= 255, r *= 255, new s(i, t, r, g);
}
rgbaToHsla(e) {
const i = e.red / 255, t = e.green / 255, r = e.blue / 255, { alpha: k } = e, l = Math.max(i, t, r), g = Math.min(i, t, r);
let w = 0, m = 0, h = (l + g) / 2;
const d = l - g;
if (l !== g) {
switch (m = h > 0.5 ? d / (2 - l - g) : d / (l + g), l) {
case i:
w = (t - r) / d + (t < r ? 6 : 0);
break;
case t:
w = (r - i) / d + 2;
break;
case r:
w = (i - t) / d + 4;
break;
}
w /= 6;
}
return w *= 360, m *= 100, h *= 100, new ee(w, m, h, k);
}
/**
* convert rgb color from HSLa
*
* hue = 0 => 360
* saturation = 0 => 1
* lightness = 0 => 1
*/
hslaToRgba(e) {
const i = e.hue / 360, t = e.saturation / 100, r = e.lightness / 100, { alpha: k } = e;
let l = r, g = r, w = r;
if (t !== 0) {
const m = r < 0.5 ? r * (1 + t) : r + t - r * t, h = 2 * r - m;
l = this.hueToRgb(h, m, i + 1 / 3), g = this.hueToRgb(h, m, i), w = this.hueToRgb(h, m, i - 1 / 3);
}
return l *= 255, g *= 255, w *= 255, new s(l, g, w, k);
}
hueToRgb(e, i, t) {
return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? e + (i - e) * 6 * t : t < 1 / 2 ? i : t < 2 / 3 ? e + (i - e) * (2 / 3 - t) * 6 : e;
}
/**
* The Red, Green, Blue values are given in the range of 0..255,
*
* the red color(R) is calculated from the cyan(C) and black(K) colors,
* the green color(G) is calculated from the magenta(M) and black(K) colors,
* The blue color(B) is calculated from the yellow(Y) and black(K) colors.
*
* Below is the formula of CMYK to RGB convertion
*
* Red = 255 × 1 - min( (1 - Cyan ÷ 100) × (1 - Black) )
* Green = 255 × 1 - min(1 - Magenta ÷ 100) × (1 - Black)
* Blue = 255 × 1 - min(1 - Yellow ÷ 100) × (1 - Black)
*/
cmykToRgba(e) {
const i = e.black / 100, t = e.cyan / 100, r = e.magenta / 100, k = e.yellow / 100;
let l = Math.min(1, (1 - t) * (1 - i)), g = Math.min(1, (1 - r) * (1 - i)), w = Math.min(1, (1 - k) * (1 - i));
return l *= 255, g *= 255, w *= 255, new s(l, g, w, 1);
}
/**
* The max number of R, G, B values are 255, first of all, we divided them by 255 to become the number
* of 0~1, this ratio will be used in the calculation.
* Rc = R ÷ 255
* Gc = G ÷ 255
* Bc = B ÷ 255
* The black key(K) color could be many result, when we assume a black key value,
* the other three colors(cyan, magenta, yellow) can be calculated.
* we can calculate it from the red, green and blue colors, the max number of black key should be :
* K = 1 - min(Rc, Gc, Bc);
*
* or we can assume we run out of the black ink, need use the remaining other three color inks to finish the printing job.
* K = 0;
*
* The cyan color(C) is calculated from the red and black colors:
* C = (1 - Rc - K) ÷ (1 - K)
*
* The magenta color (M) is calculated from the green and black colors:
* M = (1 - Gr - K) ÷ (1 - K)
*
* The yellow color(Y) is calculated from the blue and black colors:
* Y = (1 - Bc - K) ÷ ( 1 - K)
*/
rgbaToCmyk(e) {
const i = e.red / 255, t = e.green / 255, r = e.blue / 255;
let k = 1 - i, l = 1 - t, g = 1 - r, w = Math.min(k, l, g);
return w === 1 ? new pe(0, 0, 0, 1) : (k = (k - w) / (1 - w), l = (l - w) / (1 - w), g = (g - w) / (1 - w), w *= 100, k *= 100, l *= 100, g *= 100, new pe(k, l, g, w));
}
roundNumber(e) {
return Math.round(e * 100) / 100;
}
stringToColor(e) {
const i = e.replace(/ /g, "").toLowerCase();
let t = ge[e] || null;
if (i[0] === "#") {
let l = i.substr(1);
const { length: g } = l;
let w = 1, m;
if (g === 3)
m = l.split("").map((h) => h + h);
else if (g === 6)
m = l.match(/.{2}/g);
else if (g === 8) {
const h = l.substr(-2);
l = l.substr(0, g - 2), w = this.roundNumber(parseInt(h || "FF", 16) / 255), m = l.match(/.{2}/g);
}
m && m.length === 3 && (t = new s(parseInt(m[0], 16), parseInt(m[1], 16), parseInt(m[2], 16), w));
}
const r = i.indexOf("("), k = i.indexOf(")");
if (r !== -1 && k + 1 === i.length) {
const l = i.substr(0, r), g = i.substr(r + 1, k - (r + 1)).split(",");
let w = 1, m, h;
switch (l) {
case "rgba":
w = parseFloat(g.pop());
case "rgb":
t = new s(parseInt(g[0], 10), parseInt(g[1], 10), parseInt(g[2], 10), w);
break;
case "hsla":
w = parseFloat(g.pop());
break;
case "hsl":
m = new ee(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
w
), t = this.hslaToRgba(m);
break;
case "cmyk":
h = new pe(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
parseInt(g[3], 10)
), t = this.cmykToRgba(h);
break;
}
}
return t && (this.rgba = t, this.hsva = this.rgbaToHsva(t)), this;
}
}
var B = /* @__PURE__ */ ((u) => (u.hex = "hex", u.hexa = "hexa", u.rgba = "rgba", u.rgb = "rgb", u.hsla = "hsla", u.hsl = "hsl", u.cmyk = "cmyk", u))(B || {});
class me {
constructor(e) {
/** 所选颜色值 */
n(this, "modelValue", null);
/** 色调颜色值 */
n(this, "hueValue", null);
/** 初始颜色值 */
n(this, "initValue", null);
n(this, "valueChanged", b());
n(this, "initType", null);
// 此处没有监听变量变更后操作的方法 TODO
n(this, "alphaChannelVisibilityChanges", b());
n(this, "colorPresets", []);
const i = e[0], t = I.from(i);
this.setValue(t), this.setHueColor(t);
}
/** 设置值 */
setValueFrom(e, i, t) {
const r = I.from(e);
return this.initValue || (this.initValue = I.from(e)), typeof e == "string" && this.finOutInputType(e), this.setHueColor(r), this.setValue(r), this;
}
setHueColor(e) {
(this.hueValue && e.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new I().setHsva(e.getHsva().hue));
}
get hue() {
return this.hueValue;
}
set hue(e) {
this.hueValue = e;
}
setValue(e) {
var i;
return this.modelValue = e, (e == null ? void 0 : e.toRgbaString()) === ((i = this.valueChanged.value) == null ? void 0 : i.toRgbaString()) && (this.valueChanged.value = e), this;
}
get value() {
return this.modelValue;
}
set value(e) {
this.setValue(e);
}
reset() {
let e;
return this.initValue ? (e = this.initValue.clone(), this.setHueColor(e)) : (e = I.from(new s(255, 0, 0, 1)), this.hueValue = new I().setHsva(e.getHsva().hue)), this.setValue(e), this;
}
showAlphaChannel() {
return this.alphaChannelVisibilityChanges.value = !0, this;
}
finOutInputType(e) {
const i = e.replace(/ /g, "").toLowerCase();
i[0] === "#" && (this.initType = "hex", i.length > 7 && (this.initType = "hexa"));
const t = i.indexOf("(");
switch (i.substr(0, t)) {
case "rgba":
this.initType = "rgba";
break;
case "rgb":
this.initType = "rgb";
break;
case "hsla":
this.initType = "hsla";
break;
case "hsl":
this.initType = "hsl";
break;
case "cmyk":
this.initType = "cmyk";
break;
}
}
/** 设置预定义颜色 */
setColorPresets(e) {
return this.colorPresets = this.setPresets(e), this;
}
setPresets(e) {
const i = [];
return e.map((t) => {
Array.isArray(t) ? i.push(this.setPresets(t)) : i.push(new I(t));
}), i;
}
get presets() {
return this.colorPresets;
}
hasPresets() {
return this.colorPresets.length > 0;
}
}
/** 确定输入颜色类型 */
n(me, "finOutInputType");
function V(u, e) {
if (!u)
return "";
switch (e) {
case B.hex:
return u.toHexString();
case B.hexa:
return u.toHexString(!0);
case B.rgb:
return u.toRgbString();
case B.rgba:
return u.toRgbaString();
case B.hsl:
return u.toHslString();
case B.hsla:
return u.toHslaString();
default:
return u.toRgbaString();
}
}
const ze = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, be = /* @__PURE__ */ Z({
name: "SvPanel",
props: ze,
emits: ["update:color"],
setup(u, e) {
const i = b(null), t = b(null), r = b(u.randomId), k = b(u.allowColorNull);
function l() {
return u.hue ? u.hue.toRgbaString() : "#3f51b5";
}
function g(d, v) {
var P, p;
d = Math.max(0, Math.min(d, 100)), v = Math.max(0, Math.min(v, 100)), i.value && ((P = i.value.style) == null || P.setProperty("top", `${100 - v}%`), (p = i.value.style) == null || p.setProperty("left", `${d}%`));
}
function w() {
const d = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
d.className = "btn btn-secondary";
const v = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
v.style.borderColor = "#dcdfe6";
}
function m({
x: d,
y: v,
height: P,
width: p
}) {
const c = d * 100 / p, M = -(v * 100 / P) + 100;
g(c, M);
const S = u.color == null ? "transparent" : u.color, H = I.from(S);
if (w(), H != null) {
const $ = u.hue.getHsva(), F = H.getHsva(), A = new I().setHsva($.hue, c, M, F.alpha);
e.emit("update:color", A);
}
!H && k.value && e.emit("update:color", null);
}
function h(d) {
if (t.value) {
const {
width: v,
height: P,
top: p,
left: c
} = t.value.getBoundingClientRect(), {
pageX: M,
pageY: S
} = "touches" in d ? d.touches[0] : d, H = Math.max(0, Math.min(M - (c + window.pageXOffset), v)), $ = Math.max(0, Math.min(S - (p + window.pageYOffset), P));
m({
x: H,
y: $,
height: P,
width: v
});
}
}
return K(() => {
const d = u.color.getHsva();
g(d.saturation, d.value);
}), E(() => u.color, (d) => {
d.getHsva();
}), E(() => u.color, (d) => {
const v = d.getHsva();
g(v.saturation, v.value);
}), () => y("div", {
class: "f-sv-panel-component",
ref: t,
style: {
backgroundColor: l()
},
onMousedown: Q((d) => h(d), ["prevent"]),
onTouchstart: Q((d) => h(d), ["prevent"])
}, [y("div", {
class: "color-svpanel__white"
}, null), y("div", {
class: "color-svpanel__black"
}, null), y("div", {
class: "color-svpanel__cursor",
ref: i
}, [y("div", null, null)])]);
}
}), Je = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
allowColorNull: { type: Boolean, default: !1 },
onChange: { type: Function }
}, Pe = /* @__PURE__ */ Z({
name: "Hue",
props: Je,
emits: ["update:color", "update:hue"],
setup(u, e) {
const i = b(u.hue), t = b(u.allowColorNull), r = [];
function k(p) {
p.preventDefault(), g(p);
}
const l = b(null);
function g(p) {
if (l.value) {
const {
width: c,
height: M,
top: S,
left: H
} = l.value.getBoundingClientRect(), {
pageX: $,
pageY: F
} = "touches" in p ? p.touches[0] : p, A = Math.max(0, Math.min($ - (H + window.pageXOffset), c)), X = Math.max(0, Math.min(F - (S + window.pageYOffset), M));
P({
x: A,
y: X,
height: M,
width: c
});
}
}
function w() {
r.forEach((p) => p()), r.length = 0;
}
function m(p) {
k(p), document.addEventListener("mouseup", w), document.addEventListener("touchend", w), document.addEventListener("touchmove", k);
}
const h = (p) => {
m(p), p.stopPropagation();
};
K(() => {
document.querySelectorAll(".f-hue-component").forEach((M) => {
M.addEventListener("mousedown", h), M.addEventListener("touchstart", h);
});
const c = u.color.getHsva();
v(c.hue);
});
const d = b(null);
function v(p) {
var S;
const c = Math.max(0, Math.min(p / 360 * 100, 100));
d.value && ((S = d.value.style) == null || S.setProperty("top", `${c}%`));
}
function P({
x: p,
y: c,
height: M,
width: S
}) {
const H = c / M * 360;
v(H);
const $ = u.color.getHsva(), F = new I().setHsva(H, $.saturation, $.value, $.alpha), A = new I().setHsva(H, 100, 100, $.alpha);
(u.color != null || u.color == null && t.value) && (e.emit("update:hue", A), e.emit("update:color", F));
}
return E(i, (p) => {
const c = p.getHsva();
v(c.hue);
}), E(() => u.color, (p) => {
const c = p.getHsva();
v(c.hue);
}), () => y("div", {
class: "f-hue-component",
ref: l,
onMousedown: Q((p) => g(p), ["prevent"]),
onTouchstart: Q((p) => g(p), ["prevent"])
}, [y("div", {
class: "color-hue-slider__bar"
}, null), y("div", {
class: "color-hue-slider__thumb",
ref: d
}, null)]);
}
}), Ke = {
color: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, Ie = /* @__PURE__ */ Z({
name: "Alpha",
props: Ke,
emits: ["update:color"],
setup(u, e) {
const i = b(null), t = b(null), r = b(u.randomId), k = b(u.allowColorNull), l = (h) => {
var P;
const d = Math.max(0, Math.min(h * 100, 100));
t.value && ((P = t.value.style) == null || P.setProperty("left", `${d}%`));
};
function g(h) {
if (i.value) {
const {
width: d,
height: v,
top: P,
left: p
} = i.value.getBoundingClientRect(), {
pageX: c,
pageY: M
} = "touches" in h ? h.touches[0] : h, S = Math.max(0, Math.min(c - (p + window.pageXOffset), d));
m({
x: S,
width: d
});
}
}
function w() {
const h = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
h.className = "btn btn-secondary";
const d = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
d.style.borderColor = "#dcdfe6";
}
const m = ({
x: h,
width: d
}) => {
const v = h / d;
l(v), w();
const P = u.color.getHsva(), p = new I().setHsva(P.hue, P.saturation, P.value, v);
u.color != null ? e.emit("update:color", p) : u.color == null && k.value && e.emit("update:color", null);
};
return K(() => {
const h = u.color.getHsva();
l(h.alpha);
}), E(() => u.color, (h) => {
const d = h.getHsva();
l(d.alpha);
}), () => y("div", {
class: "f-alpha-component",
ref: i,
onMousedown: Q((h) => g(h), ["prevent"]),
onTouchstart: Q((h) => g(h), ["prevent"])
}, [y("div", {
class: "color-alpha-slider__bar"
}, [fe(" ")]), y("div", {
class: "color-alpha-slider__thumb",
ref: t
}, null)]);
}
}), Qe = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
colorPresets: { type: Object, default: "" },
randomId: { type: String, default: "" }
}, Se = /* @__PURE__ */ Z({
name: "Preset",
props: Qe,
emits: ["update:hue", "update:color"],
setup(u, e) {
const i = b(new I()), t = b(u.colorPresets), r = b(u.randomId);
function k() {
const m = document.getElementById(`farris-color-picker-plus-sure-${r.value}`);
m.className = "btn btn-secondary";
const h = document.getElementById(`farris-color-picker-plus-input-${r.value}`);
h.style.borderColor = "#dcdfe6";
}
function l(m) {
k();
const h = m.getRgba(), d = m.getHsva(), v = new I().setRgba(h.red, h.green, h.blue, h.alpha), P = new I().setHsva(d.hue);
i.value = m, e.emit("update:hue", P), e.emit("update:color", v);
}
function g(m) {
const h = i.value.getRgba().toString(), d = i.value.getHsva().toString(), v = m.getRgba().toString() === h && m.getHsva().toString() === d;
return {
"color-preset__color-selector": v,
selected: v
};
}
function w(m, h) {
return y("div", {
class: "color-preset__color-selector"
}, [y("div", {
key: h,
class: g(m),
style: {
backgroundColor: m.toRgbString()
},
onClick: () => l(m)
}, null)]);
}
return () => y("div", {
class: "f-preset-component"
}, [y("div", {
class: "color-preset__colors"
}, [t.value.map((m, h) => w(m, h))])]);
}
}), se = /* @__PURE__ */ Z({
name: "FColorPicker",
props: ve,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(u, e) {
const i = b(new I(u.color)), t = b(u.color), r = b(u.disabled), k = b(u.color), l = b(u.allowColorNull), g = b(u.presets), w = b(!1), m = b(!1), h = b(!1), d = b("HEX"), v = Math.floor(Math.random() * 1e3).toString();
let P = -1, p;
const c = new me("#000000"), M = b(u.color);
let S, H;
const $ = b(null), F = b(null), A = b(null), X = O(() => !p && c && c.initType ? c.initType : p), R = O({
get() {
return p && t.value !== null ? (_(p), V(new I(t.value), B[p])) : t.value;
},
set(f) {
f !== null && (U(f), W(f));
}
}), C = b(R.value), N = O(() => P > -1), Y = O(() => g.value.length > 0), re = O(() => ({
"background-color": k.value
})), ne = O(() => m.value && w.value ? "display:flex" : "display:none"), G = [{
text: "HEX",
type: B.hex
}, {
text: "RGBA",
type: B.rgba
}];
function le() {
const f = document.getElementById("farris-color-picker-panel");
f.id = `farris-color-picker-panel-${v}`;
const o = document.getElementById("farris-color-picker-plus-sure");
o.id = `farris-color-picker-plus-sure-${v}`;
const x = document.getElementById("farris-color-picker-plus-input");
x.id = `farris-color-picker-plus-input-${v}`, H = document.getElementById(`farris-color-picker-plus-sure-${v}`), S = document.getElementById(`farris-color-picker-panel-${v}`), S.className = "color-picker-panel disabled";
}
function D() {
if (!l.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${v}`).classList.toggle("disabled");
const o = document.getElementById(`farris-color-picker-plus-input-${v}`);
o.style.borderColor = "red";
}
}
function ue() {
t.value && (U(t.value), !t.value && l.value || (t.value = V(new I(t.value), B[X.value])), C.value = R.value), T(_(c.initType));
}
function ae() {
t.value && U(t.value), c.hasPresets() || c.setColorPresets(g.value), t.value ? k.value = V(new I(t.value), B[X.value]) : !t.value && l.value && (k.value = null);
}
function oe() {
E(c.valueChanged, (f) => {
const o = V(f, B[p || c.initType]);
t.value = o;
});
}
function T(f) {
d.value = G[f].text;
}
function ce() {
var f;
m.value = !!(p != null && p.includes("a") || (f = c.initType) != null && f.includes("a"));
}
we(() => {
c.setColorPresets(g.value || ["#eaecf3"]);
}), K(() => {
le(), D(), ue(), ae();
}), oe(), E(d, () => {
R.value = V(new I(t.value), B[p || c.initType]), i.value = new I(R.value), ce();
}), E(t, (f) => {
V(c.value, c.initType) !== f && f !== null && U(f), T(_(c.initType));
}), E(i, (f) => {
t.value = V(f, B[p || c.initType]), U(t.value), R.value = t.value;
});
function W(f) {
const o = document.getElementById(`farris-color-picker-plus-input-${v}`);
(f === "" || f === void 0 || f == null) && !l.value ? (t.value = null, o.style.borderColor = "red", H.className = "btn btn-secondary disabled") : (o.style.borderColor = "#dcdfe6", H.className = "btn btn-secondary");
}
function de(f) {
var o, x;
if (f == null || f.stopPropagation(), l.value) {
k.value = (t == null ? void 0 : t.value) ?? null;
const j = {
elementValue: k
};
e.emit("valueChanged", j), L();
}
if (!l.value && !(R.value === void 0 || R.value == null || R.value === "")) {
(x = (o = $.value) == null ? void 0 : o.style) == null || x.setProperty("background", t.value), h.value = !0, k.value = t.value;
const j = {
elementValue: k
};
e.emit("valueChanged", j), L();
}
!M.value && !t.value && !h.value && l && L(), W(t.value), R.value = t.value, H.classList.contains("disabled") || (C.value = t.value, w.value = !1);
}
function U(f) {
c == null || c.setValueFrom(f, v, l.value);
}
function he(f) {
S = document.getElementById(`farris-color-picker-panel-${v}`);
const o = S.className === "color-picker-panel";
r.value || o || (w.value = !0, S.classList.toggle("disabled"), D(), U(t.value), f.stopPropagation());
}
function L() {
S = document.getElementById(`farris-color-picker-panel-${v}`), S.className = "color-picker-panel disabled";
}
function _(f) {
const o = G.findIndex((x) => x.type === f);
return P = o, o;
}
function z(f) {
if (!H.classList.contains("disabled")) {
const o = G.length;
P = (o + P + (f === "up" ? 1 : -1)) % o, p = G[P].type, T(P), U(t.value);
}
}
return () => y("div", {
class: "f-color-picker-component",
ref: F
}, [y("div", {
class: ["color-picker-panel", {
disabled: r.value
}],
id: "farris-color-picker-panel",
ref: A,
onClick: (f) => f.stopPropagation(),
style: "top:30px"
}, [y("div", {
class: "color-picker-main"
}, [y(Pe, {
hue: c.hue,
"onUpdate:hue": (f) => c.hue = f,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (f) => i.value = f
}, null), y(be, {
randomId: v,
hue: c.hue,
"onUpdate:hue": (f) => c.hue = f,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (f) => i.value = f
}, null)]), y(Ie, {
style: ne.value,
randomId: v,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (f) => i.value = f
}, null), y("div", {
class: "input-btn",
style: "display:flex;align-items: center;"
}, [q(y("span", {
style: "width:40px;margin-right:10px;"
}, [d.value]), [[J, Y]]), q(y("input", {
type: "text",
title: "color-picker-plus",
id: "farris-color-picker-plus-input",
"onUpdate:modelValue": (f) => R.value = f,
style: "float:none"
}, null), [[ye, R.value]]), q(y("div", {
class: "type-icon-btn-wrapper",
style: "cursor:pointer"
}, [y("span", {
class: "f-icon f-icon-arrow-60-up type-icon-btn",
onClick: () => z("up")
}, null), y("span", {
class: "f-icon f-icon-arrow-60-down type-icon-btn",
onClick: () => z("down")
}, null)]), [[J, Y]]), y("div", {
class: "input-btn"
}, [y("button", {
id: "farris-color-picker-plus-sure",
class: "btn btn-secondary",
onClick: (f) => de(f)
}, [fe("确定")])])]), q(y(Se, {
color: i.value,
"onUpdate:color": (f) => i.value = f,
hue: c.hue,
"onUpdate:hue": (f) => c.hue = f,
randomId: v,
colorPresets: c.presets
}, null), [[J, N]])]), y("div", {
class: "color-picker-wrapper"
}, [y("input", {
title: "color-picker-input",
type: "text",
class: "color-picker-input form-control",
value: C.value,
readonly: r.value,
onClick: (f) => f.stopPropagation()
}, null), y("div", {
class: "color-picker-trigger",
onClick: he
}, [y("div", {
class: "color-picker-trigger-inner"
}, [y("div", {
style: re.value
}, null)])])])]);
}
}), Ze = /* @__PURE__ */ Z({
name: "FColorPickerDesign",
props: ve,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(u, e) {
const i = b(new I(u.color)), t = b(u.color), r = b(u.disabled), k = b(u.color), l = b(u.allowColorNull), g = b(u.presets), w = b(!1), m = b(!1), h = b(!1), d = b("HEX"), v = Math.floor(Math.random() * 1e3).toString();
let P = -1, p;
const c = new me("#000000"), M = b(u.color);
let S, H;
const $ = b(null), F = b(null), A = b(), X = Be("design-item-context"), R = Re(A, X);
K(() => {
A.value.componentInstance = R;
}), e.expose(R.value);
const C = O(() => !p && c && c.initType ? c.initType : p), N = O({
get() {
return p && t.value !== null ? (z(p), V(new I(t.value), B[p])) : t.value;
},
set(o) {
o !== null && (L(o), U(o));
}
}), Y = b(N.value), re = O(() => P > -1), ne = O(() => g.value.length > 0), G = O(() => ({
"background-color": k.value
})), le = O(() => m.value && w.value ? "display:flex" : "display:none"), D = [{
text: "HEX",
type: B.hex
}, {
text: "RGBA",
type: B.rgba
}];
function ue() {
const o = document.getElementById("farris-color-picker-panel");
o.id = `farris-color-picker-panel-${v}`;
const x = document.getElementById("farris-color-picker-plus-sure");
x.id = `farris-color-picker-plus-sure-${v}`;
const j = document.getElementById("farris-color-picker-plus-input");
j.id = `farris-color-picker-plus-input-${v}`, H = document.getElementById(`farris-color-picker-plus-sure-${v}`), S = document.getElementById(`farris-color-picker-panel-${v}`), S.className = "color-picker-panel disabled";
}
function ae() {
if (!l.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${v}`).classList.toggle("disabled");
const x = document.getElementById(`farris-color-picker-plus-input-${v}`);
x.style.borderColor = "red";
}
}
function oe() {
t.value && (L(t.value), !t.value && l.value || (t.value = V(new I(t.value), B[C.value])), Y.value = N.value), W(z(c.initType));
}
function T() {
t.value && L(t.value), c.hasPresets() || c.setColorPresets(g.value), t.value ? k.value = V(new I(t.value), B[C.value]) : !t.value && l.value && (k.value = null);
}
function ce() {
E(c.valueChanged, (o) => {
const x = V(o, B[p || c.initType]);
t.value = x;
});
}
function W(o) {
d.value = D[o].text;
}
function de() {
var o;
m.value = !!(p != null && p.includes("a") || (o = c.initType) != null && o.includes("a"));
}
we(() => {
c.setColorPresets(g.value || ["#eaecf3"]);
}), K(() => {
ue(), ae(), oe(), T();
}), ce(), E(d, () => {
N.value = V(new I(t.value), B[p || c.initType]), i.value = new I(N.value), de();
}), E(t, (o) => {
V(c.value, c.initType) !== o && o !== null && L(o), W(z(c.initType));
}), E(i, (o) => {
t.value = V(o, B[p || c.initType]), L(t.value), N.value = t.value;
});
function U(o) {
const x = document.getElementById(`farris-color-picker-plus-input-${v}`);
(o === "" || o === void 0 || o == null) && !l.value ? (t.value = null, x.style.borderColor = "red", H.className = "btn btn-secondary disabled") : (x.style.borderColor = "#dcdfe6", H.className = "btn btn-secondary");
}
function he() {
var o, x;
if (l.value) {
k.value = (t == null ? void 0 : t.value) ?? null;
const j = {
elementValue: k
};
e.emit("valueChanged", j), S.classList.toggle("disabled");
}
if (!l.value && !(N.value === void 0 || N.value == null || N.value === "")) {
(x = (o = $.value) == null ? void 0 : o.style) == null || x.setProperty("background", t.value), h.value = !0, k.value = t.value;
const j = {
elementValue: k
};
e.emit("valueChanged", j), S.classList.toggle("disabled");
}
!M.value && !t.value && !h.value && l && S.classList.toggle("disabled"), U(t.value), N.value = t.value, H.classList.contains("disabled") || (Y.value = t.value, w.value = !1);
}
function L(o) {
c == null || c.setValueFrom(o, v, l.value);
}
function _(o) {
r.value || (w.value = !0, S.classList.toggle("disabled"), ae(), L(t.value));
}
function z(o) {
const x = D.findIndex((j) => j.type === o);
return P = x, x;
}
function f(o) {
if (!H.classList.contains("disabled")) {
const x = D.length;
P = (x + P + (o === "up" ? 1 : -1)) % x, p = D[P].type, W(P), L(t.value);
}
}
return () => y("div", {
class: "f-color-picker-component",
ref: A
}, [y("div", {
class: ["color-picker-panel", {
disabled: r.value
}],
id: "farris-color-picker-panel",
ref: F,
onClick: (o) => o.stopPropagation,
style: "top:30px"
}, [y("div", {
class: "color-picker-main"
}, [y(Pe, {
hue: c.hue,
"onUpdate:hue": (o) => c.hue = o,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (o) => i.value = o
}, null), y(be, {
randomId: v,
hue: c.hue,
"onUpdate:hue": (o) => c.hue = o,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (o) => i.value = o
}, null)]), y(Ie, {
style: le.value,
randomId: v,
allowColorNull: l.value,
color: i.value,
"onUpdate:color": (o) => i.value = o
}, null), y("div", {
class: "input-btn",
style: "display:flex;align-items: center;"
}, [q(y("span", {
style: "width:40px;margin-right:10px;"
}, [d.value]), [[J, ne]]), q(y("input", {
title: "color-picker-plus-input",
type: "text",
id: "farris-color-picker-plus-input",
"onUpdate:modelValue": (o) => N.value = o,
style: "float:none"
}, null), [[ye, N.value]]), q(y("div", {
class: "type-icon-btn-wrapper",
style: "cursor:pointer"
}, [y("span", {
class: "f-icon f-icon-arrow-60-up type-icon-btn",
onClick: () => f("up")
}, null), y("span", {
class: "f-icon f-icon-arrow-60-down type-icon-btn",
onClick: () => f("down")
}, null)]), [[J, ne]]), y("div", {
class: "input-btn"
}, [y("button", {
id: "farris-color-picker-plus-sure",
class: "btn btn-secondary",
onClick: he
}, [fe("确定")])])]), q(y(Se, {
color: i.value,
"onUpdate:color": (o) => i.value = o,
colorPresets: c.presets,
hue: c.hue,
"onUpdate:hue": (o) => c.hue = o,
randomId: v
}, null), [[J, re]])]), y("div", {
class: "color-picker-wrapper"
}, [y("input", {
type: "text",
class: "color-picker-input form-control",
value: Y.value,
readonly: r.value,
onClick: (o) => o.stopPropagation()
}, null), y("div", {
class: "color-picker-trigger",
onClick: _
}, [y("div", {
class: "color-picker-trigger-inner"
}, [y("div", {
style: G.value
}, null)])])])]);
}
});
se.register = (u, e, i) => {
u["color-picker"] = se, e["color-picker"] = ke;
};
se.registerDesigner = (u, e, i) => {
u["color-picker"] = Ze, e["color-picker"] = ke;
};
const at = Ve(se);
export {
se as FColorPicker,
ve as colorPickerProps,
at as default,
ke as propsResolver
};