@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,374 lines • 55.4 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 _, onMounted as C, watch as x, createVNode as k, withModifiers as T, createTextVNode as fe, computed as U, onBeforeMount as ke, withDirectives as z, vShow as K, vModelText as be, inject as je } from "vue";
import { isPlainObject as ye, cloneDeep as Pe } from "lodash-es";
import { withInstall as Ie } from "../common/index.esm.js";
const Se = {}, Me = {};
function ve(l) {
const { properties: e, title: r, ignore: t } = l, i = t && Array.isArray(t), d = 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, "_");
d.id = `${u}_${Math.random().toString().slice(2, 6)}`;
}
return d;
}
function Le(l) {
const { properties: e, title: r, required: t } = l;
if (t && Array.isArray(t)) {
const i = t.reduce((d, u) => (d[u] = e[u].type === "object" && e[u].properties ? ve(e[u]) : Pe(e[u].default), d), {});
if (r && t.find((d) => d === "id")) {
const d = r.toLowerCase().replace(/-/g, "_");
i.id = `${d}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
return {
type: r
};
}
function Be(l, e = {}, r) {
const t = Se[l];
if (t) {
let i = Le(t);
const d = Me[l];
return i = d ? d({ getSchemaByType: Be }, 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 He(l, e) {
return Object.keys(l).filter((t) => l[t] != null).reduce((t, i) => {
if (e.has(i)) {
const d = e.get(i);
if (typeof d == "string")
t[d] = l[i];
else {
const u = d(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 He(t, r);
}
function Fe(l = {}) {
function e(o, h, c, p) {
if (typeof c == "number")
return p[o].length === c;
if (typeof c == "object") {
const b = Object.keys(c)[0], f = c[b];
if (b === "not")
return Number(p[o].length) !== Number(f);
if (b === "moreThan")
return Number(p[o].length) >= Number(f);
if (b === "lessThan")
return Number(p[o].length) <= Number(f);
}
return !1;
}
function r(o, h, c, p) {
return p[o] && p[o].propertyValue && String(p[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((p) => {
if (p === "length")
return { target: c, operator: "length", param: null, value: h[p] };
const b = p, f = h[p];
return { target: c, operator: "getProperty", param: b, value: f };
}) : [];
}
function d(o) {
return Object.keys(o).reduce((c, p) => {
const b = i(p, o[p]);
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 d(o).reduce((b, f) => b && u(f, h), !0);
}
function w(o, h) {
const c = Object.keys(o), p = c.includes("allOf"), b = c.includes("anyOf"), f = p || b, B = (f ? o[f ? p ? "allOf" : "anyOf" : "allOf"] : [o]).map((A) => g(A, h));
return p ? !B.includes(!1) : B.includes(!0);
}
return { parseValueSchema: w };
}
const Ue = {}, qe = {};
Fe();
function Xe(l, e, r = /* @__PURE__ */ new Map(), t = (u, g, w, o) => g, i = {}, d = (u) => u) {
return Se[e.title] = e, Me[e.title] = t, Ue[e.title] = i, qe[e.title] = d, (u = {}, g = !0) => {
if (!g)
return He(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 de 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 ne 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 ae 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 S {
constructor(e) {
/**
* base color used to calculate other
* default color
* rgb(255, 0, 0)
* hsl(0, 100%, 50%)
* 初始色#ff0000
*/
n(this, "hsva", new ae(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 S(e) : e instanceof S ? e.clone() : e instanceof s ? new S().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof ae ? new S().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof ne ? new S().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new S(e);
}
/**
* make from existing color new color object
*/
clone() {
return S.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 d = new ne(e, r, t, i);
return this.rgba = this.hslaToRgba(d), 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 ae(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, d = (2 - t) * e.value / 2, u = t * i / (d <= 1 ? d : 2 - d) || 0;
return new ne(r, d * 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), d = (t + i) / 2, u = 2 * i / (t + i) || 0;
return new ae(r, u, d, e.alpha);
}
rgbaToHsva(e) {
const r = e.red / 255, t = e.green / 255, i = e.blue / 255, { alpha: d } = 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 ae(o, h, c, d);
}
hsvaToRgba(e) {
let r = 1, t = 0, i = 0;
const d = e.saturation / 100, u = e.value / 100, { alpha: g } = e, w = e.hue / 60, o = Math.floor(w), h = w - o, c = (1 - d) * u, p = (1 - d * h) * u, b = (1 - d * (1 - h)) * u;
switch (o) {
case 6:
case 0:
r = u, t = b, i = c;
break;
case 1:
r = p, t = u, i = c;
break;
case 2:
r = c, t = u, i = b;
break;
case 3:
r = c, t = p, i = u;
break;
case 4:
r = b, t = c, i = u;
break;
case 5:
r = u, t = c, i = p;
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: d } = 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 ne(w, o, h, d);
}
/**
* 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: d } = 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, d);
}
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, d = 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 - d) * (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 d = 1 - r, u = 1 - t, g = 1 - i, w = Math.min(d, u, g);
return w === 1 ? new de(0, 0, 0, 1) : (d = (d - w) / (1 - w), u = (u - w) / (1 - w), g = (g - w) / (1 - w), w *= 100, d *= 100, u *= 100, g *= 100, new de(d, 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("("), d = r.indexOf(")");
if (i !== -1 && d + 1 === r.length) {
const u = r.substr(0, i), g = r.substr(i + 1, d - (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 ne(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
w
), t = this.hslaToRgba(o);
break;
case "cmyk":
h = new de(
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 N = /* @__PURE__ */ ((l) => (l.hex = "hex", l.hexa = "hexa", l.rgba = "rgba", l.rgb = "rgb", l.hsla = "hsla", l.hsl = "hsl", l.cmyk = "cmyk", l))(N || {});
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 = S.from(r);
this.setValue(t), this.setHueColor(t);
}
/** 设置值 */
setValueFrom(e, r, t) {
const i = S.from(e);
return this.initValue || (this.initValue = S.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 S().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 = S.from(new s(255, 0, 0, 1)), this.hueValue = new S().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 S(t));
}), r;
}
get presets() {
return this.colorPresets;
}
hasPresets() {
return this.colorPresets.length > 0;
}
}
/** 确定输入颜色类型 */
n(we, "finOutInputType");
function D(l, e) {
if (!l)
return "";
switch (e) {
case N.hex:
return l.toHexString();
case N.hexa:
return l.toHexString(!0);
case N.rgb:
return l.toRgbString();
case N.rgba:
return l.toRgbaString();
case N.hsl:
return l.toHslString();
case N.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__ */ _({
name: "SvPanel",
props: rt,
emits: ["update:color"],
setup(l, e) {
const r = P(null), t = P(null), i = P(l.randomId), d = P(l.allowColorNull);
function u() {
return l.hue ? l.hue.toRgbaString() : "#3f51b5";
}
function g(c, p) {
var b, f;
c = Math.max(0, Math.min(c, 100)), p = Math.max(0, Math.min(p, 100)), r.value && ((b = r.value.style) == null || b.setProperty("top", `${100 - p}%`), (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 p = document.getElementById(`farris-color-picker-plus-input-${i.value}`);
p.style.borderColor = "#dcdfe6";
}
function o({
x: c,
y: p,
height: b,
width: f
}) {
const v = c * 100 / f, E = -(p * 100 / b) + 100;
g(v, E);
const B = l.color == null ? "transparent" : l.color, $ = S.from(B);
if (w(), $ != null) {
const A = l.hue.getHsva(), F = $.getHsva(), L = new S().setHsva(A.hue, v, E, F.alpha);
e.emit("update:color", L);
}
!$ && d.value && e.emit("update:color", null);
}
function h(c) {
if (t.value) {
const {
width: p,
height: b,
top: f,
left: v
} = t.value.getBoundingClientRect(), {
pageX: E,
pageY: B
} = "touches" in c ? c.touches[0] : c, $ = Math.max(0, Math.min(E - (v + window.pageXOffset), p)), A = Math.max(0, Math.min(B - (f + window.pageYOffset), b));
o({
x: $,
y: A,
height: b,
width: p
});
}
}
return C(() => {
const c = l.color.getHsva();
g(c.saturation, c.value);
}), x(() => l.color, (c) => {
c.getHsva();
}), x(() => l.color, (c) => {
const p = c.getHsva();
g(p.saturation, p.value);
}), () => k("div", {
class: "f-sv-panel-component",
ref: t,
style: {
backgroundColor: u()
},
onMousedown: T((c) => h(c), ["prevent"]),
onTouchstart: T((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__ */ _({
name: "Hue",
props: it,
emits: ["update:color", "update:hue"],
setup(l, e) {
const r = P(l.hue), t = P(l.allowColorNull), i = [];
function d(f) {
f.preventDefault(), g(f);
}
const u = P(null);
function g(f) {
if (u.value) {
const {
width: v,
height: E,
top: B,
left: $
} = u.value.getBoundingClientRect(), {
pageX: A,
pageY: F
} = "touches" in f ? f.touches[0] : f, L = Math.max(0, Math.min(A - ($ + window.pageXOffset), v)), W = Math.max(0, Math.min(F - (B + window.pageYOffset), E));
b({
x: L,
y: W,
height: E,
width: v
});
}
}
function w() {
i.forEach((f) => f()), i.length = 0;
}
function o(f) {
d(f), document.addEventListener("mouseup", w), document.addEventListener("touchend", w), document.addEventListener("touchmove", d);
}
const h = (f) => {
o(f), f.stopPropagation();
};
C(() => {
document.querySelectorAll(".f-hue-component").forEach((E) => {
E.addEventListener("mousedown", h), E.addEventListener("touchstart", h);
});
const v = l.color.getHsva();
p(v.hue);
});
const c = P(null);
function p(f) {
var B;
const v = Math.max(0, Math.min(f / 360 * 100, 100));
c.value && ((B = c.value.style) == null || B.setProperty("top", `${v}%`));
}
function b({
x: f,
y: v,
height: E,
width: B
}) {
const $ = v / E * 360;
p($);
const A = l.color.getHsva(), F = new S().setHsva($, A.saturation, A.value, A.alpha), L = new S().setHsva($, 100, 100, A.alpha);
(l.color != null || l.color == null && t.value) && (e.emit("update:hue", L), e.emit("update:color", F));
}
return x(r, (f) => {
const v = f.getHsva();
p(v.hue);
}), x(() => l.color, (f) => {
const v = f.getHsva();
p(v.hue);
}), () => k("div", {
class: "f-hue-component",
ref: u,
onMousedown: T((f) => g(f), ["prevent"]),
onTouchstart: T((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__ */ _({
name: "Alpha",
props: lt,
emits: ["update:color"],
setup(l, e) {
const r = P(null), t = P(null), i = P(l.randomId), d = 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: p,
top: b,
left: f
} = r.value.getBoundingClientRect(), {
pageX: v,
pageY: E
} = "touches" in h ? h.touches[0] : h, B = Math.max(0, Math.min(v - (f + window.pageXOffset), c)), $ = Math.max(0, Math.min(E - (b + window.pageYOffset), p));
o({
x: B,
y: $,
height: p,
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 p = h / c;
u(p), w();
const b = l.color.getHsva(), f = new S().setHsva(b.hue, b.saturation, b.value, p);
l.color != null ? e.emit("update:color", f) : l.color == null && d.value && e.emit("update:color", null);
};
return C(() => {
const h = l.color.getHsva();
u(h.alpha);
}), x(() => l.color, (h) => {
const c = h.getHsva();
u(c.alpha);
}), () => k("div", {
class: "f-alpha-component",
ref: r,
onMousedown: T((h) => g(h), ["prevent"]),
onTouchstart: T((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__ */ _({
name: "Preset",
props: ut,
emits: ["update:hue", "update:color"],
setup(l, e) {
const r = P(new S()), t = P(l.colorPresets), i = P(l.randomId);
function d() {
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) {
d();
const h = o.getRgba(), c = o.getHsva(), p = new S().setRgba(h.red, h.green, h.blue, h.alpha), b = new S().setHsva(c.hue);
r.value = o, e.emit("update:hue", b), e.emit("update:color", p);
}
function g(o) {
const h = r.value.getRgba().toString(), c = r.value.getHsva().toString(), p = o.getRgba().toString() === h && o.getHsva().toString() === c;
return {
"color-preset__color-selector": p,
selected: p
};
}
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__ */ _({
name: "FColorPicker",
props: me,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(l, e) {
const r = P(new S(l.color)), t = P(l.color), i = P(l.disabled), d = P(l.color), u = P(l.allowColorNull), g = P(l.presets), w = P(!1), o = P(!1), h = P(!1), c = P("HEX"), p = Math.floor(Math.random() * 1e3).toString();
let b = -1, f;
const v = new we("#000000"), E = P(l.color);
let B, $;
const A = P(null), F = P(null), L = P(null), W = U(() => !f && v && v.initType ? v.initType : f), j = U({
get() {
return f && t.value !== null ? (te(f), D(new S(t.value), N[f])) : t.value;
},
set(y) {
y !== null && (Y(y), Q(y));
}
}), M = P(j.value), H = U(() => b > -1), R = U(() => g.value.length > 0), O = U(() => ({
"background-color": d.value
})), I = U(() => o.value && w.value ? "display:flex" : "display:none"), G = [{
text: "HEX",
type: N.hex
}, {
text: "RGBA",
type: N.rgba
}];
function le() {
const y = document.getElementById("farris-color-picker-panel");
y.id = `farris-color-picker-panel-${p}`;
const m = document.getElementById("farris-color-picker-plus-sure");
m.id = `farris-color-picker-plus-sure-${p}`;
const V = document.getElementById("farris-color-picker-plus-input");
V.id = `farris-color-picker-plus-input-${p}`, $ = document.getElementById(`farris-color-picker-plus-sure-${p}`), B = document.getElementById(`farris-color-picker-panel-${p}`), B.className = "color-picker-panel disabled";
}
function J() {
if (!u.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${p}`).classList.toggle("disabled");
const m = document.getElementById(`farris-color-picker-plus-input-${p}`);
m.style.borderColor = "red";
}
}
function ue() {
t.value && (Y(t.value), !t.value && u.value || (t.value = D(new S(t.value), N[W.value])), M.value = j.value), ee(te(v.initType));
}
function se() {
t.value && Y(t.value), v.hasPresets() || v.setColorPresets(g.value), t.value ? d.value = D(new S(t.value), N[W.value]) : !t.value && u.value && (d.value = null);
}
function ce() {
x(v.valueChanged, (y) => {
const m = D(y, N[f || v.initType]);
t.value = m;
});
}
function ee(y) {
c.value = G[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"]);
}), C(() => {
le(), J(), ue(), se();
}), ce(), x(c, () => {
j.value = D(new S(t.value), N[f || v.initType]), r.value = new S(j.value), oe();
}), x(t, (y) => {
D(v.value, v.initType) !== y && y !== null && Y(y), ee(te(v.initType));
}), x(r, (y) => {
t.value = D(y, N[f || v.initType]), Y(t.value), j.value = t.value;
});
function Q(y) {
const m = document.getElementById(`farris-color-picker-plus-input-${p}`);
(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, V;
if (y == null || y.stopPropagation(), u.value) {
d.value = (t == null ? void 0 : t.value) ?? null;
const X = {
elementValue: d
};
e.emit("valueChanged", X), q();
}
if (!u.value && !(j.value === void 0 || j.value == null || j.value === "")) {
(V = (m = A.value) == null ? void 0 : m.style) == null || V.setProperty("background", t.value), h.value = !0, d.value = t.value;
const X = {
elementValue: d
};
e.emit("valueChanged", X), q();
}
!E.value && !t.value && !h.value && u && q(), Q(t.value), j.value = t.value, $.classList.contains("disabled") || (M.value = t.value, w.value = !1);
}
function Y(y) {
v == null || v.setValueFrom(y, p, u.value);
}
function pe(y) {
B = document.getElementById(`farris-color-picker-panel-${p}`);
const m = B.className === "color-picker-panel";
i.value || m || (w.value = !0, B.classList.toggle("disabled"), J(), Y(t.value), y.stopPropagation());
}
function q() {
B = document.getElementById(`farris-color-picker-panel-${p}`), B.className = "color-picker-panel disabled";
}
function te(y) {
const m = G.findIndex((V) => V.type === y);
return b = m, m;
}
function Z(y) {
if (!$.classList.contains("disabled")) {
const m = G.length;
b = (m + b + (y === "up" ? 1 : -1)) % m, f = G[b].type, ee(b), Y(t.value);
}
}
return () => k("div", {
class: "f-color-picker-component",
ref: F
}, [k("div", {
class: ["color-picker-panel", {
disabled: i.value
}],
id: "farris-color-picker-panel",
ref: L,
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: p,
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: I.value,
randomId: p,
allowColorNull: u.value,
color: r.value,
"onUpdate:color": (y) => r.value = y
}, null), k("div", {
class: "input-btn",
style: "display:flex;align-items: center;"
}, [z(k("span", {
style: "width:40px;margin-right:10px;"
}, [c.value]), [[K, R]]), z(k("input", {
type: "text",
title: "color-picker-plus",
id: "farris-color-picker-plus-input",
"onUpdate:modelValue": (y) => j.value = y,
style: "float:none"
}, null), [[be, j.value]]), z(k("div", {
class: "type-icon-btn-wrapper",
style: "cursor:pointer"
}, [k("span", {
class: "f-icon f-icon-arrow-60-up type-icon-btn",
onClick: () => Z("up")
}, null), k("span", {
class: "f-icon f-icon-arrow-60-down type-icon-btn",
onClick: () => Z("down")
}, null)]), [[K, R]]), k("div", {
class: "input-btn"
}, [k("button", {
id: "farris-color-picker-plus-sure",
class: "btn btn-secondary",
onClick: (y) => he(y)
}, [fe("确定")])])]), z(k(Ee, {
color: r.value,
"onUpdate:color": (y) => r.value = y,
hue: v.hue,
"onUpdate:hue": (y) => v.hue = y,
randomId: p,
colorPresets: v.presets
}, null), [[K, H]])]), k("div", {
class: "color-picker-wrapper"
}, [k("input", {
title: "color-picker-input",
type: "text",
class: "color-picker-input form-control",
value: M.value,
readonly: i.value,
onClick: (y) => y.stopPropagation()
}, null), k("div", {
class: "color-picker-trigger",
onClick: pe
}, [k("div", {
class: "color-picker-trigger-inner"
}, [k("div", {
style: O.value
}, null)])])])]);
}
});
function ct(l, e, r) {
var j;
const t = "", i = "", d = 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(M) {
if (!M || !M.value)
return null;
if (M.value.schema && M.value.schema.type === "component")
return M.value;
const H = P(M == null ? void 0 : M.value.parent), R = h(H);
return R || null;
}
function c(M = e) {
var I;
const { componentInstance: H, designerItemElementRef: R } = M;
if (!H || !H.value)
return null;
const { getCustomButtons: O } = H.value;
return H.value.canMove || O && ((I = O()) != null && I.length) ? R : c(M.parent);
}
function p(M) {
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(M, H) {
var R;
!M || !H || (R = e == null ? void 0 : e.setupContext) == null || R.emit("dragEnd");
}
function E(M, H) {
const { componentType: R } = M;
let O = Be(R, M, H);
const I = R.toLowerCase().replace(/-/g, "_");
return O && !O.id && O.type === R && (O.id = `${I}_${Math.random().toString().slice(2, 6)}`), O;
}
function B(M) {
}
function $(...M) {
}
function A(M) {
if (!M)
return;
const H = e == null ? void 0 : e.schema, { formSchemaUtils: R } = M;
if (H && R.getExpressions().length) {
const O = R.getExpressions().findIndex((I) => I.target === H.id);
O > -1 && R.getExpressions().splice(O, 1);
}
}
function F(M) {
A(M), e != null && e.schema.contents && e.schema.contents.map((H) => {
let R = H.id;
H.type === "component-ref" && (R = H.component);
const O = l.value.querySelectorAll(`#${R}-design-item`);
O != null && O.length && Array.from(O).map((I) => {
var G;
(G = I == null ? void 0 : I.componentInstance) != null && G.value.onRemoveComponent && I.componentInstance.value.onRemoveComponent(M);
});
});
}
function L() {
}
function W(M) {
}
return d.value = {
canMove: u(),
canSelectParent: g(),
canDelete: w(),
canNested: !o(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: l,
parent: (j = e == null ? void 0 : e.parent) == null ? void 0 : j.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: t,
designerClass: i,
canAccepts: p,
getBelongedComponentInstance: h,
getDraggableDesignItemElement: c,
getDraggingDisplayText: b,
getPropConfig: $,
getDragScopeElement: f,
onAcceptMovedChildElement: v,
onChildElementMovedOut: B,
addNewChildComponentSchema: E,
triggerBelongedComponentToMoveWhenMoved: P(!1),
triggerBelongedComponentToDeleteWhenDeleted: P(!1),
onRemoveComponent: F,
getCustomButtons: L,
onPropertyChanged: W
}, d;
}
const ot = /* @__PURE__ */ _({
name: "FColorPickerDesign",
props: me,
emits: ["valueChanged", "activeChange", "update:color", "update:hue"],
setup(l, e) {
const r = P(new S(l.color)), t = P(l.color), i = P(l.disabled), d = P(l.color), u = P(l.allowColorNull), g = P(l.presets), w = P(!1), o = P(!1), h = P(!1), c = P("HEX"), p = Math.floor(Math.random() * 1e3).toString();
let b = -1, f;
const v = new we("#000000"), E = P(l.color);
let B, $;
const A = P(null), F = P(null), L = P(), W = je("design-item-context"), j = ct(L, W);
C(() => {
L.value.componentInstance = j;
}), e.expose(j.value);
const M = U(() => !f && v && v.initType ? v.initType : f), H = U({
get() {
return f && t.value !== null ? (Z(f), D(new S(t.value), N[f])) : t.value;
},
set(m) {
m !== null && (q(m), Y(m));
}
}), R = P(H.value), O = U(() => b > -1), I = U(() => g.value.length > 0), G = U(() => ({
"background-color": d.value
})), le = U(() => o.value && w.value ? "display:flex" : "display:none"), J = [{
text: "HEX",
type: N.hex
}, {
text: "RGBA",
type: N.rgba
}];
function ue() {
const m = document.getElementById("farris-color-picker-panel");
m.id = `farris-color-picker-panel-${p}`;
const V = document.getElementById("farris-color-picker-plus-sure");
V.id = `farris-color-picker-plus-sure-${p}`;
const X = document.getElementById("farris-color-picker-plus-input");
X.id = `farris-color-picker-plus-input-${p}`, $ = document.getElementById(`farris-color-picker-plus-sure-${p}`), B = document.getElementById(`farris-color-picker-panel-${p}`), B.className = "color-picker-panel disabled";
}
function se() {
if (!u.value && !t.value) {
document.getElementById(`farris-color-picker-plus-sure-${p}`).classList.toggle("disabled");
const V = document.getElementById(`farris-color-picker-plus-input-${p}`);
V.style.borderColor = "red";
}
}
function ce() {
t.value && (q(t.value), !t.value && u.value || (t.value = D(new S(t.value), N[M.value])), R.value = H.value), Q(Z(v.initType));
}
function ee() {
t.value && q(t.value), v.hasPresets() || v.setColor