@seresweb/website-component 2.0.0

package/dist/index-BgNMAlW8.js

@@ -0,0 +1,536 @@
+import { defineComponent as H, ref as g, reactive as Z, onMounted as D, onBeforeUnmount as X, createElementBlock as s, openBlock as r, normalizeStyle as B, normalizeClass as n, unref as t, createElementVNode as h, createCommentVNode as $, Fragment as T, renderList as M, createVNode as x, mergeProps as V, createBlock as k, normalizeProps as U, computed as S, watch as A, createStaticVNode as j } from "vue";
+import { a as q } from "./index-BrggpRcU.js";
+import { P as i } from "./_vars-BV4QQF-p.js";
+import "./es/Input.mjs";
+import "./es/accordion-info-panel.mjs";
+import "./es/animated-number.mjs";
+import "./es/drawer.mjs";
+import "./es/dropdown.mjs";
+import "./es/gradual-highlight.mjs";
+import { getRootOffset as G } from "@vavt/util";
+import { ScLayzImage as W } from "./es/layz-image.mjs";
+import "./es/parameter-box.mjs";
+import "./es/radio.mjs";
+import { ScTabIndicator as J } from "./es/tab-indicator.mjs";
+import { ScVideo as K } from "./es/video.mjs";
+const Q = ["innerHTML"], ee = ["innerHTML"], te = ["innerHTML"], oe = ["innerHTML"], ie = /* @__PURE__ */ H({
+  __name: "pc-viewer",
+  props: {
+    title: {},
+    desc: {},
+    dataList: {}
+  },
+  setup(p) {
+    const f = g(), c = g(), l = g(), a = g(), u = g(), L = g(), d = Z({
+      container: "",
+      root: "",
+      item: ""
+    }), I = () => {
+      var z;
+      if (!l.value)
+        return;
+      const e = l.value.offsetHeight, m = window.innerHeight, y = ((z = L.value) == null ? void 0 : z.offsetHeight) || 0, b = o(L.value);
+      d.container = `padding-top: ${(m - y - e - b) / 2}px;`, d.root = `height: ${l.value.scrollWidth}px`;
+    }, v = () => {
+      const e = document.documentElement.getAttribute("dir") || "ltr", m = e === "rtl" ? "right" : "left";
+      if (!f.value || !l.value || !a.value || !u.value) return;
+      const b = f.value.clientHeight - window.innerHeight, { offsetTop: z } = G(f.value), R = document.documentElement.scrollTop - z;
+      if (R < 0) {
+        l.value.scrollTo({ left: 0 }), u.value.style[m] = "0px";
+        return;
+      }
+      if (R > b) {
+        const F = l.value.scrollWidth - window.innerWidth;
+        l.value.scrollTo({ left: e === "rtl" ? -F : F }), u.value.style[m] = a.value.clientWidth - u.value.clientWidth + "px";
+        return;
+      }
+      const O = R / b, N = O * (l.value.scrollWidth - window.innerWidth), Y = O * (a.value.clientWidth * 2 / 3);
+      l.value.scrollTo({ left: e === "rtl" ? -N : N }), u.value.style[m] = `${Y}px`;
+    }, w = () => {
+      d.container = "", I();
+    }, o = (e) => {
+      if (!(e instanceof HTMLElement))
+        return 0;
+      const m = window.getComputedStyle(e), y = parseFloat(m.marginTop) || 0, b = parseFloat(m.marginBottom) || 0;
+      return y + b;
+    };
+    let _;
+    return D(() => {
+      _ = new IntersectionObserver(
+        (e) => {
+          e.forEach((m) => {
+            m.isIntersecting && (d.container = "", I());
+          });
+        },
+        {
+          root: null,
+          // 相对于 viewport
+          rootMargin: "200px 0px 200px 0px",
+          // 提前100px触发
+          threshold: 0
+        }
+      ), window.addEventListener("scroll", v), window.addEventListener("resize", w), f.value && _.observe(f.value);
+    }), X(() => {
+      window.removeEventListener("scroll", v), window.removeEventListener("resize", w), _ && _.disconnect();
+    }), (e, m) => (r(), s(
+      "div",
+      {
+        ref_key: "rootRef",
+        ref: f,
+        class: n(`${t(i)}-horizontal-viewer`),
+        style: B(d.root)
+      },
+      [
+        h(
+          "div",
+          {
+            ref_key: "containerRef",
+            ref: c,
+            class: n([`${t(i)}-horizontal-viewer__container`, (e.title || e.desc) && "has-header"]),
+            style: B(d.container)
+          },
+          [
+            e.title || e.desc ? (r(), s(
+              "div",
+              {
+                key: 0,
+                class: n(`${t(i)}-horizontal-viewer__header`),
+                ref_key: "headerRef",
+                ref: L
+              },
+              [
+                e.title ? (r(), s("p", {
+                  key: 0,
+                  innerHTML: e.title
+                }, null, 8, Q)) : $("v-if", !0),
+                e.desc ? (r(), s("p", {
+                  key: 1,
+                  innerHTML: e.desc
+                }, null, 8, ee)) : $("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            )) : $("v-if", !0),
+            h(
+              "div",
+              {
+                ref_key: "scrollerRef",
+                ref: l,
+                class: n(`${t(i)}-horizontal-viewer__scroller`)
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: n(`${t(i)}-horizontal-viewer__content`)
+                  },
+                  [
+                    (r(!0), s(
+                      T,
+                      null,
+                      M(e.dataList, (y) => (r(), s(
+                        "div",
+                        {
+                          key: y.title,
+                          class: n(`${t(i)}-horizontal-viewer__content-item`)
+                        },
+                        [
+                          x(t(W), {
+                            src: y.url,
+                            alt: y.alt
+                          }, null, 8, ["src", "alt"]),
+                          h(
+                            "div",
+                            {
+                              class: n(`${t(i)}-horizontal-viewer__content-item-footer`)
+                            },
+                            [
+                              h("p", {
+                                innerHTML: y.title
+                              }, null, 8, te),
+                              h("p", {
+                                innerHTML: y.desc
+                              }, null, 8, oe)
+                            ],
+                            2
+                            /* CLASS */
+                          )
+                        ],
+                        2
+                        /* CLASS */
+                      ))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            ),
+            h(
+              "div",
+              {
+                ref_key: "paginationRef",
+                ref: a,
+                class: n(`${t(i)}-horizontal-viewer__pagination`)
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: n(`${t(i)}-horizontal-viewer__scrollbar`)
+                  },
+                  [
+                    h(
+                      "div",
+                      {
+                        ref_key: "scrollbarDragRef",
+                        ref: u,
+                        class: n(`${t(i)}-horizontal-viewer__scrollbar-drag`)
+                      },
+                      null,
+                      2
+                      /* CLASS */
+                    )
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ],
+          6
+          /* CLASS, STYLE */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), re = /* @__PURE__ */ H({
+  __name: "mb-viewer",
+  props: {
+    title: {},
+    desc: {},
+    isMobile: { type: Boolean },
+    modelValue: {},
+    dataList: {},
+    swiperOptions: {},
+    effect: {},
+    showIntro: { type: Boolean },
+    videoProps: {},
+    indicatorClass: {},
+    tabIndicatorBottom: {},
+    widthType: {},
+    indicatorType: {},
+    showIndicator: { type: Boolean },
+    indicatorPosition: {}
+  },
+  setup(p) {
+    const f = p, c = g();
+    return (l, a) => (r(), s(
+      "div",
+      {
+        ref_key: "rootRef",
+        ref: c,
+        class: n(`${t(i)}-horizontal-viewer-mb`)
+      },
+      [
+        x(
+          t(de),
+          V(f, { indicatorType: "image" }),
+          null,
+          16
+          /* FULL_PROPS */
+        )
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), C = /* @__PURE__ */ H({
+  __name: "horizontal-viewer",
+  props: {
+    title: {},
+    desc: {},
+    isMobile: { type: Boolean },
+    modelValue: {},
+    dataList: {},
+    swiperOptions: {},
+    effect: {},
+    showIntro: { type: Boolean },
+    videoProps: {},
+    indicatorClass: {},
+    tabIndicatorBottom: {},
+    widthType: {},
+    indicatorType: {},
+    showIndicator: { type: Boolean, default: !0 },
+    indicatorPosition: {}
+  },
+  setup(p) {
+    const f = p;
+    return (c, l) => c.isMobile ? (r(), k(
+      re,
+      U(V({ key: 0 }, f)),
+      null,
+      16
+      /* FULL_PROPS */
+    )) : (r(), k(
+      ie,
+      U(V({ key: 1 }, f)),
+      null,
+      16
+      /* FULL_PROPS */
+    ));
+  }
+});
+C.install = (p) => (p.component("ScHorizontalViewer", C), p);
+const Te = C, ne = ["onClick"], le = ["innerHTML"], ae = ["innerHTML"], E = /* @__PURE__ */ H({
+  __name: "image-indicator",
+  props: {
+    dataList: {},
+    showIntro: { type: Boolean, default: !0 }
+  },
+  emits: ["change"],
+  setup(p, { emit: f }) {
+    const c = f, l = g(0), a = g([]), u = S(() => {
+      const d = a.value[l.value];
+      return {
+        height: `${d == null ? void 0 : d.offsetHeight}px`
+      };
+    }), L = (d) => {
+      l.value = d, c("change", d);
+    };
+    return (d, I) => (r(), s(
+      "div",
+      {
+        class: n(`${t(i)}-image-indicator`)
+      },
+      [
+        h(
+          "div",
+          {
+            class: n(`${t(i)}-image-indicator__list`)
+          },
+          [
+            (r(!0), s(
+              T,
+              null,
+              M(d.dataList, (v, w) => (r(), s("div", {
+                key: v.url,
+                class: n([
+                  `${t(i)}-image-indicator__list-item`,
+                  l.value === w ? `${t(i)}-image-indicator__active` : ""
+                ]),
+                onClick: (o) => L(w)
+              }, [
+                x(t(W), {
+                  src: v.url,
+                  alt: v.alt
+                }, null, 8, ["src", "alt"])
+              ], 10, ne))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        ),
+        d.showIntro ? (r(), s(
+          "div",
+          {
+            key: 0,
+            class: n(`${t(i)}-image-indicator__intro`),
+            style: B(u.value)
+          },
+          [
+            (r(!0), s(
+              T,
+              null,
+              M(d.dataList, (v, w) => (r(), s(
+                "div",
+                {
+                  key: v.url,
+                  ref_for: !0,
+                  ref_key: "introItemRef",
+                  ref: a,
+                  class: n([`${t(i)}-image-indicator__intro-item`, l.value === w && `${t(i)}-image-indicator__active`])
+                },
+                [
+                  v.title ? (r(), s("p", {
+                    key: 0,
+                    class: n(`${t(i)}-image-indicator__intro-title`),
+                    innerHTML: v.title
+                  }, null, 10, le)) : $("v-if", !0),
+                  v.desc ? (r(), s("p", {
+                    key: 1,
+                    class: n(`${t(i)}-image-indicator__intro-desc`),
+                    innerHTML: v.desc
+                  }, null, 10, ae)) : $("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              ))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          6
+          /* CLASS, STYLE */
+        )) : $("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+E.install = (p) => (p.component("ScImageIndicator", E), p);
+const se = E, ce = { class: "swiper-wrapper" }, P = /* @__PURE__ */ H({
+  __name: "swiper-normal",
+  props: {
+    modelValue: { default: 0 },
+    dataList: {},
+    swiperOptions: { default: () => ({}) },
+    effect: {},
+    showIntro: { type: Boolean, default: !0 },
+    videoProps: {},
+    indicatorClass: {},
+    tabIndicatorBottom: {},
+    widthType: { default: "full" },
+    indicatorType: { default: "tab" },
+    showIndicator: { type: Boolean, default: !0 },
+    indicatorPosition: { default: "relative" }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(p, { emit: f }) {
+    const c = p, l = f;
+    let a = null;
+    const u = g(c.modelValue), L = g(), d = S(() => {
+      const o = [`${i}-swiper-main`];
+      return c.widthType === "middle" ? o.push(`${i}-swiper-main__middle`) : o.push(`${i}-swiper-main__full`), o;
+    }), I = S(() => {
+      const o = {};
+      return c.tabIndicatorBottom && (o.position = "absolute", o.zIndex = 1, o.bottom = typeof c.tabIndicatorBottom == "number" ? `${c.tabIndicatorBottom}px` : c.tabIndicatorBottom), o;
+    });
+    A(
+      () => c.modelValue,
+      () => {
+        u.value = c.modelValue, v(u.value);
+      }
+    );
+    const v = (o) => {
+      a == null || a.slideTo(o);
+    }, w = () => {
+      a == null || a.destroy(), L.value && (a = new q(L.value, {
+        slidesPerView: 1,
+        allowTouchMove: !1,
+        effect: c.effect,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev"
+        },
+        ...c.swiperOptions
+      }), a.on("slideChange", (o) => {
+        u.value = o.activeIndex, l("change", o.activeIndex), l("update:modelValue", o.activeIndex);
+      }));
+    };
+    return D(() => {
+      w(), window.addEventListener("resize", w);
+    }), X(() => {
+      a == null || a.destroy(), window.removeEventListener("resize", w);
+    }), (o, _) => (r(), s(
+      "div",
+      {
+        class: n(`${t(i)}-swiper`)
+      },
+      [
+        h(
+          "div",
+          {
+            ref_key: "swiperRef",
+            ref: L,
+            class: n(d.value)
+          },
+          [
+            h("div", ce, [
+              (r(!0), s(
+                T,
+                null,
+                M(o.dataList, (e, m) => (r(), s("div", {
+                  key: e.title,
+                  class: "swiper-slide"
+                }, [
+                  e.type === "img" ? (r(), k(t(W), {
+                    key: 0,
+                    src: e.url,
+                    alt: e.alt
+                  }, null, 8, ["src", "alt"])) : (r(), k(t(K), V({
+                    key: 1,
+                    ref_for: !0
+                  }, o.videoProps, {
+                    url: e.url,
+                    poster: e.poster,
+                    playable: u.value === m
+                  }), null, 16, ["url", "poster", "playable"])),
+                  e.mask ? (r(), s(
+                    "div",
+                    {
+                      key: 2,
+                      class: n(`${t(i)}-swiper-mask`)
+                    },
+                    null,
+                    2
+                    /* CLASS */
+                  )) : $("v-if", !0)
+                ]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _[2] || (_[2] = j('<div class="swiper-button-next"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"><path d="M9.64299 3.12871L9.51887 5.83301L15.6859 12L9.51887 18.167L9.64299 20.8713L18.5143 12L9.64299 3.12871Z" fill="white"></path></svg></div><div class="swiper-button-prev"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15.1289 3.12871L15.2531 5.83301L9.08609 12L15.2531 18.167L15.1289 20.8713L6.25766 12L15.1289 3.12871Z" fill="white"></path></svg></div>', 2))
+          ],
+          2
+          /* CLASS */
+        ),
+        o.showIndicator ? (r(), s(
+          T,
+          { key: 0 },
+          [
+            o.indicatorType === "tab" ? (r(), k(t(J), {
+              key: 0,
+              modelValue: u.value,
+              "onUpdate:modelValue": _[0] || (_[0] = (e) => u.value = e),
+              class: n([o.indicatorClass, o.indicatorPosition === "absolute" && `${t(i)}-swiper-indicator-absolute`]),
+              dataList: o.dataList,
+              "show-intro": o.showIntro,
+              style: B(I.value),
+              onChange: v
+            }, null, 8, ["modelValue", "class", "dataList", "show-intro", "style"])) : (r(), k(t(se), {
+              key: 1,
+              modelValue: u.value,
+              "onUpdate:modelValue": _[1] || (_[1] = (e) => u.value = e),
+              dataList: c.dataList,
+              onChange: v
+            }, null, 8, ["modelValue", "dataList"]))
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : $("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+P.install = (p) => (p.component("ScSwiperNormal", P), p);
+const de = P;
+export {
+  Te as S,
+  se as a,
+  de as b
+};