vft 0.0.428 → 0.0.430

package/es/components/form/form-item.vue2.js

@@ -0,0 +1,237 @@
+import { defineComponent as Z, useSlots as ye, inject as E, ref as b, computed as a, watch as T, reactive as Se, toRefs as ke, provide as qe, onMounted as Ie, onBeforeUnmount as Ve, createElementBlock as we, openBlock as R, unref as f, normalizeClass as g, createBlock as G, createCommentVNode as _, createElementVNode as K, withCtx as B, resolveDynamicComponent as Ce, normalizeStyle as U, renderSlot as M, createTextVNode as Fe, toDisplayString as O, createVNode as Re, TransitionGroup as _e, nextTick as Be } from "vue";
+import { refDebounced as Me } from "@vueuse/core";
+import { isBoolean as We, getProp as W, isFunction as xe } from "@vft/utils";
+import { addUnit as H, castArray as J } from "../../utils/helper.js";
+import { isArray as Q, clone as X } from "lodash-es";
+import "./index.js";
+import { useId as ze } from "../../hooks/use-id/index.js";
+import { useNamespace as $e } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import Pe from "async-validator";
+import { formContextKey as Ae, formItemContextKey as Y } from "./constants.js";
+import Ne from "./form-label-wrap.js";
+import { useFormSize as Le } from "./hooks/use-form-common-props.js";
+const je = ["role", "aria-labelledby"], De = Z({
+  name: "vft-form-item"
+}), ot = /* @__PURE__ */ Z({
+  ...De,
+  props: {
+    label: {},
+    labelWidth: { default: "" },
+    labelPosition: {},
+    prop: {},
+    required: { type: Boolean, default: void 0 },
+    rules: {},
+    error: {},
+    for: {},
+    validateStatus: {},
+    inlineMessage: { type: [String, Boolean], default: "" },
+    showMessage: { type: Boolean, default: !0 },
+    size: {},
+    hideRequiredAsterisk: { type: Boolean },
+    hideLabel: { type: Boolean, default: !1 }
+  },
+  emits: ["update:error"],
+  setup(x, { expose: ee, emit: te }) {
+    const t = x, re = te, z = ye(), o = E(Ae, void 0), oe = E(Y, void 0), y = Le(void 0, { formItem: !1 }), s = $e("form-item"), S = ze().value, d = b([]), c = b(""), le = Me(c, 100), n = b(""), $ = b();
+    let P, v = !1;
+    const h = a(
+      () => t.labelPosition || o?.labelPosition
+    ), A = a(() => {
+      if (h.value === "top")
+        return {};
+      const e = H(t.labelWidth || o?.labelWidth || "");
+      return e ? { width: e } : {};
+    }), ae = a(() => {
+      if (h.value === "top" || o?.inline)
+        return {};
+      if (!t.label && !t.labelWidth && ue)
+        return {};
+      const e = H(t.labelWidth || o?.labelWidth || "");
+      return !t.label && !z.label ? { marginLeft: e } : {};
+    }), se = a(() => [
+      s.b(),
+      s.m(y.value),
+      s.is("error", c.value === "error"),
+      s.is("validating", c.value === "validating"),
+      s.is("success", c.value === "success"),
+      s.is("required", fe.value || t.required),
+      s.is(
+        "no-asterisk",
+        t?.hideRequiredAsterisk || o?.hideRequiredAsterisk
+      ),
+      o?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
+      {
+        [s.m("feedback")]: o?.statusIcon,
+        [s.m(`label-${h.value}`)]: h.value
+      }
+    ]), ie = a(
+      () => We(t.inlineMessage) ? t.inlineMessage : o?.inlineMessage || !1
+    ), ne = a(() => [
+      s.e("error"),
+      { [s.em("error", "inline")]: ie.value }
+    ]), N = a(() => t.prop ? Q(t.prop) ? t.prop.join(".") : t.prop : ""), k = a(() => !!(t.label || z.label)), q = a(() => t.for ?? (d.value.length === 1 ? d.value[0] : void 0)), I = a(() => !q.value && k.value), ue = !!oe, V = a(() => {
+      const e = o?.model;
+      if (!(!e || !t.prop))
+        return W(e, t.prop).value;
+    }), w = a(() => {
+      const { required: e } = t, r = [];
+      t.rules && r.push(
+        ...J(t.rules).map((l) => (l.trigger = l.trigger || "blur", l))
+      );
+      const i = o?.rules;
+      if (i && t.prop) {
+        const l = W(
+          i,
+          t.prop
+        ).value;
+        l && r.push(...J(l));
+      }
+      if (e !== void 0) {
+        const l = r.map((u, p) => [u, p]).filter(([u]) => Object.keys(u).includes("required"));
+        if (l.length > 0)
+          for (const [u, p] of l)
+            u.required !== e && (r[p] = { ...u, required: e });
+        else
+          r.push({ required: e });
+      }
+      return r;
+    }), de = a(() => w.value.length > 0), ce = (e) => w.value.filter((i) => !i.trigger || !e ? !0 : Q(i.trigger) ? i.trigger.includes(e) : i.trigger === e).map(({ trigger: i, ...l }) => l), fe = a(
+      () => w.value.some((e) => e.required)
+    ), me = a(
+      () => le.value === "error" && t.showMessage && (o?.showMessage ?? !0)
+    ), L = a(
+      () => `${t.label || ""}${o?.labelSuffix || ""}`
+    ), m = (e) => {
+      c.value = e;
+    }, pe = (e) => {
+      const { errors: r, fields: i } = e;
+      (!r || !i) && console.error(e), m("error"), n.value = r ? r?.[0]?.message ?? `${t.prop} is required` : "", o?.emit("validate", t.prop, !1, n.value);
+    }, ve = () => {
+      m("success"), o?.emit("validate", t.prop, !0, "");
+    }, he = async (e) => {
+      const r = N.value;
+      return new Pe({
+        [r]: e
+      }).validate({ [r]: V.value }, { firstFields: !0 }).then(() => (ve(), !0)).catch((l) => (pe(l), Promise.reject(l)));
+    }, j = async (e, r) => {
+      if (v || !t.prop)
+        return !1;
+      const i = xe(r);
+      if (!de.value)
+        return r?.(!1), !1;
+      const l = ce(e);
+      return l.length === 0 ? (r?.(!0), !0) : (m("validating"), he(l).then(() => (r?.(!0), !0)).catch((u) => {
+        const { fields: p } = u;
+        return r?.(!1, p), i ? !1 : Promise.reject(p);
+      }));
+    }, C = () => {
+      t.error && re("update:error", ""), m(""), n.value = "", v = !1;
+    }, D = async () => {
+      const e = o?.model;
+      if (!e || !t.prop) return;
+      const r = W(e, t.prop);
+      v = !0, r.value = X(P), await Be(), C(), v = !1;
+    }, be = (e) => {
+      d.value.includes(e) || d.value.push(e);
+    }, ge = (e) => {
+      d.value = d.value.filter((r) => r !== e);
+    };
+    T(
+      () => t.error,
+      (e) => {
+        n.value = e || "", m(e ? "error" : "");
+      },
+      { immediate: !0 }
+    ), T(
+      () => t.validateStatus,
+      (e) => m(e || "")
+    );
+    const F = Se({
+      ...ke(t),
+      $el: $,
+      size: y,
+      validateMessage: n,
+      validateState: c,
+      labelId: S,
+      inputIds: d,
+      isGroup: I,
+      hasLabel: k,
+      fieldValue: V,
+      addInputId: be,
+      removeInputId: ge,
+      resetField: D,
+      clearValidate: C,
+      validate: j,
+      propString: N
+    });
+    return qe(Y, F), Ie(() => {
+      t.prop && (o?.addField(F), P = X(V.value));
+    }), Ve(() => {
+      o?.removeField(F);
+    }), ee({
+      size: y,
+      validateMessage: n,
+      validateState: c,
+      validate: j,
+      clearValidate: C,
+      resetField: D
+    }), (e, r) => (R(), we("div", {
+      ref_key: "formItemRef",
+      ref: $,
+      class: g(se.value),
+      role: I.value ? "group" : void 0,
+      "aria-labelledby": I.value ? f(S) : void 0
+    }, [
+      x.hideLabel ? _("", !0) : (R(), G(f(Ne), {
+        key: 0,
+        "is-auto-width": A.value.width === "auto",
+        "update-all": f(o)?.labelWidth === "auto"
+      }, {
+        default: B(() => [
+          k.value ? (R(), G(Ce(q.value ? "label" : "div"), {
+            key: 0,
+            id: f(S),
+            for: q.value,
+            class: g(f(s).e("label")),
+            style: U(A.value)
+          }, {
+            default: B(() => [
+              M(e.$slots, "label", { label: L.value }, () => [
+                Fe(O(L.value), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["id", "for", "class", "style"])) : _("", !0)
+        ]),
+        _: 3
+      }, 8, ["is-auto-width", "update-all"])),
+      K("div", {
+        class: g(f(s).e("content")),
+        style: U(ae.value)
+      }, [
+        M(e.$slots, "default"),
+        Re(_e, {
+          name: `${f(s).namespace.value}-zoom-in-top`
+        }, {
+          default: B(() => [
+            me.value ? M(e.$slots, "error", {
+              key: 0,
+              error: n.value
+            }, () => [
+              K("div", {
+                class: g(ne.value)
+              }, O(n.value), 3)
+            ]) : _("", !0)
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 6)
+    ], 10, je));
+  }
+});
+export {
+  ot as default
+};

package/es/components/header-layout/header-layout.vue2.js

@@ -0,0 +1,69 @@
+import { defineComponent as d, createBlock as n, openBlock as e, unref as t, normalizeClass as m, withCtx as r, createVNode as f, createCommentVNode as l, createElementVNode as u, createElementBlock as c, renderSlot as i, normalizeProps as p, mergeProps as g } from "vue";
+import { VftHeader as h, VftContainer as C, VftMain as V, VftFooter as k } from "../container/index.js";
+import { VftLogo as _ } from "../logo/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as $ } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const y = { class: "content" }, b = {
+  key: 0,
+  class: "left"
+}, v = {
+  key: 1,
+  class: "right"
+}, N = d({
+  name: "vft-header-layout"
+}), D = /* @__PURE__ */ d({
+  ...N,
+  props: {
+    logoCfg: {}
+  },
+  setup(a) {
+    const s = $("header-layout");
+    return (o, B) => (e(), n(t(h), {
+      class: m(t(s).b())
+    }, {
+      default: r(() => [
+        f(t(C), null, {
+          default: r(() => [
+            f(t(V), {
+              class: m([t(s).e("top-container"), t(s).is("no-bottom", !o.$slots.bottom)])
+            }, {
+              default: r(() => [
+                u("div", y, [
+                  a.logoCfg || o.$slots.left ? (e(), c("div", b, [
+                    a.logoCfg ? (e(), n(t(_), p(g({ key: 0 }, a.logoCfg)), null, 16)) : l("", !0),
+                    i(o.$slots, "left")
+                  ])) : l("", !0),
+                  o.$slots.right ? (e(), c("div", v, [
+                    i(o.$slots, "right")
+                  ])) : l("", !0)
+                ])
+              ]),
+              _: 3
+            }, 8, ["class"]),
+            o.$slots.bottom ? (e(), n(t(k), {
+              key: 0,
+              class: m(t(s).e("footer"))
+            }, {
+              default: r(() => [
+                i(o.$slots, "bottom")
+              ]),
+              _: 3
+            }, 8, ["class"])) : l("", !0)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  D as default
+};

package/es/components/icon/icon.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent as f, computed as t, createElementBlock as c, openBlock as s, normalizeStyle as l, normalizeClass as m, unref as i } from "vue";
+import { isString as y } from "@vft/utils";
+import "../config-provider/index.js";
+import "@vueuse/core";
+import { addUnit as C } from "../../utils/helper.js";
+import { generateCssVars as g } from "../../utils/ns-cover.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as p } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { useGlobalConfig as h } from "../config-provider/hooks/use-global-config.js";
+const z = ["src"], I = f({
+  name: "vft-icon"
+}), w = /* @__PURE__ */ f({
+  ...I,
+  props: {
+    icon: {},
+    size: {},
+    color: {},
+    rotate: { type: Boolean },
+    rotateSpeed: { default: 2 },
+    pointer: { type: Boolean },
+    hoverColor: {}
+  },
+  setup(o) {
+    const n = p("icon"), e = h(), r = t(
+      () => g(
+        {
+          size: C(o.size),
+          color: o.color,
+          hoverColor: o.hoverColor,
+          cursor: o.pointer ? "pointer" : void 0,
+          animation: o.rotate ? `${e.value.namespace}-rotate ${o.rotateSpeed}s linear 0s infinite` : void 0
+        },
+        "icon"
+      )
+    ), u = (a) => a?.includes("/"), v = t(() => u(o.icon)), d = t(() => e.value?.iconifyPrefixClass && o.icon && y(o.icon) ? o.icon.startsWith(e.value?.iconifyPrefixClass) : !1).value ? "" : e.value?.iconfontClass || "";
+    return (a, x) => v.value ? (s(), c("img", {
+      key: 0,
+      class: m(i(n).e("image")),
+      src: o.icon,
+      alt: "",
+      style: l(r.value)
+    }, null, 14, z)) : (s(), c("i", {
+      key: 1,
+      class: m([i(n).b(), o.icon, i(d)]),
+      style: l(r.value)
+    }, null, 6));
+  }
+});
+export {
+  w as default
+};

package/es/components/icon-text/icon-text.vue2.js

@@ -0,0 +1,82 @@
+import { defineComponent as g, computed as o, createElementBlock as f, openBlock as l, normalizeStyle as k, normalizeClass as S, unref as r, createBlock as s, createCommentVNode as h, mergeProps as u, normalizeProps as b, toDisplayString as I } from "vue";
+import { VftClampTooltip as w } from "../clamp-tooltip/index.js";
+import { VftIcon as y } from "../icon/index.js";
+import "@vueuse/core";
+import { singleAttrToObj as H, removeUnit as L } from "@vft/utils";
+import { addUnit as C } from "../../utils/helper.js";
+import { generateCssVars as O } from "../../utils/ns-cover.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as V } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const j = { key: 2 }, N = g({
+  name: "vft-icon-text"
+}), Q = /* @__PURE__ */ g({
+  ...N,
+  props: {
+    text: {},
+    icon: {},
+    color: {},
+    hoverColor: {},
+    disableIconHover: { type: Boolean },
+    distance: { default: 3 },
+    reverse: { type: Boolean },
+    size: {},
+    direction: { default: "row" },
+    pointer: { type: Boolean },
+    adjustOrigin: { type: Boolean, default: !0 },
+    maxLines: {},
+    showTooltip: { type: Boolean },
+    clampTooltipCfg: {},
+    useClamp: { type: Boolean }
+  },
+  setup(e) {
+    const m = V("icon-text"), i = o(() => e.hoverColor ? e.hoverColor : e.color), n = o(() => H(e.icon, "icon", { size: e.size, color: e.color })), v = o(() => e.direction === "col"), d = o(() => {
+      const t = C(e.distance);
+      return v.value ? e.reverse ? { marginTop: t } : { marginBottom: t } : e.reverse ? { marginLeft: t } : { marginRight: t };
+    }), a = o(() => L(e.size)), c = o(() => a.value < 12), x = o(() => a.value && c.value ? { transform: `scale(${a.value / 12})` } : {}), z = o(() => {
+      const t = O(
+        {
+          cursor: e.pointer ? "pointer" : void 0,
+          color: e.color,
+          "hover-color": e.hoverColor ? i.value : void 0,
+          fontSize: c.value ? "12px" : C(e.size)
+        },
+        "icon-text"
+      );
+      return {
+        ...c.value && e.adjustOrigin ? { transformOrigin: "left top" } : {},
+        ...t,
+        ...x.value
+      };
+    }), B = o(() => ({
+      text: e.text,
+      maxLines: e.maxLines,
+      showTooltip: e.showTooltip,
+      ...e.clampTooltipCfg
+    }));
+    return (t, T) => (l(), f("span", {
+      class: S([
+        r(m).b(),
+        r(m).is("col", v.value),
+        { "disable-icon-hover": e.disableIconHover }
+      ]),
+      style: k(z.value)
+    }, [
+      !e.reverse && n.value?.icon ? (l(), s(r(y), u({ key: 0 }, n.value, {
+        "hover-color": e.hoverColor && !e.disableIconHover ? i.value : void 0,
+        style: d.value
+      }), null, 16, ["hover-color", "style"])) : h("", !0),
+      e.useClamp ? (l(), s(r(w), b(u({ key: 1 }, B.value)), null, 16)) : (l(), f("span", j, I(e.text), 1)),
+      e.reverse && n.value?.icon ? (l(), s(r(y), u({ key: 3 }, n.value, {
+        style: d.value,
+        "hover-color": e.hoverColor && !e.disableIconHover ? i.value : void 0
+      }), null, 16, ["style", "hover-color"])) : h("", !0)
+    ], 6));
+  }
+});
+export {
+  Q as default
+};

package/es/components/iframe-layout/iframe-layout.vue2.js

@@ -0,0 +1,30 @@
+import { defineComponent as n, createElementBlock as a, openBlock as r, Fragment as o, renderList as m, withDirectives as l, createCommentVNode as s, createBlock as p, vShow as _, unref as i } from "vue";
+import { useRouter as h } from "vue-router";
+import d from "./iframe-page.vue2.js";
+const k = n({
+  name: "vft-iframe-layout"
+}), w = /* @__PURE__ */ n({
+  ...k,
+  props: {
+    iframePages: {}
+  },
+  setup(u) {
+    const f = h();
+    function c(t) {
+      return t.fullPath === i(f.currentRoute).fullPath;
+    }
+    return (t, P) => (r(!0), a(o, null, m(u.iframePages, (e) => (r(), a(o, {
+      key: e.query ? e.fullPath : e.path
+    }, [
+      e.meta.frameSrc ? l((r(), p(d, {
+        key: 0,
+        "frame-src": e.meta.frameSrc
+      }, null, 8, ["frame-src"])), [
+        [_, c(e)]
+      ]) : s("", !0)
+    ], 64))), 128));
+  }
+});
+export {
+  w as default
+};

package/es/components/iframe-layout/iframe-page.vue2.js

@@ -0,0 +1,28 @@
+import { defineComponent as e, createElementBlock as o, openBlock as m, normalizeClass as a, unref as p } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as s } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const c = ["src"], i = e({
+  name: "vft-iframe-page"
+}), S = /* @__PURE__ */ e({
+  ...i,
+  props: {
+    frameSrc: { default: "" }
+  },
+  setup(r) {
+    const t = s("iframe-page");
+    return (n, f) => (m(), o("iframe", {
+      class: a(p(t).b()),
+      src: r.frameSrc
+    }, null, 10, c));
+  }
+});
+export {
+  S as default
+};

package/es/components/image/image.vue2.js

@@ -0,0 +1,153 @@
+import { defineComponent as T, useAttrs as W, ref as o, computed as d, watch as G, onMounted as J, createElementBlock as f, openBlock as s, normalizeStyle as Q, normalizeClass as y, unref as l, createCommentVNode as u, mergeProps as U, renderSlot as k, createElementVNode as A, Fragment as X, createBlock as Z, withCtx as _, nextTick as ee } from "vue";
+import { useAttrs as te } from "@vft/use";
+import { isInContainer as le, isElement as ne, isString as ae, getScrollContainer as ie } from "@vft/utils";
+import { VftImageViewer as re } from "../image-viewer/index.js";
+import { isClient as v, useThrottleFn as oe, useEventListener as V } from "@vueuse/core";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as se } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const ue = ["src", "loading"], ce = { key: 0 }, de = T({
+  name: "vft-image",
+  inheritAttrs: !1
+}), Ie = /* @__PURE__ */ T({
+  ...de,
+  props: {
+    hideOnClickModal: { type: Boolean, default: !1 },
+    src: { default: "" },
+    fit: { default: "" },
+    loading: {},
+    lazy: { type: Boolean },
+    scrollContainer: {},
+    previewSrcList: { default: () => [] },
+    previewTeleported: { type: Boolean, default: !1 },
+    zIndex: {},
+    initialIndex: { default: 0 },
+    infinite: { type: Boolean, default: !0 },
+    closeOnPressEscape: { type: Boolean, default: !0 }
+  },
+  emits: ["load", "error", "switch", "close", "show"],
+  setup(e, { expose: $, emit: b }) {
+    const i = se("image"), c = b;
+    let C = "";
+    const M = W(), O = te(), w = o(), r = o(!1), n = o(!0), h = o(!1), m = o(), a = o(), H = v && "loading" in HTMLImageElement.prototype;
+    let z, p;
+    const F = d(() => M.style), N = d(() => v && e.fit ? { objectFit: e.fit } : {}), g = d(() => Array.isArray(e.previewSrcList) && e.previewSrcList.length > 0), P = d(() => {
+      let t = e.initialIndex;
+      return e.initialIndex > e.previewSrcList.length - 1 && (t = 0), t;
+    }), S = d(() => e.loading === "eager" ? !1 : !H && e.loading === "lazy" || e.lazy), L = () => {
+      v && (n.value = !0, r.value = !1, w.value = e.src);
+    };
+    function D(t) {
+      n.value = !1, r.value = !1, c("load", t);
+    }
+    function Y(t) {
+      n.value = !1, r.value = !0, c("error", t);
+    }
+    function I() {
+      le(m.value, a.value) && (L(), B());
+    }
+    const x = oe(I, 200);
+    async function E() {
+      v && (await ee(), ne(e.scrollContainer) ? a.value = e.scrollContainer : ae(e.scrollContainer) && e.scrollContainer !== "" ? a.value = document.querySelector(e.scrollContainer) ?? void 0 : m.value && (a.value = ie(m.value)), a.value && (z = V(
+        a,
+        "scroll",
+        x
+      ), setTimeout(() => I(), 100)));
+    }
+    function B() {
+      !v || !a.value || !x || (z?.(), a.value = void 0);
+    }
+    function j(t) {
+      if (t.ctrlKey) {
+        if (t.deltaY < 0)
+          return t.preventDefault(), !1;
+        if (t.deltaY > 0)
+          return t.preventDefault(), !1;
+      }
+    }
+    function q() {
+      g.value && (p = V("wheel", j, {
+        passive: !1
+      }), C = document.body.style.overflow, document.body.style.overflow = "hidden", h.value = !0, c("show"));
+    }
+    function K() {
+      p?.(), document.body.style.overflow = C, h.value = !1, c("close");
+    }
+    function R(t) {
+      c("switch", t);
+    }
+    return G(
+      () => e.src,
+      () => {
+        S.value ? (n.value = !0, r.value = !1, B(), E()) : L();
+      }
+    ), J(() => {
+      S.value ? E() : L();
+    }), $({
+      isLoading: n
+    }), (t, fe) => (s(), f("div", {
+      ref_key: "container",
+      ref: m,
+      class: y([l(i).b(), t.$attrs.class]),
+      style: Q(F.value)
+    }, [
+      w.value !== void 0 && !r.value ? (s(), f("img", U({ key: 0 }, l(O), {
+        src: w.value,
+        loading: e.loading,
+        style: N.value,
+        class: [
+          l(i).e("inner"),
+          g.value && l(i).e("preview"),
+          n.value && l(i).is("loading")
+        ],
+        onClick: q,
+        onLoad: D,
+        onError: Y,
+        alt: ""
+      }), null, 16, ue)) : u("", !0),
+      n.value || r.value ? (s(), f("div", {
+        key: 1,
+        class: y(l(i).e("wrapper"))
+      }, [
+        n.value ? k(t.$slots, "placeholder", { key: 0 }, () => [
+          A("div", {
+            class: y(l(i).e("placeholder"))
+          }, null, 2)
+        ]) : r.value ? k(t.$slots, "error", { key: 1 }, () => [
+          A("div", {
+            class: y(l(i).e("error"))
+          }, "加载失败", 2)
+        ]) : u("", !0)
+      ], 2)) : u("", !0),
+      g.value ? (s(), f(X, { key: 2 }, [
+        h.value ? (s(), Z(l(re), {
+          key: 0,
+          "z-index": e.zIndex,
+          "initial-index": P.value,
+          infinite: e.infinite,
+          "zoom-rate": t.zoomRate,
+          "url-list": e.previewSrcList,
+          "hide-on-click-modal": e.hideOnClickModal,
+          teleported: e.previewTeleported,
+          "close-on-press-escape": e.closeOnPressEscape,
+          onClose: K,
+          onSwitch: R
+        }, {
+          default: _(() => [
+            t.$slots.viewer ? (s(), f("div", ce, [
+              k(t.$slots, "viewer")
+            ])) : u("", !0)
+          ]),
+          _: 3
+        }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : u("", !0)
+      ], 64)) : u("", !0)
+    ], 6));
+  }
+});
+export {
+  Ie as default
+};