UNPKG

@joker.front/ui

Version:

Joker-UI | Official native UI component library for Joker Framework. Minimalist design with full-scene components, responsive layout & dynamic interactions. Access dev docs, API references & real-world case studies on official site.

1,382 lines 490 kB
var Rn = Object.defineProperty; var Sn = (t, r, e) => r in t ? Rn(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e; var n = (t, r, e) => Sn(t, typeof r != "symbol" ? r + "" : r, e); var kn = Object.defineProperty, On = Object.getOwnPropertyNames, xn = (t, r, e) => r in t ? kn(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e, Be = (t, r) => function() { return r || (0, t[On(t)[0]])((r = { exports: {} }).exports, r), r.exports; }, De = (t, r, e) => xn(t, typeof r != "symbol" ? r + "" : r, e); function ue(t) { return t !== null && typeof t == "object"; } function Nt(t) { return Object.prototype.toString.call(t) === "[object Object]"; } function Bi(t) { if (t === null || typeof t != "object") return t; let r; Array.isArray(t) ? r = [] : r = {}; let e = Object.keys(t); for (let s of e) { let o = t[s]; typeof o == "object" ? r[s] = Bi(o) : r[s] = o; } return r; } function _e(t, r = "") { let e = r.split("."), s = t, o, i = e.length; for (let a = 0; a < i; a++) { let l = e[a]; if (!s) break; if (a === i - 1) { o = s[l]; break; } s = s[l]; } return o; } function Pt(t, r, e) { return Array.isArray(t) && Array.isArray(r) ? Tn(t, r) : Ui(t, r); } function Ui(t, r, e) { if (t === r) return !0; let s = ue(t), o = ue(r); return s && o ? Nt(t) && Nt(r) ? Object.keys(t).length !== Object.keys(r).length ? !1 : JSON.stringify(t) === JSON.stringify(r) : t === r : !s && !o ? String(t) === String(r) : !1; } function ne(t, r) { let e = t.indexOf(r); return e > -1 && t.splice(e, 1), t; } function it(t, r) { let e = t.findIndex((s) => r(s)); return e > -1 && t.splice(e, 1), t; } function Tn(t, r, e) { if (t.length !== r.length) return !1; for (let s = 0; s < t.length; s++) if (Ui(t[s], r[s]) === !1) return !1; return !0; } function Yi(t) { return Array.apply(null, { length: t }).map((r, e) => e); } function Ue(t = 32) { let r = [], e = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ]; for (let s = 0; s < t; s++) { let o = Math.round(Math.random() * (e.length - 1)); r.push(e[o]); } return r.join(""); } function Dn(t, r = "-") { return t = t || "", t.split(/(?=[A-Z])/).map((s) => s.toLowerCase()).join(r); } function $n(t = "") { return t.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&"); } function In() { let t = []; function r(o) { return t.push(o), () => { ne(t, o); }; } function e() { t = []; } function s(o) { ne(t, o); } return { add: r, callbacks: t, reset: e, remove: s }; } var Wi = "warn", Ft = ["silent", "error", "warn", "info"]; function Mt() { let t = /* @__PURE__ */ new Date(); function r(e, s = 2) { return e.toString().padStart(s, "0"); } return r(t.getHours()) + ":" + r(t.getMinutes()) + ":" + r(t.getSeconds()) + ":" + r(t.getMilliseconds(), 3); } function xt(t, r, e, s) { Ft.indexOf(t) <= Ft.indexOf(Wi) && (s === void 0 ? console[t](`${Mt()} [${r}]:`, e) : console[t](`${Mt()} [${r}]:`, e, s)); } function Ln(t, r, e) { xt("info", t, r, e); } function An(t, r, e) { xt("warn", t, r, e); } function Nn(t, r, e) { xt("error", t, r, e); } function Pn(t) { Wi = t; } var z = { info: Ln, warn: An, error: Nn, setLoggerLeve: Pn }, Fn = class { constructor(t = "hex") { De(this, "format"), De(this, "h", 0), De(this, "s", 100), De(this, "v", 100), De(this, "a", 100), De(this, "value", ""), this.format = t; } setVal(t, r) { this[t] = r, this.doOnChange(); } toRgb() { return yt(this.h, this.s, this.v); } setFormat(t) { this.format = t, this.doOnChange(); } fromString(t) { if (!t) { this.h = 0, this.s = 100, this.v = 100, this.doOnChange(); return; } let r = (e, s, o) => { this.h = Math.max(0, Math.min(360, e)), this.s = Math.max(0, Math.min(100, s)), this.v = Math.max(0, Math.min(100, o)), this.doOnChange(); }; if (t.indexOf("rgb") !== -1) { let e = t.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((s) => s !== "").map((s, o) => o > 2 ? parseFloat(s) : parseInt(s, 10)); if (e.length === 4 ? this.a = Math.floor(e[3] * 100) : e.length === 3 && (this.a = 100), e.length >= 3) { let { h: s, s: o, v: i } = Jt(e[0], e[1], e[2]); r(s, o, i); } } else if (t.indexOf("#") !== -1) { let e = t.replace("#", "").trim(); if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(e)) return; let s = 0, o = 0, i = 0; e.length === 3 ? (s = we(e[0] + e[0]), o = we(e[1] + e[1]), i = we(e[2] + e[2])) : (e.length === 6 || e.length === 8) && (s = we(e.substring(0, 2)), o = we(e.substring(2, 4)), i = we(e.substring(4, 6))), e.length === 8 ? this.a = Math.floor(we(e.substring(6)) / 255 * 100) : (e.length === 3 || e.length === 6) && (this.a = 100); let { h: a, s: l, v: d } = Jt(s, o, i); r(a, l, d); } } compare(t) { return Math.abs(t.h - this.h) < 2 && Math.abs(t.s - this.s) < 1 && Math.abs(t.v - this.v) < 1 && Math.abs(t.a - this.a) < 1; } doOnChange() { let { h: t, s: r, v: e, a: s, format: o } = this; switch (o) { case "rgba": let { r: i, g: a, b: l } = yt(t, r, e); this.value = `rgba(${i}, ${a}, ${l}, ${s / 100})`; break; default: this.value = Kn(t, r, e, s / 100); } } }, Mn = function(t) { return typeof t == "string" && t.indexOf(".") !== -1 && parseFloat(t) === 1; }, Jn = function(t) { return typeof t == "string" && t.indexOf("%") !== -1; }, Ae = function(t, r) { Mn(t) && (t = "100%"); let e = Jn(t); return t = Math.min(r, Math.max(0, parseFloat(t))), e && (t = parseInt(t * r, 10) / 100), Math.abs(t - r) < 1e-6 ? 1 : t % r / parseFloat(r); }, dt = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 }, we = function(t) { return t.length === 2 ? (dt[t[0].toUpperCase()] || +t[0]) * 16 + (dt[t[1].toUpperCase()] || +t[1]) : dt[t[1].toUpperCase()] || +t[1]; }; function Jt(t, r, e) { t = Ae(t, 255), r = Ae(r, 255), e = Ae(e, 255); let s = Math.max(t, r, e), o = Math.min(t, r, e), i = 0, a = 0, l = s, d = s - o; if (a = s === 0 ? 0 : d / s, s === o) i = 0; else { switch (s) { case t: i = (r - e) / d + (r < e ? 6 : 0); break; case r: i = (e - t) / d + 2; break; case e: i = (t - r) / d + 4; break; } i /= 6; } return { h: i * 360, s: a * 100, v: l * 100 }; } function yt(t, r, e) { t = Ae(t, 360) * 6, r = Ae(r, 100), e = Ae(e, 100); let s = Math.floor(t), o = t - s, i = e * (1 - r), a = e * (1 - o * r), l = e * (1 - (1 - o) * r), d = s % 6, p = [e, a, i, i, l, e][d], c = [l, e, e, a, i, i][d], m = [i, i, l, e, e, a][d]; return { r: Math.round(p * 255), g: Math.round(c * 255), b: Math.round(m * 255) }; } var Kn = function(t, r, e, s) { let o = yt(t, r, e), i = Math.floor(s * o.r + (1 - s) * 255), a = Math.floor(s * o.g + (1 - s) * 255), l = Math.floor(s * o.b + (1 - s) * 255); return "#" + ("0" + i.toString(16)).slice(-2) + ("0" + a.toString(16)).slice(-2) + ("0" + l.toString(16)).slice(-2); }; function Ke(t, r, e = {}) { let s, o = !1, i = 0, a = () => { s && clearTimeout(s); }, l = (p) => { a(), o = !p; }; function d(...p) { let c = Date.now() - i; if (o) return; let m = () => { i = Date.now(), r.apply(d, p); }; function w() { s = void 0; } !e.noLeading && e.debounceMode && !s && m(), a(), e.debounceMode === void 0 && c > t ? e.noLeading ? (i = Date.now(), e.noTrailing || (s = setTimeout(e.debounceMode ? w : m, t))) : m() : e.noTrailing !== !0 && (s = setTimeout(e.debounceMode ? w : m, e.debounceMode === void 0 ? t - c : t)); } return d.cancel = l, d; } function de(t, r, e = !1) { return Ke(t, r, { debounceMode: e !== !1 }); } const Hn = /([\:\-\_]+(.))/g, Vn = /^moz([A-Z])/; function u(t) { return `__joker_${t}_name__`; } function Xi() { return !isNaN(Number(document.documentMode)); } function qi() { return navigator.userAgent.indexOf("Edge") > -1; } function He(t, r) { if (t === r) return !0; if (!(t instanceof Array) || !(r instanceof Array) || t.length !== r.length) return !1; for (let e = 0; e !== t.length; ++e) if (t[e] !== r[e]) return !1; return !0; } function jn(t) { let r = []; const e = ["transform", "transition", "animation"], s = ["ms-", "webkit-"]; return e.forEach((o) => { const i = t[o]; o && i && s.forEach((a) => { r.push(a + o + ":" + i); }); }), r.join(";"); } function pt(t) { if (t !== void 0) return t = (t != null ? t : "").toString(), isNaN(parseFloat(t)) ? t : t + "px"; } function Kt(t) { let r = !1; return function(...e) { r || (r = !0, window.requestAnimationFrame((s) => { t.apply(this, e), r = !1; })); }; } function zn() { return !!window.navigator.userAgent.match(/firefox/i); } function Bn(t) { return t && t.nodeType === Node.ELEMENT_NODE; } const et = (t, r) => { let e = t; for (; e; ) { if ([window, document, document.documentElement].includes(e)) return document.documentElement; if (Un(e)) return e; e = e.parentNode; } return e; }, Un = (t, r) => { const e = Gi(t, "overflow"); return e == null ? void 0 : e.match(/(scroll|auto|overlay)/); }, Gi = function(t, r) { if (!t || !r) return null; r = Yn(r), r === "float" && (r = "cssFloat"); try { var e = document.defaultView && document.defaultView.getComputedStyle(t, ""); return t.style[r] || e && e[r] || null; } catch { return t.style[r]; } }, Yn = function(t) { return t.replace(Hn, function(r, e, s, o) { return o ? s.toUpperCase() : s; }).replace(Vn, "Moz$1"); }, Wn = (t, r) => { if (!t || !r) return !1; const e = t.getBoundingClientRect(); let s; return [window, document, document.documentElement, null, void 0].includes(r) ? s = { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0 } : s = r.getBoundingClientRect(), e.top < s.bottom && e.bottom > s.top && e.right > s.left && e.left < s.right; }; let Ht = () => document.documentElement.style.objectFit !== void 0; class Xn extends window[Symbol.for("JOKER")].Component { constructor() { super(...arguments); n(this, "propsOption", { type: "default", nativeType: "button" }); n(this, "name", u("button")); n(this, "model", { loading: !1 }); } created() { this.$syncProp("loading"); } handleClick(e) { this.$trigger("click", void 0, e); } handleMouseEnter(e) { this.$trigger("mouseenter", void 0, e); } handleMouseLeave(e) { this.$trigger("mouseleave", void 0, e); } } let qn = { render: function(t) { return [t.createElement("button", { disabled: "@(props.disabled || model.loading)", autofocus: "@props.autofocus", type: "@props.nativeType", "@click": "handleClick", "@mouseenter": "handleMouseEnter", "@mouseleave": "handleMouseLeave", class: "@([ 'jk-button', props.type || '', props.size || '', { 'is-link': props.link, 'is-disabled': props.disabled, 'is-loading': model.loading, 'is-plain': props.plain, 'is-round': props.round, 'is-circle': props.circle, 'is-fullwidth': props.fullWidth }, props.class ])" }, [t.createCommand("if", "model.loading", [t.createElement("i", { class: "jk-icon-loading" }, [])]), t.createCommand("if", "props.icon && !model.loading", [t.createElement("i", { class: "@props.icon" }, [])]), t.createCommand("if", "$sections && $sections.default && !props.circle", [t.createElement("span", {}, [t.createCommand("RenderSection", "")])])])]; } }, Gn = { component: Xn }; var ts, ss; let xe = class extends (ss = Gn.component, ts = window[Symbol.for("JOKER")].SCOPE_ID, ss) { constructor() { super(...arguments); n(this, ts, "4c4aa2cd"); n(this, "template", qn.render); } }, Zn = { render: function(t) { return [t.createElement("div", { class: "jk-button-group" }, [t.createCommand("RenderSection", "")])]; } }, Qn = class extends window[Symbol.for("JOKER")].Component { }, ea = { component: Qn }; var os, rs; let ta = class extends (rs = ea.component, os = window[Symbol.for("JOKER")].SCOPE_ID, rs) { constructor() { super(...arguments); n(this, os, "e5cf9734"); n(this, "template", Zn.render); } }; class sa extends window[Symbol.for("JOKER")].Component { } let oa = { render: function(t) { return [t.createElement("i", { class: "jk-icon-@props.name @(props.class||'')" }, [])]; } }, ra = { component: sa }, ia = class extends ra.component { constructor() { super(...arguments); n(this, "template", oa.render); } }; class na extends window[Symbol.for("JOKER")].Component { constructor() { super(...arguments); n(this, "propsOption", { span: { type: Number, default: 24 }, tag: "div", offset: Number, pull: Number, push: Number }); } mounted() { this.$render([ window[Symbol.for("JOKER")].createElement( this.props.tag, { class: "jk-col @classVal", style: "@styleVal" }, [window[Symbol.for("JOKER")].createCommand("RenderSection")] ) ]); } get classVal() { let e = []; return this.setClassColItem("span", e), this.setClassColItem("offset", e), this.setClassColItem("pull", e), this.setClassColItem("push", e), this.setClassSizeItem("xs", e), this.setClassSizeItem("sm", e), this.setClassSizeItem("md", e), this.setClassSizeItem("lg", e), this.setClassSizeItem("xl", e), e.join(" "); } get styleVal() { let e = ""; if (this.gutter) { let s = this.gutter / 2 + "px"; e += `padding-left:${s};`, e += `padding-right:${s};`; } return e; } get gutter() { var s; let e = (s = this.$rootVNode) == null ? void 0 : s.closest((o) => o instanceof window[Symbol.for("JOKER")].VNode.Component && o.component && o.component.name === u("layout_row")); return e ? e.component.props.gutter : 0; } setClassColItem(e, s) { let o = this.props[e]; (o || o === 0) && s.push(e === "span" ? `col-${o}` : `col-${e}-${o}`); } setClassSizeItem(e, s) { let o = this.props[e]; if (typeof o == "object") for (let i in o) s.push(i === "span" ? `col-${e}-${o}` : `col-${e}-${i}-${o}`); else o !== void 0 && s.push(`col-${e}-${o}`); } } let aa = { render: function(t) { return []; } }, la = { component: na }; var is, ns; let da = class extends (ns = la.component, is = window[Symbol.for("JOKER")].SCOPE_ID, ns) { constructor() { super(...arguments); n(this, is, "064a439e"); n(this, "template", aa.render); } }; class pa extends window[Symbol.for("JOKER")].Component { constructor() { super(...arguments); n(this, "name", u("layout_row")); n(this, "propsOption", { tag: "div", justify: "start", gutter: Number }); n(this, "template", () => [ window[Symbol.for("JOKER")].createElement( this.props.tag, { class: "jk-row @classVal", style: "@styleVal" }, [window[Symbol.for("JOKER")].createCommand("RenderSection")] ) ]); } get classVal() { let e = []; return this.props.justify !== "start" && e.push("is-justify-" + this.props.justify), this.props.align && e.push("is-align-" + this.props.align), this.props.type === "flex" && e.push("is-flex"), e.join(" "); } get styleVal() { let e = ""; if (this.props.gutter) { let s = this.props.gutter / 2; e += `margin-left:-${s}px;`, e += `margin-right:-${s}px;`; } return e; } } let ca = { component: pa }; var as, ls; let ua = class extends (ls = ca.component, as = window[Symbol.for("JOKER")].SCOPE_ID, ls) { constructor() { super(...arguments); n(this, as, "af1ff92c"); } }; class ma extends window[Symbol.for("JOKER")].Component { constructor() { super(...arguments); n(this, "propsOption", { href: "javascript:void(0)", underline: !0 }); } handleClick(e) { this.$trigger("click", void 0, e); } } let ha = { render: function(t) { return [t.createElement("a", { class: "@([ 'jk-link', props.type || 'default', { 'is-disabled': props.disabled, 'is-underline': props.underline && !props.disabled }, props.class, props.size ])", href: "@props.href", target: "@props.target", "@click": "handleClick" }, [t.createCommand("if", "props.icon", [t.createElement("i", { class: "@props.icon" }, [])]), t.createCommand("if", "$sections && $sections.default", [t.createElement("span", {}, [t.createCommand("RenderSection", "")])])])]; } }, fa = { component: ma }; var ds, ps; let Tt = class extends (ps = fa.component, ds = window[Symbol.for("JOKER")].SCOPE_ID, ps) { constructor() { super(...arguments); n(this, ds, "5698f682"); n(this, "template", ha.render); } }; class K extends window[Symbol.for("JOKER")].Component { constructor(...e) { super(...e); n(this, "formItemOption"); this.$on("created", () => { var s, o; (o = (s = this.model).value) != null || (s.value = void 0), this.$syncProp("value"), this.formItemOption = ga(this); }); } get isError() { var e; return this.props.error || ((e = this.formItemOption) == null ? void 0 : e.ctrl.validateState.value) === "error"; } get form() { var e, s; return (s = (e = this.$root) == null ? void 0 : e.closest((o) => o instanceof window[Symbol.for("JOKER")].VNode.Component && o.component.name === u("form"))) == null ? void 0 : s.component; } get sizeClass() { var e; return this.props.size || ((e = this.form) == null ? void 0 : e.props.size); } triggerValidate() { this.$trigger("validate"); } get value() { return this.model.value; } set value(e) { this.model.value = e; } } function ga(t) { var e, s, o, i; if (!t.props.name) return; if (!("value" in t.model)) { z.warn("formCtrl", "The registered control does not conform to the rules of the Form form control. The [model.value] property is missing.", t); return; } let r = t.props.name; if (t.$root && t.$root instanceof window[Symbol.for("JOKER")].VNode.Node) { let a = (s = (e = t.$root) == null ? void 0 : e.closest((d) => d instanceof window[Symbol.for("JOKER")].VNode.Component && d.component.name === u("form"))) == null ? void 0 : s.component; if (!a) return; let l = (i = (o = t.$root) == null ? void 0 : o.closest((d) => d instanceof window[Symbol.for("JOKER")].VNode.Component && d.component.name === u("form-item"))) == null ? void 0 : i.component; return a.registerFormCtrl(r, { ctrl: t, formItem: l }), t.$on("validate", () => { a == null || a.validate(r).catch((d) => { }); }), t.$on("beforeDestroy", () => { a.unRegisterFormCtrl(r, t); }), { form: a, formItem: l, ctrl: a.ctrls[r], unRegisterFormCtrl: () => { a.unRegisterFormCtrl(r, t); } }; } } class Ea extends K { constructor() { super(...arguments); n(this, "model", { value: void 0, focus: !1 }); } mounted() { this.$watch( () => this.checked, (e) => { this.$getRef("radio").output.checked = e; } ), this.$getRef("radio").output.checked = this.checked; } get checked() { return this.group ? this.value === this.props.value : this.props.value; } get group() { var e; return (e = this.$rootVNode) == null ? void 0 : e.closest((s) => { var o; return s instanceof window[Symbol.for("JOKER")].VNode.Component && ((o = s.component) == null ? void 0 : o.name) === u("radio_group"); }); } get value() { return this.group ? this.group.component.model.value : this.model.value; } set value(e) { this.group ? this.group.component.checked(e) : this.model.value = e, this.$getRef("radio").output.checked = this.model.value === this.props.value; } get isDisabled() { var e, s, o; return (o = (s = (e = this.group) == null ? void 0 : e.component) == null ? void 0 : s.props.disabled) != null ? o : this.props.disabled; } get tabIndex() { return this.isDisabled || this.group && this.value !== this.props.value ? -1 : 0; } get size() { var e; return ((e = this.group) == null ? void 0 : e.component.props.size) || this.props.size; } handleKeydown(e) { this.isDisabled || (this.value = this.props.value); } handleFocus(e) { this.model.focus = !0; } handleBlur(e) { this.model.focus = !1; } handleChange(e) { var s, o; (s = e.target) != null && s.output.checked && (this.value = this.props.value, (o = this.group) == null || o.component.handleChange(e, this.value)), this.$trigger("change", this.value), this.triggerValidate(); } handleClick(e) { this.$trigger("click", void 0, e); } } let _a = { render: function(t) { return [t.createElement("label", { class: "@([ 'jk-radio', props.border && size && size, props.class, isDisabled && 'is-disabled', model.focus && 'is-focus', props.border && 'is-border', checked && 'is-checked' ])", role: "radio", "aria-checked": "@(checked)", "aria-disabled": "@isDisabled", tabindex: "@tabIndex", "@click": "handleClick", "@keydown.space.stop.prevent": "handleKeydown" }, [t.createElement("span", { class: "input @(isDisabled?'is-disabled':'') @(checked?'is-checked':'')" }, [t.createElement("span", { class: "target" }, []), t.createElement("input", { ref: "radio", type: "radio", value: "@props.label", name: "@props.name", disabled: "@isDisabled", tabindex: "-1", autocomplete: "off", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange" }, [])]), t.createCommand("if", "$sections.default || props.label", [t.createElement("span", { class: "label", "@keydown.stop": "__UNDEFINED_BUFFER__" }, [t.createCommand("if", "$sections.default", [t.createCommand("RenderSection", "")]), t.createCommand("else", "", [t.createCodeFunction("props.label")])])])])]; } }, Ca = { component: Ea }; var cs, us; let Zi = class extends (us = Ca.component, cs = window[Symbol.for("JOKER")].SCOPE_ID, us) { constructor() { super(...arguments); n(this, cs, "1a4217e0"); n(this, "template", _a.render); } }; class ba extends K { constructor() { super(...arguments); n(this, "name", u("radio_group")); n(this, "model", { value: void 0 }); } handleKeydown(e) { let s = e.event, o = e.event.target, i = this.$getRef("group").output, a = o.tagName === "INPUT" ? "[type=radio]" : "[role=radio]", l = i.querySelectorAll(a); if (l && l.length) { let d = Array.from(l).indexOf(o), p = l.length, c = i.querySelectorAll("[role=radio]"); switch (s.key) { case "ArrowLeft": case "ArrowUp": s.stopPropagation(), s.preventDefault(), d === 0 ? (c[p - 1].click(), c[p - 1].focus()) : (c[d - 1].click(), c[d - 1].focus()); break; case "ArrowRight": case "ArrowDown": s.stopPropagation(), s.preventDefault(), d === l.length - 1 ? (c[0].click(), c[0].focus()) : (c[d + 1].click(), c[d + 1].focus()); break; } } } checked(e) { this.model.value = e; } handleChange(e, s) { this.$trigger("change", s, e), this.triggerValidate(); } } let va = { render: function(t) { return [t.createElement("div", { class: "@(['jk-radio-group', props.class])", ref: "group", "@keydown": "handleKeydown" }, [t.createCommand("RenderSection", "")])]; } }, wa = { component: ba }, ya = class extends wa.component { constructor() { super(...arguments); n(this, "template", va.render); } }; class Ra extends K { constructor() { super(...arguments); n(this, "model", { value: void 0, focus: !1 }); } mounted() { this.$watch( () => this.value === this.props.value, (e) => { this.$getRef("radio").output.checked = e; } ), this.$getRef("radio").output.checked = this.value === this.props.value; } get group() { var e; return (e = this.$rootVNode) == null ? void 0 : e.closest((s) => { var o; return s instanceof window[Symbol.for("JOKER")].VNode.Component && ((o = s.component) == null ? void 0 : o.name) === u("radio_group"); }); } get value() { return this.group ? this.group.component.model.value : this.model.value; } set value(e) { this.group ? this.group.component.checked(e) : this.model.value = e, this.$getRef("radio").output.checked = this.model.value === this.props.value; } get isDisabled() { var e, s, o; return (o = (s = (e = this.group) == null ? void 0 : e.component) == null ? void 0 : s.props.disabled) != null ? o : this.props.disabled; } get tabIndex() { return this.isDisabled || this.group && this.value !== this.props.value ? -1 : 0; } get size() { var e; return ((e = this.group) == null ? void 0 : e.component.props.size) || this.sizeClass; } handleKeydown(e) { this.isDisabled || (this.value = this.props.value); } handleFocus(e) { this.model.focus = !0; } handleBlur(e) { this.model.focus = !1; } handleChange(e) { var s, o; (s = e.target) != null && s.output.checked && (this.value = this.props.value, (o = this.group) == null || o.component.handleChange(e, this.value)), this.$trigger("change", this.value), this.triggerValidate(); } } let Sa = { render: function(t) { return [t.createElement("label", { class: "@([ 'jk-radio-button', size, props.class, isDisabled && 'is-disabled', model.focus && 'is-focus', value === props.value && 'is-checked' ])", role: "radio", "aria-checked": "@(value === props.label)", "aria-disabled": "@isDisabled", tabindex: "@tabIndex", "@keydown.space.stop.prevent": "handleKeydown" }, [t.createElement("input", { ref: "radio", type: "radio", value: "@props.label", name: "@props.name", disabled: "@isDisabled", tabindex: "-1", autocomplete: "off", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange" }, []), t.createElement("span", { class: "target", "@keydown.stop": "__UNDEFINED_BUFFER__" }, [t.createCommand("if", "$sections.default", [t.createCommand("RenderSection", "")]), t.createCommand("else", "", [t.createCodeFunction("props.label")])])])]; } }, ka = { component: Ra }; var ms, hs; let Oa = class extends (hs = ka.component, ms = window[Symbol.for("JOKER")].SCOPE_ID, hs) { constructor() { super(...arguments); n(this, ms, "48cc174d"); n(this, "template", Sa.render); } }; class xa extends K { constructor() { super(...arguments); n(this, "model", { value: void 0, focus: !1, disabled: !1 }); n(this, "propsOption", { value: { default: !1 } }); } mounted() { this.$syncProp("disabled"), this.$watch( () => this.value === this.props.label, (e) => { this.$getRef("checkbox").output.checked = e; } ), this.$getRef("checkbox").output.checked = !!this.value; } get group() { var e; return (e = this.$rootVNode) == null ? void 0 : e.closest((s) => { var o; return s instanceof window[Symbol.for("JOKER")].VNode.Component && ((o = s.component) == null ? void 0 : o.name) === u("checkbox-group"); }); } get value() { return this.group ? this.group.component.model.value.indexOf(this.props.value) > -1 : this.model.value; } set value(e) { this.group ? this.group.component.checked(this.props.value, e) : this.model.value = e, this.$getRef("checkbox").output.checked = !!this.model.value; } get isLimitDisabled() { if (this.group) { let { max: e, min: s } = this.group.component.props, o = this.group.component.model.value; return !!(e || s) && o.length >= e && !this.value || o.length <= s && this.value; } return !1; } get isDisabled() { var e, s, o; return (o = (s = (e = this.group) == null ? void 0 : e.component) == null ? void 0 : s.props.disabled) != null ? o : this.model.disabled || this.isLimitDisabled; } get tabIndex() { return this.isDisabled || this.group && this.value !== this.props.label ? -1 : 0; } get size() { var e, s; return ((e = this.group) == null ? void 0 : e.component.props.size) || this.props.size || ((s = this.formItemOption) == null ? void 0 : s.form.props.size); } handleKeydown(e) { this.isDisabled || (this.value = !this.value); } handleFocus(e) { this.model.focus = !0; } handleBlur(e) { this.model.focus = !1; } handleChange(e) { var s; this.group ? (this.value = !this.value, (s = this.group) == null || s.component.handleChange(e)) : this.value = !this.value, this.$trigger("change", this.value), this.triggerValidate(); } } let Ta = { render: function(t) { return [t.createElement("label", { class: "@([ 'jk-checkbox', size, isDisabled && 'is-disabled', model.focus && 'is-focus', props.border && 'is-border', value && 'is-checked', props.indeterminate && 'is-indeterminate', props.class ])", role: "checkbox", "aria-checked": "@value", "aria-disabled": "@isDisabled", tabindex: "@tabIndex", "@keydown.space.stop.prevent": "handleKeydown" }, [t.createElement("span", { class: "input @(isDisabled?'is-disabled':'') @(value?'is-checked':'')" }, [t.createElement("span", { class: "target" }, []), t.createElement("input", { ref: "checkbox", type: "checkbox", value: "@(props.label)", checked: "@value", name: "@props.name", disabled: "@isDisabled", tabindex: "-1", autocomplete: "off", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange" }, [])]), t.createCommand("if", "$sections.default || props.label", [t.createElement("span", { class: "label", "@keydown.stop": "__UNDEFINED_BUFFER__" }, [t.createCommand("if", "$sections.default", [t.createCommand("RenderSection", "")]), t.createCommand("else", "", [t.createCodeFunction("props.label")])])])])]; } }, Da = { component: xa }; var fs, gs; let Ye = class extends (gs = Da.component, fs = window[Symbol.for("JOKER")].SCOPE_ID, gs) { constructor() { super(...arguments); n(this, fs, "69ac0612"); n(this, "template", Ta.render); } }; class $a extends K { constructor() { super(...arguments); n(this, "propsOption", { min: Number, max: Number, value: [] }); n(this, "name", u("checkbox-group")); n(this, "model", { value: [] }); } created() { this.$syncProp("value"); } handleKeydown(e) { let s = e.event, o = e.event.target, i = this.$getRef("group").output, a = o.tagName === "INPUT" ? "[type=checkbox]" : "[role=checkbox]", l = i.querySelectorAll(a); if (l && l.length) { let d = Array.from(l).indexOf(o), p = l.length, c = i.querySelectorAll("[role=checkbox]"); switch (s.key) { case "ArrowLeft": case "ArrowUp": s.stopPropagation(), s.preventDefault(), d === 0 ? c[p - 1].focus() : c[d - 1].focus(); break; case "ArrowRight": case "ArrowDown": s.stopPropagation(), s.preventDefault(), d === l.length - 1 ? c[0].focus() : c[d + 1].focus(); break; case " ": case "Enter": s.stopPropagation(), s.preventDefault(), c[d].click(); } } } checked(e, s) { if (s) this.model.value.push(e); else { let o = this.model.value.indexOf(e); this.model.value.splice(o, 1); } } handleChange(e) { this.$trigger("change", this.model.value, e), this.triggerValidate(); } } let Ia = { render: function(t) { return [t.createElement("div", { class: "jk-checkbox-group", ref: "group", "@keydown": "handleKeydown" }, [t.createCommand("RenderSection", "")])]; } }, La = { component: $a }, Aa = class extends La.component { constructor() { super(...arguments); n(this, "template", Ia.render); } }; class Na extends K { constructor() { super(...arguments); n(this, "model", { value: void 0, focus: !1, disabled: !1 }); } mounted() { this.$syncProp("disabled"), this.$watch( () => this.value === this.props.label, (e) => { this.$getRef("checkbox").output.checked = e; } ), this.$getRef("checkbox").output.checked = !!this.value; } get group() { var e; return (e = this.$rootVNode) == null ? void 0 : e.closest((s) => { var o; return s instanceof window[Symbol.for("JOKER")].VNode.Component && ((o = s.component) == null ? void 0 : o.name) === u("checkbox-group"); }); } get value() { return this.group ? this.group.component.model.value.indexOf(this.props.value) > -1 : this.model.value; } set value(e) { this.group ? this.group.component.checked(this.props.value, e) : this.model.value = e, this.$getRef("checkbox").output.checked = !!this.model.value; } get isLimitDisabled() { if (this.group) { const { max: e, min: s } = this.group.component.props, o = this.group.component.model.value; return !!(e || s) && o.length >= e && !this.value || o.length <= s && this.value; } return !1; } get isDisabled() { var e, s, o; return (o = (s = (e = this.group) == null ? void 0 : e.component) == null ? void 0 : s.props.disabled) != null ? o : this.model.disabled || this.isLimitDisabled; } get tabIndex() { return this.isDisabled || this.group && this.value !== this.props.label ? -1 : 0; } get size() { var e; return ((e = this.group) == null ? void 0 : e.component.props.size) || this.sizeClass; } handleKeydown(e) { this.isDisabled || (this.value = !this.value); } handleFocus(e) { this.model.focus = !0; } handleBlur(e) { this.model.focus = !1; } handleChange(e) { var s; this.group ? (this.value = !this.value, (s = this.group) == null || s.component.handleChange(e)) : this.value = !this.value, this.$trigger("change", this.value), this.triggerValidate(); } } let Pa = { render: function(t) { return [t.createElement("label", { class: "@(['jk-checkbox-button', size, { 'is-disabled': isDisabled, 'is-focus': model.focus, 'is-checked': value }])", role: "checkbox", "aria-checked": "@value", "aria-disabled": "@isDisabled", tabindex: "@tabIndex", "@keydown.space.stop.prevent": "handleKeydown" }, [t.createElement("input", { ref: "checkbox", type: "checkbox", checked: "@value", name: "@props.name", disabled: "@isDisabled", tabindex: "-1", autocomplete: "off", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange" }, []), t.createElement("span", { class: "target", "@keydown.stop": "__UNDEFINED_BUFFER__" }, [t.createCommand("RenderSection", ""), t.createCommand("if", "!($sections && $sections.default)", [t.createCodeFunction("props.label")])])])]; } }, Fa = { component: Na }; var Es, _s; let Ma = class extends (_s = Fa.component, Es = window[Symbol.for("JOKER")].SCOPE_ID, _s) { constructor() { super(...arguments); n(this, Es, "bdcd7e21"); n(this, "template", Pa.render); } }; class Ja extends K { constructor() { super(...arguments); n(this, "model", { hovering: !1, focused: !1, isComposing: !1 }); n(this, "propsOption", { type: "text", autocomplete: "off", maxlength: Number, minlength: Number }); } mounted() { this.setNativeInputValue(), this.$watch( () => this.model.value, () => { this.setNativeInputValue(); } ), this.$watch( () => this.props.value, () => { this.triggerValidate(); } ), this.$watch( () => this.props.type, () => { this.setNativeInputValue(); } ), this.props.autofocus && setTimeout(() => { var e; if (this.$root) { let s = (e = this.$getRef("input")) == null ? void 0 : e.output; s == null || s.focus(); } }); } get isWordLimitVisible() { return this.props.showWordLimit && this.props.maxlength && this.props.type === "text" && !this.props.disabled && !this.props.readonly; } get validateIcon() { let e = this.formItemOption.ctrl.validateState.value; return e && { validating: "jk-icon-loading", success: "jk-icon-circle-check", error: "jk-icon-circle-close" }[e]; } get textLength() { return typeof this.value == "number" ? String(this.value).length : (this.value || "").length; } get inputExceed() { return this.isWordLimitVisible && this.textLength > this.props.maxlength; } get nativeInputValue() { return this.value === null || this.value === void 0 ? "" : String(this.value); } get showClear() { return (this.props.forceShowClearable || this.props.clearable && !this.props.disabled && !this.props.readonly) && this.nativeInputValue && (this.model.focused || this.model.hovering); } get suffixVisable() { var e; return this.$sections.suffix || this.props.suffixIcon || this.showClear || this.isWordLimitVisible || ((e = this.formItemOption) == null ? void 0 : e.ctrl.validateState.value) && this.props.statusIcon; } clear() { this.value = "", this.setNativeInputValue(), this.$trigger("input", this.value), this.$trigger("change", this.value), this.$trigger("clear"), this.$trigger("validate"); } focus() { var e; (e = this.$getRef("input")) == null || e.output.focus(); } blur() { var e; (e = this.$getRef("input")) == null || e.output.blur(); } select() { var e; (e = this.$getRef("input")) == null || e.output.select(); } //#region 事件 handleHover(e, s) { this.model.hovering = s; } handleFocus(e) { this.model.focused = !0, this.$trigger("focus", this.value, e); } handleBlur(e) { this.model.focused = !1, this.$trigger("blur", this.value, e), this.triggerValidate(); } handleChange(e) { this.$trigger("change", e.event.target.value); } handleInput(e) { this.model.isComposing || e.event.target.value !== this.value && (this.$trigger("input", e.event.target.value, e), this.value = e.event.target.value); } handleCompositionStart(e) { this.$trigger("compositionstart", void 0, e), this.model.isComposing = !0; } handleCompositionUpdate(e) { this.$trigger("compositionupdate", void 0, e); } handleCompositionEnd(e) { this.$trigger("compositionend", void 0, e), this.model.isComposing && (this.model.isComposing = !1, this.handleInput(e)); } handleKeydown(e) { this.model.isComposing || this.$trigger("keydown", this.value, e); } handleKeyup(e) { this.$trigger("keyup", this.value, e); } handleSuffixClick(e) { this.$trigger("suffix-click", this.value, e); } //#endregion setNativeInputValue() { var s; let e = (s = this.$getRef("input")) == null ? void 0 : s.output; e && e.value !== this.nativeInputValue && (e.value = this.nativeInputValue); } } let Ka = { render: function(t) { return [t.createElement("div", { ref: "container", class: "@([ 'jk-input', props.class, sizeClass, { 'is-disabled': props.disabled, 'is-exceed': inputExceed, 'is-error': isError, group: $sections.prepend || $sections.append, 'group-append': $sections.append, 'group-prepend': $sections.prepend, prefix: $sections.prefix || props.prefixIcon, suffix: $sections.suffix || props.suffixIcon || props.clearable } ])", "@mouseenter": "handleHover(true)", "@mouseleave": "handleHover(false)" }, [t.createCommand("if", "$sections.prepend", [t.createElement("div", { class: "prepend" }, [t.createCommand("RenderSection", '"prepend"')])]), t.createElement("input", { ref: "input", tabindex: "@props.tabindex", disabled: "@props.disabled", readonly: "@props.readonly", autocomplete: "@props.autocomplete", autofocus: "@props.autofocus", "aria-label": "@props.label", placeholder: "@props.placeholder", maxlength: "@props.maxlength", minlength: "@props.minlength", "@input": "handleInput", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange", "@keydown": "handleKeydown", "@keyup": "handleKeyup", "@compositionstart": "handleCompositionStart", "@compositionupdate": "handleCompositionUpdate", "@compositionend": "handleCompositionEnd", type: "@props.type" }, []), t.createCommand("if", "$sections.prefix || props.prefixIcon", [t.createElement("span", { class: "prefix" }, [t.createCommand("RenderSection", '"prefix"'), t.createCommand("if", "props.prefixIcon", [t.createElement("i", { class: "@props.prefixIcon" }, [])])])]), t.createCommand("if", "suffixVisable", [t.createElement("span", { class: "suffix" }, [t.createCommand("if", "!showClear || !isWordLimitVisible", [t.createCommand("RenderSection", '"suffix"'), t.createCommand("if", "props.suffixIcon", [t.createElement("i", { class: "@props.suffixIcon", "@click": "handleSuffixClick" }, [])])]), t.createCommand("if", "showClear", [t.createElement("i", { class: "clear jk-icon-circle-close", "@mousedown.stop": "__UNDEFINED_BUFFER__", "@click.stop": "clear" }, [])]), t.createCommand("elseif", "isWordLimitVisible", [t.createElement("span", { class: "count" }, [t.createElement("span", { class: "inner" }, [t.createCodeFunction("textLength"), t.createText("/"), t.createCodeFunction("props.maxlength")])])]), t.createCommand("elseif", "formItemOption && formItemOption.ctrl.validateState.value", [t.createElement("i", { class: "validate @validateIcon" }, [])])])]), t.createCommand("if", "$sections.append", [t.createElement("div", { class: "append" }, [t.createCommand("RenderSection", '"append"')])])])]; } }, Ha = { component: Ja }; var Cs, bs; let be = class extends (bs = Ha.component, Cs = window[Symbol.for("JOKER")].SCOPE_ID, bs) { constructor() { super(...arguments); n(this, Cs, "f5fdf4cd"); n(this, "template", Ka.render); } }, te; const Va = ` height:0 !important; visibility:hidden !important; overflow:hidden !important; position:absolute !important; z-index:-1000 !important; top:0 !important; right:0 !important `, ja = [ "letter-spacing", "line-height", "padding-top", "padding-bottom", "font-family", "font-weight", "font-size", "text-rendering", "text-transform", "width", "text-indent", "padding-left", "padding-right", "border-width", "box-sizing" ]; function za(t) { const r = window.getComputedStyle(t), e = r.getPropertyValue("box-sizing"), s = parseFloat(r.getPropertyValue("padding-bottom")) + parseFloat(r.getPropertyValue("padding-top")), o = parseFloat(r.getPropertyValue("border-bottom-width")) + parseFloat(r.getPropertyValue("border-top-width")); return { contextStyle: ja.map((a) => `${a}:${r.getPropertyValue(a)}`).join(";"), paddingSize: s, borderSize: o, boxSizing: e }; } function Vt(t, r = 1, e) { te || (te = document.createElement("textarea"), document.body.appendChild(te)); let { paddingSize: s, borderSize: o, boxSizing: i, contextStyle: a } = za(t); te.setAttribute("style", `${a};${Va}`), te.value = t.value || t.placeholder || ""; let l = te.scrollHeight; const d = { height: "", minHeight: "" }; i === "border-box" ? l = l + o : i === "content-box" && (l = l - s), te.value = ""; let p = te.scrollHeight - s; if (r !== void 0) { let c = p * r; i === "border-box" && (c = c + s + o), l = Math.max(c, l), d.minHeight = `${c}px`; } if (e !== void 0) { let c = p * e; i === "border-box" && (c = c + s + o), l = Math.min(c, l); } return d.height = `${l}px`, te.parentNode && te.parentNode.removeChild(te), te = void 0, d; } class Ba extends K { constructor() { super(...arguments); n(this, "model", { hovering: !1, focused: !1, textareaStyle: {}, isComposing: !1 }); n(this, "propsOption", { autocomplete: "off", maxlength: Number, minlength: Number, rows: Number }); } mounted() { this.setNativeInputValue(), this.$watch( () => this.props.value, () => { this.setNativeInputValue(); } ), this.$watch( () => this.value, () => { this.resize(); } ), this.resize(), this.props.autofocus && setTimeout(() => { var e; if (this.$root) { let s = (e = this.$getRef("input")) == null ? void 0 : e.output; s == null || s.focus(); } }); } get isWordLimitVisible() { return this.props.showWordLimit && this.props.maxlength && !this.props.disabled && !this.props.readonly; } get textLength() { return typeof this.value == "number" ? String(this.value).length : (this.value || "").length; } get inputExceed() { return this.isWordLimitVisible && this.textLength > this.props.maxlength; } get nativeInputValue() { return this.value === null || this.value === void 0 ? "" : String(this.value); } get style() { let e = []; return this.props.resize && e.push(`resize:${this.props.resize}`), this.model.textareaStyle.height && !this.props.rows && e.push(`height:${this.model.textareaStyle.height}`), this.model.textareaStyle["min-height"] && e.push(`min-height:${this.model.textareaStyle["min-height"]}`), e.join(";"); } clear() { this.$getRef("input") && (this.value = "", this.$getRef("input").output.value = ""); } focus() { var e; (e = this.$getRef("input")) == null || e.output.focus(); } blur() { var e; (e = this.$getRef("input")) == null || e.output.blur(); } select() { var e; (e = this.$getRef("input")) == null || e.output.select(); } resize() { var e, s; if (this.props.autosize) { let o = Vt( (e = this.$getRef("input")) == null ? void 0 : e.output, this.props.autosize.minRows, this.props.autosize.maxRows ); this.model.textareaStyle = { "min-height": o.minHeight, height: o.height }; } else { let o = Vt((s = this.$getRef("input")) == null ? void 0 : s.output).minHeight; this.model.textareaStyle = { height: o, "min-height": o }; } } //#region 事件 handleHover(e, s) { this.model.hovering = s; } handleFocus(e) { this.model.focused = !0, this.$trigger("focus", this.value, e); } handleBlur(e) { this.model.focused = !1, this.$trigger("blur", this.value, e), this.triggerValidate(); } handleChange(e) { this.$trigger("change", e.event.target.value); } handleInput(e) { this.model.isComposing || e.event.target.value !== this.value && (this.$trigger("input", e.event.target.value, e), this.value = e.event.target.value); } handleCompositionStart(e) { this.$trigger("compositionstart", void 0, e), this.model.isComposing = !0; } handleCompositionUpdate(e) { this.$trigger("compositionupdate", void 0, e); } handleCompositionEnd(e) { this.$trigger("compositionend", void 0, e), this.model.isComposing && (this.model.isComposing = !1, this.handleInput(e)); } handleKeyDown(e) { this.model.isComposing || this.$trigger("keydown", this.value, e); } //#endregion setNativeInputValue() { var s; let e = (s = this.$getRef("input")) == null ? void 0 : s.output; e && e.value !== this.nativeInputValue && (e.value = this.nativeInputValue); } } let Ua = { render: function(t) { return [t.createElement("div", { class: "@(['jk-textarea', props.class, { 'is-error': isError, 'is-disabled': props.disabled, 'is-exceed': inputExceed }])", "@mouseenter": "handleHover(true)", "@mouseleave": "handleHover(false)" }, [t.createElement("textarea", { ref: "input", tabindex: "@props.tabindex", disabled: "@props.disabled", readonly: "@props.readonly", autocomplete: "@props.autocomplete", autofocus: "@props.autofocus", "aria-label": "@props.label", placeholder: "@props.placeholder", maxlength: "@props.maxlength", minlength: "@props.minlength", rows: "@props.rows", style: "@style", "@input": "handleInput", "@focus": "handleFocus", "@blur": "handleBlur", "@change": "handleChange", "@keydown": "handleKeyDown", "@compositionstart": "handleCompositionStart", "@compositionupdate": "handleCompositionUpdate", "@compositionend": "handleCompositionEnd" }, [t.createText("")]), t.createCommand("if", "isWordLimitVisible", [t.createElement("span", { class: "count" }, [t.createCodeFunction("textLength"), t.createText("/"), t.createCodeFunction("this.props.maxlength")])])])]; } }, Ya = { component: Ba }; var vs, ws; let Wa = class extends (ws = Ya.component, vs = window[Symbol.for("JOKER")].SCOPE_ID, ws) { constructor() { super(...arguments); n(this, vs, "f63929ec"); n(this, "template", Ua.render); } }; const B = "JOKERUI"; class Xa extends K { constructor() { super(...arguments); n(this, "components", { JokerInput: be }); n(this, "propsOption", { step: { type: Number, default: 1 }, max: { type: Number, default: 1 / 0 }, min: { type: Number, default: -1 / 0 }, precision: Number }); n(this, "model", { userInput: null }); } mounted() { this.$watch( () => this.value, (e) => { let s = e === void 0 ? e : Number(e); if (e !== void 0) { if (isNaN(e)) return; if (this.props.stepStrictly) { let o = this.getPrecision(this.props.step), i = Math.pow(10, o); s = Math.round(s / this.props.step) * i * this.props.step / i, this.props.precision !== void 0 && (s = this.toPrecision(s, this.props.precision)); } if (s >= this.props.max && (s = this.props.max), s <= this.props.min && (s = this.props.min), this.value === s) return; this.value = Number(s), this.value = isNaN(this.value) ? void 0 : this.value, this.model.userInput = null, this.$trigger("input", s); } } ), th