@transsionfe/semi-ui-vue 0.0.6 → 0.0.7

package/lib/es/components/image/PreviewFooter.vue.js

@@ -1,204 +0,0 @@
-import { defineComponent as X, useSlots as q, ref as G, computed as l, openBlock as c, createElementBlock as P, normalizeClass as H, renderSlot as J, createBlock as C, resolveDynamicComponent as b, Fragment as K, renderList as Q, h as t } from "vue";
-import x from "classnames";
-import { cssClasses as U } from "@douyinfe/semi-foundation/image/constants";
-import W from "@douyinfe/semi-foundation/image/previewFooterFoundation";
-import i from "../tooltip/Tooltip.vue.js";
-import $ from "../divider/Divider.vue.js";
-import Y from "../slider/Slider.vue.js";
-import { throttle as oo } from "lodash-es";
-import { useFoundation as eo } from "../../_utils/useFoundation.js";
-import to from "../icons/icons/IconChevronLeft.vue.js";
-import no from "../icons/icons/IconChevronRight.vue.js";
-import ao from "../icons/icons/IconMinus.vue.js";
-import ro from "../icons/icons/IconPlus.vue.js";
-import io from "../icons/icons/IconRealSizeStroked.vue.js";
-import so from "../icons/icons/IconWindowAdaptionStroked.vue.js";
-import lo from "../icons/icons/IconRotate.vue.js";
-import co from "../icons/icons/IconDownload.vue.js";
-const Ro = /* @__PURE__ */ X({
-  name: "PreviewFooter",
-  __name: "PreviewFooter",
-  props: {
-    curPage: {},
-    totalNum: {},
-    disabledPrev: { type: Boolean },
-    disabledNext: { type: Boolean },
-    disableDownload: { type: Boolean, default: !1 },
-    className: {},
-    zoom: {},
-    ratio: {},
-    prevTip: {},
-    nextTip: {},
-    zoomInTip: {},
-    zoomOutTip: {},
-    rotateTip: {},
-    downloadTip: {},
-    adaptiveTip: {},
-    originTip: {},
-    showTooltip: { type: Boolean, default: !1 },
-    zIndex: {},
-    onZoomIn: {},
-    onZoomOut: {},
-    onPrev: {},
-    onNext: {},
-    onAdjustRatio: {},
-    onRotate: {},
-    onDownload: {},
-    renderPreviewMenu: {},
-    max: { default: 500 },
-    min: { default: 10 },
-    step: { default: 10 }
-  },
-  emits: ["prev", "next", "zoomIn", "zoomOut", "rotate", "adjustRatio", "download"],
-  setup(p, { expose: T, emit: k }) {
-    const a = `${U.PREFIX}-preview-footer`, d = q();
-    console.log("PreviewFooter 初始化，slots:", {
-      footer: !!d.footer,
-      availableSlots: Object.keys(d)
-    });
-    const o = p, r = k, m = G(null), z = {
-      getProps: () => o,
-      getProp: (e) => o[e],
-      getState: () => null,
-      getStates: () => ({}),
-      setState: () => {
-      },
-      getContext: () => null,
-      getContexts: () => ({}),
-      getCache: () => null,
-      getCaches: () => ({}),
-      setCache: () => {
-      },
-      stopPropagation: (e) => e == null ? void 0 : e.stopPropagation(),
-      persistEvent: () => {
-      }
-    }, { foundation: s } = eo(W, z), f = () => {
-      s.changeSliderValue("minus");
-    }, g = () => {
-      s.changeSliderValue("plus");
-    }, v = () => {
-      s.handleRotate("left"), r("rotate", "left");
-    }, _ = () => {
-      s.handleRotate("right"), r("rotate", "right");
-    }, y = oo((e) => {
-      const n = Array.isArray(e) ? e[0] : e;
-      s.handleValueChange(n);
-    }, 50), u = () => {
-      s.handleRatioClick();
-    }, R = () => {
-      const e = t(to, {
-        size: "large",
-        class: o.disabledPrev ? `${a}-disabled` : "",
-        onClick: o.disabledPrev ? void 0 : () => r("prev")
-      });
-      return o.showTooltip ? t(i, { content: o.prevTip || "上一张" }, { default: () => e }) : e;
-    }, I = () => {
-      const e = t(no, {
-        size: "large",
-        class: o.disabledNext ? `${a}-disabled` : "",
-        onClick: o.disabledNext ? void 0 : () => r("next")
-      });
-      return o.showTooltip ? t(i, { content: o.nextTip || "下一张" }, { default: () => e }) : e;
-    }, N = () => {
-      const e = o.zoom === o.min, n = t(ao, {
-        size: "large",
-        class: e ? `${a}-disabled` : "",
-        onClick: e ? void 0 : f
-      });
-      return o.showTooltip ? t(i, { content: o.zoomOutTip || "缩小" }, { default: () => n }) : n;
-    }, F = () => {
-      const e = o.zoom === o.max, n = t(ro, {
-        size: "large",
-        class: e ? `${a}-disabled` : "",
-        onClick: e ? void 0 : g
-      });
-      return o.showTooltip ? t(i, { content: o.zoomInTip || "放大" }, { default: () => n }) : n;
-    }, M = () => {
-      const e = o.ratio === "adaptation" ? t(io, { size: "large", class: `${a}-gap`, onClick: u }) : t(so, {
-        size: "large",
-        class: `${a}-gap`,
-        onClick: u
-      }), n = o.ratio === "adaptation" ? o.originTip || "原始尺寸" : o.adaptiveTip || "适应窗口";
-      return o.showTooltip ? t(i, { content: n }, { default: () => e }) : e;
-    }, S = () => {
-      const e = t(lo, {
-        size: "large",
-        onClick: v
-      });
-      return o.showTooltip ? t(i, { content: o.rotateTip || "旋转" }, { default: () => e }) : e;
-    }, D = () => {
-      const e = t(co, {
-        size: "large",
-        class: x(`${a}-gap`, {
-          [`${a}-disabled`]: o.disableDownload
-        }),
-        onClick: o.disableDownload ? void 0 : () => r("download")
-      });
-      return o.showTooltip ? t(i, { content: o.downloadTip || "下载" }, { default: () => e }) : e;
-    }, O = () => t("div", { class: `${a}-page`, key: "info" }, `${o.curPage}/${o.totalNum}`), Z = () => t(Y, {
-      key: "slider",
-      value: o.zoom,
-      min: o.min,
-      max: o.max,
-      step: o.step,
-      tipFormatter: (e) => {
-        const n = Array.isArray(e) ? e[0] : e;
-        return typeof n == "number" ? `${n}%` : String(n || "");
-      },
-      tooltipVisible: o.showTooltip ? void 0 : !1,
-      onChange: y
-    }), w = () => [
-      R(),
-      O(),
-      I(),
-      N(),
-      Z(),
-      F(),
-      M(),
-      S(),
-      D()
-    ], B = () => {
-      const e = w();
-      return e.splice(3, 0, t($, { layout: "vertical", key: "divider-first" })), e.splice(8, 0, t($, { layout: "vertical", key: "divider-second" })), e;
-    }, V = l(() => B()), h = l(() => ({
-      min: o.min,
-      max: o.max,
-      step: o.step,
-      curPage: o.curPage,
-      totalNum: o.totalNum,
-      zoom: o.zoom,
-      ratio: o.ratio,
-      disabledPrev: o.disabledPrev,
-      disabledNext: o.disabledNext,
-      disableDownload: o.disableDownload,
-      disableZoomIn: o.zoom === o.max,
-      disableZoomOut: o.zoom === o.min,
-      onDownload: () => r("download"),
-      onNext: () => r("next"),
-      onPrev: () => r("prev"),
-      onZoomIn: () => g(),
-      onZoomOut: () => f(),
-      onRatioClick: u,
-      onRotateLeft: v,
-      onRotateRight: _,
-      menuItems: w()
-    })), A = l(() => d.footer ? (console.log("PreviewFooter: 检测到footer插槽，使用插槽内容"), null) : o.renderPreviewMenu ? (console.log("PreviewFooter: 使用renderPreviewMenu函数"), o.renderPreviewMenu(h.value)) : (console.log("PreviewFooter: 没有renderPreviewMenu"), null)), L = l(() => x(a, `${a}-wrapper`, o.className, {
-      [`${a}-content`]: !o.renderPreviewMenu
-    }));
-    return T({
-      footerRef: m,
-      $el: m
-    }), (e, n) => (c(), P("section", {
-      ref_key: "footerRef",
-      ref: m,
-      class: H(L.value)
-    }, [
-      J(e.$slots, "footer", { menuProps: h.value }, () => [
-        p.renderPreviewMenu ? (c(), C(b(A.value), { key: 0 })) : (c(!0), P(K, { key: 1 }, Q(V.value, (j, E) => (c(), C(b(j), { key: E }))), 128))
-      ])
-    ], 2));
-  }
-});
-export {
-  Ro as default
-};

package/lib/es/components/image/PreviewHeader.vue.js

@@ -1,75 +0,0 @@
-import { defineComponent as k, useSlots as x, ref as N, computed as o, h as d, openBlock as n, createElementBlock as p, normalizeClass as u, createElementVNode as S, normalizeStyle as $, renderSlot as g, createBlock as v, resolveDynamicComponent as C, createCommentVNode as y } from "vue";
-import B from "classnames";
-import { cssClasses as R } from "@douyinfe/semi-foundation/image/constants";
-import { usePreviewContext as _ } from "./context.js";
-import j from "../icons/icons/IconClose.vue.js";
-const O = /* @__PURE__ */ k({
-  name: "PreviewHeader",
-  __name: "PreviewHeader",
-  props: {
-    closable: { type: Boolean, default: !0 },
-    renderHeader: {},
-    title: {},
-    titleStyle: {},
-    className: {},
-    onClose: {},
-    renderCloseIcon: {}
-  },
-  emits: ["close"],
-  setup(l, { expose: h, emit: w }) {
-    const s = `${R.PREFIX}-preview-header`, a = x();
-    console.log("PreviewHeader 初始化，slots:", {
-      header: !!a.header,
-      availableSlots: Object.keys(a)
-    });
-    const t = l, I = w, r = _(), c = N(null), H = o(() => B(s, t.className)), m = o(() => r && r.titles && typeof r.currentIndex == "number" ? r.titles[r.currentIndex] : t.title), i = o(() => m.value), f = o(() => {
-      if (a.header)
-        return console.log("PreviewHeader: 检测到header插槽，使用插槽内容"), null;
-      if (t.renderHeader) {
-        console.log("PreviewHeader: 使用renderHeader函数");
-        const e = t.renderHeader(i.value);
-        return e && typeof e == "object" && "type" in e ? e : d("span", e || "");
-      }
-      return console.log("PreviewHeader: 使用默认标题"), i.value ? d("span", i.value) : null;
-    }), P = o(() => {
-      if (t.renderCloseIcon) {
-        const e = typeof t.renderCloseIcon == "function" ? t.renderCloseIcon() : t.renderCloseIcon;
-        if (e && typeof e == "object" && "type" in e)
-          return e;
-        console.warn(
-          "[Semi ImagePreview] RenderCloseIcon should be a valid vue element or a function that returns a vue element"
-        );
-      }
-      return d(j);
-    }), b = (e) => {
-      I("close", e);
-    };
-    return h({
-      headerRef: c,
-      $el: c
-    }), (e, E) => (n(), p("section", {
-      ref_key: "headerRef",
-      ref: c,
-      class: u(H.value)
-    }, [
-      S("section", {
-        class: u(`${s}-title`),
-        style: $(l.titleStyle)
-      }, [
-        g(e.$slots, "header", { title: m.value }, () => [
-          f.value ? (n(), v(C(f.value), { key: 0 })) : y("", !0)
-        ])
-      ], 6),
-      l.closable ? (n(), p("section", {
-        key: 0,
-        class: u(`${s}-close`),
-        onMouseup: b
-      }, [
-        (n(), v(C(P.value)))
-      ], 34)) : y("", !0)
-    ], 2));
-  }
-});
-export {
-  O as default
-};

package/lib/es/components/image/PreviewImage.vue.js

@@ -1,168 +0,0 @@
-import { defineComponent as M, ref as v, computed as Z, watch as l, onMounted as O, nextTick as C, onBeforeUnmount as B, openBlock as f, createElementBlock as x, normalizeClass as I, withModifiers as F, normalizeStyle as b, createBlock as D, createCommentVNode as S } from "vue";
-import { cssClasses as W } from "@douyinfe/semi-foundation/image/constants";
-import _ from "@douyinfe/semi-foundation/image/previewImageFoundation";
-import N from "../spin/Spin.vue.js";
-import { useFoundation as j } from "../../_utils/useFoundation.js";
-const V = ["src", "crossOrigin"], q = /* @__PURE__ */ M({
-  name: "PreviewImage",
-  __name: "PreviewImage",
-  props: {
-    src: {},
-    rotation: { default: 0 },
-    style: {},
-    zoom: { default: void 0 },
-    ratio: { default: "adaptation" },
-    disableDownload: { type: Boolean },
-    clickZoom: {},
-    crossOrigin: {},
-    setRatio: {},
-    onZoom: {},
-    onLoad: {},
-    onError: {}
-  },
-  emits: ["zoom", "load", "error"],
-  setup(d, { expose: P, emit: y }) {
-    const c = `${W.PREFIX}-preview-image`, t = d, m = y, g = v(null), n = v(null), r = v({
-      width: 0,
-      height: 0,
-      loading: !0,
-      translate: {
-        x: 0,
-        y: 0
-      },
-      currZoom: t.zoom
-    }), k = Z(() => {
-      const { width: e, height: o, loading: s, translate: i } = r.value;
-      return {
-        position: "absolute",
-        visibility: s ? "hidden" : "visible",
-        transform: `translate(${i.x}px, ${i.y}px) rotate(${t.rotation}deg)`,
-        width: e ? `${e}px` : "0px",
-        height: o ? `${o}px` : "0px"
-      };
-    }), u = {
-      getProps: () => ({ ...t }),
-      getProp: (e) => t[e],
-      getState: (e) => r.value[e],
-      getStates: () => r.value,
-      setState: (e, o) => {
-        Object.assign(r.value, e), o == null || o();
-      },
-      getContext: () => null,
-      getContexts: () => ({}),
-      getCache: () => null,
-      getCaches: () => ({}),
-      setCache: () => {
-      },
-      stopPropagation: (e) => e == null ? void 0 : e.stopPropagation(),
-      persistEvent: () => {
-      },
-      getContainer: () => g.value,
-      getImage: () => n.value,
-      setLoading: (e) => {
-        r.value.loading = e;
-      },
-      setImageCursor: (e) => {
-        n.value && (n.value.style.cursor = e ? "grab" : "default");
-      }
-    }, { foundation: a } = j(_, u), E = u.getProps;
-    u.getProps = () => {
-      const e = E(), o = t.onZoom;
-      return {
-        ...e,
-        onZoom: (s, i = !0) => {
-          i && o ? o(s) : i ? m("zoom", s) : a.changeZoom(s);
-        }
-      };
-    };
-    const h = (e) => {
-      const o = e.target;
-      o && o.naturalWidth > 0 && o.naturalHeight > 0 && (a.handleLoad(e), m("load", t.src || ""));
-    }, R = (e) => {
-      a.handleError(e), m("error", t.src || "");
-    }, z = (e) => {
-      a.handleImageMove(e);
-    }, L = (e) => {
-      a.handleImageMouseDown(e);
-    }, $ = (e) => {
-      a.handleRightClickImage(e);
-    }, p = () => {
-      a.handleWindowResize();
-    };
-    l(
-      () => t.src,
-      (e, o) => {
-        e && e !== o && a.setLoading(!0);
-      }
-    ), l(
-      () => t.zoom,
-      (e) => {
-        e !== void 0 && e !== r.value.currZoom && (r.value.currZoom = e);
-      }
-    ), l(
-      () => t.ratio,
-      () => {
-        a.handleRatioChange();
-      }
-    ), l(
-      () => t.rotation,
-      () => {
-        p();
-      }
-    );
-    const w = () => {
-      var e;
-      if ((e = n.value) != null && e.complete && n.value.naturalWidth > 0) {
-        const o = new Event("load");
-        Object.defineProperty(o, "target", {
-          value: n.value,
-          enumerable: !0
-        }), h(o);
-      }
-    };
-    return O(() => {
-      a.init(), window.addEventListener("resize", p), C(w);
-    }), l(
-      () => t.src,
-      () => {
-        C(w);
-      }
-    ), B(() => {
-      window.removeEventListener("resize", p);
-    }), P({
-      foundation: a,
-      containerRef: g,
-      imageRef: n
-    }), (e, o) => (f(), x("div", {
-      ref_key: "containerRef",
-      ref: g,
-      class: I(c)
-    }, [
-      (f(), x("img", {
-        ref_key: "imageRef",
-        ref: n,
-        key: d.src,
-        src: d.src,
-        alt: "previewImage",
-        class: I(`${c}-img`),
-        style: b(k.value),
-        crossOrigin: d.crossOrigin,
-        onMousemove: z,
-        onMousedown: L,
-        onContextmenu: $,
-        onDragstart: o[0] || (o[0] = F(() => {
-        }, ["prevent"])),
-        onLoad: h,
-        onError: R
-      }, null, 46, V)),
-      r.value.loading ? (f(), D(N, {
-        key: 0,
-        size: "large",
-        wrapperClassName: `${c}-spin`
-      }, null, 8, ["wrapperClassName"])) : S("", !0)
-    ], 512));
-  }
-});
-export {
-  q as default
-};