@nutui/nutui 4.0.0 → 4.0.1-2.beta-1

package/dist/packages/_es/Image.js

@@ -1,11 +1,22 @@
-import { reactive, useSlots, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
-import { c as createComponent } from "./component-81a4c1d0.js";
-import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
-import { Image, ImageError } from "@nutui/icons-vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+var R = Object.defineProperty, j = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var O = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var v = (e, o, r) => o in e ? R(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, p = (e, o) => {
+  for (var r in o || (o = {}))
+    O.call(o, r) && v(e, r, o[r]);
+  if (y)
+    for (var r of y(o))
+      V.call(o, r) && v(e, r, o[r]);
+  return e;
+}, E = (e, o) => j(e, M(o));
+import { reactive as F, useSlots as k, computed as m, ref as g, onMounted as P, onBeforeUnmount as U, watch as q, toRefs as A, resolveComponent as w, openBlock as i, createElementBlock as c, normalizeClass as D, normalizeStyle as b, createElementVNode as G, createBlock as C, createCommentVNode as a, renderSlot as S } from "vue";
+import { c as H } from "./component-234624bc.js";
+import { p as f } from "./pxCheck-38173291.js";
+import { Image as J, ImageError as K } from "@nutui/icons-vue";
+import { _ as Q } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-const { componentName, create } = createComponent("image");
-const _sfc_main = create({
+const { componentName: T, create: W } = H("image"), X = W({
   props: {
     src: String,
     fit: {
@@ -30,123 +41,122 @@ const _sfc_main = create({
     },
     round: {
       type: Boolean,
-      default: false
+      default: !1
     },
     radius: [String, Number],
     showError: {
       type: Boolean,
-      default: true
+      default: !0
     },
     showLoading: {
       type: Boolean,
-      default: true
+      default: !0
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: !1
     }
   },
   components: {
-    Image,
-    ImageError
+    Image: J,
+    ImageError: K
   },
   emits: ["click", "load", "error"],
-  setup(props, { emit }) {
-    const state = reactive({
-      loading: true,
-      isError: false,
-      slotLoding: useSlots().loading,
-      slotError: useSlots().error
-    });
-    const classes = computed(() => {
-      const prefixCls = componentName;
+  setup(e, { emit: o }) {
+    const r = F({
+      loading: !0,
+      isError: !1,
+      slotLoding: k().loading,
+      slotError: k().error
+    }), h = m(() => {
+      const t = T;
       return {
-        [prefixCls]: true,
-        [`${prefixCls}-round`]: props.round
+        [t]: !0,
+        [`${t}-round`]: e.round
       };
-    });
-    const stylebox = computed(() => {
-      let style = {};
-      if (props.width)
-        style.width = pxCheck(props.width);
-      if (props.height)
-        style.height = pxCheck(props.height);
-      if (props.radius !== void 0 && props.radius !== null) {
-        style.overflow = "hidden";
-        style.borderRadius = pxCheck(props.radius);
-      }
-      return style;
-    });
-    const styles = computed(() => {
-      let styless = {
-        objectFit: props.fit,
-        objectPosition: props.position
+    }), n = g(null), d = g(!1), l = g(null), u = () => {
+      const t = {
+        threshold: [0],
+        rootMargin: "0px"
       };
-      return styless;
+      n.value = new IntersectionObserver((z) => {
+        z.forEach((N) => {
+          N.isIntersecting && (d.value = !0, n.value.disconnect());
+        });
+      }, t), l.value && n.value.observe(l.value);
+    };
+    P(() => {
+      e.lazyLoad && u();
+    }), U(() => {
+      n.value && n.value.disconnect();
     });
-    watch(
-      () => props.src,
-      (val) => {
-        state.isError = false, state.loading = true;
+    const s = m(() => {
+      let t = {};
+      return e.width && (t.width = f(e.width)), e.height && (t.height = f(e.height)), e.radius !== void 0 && e.radius !== null && (t.overflow = "hidden", t.borderRadius = f(e.radius)), t;
+    }), B = m(() => ({
+      objectFit: e.fit,
+      objectPosition: e.position
+    }));
+    q(
+      () => e.src,
+      (t) => {
+        r.isError = !1, r.loading = !0;
       }
     );
-    const load = () => {
-      state.loading = false;
-      emit("load");
-    };
-    const error = () => {
-      state.isError = true;
-      state.loading = false;
-      emit("error");
+    const I = () => {
+      r.isError = !1, r.loading = !1, o("load");
+    }, L = () => {
+      r.isError = !0, r.loading = !1, o("error");
+    }, $ = (t) => {
+      o("click", t);
     };
-    const imageClick = (event) => {
-      emit("click", event);
-    };
-    return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load };
+    return E(p({}, A(r)), { imageClick: $, classes: h, styles: B, stylebox: s, error: L, load: I, show: d, imgRef: l });
   }
-});
-const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = {
+}), Y = ["src", "date-src", "alt"], Z = {
   key: 0,
   class: "nut-img-loading"
-};
-const _hoisted_3 = {
+}, x = {
   key: 1,
   class: "nut-img-error"
 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Image = resolveComponent("Image");
-  const _component_ImageError = resolveComponent("ImageError");
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes),
-    style: normalizeStyle(_ctx.stylebox),
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
+function _(e, o, r, h, n, d) {
+  const l = w("Image"), u = w("ImageError");
+  return i(), c("div", {
+    class: D(e.classes),
+    style: b(e.stylebox),
+    onClick: o[2] || (o[2] = (...s) => e.imageClick && e.imageClick(...s))
   }, [
-    createElementVNode("img", {
+    G("img", {
+      ref: "imgRef",
       class: "nut-img",
-      src: _ctx.src,
-      alt: _ctx.alt,
-      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args)),
-      onError: _cache[1] || (_cache[1] = (...args) => _ctx.error && _ctx.error(...args)),
-      style: normalizeStyle(_ctx.styles)
-    }, null, 44, _hoisted_1),
-    _ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_2, [
-      !_ctx.slotLoding ? (openBlock(), createBlock(_component_Image, {
+      src: e.lazyLoad ? e.show ? e.src : void 0 : e.src,
+      "date-src": e.lazyLoad ? e.show ? void 0 : e.src : void 0,
+      alt: e.alt,
+      onLoad: o[0] || (o[0] = (...s) => e.load && e.load(...s)),
+      onError: o[1] || (o[1] = (...s) => e.error && e.error(...s)),
+      style: b(e.styles)
+    }, null, 44, Y),
+    e.loading ? (i(), c("div", Z, [
+      e.slotLoding ? a("", !0) : (i(), C(l, {
         key: 0,
         width: "16px",
         height: "20px",
         name: "image"
-      })) : createCommentVNode("", true),
-      renderSlot(_ctx.$slots, "loading")
-    ])) : createCommentVNode("", true),
-    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_3, [
-      !_ctx.slotError ? (openBlock(), createBlock(_component_ImageError, {
+      })),
+      S(e.$slots, "loading")
+    ])) : a("", !0),
+    e.isError && !e.loading ? (i(), c("div", x, [
+      e.slotError ? a("", !0) : (i(), C(u, {
         key: 0,
         width: "16px",
         height: "20px",
         name: "imageError"
-      })) : createCommentVNode("", true),
-      renderSlot(_ctx.$slots, "error")
-    ])) : createCommentVNode("", true)
+      })),
+      S(e.$slots, "error")
+    ])) : a("", !0)
   ], 6);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const ie = /* @__PURE__ */ Q(X, [["render", _]]);
 export {
-  index as default
+  ie as default
 };