@seresweb/website-component 2.0.0

package/dist/es/tab-indicator.mjs

@@ -0,0 +1,184 @@
+import { defineComponent as B, ref as _, watch as H, onMounted as W, onBeforeUnmount as C, watchEffect as z, createElementBlock as p, openBlock as h, normalizeClass as s, unref as r, createElementVNode as $, createCommentVNode as F, Fragment as T, renderList as I, normalizeStyle as V } from "vue";
+import { P as o } from "../_vars-BV4QQF-p.js";
+const X = (n, L, u = 500) => {
+  if (!n) return;
+  const b = n.scrollLeft;
+  let a = null;
+  const f = (t) => {
+    a || (a = t);
+    const l = t - a;
+    if (l >= u)
+      n.scrollLeft = L;
+    else {
+      const d = y(l, b, L - b, u);
+      n.scrollLeft = d, requestAnimationFrame(f);
+    }
+  }, y = (t, l, d, m) => (t /= m / 2, t < 1 ? d / 2 * t + l : (t--, -d / 2 * (t * (t - 2) - 1) + l));
+  requestAnimationFrame(f);
+}, A = ["onClick", "innerHTML"], q = ["innerHTML"], S = /* @__PURE__ */ B({
+  __name: "tab-indicator",
+  props: {
+    modelValue: { default: 0 },
+    dataList: {},
+    showIntro: { type: Boolean },
+    isSeparate: { type: Boolean },
+    adapt2TextWidth: { type: Boolean }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(n, { emit: L }) {
+    const u = n, b = L, a = _(), f = _([]), y = _([]), t = _(u.modelValue), l = _({ width: "0px", transform: "translateX(0)" }), d = _({}), m = () => {
+      const e = f.value[t.value], w = (e == null ? void 0 : e.offsetWidth) || 0, c = `translateX(${e == null ? void 0 : e.offsetLeft}px)`;
+      l.value = {
+        width: `${w}px`,
+        transform: c
+      };
+      const i = Math.max(...y.value.map((v) => v.offsetHeight));
+      d.value = {
+        height: `${i}px`
+      };
+    };
+    H(
+      () => u.modelValue,
+      () => {
+        t.value = u.modelValue;
+      }
+    );
+    const E = (e) => {
+      const w = document.documentElement.getAttribute("dir") || "ltr", i = f.value.map((v) => v.offsetWidth).slice(0, e).reduce((v, k, R) => v + (R + 1 === e ? k * 0.5 : k), 0);
+      X(a.value, w === "rtl" ? -i : i, 500);
+    }, M = (e) => {
+      E(e), t.value = e, b("change", e), b("update:modelValue", e);
+    };
+    let g = null;
+    return W(() => {
+      window.addEventListener("resize", m), a.value !== void 0 && (g = new IntersectionObserver(
+        ([e]) => {
+          e.isIntersecting && m();
+        },
+        {
+          root: null,
+          // 相对于 viewport
+          rootMargin: "200px",
+          // 提前 200px 进入区域就触发
+          threshold: 0
+          // 元素刚进入就触发
+        }
+      ), g.observe(a.value));
+    }), C(() => {
+      window.removeEventListener("resize", m), g && a.value && g.unobserve(a.value);
+    }), z(() => {
+      m();
+    }), (e, w) => (h(), p(
+      "div",
+      {
+        class: s([
+          `${r(o)}-tab-indicator`,
+          e.isSeparate && `${r(o)}-tab-indicator__separate`,
+          e.adapt2TextWidth && `${r(o)}-tab-indicator__adapt`
+        ])
+      },
+      [
+        $(
+          "div",
+          {
+            ref_key: "scrollRef",
+            ref: a,
+            class: s(`${r(o)}-tab-indicator__scroll`)
+          },
+          [
+            $(
+              "div",
+              {
+                class: s(`${r(o)}-tab-indicator__wrap`)
+              },
+              [
+                $(
+                  "div",
+                  {
+                    class: s(`${r(o)}-tab-indicator__main`)
+                  },
+                  [
+                    (h(!0), p(
+                      T,
+                      null,
+                      I(e.dataList, (c, i) => (h(), p("div", {
+                        ref_for: !0,
+                        ref_key: "indicatorItemRef",
+                        ref: f,
+                        key: c.title,
+                        class: s([`${r(o)}-tab-indicator__item`, t.value === i && `${r(o)}-tab-indicator__active`]),
+                        onClick: (v) => M(i),
+                        innerHTML: c.title
+                      }, null, 10, A))),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ],
+                  2
+                  /* CLASS */
+                ),
+                $(
+                  "div",
+                  {
+                    class: s(`${r(o)}-tab-indicator__scrollbar`)
+                  },
+                  [
+                    $(
+                      "div",
+                      {
+                        class: s(`${r(o)}-tab-indicator__scrollbar-drag`),
+                        style: V(l.value)
+                      },
+                      null,
+                      6
+                      /* CLASS, STYLE */
+                    )
+                  ],
+                  2
+                  /* CLASS */
+                )
+              ],
+              2
+              /* CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        ),
+        e.showIntro ? (h(), p(
+          "div",
+          {
+            key: 0,
+            class: s(`${r(o)}-tab-indicator__intro`),
+            style: V(d.value)
+          },
+          [
+            (h(!0), p(
+              T,
+              null,
+              I(e.dataList, (c, i) => (h(), p("p", {
+                ref_for: !0,
+                ref_key: "introItemRef",
+                ref: y,
+                key: c.title,
+                class: s([`${r(o)}-tab-indicator__intro-item`, t.value === i && `${r(o)}-tab-indicator__active`]),
+                innerHTML: c.desc
+              }, null, 10, q))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          6
+          /* CLASS, STYLE */
+        )) : F("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+S.install = (n) => (n.component("ScTabIndicator", S), n);
+const P = S;
+export {
+  P as ScTabIndicator
+};

package/dist/es/video.mjs

@@ -0,0 +1,246 @@
+import { defineComponent as z, ref as m, watch as V, nextTick as A, onMounted as T, onBeforeUnmount as E, createElementBlock as h, openBlock as y, normalizeClass as p, createElementVNode as i, createCommentVNode as L, renderSlot as O, onUnmounted as M, createBlock as x, normalizeProps as S, mergeProps as $, Fragment as U, normalizeStyle as H, createVNode as I, unref as N, toDisplayString as X, Teleport as F } from "vue";
+import { P as n } from "../_vars-BV4QQF-p.js";
+import { ScLayzImage as Y } from "./layz-image.mjs";
+const j = ["controls", "poster", "src"], R = /* @__PURE__ */ z({
+  __name: "video-wrapper",
+  props: {
+    class: { default: "" },
+    style: { default: "" },
+    playerButtonClass: { default: "" },
+    playerButtonText: { default: "PLAY" },
+    poster: { default: "" },
+    url: { default: "" },
+    autoPlay: { type: Boolean, default: !0 },
+    playable: { type: Boolean, default: !0 }
+  },
+  setup(v, { expose: a }) {
+    const e = v, b = /xiaomi|miui/i, g = `${n}-player-wrapper`, _ = `${n}-player-is-fullscreen`, C = `${n}-player-close-btn`, w = `${n}-player-icon`, l = m(), s = m(!0), r = m(b.test(navigator.userAgent) ? void 0 : e.url);
+    let o = null;
+    const f = (t) => {
+      var u, c;
+      t.target !== l.value && ((u = l.value) == null || u.pause(), s.value = !!((c = l.value) != null && c.paused));
+    }, d = (t) => {
+      const u = t[0], c = l.value;
+      !c || !e.playable || (u.isIntersecting && e.autoPlay && c.paused ? (c.play().catch(console.warn), s.value = !1) : !u.isIntersecting && !c.paused && (c.pause(), s.value = !0));
+    }, B = () => {
+      e.autoPlay && e.playable && l.value && (o = new IntersectionObserver(d, {
+        threshold: 0.25
+        // 可根据需求调整可见区域百分比
+      }), o.observe(l.value));
+    }, k = () => {
+      o == null || o.disconnect(), o = null;
+    };
+    return V(
+      () => e.playable,
+      () => {
+        k(), A(() => B());
+      }
+    ), a({
+      play() {
+        l.value.play(), s.value = l.value.paused;
+      }
+    }), T(() => {
+      b.test(navigator.userAgent) && fetch(e.url).then((t) => {
+        if (!t.ok)
+          throw new Error(`HTTP error! status: ${t.status}`);
+        return t.blob();
+      }).then((t) => {
+        r.value = URL.createObjectURL(t);
+      }).catch((t) => {
+        console.error("获取视频失败：", t);
+      }), B();
+    }), E(() => {
+      k();
+    }), (t, u) => (y(), h(
+      "div",
+      {
+        class: p([g, e.class, !s.value && !e.autoPlay && _])
+      },
+      [
+        i("video", {
+          ref_key: "videoRef",
+          ref: l,
+          muted: "",
+          loop: "",
+          playsinline: "",
+          "webkit-playsinline": "",
+          "x5-video-player-type": "h5",
+          controls: !s.value && !e.autoPlay,
+          poster: e.poster,
+          src: r.value
+        }, null, 8, j),
+        !s.value && !e.autoPlay ? (y(), h("button", {
+          key: 0,
+          class: p(C),
+          onClick: f
+        }, [
+          O(t.$slots, "close", {}, () => [
+            (y(), h("svg", {
+              class: p(w),
+              viewBox: "0 0 1121 1024",
+              version: "1.1",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "200",
+              height: "200"
+            }, [...u[0] || (u[0] = [
+              i(
+                "path",
+                {
+                  d: "M1040.725333 49.005714l-965.485714 965.436953-48.420571-48.469334L992.256 0.487619l48.469333 48.518095z",
+                  fill: "#ffffff"
+                },
+                null,
+                -1
+                /* CACHED */
+              ),
+              i(
+                "path",
+                {
+                  d: "M1040.725333 1014.442667l-965.485714-965.485715 48.518095-48.420571L1089.194667 965.973333l-48.469334 48.469334z",
+                  fill: "#ffffff"
+                },
+                null,
+                -1
+                /* CACHED */
+              )
+            ])]))
+          ])
+        ])) : L("v-if", !0)
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+}), P = /* @__PURE__ */ z({
+  __name: "video",
+  props: {
+    class: { default: "" },
+    style: { default: "" },
+    playerButtonClass: { default: "" },
+    playerButtonText: { default: "PLAY" },
+    poster: { default: "" },
+    url: { default: "" },
+    autoPlay: { type: Boolean, default: !0 },
+    playable: { type: Boolean, default: !0 }
+  },
+  setup(v) {
+    const a = v, e = `${n}-player-wrapper`, b = `${n}-player-poster`, g = `${n}-player-btn`, _ = `${n}-player-btn-text`, C = `${n}-player-icon`, w = m(), l = m(), s = (f) => {
+      var d;
+      f.stopPropagation(), (d = l.value) == null || d.play();
+    };
+    let r = null;
+    const o = m(!1);
+    return T(() => {
+      r = new IntersectionObserver(
+        ([f]) => {
+          f.isIntersecting && (o.value = !0);
+        },
+        { threshold: 0.1 }
+      ), w.value && r.observe(w.value);
+    }), M(() => {
+      r == null || r.disconnect();
+    }), (f, d) => a.autoPlay ? (y(), x(
+      R,
+      S($({ key: 0 }, a)),
+      null,
+      16
+      /* FULL_PROPS */
+    )) : (y(), h(
+      U,
+      { key: 1 },
+      [
+        i(
+          "div",
+          {
+            class: p([e, a.class]),
+            style: H(a.style)
+          },
+          [
+            I(N(Y), {
+              class: p(b),
+              src: a.poster,
+              alt: "AITO"
+            }, null, 8, ["src"]),
+            i(
+              "button",
+              {
+                ref_key: "btnRef",
+                ref: w,
+                class: p([g, a.playerButtonClass]),
+                onClick: s
+              },
+              [
+                O(f.$slots, "play", {}, () => [
+                  (y(), h("svg", {
+                    class: p(C),
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "200",
+                    height: "200"
+                  }, [...d[0] || (d[0] = [
+                    i(
+                      "path",
+                      {
+                        d: "M671.744 495.616c20.48 12.288 20.48 36.864 0 49.152l-217.088 126.976c-20.48 12.288-45.056-4.096-45.056-24.576V393.216c0-20.48 24.576-36.864 45.056-24.576l217.088 126.976z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    ),
+                    i(
+                      "path",
+                      {
+                        d: "M512 1011.712C237.568 1011.712 12.288 786.432 12.288 512 12.288 237.568 237.568 12.288 512 12.288c274.432 0 499.712 225.28 499.712 499.712 0 274.432-225.28 499.712-499.712 499.712z m0-958.464c-253.952 0-458.752 204.8-458.752 458.752s204.8 458.752 458.752 458.752 458.752-204.8 458.752-458.752-204.8-458.752-458.752-458.752z",
+                        fill: "#ffffff"
+                      },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
+                  ])])),
+                  i(
+                    "span",
+                    {
+                      class: p(_)
+                    },
+                    X(a.playerButtonText),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ],
+              2
+              /* CLASS */
+            )
+          ],
+          6
+          /* CLASS, STYLE */
+        ),
+        o.value ? (y(), x(F, {
+          key: 0,
+          to: "body"
+        }, [
+          I(
+            R,
+            $(a, {
+              ref_key: "vwRef",
+              ref: l
+            }),
+            null,
+            16
+            /* FULL_PROPS */
+          )
+        ])) : L("v-if", !0)
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    ));
+  }
+});
+P.install = (v) => (v.component("ScVideo", P), v);
+const q = P;
+export {
+  q as ScVideo
+};

package/dist/global.d.ts

@@ -0,0 +1,22 @@
+declare module 'vue' {
+  // GlobalComponents for Volar
+  export interface GlobalComponents {
+    ScVideo: typeof import("@seresweb/website-component")["ScVideo"];
+    ScTabIndicator: typeof import("@seresweb/website-component")["ScTabIndicator"];
+    ScSwiperVehicle: typeof import("@seresweb/website-component")["ScSwiperVehicle"];
+    ScSwiperNormal: typeof import("@seresweb/website-component")["ScSwiperNormal"];
+    ScRadio: typeof import("@seresweb/website-component")["ScRadio"];
+    ScParameterBox: typeof import("@seresweb/website-component")["ScParameterBox"];
+    ScLayzImage: typeof import("@seresweb/website-component")["ScLayzImage"];
+    ScImageIndicator: typeof import("@seresweb/website-component")["ScImageIndicator"];
+    ScHorizontalViewer: typeof import("@seresweb/website-component")["ScHorizontalViewer"];
+    ScGradualHighlight: typeof import("@seresweb/website-component")["ScGradualHighlight"];
+    ScDropdown: typeof import("@seresweb/website-component")["ScDropdown"];
+    ScDrawer: typeof import("@seresweb/website-component")["ScDrawer"];
+    ScAnimatedNumber: typeof import("@seresweb/website-component")["ScAnimatedNumber"];
+    ScAccordionInfoPanel: typeof import("@seresweb/website-component")["ScAccordionInfoPanel"];
+    ScInput: typeof import("@seresweb/website-component")["ScInput"];
+  }
+}
+
+export {};