@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,375 lines (1,374 loc) • 55.1 kB
JavaScript
var Oe = Object.defineProperty;
var Ae = (l, e, r) => e in l ? Oe(l, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : l[e] = r;
var n = (l, e, r) => Ae(l, typeof e != "symbol" ? e + "" : e, r);
import { ref as P, defineComponent as T, onMounted as K, watch as L, createVNode as k, withModifiers as C, createTextVNode as fe, computed as x, onBeforeMount as ke, withDirectives as G, vShow as Z, vModelText as be, inject as Ie } from "vue";
import { isPlainObject as ye, cloneDeep as Pe } from "lodash-es";
import { withInstall as je } from "../common/index.esm.js";
const Se = {}, Me = {};
function ve(l) {
const { properties: e, title: r, ignore: t } = l, i = t && Array.isArray(t), p = Object.keys(e).reduce((u, g) => ((!i || !t.find((w) => w === g)) && (u[g] = e[g].type === "object" && e[g].properties ? ve(e[g]) : Pe(e[g].default)), u), {});
if (r && (!i || !t.find((u) => u === "id"))) {
const u = r.toLowerCase().replace(/-/g, "_");
p.id = `${u}_${Math.random().toString().slice(2, 6)}`;
}
return p;
}
function Le(l) {
const { properties: e, title: r, required: t } = l;
if (t && Array.isArray(t)) {
const i = t.reduce((p, u) => (p[u] = e[u].type === "object" && e[u].properties ? ve(e[u]) : Pe(e[u].default), p), {});
if (r && t.find((p) => p === "id")) {
const p = r.toLowerCase().replace(/-/g, "_");
i.id = `${p}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
return {
type: r
};
}
function He(l, e = {}, r) {
const t = Se[l];
if (t) {
let i = Le(t);
const p = Me[l];
return i = p ? p({ getSchemaByType: He }, i, e, r) : i, i;
}
return null;
}
function De(l, e) {
const r = ve(e);
return Object.keys(r).reduce((t, i) => (Object.prototype.hasOwnProperty.call(l, i) && (t[i] && ye(t[i]) && ye(l[i] || !l[i]) ? Object.assign(t[i], l[i] || {}) : t[i] = l[i]), t), r), r;
}
function Be(l, e) {
return Object.keys(l).filter((t) => l[t] != null).reduce((t, i) => {
if (e.has(i)) {
const p = e.get(i);
if (typeof p == "string")
t[p] = l[i];
else {
const u = p(i, l[i], l);
Object.assign(t, u);
}
} else
t[i] = l[i];
return t;
}, {});
}
function xe(l, e, r = /* @__PURE__ */ new Map()) {
const t = De(l, e);
return Be(t, r);
}
function Fe(l = {}) {
function e(o, h, c, d) {
if (typeof c == "number")
return d[o].length === c;
if (typeof c == "object") {
const b = Object.keys(c)[0], f = c[b];
if (b === "not")
return Number(d[o].length) !== Number(f);
if (b === "moreThan")
return Number(d[o].length) >= Number(f);
if (b === "lessThan")
return Number(d[o].length) <= Number(f);
}
return !1;
}
function r(o, h, c, d) {
return d[o] && d[o].propertyValue && String(d[o].propertyValue.value) === String(c);
}
const t = /* @__PURE__ */ new Map([
["length", e],
["getProperty", r]
]);
Object.keys(l).reduce((o, h) => (o.set(h, l[h]), o), t);
function i(o, h) {
const c = o;
return typeof h == "number" ? [{ target: c, operator: "length", param: null, value: Number(h) }] : typeof h == "boolean" ? [{ target: c, operator: "getProperty", param: o, value: !!h }] : typeof h == "object" ? Object.keys(h).map((d) => {
if (d === "length")
return { target: c, operator: "length", param: null, value: h[d] };
const b = d, f = h[d];
return { target: c, operator: "getProperty", param: b, value: f };
}) : [];
}
function p(o) {
return Object.keys(o).reduce((c, d) => {
const b = i(d, o[d]);
return c.push(...b), c;
}, []);
}
function u(o, h) {
if (t.has(o.operator)) {
const c = t.get(o.operator);
return c && c(o.target, o.param, o.value, h) || !1;
}
return !1;
}
function g(o, h) {
return p(o).reduce((b, f) => b && u(f, h), !0);
}
function w(o, h) {
const c = Object.keys(o), d = c.includes("allOf"), b = c.includes("anyOf"), f = d || b, H = (f ? o[f ? d ? "allOf" : "anyOf" : "allOf"] : [o]).map((A) => g(A, h));
return d ? !H.includes(!1) : H.includes(!0);
}
return { parseValueSchema: w };
}
const qe = {}, Ue = {};
Fe();
function Xe(l, e, r = /* @__PURE__ */ new Map(), t = (u, g, w, o) => g, i = {}, p = (u) => u) {
return Se[e.title] = e, Me[e.title] = t, qe[e.title] = i, Ue[e.title] = p, (u = {}, g = !0) => {
if (!g)
return Be(u, r);
const w = xe(u, e, r), o = Object.keys(l).reduce((h, c) => (h[c] = l[c].default, h), {});
return Object.assign(o, w);
};
}
const Ye = "https://json-schema.org/draft/2020-12/schema", Ge = "https://farris-design.gitee.io/color-picker.schema.json", We = "color-picker", ze = "A Farris Component", Je = "object", Qe = {
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
}
}, Ze = [
"id",
"type"
], Ke = {
$schema: Ye,
$id: Ge,
title: We,
description: ze,
type: Je,
properties: Qe,
required: Ze
};
function Ce(l, e, r) {
return e;
}
function Te(l, e) {
return { customClass: e.class, customStyle: e.style };
}
const _e = /* @__PURE__ */ new Map([
["appearance", Te]
]), et = "color-picker", tt = "A Farris Component", nt = "object", at = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, st = {
title: et,
description: tt,
type: nt,
categories: at
}, me = {
/** 初始颜色 */
color: { type: String, default: "#e1e2e3" },
/** 禁用 */
disabled: { type: Boolean, default: !1 },
/** 预置颜色 */
presets: { type: Array, default: [] },
/** 允许颜色为空 */
allowColorNull: { type: Boolean, default: !1 },
/** 颜色值变化事件 */
onValueChanged: { type: Function, default: () => {
} }
}, $e = Xe(me, Ke, _e, Ce, st);
class ie {
}
class pe extends ie {
constructor(e, r, t, i) {
super(), this.cyan = e, this.magenta = r, this.yellow = t, this.black = i;
}
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 te extends ie {
constructor(e, r, t, i) {
super(), this.hue = e, this.saturation = r, this.lightness = t, this.alpha = i;
}
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 ne extends ie {
constructor(e, r, t, i) {
super(), this.hue = e, this.saturation = r, this.value = t, this.alpha = i;
}
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, r, t, i) {
super(), this.red = e, this.green = r, this.blue = t, this.alpha = i;
}
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 M {
constructor(e) {
/**
* base color used to calculate other
* default color
* rgb(255, 0, 0)
* hsl(0, 100%, 50%)
* 初始色#ff0000
*/
n(this, "hsva", new ne(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 M(e) : e instanceof M ? e.clone() : e instanceof s ? new M().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof ne ? new M().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof te ? new M().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new M(e);
}
/**
* make from existing color new color object
*/
clone() {
return M.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, r = 100, t = 100, i = 1) {
return e != null && (this.hsva.hue = e), r != null && (this.hsva.saturation = r), t != null && (this.hsva.value = t), i != null && (i = i > 1 ? 1 : i < 0 ? 0 : i, this.hsva.alpha = i), this.rgba = this.hsvaToRgba(this.hsva), this;
}
/**
* define Color from RGBa
*/
setRgba(e, r, t, i = 1) {
return e != null && (this.rgba.red = e), r != null && (this.rgba.green = r), t != null && (this.rgba.blue = t), i != null && (i = i > 1 ? 1 : i < 0 ? 0 : i, this.rgba.alpha = i), this.hsva = this.rgbaToHsva(this.rgba), this;
}
/**
* define Color from HSLa
*/
setHsla(e, r, t, i = 1) {
i != null && (i = i > 1 ? 1 : i < 0 ? 0 : i, this.rgba.alpha = i);
const p = new te(e, r, t, i);
return this.rgba = this.hslaToRgba(p), this.hsva = this.rgbaToHsva(this.rgba), this;
}
/**
* return hexadecimal value formatted as '#341d2a' or '#341d2aFF' if alhpa channel is enabled
*/
toHexString(e = !1) {
let r = "#" + (16777216 | this.rgba.getRed() << 16 | this.rgba.getGreen() << 8 | this.rgba.getBlue()).toString(16).substr(1);
return e && (r += (256 | Math.round(this.rgba.alpha * 255)).toString(16).substr(1)), r.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 ne(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: r } = e, t = e.saturation / 100, i = e.value / 100, p = (2 - t) * e.value / 2, u = t * i / (p <= 1 ? p : 2 - p) || 0;
return new te(r, p * 100, u * 100, e.alpha);
}
hslaToHsva(e) {
const { hue: r } = e, t = e.lightness / 100 * 2, i = e.saturation / 100 * (t <= 1 ? t : 2 - t), p = (t + i) / 2, u = 2 * i / (t + i) || 0;
return new ne(r, u, p, e.alpha);
}
rgbaToHsva(e) {
const r = e.red / 255, t = e.green / 255, i = e.blue / 255, { alpha: p } = e, u = Math.max(r, t, i), g = Math.min(r, t, i), w = u - g;
let o = 0, h = u === 0 ? 0 : w / u, c = u;
if (u !== g) {
switch (u) {
case r:
o = (t - i) / w + (t < i ? 6 : 0);
break;
case t:
o = 2 + (i - r) / w;
break;
case i:
o = 4 + (r - t) / w;
break;
}
o /= 6;
}
return o *= 360, h *= 100, c *= 100, new ne(o, h, c, p);
}
hsvaToRgba(e) {
let r = 1, t = 0, i = 0;
const p = e.saturation / 100, u = e.value / 100, { alpha: g } = e, w = e.hue / 60, o = Math.floor(w), h = w - o, c = (1 - p) * u, d = (1 - p * h) * u, b = (1 - p * (1 - h)) * u;
switch (o) {
case 6:
case 0:
r = u, t = b, i = c;
break;
case 1:
r = d, t = u, i = c;
break;
case 2:
r = c, t = u, i = b;
break;
case 3:
r = c, t = d, i = u;
break;
case 4:
r = b, t = c, i = u;
break;
case 5:
r = u, t = c, i = d;
break;
}
return r *= 255, t *= 255, i *= 255, new s(r, t, i, g);
}
rgbaToHsla(e) {
const r = e.red / 255, t = e.green / 255, i = e.blue / 255, { alpha: p } = e, u = Math.max(r, t, i), g = Math.min(r, t, i);
let w = 0, o = 0, h = (u + g) / 2;
const c = u - g;
if (u !== g) {
switch (o = h > 0.5 ? c / (2 - u - g) : c / (u + g), u) {
case r:
w = (t - i) / c + (t < i ? 6 : 0);
break;
case t:
w = (i - r) / c + 2;
break;
case i:
w = (r - t) / c + 4;
break;
}
w /= 6;
}
return w *= 360, o *= 100, h *= 100, new te(w, o, h, p);
}
/**
* convert rgb color from HSLa
*
* hue = 0 => 360
* saturation = 0 => 1
* lightness = 0 => 1
*/
hslaToRgba(e) {
const r = e.hue / 360, t = e.saturation / 100, i = e.lightness / 100, { alpha: p } = e;
let u = i, g = i, w = i;
if (t !== 0) {
const o = i < 0.5 ? i * (1 + t) : i + t - i * t, h = 2 * i - o;
u = this.hueToRgb(h, o, r + 1 / 3), g = this.hueToRgb(h, o, r), w = this.hueToRgb(h, o, r - 1 / 3);
}
return u *= 255, g *= 255, w *= 255, new s(u, g, w, p);
}
hueToRgb(e, r, t) {
return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? e + (r - e) * 6 * t : t < 1 / 2 ? r : t < 2 / 3 ? e + (r - 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 r = e.black / 100, t = e.cyan / 100, i = e.magenta / 100, p = e.yellow / 100;
let u = Math.min(1, (1 - t) * (1 - r)), g = Math.min(1, (1 - i) * (1 - r)), w = Math.min(1, (1 - p) * (1 - r));
return u *= 255, g *= 255, w *= 255, new s(u, 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 r = e.red / 255, t = e.green / 255, i = e.blue / 255;
let p = 1 - r, u = 1 - t, g = 1 - i, w = Math.min(p, u, g);
return w === 1 ? new pe(0, 0, 0, 1) : (p = (p - w) / (1 - w), u = (u - w) / (1 - w), g = (g - w) / (1 - w), w *= 100, p *= 100, u *= 100, g *= 100, new pe(p, u, g, w));
}
roundNumber(e) {
return Math.round(e * 100) / 100;
}
stringToColor(e) {
const r = e.replace(/ /g, "").toLowerCase();
let t = ge[e] || null;
if (r[0] === "#") {
let u = r.substr(1);
const { length: g } = u;
let w = 1, o;
if (g === 3)
o = u.split("").map((h) => h + h);
else if (g === 6)
o = u.match(/.{2}/g);
else if (g === 8) {
const h = u.substr(-2);
u = u.substr(0, g - 2), w = this.roundNumber(parseInt(h || "FF", 16) / 255), o = u.match(/.{2}/g);
}
o && o.length === 3 && (t = new s(parseInt(o[0], 16), parseInt(o[1], 16), parseInt(o[2], 16), w));
}
const i = r.indexOf("("), p = r.indexOf(")");
if (i !== -1 && p + 1 === r.length) {
const u = r.substr(0, i), g = r.substr(i + 1, p - (i + 1)).split(",");
let w = 1, o, h;
switch (u) {
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":
o = new te(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
w
), t = this.hslaToRgba(o);
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 V = /* @__PURE__ */ ((l) => (l.hex = "hex", l.hexa = "hexa", l.rgba = "rgba", l.rgb = "rgb", l.hsla = "hsla", l.hsl = "hsl", l.cmyk = "cmyk", l))(V || {});
class we {
constructor(e) {
/** 所选颜色值 */
n(this, "modelValue", null);
/** 色调颜色值 */
n(this, "hueValue", null);
/** 初始颜色值 */
n(this, "initValue", null);
n(this, "valueChanged", P());
n(this, "initType", null);
// 此处没有监听变量变更后操作的方法 TODO
n(this, "alphaChannelVisibilityChanges", P());
n(this, "colorPresets", []);
const r = e[0], t = M.from(r);
this.setValue(t), this.setHueColor(t);
}
/** 设置值 */
setValueFrom(e, r, t) {
const i = M.from(e);
return this.initValue || (this.initValue = M.from(e)), typeof e == "string" && this.finOutInputType(e), this.setHueColor(i), this.setValue(i), this;
}
setHueColor(e) {
(this.hueValue && e.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new M().setHsva(e.getHsva().hue));
}
get hue() {
return this.hueValue;
}
set hue(e) {
this.hueValue = e;
}
setValue(e) {
var r;
return this.modelValue = e, (e == null ? void 0 : e.toRgbaString()) === ((r = this.valueChanged.value) == null ? void 0 : r.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 = M.from(new s(255, 0, 0, 1)), this.hueValue = new M().setHsva(e.getHsva().hue)), this.setValue(e), this;
}
showAlphaChannel() {
return this.alphaChannelVisibilityChanges.value = !0, this;
}
finOutInputType(e) {
const r = e.replace(/ /g, "").toLowerCase();
r[0] === "#" && (this.initType = "hex", r.length > 7 && (this.initType = "hexa"));
const t = r.indexOf("(");
switch (r.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 r = [];
return e.map((t) => {
Array.isArray(t) ? r.push(this.setPresets(t)) : r.push(new M(t));
}), r;
}
get presets() {
return this.colorPresets;
}
hasPresets() {
return this.colorPresets.length > 0;
}
}
/** 确定输入颜色类型 */
n(we, "finOutInputType");
function j(l, e) {
if (!l)
return "";
switch (e) {
case V.hex:
return l.toHexString();
case V.hexa:
return l.toHexString(!0);
case V.rgb:
return l.toRgbString();
case V.rgba:
return l.toRgbaString();
case V.hsl:
return l.toHslString();
case V.hsla:
return l.toHslaString();
default:
return l.toRgbaString();
}
}
const rt = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, Re = /* @__PURE__ */ T({
name: "SvPanel",
props: rt,
emits: ["update:color"],
setup(l, e) {
const r = P(null), t = P(null), i = P(l.randomId), p = P(l.allowColorNull);
function u() {
return l.hue ? l.hue.toRgbaString() : "#3f51b5";
}
function g(c, d) {
var b, f;
c = Math.max(0, Math.min(c, 100)), d = Math.max(0, Math.min(d, 100)), r.value && ((b = r.value.style) == null || b.setProperty("top", `${100 - d}%`), (f = r.value.style) == null || f.setProperty("left", `${c}%`));
}
function w() {
const c = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
c.className = "btn btn-secondary";
const d = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
d.style.borderColor = "#dcdfe6";
}
function o({
x: c,
y: d,
height: b,
width: f
}) {
const v = c * 100 / f, N = -(d * 100 / b) + 100;
g(v, N);
const H = l.color == null ? "transparent" : l.color, $ = M.from(H);
if (w(), $ != null) {
const A = l.hue.getHsva(), D = $.getHsva(), I = new M().setHsva(A.hue, v, N, D.alpha);
e.emit("update:color", I);
}
!$ && p.value && e.emit("update:color", null);
}
function h(c) {
if (t.value) {
const {
width: d,
height: b,
top: f,
left: v
} = t.value.getBoundingClientRect(), {
pageX: N,
pageY: H
} = "touches" in c ? c.touches[0] : c, $ = Math.max(0, Math.min(N - (v + window.pageXOffset), d)), A = Math.max(0, Math.min(H - (f + window.pageYOffset), b));
o({
x: $,
y: A,
height: b,
width: d
});
}
}
return K(() => {
const c = l.color.getHsva();
g(c.saturation, c.value);
}), L(() => l.color, (c) => {
c.getHsva();
}), L(() => l.color, (c) => {
const d = c.getHsva();
g(d.saturation, d.value);
}), () => k("div", {
class: "f-sv-panel-component",
ref: t,
style: {
backgroundColor: u()
},
onMousedown: C((c) => h(c), ["prevent"]),
onTouchstart: C((c) => h(c), ["prevent"])
}, [k("div", {
class: "color-svpanel__white"
}, null), k("div", {
class: "color-svpanel__black"
}, null), k("div", {
class: "color-svpanel__cursor",
ref: r
}, [k("div", null, null)])]);
}
}), it = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
allowColorNull: { type: Boolean, default: !1 },
onChange: { type: Function }
}, Ve = /* @__PURE__ */ T({
name: "Hue",
props: it,
emits: ["update:color", "update:hue"],
setup(l, e) {
const r = P(l.hue), t = P(l.allowColorNull), i = [];
function p(f) {
f.preventDefault(), g(f);
}
const u = P(null);
function g(f) {
if (u.value) {
const {
width: v,
height: N,
top: H,
left: $
} = u.value.getBoundingClientRect(), {
pageX: A,
pageY: D
} = "touches" in f ? f.touches[0] : f, I = Math.max(0, Math.min(A - ($ + window.pageXOffset), v)), Y = Math.max(0, Math.min(D - (H + window.pageYOffset), N));
b({
x: I,
y: Y,
height: N,
width: v
});
}
}
function w() {
i.forEach((f) => f()), i.length = 0;
}
function o(f) {
p(f), document.addEventListener("mouseup", w), document.addEventListener("touchend", w), document.addEventListener("touchmove", p);
}
const h = (f) => {
o(f), f.stopPropagation();
};
K(() => {
document.querySelectorAll(".f-hue-component").forEach((N) => {
N.addEventListener("mousedown", h), N.addEventListener("touchstart", h);
});
const v = l.color.getHsva();
d(v.hue);
});
const c = P(null);
function d(f) {
var H;
const v = Math.max(0, Math.min(f / 360 * 100, 100));
c.value && ((H = c.value.style) == null || H.setProperty("top", `${v}%`));
}
function b({
x: f,
y: v,
height: N,
width: H
}) {
const $ = v / N * 360;
d($);
const A = l.color.getHsva(), D = new M().setHsva($, A.saturation, A.value, A.alpha), I = new M().setHsva($, 100, 100, A.alpha);
(l.color != null || l.color == null && t.value) && (e.emit("update:hue", I), e.emit("update:color", D));
}
return L(r, (f) => {
const v = f.getHsva();
d(v.hue);
}), L(() => l.color, (f) => {
const v = f.getHsva();
d(v.hue);
}), () => k("div", {
class: "f-hue-component",
ref: u,
onMousedown: C((f) => g(f), ["prevent"]),
onTouchstart: C((f) => g(f), ["prevent"])
}, [k("div", {
class: "color-hue-slider__bar"
}, null), k("div", {
class: "color-hue-slider__thumb",
ref: c
}, null)]);
}
}), lt = {
color: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, Ne = /* @__PURE__ */ T({
name: "Alpha",
props: lt,
emits: ["update:color"],
setup(l, e) {
const r = P(null), t = P(null), i = P(l.randomId), p = P(l.allowColorNull), u = (h) => {
var b;
const c = Math.max(0, Math.min(h * 100, 100));
t.value && ((b = t.value.style) == null || b.setProperty("left", `${c}%`));
};
function g(h) {
if (r.value) {
const {
width: c,
height: d,
top: b,
left: f
} = r.value.getBoundingClientRect(), {
pageX: v,
pageY: N
} = "touches" in h ? h.touches[0] : h, H = Math.max(0, Math.min(v - (f + window.pageXOffset), c)), $ = Math.max(0, Math.min(N - (b + window.pageYOffset), d));
o({
x: H,
y: $,
height: d,
width: c
});
}
}
function w() {
const h = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
h.className = "btn btn-secondary";
const c = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
c.style.borderColor = "#dcdfe6";
}
const o = ({
x: h,
width: c
}) => {
const d = h / c;
u(d), w();
const b = l.color.getHsva(), f = new M().setHsva(b.hue, b.saturation, b.value, d);
l.color != null ? e.emit("update:color", f) : l.color == null && p.value && e.emit("update:color", null);
};
return K(() => {
const h = l.color.getHsva();
u(h.alpha);
}), L(() => l.color, (h) => {
const c = h.getHsva();
u(c.alpha);
}), () => k("div", {
class: "f-alpha-component",
ref: r,
onMousedown: C((h) => g(h), ["prevent"]),
onTouchstart: C((h) => g(h), ["prevent"])
}, [k("div", {
class: "color-alpha-slider__bar"
}, [fe(" ")]), k("div", {
class: "color-alpha-slider__thumb",
ref: t
}, null)]);
}
}), ut = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
colorPresets: { type: Object, default: "" },
randomId: { type: String, default: "" }
}, Ee = /* @__PURE__ */ T({
name: "Preset",
props: ut,
emits: ["update:hue", "update:color"],
setup(l, e) {
const r = P(new M()), t = P(l.colorPresets), i = P(l.randomId);
function p() {
const o = document.getElementById(`farris-color-picker-plus-sure-${i.value}`);
o.className = "btn btn-secondary";
const h = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
h.style.borderColor = "#dcdfe6";
}
function u(o) {
p();
const h = o.getRgba(), c = o.getHsva(), d = new M().setRgba(h.red, h.green, h.blue, h.alpha), b = new M().setHsva(c.hue);
r.value = o, e.emit("update:hue", b), e.emit("update:color", d);
}
function g(o) {
const h = r.value.getRgba().toString(), c = r.value.getHsva().toString(), d = o.getRgba().toString() === h && o.getHsva().toString() === c;
return {
"color-preset__color-selector": d,
selected: d
};
}
function w(o, h) {
return k("div", {
class: "color-preset__color-selector"
}, [k("div", {
key: h,
class: g(o),
style: {
backgroundColor: o.toRgbString()
},
onClick: () => u(o)
}, null)]);
}
return () => k("div", {
class: "f-preset-component"
}, [k("div", {
class: "color-preset__colors"
}, [t.value.map((o, h) => w(o, h))])]);
}
}), re = /* @__PURE__ */ T({
name: "FColorPicker",
props: me,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(l, e) {
const r = P(new M(l.color)), t = P(l.color), i = P(l.disabled), p = P(l.color), u = P(l.allowColorNull), g = P(l.presets), w = P(!1), o = P(!1), h = P(!1), c = P("HEX"), d = Math.floor(Math.random() * 1e3).toString();
let b = -1, f;
const v = new we("#000000"), N = P(l.color);
let H, $;
const A = P(null), D = P(null), I = P(null), Y = x(() => !f && v && v.initType ? v.initType : f), S = x({
get() {
return f && t.value !== null ? (ee(f), j(new M(t.value), V[f])) : t.value;
},
set(y) {
y !== null && (X(y), J(y));
}
}), E = P(S.value), B = x(() => b > -1), O = x(() => g.value.length > 0), F = x(() => ({
"background-color": p.value
})), ae = x(() => o.value && w.value ? "display:flex" : "display:none"), z = [{
text: "HEX",
type: V.hex
}, {
text: "RGBA",
type: V.rgba
}];
function le() {
const y = document.getElementById("farris-color-picker-panel");
y.id = `farris-color-picker-panel-${d}`;
const m = document.getElementById("farris-color-picker-plus-sure");
m.id = `farris-color-picker-plus-sure-${d}`;
const R = document.getElementById("farris-color-picker-plus-input");
R.id = `farris-color-picker-plus-input-${d}`, $ = document.getElementById(`farris-color-picker-plus-sure-${d}`), H = document.getElementById(`farris-color-picker-panel-${d}`), H.className = "color-picker-panel disabled";
}
function W() {
if (!u.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${d}`).classList.toggle("disabled");
const m = document.getElementById(`farris-color-picker-plus-input-${d}`);
m.style.borderColor = "red";
}
}
function ue() {
t.value && (X(t.value), !t.value && u.value || (t.value = j(new M(t.value), V[Y.value])), E.value = S.value), _(ee(v.initType));
}
function se() {
t.value && X(t.value), v.hasPresets() || v.setColorPresets(g.value), t.value ? p.value = j(new M(t.value), V[Y.value]) : !t.value && u.value && (p.value = null);
}
function ce() {
L(v.valueChanged, (y) => {
const m = j(y, V[f || v.initType]);
t.value = m;
});
}
function _(y) {
c.value = z[y].text;
}
function oe() {
var y;
o.value = !!(f != null && f.includes("a") || (y = v.initType) != null && y.includes("a"));
}
ke(() => {
v.setColorPresets(g.value || ["#eaecf3"]);
}), K(() => {
le(), W(), ue(), se();
}), ce(), L(c, () => {
S.value = j(new M(t.value), V[f || v.initType]), r.value = new M(S.value), oe();
}), L(t, (y) => {
j(v.value, v.initType) !== y && y !== null && X(y), _(ee(v.initType));
}), L(r, (y) => {
t.value = j(y, V[f || v.initType]), X(t.value), S.value = t.value;
});
function J(y) {
const m = document.getElementById(`farris-color-picker-plus-input-${d}`);
(y === "" || y === void 0 || y == null) && !u.value ? (t.value = null, m.style.borderColor = "red", $.className = "btn btn-secondary disabled") : (m.style.borderColor = "#dcdfe6", $.className = "btn btn-secondary");
}
function he(y) {
var m, R;
if (y == null || y.stopPropagation(), u.value) {
p.value = (t == null ? void 0 : t.value) ?? null;
const U = {
elementValue: p
};
e.emit("valueChanged", U), q();
}
if (!u.value && !(S.value === void 0 || S.value == null || S.value === "")) {
(R = (m = A.value) == null ? void 0 : m.style) == null || R.setProperty("background", t.value), h.value = !0, p.value = t.value;
const U = {
elementValue: p
};
e.emit("valueChanged", U), q();
}
!N.value && !t.value && !h.value && u && q(), J(t.value), S.value = t.value, $.classList.contains("disabled") || (E.value = t.value, w.value = !1);
}
function X(y) {
v == null || v.setValueFrom(y, d, u.value);
}
function de(y) {
H = document.getElementById(`farris-color-picker-panel-${d}`);
const m = H.className === "color-picker-panel";
i.value || m || (w.value = !0, H.classList.toggle("disabled"), W(), X(t.value), y.stopPropagation());
}
function q() {
H = document.getElementById(`farris-color-picker-panel-${d}`), H.className = "color-picker-panel disabled";
}
function ee(y) {
const m = z.findIndex((R) => R.type === y);
return b = m, m;
}
function Q(y) {
if (!$.classList.contains("disabled")) {
const m = z.length;
b = (m + b + (y === "up" ? 1 : -1)) % m, f = z[b].type, _(b), X(t.value);
}
}
return () => k("div", {
class: "f-color-picker-component",
ref: D
}, [k("div", {
class: ["color-picker-panel", {
disabled: i.value
}],
id: "farris-color-picker-panel",
ref: I,
onClick: (y) => y.stopPropagation(),
style: "top:30px"
}, [k("div", {
class: "color-picker-main"
}, [k(Ve, {
hue: v.hue,
"onUpdate:hue": (y) => v.hue = y,
allowColorNull: u.value,
color: r.value,
"onUpdate:color": (y) => r.value = y
}, null), k(Re, {
randomId: d,
hue: v.hue,
"onUpdate:hue": (y) => v.hue = y,
allowColorNull: u.value,
color: r.value,
"onUpdate:color": (y) => r.value = y
}, null)]), k(Ne, {
style: ae.value,
randomId: d,
allowColorNull: u.value,
color: r.value,
"onUpdate:color": (y) => r.value = y
}, null), k("div", {
class: "input-btn",
style: "display:flex;align-items: center;"
}, [G(k("span", {
style: "width:40px;margin-right:10px;"
}, [c.value]), [[Z, O]]), G(k("input", {
type: "text",
title: "color-picker-plus",
id: "farris-color-picker-plus-input",
"onUpdate:modelValue": (y) => S.value = y,
style: "float:none"
}, null), [[be, S.value]]), G(k("div", {
class: "type-icon-btn-wrapper",
style: "cursor:pointer"
}, [k("span", {
class: "f-icon f-icon-arrow-60-up type-icon-btn",
onClick: () => Q("up")
}, null), k("span", {
class: "f-icon f-icon-arrow-60-down type-icon-btn",
onClick: () => Q("down")
}, null)]), [[Z, O]]), k("div", {
class: "input-btn"
}, [k("button", {
id: "farris-color-picker-plus-sure",
class: "btn btn-secondary",
onClick: (y) => he(y)
}, [fe("确定")])])]), G(k(Ee, {
color: r.value,
"onUpdate:color": (y) => r.value = y,
hue: v.hue,
"onUpdate:hue": (y) => v.hue = y,
randomId: d,
colorPresets: v.presets
}, null), [[Z, B]])]), k("div", {
class: "color-picker-wrapper"
}, [k("input", {
title: "color-picker-input",
type: "text",
class: "color-picker-input form-control",
value: E.value,
readonly: i.value,
onClick: (y) => y.stopPropagation()
}, null), k("div", {
class: "color-picker-trigger",
onClick: de
}, [k("div", {
class: "color-picker-trigger-inner"
}, [k("div", {
style: F.value
}, null)])])])]);
}
});
function ct(l, e, r) {
var Y;
const t = "", i = "", p = P();
function u() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function g() {
return !1;
}
function w() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function o() {
return (e == null ? void 0 : e.schema.componentType) === "frame";
}
function h(S) {
if (!S || !S.value)
return null;
if (S.value.schema && S.value.schema.type === "component")
return S.value;
const E = P(S == null ? void 0 : S.value.parent), B = h(E);
return B || null;
}
function c(S = e) {
var F;
const { componentInstance: E, designerItemElementRef: B } = S;
if (!E || !E.value)
return null;
const { getCustomButtons: O } = E.value;
return E.value.canMove || O && ((F = O()) != null && F.length) ? B : c(S.parent);
}
function d(S) {
return !!r;
}
function b() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function f() {
}
function v(S, E) {
var B;
!S || !E || (B = e == null ? void 0 : e.setupContext) == null || B.emit("dragEnd");
}
function N(S, E) {
const { componentType: B } = S;
let O = He(B, S, E);
const F = B.toLowerCase().replace(/-/g, "_");
return O && !O.id && O.type === B && (O.id = `${F}_${Math.random().toString().slice(2, 6)}`), O;
}
function H(S) {
}
function $(...S) {
}
function A() {
e != null && e.schema.contents && e.schema.contents.map((S) => {
let E = S.id;
S.type === "component-ref" && (E = S.component);
const B = l.value.querySelectorAll(`#${E}-design-item`);
B != null && B.length && Array.from(B).map((O) => {
var F;
(F = O == null ? void 0 : O.componentInstance) != null && F.value.onRemoveComponent && O.componentInstance.value.onRemoveComponent();
});
});
}
function D() {
}
function I(S) {
}
return p.value = {
canMove: u(),
canSelectParent: g(),
canDelete: w(),
canNested: !o(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: l,
parent: (Y = e == null ? void 0 : e.parent) == null ? void 0 : Y.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: t,
designerClass: i,
canAccepts: d,
getBelongedComponentInstance: h,
getDraggableDesignItemElement: c,
getDraggingDisplayText: b,
getPropConfig: $,
getDragScopeElement: f,
onAcceptMovedChildElement: v,
onChildElementMovedOut: H,
addNewChildComponentSchema: N,
triggerBelongedComponentToMoveWhenMoved: P(!1),
triggerBelongedComponentToDeleteWhenDeleted: P(!1),
onRemoveComponent: A,
getCustomButtons: D,
onPropertyChanged: I
}, p;
}
const ot = /* @__PURE__ */ T({
name: "FColorPickerDesign",
props: me,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(l, e) {
const r = P(new M(l.color)), t = P(l.color), i = P(l.disabled), p = P(l.color), u = P(l.allowColorNull), g = P(l.presets), w = P(!1), o = P(!1), h = P(!1), c = P("HEX"), d = Math.floor(Math.random() * 1e3).toString();
let b = -1, f;
const v = new we("#000000"), N = P(l.color);
let H, $;
const A = P(null), D = P(null), I = P(), Y = Ie("design-item-context"), S = ct(I, Y);
K(() => {
I.value.componentInstance = S;
}), e.expose(S.value);
const E = x(() => !f && v && v.initType ? v.initType : f), B = x({
get() {
return f && t.value !== null ? (Q(f), j(new M(t.value), V[f])) : t.value;
},
set(m) {
m !== null && (q(m), X(m));
}
}), O = P(B.value), F = x(() => b > -1), ae = x(() => g.value.length > 0), z = x(() => ({
"background-color": p.value
})), le = x(() => o.value && w.value ? "display:flex" : "display:none"), W = [{
text: "HEX",
type: V.hex
}, {
text: "RGBA",
type: V.rgba
}];
function ue() {
const m = document.getElementById("farris-color-picker-panel");
m.id = `farris-color-picker-panel-${d}`;
const R = document.getElementById("farris-color-picker-plus-sure");
R.id = `farris-color-picker-plus-sure-${d}`;
const U = document.getElementById("farris-color-picker-plus-input");
U.id = `farris-color-picker-plus-input-${d}`, $ = document.getElementById(`farris-color-picker-plus-sure-${d}`), H = document.getElementById(`farris-color-picker-panel-${d}`), H.className = "color-picker-panel disabled";
}
function se() {
if (!u.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${d}`).classList.toggle("disabled");
const R = document.getElementById(`farris-color-picker-plus-input-${d}`);
R.style.borderColor = "red";
}
}
function ce() {
t.value && (q(t.value), !t.value && u.value || (t.value = j(new M(t.value), V[E.value])), O.value = B.value), J(Q(v.initType));
}
function _() {
t.value && q(t.value), v.hasPresets() || v.setColorPresets(g.value), t.value ? p.value = j(new M(t.value), V[E.value]) : !t.value && u.value && (p.value = null);
}
function oe() {
L(v.valueChanged, (m) => {
const R = j(m, V[f || v.initType]);
t.value = R;
});
}
function J(m) {
c.value = W[m].text;