@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,320 lines (1,319 loc) • 73 kB
JavaScript
var Le = Object.defineProperty;
var Ue = (t, e, r) => e in t ? Le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
var a = (t, e, r) => Ue(t, typeof e != "symbol" ? e + "" : e, r);
import { ref as $, computed as Z, defineComponent as oe, onMounted as ae, watch as C, createVNode as M, withModifiers as ie, createTextVNode as ge, onBeforeMount as be, withDirectives as ne, vShow as re, vModelText as ke, inject as qe } from "vue";
import { cloneDeep as ye, isPlainObject as we } from "lodash-es";
import { getSchemaByTypeForDesigner as Ie } from "../dynamic-resolver/index.esm.js";
import { withInstall as Xe } from "../common/index.esm.js";
function Pe(t, e) {
let r;
function n(c) {
const { properties: p, title: v, ignore: l } = c, s = l && Array.isArray(l), b = Object.keys(p).reduce((P, B) => ((!s || !l.find((O) => O === B)) && (P[B] = p[B].type === "object" && p[B].properties ? n(p[B]) : ye(p[B].default)), P), {});
if (v && (!s || !l.find((P) => P === "id"))) {
const P = v.toLowerCase().replace(/-/g, "_");
b.id = `${P}_${Math.random().toString().slice(2, 6)}`;
}
return b;
}
function u(c) {
const { properties: p, title: v, required: l } = c;
if (l && Array.isArray(l)) {
const s = l.reduce((b, P) => (b[P] = p[P].type === "object" && p[P].properties ? n(p[P]) : ye(p[P].default), b), {});
if (v && l.find((b) => b === "id")) {
const b = v.toLowerCase().replace(/-/g, "_");
s.id = `${b}_${Math.random().toString().slice(2, 6)}`;
}
return s;
}
return {
type: v
};
}
function y(c, p = {}, v) {
const l = t[c];
if (l) {
let s = u(l);
const b = e[c];
return s = b ? b({ getSchemaByType: y }, s, p, v) : s, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(s), s;
}
return null;
}
function d(c, p) {
const v = n(p);
return Object.keys(v).reduce((l, s) => (Object.prototype.hasOwnProperty.call(c, s) && (l[s] && we(l[s]) && we(c[s] || !c[s]) ? Object.assign(l[s], c[s] || {}) : l[s] = c[s]), l), v), v;
}
function g(c, p) {
return Object.keys(c).filter((l) => c[l] != null).reduce((l, s) => {
if (p.has(s)) {
const b = p.get(s);
if (typeof b == "string")
l[b] = c[s];
else {
const P = b(s, c[s], c);
Object.assign(l, P);
}
} else
l[s] = c[s];
return l;
}, {});
}
function w(c, p, v = /* @__PURE__ */ new Map()) {
const l = d(c, p);
return g(l, v);
}
function h(c) {
var v;
const p = c.type;
if (p) {
const l = t[p];
if (!l)
return c;
const s = d(c, l), b = ((v = c.editor) == null ? void 0 : v.type) || "";
if (b) {
const P = t[b], B = d(c.editor, P);
s.editor = B;
}
return s;
}
return c;
}
function f(c) {
r = c;
}
return { getSchemaByType: y, resolveSchemaWithDefaultValue: h, resolveSchemaToProps: w, mappingSchemaToProps: g, setDesignerContext: f };
}
const Se = {}, Me = {}, { getSchemaByType: Gt, resolveSchemaWithDefaultValue: Ge, resolveSchemaToProps: ze, mappingSchemaToProps: We, setDesignerContext: zt } = Pe(Se, Me);
function Ye(t = {}) {
function e(h, f, c, p) {
if (typeof c == "number")
return p[h].length === c;
if (typeof c == "object") {
const v = Object.keys(c)[0], l = c[v];
if (v === "not")
return Number(p[h].length) !== Number(l);
if (v === "moreThan")
return Number(p[h].length) >= Number(l);
if (v === "lessThan")
return Number(p[h].length) <= Number(l);
}
return !1;
}
function r(h, f, c, p) {
return p[h] && p[h].propertyValue && String(p[h].propertyValue.value) === String(c);
}
const n = /* @__PURE__ */ new Map([
["length", e],
["getProperty", r]
]);
Object.keys(t).reduce((h, f) => (h.set(f, t[f]), h), n);
function u(h, f) {
const c = h;
return typeof f == "number" ? [{ target: c, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: c, operator: "getProperty", param: h, value: !!f }] : typeof f == "object" ? Object.keys(f).map((p) => {
if (p === "length")
return { target: c, operator: "length", param: null, value: f[p] };
const v = p, l = f[p];
return { target: c, operator: "getProperty", param: v, value: l };
}) : [];
}
function y(h) {
return Object.keys(h).reduce((c, p) => {
const v = u(p, h[p]);
return c.push(...v), c;
}, []);
}
function d(h, f) {
if (n.has(h.operator)) {
const c = n.get(h.operator);
return c && c(h.target, h.param, h.value, f) || !1;
}
return !1;
}
function g(h, f) {
return y(h).reduce((v, l) => v && d(l, f), !0);
}
function w(h, f) {
const c = Object.keys(h), p = c.includes("allOf"), v = c.includes("anyOf"), l = p || v, P = (l ? h[l ? p ? "allOf" : "anyOf" : "allOf"] : [h]).map((O) => g(O, f));
return p ? !P.includes(!1) : P.includes(!0);
}
return { parseValueSchema: w };
}
const Je = {
convertTo: (t, e, r, n) => {
t.appearance || (t.appearance = {}), t.appearance[e] = r;
},
convertFrom: (t, e, r) => t.appearance ? t.appearance[e] : t[e]
}, Qe = {
convertFrom: (t, e, r) => t.buttons && t.buttons.length ? `共 ${t.buttons.length} 项` : "无"
}, Ze = {
convertTo: (t, e, r, n) => {
t.editor && (t.editor[e] = r);
},
convertFrom: (t, e, r) => t.editor && Object.prototype.hasOwnProperty.call(t.editor, e) ? t.editor[e] : t[e]
}, Be = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"html-template": { type: "html-template", name: "模板容器" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" },
"external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
"list-nav": { type: "list-nav", name: "列表导航" },
"list-view": { type: "list-view", name: "列表" },
"filter-bar": { type: "filter-bar", name: "筛选条" },
"language-textbox": { type: "language-textbox", name: "多语输入框" }
}, Ce = {
convertFrom: (t, e, r) => {
var u;
const n = t.editor && t.editor[e] ? t.editor[e] : t[e];
return ((u = Be[n]) == null ? void 0 : u.name) || n;
}
}, Te = {
convertTo: (t, e, r, n) => {
t[e] = t[e];
},
convertFrom: (t, e, r) => t.editor ? r.getRealEditorType(t.editor.type) : ""
}, Ke = {
convertTo: (t, e, r, n) => {
(t.type === "data-grid-column" || t.type === "tree-grid-column") && (t.formatter ? t.formatter[e] = r : t.formatter = {
[e]: r
});
},
convertFrom: (t, e, r) => {
if (t.formatter) {
if (e === "trueText")
return t.formatter.trueText;
if (e === "falseText")
return t.formatter.falseText;
if (e === "prefix")
return t.formatter.prefix;
if (e === "suffix")
return t.formatter.suffix;
if (e === "precision")
return t.formatter.precision;
if (e === "decimal")
return t.formatter.decimal;
if (e === "thousand")
return t.formatter.thousand;
if (e === "tempDateFormat")
return t.formatter.dateFormat === "yyyy年MM月dd日" ? "yearMonthDay" : t.formatter.dateFormat === "yyyy-MM-dd HH:mm:ss" ? "yyyy-MM-ddTHH:mm:ss" : t.formatter.dateFormat === "yyyy/MM/dd HH:mm:ss" ? "yyyy/MM/ddTHH:mm:ss" : t.formatter.dateFormat === "yyyy年MM月dd日 HH时mm分ss秒" ? "yearMonthDayHourMinuteSecond" : t.formatter.tempDateFormat || t.formatter.dateFormat || "yyyy-MM-dd";
if (e === "customFormat")
return t.formatter.customFormat;
if (e === "type")
return t.formatter.type || "none";
}
return "none";
}
}, _e = {
convertTo: (t, e, r, n) => {
t.command ? t.command[e] = r : t.command = {
[e]: r
}, e === "enable" && r && (t.command.commands || (t.command.commands = [
{
text: "编辑",
type: "primary",
command: "edit"
},
{
text: "删除",
type: "danger",
command: "remove"
}
]));
},
convertFrom: (t, e, r) => t.command && e === "enable" ? t.command.enable : ""
}, et = {
convertTo: (t, e, r, n) => {
t.column ? t.column[e] = r : t.column = {
[e]: r
}, e === "fitColumns" && r && (t.column.fitMode || (t.column.fitMode = "average"));
},
convertFrom: (t, e, r) => {
if (t.column) {
if (e === "fitColumns")
return t.column.fitColumns;
if (e === "fitMode")
return t.column.fitMode;
}
return "";
}
}, tt = {
convertTo: (t, e, r, n) => {
t.summary ? t.summary[e] = r : t.summary = {
[e]: r
}, e === "enable" && r && (t.summary ? t.summary.groupFields || (t.summary.groupFields = []) : t.summary = {
enable: r,
groupFields: []
});
},
convertFrom: (t, e, r) => t.summary && e === "enable" ? t.summary.enable : t.type === "data-grid-column" ? t.enableSummary === void 0 ? !1 : t.enableSummary : ""
}, nt = {
convertTo: (t, e, r, n) => {
t.group ? t.group[e] = r : t.group = {
[e]: r
}, e === "enable" && r && (t.group ? t.group.groupFields || (t.group.groupFields = []) : t.group = {
enable: r,
groupFields: [],
showSummary: !1
});
},
convertFrom: (t, e, r) => {
if (t.group) {
if (e === "enable")
return t.group.enable;
if (e === "showSummary")
return t.group.showSummary;
}
}
}, rt = {
convertFrom: (t, e) => t.binding ? t.binding.path : "",
convertTo: (t, e, r) => {
if (r && r.length > 0) {
const n = r[0];
t.binding || (t.binding = {}), t.binding.type = "Form", t.binding.path = n.bindingField, t.binding.field = n.id, t.binding.fullPath = n.path, t.path = n.bindingPath;
}
}
}, at = {
convertTo: (t, e, r, n) => {
t.pagination || (t.pagination = {}), t.pagination[e] = r;
},
convertFrom: (t, e, r) => t.pagination ? t.pagination[e] : t[e]
}, it = {
convertTo: (t, e, r, n) => {
t.rowNumber || (t.rowNumber = {}), t.rowNumber[e] = r;
},
convertFrom: (t, e, r) => t.rowNumber ? t.rowNumber[e] : t[e]
}, ot = {
convertTo: (t, e, r, n) => {
t.selection || (t.selection = {}), t.selection[e] = r;
},
convertFrom: (t, e, r) => t.selection ? t.selection[e] : t[e]
}, st = {
convertFrom: (t, e, r) => t[e] && t[e].length ? `共 ${t[e].length} 项` : ""
}, lt = {
convertFrom: (t, e) => t[e] || "",
convertTo: (t, e, r) => {
t[e] = r;
}
}, ct = {
convertTo: (t, e, r, n) => {
t.size || (t.size = {}), t.size[e] = r;
},
convertFrom: (t, e, r) => t.size ? t.size[e] : t[e]
}, ut = {
convertFrom: (t, e, r) => {
var n, u;
return (n = t.formatter) != null && n.data && e === "formatterEnumData" && !t.formatterEnumData ? (u = t.formatter) == null ? void 0 : u.data : t.formatterEnumData;
}
}, pt = {
convertTo: (t, e, r, n) => {
t.sort || (t.sort = {}), t.sort[e] = r;
},
convertFrom: (t, e, r) => {
var n, u;
if (e === "mode")
return ((n = t.sort) == null ? void 0 : n.mode) || "client";
if (e === "multiSort")
return !!((u = t.sort) != null && u.multiSort);
}
}, dt = {
convertTo: (t, e, r, n) => {
t.filter || (t.filter = {}), t.filter[e] = r;
},
convertFrom: (t, e, r) => {
var n;
if (e === "mode")
return ((n = t.filter) == null ? void 0 : n.mode) || "client";
}
}, ft = {
convertTo: (t, e, r, n) => {
t.rowOption ? t.rowOption[e] = r : t.rowOption = {
[e]: r
};
},
convertFrom: (t, e, r) => {
if (t.rowOption) {
if (e === "customRowStyle")
return t.rowOption.customRowStyle;
if (e === "customCellStyle")
return t.rowOption.customCellStyle;
}
return "";
}
};
function He(t, e, r) {
const n = /* @__PURE__ */ new Map([
["/converter/appearance.converter", Je],
["/converter/buttons.converter", Qe],
["/converter/property-editor.converter", Ze],
["/converter/items-count.converter", st],
["/converter/type.converter", Ce],
["/converter/change-editor.converter", Te],
["/converter/change-formatter.converter", Ke],
["/converter/column-command.converter", _e],
["/converter/column-option.converter", et],
["/converter/summary.converter", tt],
["/converter/group.converter", nt],
["/converter/form-group-label.converter", lt],
["/converter/field-selector.converter", rt],
["/converter/pagination.converter", at],
["/converter/row-number.converter", it],
["/converter/grid-selection.converter", ot],
["/converter/size.converter", ct],
["/converter/change-formatter-enum.converter", ut],
["/converter/grid-sort.converter", pt],
["/converter/grid-filter.converter", dt],
["/converter/row-option.converter", ft]
]), u = /* @__PURE__ */ new Map([
["string", { type: "input-group", enableClear: !1 }],
["boolean", {
type: "combo-list",
textField: "name",
valueField: "value",
idField: "value",
enableClear: !1,
editable: !1,
data: [
{
value: !0,
name: "是"
},
{
value: !1,
name: "否"
}
]
}],
["enum", { type: "combo-list", maxHeight: 128, enableClear: !1, editable: !1 }],
["array", { type: "button-edit" }],
["number", { type: "number-spinner", placeholder: "" }],
["events-editor", { type: "events-editor", hide: !0 }]
]), y = Ye();
function d(l, s) {
return () => y.parseValueSchema(l, s);
}
function g(l, s, b) {
return l.includes("visible") && s.visible !== void 0 ? typeof s.visible == "boolean" ? () => !!s.visible : s.visible === void 0 ? !0 : d(s.visible, b) : () => !0;
}
function w(l, s, b) {
return l.includes("readonly") && s.readonly !== void 0 ? typeof s.readonly == "boolean" ? () => !!s.readonly : d(s.readonly, b) : () => !1;
}
function h(l, s) {
const b = l.$converter || s;
return typeof b == "string" && b && n.has(b) ? n.get(b) || null : b || null;
}
function f(l, s, b, P, B, O = "", L = "") {
return Object.keys(l).map((D) => {
const V = $(1), X = D, S = l[D], q = Object.keys(S), T = S.title, H = S.type, E = u.get(H) || { type: "input-group", enableClear: !1 }, N = S.editor ? Object.assign({}, E, S.editor) : Object.assign({}, E), F = g(q, S, s), A = w(q, S, s);
N.readonly = N.readonly === void 0 ? A() : N.readonly;
const G = S.type === "cascade" ? f(S.properties, s, b, P, B, O, L) : [], K = !0;
let I = h(S, L);
const J = Z({
get() {
if (V.value) {
if (["class", "style"].find((te) => te === X) && !I && (I = n.get("/converter/appearance.converter") || null), I && I.convertFrom)
return I.convertFrom(b, D, B, O);
const z = b[D];
return Object.prototype.hasOwnProperty.call(S, "defaultValue") && (z === void 0 || typeof z == "string" && z === "") ? S.type === "boolean" ? S.defaultValue : S.defaultValue || "" : z;
}
return null;
},
set(z) {
V.value += 1, I && I.convertTo ? (I.convertTo(P, D, z, B, O), I.convertTo(b, D, z, B, O)) : (P[D] = z, b[D] = z);
}
}), { refreshPanelAfterChanged: Q, description: se, isExpand: _, parentPropertyID: le } = S, W = { propertyID: X, propertyName: T, propertyType: H, propertyValue: J, editor: N, visible: F, readonly: A, cascadeConfig: G, hideCascadeTitle: K, refreshPanelAfterChanged: Q, description: se, isExpand: _, parentPropertyID: le };
return s[X] = W, W;
});
}
function c(l, s, b = {}) {
const P = {}, B = t[l];
return B && B.categories ? Object.keys(B.categories).map((L) => {
const j = B.categories[L], D = j == null ? void 0 : j.title, V = f(j.properties || {}, P, {}, b, s);
return { categoryId: L, categoryName: D, properties: V };
}) : [];
}
function p(l, s, b, P, B = "") {
const O = s.$ref.schema, L = s.$ref.converter, j = b[O], D = j.type, V = r(j), X = {}, S = t[D];
if (S && S.categories) {
const q = S.categories[l], T = q == null ? void 0 : q.title;
L && Object.keys(q.properties).forEach((N) => {
q.properties[N].$converter = L;
});
const H = (q == null ? void 0 : q.properties) || {}, E = f(H, X, V, j, P, B);
return { categoryId: l, categoryName: T, properties: E };
}
return { categoryId: l, categoryName: "", properties: [] };
}
function v(l, s, b, P, B) {
const O = l.type, L = r(l), j = {};
let D = B || t[O];
if (D && Object.keys(D).length === 0 && b && b.getPropConfig && (D = b.getPropConfig(P)), D && D.categories) {
const V = [];
return Object.keys(D.categories).map((X) => {
const S = D.categories[X];
if (S.$ref) {
V.push(p(X, S, l, s, P));
return;
}
const q = S == null ? void 0 : S.title, T = S == null ? void 0 : S.tabId, H = S == null ? void 0 : S.tabName, E = S == null ? void 0 : S.hide, N = S == null ? void 0 : S.hideTitle, F = f(S.properties || {}, j, L, l, s, P, S.$converter), { setPropertyRelates: A } = S, G = S == null ? void 0 : S.parentPropertyID;
V.push({ categoryId: X, categoryName: q, tabId: T, tabName: H, hide: E, properties: F, hideTitle: N, setPropertyRelates: A, parentPropertyID: G });
}), V;
}
return [];
}
return {
getPropertyConfigBySchema: v,
getPropertyConfigByType: c,
propertyConverterMap: n
};
}
const $e = {}, Ee = {};
He($e, Ee, Ge);
const Ne = {}, Re = {}, { getSchemaByType: Wt, resolveSchemaWithDefaultValue: ht, resolveSchemaToProps: Yt, mappingSchemaToProps: Jt, setDesignerContext: Qt } = Pe(Ne, Re), Fe = {}, Oe = {};
He(Fe, Oe, ht);
function gt(t, e, r = /* @__PURE__ */ new Map(), n = (d, g, w, h) => g, u = {}, y = (d) => d) {
return Se[e.title] = e, Me[e.title] = n, $e[e.title] = u, Ee[e.title] = y, Ne[e.title] = e, Re[e.title] = n, Fe[e.title] = u, Oe[e.title] = y, (d = {}, g = !0) => {
if (!g)
return We(d, r);
const w = ze(d, e, r), h = Object.keys(t).reduce((f, c) => (f[c] = t[c].default, f), {});
return Object.assign(h, w);
};
}
const vt = "https://json-schema.org/draft/2020-12/schema", mt = "https://farris-design.gitee.io/color-picker.schema.json", yt = "color-picker", wt = "A Farris Component", bt = "object", kt = {
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
}
}, Pt = [
"id",
"type"
], St = {
$schema: vt,
$id: mt,
title: yt,
description: wt,
type: bt,
properties: kt,
required: Pt
};
function Mt(t, e, r) {
return e;
}
function Bt(t, e) {
return { customClass: e.class, customStyle: e.style };
}
const Ht = /* @__PURE__ */ new Map([
["appearance", Bt]
]), $t = "color-picker", Et = "A Farris Component", Nt = "object", Rt = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, Ft = {
title: $t,
description: Et,
type: Nt,
categories: Rt
}, ve = {
/** 初始颜色 */
color: { type: String, default: "#e1e2e3" },
/** 禁用 */
disabled: { type: Boolean, default: !1 },
/** 预置颜色 */
presets: { type: Array, default: [] },
/** 允许颜色为空 */
allowColorNull: { type: Boolean, default: !1 },
/** 颜色值变化事件 */
onValueChanged: { type: Function, default: () => {
} }
}, De = gt(ve, St, Ht, Mt, Ft);
class de {
}
class fe extends de {
constructor(e, r, n, u) {
super(), this.cyan = e, this.magenta = r, this.yellow = n, this.black = u;
}
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 ce extends de {
constructor(e, r, n, u) {
super(), this.hue = e, this.saturation = r, this.lightness = n, this.alpha = u;
}
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 ue extends de {
constructor(e, r, n, u) {
super(), this.hue = e, this.saturation = r, this.value = n, this.alpha = u;
}
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 o extends de {
constructor(e, r, n, u) {
super(), this.red = e, this.green = r, this.blue = n, this.alpha = u;
}
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 i = class i {
};
a(i, "transparent", new o(0, 0, 0, 0)), a(i, "aliceblue", new o(240, 248, 255, 1)), a(i, "antiquewhite", new o(250, 235, 215, 1)), a(i, "aqua", new o(0, 255, 255, 1)), a(i, "aquamarine", new o(127, 255, 212, 1)), a(i, "azure", new o(240, 255, 255, 1)), a(i, "beige", new o(245, 245, 220, 1)), a(i, "bisque", new o(255, 228, 196, 1)), a(i, "black", new o(0, 0, 0, 1)), a(i, "blanchedalmond", new o(255, 235, 205, 1)), a(i, "blue", new o(0, 0, 255, 1)), a(i, "blueviolet", new o(138, 43, 226, 1)), a(i, "brown", new o(165, 42, 42, 1)), a(i, "burlywood", new o(222, 184, 135, 1)), a(i, "cadetblue", new o(95, 158, 160, 1)), a(i, "chartreuse", new o(127, 255, 0, 1)), a(i, "chocolate", new o(210, 105, 30, 1)), a(i, "coral", new o(255, 127, 80, 1)), a(i, "cornflowerblue", new o(100, 149, 237, 1)), a(i, "cornsilk", new o(255, 248, 220, 1)), a(i, "crimson", new o(220, 20, 60, 1)), a(i, "cyan", new o(0, 255, 255, 1)), a(i, "darkblue", new o(0, 0, 139, 1)), a(i, "darkcyan", new o(0, 139, 139, 1)), a(i, "darkgoldenrod", new o(184, 134, 11, 1)), a(i, "darkgray", new o(169, 169, 169, 1)), a(i, "darkgreen", new o(0, 100, 0, 1)), a(i, "darkgrey", i.darkgray), a(i, "darkkhaki", new o(189, 183, 107, 1)), a(i, "darkmagenta", new o(139, 0, 139, 1)), a(i, "darkolivegreen", new o(85, 107, 47, 1)), a(i, "darkorange", new o(255, 140, 0, 1)), a(i, "darkorchid", new o(153, 50, 204, 1)), a(i, "darkred", new o(139, 0, 0, 1)), a(i, "darksalmon", new o(233, 150, 122, 1)), a(i, "darkseagreen", new o(143, 188, 143, 1)), a(i, "darkslateblue", new o(72, 61, 139, 1)), a(i, "darkslategray", new o(47, 79, 79, 1)), a(i, "darkslategrey", i.darkslategray), a(i, "darkturquoise", new o(0, 206, 209, 1)), a(i, "darkviolet", new o(148, 0, 211, 1)), a(i, "deeppink", new o(255, 20, 147, 1)), a(i, "deepskyblue", new o(0, 191, 255, 1)), a(i, "dimgray", new o(105, 105, 105, 1)), a(i, "dimgrey", i.dimgray), a(i, "dodgerblue", new o(30, 144, 255, 1)), a(i, "firebrick", new o(178, 34, 34, 1)), a(i, "floralwhite", new o(255, 250, 240, 1)), a(i, "forestgreen", new o(34, 139, 34, 1)), a(i, "fuchsia", new o(255, 0, 255, 1)), a(i, "gainsboro", new o(220, 220, 220, 1)), a(i, "ghostwhite", new o(248, 248, 255, 1)), a(i, "gold", new o(255, 215, 0, 1)), a(i, "goldenrod", new o(218, 165, 32, 1)), a(i, "gray", new o(128, 128, 128, 1)), a(i, "grey", i.gray), a(i, "green", new o(0, 128, 0, 1)), a(i, "greenyellow", new o(173, 255, 47, 1)), a(i, "honeydew", new o(240, 255, 240, 1)), a(i, "hotpink", new o(255, 105, 180, 1)), a(i, "indianred", new o(205, 92, 92, 1)), a(i, "indigo", new o(75, 0, 130, 1)), a(i, "ivory", new o(255, 255, 240, 1)), a(i, "khaki", new o(240, 230, 140, 1)), a(i, "lavender", new o(230, 230, 250, 1)), a(i, "lavenderblush", new o(255, 240, 245, 1)), a(i, "lawngreen", new o(124, 252, 0, 1)), a(i, "lemonchiffon", new o(255, 250, 205, 1)), a(i, "lightblue", new o(173, 216, 230, 1)), a(i, "lightcoral", new o(240, 128, 128, 1)), a(i, "lightcyan", new o(224, 255, 255, 1)), a(i, "lightgoldenrodyellow", new o(250, 250, 210, 1)), a(i, "lightgray", new o(211, 211, 211, 1)), a(i, "lightgreen", new o(144, 238, 144, 1)), a(i, "lightgrey", i.lightgray), a(i, "lightpink", new o(255, 182, 193, 1)), a(i, "lightsalmon", new o(255, 160, 122, 1)), a(i, "lightseagreen", new o(32, 178, 170, 1)), a(i, "lightskyblue", new o(135, 206, 250, 1)), a(i, "lightslategray", new o(119, 136, 153, 1)), a(i, "lightslategrey", i.lightslategray), a(i, "lightsteelblue", new o(176, 196, 222, 1)), a(i, "lightyellow", new o(255, 255, 224, 1)), a(i, "lime", new o(0, 255, 0, 1)), a(i, "limegreen", new o(50, 205, 50, 1)), a(i, "linen", new o(250, 240, 230, 1)), a(i, "magenta", new o(255, 0, 255, 1)), a(i, "maroon", new o(128, 0, 0, 1)), a(i, "mediumaquamarine", new o(102, 205, 170, 1)), a(i, "mediumblue", new o(0, 0, 205, 1)), a(i, "mediumorchid", new o(186, 85, 211, 1)), a(i, "mediumpurple", new o(147, 112, 219, 1)), a(i, "mediumseagreen", new o(60, 179, 113, 1)), a(i, "mediumslateblue", new o(123, 104, 238, 1)), a(i, "mediumspringgreen", new o(0, 250, 154, 1)), a(i, "mediumturquoise", new o(72, 209, 204, 1)), a(i, "mediumvioletred", new o(199, 21, 133, 1)), a(i, "midnightblue", new o(25, 25, 112, 1)), a(i, "mintcream", new o(245, 255, 250, 1)), a(i, "mistyrose", new o(255, 228, 225, 1)), a(i, "moccasin", new o(255, 228, 181, 1)), a(i, "navajowhite", new o(255, 222, 173, 1)), a(i, "navy", new o(0, 0, 128, 1)), a(i, "oldlace", new o(253, 245, 230, 1)), a(i, "olive", new o(128, 128, 0, 1)), a(i, "olivedrab", new o(107, 142, 35, 1)), a(i, "orange", new o(255, 165, 0, 1)), a(i, "orangered", new o(255, 69, 0, 1)), a(i, "orchid", new o(218, 112, 214, 1)), a(i, "palegoldenrod", new o(238, 232, 170, 1)), a(i, "palegreen", new o(152, 251, 152, 1)), a(i, "paleturquoise", new o(175, 238, 238, 1)), a(i, "palevioletred", new o(219, 112, 147, 1)), a(i, "papayawhip", new o(255, 239, 213, 1)), a(i, "peachpuff", new o(255, 218, 185, 1)), a(i, "peru", new o(205, 133, 63, 1)), a(i, "pink", new o(255, 192, 203, 1)), a(i, "plum", new o(221, 160, 221, 1)), a(i, "powderblue", new o(176, 224, 230, 1)), a(i, "purple", new o(128, 0, 128, 1)), a(i, "red", new o(255, 0, 0, 1)), a(i, "rosybrown", new o(188, 143, 143, 1)), a(i, "royalblue", new o(65, 105, 225, 1)), a(i, "saddlebrown", new o(139, 69, 19, 1)), a(i, "salmon", new o(250, 128, 114, 1)), a(i, "sandybrown", new o(244, 164, 96, 1)), a(i, "seagreen", new o(46, 139, 87, 1)), a(i, "seashell", new o(255, 245, 238, 1)), a(i, "sienna", new o(160, 82, 45, 1)), a(i, "silver", new o(192, 192, 192, 1)), a(i, "skyblue", new o(135, 206, 235, 1)), a(i, "slateblue", new o(106, 90, 205, 1)), a(i, "slategray", new o(112, 128, 144, 1)), a(i, "slategrey", i.slategray), a(i, "snow", new o(255, 250, 250, 1)), a(i, "springgreen", new o(0, 255, 127, 1)), a(i, "steelblue", new o(70, 130, 180, 1)), a(i, "tan", new o(210, 180, 140, 1)), a(i, "teal", new o(0, 128, 128, 1)), a(i, "thistle", new o(216, 191, 216, 1)), a(i, "tomato", new o(255, 99, 71, 1)), a(i, "turquoise", new o(64, 224, 208, 1)), a(i, "violet", new o(238, 130, 238, 1)), a(i, "wheat", new o(245, 222, 179, 1)), a(i, "white", new o(255, 255, 255, 1)), a(i, "whitesmoke", new o(245, 245, 245, 1)), a(i, "yellow", new o(255, 255, 0, 1)), a(i, "yellowgreen", new o(154, 205, 50, 1));
let he = i;
class R {
constructor(e) {
/**
* base color used to calculate other
* default color
* rgb(255, 0, 0)
* hsl(0, 100%, 50%)
* 初始色#ff0000
*/
a(this, "hsva", new ue(0, 1, 1, 1));
a(this, "rgba", new o(255, 0, 0, 1));
e && this.stringToColor(e);
}
static from(e) {
return typeof e == "string" ? new R(e) : e instanceof R ? e.clone() : e instanceof o ? new R().setRgba(e.red, e.green, e.blue, e.alpha) : e instanceof ue ? new R().setHsva(e.hue, e.saturation, e.value, e.alpha) : e instanceof ce ? new R().setHsla(e.hue, e.saturation, e.lightness, e.alpha) : new R(e);
}
/**
* make from existing color new color object
*/
clone() {
return R.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, n = 100, u = 1) {
return e != null && (this.hsva.hue = e), r != null && (this.hsva.saturation = r), n != null && (this.hsva.value = n), u != null && (u = u > 1 ? 1 : u < 0 ? 0 : u, this.hsva.alpha = u), this.rgba = this.hsvaToRgba(this.hsva), this;
}
/**
* define Color from RGBa
*/
setRgba(e, r, n, u = 1) {
return e != null && (this.rgba.red = e), r != null && (this.rgba.green = r), n != null && (this.rgba.blue = n), u != null && (u = u > 1 ? 1 : u < 0 ? 0 : u, this.rgba.alpha = u), this.hsva = this.rgbaToHsva(this.rgba), this;
}
/**
* define Color from HSLa
*/
setHsla(e, r, n, u = 1) {
u != null && (u = u > 1 ? 1 : u < 0 ? 0 : u, this.rgba.alpha = u);
const y = new ce(e, r, n, u);
return this.rgba = this.hslaToRgba(y), 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 ue(this.hsva.hue, this.hsva.saturation, this.hsva.value, this.hsva.alpha);
}
getRgba() {
return new o(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, n = e.saturation / 100, u = e.value / 100, y = (2 - n) * e.value / 2, d = n * u / (y <= 1 ? y : 2 - y) || 0;
return new ce(r, y * 100, d * 100, e.alpha);
}
hslaToHsva(e) {
const { hue: r } = e, n = e.lightness / 100 * 2, u = e.saturation / 100 * (n <= 1 ? n : 2 - n), y = (n + u) / 2, d = 2 * u / (n + u) || 0;
return new ue(r, d, y, e.alpha);
}
rgbaToHsva(e) {
const r = e.red / 255, n = e.green / 255, u = e.blue / 255, { alpha: y } = e, d = Math.max(r, n, u), g = Math.min(r, n, u), w = d - g;
let h = 0, f = d === 0 ? 0 : w / d, c = d;
if (d !== g) {
switch (d) {
case r:
h = (n - u) / w + (n < u ? 6 : 0);
break;
case n:
h = 2 + (u - r) / w;
break;
case u:
h = 4 + (r - n) / w;
break;
}
h /= 6;
}
return h *= 360, f *= 100, c *= 100, new ue(h, f, c, y);
}
hsvaToRgba(e) {
let r = 1, n = 0, u = 0;
const y = e.saturation / 100, d = e.value / 100, { alpha: g } = e, w = e.hue / 60, h = Math.floor(w), f = w - h, c = (1 - y) * d, p = (1 - y * f) * d, v = (1 - y * (1 - f)) * d;
switch (h) {
case 6:
case 0:
r = d, n = v, u = c;
break;
case 1:
r = p, n = d, u = c;
break;
case 2:
r = c, n = d, u = v;
break;
case 3:
r = c, n = p, u = d;
break;
case 4:
r = v, n = c, u = d;
break;
case 5:
r = d, n = c, u = p;
break;
}
return r *= 255, n *= 255, u *= 255, new o(r, n, u, g);
}
rgbaToHsla(e) {
const r = e.red / 255, n = e.green / 255, u = e.blue / 255, { alpha: y } = e, d = Math.max(r, n, u), g = Math.min(r, n, u);
let w = 0, h = 0, f = (d + g) / 2;
const c = d - g;
if (d !== g) {
switch (h = f > 0.5 ? c / (2 - d - g) : c / (d + g), d) {
case r:
w = (n - u) / c + (n < u ? 6 : 0);
break;
case n:
w = (u - r) / c + 2;
break;
case u:
w = (r - n) / c + 4;
break;
}
w /= 6;
}
return w *= 360, h *= 100, f *= 100, new ce(w, h, f, y);
}
/**
* convert rgb color from HSLa
*
* hue = 0 => 360
* saturation = 0 => 1
* lightness = 0 => 1
*/
hslaToRgba(e) {
const r = e.hue / 360, n = e.saturation / 100, u = e.lightness / 100, { alpha: y } = e;
let d = u, g = u, w = u;
if (n !== 0) {
const h = u < 0.5 ? u * (1 + n) : u + n - u * n, f = 2 * u - h;
d = this.hueToRgb(f, h, r + 1 / 3), g = this.hueToRgb(f, h, r), w = this.hueToRgb(f, h, r - 1 / 3);
}
return d *= 255, g *= 255, w *= 255, new o(d, g, w, y);
}
hueToRgb(e, r, n) {
return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (r - e) * 6 * n : n < 1 / 2 ? r : n < 2 / 3 ? e + (r - e) * (2 / 3 - n) * 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, n = e.cyan / 100, u = e.magenta / 100, y = e.yellow / 100;
let d = Math.min(1, (1 - n) * (1 - r)), g = Math.min(1, (1 - u) * (1 - r)), w = Math.min(1, (1 - y) * (1 - r));
return d *= 255, g *= 255, w *= 255, new o(d, 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, n = e.green / 255, u = e.blue / 255;
let y = 1 - r, d = 1 - n, g = 1 - u, w = Math.min(y, d, g);
return w === 1 ? new fe(0, 0, 0, 1) : (y = (y - w) / (1 - w), d = (d - w) / (1 - w), g = (g - w) / (1 - w), w *= 100, y *= 100, d *= 100, g *= 100, new fe(y, d, g, w));
}
roundNumber(e) {
return Math.round(e * 100) / 100;
}
stringToColor(e) {
const r = e.replace(/ /g, "").toLowerCase();
let n = he[e] || null;
if (r[0] === "#") {
let d = r.substr(1);
const { length: g } = d;
let w = 1, h;
if (g === 3)
h = d.split("").map((f) => f + f);
else if (g === 6)
h = d.match(/.{2}/g);
else if (g === 8) {
const f = d.substr(-2);
d = d.substr(0, g - 2), w = this.roundNumber(parseInt(f || "FF", 16) / 255), h = d.match(/.{2}/g);
}
h && h.length === 3 && (n = new o(parseInt(h[0], 16), parseInt(h[1], 16), parseInt(h[2], 16), w));
}
const u = r.indexOf("("), y = r.indexOf(")");
if (u !== -1 && y + 1 === r.length) {
const d = r.substr(0, u), g = r.substr(u + 1, y - (u + 1)).split(",");
let w = 1, h, f;
switch (d) {
case "rgba":
w = parseFloat(g.pop());
case "rgb":
n = new o(parseInt(g[0], 10), parseInt(g[1], 10), parseInt(g[2], 10), w);
break;
case "hsla":
w = parseFloat(g.pop());
break;
case "hsl":
h = new ce(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
w
), n = this.hslaToRgba(h);
break;
case "cmyk":
f = new fe(
parseInt(g[0], 10),
parseInt(g[1], 10),
parseInt(g[2], 10),
parseInt(g[3], 10)
), n = this.cmykToRgba(f);
break;
}
}
return n && (this.rgba = n, this.hsva = this.rgbaToHsva(n)), this;
}
}
var U = /* @__PURE__ */ ((t) => (t.hex = "hex", t.hexa = "hexa", t.rgba = "rgba", t.rgb = "rgb", t.hsla = "hsla", t.hsl = "hsl", t.cmyk = "cmyk", t))(U || {});
class me {
constructor(e) {
/** 所选颜色值 */
a(this, "modelValue", null);
/** 色调颜色值 */
a(this, "hueValue", null);
/** 初始颜色值 */
a(this, "initValue", null);
a(this, "valueChanged", $());
a(this, "initType", null);
// 此处没有监听变量变更后操作的方法 TODO
a(this, "alphaChannelVisibilityChanges", $());
a(this, "colorPresets", []);
const r = e[0], n = R.from(r);
this.setValue(n), this.setHueColor(n);
}
/** 设置值 */
setValueFrom(e, r, n) {
const u = R.from(e);
return this.initValue || (this.initValue = R.from(e)), typeof e == "string" && this.finOutInputType(e), this.setHueColor(u), this.setValue(u), this;
}
setHueColor(e) {
(this.hueValue && e.getHsva().hue > 0 || !this.hueValue) && (this.hueValue = new R().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 = R.from(new o(255, 0, 0, 1)), this.hueValue = new R().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 n = r.indexOf("(");
switch (r.substr(0, n)) {
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((n) => {
Array.isArray(n) ? r.push(this.setPresets(n)) : r.push(new R(n));
}), r;
}
get presets() {
return this.colorPresets;
}
hasPresets() {
return this.colorPresets.length > 0;
}
}
/** 确定输入颜色类型 */
a(me, "finOutInputType");
function Y(t, e) {
if (!t)
return "";
switch (e) {
case U.hex:
return t.toHexString();
case U.hexa:
return t.toHexString(!0);
case U.rgb:
return t.toRgbString();
case U.rgba:
return t.toRgbaString();
case U.hsl:
return t.toHslString();
case U.hsla:
return t.toHslaString();
default:
return t.toRgbaString();
}
}
const Ot = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, Ve = /* @__PURE__ */ oe({
name: "SvPanel",
props: Ot,
emits: ["update:color"],
setup(t, e) {
const r = $(null), n = $(null), u = $(t.randomId), y = $(t.allowColorNull);
function d() {
return t.hue ? t.hue.toRgbaString() : "#3f51b5";
}
function g(c, p) {
var v, l;
c = Math.max(0, Math.min(c, 100)), p = Math.max(0, Math.min(p, 100)), r.value && ((v = r.value.style) == null || v.setProperty("top", `${100 - p}%`), (l = r.value.style) == null || l.setProperty("left", `${c}%`));
}
function w() {
const c = document.getElementById(`farris-color-picker-plus-sure-${u.value}`);
c.className = "btn btn-secondary";
const p = document.getElementById(`farris-color-picker-plus-input-${u.value}`);
p.style.borderColor = "#dcdfe6";
}
function h({
x: c,
y: p,
height: v,
width: l
}) {
const s = c * 100 / l, b = -(p * 100 / v) + 100;
g(s, b);
const P = t.color == null ? "transparent" : t.color, B = R.from(P);
if (w(), B != null) {
const O = t.hue.getHsva(), L = B.getHsva(), j = new R().setHsva(O.hue, s, b, L.alpha);
e.emit("update:color", j);
}
!B && y.value && e.emit("update:color", null);
}
function f(c) {
if (n.value) {
const {
width: p,
height: v,
top: l,
left: s
} = n.value.getBoundingClientRect(), {
pageX: b,
pageY: P
} = "touches" in c ? c.touches[0] : c, B = Math.max(0, Math.min(b - (s + window.pageXOffset), p)), O = Math.max(0, Math.min(P - (l + window.pageYOffset), v));
h({
x: B,
y: O,
height: v,
width: p
});
}
}
return ae(() => {
const c = t.color.getHsva();
g(c.saturation, c.value);
}), C(() => t.color, (c) => {
c.getHsva();
}), C(() => t.color, (c) => {
const p = c.getHsva();
g(p.saturation, p.value);
}), () => M("div", {
class: "f-sv-panel-component",
ref: n,
style: {
backgroundColor: d()
},
onMousedown: ie((c) => f(c), ["prevent"]),
onTouchstart: ie((c) => f(c), ["prevent"])
}, [M("div", {
class: "color-svpanel__white"
}, null), M("div", {
class: "color-svpanel__black"
}, null), M("div", {
class: "color-svpanel__cursor",
ref: r
}, [M("div", null, null)])]);
}
}), Dt = {
color: { type: Object, default: "" },
hue: { type: Object, default: "" },
allowColorNull: { type: Boolean, default: !1 },
onChange: { type: Function }
}, je = /* @__PURE__ */ oe({
name: "Hue",
props: Dt,
emits: ["update:color", "update:hue"],
setup(t, e) {
const r = $(t.hue), n = $(t.allowColorNull), u = [];
function y(l) {
l.preventDefault(), g(l);
}
const d = $(null);
function g(l) {
if (d.value) {
const {
width: s,
height: b,
top: P,
left: B
} = d.value.getBoundingClientRect(), {
pageX: O,
pageY: L
} = "touches" in l ? l.touches[0] : l, j = Math.max(0, Math.min(O - (B + window.pageXOffset), s)), D = Math.max(0, Math.min(L - (P + window.pageYOffset), b));
v({
x: j,
y: D,
height: b,
width: s
});
}
}
function w() {
u.forEach((l) => l()), u.length = 0;
}
function h(l) {
y(l), document.addEventListener("mouseup", w), document.addEventListener("touchend", w), document.addEventListener("touchmove", y);
}
const f = (l) => {
h(l), l.stopPropagation();
};
ae(() => {
document.querySelectorAll(".f-hue-component").forEach((b) => {
b.addEventListener("mousedown", f), b.addEventListener("touchstart", f);
});
const s = t.color.getHsva();
p(s.hue);
});
const c = $(null);
function p(l) {
var P;
const s = Math.max(0, Math.min(l / 360 * 100, 100));
c.value && ((P = c.value.style) == null || P.setProperty("top", `${s}%`));
}
function v({
x: l,
y: s,
height: b,
width: P
}) {
const B = s / b * 360;
p(B);
const O = t.color.getHsva(), L = new R().setHsva(B, O.saturation, O.value, O.alpha), j = new R().setHsva(B, 100, 100, O.alpha);
(t.color != null || t.color == null && n.value) && (e.emit("update:hue", j), e.emit("update:color", L));
}
return C(r, (l) => {
const s = l.getHsva();
p(s.hue);
}), C(() => t.color, (l) => {
const s = l.getHsva();
p(s.hue);
}), () => M("div", {
class: "f-hue-component",
ref: d,
onMousedown: ie((l) => g(l), ["prevent"]),
onTouchstart: ie((l) => g(l), ["prevent"])
}, [M("div", {
class: "color-hue-slider__bar"
}, null), M("div", {
class: "color-hue-slider__thumb",
ref: c
}, null)]);
}
}), Vt = {
color: { type: Object, default: "" },
randomId: { type: String, default: "" },
allowColorNull: { type: Boolean, default: !1 }
}, Ae = /* @__PURE__ */ oe({
name: "Alpha",
props: Vt,
emits: ["update:color"],
setup(t, e) {
const r = $(null), n = $(null), u = $(t.randomId), y = $(t.allowColorNull), d = (f) => {
var v;
const c = Math.max(0, Math.min(f * 100, 100));
n.value && ((v = n.value.style) == null || v.setProperty("left", `${c}%`));
};
function g(f) {
if (r.value) {
const {
width: c,