epic-designer-gold/dist/index-DusI-AEG.js

基于vue3的设计器,可视化开发页面表单

import { c as T } from "./_commonjsHelpers-BVfed4GL.js";
import { h as Dt, b as rt, d as xe, f as oe, g as Ve, c as zt, a as Vt, r as Ht, e as It } from "./index-B2_JTx7E.js";
import { r as Bt } from "./index-kOCEDlqX.js";
import { r as z } from "./_vue_commonjs-external-NwvjgbHK.js";
import { s as ot, b as Ot } from "./index-DDGSZCWD.js";
import { s as nt, a as lt } from "./index-CaIHah0h.js";
import { f as jt } from "./fade-in-scale-up.cssr-JG1L7qTi.js";
function Et(e, o) {
  for (var r = 0; r < o.length; r++) {
    const l = o[r];
    if (typeof l != "string" && !Array.isArray(l)) {
      for (const a in l)
        if (a !== "default" && !(a in e)) {
          const t = Object.getOwnPropertyDescriptor(l, a);
          t && Object.defineProperty(e, a, t.get ? t : {
            enumerable: !0,
            get: () => l[a]
          });
        }
    }
  }
  return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
}
var at = {}, it = {}, st = {}, He = {}, ce = {};
Object.defineProperty(ce, "__esModule", { value: !0 });
ce.self = ut;
const Tt = Dt, Ft = rt, Nt = ot, qt = nt;
function ut(e) {
  const { fontSize: o, boxShadow2: r, popoverColor: l, textColor2: a, borderRadius: t, borderColor: i, heightSmall: s, heightMedium: h, heightLarge: k, fontSizeSmall: V, fontSizeMedium: $, fontSizeLarge: H, dividerColor: I } = e;
  return {
    panelFontSize: o,
    boxShadow: r,
    color: l,
    textColor: a,
    borderRadius: t,
    border: `1px solid ${i}`,
    heightSmall: s,
    heightMedium: h,
    heightLarge: k,
    fontSizeSmall: V,
    fontSizeMedium: $,
    fontSizeLarge: H,
    dividerColor: I
  };
}
const Lt = (0, Tt.createTheme)({
  name: "ColorPicker",
  common: Ft.commonLight,
  peers: {
    Input: qt.inputLight,
    Button: Nt.buttonLight
  },
  self: ut
});
ce.default = Lt;
Object.defineProperty(He, "__esModule", { value: !0 });
const Kt = rt, Gt = ot, Wt = nt, Xt = ce, Zt = {
  name: "ColorPicker",
  common: Kt.commonDark,
  peers: {
    Input: Wt.inputDark,
    Button: Gt.buttonDark
  },
  self: Xt.self
};
He.default = Zt;
(function(e) {
  var o = T && T.__importDefault || function(a) {
    return a && a.__esModule ? a : { default: a };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerLight = e.colorPickerDark = void 0;
  var r = He;
  Object.defineProperty(e, "colorPickerDark", { enumerable: !0, get: function() {
    return o(r).default;
  } });
  var l = ce;
  Object.defineProperty(e, "colorPickerLight", { enumerable: !0, get: function() {
    return o(l).default;
  } });
})(st);
var Ie = {}, x = {};
Object.defineProperty(x, "__esModule", { value: !0 });
x.deriveDefaultValue = Jt;
x.getModeFromValue = ct;
x.getWCAGContrast = Qt;
x.floor = er;
x.normalizeHue = tr;
x.normalizeAlpha = rr;
x.convertColor = nr;
const c = oe, Yt = xe;
function Jt(e, o) {
  switch (e[0]) {
    case "hex":
      return o ? "#000000FF" : "#000000";
    case "rgb":
      return o ? "rgba(0, 0, 0, 1)" : "rgb(0, 0, 0)";
    case "hsl":
      return o ? "hsla(0, 0%, 0%, 1)" : "hsl(0, 0%, 0%)";
    case "hsv":
      return o ? "hsva(0, 0%, 0%, 1)" : "hsv(0, 0%, 0%)";
  }
  return process.env.NODE_ENV !== "production" && (0, Yt.warn)("color-picker", "props.modes is invalid."), "#000000";
}
function ct(e) {
  return e === null ? null : /^ *#/.test(e) ? "hex" : e.includes("rgb") ? "rgb" : e.includes("hsl") ? "hsl" : e.includes("hsv") ? "hsv" : null;
}
function Qt(e, o = [255, 255, 255], r = "AA") {
  const [l, a, t, i] = (0, c.rgba)((0, c.toHslaString)(e));
  if (i === 1) {
    const I = pe([l, a, t]), Z = pe(o);
    return (Math.max(I, Z) + 0.05) / (Math.min(I, Z) + 0.05) >= (r === "AA" ? 4.5 : 7);
  }
  const s = Math.round(l * i + o[0] * (1 - i)), h = Math.round(a * i + o[1] * (1 - i)), k = Math.round(t * i + o[2] * (1 - i)), V = pe([s, h, k]), $ = pe(o);
  return (Math.max(V, $) + 0.05) / (Math.min(V, $) + 0.05) >= (r === "AA" ? 4.5 : 7);
}
function pe(e) {
  const [o, r, l] = e.map((a) => (a /= 255, a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4)));
  return 0.2126 * o + 0.7152 * r + 0.0722 * l;
}
function er(e) {
  return e.map((o) => Math.floor(o));
}
function tr(e) {
  return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
}
function rr(e) {
  return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
}
const or = {
  rgb: {
    hex(e) {
      return (0, c.toHexaString)((0, c.rgba)(e));
    },
    hsl(e) {
      const [o, r, l, a] = (0, c.rgba)(e);
      return (0, c.toHslaString)([...(0, c.rgb2hsl)(o, r, l), a]);
    },
    hsv(e) {
      const [o, r, l, a] = (0, c.rgba)(e);
      return (0, c.toHsvaString)([...(0, c.rgb2hsv)(o, r, l), a]);
    }
  },
  hex: {
    rgb(e) {
      return (0, c.toRgbaString)((0, c.rgba)(e));
    },
    hsl(e) {
      const [o, r, l, a] = (0, c.rgba)(e);
      return (0, c.toHslaString)([...(0, c.rgb2hsl)(o, r, l), a]);
    },
    hsv(e) {
      const [o, r, l, a] = (0, c.rgba)(e);
      return (0, c.toHsvaString)([...(0, c.rgb2hsv)(o, r, l), a]);
    }
  },
  hsl: {
    hex(e) {
      const [o, r, l, a] = (0, c.hsla)(e);
      return (0, c.toHexaString)([...(0, c.hsl2rgb)(o, r, l), a]);
    },
    rgb(e) {
      const [o, r, l, a] = (0, c.hsla)(e);
      return (0, c.toRgbaString)([...(0, c.hsl2rgb)(o, r, l), a]);
    },
    hsv(e) {
      const [o, r, l, a] = (0, c.hsla)(e);
      return (0, c.toHsvaString)([...(0, c.hsl2hsv)(o, r, l), a]);
    }
  },
  hsv: {
    hex(e) {
      const [o, r, l, a] = (0, c.hsva)(e);
      return (0, c.toHexaString)([...(0, c.hsv2rgb)(o, r, l), a]);
    },
    rgb(e) {
      const [o, r, l, a] = (0, c.hsva)(e);
      return (0, c.toRgbaString)([...(0, c.hsv2rgb)(o, r, l), a]);
    },
    hsl(e) {
      const [o, r, l, a] = (0, c.hsva)(e);
      return (0, c.toHslaString)([...(0, c.hsv2hsl)(o, r, l), a]);
    }
  }
};
function nr(e, o, r) {
  return r = r || ct(e), r ? r === o ? e : or[r][o](e) : null;
}
Object.defineProperty(Ie, "__esModule", { value: !0 });
const ge = Ve, lr = oe, R = z, ar = x, ie = "12px", ir = 12, K = "6px";
Ie.default = (0, R.defineComponent)({
  name: "AlphaSlider",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    rgba: {
      type: Array,
      default: null
    },
    alpha: {
      type: Number,
      default: 0
    },
    onUpdateAlpha: {
      type: Function,
      required: !0
    },
    onComplete: Function
  },
  setup(e) {
    const o = (0, R.ref)(null);
    function r(t) {
      !o.value || !e.rgba || ((0, ge.on)("mousemove", document, l), (0, ge.on)("mouseup", document, a), l(t));
    }
    function l(t) {
      const { value: i } = o;
      if (!i)
        return;
      const { width: s, left: h } = i.getBoundingClientRect(), k = (t.clientX - h) / (s - ir);
      e.onUpdateAlpha((0, ar.normalizeAlpha)(k));
    }
    function a() {
      var t;
      (0, ge.off)("mousemove", document, l), (0, ge.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
    }
    return {
      railRef: o,
      railBackgroundImage: (0, R.computed)(() => {
        const { rgba: t } = e;
        return t ? `linear-gradient(to right, rgba(${t[0]}, ${t[1]}, ${t[2]}, 0) 0%, rgba(${t[0]}, ${t[1]}, ${t[2]}, 1) 100%)` : "";
      }),
      handleMouseDown: r
    };
  },
  render() {
    const { clsPrefix: e } = this;
    return (0, R.h)(
      "div",
      { class: `${e}-color-picker-slider`, ref: "railRef", style: {
        height: ie,
        borderRadius: K
      }, onMousedown: this.handleMouseDown },
      (0, R.h)(
        "div",
        { style: {
          borderRadius: K,
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          overflow: "hidden"
        } },
        (0, R.h)("div", { class: `${e}-color-picker-checkboard` }),
        (0, R.h)("div", { class: `${e}-color-picker-slider__image`, style: {
          backgroundImage: this.railBackgroundImage
        } })
      ),
      this.rgba && (0, R.h)(
        "div",
        { style: {
          position: "absolute",
          left: K,
          right: K,
          top: 0,
          bottom: 0
        } },
        (0, R.h)(
          "div",
          { class: `${e}-color-picker-handle`, style: {
            left: `calc(${this.alpha * 100}% - ${K})`,
            borderRadius: K,
            width: ie,
            height: ie
          } },
          (0, R.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
            backgroundColor: (0, lr.toRgbaString)(this.rgba),
            borderRadius: K,
            width: ie,
            height: ie
          } })
        )
      )
    );
  }
});
var Be = {}, Oe = {}, ne = {};
Object.defineProperty(ne, "__esModule", { value: !0 });
ne.colorPickerInjectionKey = void 0;
const sr = xe;
ne.colorPickerInjectionKey = (0, sr.createInjectionKey)("n-color-picker");
Object.defineProperty(Oe, "__esModule", { value: !0 });
const se = z, ur = lt, cr = ne;
function dr(e) {
  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
}
function hr(e) {
  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
}
function fr(e) {
  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
}
function pr(e) {
  const o = e.trim();
  return /^#[0-9a-fA-F]+$/.test(o) ? [4, 5, 7, 9].includes(o.length) : !1;
}
function gr(e) {
  return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
}
const vr = {
  paddingSmall: "0 4px"
};
Oe.default = (0, se.defineComponent)({
  name: "ColorInputUnit",
  props: {
    label: {
      type: String,
      required: !0
    },
    value: {
      type: [Number, String],
      default: null
    },
    showAlpha: Boolean,
    onUpdateValue: {
      type: Function,
      required: !0
    }
  },
  setup(e) {
    const o = (0, se.ref)(""), { themeRef: r } = (0, se.inject)(cr.colorPickerInjectionKey, null);
    (0, se.watchEffect)(() => {
      o.value = l();
    });
    function l() {
      const { value: i } = e;
      if (i === null)
        return "";
      const { label: s } = e;
      return s === "HEX" ? i : s === "A" ? `${Math.floor(i * 100)}%` : String(Math.floor(i));
    }
    function a(i) {
      o.value = i;
    }
    function t(i) {
      let s, h;
      switch (e.label) {
        case "HEX":
          h = pr(i), h && e.onUpdateValue(i), o.value = l();
          break;
        case "H":
          s = hr(i), s === !1 ? o.value = l() : e.onUpdateValue(s);
          break;
        case "S":
        case "L":
        case "V":
          s = fr(i), s === !1 ? o.value = l() : e.onUpdateValue(s);
          break;
        case "A":
          s = gr(i), s === !1 ? o.value = l() : e.onUpdateValue(s);
          break;
        case "R":
        case "G":
        case "B":
          s = dr(i), s === !1 ? o.value = l() : e.onUpdateValue(s);
          break;
      }
    }
    return {
      mergedTheme: r,
      inputValue: o,
      handleInputChange: t,
      handleInputUpdateValue: a
    };
  },
  render() {
    const { mergedTheme: e } = this;
    return (0, se.h)(ur.NInput, {
      size: "small",
      placeholder: this.label,
      theme: e.peers.Input,
      themeOverrides: e.peerOverrides.Input,
      builtinThemeOverrides: vr,
      value: this.inputValue,
      onUpdateValue: this.handleInputUpdateValue,
      onChange: this.handleInputChange,
      // add more space for xxx% input
      style: this.label === "A" ? "flex-grow: 1.25;" : ""
    });
  }
});
var mr = T && T.__importDefault || function(e) {
  return e && e.__esModule ? e : { default: e };
};
Object.defineProperty(Be, "__esModule", { value: !0 });
const U = oe, te = z, br = lt, Qe = mr(Oe);
Be.default = (0, te.defineComponent)({
  name: "ColorInput",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    mode: {
      type: String,
      required: !0
    },
    modes: {
      type: Array,
      required: !0
    },
    showAlpha: {
      type: Boolean,
      required: !0
    },
    value: {
      // for hex to get percise value
      type: String,
      default: null
    },
    valueArr: {
      type: Array,
      default: null
    },
    onUpdateValue: {
      type: Function,
      required: !0
    },
    onUpdateMode: {
      type: Function,
      required: !0
    }
  },
  setup(e) {
    return {
      handleUnitUpdateValue(o, r) {
        const { showAlpha: l } = e;
        if (e.mode === "hex") {
          e.onUpdateValue((l ? U.toHexaString : U.toHexString)(r));
          return;
        }
        let a;
        switch (e.valueArr === null ? a = [0, 0, 0, 0] : a = Array.from(e.valueArr), e.mode) {
          case "hsv":
            a[o] = r, e.onUpdateValue((l ? U.toHsvaString : U.toHsvString)(a));
            break;
          case "rgb":
            a[o] = r, e.onUpdateValue((l ? U.toRgbaString : U.toRgbString)(a));
            break;
          case "hsl":
            a[o] = r, e.onUpdateValue((l ? U.toHslaString : U.toHslString)(a));
            break;
        }
      }
    };
  },
  render() {
    const { clsPrefix: e, modes: o } = this;
    return (0, te.h)(
      "div",
      { class: `${e}-color-picker-input` },
      (0, te.h)("div", { class: `${e}-color-picker-input__mode`, onClick: this.onUpdateMode, style: {
        cursor: o.length === 1 ? "" : "pointer"
      } }, this.mode.toUpperCase() + (this.showAlpha ? "A" : "")),
      (0, te.h)(br.NInputGroup, null, {
        default: () => {
          const { mode: r, valueArr: l, showAlpha: a } = this;
          if (r === "hex") {
            let t = null;
            try {
              t = l === null ? null : (a ? U.toHexaString : U.toHexString)(l);
            } catch {
            }
            return (0, te.h)(Qe.default, { label: "HEX", showAlpha: a, value: t, onUpdateValue: (i) => {
              this.handleUnitUpdateValue(0, i);
            } });
          }
          return (r + (a ? "a" : "")).split("").map((t, i) => (0, te.h)(Qe.default, { label: t.toUpperCase(), value: l === null ? null : l[i], onUpdateValue: (s) => {
            this.handleUnitUpdateValue(i, s);
          } }));
        }
      })
    );
  }
});
var je = {};
Object.defineProperty(je, "__esModule", { value: !0 });
const ze = oe, ue = z, _r = xe, et = x;
function kr(e, o) {
  if (o === "hsv") {
    const [r, l, a, t] = (0, ze.hsva)(e);
    return (0, ze.toRgbaString)([...(0, ze.hsv2rgb)(r, l, a), t]);
  }
  return e;
}
function xr(e) {
  const o = document.createElement("canvas").getContext("2d");
  return o ? (o.fillStyle = e, o.fillStyle) : "#000000";
}
je.default = (0, ue.defineComponent)({
  name: "ColorPickerSwatches",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    mode: {
      type: String,
      required: !0
    },
    swatches: {
      type: Array,
      required: !0
    },
    onUpdateColor: {
      type: Function,
      required: !0
    }
  },
  setup(e) {
    const o = (0, ue.computed)(() => e.swatches.map((t) => {
      const i = (0, et.getModeFromValue)(t);
      return {
        value: t,
        mode: i,
        legalValue: kr(t, i)
      };
    }));
    function r(t) {
      const { mode: i } = e;
      let { value: s, mode: h } = t;
      return h || (h = "hex", /^[a-zA-Z]+$/.test(s) ? s = xr(s) : ((0, _r.warn)("color-picker", `color ${s} in swatches is invalid.`), s = "#000000")), h === i ? s : (0, et.convertColor)(s, i, h);
    }
    function l(t) {
      e.onUpdateColor(r(t));
    }
    function a(t, i) {
      t.key === "Enter" && l(i);
    }
    return {
      parsedSwatchesRef: o,
      handleSwatchSelect: l,
      handleSwatchKeyDown: a
    };
  },
  render() {
    const { clsPrefix: e } = this;
    return (0, ue.h)("div", { class: `${e}-color-picker-swatches` }, this.parsedSwatchesRef.map((o) => (0, ue.h)(
      "div",
      { class: `${e}-color-picker-swatch`, tabindex: 0, onClick: () => {
        this.handleSwatchSelect(o);
      }, onKeydown: (r) => {
        this.handleSwatchKeyDown(r, o);
      } },
      (0, ue.h)("div", { class: `${e}-color-picker-swatch__fill`, style: { background: o.legalValue } })
    )));
  }
});
var Ee = {};
Object.defineProperty(Ee, "__esModule", { value: !0 });
const yr = oe, G = z, Sr = ne, wr = x;
Ee.default = (0, G.defineComponent)({
  name: "ColorPickerTrigger",
  slots: Object,
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    value: {
      type: String,
      default: null
    },
    hsla: {
      type: Array,
      default: null
    },
    disabled: Boolean,
    onClick: Function
  },
  setup(e) {
    const { colorPickerSlots: o, renderLabelRef: r } = (0, G.inject)(Sr.colorPickerInjectionKey, null);
    return () => {
      const { hsla: l, value: a, clsPrefix: t, onClick: i, disabled: s } = e, h = o.label || r.value;
      return (0, G.h)(
        "div",
        { class: [
          `${t}-color-picker`,
          s && `${t}-color-picker--disabled`
        ], onClick: s ? void 0 : i },
        (0, G.h)(
          "div",
          { class: `${t}-color-picker__fill` },
          (0, G.h)("div", { class: `${t}-color-picker-checkboard` }),
          (0, G.h)("div", { style: {
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            backgroundColor: l ? (0, yr.toHslaString)(l) : ""
          } }),
          a && l ? (0, G.h)("div", { class: `${t}-color-picker__value`, style: {
            color: (0, wr.getWCAGContrast)(l) ? "white" : "black"
          } }, h ? h(a) : a) : null
        )
      );
    };
  }
});
var Te = {};
Object.defineProperty(Te, "__esModule", { value: !0 });
const ve = z, tt = x;
Te.default = (0, ve.defineComponent)({
  name: "ColorPreview",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    mode: {
      type: String,
      required: !0
    },
    color: {
      type: String,
      default: null,
      validator: (e) => {
        const o = (0, tt.getModeFromValue)(e);
        return !!(!e || o && o !== "hsv");
      }
    },
    onUpdateColor: {
      type: Function,
      required: !0
    }
  },
  setup(e) {
    function o(r) {
      var l;
      const a = r.target.value;
      (l = e.onUpdateColor) === null || l === void 0 || l.call(e, (0, tt.convertColor)(a.toUpperCase(), e.mode, "hex")), r.stopPropagation();
    }
    return {
      handleChange: o
    };
  },
  render() {
    const { clsPrefix: e } = this;
    return (0, ve.h)(
      "div",
      { class: `${e}-color-picker-preview__preview` },
      (0, ve.h)("span", { class: `${e}-color-picker-preview__fill`, style: {
        background: this.color || "#000000"
      } }),
      (0, ve.h)("input", { class: `${e}-color-picker-preview__input`, type: "color", value: this.color, onChange: this.handleChange })
    );
  }
});
var Fe = {};
Object.defineProperty(Fe, "__esModule", { value: !0 });
const me = Ve, W = z, Cr = x, re = "12px", Pr = 12, X = "6px", $r = 6, Mr = "linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)";
Fe.default = (0, W.defineComponent)({
  name: "HueSlider",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    hue: {
      type: Number,
      required: !0
    },
    onUpdateHue: {
      type: Function,
      required: !0
    },
    onComplete: Function
  },
  setup(e) {
    const o = (0, W.ref)(null);
    function r(t) {
      o.value && ((0, me.on)("mousemove", document, l), (0, me.on)("mouseup", document, a), l(t));
    }
    function l(t) {
      const { value: i } = o;
      if (!i)
        return;
      const { width: s, left: h } = i.getBoundingClientRect(), k = (0, Cr.normalizeHue)((t.clientX - h - $r) / (s - Pr) * 360);
      e.onUpdateHue(k);
    }
    function a() {
      var t;
      (0, me.off)("mousemove", document, l), (0, me.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
    }
    return {
      railRef: o,
      handleMouseDown: r
    };
  },
  render() {
    const { clsPrefix: e } = this;
    return (0, W.h)(
      "div",
      { class: `${e}-color-picker-slider`, style: {
        height: re,
        borderRadius: X
      } },
      (0, W.h)(
        "div",
        { ref: "railRef", style: {
          boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, .24)",
          boxSizing: "border-box",
          backgroundImage: Mr,
          height: re,
          borderRadius: X,
          position: "relative"
        }, onMousedown: this.handleMouseDown },
        (0, W.h)(
          "div",
          { style: {
            position: "absolute",
            left: X,
            right: X,
            top: 0,
            bottom: 0
          } },
          (0, W.h)(
            "div",
            { class: `${e}-color-picker-handle`, style: {
              left: `calc((${this.hue}%) / 359 * 100 - ${X})`,
              borderRadius: X,
              width: re,
              height: re
            } },
            (0, W.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
              backgroundColor: `hsl(${this.hue}, 100%, 50%)`,
              borderRadius: X,
              width: re,
              height: re
            } })
          )
        )
      )
    );
  }
});
var Ne = {};
Object.defineProperty(Ne, "__esModule", { value: !0 });
const be = Ve, E = z, _e = "12px", ke = "6px";
Ne.default = (0, E.defineComponent)({
  name: "Pallete",
  props: {
    clsPrefix: {
      type: String,
      required: !0
    },
    rgba: {
      type: Array,
      default: null
    },
    // 0 - 360
    displayedHue: {
      type: Number,
      required: !0
    },
    displayedSv: {
      type: Array,
      required: !0
    },
    onUpdateSV: {
      type: Function,
      required: !0
    },
    onComplete: Function
  },
  setup(e) {
    const o = (0, E.ref)(null);
    function r(t) {
      o.value && ((0, be.on)("mousemove", document, l), (0, be.on)("mouseup", document, a), l(t));
    }
    function l(t) {
      const { value: i } = o;
      if (!i)
        return;
      const { width: s, height: h, left: k, bottom: V } = i.getBoundingClientRect(), $ = (V - t.clientY) / h, H = (t.clientX - k) / s, I = 100 * (H > 1 ? 1 : H < 0 ? 0 : H), Z = 100 * ($ > 1 ? 1 : $ < 0 ? 0 : $);
      e.onUpdateSV(I, Z);
    }
    function a() {
      var t;
      (0, be.off)("mousemove", document, l), (0, be.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
    }
    return {
      palleteRef: o,
      handleColor: (0, E.computed)(() => {
        const { rgba: t } = e;
        return t ? `rgb(${t[0]}, ${t[1]}, ${t[2]})` : "";
      }),
      handleMouseDown: r
    };
  },
  render() {
    const { clsPrefix: e } = this;
    return (0, E.h)(
      "div",
      { class: `${e}-color-picker-pallete`, onMousedown: this.handleMouseDown, ref: "palleteRef" },
      (0, E.h)("div", { class: `${e}-color-picker-pallete__layer`, style: {
        backgroundImage: `linear-gradient(90deg, white, hsl(${this.displayedHue}, 100%, 50%))`
      } }),
      (0, E.h)("div", { class: `${e}-color-picker-pallete__layer ${e}-color-picker-pallete__layer--shadowed`, style: {
        backgroundImage: "linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))"
      } }),
      this.rgba && (0, E.h)(
        "div",
        { class: `${e}-color-picker-handle`, style: {
          width: _e,
          height: _e,
          borderRadius: ke,
          left: `calc(${this.displayedSv[0]}% - ${ke})`,
          bottom: `calc(${this.displayedSv[1]}% - ${ke})`
        } },
        (0, E.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
          backgroundColor: this.handleColor,
          borderRadius: ke,
          width: _e,
          height: _e
        } })
      )
    );
  }
});
var qe = {};
Object.defineProperty(qe, "__esModule", {
  value: !0
});
const Rr = jt, u = zt;
qe.default = (0, u.c)([(0, u.cB)("color-picker-panel", `
 margin: 4px 0;
 width: 240px;
 font-size: var(--n-panel-font-size);
 color: var(--n-text-color);
 background-color: var(--n-color);
 transition:
 box-shadow .3s var(--n-bezier),
 color .3s var(--n-bezier),
 background-color .3s var(--n-bezier);
 border-radius: var(--n-border-radius);
 box-shadow: var(--n-box-shadow);
 `, [(0, Rr.fadeInScaleUpTransition)(), (0, u.cB)("input", `
 text-align: center;
 `)]), (0, u.cB)("color-picker-checkboard", `
 background: white; 
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 `, [(0, u.c)("&::after", `
 background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
 background-size: 12px 12px;
 background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
 background-repeat: repeat;
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 `)]), (0, u.cB)("color-picker-slider", `
 margin-bottom: 8px;
 position: relative;
 box-sizing: border-box;
 `, [(0, u.cE)("image", `
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 `), (0, u.c)("&::after", `
 content: "";
 position: absolute;
 border-radius: inherit;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
 pointer-events: none;
 `)]), (0, u.cB)("color-picker-handle", `
 z-index: 1;
 box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
 position: absolute;
 background-color: white;
 overflow: hidden;
 `, [(0, u.cE)("fill", `
 box-sizing: border-box;
 border: 2px solid white;
 `)]), (0, u.cB)("color-picker-pallete", `
 height: 180px;
 position: relative;
 margin-bottom: 8px;
 cursor: crosshair;
 `, [(0, u.cE)("layer", `
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 `, [(0, u.cM)("shadowed", `
 box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
 `)])]), (0, u.cB)("color-picker-preview", `
 display: flex;
 `, [(0, u.cE)("sliders", `
 flex: 1 0 auto;
 `), (0, u.cE)("preview", `
 position: relative;
 height: 30px;
 width: 30px;
 margin: 0 0 8px 6px;
 border-radius: 50%;
 box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
 overflow: hidden;
 `), (0, u.cE)("fill", `
 display: block;
 width: 30px;
 height: 30px;
 `), (0, u.cE)("input", `
 position: absolute;
 top: 0;
 left: 0;
 width: 30px;
 height: 30px;
 opacity: 0;
 z-index: 1;
 `)]), (0, u.cB)("color-picker-input", `
 display: flex;
 align-items: center;
 `, [(0, u.cB)("input", `
 flex-grow: 1;
 flex-basis: 0;
 `), (0, u.cE)("mode", `
 width: 72px;
 text-align: center;
 `)]), (0, u.cB)("color-picker-control", `
 padding: 12px;
 `), (0, u.cB)("color-picker-action", `
 display: flex;
 margin-top: -4px;
 border-top: 1px solid var(--n-divider-color);
 padding: 8px 12px;
 justify-content: flex-end;
 `, [(0, u.cB)("button", "margin-left: 8px;")]), (0, u.cB)("color-picker", `
 display: inline-block;
 box-sizing: border-box;
 height: var(--n-height);
 font-size: var(--n-font-size);
 width: 100%;
 position: relative;
 cursor: pointer;
 border: var(--n-border);
 border-radius: var(--n-border-radius);
 transition: border-color .3s var(--n-bezier);
 `, [(0, u.cM)("disabled", "cursor: not-allowed"), (0, u.cE)("value", `
 white-space: nowrap;
 position: relative;
 `), (0, u.cE)("fill", `
 border-radius: var(--n-border-radius);
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 left: 4px;
 right: 4px;
 top: 4px;
 bottom: 4px;
 `), (0, u.cB)("color-picker-checkboard", `
 border-radius: var(--n-border-radius);
 `, [(0, u.c)("&::after", `
 --n-block-size: calc((var(--n-height) - 8px) / 3);
 background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
 background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px; 
 `)])]), (0, u.cB)("color-picker-swatches", `
 display: grid;
 grid-gap: 8px;
 flex-wrap: wrap;
 position: relative;
 grid-template-columns: repeat(auto-fill, 18px);
 margin-top: 10px;
 `, [(0, u.cB)("color-picker-swatch", `
 width: 18px;
 height: 18px;
 background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
 background-size: 8px 8px;
 background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
 background-repeat: repeat;
 `, [(0, u.cE)("fill", `
 position: relative;
 width: 100%;
 height: 100%;
 border-radius: 3px;
 box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
 cursor: pointer;
 `), (0, u.c)("&:focus", `
 outline: none;
 `, [(0, u.cE)("fill", [(0, u.c)("&::after", `
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: inherit;
 filter: blur(2px);
 content: "";
 `)])])])])]);
(function(e) {
  var o = T && T.__importDefault || function(d) {
    return d && d.__esModule ? d : { default: d };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerProps = void 0;
  const r = oe, l = Bt, a = It, t = z, i = Ht, s = Vt, h = xe, k = Ot, V = st, $ = o(Ie), H = o(Be), I = o(je), Z = o(Ee), Le = o(Te), dt = ne, ht = o(Fe), ft = o(Ne), pt = o(qe), ye = x;
  e.colorPickerProps = Object.assign(Object.assign({}, s.useTheme.props), { value: String, show: {
    type: Boolean,
    default: void 0
  }, defaultShow: Boolean, defaultValue: String, modes: {
    type: Array,
    // no hsva by default since browser doesn't support it
    default: () => ["rgb", "hex", "hsl"]
  }, placement: {
    type: String,
    default: "bottom-start"
  }, to: h.useAdjustedTo.propTo, showAlpha: {
    type: Boolean,
    default: !0
  }, showPreview: Boolean, swatches: Array, disabled: {
    type: Boolean,
    default: void 0
  }, actions: {
    type: Array,
    default: null
  }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, onConfirm: Function, onClear: Function, "onUpdate:show": [Function, Array], onUpdateShow: [Function, Array], "onUpdate:value": [Function, Array], onUpdateValue: [Function, Array] }), e.default = (0, t.defineComponent)({
    name: "ColorPicker",
    props: e.colorPickerProps,
    slots: Object,
    setup(d, { slots: F }) {
      let N = null;
      function Ke(n) {
        N = n;
      }
      let le = null;
      const { mergedClsPrefixRef: Se, namespaceRef: gt, inlineThemeDisabled: we, mergedComponentPropsRef: Ce } = (0, s.useConfig)(d), Pe = (0, s.useFormItem)(d, {
        mergedSize: (n) => {
          var f, p;
          const { size: v } = d;
          if (v)
            return v;
          const { mergedSize: m } = n || {};
          if (m != null && m.value)
            return m.value;
          const g = (p = (f = Ce == null ? void 0 : Ce.value) === null || f === void 0 ? void 0 : f.ColorPicker) === null || p === void 0 ? void 0 : p.size;
          return g || "medium";
        }
      }), { mergedSizeRef: Ge, mergedDisabledRef: We } = Pe, { localeRef: de } = (0, s.useLocale)("global"), $e = (0, s.useTheme)("ColorPicker", "-color-picker", pt.default, V.colorPickerLight, d, Se);
      (0, t.provide)(dt.colorPickerInjectionKey, {
        themeRef: $e,
        renderLabelRef: (0, t.toRef)(d, "renderLabel"),
        colorPickerSlots: F
      });
      const Xe = (0, t.ref)(d.defaultShow), Ze = (0, a.useMergedState)((0, t.toRef)(d, "show"), Xe);
      function he(n) {
        const { onUpdateShow: f, "onUpdate:show": p } = d;
        f && (0, h.call)(f, n), p && (0, h.call)(p, n), Xe.value = n;
      }
      const { defaultValue: Ye } = d, Je = (0, t.ref)(Ye === void 0 ? (0, ye.deriveDefaultValue)(d.modes, d.showAlpha) : Ye), y = (0, a.useMergedState)((0, t.toRef)(d, "value"), Je), Y = (0, t.ref)([y.value]), A = (0, t.ref)(0), Me = (0, t.computed)(() => (0, ye.getModeFromValue)(y.value)), { modes: vt } = d, M = (0, t.ref)((0, ye.getModeFromValue)(y.value) || vt[0] || "rgb");
      function mt() {
        const { modes: n } = d, { value: f } = M, p = n.findIndex((v) => v === f);
        ~p ? M.value = n[(p + 1) % n.length] : M.value = "rgb";
      }
      let w, C, J, Q, B, O, j, P;
      const ae = (0, t.computed)(() => {
        const { value: n } = y;
        if (!n)
          return null;
        switch (Me.value) {
          case "hsv":
            return (0, r.hsva)(n);
          case "hsl":
            return [w, C, J, P] = (0, r.hsla)(n), [...(0, r.hsl2hsv)(w, C, J), P];
          case "rgb":
          case "hex":
            return [B, O, j, P] = (0, r.rgba)(n), [...(0, r.rgb2hsv)(B, O, j), P];
        }
      }), q = (0, t.computed)(() => {
        const { value: n } = y;
        if (!n)
          return null;
        switch (Me.value) {
          case "rgb":
          case "hex":
            return (0, r.rgba)(n);
          case "hsv":
            return [w, C, Q, P] = (0, r.hsva)(n), [...(0, r.hsv2rgb)(w, C, Q), P];
          case "hsl":
            return [w, C, J, P] = (0, r.hsla)(n), [...(0, r.hsl2rgb)(w, C, J), P];
        }
      }), Re = (0, t.computed)(() => {
        const { value: n } = y;
        if (!n)
          return null;
        switch (Me.value) {
          case "hsl":
            return (0, r.hsla)(n);
          case "hsv":
            return [w, C, Q, P] = (0, r.hsva)(n), [...(0, r.hsv2hsl)(w, C, Q), P];
          case "rgb":
          case "hex":
            return [B, O, j, P] = (0, r.rgba)(n), [...(0, r.rgb2hsl)(B, O, j), P];
        }
      }), bt = (0, t.computed)(() => {
        switch (M.value) {
          case "rgb":
          case "hex":
            return q.value;
          case "hsv":
            return ae.value;
          case "hsl":
            return Re.value;
        }
      }), fe = (0, t.ref)(0), Ue = (0, t.ref)(1), Ae = (0, t.ref)([0, 0]);
      function _t(n, f) {
        const { value: p } = ae, v = fe.value, m = p ? p[3] : 1;
        Ae.value = [n, f];
        const { showAlpha: g } = d;
        switch (M.value) {
          case "hsv":
            b((g ? r.toHsvaString : r.toHsvString)([v, n, f, m]), "cursor");
            break;
          case "hsl":
            b((g ? r.toHslaString : r.toHslString)([
              ...(0, r.hsv2hsl)(v, n, f),
              m
            ]), "cursor");
            break;
          case "rgb":
            b((g ? r.toRgbaString : r.toRgbString)([
              ...(0, r.hsv2rgb)(v, n, f),
              m
            ]), "cursor");
            break;
          case "hex":
            b((g ? r.toHexaString : r.toHexString)([
              ...(0, r.hsv2rgb)(v, n, f),
              m
            ]), "cursor");
            break;
        }
      }
      function kt(n) {
        fe.value = n;
        const { value: f } = ae;
        if (!f)
          return;
        const [, p, v, m] = f, { showAlpha: g } = d;
        switch (M.value) {
          case "hsv":
            b((g ? r.toHsvaString : r.toHsvString)([n, p, v, m]), "cursor");
            break;
          case "rgb":
            b((g ? r.toRgbaString : r.toRgbString)([
              ...(0, r.hsv2rgb)(n, p, v),
              m
            ]), "cursor");
            break;
          case "hex":
            b((g ? r.toHexaString : r.toHexString)([
              ...(0, r.hsv2rgb)(n, p, v),
              m
            ]), "cursor");
            break;
          case "hsl":
            b((g ? r.toHslaString : r.toHslString)([
              ...(0, r.hsv2hsl)(n, p, v),
              m
            ]), "cursor");
            break;
        }
      }
      function xt(n) {
        switch (M.value) {
          case "hsv":
            [w, C, Q] = ae.value, b((0, r.toHsvaString)([w, C, Q, n]), "cursor");
            break;
          case "rgb":
            [B, O, j] = q.value, b((0, r.toRgbaString)([B, O, j, n]), "cursor");
            break;
          case "hex":
            [B, O, j] = q.value, b((0, r.toHexaString)([B, O, j, n]), "cursor");
            break;
          case "hsl":
            [w, C, J] = Re.value, b((0, r.toHslaString)([w, C, J, n]), "cursor");
            break;
        }
        Ue.value = n;
      }
      function b(n, f) {
        f === "cursor" ? le = n : le = null;
        const { nTriggerFormChange: p, nTriggerFormInput: v } = Pe, { onUpdateValue: m, "onUpdate:value": g } = d;
        m && (0, h.call)(m, n), g && (0, h.call)(g, n), p(), v(), Je.value = n;
      }
      function yt(n) {
        b(n, "input"), (0, t.nextTick)(ee);
      }
      function ee(n = !0) {
        const { value: f } = y;
        if (f) {
          const { nTriggerFormChange: p, nTriggerFormInput: v } = Pe, { onComplete: m } = d;
          m && m(f);
          const { value: g } = Y, { value: S } = A;
          n && (g.splice(S + 1, g.length, f), A.value = S + 1), p(), v();
        }
      }
      function St() {
        const { value: n } = A;
        n - 1 < 0 || (b(Y.value[n - 1], "input"), ee(!1), A.value = n - 1);
      }
      function wt() {
        const { value: n } = A;
        n < 0 || n + 1 >= Y.value.length || (b(Y.value[n + 1], "input"), ee(!1), A.value = n + 1);
      }
      function Ct() {
        b(null, "input");
        const { onClear: n } = d;
        n && n(), he(!1);
      }
      function Pt() {
        const { value: n } = y, { onConfirm: f } = d;
        f && f(n), he(!1);
      }
      const $t = (0, t.computed)(() => A.value >= 1), Mt = (0, t.computed)(() => {
        const { value: n } = Y;
        return n.length > 1 && A.value < n.length - 1;
      });
      (0, t.watch)(Ze, (n) => {
        n || (Y.value = [y.value], A.value = 0);
      }), (0, t.watchEffect)(() => {
        if (!(le && le === y.value)) {
          const { value: n } = ae;
          n && (fe.value = n[0], Ue.value = n[3], Ae.value = [n[1], n[2]]);
        }
        le = null;
      });
      const De = (0, t.computed)(() => {
        const { value: n } = Ge, { common: { cubicBezierEaseInOut: f }, self: { textColor: p, color: v, panelFontSize: m, boxShadow: g, border: S, borderRadius: _, dividerColor: L, [(0, h.createKey)("height", n)]: Ut, [(0, h.createKey)("fontSize", n)]: At } } = $e.value;
        return {
          "--n-bezier": f,
          "--n-text-color": p,
          "--n-color": v,
          "--n-panel-font-size": m,
          "--n-font-size": At,
          "--n-box-shadow": g,
          "--n-border": S,
          "--n-border-radius": _,
          "--n-height": Ut,
          "--n-divider-color": L
        };
      }), D = we ? (0, s.useThemeClass)("color-picker", (0, t.computed)(() => Ge.value[0]), De, d) : void 0;
      function Rt() {
        var n;
        const { value: f } = q, { value: p } = fe, { internalActions: v, modes: m, actions: g } = d, { value: S } = $e, { value: _ } = Se;
        return (0, t.h)(
          "div",
          { class: [
            `${_}-color-picker-panel`,
            D == null ? void 0 : D.themeClass.value
          ], onDragstart: (L) => {
            L.preventDefault();
          }, style: we ? void 0 : De.value },
          (0, t.h)(
            "div",
            { class: `${_}-color-picker-control` },
            (0, t.h)(ft.default, { clsPrefix: _, rgba: f, displayedHue: p, displayedSv: Ae.value, onUpdateSV: _t, onComplete: ee }),
            (0, t.h)(
              "div",
              { class: `${_}-color-picker-preview` },
              (0, t.h)(
                "div",
                { class: `${_}-color-picker-preview__sliders` },
                (0, t.h)(ht.default, { clsPrefix: _, hue: p, onUpdateHue: kt, onComplete: ee }),
                d.showAlpha ? (0, t.h)($.default, { clsPrefix: _, rgba: f, alpha: Ue.value, onUpdateAlpha: xt, onComplete: ee }) : null
              ),
              d.showPreview ? (0, t.h)(Le.default, { clsPrefix: _, mode: M.value, color: q.value && (0, r.toHexString)(q.value), onUpdateColor: (L) => {
                b(L, "input");
              } }) : null
            ),
            (0, t.h)(H.default, { clsPrefix: _, showAlpha: d.showAlpha, mode: M.value, modes: m, onUpdateMode: mt, value: y.value, valueArr: bt.value, onUpdateValue: yt }),
            ((n = d.swatches) === null || n === void 0 ? void 0 : n.length) && (0, t.h)(I.default, { clsPrefix: _, mode: M.value, swatches: d.swatches, onUpdateColor: (L) => {
              b(L, "input");
            } })
          ),
          g != null && g.length ? (0, t.h)(
            "div",
            { class: `${_}-color-picker-action` },
            g.includes("confirm") && (0, t.h)(k.NButton, { size: "small", onClick: Pt, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => de.value.confirm }),
            g.includes("clear") && (0, t.h)(k.NButton, { size: "small", onClick: Ct, disabled: !y.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => de.value.clear })
          ) : null,
          F.action ? (0, t.h)("div", { class: `${_}-color-picker-action` }, { default: F.action }) : v ? (0, t.h)(
            "div",
            { class: `${_}-color-picker-action` },
            v.includes("undo") && (0, t.h)(k.NButton, { size: "small", onClick: St, disabled: !$t.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => de.value.undo }),
            v.includes("redo") && (0, t.h)(k.NButton, { size: "small", onClick: wt, disabled: !Mt.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => de.value.redo })
          ) : null
        );
      }
      return {
        mergedClsPrefix: Se,
        namespace: gt,
        hsla: Re,
        rgba: q,
        mergedShow: Ze,
        mergedDisabled: We,
        isMounted: (0, a.useIsMounted)(),
        adjustedTo: (0, h.useAdjustedTo)(d),
        mergedValue: y,
        handleTriggerClick() {
          We.value || he(!0);
        },
        setTriggerRef: Ke,
        handleClickOutside(n) {
          if (N instanceof Element) {
            if (N.contains((0, r.getPreciseEventTarget)(n)))
              return;
          } else if (N && N.$el.contains((0, r.getPreciseEventTarget)(n)))
            return;
          he(!1);
        },
        renderPanel: Rt,
        cssVars: we ? void 0 : De,
        themeClass: D == null ? void 0 : D.themeClass,
        onRender: D == null ? void 0 : D.onRender
      };
    },
    render() {
      const { mergedClsPrefix: d, onRender: F } = this;
      return F == null || F(), (0, t.h)(i.VBinder, null, {
        default: () => [
          (0, t.h)(i.VTarget, null, {
            default: () => (0, h.resolveWrappedSlotWithProps)(this.$slots.trigger, {
              value: this.mergedValue,
              onClick: this.handleTriggerClick,
              ref: this.setTriggerRef
            }, (N) => N || (0, t.h)(Z.default, { clsPrefix: d, value: this.mergedValue, hsla: this.hsla, style: this.cssVars, ref: this.setTriggerRef, disabled: this.mergedDisabled, class: this.themeClass, onClick: this.mergedDisabled ? void 0 : this.handleTriggerClick }))
          }),
          (0, t.h)(i.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === h.useAdjustedTo.tdkey, to: this.adjustedTo }, {
            default: () => (0, t.h)(t.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
              default: () => this.mergedShow ? (0, t.withDirectives)(this.renderPanel(), [
                [
                  l.clickoutside,
                  this.handleClickOutside,
                  void 0,
                  { capture: !0 }
                ]
              ]) : null
            })
          })
        ]
      });
    }
  });
})(it);
(function(e) {
  var o = T && T.__importDefault || function(l) {
    return l && l.__esModule ? l : { default: l };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.NColorPicker = e.colorPickerProps = void 0;
  var r = it;
  Object.defineProperty(e, "colorPickerProps", { enumerable: !0, get: function() {
    return r.colorPickerProps;
  } }), Object.defineProperty(e, "NColorPicker", { enumerable: !0, get: function() {
    return o(r).default;
  } });
})(at);
const Br = /* @__PURE__ */ Et({
  __proto__: null
}, [at]);
export {
  Br as i
};