@shijunhao/tyler-element/dist/es/tyler-element.js

仿elementUI的学习项目，提供一些基础组件

import { defineComponent as F, createElementBlock as y, openBlock as p, mergeProps as K, createVNode as w, unref as L, normalizeProps as Ue, guardReactiveProps as xe, ref as C, normalizeClass as E, createBlock as M, createCommentVNode as B, createElementVNode as $, renderSlot as T, mergeModels as ue, useModel as ge, provide as ye, inject as be, computed as j, createTextVNode as ee, toDisplayString as x, Transition as ke, toHandlers as ve, withCtx as R, withDirectives as ce, vShow as De, onMounted as te, onUnmounted as Pe, reactive as Q, watch as H, normalizeStyle as Me, createPropsRestProxy as He, Fragment as Y, renderList as $e, withModifiers as N, isRef as We, onBeforeUnmount as Ze, shallowReactive as qe, h as Ge, render as he, useSlots as Xe, useAttrs as Je, vModelDynamic as Qe, vModelText as Ye, useTemplateRef as je, withKeys as et, resolveDynamicComponent as tt } from "vue";
import { FontAwesomeIcon as nt } from "@fortawesome/vue-fontawesome";
import { useFloating as ot, shift as st, flip as lt, offset as at } from "@floating-ui/vue";
import it from "async-validator";
import rt from "axios";
import { library as dt } from "@fortawesome/fontawesome-svg-core";
import { fas as ut } from "@fortawesome/free-solid-svg-icons";
const V = /* @__PURE__ */ F({
  name: "VKIcon",
  inheritAttrs: !1,
  __name: "Icon",
  props: {
    type: {},
    color: {},
    border: { type: Boolean },
    fixedWidth: { type: Boolean },
    flip: {},
    icon: {},
    mask: {},
    maskId: {},
    listItem: { type: Boolean },
    pull: {},
    pulse: { type: Boolean },
    rotation: {},
    swapOpacity: { type: Boolean },
    size: {},
    spin: { type: Boolean },
    transform: {},
    symbol: { type: [Boolean, String] },
    title: {},
    titleId: {},
    inverse: { type: Boolean },
    bounce: { type: Boolean },
    shake: { type: Boolean },
    beat: { type: Boolean },
    fade: { type: Boolean },
    beatFade: { type: Boolean },
    spinPulse: { type: Boolean },
    spinReverse: { type: Boolean }
  },
  setup(e) {
    return (o, s) => (p(), y("i", K({
      class: ["vk-icon", { [`vk-icon--${o.type}`]: o.type }],
      style: o.color ? { color: o.color } : {}
    }, o.$attrs), [
      w(L(nt), Ue(xe(o.$props)), null, 16)
    ], 16));
  }
}), ct = ["disabled", "autofocus", "type"], Z = /* @__PURE__ */ F({
  name: "VKButton",
  __name: "Button",
  props: {
    type: {},
    size: {},
    plain: { type: Boolean },
    round: { type: Boolean },
    circle: { type: Boolean },
    disabled: { type: Boolean },
    nativeType: { default: "button" },
    autofocus: { type: Boolean },
    icon: {},
    loading: { type: Boolean }
  },
  setup(e, { expose: o }) {
    const s = C();
    return o({
      buttonEl: s
    }), (t, l) => (p(), y("button", {
      ref_key: "_refButton",
      ref: s,
      class: E(["vk-button", {
        [`vk-button--${t.type}`]: t.type,
        [`vk-button--${t.size}`]: t.size,
        "is-plain": t.plain,
        "is-round": t.round,
        "is-circle": t.circle,
        "is-disabled": t.disabled,
        "is-loading": t.loading
      }]),
      disabled: t.disabled || t.loading,
      autofocus: t.autofocus,
      type: t.nativeType
    }, [
      t.loading ? (p(), M(V, {
        key: 0,
        icon: "spinner",
        spin: ""
      })) : B("", !0),
      t.icon ? (p(), M(V, {
        key: 1,
        icon: t.icon
      }, null, 8, ["icon"])) : B("", !0),
      $("span", null, [
        T(t.$slots, "default")
      ])
    ], 10, ct));
  }
});
Z.install = (e) => {
  e.component(Z.name, Z);
};
const Le = Symbol("CollapseContextKey"), pt = { class: "vk-collapse" }, ne = /* @__PURE__ */ F({
  name: "VKCollapse",
  __name: "Collapse",
  props: /* @__PURE__ */ ue({
    modelValue: { default: () => [] },
    accordion: { type: Boolean, default: !1 }
  }, {
    modelValue: { default: [] },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ ue(["update:modelValue", "change"], ["update:modelValue"]),
  setup(e, { emit: o }) {
    const s = e, t = o, l = ge(e, "modelValue"), r = (d) => {
      if (s.accordion)
        l.value = [d === l.value[0] ? "" : d];
      else {
        const i = l.value.indexOf(d);
        i >= 0 ? l.value.splice(i, 1) : l.value.push(d), t("change", [...l.value]);
      }
    };
    return s.accordion && l.value.length > 1 && console.warn("accordion mode should only have one acitve item"), ye(Le, { activeNames: l, handleItemClick: r }), (d, i) => (p(), y("div", pt, [
      T(d.$slots, "default")
    ]));
  }
}), ft = ["id"], mt = { class: "vk-collapse-item__wrapper" }, vt = ["id"], ht = /* @__PURE__ */ F({
  name: "VKCollapseItem",
  __name: "CollapseItem",
  props: {
    name: {},
    title: {},
    disabled: { type: Boolean }
  },
  setup(e) {
    const o = be(Le), s = j(() => o == null ? void 0 : o.activeNames.value.includes(e.name)), t = () => {
      e.disabled || o == null || o.handleItemClick(e.name);
    }, l = {
      beforeEnter(r) {
        r.style.height = "0px", r.style.overflow = "hidden";
      },
      enter(r) {
        r.style.height = `${r.scrollHeight}px`;
      },
      afterEnter(r) {
        r.style.height = "", r.style.overflow = "";
      },
      beforeLeave(r) {
        r.style.height = `${r.scrollHeight}px`, r.style.overflow = "hidden";
      },
      leave(r) {
        r.style.height = "0px";
      },
      afterLeave(r) {
        r.style.height = "", r.style.overflow = "";
      }
    };
    return (r, d) => (p(), y("div", {
      class: E(["vk-collapse-item", { "is-disabled": r.disabled }]),
      onClick: t
    }, [
      $("div", {
        id: `item-header-${r.name}`,
        class: E(["vk-collapse-item__header", {
          "is-disabled": r.disabled,
          "is-active": s.value
        }])
      }, [
        T(r.$slots, "title", {}, () => [
          ee(x(r.title), 1)
        ], !0),
        w(V, {
          icon: "angle-right",
          class: "header-angle"
        })
      ], 10, ft),
      w(ke, K({ name: "slide" }, ve(l)), {
        default: R(() => [
          ce($("div", mt, [
            $("div", {
              id: `item-content-${r.name}`,
              class: "vk-collapse-item__content"
            }, [
              T(r.$slots, "default", {}, void 0, !0)
            ], 8, vt)
          ], 512), [
            [De, s.value]
          ])
        ]),
        _: 3
      }, 16)
    ], 2));
  }
}), gt = (e, o) => {
  const s = e.__vccOpts || e;
  for (const [t, l] of o)
    s[t] = l;
  return s;
}, oe = /* @__PURE__ */ gt(ht, [["__scopeId", "data-v-dd97679d"]]);
ne.install = (e) => {
  e.component(ne.name, ne);
};
oe.install = (e) => {
  e.component(oe.name, oe);
};
const yt = (e, o) => {
  const s = (t) => {
    if (e.value && t.target) {
      if (e.value.contains(t.target)) return;
      o(t);
    }
  };
  te(() => {
    document.addEventListener("click", s);
  }), Pe(() => {
    document.removeEventListener("click", s);
  });
}, bt = ["data-popper-placement"], U = /* @__PURE__ */ F({
  __name: "Tooltip",
  props: {
    content: {},
    trigger: {},
    placement: { default: "bottom" },
    transition: { default: "fade" },
    openDelay: {},
    closeDelay: {}
  },
  emits: ["visible-change", "click-outside"],
  setup(e, { expose: o, emit: s }) {
    const t = s, l = C(), r = C(), d = C(), i = C(!1), a = (g) => {
      i.value = g !== void 0 ? g : !i.value, t("visible-change", i.value);
    };
    let n = Q({}), u = Q({});
    H(() => e.trigger, (g) => {
      n = {}, u = {}, g === "hover" && (n.mouseenter = () => a(!0), u.mouseleave = () => a(!1)), g === "click" && (n.click = () => {
        a();
      });
    }, { immediate: !0, flush: "sync" }), yt(d, () => {
      e.trigger === "click" && i.value && a(!1), i.value && t("click-outside", !0);
    });
    const { floatingStyles: f } = ot(r, l, {
      middleware: [st(), lt(), at(9)],
      placement: e.placement
    }), c = j(() => e.placement.split("-")[0]);
    return o({
      show: () => a(!0),
      hide: () => a(!1)
    }), (g, m) => (p(), y("div", K({
      ref_key: "popperContainerNode",
      ref: d,
      class: "vk-tooltip"
    }, ve(L(u), !0)), [
      $("div", K({
        ref_key: "triggerNode",
        ref: r,
        class: "vk-tooltip__trigger"
      }, ve(L(n), !0)), [
        T(g.$slots, "default")
      ], 16),
      w(ke, { name: g.transition }, {
        default: R(() => [
          i.value ? (p(), y("div", {
            key: 0,
            ref_key: "popperNode",
            ref: l,
            class: "vk-tooltip__popper",
            style: Me(L(f)),
            "data-popper-placement": c.value
          }, [
            T(g.$slots, "content", {}, () => [
              ee(x(g.content), 1)
            ]),
            m[0] || (m[0] = $("div", { id: "arrow" }, null, -1))
          ], 12, bt)) : B("", !0)
        ]),
        _: 3
      }, 8, ["name"])
    ], 16));
  }
}), we = F({
  props: {
    node: {
      type: [String, Object],
      required: !0
    }
  },
  setup(e) {
    return () => e.node;
  }
}), kt = { class: "vk-dropdown" }, $t = { class: "vk-dropdown__menu" }, wt = {
  key: 0,
  role: "separator",
  class: "divided-placeholder"
}, It = ["id", "onClick"], se = /* @__PURE__ */ F({
  name: "VKDropdown",
  __name: "Dropdown",
  props: {
    menuOptions: {},
    hideAfterClick: { type: Boolean, default: !0 },
    content: {},
    trigger: {},
    placement: {},
    transition: {},
    openDelay: {},
    closeDelay: {}
  },
  emits: ["visible-change", "select"],
  setup(e, { expose: o, emit: s }) {
    const t = s, l = (a) => {
      t("visible-change", a);
    }, r = He(e, ["menuOptions", "hideAfterClick"]), d = C(), i = (a) => {
      var n, u;
      a.disabled || (t("select", a), e.hideAfterClick && ((u = (n = d == null ? void 0 : d.value) == null ? void 0 : n.hide) == null || u.call(n)));
    };
    return o({
      show: () => {
        var a;
        return (a = d.value) == null ? void 0 : a.show();
      },
      hide: () => {
        var a;
        return (a = d.value) == null ? void 0 : a.hide();
      }
    }), (a, n) => (p(), y("div", kt, [
      w(U, K(r, {
        ref_key: "tooltipRef",
        ref: d,
        onVisibleChange: l
      }), {
        content: R(() => [
          $("ul", $t, [
            (p(!0), y(Y, null, $e(a.menuOptions, (u) => (p(), y(Y, {
              key: u.key
            }, [
              u.divided ? (p(), y("li", wt)) : B("", !0),
              $("li", {
                id: `dropdown-item-${u.key}`,
                class: E(["vk-dropdown__item", { "is-disabled": u.disabled, "is-divided": u.divided }]),
                onClick: (f) => i(u)
              }, [
                w(L(we), {
                  node: u.label
                }, null, 8, ["node"])
              ], 10, It)
            ], 64))), 128))
          ])
        ]),
        default: R(() => [
          T(a.$slots, "default")
        ]),
        _: 3
      }, 16)
    ]));
  }
});
se.install = (e) => {
  e.component(se.name, se);
};
const Re = Symbol("formContextKey"), Ae = Symbol("formItemContextKey"), Vt = { class: "vk-form" }, le = /* @__PURE__ */ F({
  name: "VKForm",
  __name: "Form",
  props: {
    model: {},
    rules: {}
  },
  setup(e, { expose: o }) {
    const s = e, t = [], l = (n) => {
      t.push(n);
    }, r = (n) => {
      n.prop && t.splice(t.indexOf(n), 1);
    }, d = (n = []) => {
      (n.length > 0 ? t.filter((f) => n.includes(f.prop)) : t).forEach((f) => f.resetField());
    }, i = (n = []) => {
      (n.length > 0 ? t.filter((f) => n.includes(f.prop)) : t).forEach((f) => f.clearValidate());
    }, a = async () => {
      let n = {};
      for (const u of t)
        try {
          await u.validate();
        } catch (f) {
          n = {
            ...n,
            ...f.fields
          };
        }
      return Object.keys(n).length === 0 ? !0 : Promise.reject(n);
    };
    return ye(Re, {
      ...s,
      addField: l,
      removeField: r
    }), o({
      validate: a,
      resetFields: d,
      clearValidate: i
    }), (n, u) => (p(), y("form", Vt, [
      T(n.$slots, "default"),
      $("button", {
        onClick: N(a, ["prevent"])
      }, "Validate All")
    ]));
  }
});
var Bt = typeof global == "object" && global && global.Object === Object && global, Ct = typeof self == "object" && self && self.Object === Object && self, _e = Bt || Ct || Function("return this")(), pe = _e.Symbol, ze = Object.prototype, Tt = ze.hasOwnProperty, Ot = ze.toString, W = pe ? pe.toStringTag : void 0;
function Ft(e) {
  var o = Tt.call(e, W), s = e[W];
  try {
    e[W] = void 0;
    var t = !0;
  } catch {
  }
  var l = Ot.call(e);
  return t && (o ? e[W] = s : delete e[W]), l;
}
var St = Object.prototype, Et = St.toString;
function Dt(e) {
  return Et.call(e);
}
var Pt = "[object Null]", Mt = "[object Undefined]", Ce = pe ? pe.toStringTag : void 0;
function Ke(e) {
  return e == null ? e === void 0 ? Mt : Pt : Ce && Ce in Object(e) ? Ft(e) : Dt(e);
}
function jt(e) {
  return e != null && typeof e == "object";
}
var Lt = "[object Symbol]";
function Rt(e) {
  return typeof e == "symbol" || jt(e) && Ke(e) == Lt;
}
var At = /\s/;
function _t(e) {
  for (var o = e.length; o-- && At.test(e.charAt(o)); )
    ;
  return o;
}
var zt = /^\s+/;
function Kt(e) {
  return e && e.slice(0, _t(e) + 1).replace(zt, "");
}
function fe(e) {
  var o = typeof e;
  return e != null && (o == "object" || o == "function");
}
var Te = NaN, Nt = /^[-+]0x[0-9a-f]+$/i, Ut = /^0b[01]+$/i, xt = /^0o[0-7]+$/i, Ht = parseInt;
function Oe(e) {
  if (typeof e == "number")
    return e;
  if (Rt(e))
    return Te;
  if (fe(e)) {
    var o = typeof e.valueOf == "function" ? e.valueOf() : e;
    e = fe(o) ? o + "" : o;
  }
  if (typeof e != "string")
    return e === 0 ? e : +e;
  e = Kt(e);
  var s = Ut.test(e);
  return s || xt.test(e) ? Ht(e.slice(2), s ? 2 : 8) : Nt.test(e) ? Te : +e;
}
var Wt = "[object AsyncFunction]", Zt = "[object Function]", qt = "[object GeneratorFunction]", Gt = "[object Proxy]";
function Fe(e) {
  if (!fe(e))
    return !1;
  var o = Ke(e);
  return o == Zt || o == qt || o == Wt || o == Gt;
}
var me = function() {
  return _e.Date.now();
}, Xt = "Expected a function", Jt = Math.max, Qt = Math.min;
function Yt(e, o, s) {
  var t, l, r, d, i, a, n = 0, u = !1, f = !1, c = !0;
  if (typeof e != "function")
    throw new TypeError(Xt);
  o = Oe(o) || 0, fe(s) && (u = !!s.leading, f = "maxWait" in s, r = f ? Jt(Oe(s.maxWait) || 0, o) : r, c = "trailing" in s ? !!s.trailing : c);
  function g(b) {
    var h = t, k = l;
    return t = l = void 0, n = b, d = e.apply(k, h), d;
  }
  function m(b) {
    return n = b, i = setTimeout(I, o), u ? g(b) : d;
  }
  function S(b) {
    var h = b - a, k = b - n, O = o - h;
    return f ? Qt(O, r - k) : O;
  }
  function D(b) {
    var h = b - a, k = b - n;
    return a === void 0 || h >= o || h < 0 || f && k >= r;
  }
  function I() {
    var b = me();
    if (D(b))
      return z(b);
    i = setTimeout(I, S(b));
  }
  function z(b) {
    return i = void 0, c && t ? g(b) : (t = l = void 0, d);
  }
  function A() {
    i !== void 0 && clearTimeout(i), n = 0, t = a = l = i = void 0;
  }
  function v() {
    return i === void 0 ? d : z(me());
  }
  function P() {
    var b = me(), h = D(b);
    if (t = arguments, l = this, a = b, h) {
      if (i === void 0)
        return m(a);
      if (f)
        return clearTimeout(i), i = setTimeout(I, o), g(a);
    }
    return i === void 0 && (i = setTimeout(I, o)), d;
  }
  return P.cancel = A, P.flush = v, P;
}
function Se(e) {
  return e == null;
}
const en = { class: "vk-form-item__label" }, tn = { class: "vk-form-item__content" }, nn = {
  key: 0,
  class: "vk-form-item__error-msg"
}, ae = /* @__PURE__ */ F({
  name: "VKFormItem",
  __name: "FormItem",
  props: {
    label: {},
    prop: {}
  },
  setup(e, { expose: o }) {
    const s = e, t = be(Re), l = Q({
      state: "init",
      errorMsg: "",
      loading: !1
    });
    let r = null;
    const d = j(() => {
      const m = t == null ? void 0 : t.model;
      return m && s.prop && !Se(m[s.prop]) ? m[s.prop] : null;
    }), i = j(() => {
      const m = t == null ? void 0 : t.rules;
      return m && s.prop && m[s.prop] ? m[s.prop] : [];
    }), a = () => {
      l.state = "init", l.errorMsg = "", l.loading = !1;
    }, n = () => {
      a();
      const m = t == null ? void 0 : t.model;
      m && s.prop && !Se(m[s.prop]) && (m[s.prop] = r);
    }, u = (m) => {
      const S = i.value;
      return S ? S.filter((D) => !m || !D.trigger ? !0 : D.trigger && D.trigger === m) : [];
    }, f = j(() => i.value.some((m) => m.required)), c = async (m) => {
      const S = s.prop, D = u(m);
      if (!D.length) return !0;
      if (S) {
        const I = new it({
          [S]: D
        });
        return l.loading = !0, I.validate({ [S]: d.value }).then(() => {
          l.state = "success";
        }).catch((z) => {
          var v;
          const { errors: A } = z;
          return l.state = "error", l.errorMsg = ((v = A == null ? void 0 : A[0]) == null ? void 0 : v.message) || "", Promise.reject(z);
        }).finally(() => {
          l.loading = !1;
        });
      }
    }, g = {
      validate: c,
      prop: s.prop || "",
      clearValidate: a,
      resetField: n
    };
    return ye(Ae, g), te(() => {
      s.prop && (t == null || t.addField(g), r = d.value);
    }), Pe(() => {
      t == null || t.removeField(g);
    }), o({
      validateStatus: l,
      validate: c,
      resetField: n,
      clearValidate: a
    }), (m, S) => (p(), y("div", {
      class: E(["vk-form-item", {
        "is-error": l.state === "error",
        "is-success": l.state === "success",
        "is-loading": l.loading,
        "is-required": f.value
      }])
    }, [
      $("label", en, [
        T(m.$slots, "label", { label: m.label }, () => [
          ee(x(m.label), 1)
        ])
      ]),
      $("div", tn, [
        T(m.$slots, "default", { validate: c }),
        l.state === "error" ? (p(), y("div", nn, x(l.errorMsg), 1)) : B("", !0)
      ])
    ], 2));
  }
});
le.install = (e) => {
  e.component(le.name, le);
};
ae.install = (e) => {
  e.component(ae.name, ae);
};
V.install = (e) => {
  e.component(V.name, V);
};
const on = (e, o, s) => {
  We(e) ? H(e, (t, l) => {
    l == null || l.removeEventListener(o, s), t == null || t.addEventListener(o, s);
  }) : te(() => {
    e.addEventListener(o, s);
  }), Ze(() => {
    var t;
    (t = L(e)) == null || t.removeEventListener(o, s);
  });
}, sn = { class: "vk-message__content" }, ln = {
  key: 0,
  class: "vk-message__close"
}, q = /* @__PURE__ */ F({
  __name: "Message",
  props: {
    message: {},
    duration: { default: 3e3 },
    showClose: { type: Boolean, default: !1 },
    type: { default: "info" },
    destroy: { type: Function },
    zIndex: {},
    offset: { default: 20 },
    transitionName: { default: "fade-up" },
    disableEsc: { type: Boolean, default: !1 }
  },
  setup(e) {
    const o = C(!0), s = C();
    let t;
    const l = () => {
      e.duration !== 0 && (t = window.setTimeout(() => {
        o.value = !1;
      }, e.duration));
    }, r = () => {
      clearTimeout(t);
    };
    te(() => {
      o.value = !0, l();
    });
    const d = j(() => ({
      top: e.offset + "px",
      zIndex: e.zIndex
    }));
    return e.disableEsc || on(document, "keydown", (i) => {
      i.code === "Escape" && (o.value = !1);
    }), (i, a) => (p(), M(ke, {
      name: i.transitionName,
      onAfterLeave: i.destroy
    }, {
      default: R(() => [
        ce($("div", {
          ref_key: "messageRef",
          ref: s,
          class: E(["vk-message", { [`vk-message--${i.type}`]: i.type }]),
          style: Me(d.value),
          onMouseenter: r,
          onMouseleave: l
        }, [
          $("div", sn, [
            T(i.$slots, "default", {}, () => [
              w(L(we), { node: i.message }, null, 8, ["node"])
            ])
          ]),
          i.showClose ? (p(), y("div", ln, [
            w(V, {
              icon: "xmark",
              onClick: a[0] || (a[0] = N((n) => o.value = !1, ["stop"]))
            })
          ])) : B("", !0)
        ], 38), [
          [De, o.value]
        ])
      ]),
      _: 3
    }, 8, ["name", "onAfterLeave"]));
  }
}), Ee = C(0), an = (e = 2e3) => {
  const o = C(e), s = j(() => Ee.value + o.value);
  return {
    currentZIndex: s,
    nextZIndex: () => (Ee.value++, s.value),
    initialZIndex: o
  };
};
let rn = 0;
const _ = qe([]);
H(() => _.length, (e, o) => {
  e >= o || _.reduce((s, t) => (t.vnode.component.props.offset = s + t.originPropOffset, s + t.originPropOffset + t.vnode.el.getBoundingClientRect().height), 0);
});
const Nn = (e) => {
  const o = `message_${rn++}`, s = document.createElement("div"), t = () => {
    const n = _.findIndex((u) => u.id === o);
    n > -1 && (_.splice(n, 1), he(null, s));
  }, { nextZIndex: l } = an(), r = un(), d = {
    ...e,
    id: o,
    offset: (e.offset || 20) + r,
    //  加上上一个的bottomOffset
    destroy: t,
    zIndex: l()
  }, i = Ge(q, d);
  he(i, s), document.body.appendChild(s.firstElementChild);
  const a = {
    id: o,
    vnode: i,
    destroy: t,
    container: s,
    originPropOffset: e.offset || 20
  };
  return _.push(a), a;
}, dn = () => _[_.length - 1], un = () => {
  const e = dn();
  return e ? e.vnode.el.getBoundingClientRect().bottom : 0;
}, Un = () => {
  for (const e of _)
    he(null, e.container);
  _.splice(0, _.length);
};
q.install = (e) => {
  e.component(q.name, q);
};
const cn = {
  key: 0,
  class: "vk-input__prepend"
}, pn = {
  key: 0,
  class: "vk-input__prefix"
}, fn = ["disabled", "readonly", "autocomplete", "placeholder", "autofocus", "form", "type"], mn = {
  key: 1,
  class: "vk-input__suffix"
}, vn = {
  key: 1,
  class: "vk-input__append"
}, hn = ["autocomplete", "disabled", "readonly", "placeholder", "autofocus", "form"], G = /* @__PURE__ */ F({
  name: "VKInput",
  inheritAttrs: !1,
  __name: "Input",
  props: /* @__PURE__ */ ue({
    type: { default: "text" },
    modalValue: {},
    size: {},
    disabled: { type: Boolean },
    clearable: { type: Boolean },
    showPassword: { type: Boolean },
    placeholder: {},
    readonly: { type: Boolean },
    autocomplete: { default: "off" },
    autofocus: { type: Boolean },
    form: {}
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ ue(["update:modalValue", "input", "change", "focus", "blur", "clear"], ["update:modelValue"]),
  setup(e, { expose: o, emit: s }) {
    const t = Xe(), l = s, r = Je(), d = C(), i = ge(e, "modelValue"), a = be(Ae), n = (v) => {
      var P;
      (P = a == null ? void 0 : a.validate) == null || P.call(a, v).catch((b) => console.log(b.errors));
    }, u = () => {
      l("input", i.value), n("input");
    }, f = () => {
      l("change", i.value), n("change");
    }, c = C(!1), g = (v) => {
      c.value = !0, l("focus", v);
    }, m = (v) => {
      c.value = !1, n("blur"), l("blur", v);
    }, S = j(
      () => e.clearable && !e.disabled && !!i.value && c.value
    ), D = () => {
      i.value = "", l("clear"), l("input", ""), l("change", "");
    }, I = C(!1), z = () => {
      I.value = !I.value;
    }, A = j(
      () => e.showPassword && !e.disabled && !!i.value
    );
    return o({
      ref: d
    }), (v, P) => (p(), y("div", {
      class: E(["vk-input", {
        [`vk-input--${v.type}`]: v.type,
        [`vk-input--${v.size}`]: v.size,
        "is-disabled": v.disabled,
        "is-prepend": t.prefix,
        "is-append": t.append,
        "is-prefix": t.prefix,
        "is-suffix": t.suffix,
        "is-focus": c.value
      }])
    }, [
      v.type !== "textarea" ? (p(), y(Y, { key: 0 }, [
        t.prepend ? (p(), y("div", cn, [
          T(v.$slots, "prepend")
        ])) : B("", !0),
        $("div", {
          class: E(["vk-input__wrapper", {
            [`vk-input--${v.type}`]: v.type,
            [`vk-input--${v.size}`]: v.size,
            "is-disabled": v.disabled,
            "is-prepend": t.prefix,
            "is-append": t.append,
            "is-prefix": t.prefix,
            "is-suffix": t.suffix,
            "is-focus": c.value
          }])
        }, [
          t.prefix ? (p(), y("span", pn, [
            T(v.$slots, "prefix")
          ])) : B("", !0),
          ce($("input", K(L(r), {
            ref_key: "inputRef",
            ref: d,
            "onUpdate:modelValue": P[0] || (P[0] = (b) => i.value = b),
            disabled: v.disabled,
            readonly: v.readonly,
            autocomplete: v.autocomplete,
            placeholder: v.placeholder,
            autofocus: v.autofocus,
            form: v.form,
            type: v.showPassword ? I.value ? "text" : "password" : v.type,
            class: "vk-input__inner",
            onInput: u,
            onChange: f,
            onFocus: g,
            onBlur: m
          }), null, 16, fn), [
            [Qe, i.value]
          ]),
          t.suffix || S.value || A.value ? (p(), y("span", mn, [
            T(v.$slots, "suffix"),
            S.value ? (p(), M(V, {
              key: 0,
              icon: "circle-xmark",
              class: "vk-input__clear",
              onClick: D,
              onMousedown: N(() => {
              }, ["prevent"])
            })) : B("", !0),
            A.value ? (p(), M(V, {
              key: 1,
              icon: I.value ? "eye" : "eye-slash",
              class: "vk-input__password",
              onClick: z
            }, null, 8, ["icon"])) : B("", !0)
          ])) : B("", !0)
        ], 2),
        t.append ? (p(), y("div", vn, [
          T(v.$slots, "append")
        ])) : B("", !0)
      ], 64)) : ce((p(), y("textarea", K({
        key: 1,
        ref_key: "inputRef",
        ref: d,
        "onUpdate:modelValue": P[1] || (P[1] = (b) => i.value = b)
      }, L(r), {
        class: "vk-textarea__wrapper",
        autocomplete: v.autocomplete,
        disabled: v.disabled,
        readonly: v.readonly,
        placeholder: v.placeholder,
        autofocus: v.autofocus,
        form: v.form,
        onInput: u,
        onChange: f,
        onFocus: g,
        onBlur: m
      }), null, 16, hn)), [
        [Ye, i.value]
      ])
    ], 2));
  }
});
G.install = (e) => {
  e.component(G.name, G);
};
const gn = {
  key: 0,
  class: "vk-select__loading"
}, yn = {
  key: 1,
  class: "vk-select__noData"
}, bn = {
  key: 2,
  class: "vk-select__menu"
}, kn = ["id", "onClick"], $n = { key: 0 }, ie = /* @__PURE__ */ F({
  name: "VKSelect",
  __name: "Select",
  props: {
    modelValue: {},
    options: { default: () => [] },
    placeholder: {},
    disabled: { type: Boolean },
    clearable: { type: Boolean },
    renderLabel: {},
    filterable: { type: Boolean },
    filterMethod: {},
    remote: { type: Boolean },
    remoteMethod: {}
  },
  emits: ["change", "update:modelValue", "visible-change", "clear"],
  setup(e, { emit: o }) {
    const s = (h) => t.options.find((O) => O.value === h) || null, t = e, l = o, r = j(() => t.remote ? 300 : 0), d = s(t.modelValue), i = C(), a = C(), n = Q({
      inputValue: (d == null ? void 0 : d.label) || "",
      selectedOption: d,
      mouseHover: !1,
      loading: !1,
      highlightIndex: -1
    }), u = C(!1), f = {
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, 9]
          }
        },
        {
          name: "sameWidth",
          enabled: !0,
          fn: ({ state: h }) => {
            h.styles.popper.width = `${h.rects.reference.width}px`;
          },
          phase: "beforeWrite",
          requires: ["computeStyles"]
        }
      ]
    }, c = C(t.options);
    H(
      () => t.options,
      (h) => {
        c.value = h;
      }
    ), H(
      () => t.modelValue,
      (h) => {
        const k = s(h);
        n.inputValue = (k == null ? void 0 : k.label) || "", n.selectedOption = k;
      }
    );
    const g = async (h) => {
      if (t.filterable) {
        if (t.filterMethod && Fe(t.filterMethod))
          c.value = t.filterMethod(h);
        else if (t.remote && t.remoteMethod && Fe(t.remoteMethod)) {
          n.loading = !0;
          try {
            c.value = await t.remoteMethod(h);
          } catch (k) {
            console.error(k), c.value = [];
          } finally {
            n.loading = !1;
          }
        } else
          c.value = t.options.filter((k) => k.label.includes(h));
        n.highlightIndex = -1;
      }
    }, S = Yt(() => {
      g(n.inputValue);
    }, r.value), D = j(() => t.filterable && n.selectedOption && u.value ? n.selectedOption.label : t.placeholder), I = (h) => {
      h ? (t.filterable && n.selectedOption && (n.inputValue = ""), t.filterable && g(n.inputValue), i.value.show()) : (i.value.hide(), t.filterable && (n.inputValue = n.selectedOption ? n.selectedOption.label : "")), u.value = h, l("visible-change", h);
    }, z = (h) => {
      switch (h.code) {
        case "Enter":
          u.value ? n.highlightIndex > -1 && c.value[n.highlightIndex] ? b(c.value[n.highlightIndex]) : I(!1) : I(!0);
          break;
        case "Escape":
          u.value && I(!1);
          break;
        case "ArrowUp":
          h.preventDefault(), c.value.length > 0 && ([-1, 0].includes(n.highlightIndex) ? n.highlightIndex = c.value.length - 1 : n.highlightIndex -= 1);
          break;
        case "ArrowDown":
          h.preventDefault(), c.value.length > 0 && ([-1, c.value.length - 1].includes(n.highlightIndex) ? n.highlightIndex = 0 : n.highlightIndex += 1);
          break;
      }
    }, A = j(() => t.clearable && n.mouseHover && n.selectedOption && n.inputValue.trim() !== ""), v = () => {
      n.selectedOption = null, n.inputValue = "", l("change", ""), l("clear"), l("update:modelValue", "");
    }, P = () => {
      t.disabled || (u.value ? I(!1) : I(!0));
    }, b = (h) => {
      h.disabled || (n.inputValue = h.label, n.selectedOption = h, l("change", h.value), l("update:modelValue", h.value), I(!1), a.value.ref.focus());
    };
    return (h, k) => (p(), y("div", {
      class: E(["vk-select", { "is-disabled": h.disabled }]),
      onClick: P,
      onMouseenter: k[3] || (k[3] = (O) => n.mouseHover = !0),
      onMouseleave: k[4] || (k[4] = (O) => n.mouseHover = !1)
    }, [
      w(U, {
        ref_key: "tooltipRef",
        ref: i,
        placement: "bottom-start",
        "popper-options": f,
        manual: "",
        onClickOutside: k[2] || (k[2] = () => I(!1))
      }, {
        content: R(() => [
          n.loading ? (p(), y("div", gn, [
            w(V, {
              icon: "spinner",
              spin: ""
            })
          ])) : h.filterable && c.value.length === 0 ? (p(), y("div", yn, " no matching data ")) : (p(), y("ul", bn, [
            (p(!0), y(Y, null, $e(c.value, (O, Ie) => {
              var Ve, Be;
              return p(), y("li", {
                key: Ie,
                id: `select-item-${O.value}`,
                class: E(["vk-select__menu-item", {
                  "is-disabled": O.disabled,
                  "is-selected": ((Ve = n.selectedOption) == null ? void 0 : Ve.value) === O.value,
                  "is-highlighted": n.highlightIndex === Ie
                }]),
                onClick: N((Mn) => b(O), ["stop"])
              }, [
                w(L(we), {
                  node: h.renderLabel ? h.renderLabel(O) : O.label
                }, null, 8, ["node"]),
                ((Be = n.selectedOption) == null ? void 0 : Be.value) === O.value ? (p(), y("span", $n, " Selected! ")) : B("", !0)
              ], 10, kn);
            }), 128))
          ]))
        ]),
        default: R(() => [
          w(G, {
            ref_key: "inputRef",
            ref: a,
            modelValue: n.inputValue,
            "onUpdate:modelValue": k[1] || (k[1] = (O) => n.inputValue = O),
            disabled: h.disabled,
            placeholder: D.value,
            readonly: !h.filterable || !u.value,
            onInput: L(S),
            onKeydown: z
          }, {
            suffix: R(() => [
              A.value ? (p(), M(V, {
                key: 0,
                icon: "circle-xmark",
                class: "vk-input__clear",
                onMousedown: k[0] || (k[0] = N(() => {
                }, ["prevent"])),
                onClick: N(v, ["stop"])
              })) : (p(), M(V, {
                key: 1,
                icon: "angle-down",
                class: E(["header-angle", { "is-active": u.value }])
              }, null, 8, ["class"]))
            ]),
            _: 1
          }, 8, ["modelValue", "disabled", "placeholder", "readonly", "onInput"])
        ]),
        _: 1
      }, 512)
    ], 34));
  }
});
ie.install = (e) => {
  e.component(ie.name, ie);
};
const wn = ["name", "disabled"], In = { class: "vk-switch__core" }, Vn = { class: "vk-switch__core-inner" }, Bn = {
  key: 0,
  class: "vk-switch__core-inner-text"
}, re = /* @__PURE__ */ F({
  name: "VkSwtich",
  inheritAttrs: !1,
  __name: "Switch",
  props: {
    modelValue: { type: [Boolean, String, Number] },
    disabled: { type: Boolean },
    activeText: {},
    inactiveText: {},
    activeValue: { type: [Boolean, String, Number], default: !0 },
    inactiveValue: { type: [Boolean, String, Number], default: !1 },
    name: {},
    id: {},
    size: {}
  },
  emits: ["update:modelValue", "change"],
  setup(e, { emit: o }) {
    const s = e, t = o, l = ge(s, "modelValue"), r = je("inputEl"), d = j(() => l.value === s.activeValue), i = () => {
      if (s.disabled) return;
      const a = d.value ? s.inactiveValue : s.activeValue;
      l.value = a, t("change", a);
    };
    return te(() => {
      r.value.checked = d.value;
    }), H(d, (a) => {
      r.value.checked = a;
    }), (a, n) => (p(), y("div", {
      class: E(["vk-switch", {
        [`vk-switch--${a.size}`]: a.size,
        "is-disabled": a.disabled,
        "is-checked": d.value
      }]),
      onClick: i
    }, [
      $("input", {
        ref_key: "inputEl",
        ref: r,
        class: "vk-switch__input",
        type: "checkbox",
        role: "switch",
        name: a.name,
        disabled: a.disabled,
        onKeydown: et(i, ["enter"])
      }, null, 40, wn),
      $("div", In, [
        $("div", Vn, [
          a.activeText || a.inactiveText ? (p(), y("span", Bn, x(d.value ? a.activeText : a.inactiveText), 1)) : B("", !0)
        ]),
        n[0] || (n[0] = $("div", { class: "vk-switch__core-action" }, null, -1))
      ])
    ], 2));
  }
});
re.install = (e) => {
  e.component(re.name, re);
};
U.install = (e) => {
  e.component(U.name, U);
};
const Ne = (e) => {
  const {
    percent: o,
    strokeHeight: s = 15,
    showText: t = !0,
    type: l = "primary"
  } = e;
  return w("div", {
    class: "vk-progress-bar"
  }, [w("div", {
    class: "vk-progress-bar-outer",
    style: {
      height: `${s}px`
    }
  }, [w("div", {
    class: `vk-progress-bar-inner vk-color-${l}`,
    style: {
      width: `${o}%`
    }
  }, [t && w("span", {
    class: "vk-inner-text"
  }, [`${o}%`])])])]);
}, Cn = { class: "vk-upload-list" }, Tn = { class: "vk-file-status" }, On = { class: "vk-file-action" }, X = /* @__PURE__ */ F({
  __name: "UploadList",
  props: {
    fileList: {},
    onRemove: { type: Function }
  },
  setup(e) {
    return (o, s) => (p(), y("ul", Cn, [
      (p(!0), y(Y, null, $e(o.fileList, (t) => (p(), y("li", {
        key: t.uid,
        class: "vk-upload-list__item"
      }, [
        $("span", {
          class: E(["vk-file-name", `file-name-${t.status}`])
        }, [
          w(V, { icon: "file" }),
          ee(" " + x(t.name), 1)
        ], 2),
        $("span", Tn, [
          t.status === "uploading" ? (p(), M(V, {
            key: 0,
            icon: "spinner",
            spin: "",
            type: "primary"
          })) : B("", !0),
          t.status === "success" ? (p(), M(V, {
            key: 1,
            icon: "circle-check",
            type: "success"
          })) : B("", !0),
          t.status === "error" ? (p(), M(V, {
            key: 2,
            icon: "circle-xmark",
            type: "danger"
          })) : B("", !0)
        ]),
        $("span", On, [
          w(V, {
            icon: "trash-can",
            type: "primary",
            onClick: (l) => o.onRemove(t)
          }, null, 8, ["onClick"])
        ]),
        t.status === "uploading" ? (p(), M(L(Ne), {
          key: 0,
          percent: t.percent || 0
        }, null, 8, ["percent"])) : B("", !0)
      ]))), 128))
    ]));
  }
}), J = /* @__PURE__ */ F({
  __name: "DropZone",
  props: {
    is: {}
  },
  emits: ["fileDrop"],
  setup(e, { emit: o }) {
    const s = o, t = C(!1), l = (d, i) => {
      d.preventDefault(), t.value = i;
    }, r = (d) => {
      d.preventDefault(), t.value = !1, d.dataTransfer && s("fileDrop", d.dataTransfer.files);
    };
    return (d, i) => (p(), M(tt(d.is), {
      class: E(["vk-dropzone", { "is-dragover": t.value }]),
      onDragover: i[0] || (i[0] = (a) => l(a, !0)),
      onDragleave: i[1] || (i[1] = (a) => l(a, !1)),
      onDrop: r
    }, {
      default: R(() => [
        T(d.$slots, "default")
      ]),
      _: 3
    }, 40, ["class"]));
  }
}), Fn = { class: "vk-upload" }, Sn = ["multiple", "accept"], de = /* @__PURE__ */ F({
  name: "VKUpload",
  __name: "Upload",
  props: {
    action: {},
    multiple: { type: Boolean },
    defaultFileList: { default: () => [] },
    beforeUpload: { type: Function },
    onProgress: { type: Function },
    onSuccess: { type: Function },
    onError: { type: Function },
    onChange: { type: Function },
    onRemove: { type: Function },
    headers: {},
    name: { default: "file" },
    data: {},
    withCredentials: { type: Boolean },
    accept: {},
    drag: { type: Boolean }
  },
  setup(e) {
    const o = je("input"), s = () => {
      o.value && o.value.click();
    }, t = Q(e.defaultFileList), l = (n, u) => {
      const f = t.findIndex((c) => c.uid === n.uid);
      t.splice(f, 1, { ...t[f], ...u });
    }, r = (n) => {
      var f;
      const u = t.findIndex((c) => c.uid === n.uid);
      t.splice(u, 1), (f = e.onRemove) == null || f.call(e, n);
    }, d = (n) => {
      const f = n.target.files;
      !f || !f.length || (i(f), o.value && (o.value.value = ""));
    }, i = (n) => {
      const u = Array.from(n);
      for (const f of u)
        if (typeof e.beforeUpload == "function") {
          const c = e.beforeUpload(f);
          c instanceof Promise ? c.then((g) => {
            a(g);
          }) : c && a(f);
        } else
          a(f);
    }, a = (n) => {
      const u = {
        uid: Date.now() + n.name || "vk-upload-file",
        status: "ready",
        name: n.name,
        size: n.size,
        raw: n
      };
      t.unshift(u);
      const f = new FormData();
      f.append(e.name, n), e.data && Object.keys(e.data).forEach((c) => {
        f.append(c, e.data[c]);
      }), rt.post(e.action, f, {
        headers: { ...e.headers, "Content-Type": "multipart/form-data" },
        withCredentials: e.withCredentials,
        onUploadProgress: (c) => {
          var g;
          if (c.total) {
            const m = Math.round(c.loaded / c.total * 100);
            m < 100 && (l(u, { percent: m, status: "uploading" }), (g = e.onProgress) == null || g.call(e, m, n));
          }
        }
      }).then((c) => {
        var g, m;
        l(u, { status: "success", response: c.data, percent: 100 }), (g = e.onSuccess) == null || g.call(e, c.data, n), (m = e.onChange) == null || m.call(e, n);
      }).catch((c) => {
        var g, m;
        l(u, { status: "error", error: c }), (g = e.onError) == null || g.call(e, c, n), (m = e.onChange) == null || m.call(e, n);
      });
    };
    return (n, u) => (p(), y("div", Fn, [
      n.drag ? (p(), M(J, {
        key: 0,
        is: "p",
        onFileDrop: i,
        onClick: s
      }, {
        default: R(() => [
          T(n.$slots, "default", {}, () => [
            w(V, {
              icon: "upload",
              type: "primary",
              size: "3x"
            }),
            u[0] || (u[0] = $("br", null, null, -1)),
            u[1] || (u[1] = $("p", null, "Drag file over to upload", -1))
          ])
        ]),
        _: 3
      })) : T(n.$slots, "default", {
        key: 1,
        handle: s
      }, () => [
        w(Z, {
          type: "primary",
          onClick: s
        }, {
          default: R(() => u[2] || (u[2] = [
            ee("Upload File")
          ])),
          _: 1
        })
      ]),
      $("input", {
        ref: "input",
        type: "file",
        multiple: n.multiple,
        accept: n.accept,
        class: "vk-file-input",
        style: { display: "none" },
        onChange: d
      }, null, 40, Sn),
      w(X, {
        "file-list": t,
        "on-remove": r
      }, null, 8, ["file-list"])
    ]));
  }
});
de.install = (e) => {
  e.component(de.name, de);
};
X.install = (e) => {
  e.component(X.name, X);
};
J.install = (e) => {
  e.component(J.name, J);
};
const En = {
  install(e) {
    e.component("VKProgress", Ne);
  },
  name: "VKProgress"
};
dt.add(ut);
const Dn = [
  Z,
  ne,
  oe,
  se,
  le,
  ae,
  V,
  q,
  G,
  ie,
  re,
  U,
  de,
  X,
  J,
  En
], Pn = (e) => {
  Dn.forEach((o) => {
    e.component(o.name, o);
  });
}, xn = {
  install: Pn
};
export {
  Z as Button,
  ne as Collapse,
  Le as CollapseContextKey,
  oe as CollapseItem,
  J as DropZone,
  se as Dropdown,
  le as Form,
  ae as FormItem,
  V as Icon,
  G as Input,
  q as Message,
  Ne as Progress,
  ie as Select,
  re as Switch,
  U as Tooltip,
  de as Upload,
  X as UploadList,
  Nn as createMessage,
  xn as default,
  Un as destroyAll,
  Re as formContextKey,
  Ae as formItemContextKey,
  Pn as install
};
//# sourceMappingURL=tyler-element.js.map