@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Image.js

@@ -1,22 +1,30 @@
-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";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { reactive, useSlots, computed, ref, onMounted, onBeforeUnmount, 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";
 import "../locale/lang";
-const { componentName: T, create: W } = H("image"), X = W({
+const { componentName, create } = createComponent("image");
+const _sfc_main = create({
   props: {
     src: String,
     fit: {
@@ -41,122 +49,154 @@ const { componentName: T, create: W } = H("image"), X = W({
     },
     round: {
       type: Boolean,
-      default: !1
+      default: false
     },
     radius: [String, Number],
     showError: {
       type: Boolean,
-      default: !0
+      default: true
     },
     showLoading: {
       type: Boolean,
-      default: !0
+      default: true
     },
     lazyLoad: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   components: {
-    Image: J,
-    ImageError: K
+    Image,
+    ImageError
   },
   emits: ["click", "load", "error"],
-  setup(e, { emit: o }) {
-    const r = F({
-      loading: !0,
-      isError: !1,
-      slotLoding: k().loading,
-      slotError: k().error
-    }), h = m(() => {
-      const t = T;
+  setup(props, { emit }) {
+    const state = reactive({
+      loading: true,
+      isError: false,
+      slotLoding: useSlots().loading,
+      slotError: useSlots().error
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
       return {
-        [t]: !0,
-        [`${t}-round`]: e.round
+        [prefixCls]: true,
+        [`${prefixCls}-round`]: props.round
       };
-    }), n = g(null), d = g(!1), l = g(null), u = () => {
-      const t = {
+    });
+    const observer = ref(null);
+    const show = ref(false);
+    const imgRef = ref(null);
+    const initObserver = () => {
+      const options = {
         threshold: [0],
         rootMargin: "0px"
       };
-      n.value = new IntersectionObserver((z) => {
-        z.forEach((N) => {
-          N.isIntersecting && (d.value = !0, n.value.disconnect());
+      observer.value = new IntersectionObserver((entires) => {
+        entires.forEach((item) => {
+          if (item.isIntersecting) {
+            show.value = true;
+            observer.value.disconnect();
+          }
         });
-      }, t), l.value && n.value.observe(l.value);
+      }, options);
+      imgRef.value && observer.value.observe(imgRef.value);
     };
-    P(() => {
-      e.lazyLoad && u();
-    }), U(() => {
-      n.value && n.value.disconnect();
+    onMounted(() => {
+      props.lazyLoad && initObserver();
+    });
+    onBeforeUnmount(() => {
+      observer.value && observer.value.disconnect();
+    });
+    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
+      };
+      return styless;
     });
-    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;
+    watch(
+      () => props.src,
+      (val) => {
+        state.isError = false, state.loading = true;
       }
     );
-    const I = () => {
-      r.isError = !1, r.loading = !1, o("load");
-    }, L = () => {
-      r.isError = !0, r.loading = !1, o("error");
-    }, $ = (t) => {
-      o("click", t);
+    const load = () => {
+      state.isError = false;
+      state.loading = false;
+      emit("load");
     };
-    return E(p({}, A(r)), { imageClick: $, classes: h, styles: B, stylebox: s, error: L, load: I, show: d, imgRef: l });
+    const error = () => {
+      state.isError = true;
+      state.loading = false;
+      emit("error");
+    };
+    const imageClick = (event) => {
+      emit("click", event);
+    };
+    return __spreadProps(__spreadValues({}, toRefs(state)), { imageClick, classes, styles, stylebox, error, load, show, imgRef });
   }
-}), Y = ["src", "date-src", "alt"], Z = {
+});
+const _hoisted_1 = ["src", "date-src", "alt"];
+const _hoisted_2 = {
   key: 0,
   class: "nut-img-loading"
-}, x = {
+};
+const _hoisted_3 = {
   key: 1,
   class: "nut-img-error"
 };
-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))
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Image = resolveComponent("Image");
+  const _component_ImageError = resolveComponent("ImageError");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.stylebox),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
   }, [
-    G("img", {
+    createElementVNode("img", {
       ref: "imgRef",
       class: "nut-img",
-      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, {
+      src: _ctx.lazyLoad ? _ctx.show ? _ctx.src : void 0 : _ctx.src,
+      "date-src": _ctx.lazyLoad ? _ctx.show ? void 0 : _ctx.src : void 0,
+      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("div", _hoisted_2, [
+      !_ctx.slotLoding ? (openBlock(), createBlock(_component_Image, {
         key: 0,
         width: "16px",
         height: "20px",
         name: "image"
-      })),
-      S(e.$slots, "loading")
-    ])) : a("", !0),
-    e.isError && !e.loading ? (i(), c("div", x, [
-      e.slotError ? a("", !0) : (i(), C(u, {
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "loading")
+    ])) : createCommentVNode("", true),
+    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      !_ctx.slotError ? (openBlock(), createBlock(_component_ImageError, {
         key: 0,
         width: "16px",
         height: "20px",
         name: "imageError"
-      })),
-      S(e.$slots, "error")
-    ])) : a("", !0)
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "error")
+    ])) : createCommentVNode("", true)
   ], 6);
 }
-const ie = /* @__PURE__ */ Q(X, [["render", _]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  ie as default
+  index as default
 };