@xwadex/fesd 0.0.52 → 0.0.53

package/dist/image-preview-bundle.js

@@ -334,9 +334,9 @@ const ze = {
     return n;
   }
   return JSON.parse(n);
-}, L = (n, i) => {
+}, A = (n, i) => {
   console.warn(`[${n} warn]: ${i}`);
-}, Fe = (n, i) => {
+}, Ye = (n, i) => {
   console.error(`[${n} error]: ${i}`);
 }, j = {
   on(n, i) {
@@ -384,15 +384,15 @@ const ze = {
   let y = 0;
   if (T === 0)
     return;
-  const D = (A) => {
+  const D = (L) => {
     const z = k(t);
-    i && i.emit(A, z), !i && n.on && G(n.on[A]) && n.on[A](z);
+    i && i.emit(L, z), !i && n.on && G(n.on[L]) && n.on[L](z);
   };
   D("beforeScroll");
   const U = () => {
     y += C;
-    const A = Os[r](y, v, T, o);
-    m[u] = A, y < o && requestAnimationFrame(U), y >= o && D("afterScroll");
+    const L = Os[r](y, v, T, o);
+    m[u] = L, y < o && requestAnimationFrame(U), y >= o && D("afterScroll");
   };
   requestAnimationFrame(U);
 };
@@ -474,15 +474,15 @@ const { MODALS: O } = window, Ns = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var wt, ci, Tt, di, Et, ui, At, hi, Lt, pi;
+var wt, ci, Tt, di, Et, ui, Lt, hi, At, pi;
 class li extends HTMLElement {
   constructor() {
     super();
     h(this, wt);
     h(this, Tt);
     h(this, Et);
-    h(this, At);
     h(this, Lt);
+    h(this, At);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -491,7 +491,7 @@ class li extends HTMLElement {
   attributeChangedCallback(t, e, s) {
     switch (t) {
       case ":state":
-        d(this, Lt, pi).call(this, s);
+        d(this, At, pi).call(this, s);
         break;
     }
   }
@@ -512,7 +512,7 @@ wt = new WeakSet(), ci = function() {
   const { ATTRS: t } = P;
   this.__events__ = {}, this.getAttribute(":state") || this.setAttribute(":state", "close");
   const e = this.getAttribute(t.id) || Ms();
-  this.getAttribute(t.id) || (L(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), O[e] && L(`the ${t.id} "${e}" is already be used.`), O[e] = this, d(this, Tt, di).call(this);
+  this.getAttribute(t.id) || (A(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), O[e] && A(`the ${t.id} "${e}" is already be used.`), O[e] = this, d(this, Tt, di).call(this);
 }, Tt = new WeakSet(), di = function() {
   this.childDom = this.childNodes, this.template = Ns(this), this.innerHTML = "", this.append(this.template), d(this, Et, ui).call(this);
 }, Et = new WeakSet(), ui = function() {
@@ -522,8 +522,8 @@ wt = new WeakSet(), ci = function() {
       x: "hidden"
     },
     autoUpdate: !0
-  }), window.modalScroll = this.__scroller__, d(this, At, hi).call(this);
-}, At = new WeakSet(), hi = function() {
+  }), window.modalScroll = this.__scroller__, d(this, Lt, hi).call(this);
+}, Lt = new WeakSet(), hi = function() {
   var a, r, l;
   const t = this, { ATTRS: e } = P, { close: s, destroy: o } = e;
   (a = t.querySelectorAll(`[${s}]`)) == null || a.forEach((c) => {
@@ -539,7 +539,7 @@ wt = new WeakSet(), ci = function() {
   }), (l = t.querySelector("[stop-propagation]")) == null || l.addEventListener("click", function(c) {
     c.stopPropagation();
   });
-}, Lt = new WeakSet(), pi = function(t) {
+}, At = new WeakSet(), pi = function(t) {
   const { __scroller__: e } = this;
   if (t === "open") {
     if (this.style.display = "block", e) {
@@ -578,7 +578,7 @@ const { MODALS: We } = window, ht = {}, mi = (n, i, ...t) => {
   e && G(e) && e.apply(n, t);
 }, gi = (n, ...i) => {
   n && G(n) && n.apply(V, i);
-}, Ye = (n, i) => {
+}, Fe = (n, i) => {
   const { target: t } = n, e = We[t] || k(n.target);
   e && fi(n, i), e || Ps(n, i);
 }, fi = (n, i) => {
@@ -605,7 +605,7 @@ const { MODALS: We } = window, ht = {}, mi = (n, i, ...t) => {
 }, Ps = async (n, i) => {
   const { target: t, route: e, container: s, on: o, e: a } = n;
   if (!e)
-    return L("modal4", "cannot find target or data-modal-route is not defined");
+    return A("modal4", "cannot find target or data-modal-route is not defined");
   const r = (l, ...c) => {
     i && (i.emit(l, ...c), mi(i, o[l], ...c)), i || gi(o[l], ...c);
   };
@@ -644,7 +644,7 @@ const B = class B {
   /** static method 'open' */
   static open(i) {
     const { SETTINGS: t } = P, e = Object.assign({}, t, { on: {} }, i);
-    Ye(e);
+    Fe(e);
   }
   /** static method 'defineMethods' */
   static defineMethods(i) {
@@ -671,7 +671,7 @@ tt = new WeakSet(), xe = function() {
   }), this.emit("init");
 }, Dt = new WeakSet(), bi = function(i) {
   const { defaultOptions: t, eventHandler: e, instance: s } = this.modal, o = qs(this.getAttribute("data-modal-on"));
-  o && typeof o != "object" && L("modal4", "data-modal-on must be a json string.");
+  o && typeof o != "object" && A("modal4", "data-modal-on must be a json string.");
   const a = {
     target: this.getAttribute("data-modal-target") || t.target,
     action: this.getAttribute("data-modal-action") || t.action,
@@ -682,7 +682,7 @@ tt = new WeakSet(), xe = function() {
   };
   this.removeEventListener("click", e), setTimeout(() => {
     this.addEventListener("click", e);
-  }, 200), Ye(a, s);
+  }, 200), Fe(a, s);
 };
 let V = B;
 Object.assign(V.prototype, j);
@@ -758,7 +758,7 @@ const Bs = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var xt, Ti, $t, Ei, _t, Ai, Ct, Li, Ht, Si, Mt, Di, It, ki, qt, xi, Ot, $i, Nt, _i;
+var xt, Ti, $t, Ei, _t, Li, Ct, Ai, Ht, Si, Mt, Di, It, ki, qt, xi, Ot, $i, Nt, _i;
 class Ws extends HTMLElement {
   constructor() {
     super();
@@ -817,13 +817,13 @@ class Ws extends HTMLElement {
 }
 xt = new WeakSet(), Ti = function() {
   if (!this.getAttribute("video-id")) {
-    L("videoPlayer", "video-render needs a ['video-id'] attribute to creat player.");
+    A("videoPlayer", "video-render needs a ['video-id'] attribute to creat player.");
     return;
   }
   this.videoId = this.getAttribute("video-id"), this.videoType = this.getAttribute("video-type"), this.videoMode = this.getAttribute("video-mode"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), this.videoInboxImg = this.getAttribute("video-inbox-img"), d(this, $t, Ei).call(this);
 }, $t = new WeakSet(), Ei = function() {
-  this.childDom = this.childNodes, this.template = Bs(this), this.innerHTML = "", this.append(this.template), d(this, _t, Ai).call(this);
-}, _t = new WeakSet(), Ai = function() {
+  this.childDom = this.childNodes, this.template = Bs(this), this.innerHTML = "", this.append(this.template), d(this, _t, Li).call(this);
+}, _t = new WeakSet(), Li = function() {
   const { videoType: t, videoMode: e } = this;
   let s = "";
   function o(a) {
@@ -849,7 +849,7 @@ xt = new WeakSet(), Ti = function() {
     case "youtubeAPI":
       break;
     case "youtube":
-      document.body.wd_youtube == !1 ? o("video-player") : s = d(this, Ct, Li).call(this);
+      document.body.wd_youtube == !1 ? o("video-player") : s = d(this, Ct, Ai).call(this);
       break;
     case "youkuAPI":
       break;
@@ -875,7 +875,7 @@ xt = new WeakSet(), Ti = function() {
       break;
   }
   this.querySelector(".player-wrapper").insertAdjacentHTML(S.prepend, s);
-}, Ct = new WeakSet(), Li = function() {
+}, Ct = new WeakSet(), Ai = function() {
   const { videoId: t, autoplay: e, startTime: s } = this;
   return `<iframe src="https://www.youtube.com/embed/${t}?rel=0&${e === "on" ? "autoplay=1" : ""}&start=${s}&mute=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen="0" volumn="0" allow="${e === "on" ? "autoplay;" : ""} encrypted-media; gyroscope; picture-in-picture;"></iframe>`;
 }, Ht = new WeakSet(), Si = function() {
@@ -1080,7 +1080,7 @@ function Xn(n) {
     });
   });
 }
-function Fn(n) {
+function Yn(n) {
   const i = n.el, t = f(i).find(".swiper-slide-active"), e = f(t).find("video").get(0), s = f(i).find(".swiper-slide video");
   n.autoplay.stop(), f(e).off("ended"), e ? (s.each((o, a) => {
     a.currentTime = 0;
@@ -1088,7 +1088,7 @@ function Fn(n) {
     n.slideNext();
   }), e.play()) : n.params.autoplay.enabled && n.autoplay.start();
 }
-function Yn() {
+function Fn() {
   f(".number-grow").each(function(n, i) {
     const t = f(i), o = t.attr("data-num").replace(/(\d)(?=(?:\d{3})+$)/g, "$1,").split(""), a = () => {
       let r = "";
@@ -1141,7 +1141,7 @@ const X = class X {
     h(this, st);
     h(this, zt);
     if (!dt(i) && !Se(i) && !ut(i)) {
-      Fe("video4", `找不到該物件 -> ${i}`);
+      Ye("video4", `找不到該物件 -> ${i}`);
       return;
     }
     this.__storage__ = {
@@ -1172,16 +1172,16 @@ it = new WeakSet(), Ce = function() {
 }, Pt = new WeakSet(), Ii = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, zt, Oi).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), Ue(e.video.params) && !Xs(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, jt, qi).call(this, e)), Ue(e.video.params) || Fe("video4", "無法取得影片 ID");
+    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, zt, Oi).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), Ue(e.video.params) && !Xs(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, jt, qi).call(this, e)), Ue(e.video.params) || Ye("video4", "無法取得影片 ID");
   }), this.emit("init");
 }, jt = new WeakSet(), qi = function(i) {
   const { LAYOUT: t } = this.options, e = i.video.params, { $selector: s, videoLayoutNo: o, videoId: a, videoType: r, videoMode: l, videoButton: c, videoCover: u, videoHighQualityPic: p } = e;
   if (l === "onBox" || l === "inBox") {
     let g = null;
     if (u === "on") {
-      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), L("video4", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構"));
+      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), A("video4", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構"));
       const m = s.querySelector("img"), v = (m == null ? void 0 : m.getAttribute("src")) || (m == null ? void 0 : m.getAttribute("data-src")), w = t[o] ? t[o] : t[0] || "";
-      if (w ? m.insertAdjacentHTML(S.after, w) : L("video4", `找不到對應的 LAYOUT 設定 (No: ${o})，且無預設樣式。`), !v && r == "youtube")
+      if (w ? m.insertAdjacentHTML(S.after, w) : A("video4", `找不到對應的 LAYOUT 設定 (No: ${o})，且無預設樣式。`), !v && r == "youtube")
         p == "on" ? m.setAttribute("src", `https://img.youtube.com/vi/${a}/maxresdefault.jpg `) : m.setAttribute("src", `https://img.youtube.com/vi/${a}/0.jpg`);
       else if (!v && r == "vimeo")
         m.setAttribute("src", `https://vumbnail.com/${a}_large.jpg`);
@@ -1199,13 +1199,13 @@ it = new WeakSet(), Ce = function() {
           m.setAttribute("src", `${T}`);
         }).catch(function(b) {
           console.log("error");
-        }) : L("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
+        }) : A("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
     }
-    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || L("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, st, He), g.addEventListener("click", g.video.eventHandler);
+    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || A("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, st, He), g.addEventListener("click", g.video.eventHandler);
   } else if (l === "onPage") {
     let g = null;
     if (u == "on") {
-      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), L("video", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構"));
+      i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(S.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), A("video", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構"));
       const m = s.querySelector("img");
       m.insertAdjacentHTML(S.after, t[o]);
       const v = (m == null ? void 0 : m.getAttribute("src")) || (m == null ? void 0 : m.getAttribute("data-src"));
@@ -1214,7 +1214,7 @@ it = new WeakSet(), Ce = function() {
         m.setAttribute("src", `${b}`);
       }).catch(function(w) {
         console.log("error");
-      }) : v || L("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片"), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || L("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
+      }) : v || A("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片"), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || A("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
     } else {
       s.innerHTML = pt(e);
       return;
@@ -1254,15 +1254,15 @@ it = new WeakSet(), Ce = function() {
           var U;
           const D = y.querySelectorAll("[data-overlayscrollbars-viewport]");
           if (b.update(), Hi([...D]), o == "onBox" && u == "instagram") {
-            const A = document.querySelector("[video-template] .modal-content");
+            const L = document.querySelector("[video-template] .modal-content");
             new ResizeObserver((Ge) => {
-              Ge[0].contentRect.height > 50 && A.classList.add("active");
-            }).observe(A);
+              Ge[0].contentRect.height > 50 && L.classList.add("active");
+            }).observe(L);
           }
           if (o == "inBox") {
-            const A = g || ((U = s.querySelector("img")) == null ? void 0 : U.src);
+            const L = g || ((U = s.querySelector("img")) == null ? void 0 : U.src);
             let z;
-            A == null ? z = `
+            L == null ? z = `
                   <div
                     class="photo-box"
                     video-target
@@ -1286,14 +1286,14 @@ it = new WeakSet(), Ce = function() {
                   >
                   <picture>
                   <source
-                    srcset="${A}"
+                    srcset="${L}"
                     type="image/webp"
                   />
                   <source
-                    srcset="${A}"
+                    srcset="${L}"
                     type="image/jpeg"
                   />
-                  <img src="${A}" alt="" />
+                  <img src="${L}" alt="" />
                   </picture>
                 </div>`, y.querySelector(".video-content").insertAdjacentHTML(S.prepend, z);
             const Re = y.querySelectorAll("[video-target]");
@@ -1346,7 +1346,7 @@ it = new WeakSet(), Ce = function() {
 let _e = X;
 Object.assign(_e.prototype, j);
 customElements.define("video-player", Ws);
-const Fs = {
+const Ys = {
   "zh-tw": {
     臺北市: [
       ["中正區", "100"],
@@ -2177,7 +2177,7 @@ const Fs = {
   }
 };
 let Q;
-const Ys = (n) => {
+const Fs = (n) => {
   const { TEMPLATE: i } = Be, { childDom: t } = n.s, e = document.createElement("div"), s = n.classList.contains("filter"), o = n.getAttribute("filter-placeholder"), a = n.getAttribute("d4-icon"), r = n.getAttribute("custom-template");
   e.innerHTML = i(
     s,
@@ -2196,7 +2196,7 @@ const Ys = (n) => {
   const i = (t = n.getAttribute("control-elements")) == null ? void 0 : t.split(",");
   i && i.forEach((e) => {
     const s = document.querySelector(e);
-    s || L("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && I(s, [...s.s.allLi].indexOf(s.s.activeLi)));
+    s || A("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && I(s, [...s.s.allLi].indexOf(s.s.activeLi)));
   });
 }, I = (n, i) => {
   const t = n.getAttribute("d4-placeholder"), e = n.querySelectorAll(".dropdown-list li");
@@ -2252,7 +2252,7 @@ const Ys = (n) => {
   }
 }, Js = (n) => {
   const i = n.s.cityLang;
-  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (Q = JSON.parse(f("#newCityData").val())[0], console.log([0])) : Q = Fs, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(Q[i]).forEach((t) => {
+  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (Q = JSON.parse(f("#newCityData").val())[0], console.log([0])) : Q = Ys, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(Q[i]).forEach((t) => {
     const e = document.createElement("li");
     e.textContent = t, e.setAttribute("data-option", t), n.s.dropdownEl.querySelector(".dropdown-list").append(e);
   }), n.s.allLi = n.querySelectorAll(".dropdown-list li"));
@@ -2360,7 +2360,7 @@ class Pi extends HTMLElement {
 Bt = new WeakSet(), ji = function() {
   this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Wt, zi).call(this);
 }, Wt = new WeakSet(), zi = function() {
-  this.s.childDom = this.childNodes, this.s.template = Ys(this), this.innerHTML = "", this.append(this.s.template), d(this, Gt, Bi).call(this);
+  this.s.childDom = this.childNodes, this.s.template = Fs(this), this.innerHTML = "", this.append(this.s.template), d(this, Gt, Bi).call(this);
 }, Gt = new WeakSet(), Bi = function() {
   var s;
   const t = this;
@@ -2623,13 +2623,13 @@ function Ks(n) {
     i && clearTimeout(i), i = setTimeout(n, 200, t);
   };
 }
-var Xt, Gi, Ft, Ri, Yt, Xi, Ut, Fi;
+var Xt, Gi, Yt, Ri, Ft, Xi, Ut, Yi;
 class tn extends HTMLElement {
   constructor() {
     super();
     h(this, Xt);
-    h(this, Ft);
     h(this, Yt);
+    h(this, Ft);
     h(this, Ut);
     this.initialize = !1;
   }
@@ -2665,8 +2665,8 @@ Xt = new WeakSet(), Gi = function() {
     // true / false
     gap: Number(this.getAttribute("gap")) || M.SETTINGS.gap
   };
-  this.s = {}, this.s.options = t, this.s.nowDuration = Je(this), Vs(this), d(this, Ft, Ri).call(this);
-}, Ft = new WeakSet(), Ri = function() {
+  this.s = {}, this.s.options = t, this.s.nowDuration = Je(this), Vs(this), d(this, Yt, Ri).call(this);
+}, Yt = new WeakSet(), Ri = function() {
   const { direction: t, continual: e, gap: s } = this.s.options;
   switch (t) {
     case "left":
@@ -2678,8 +2678,8 @@ Xt = new WeakSet(), Gi = function() {
       e ? this.style.cssText = `height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;` : this.style.cssText = `min-height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;`;
       break;
   }
-  d(this, Yt, Xi).call(this), d(this, Ut, Fi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
-}, Yt = new WeakSet(), Xi = function() {
+  d(this, Ft, Xi).call(this), d(this, Ut, Yi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
+}, Ft = new WeakSet(), Xi = function() {
   const t = this, { direction: e, behavior: s, duration: o, autoplay: a, pauseOnMouseenter: r, continual: l } = t.s.options;
   let c;
   function u() {
@@ -2744,7 +2744,7 @@ Xt = new WeakSet(), Gi = function() {
   }), t.addEventListener("mouseleave", function() {
     t.s.animation && r && t.s.animation.playState === "paused" && t.play();
   });
-}, Ut = new WeakSet(), Fi = function() {
+}, Ut = new WeakSet(), Yi = function() {
   const t = this;
   function e() {
     const s = t.s.animation.startTime, o = t.s.cloneAnimation ? t.s.cloneAnimation.startTime : null;
@@ -2782,7 +2782,7 @@ const Ze = function(n, i) {
   }
   n.classList.remove(i);
 };
-var Jt, Yi, Zt, Ui, Qt, Ji, nt, Me, F, ft, Vt, Zi;
+var Jt, Fi, Zt, Ui, Qt, Ji, nt, Me, Y, ft, Vt, Zi;
 class Qe {
   constructor(i) {
     // 初始化
@@ -2794,34 +2794,31 @@ class Qe {
     // 卷軸位置判斷
     h(this, nt);
     // 隱藏按鈕判斷
-    h(this, F);
+    h(this, Y);
     // 選項事件綁定
     h(this, Vt);
-    this.$element = i, this.option = i.s.option.drag, this._didInitialScroll = !1, d(this, Jt, Yi).call(this);
+    this.$element = i, this.option = i.s.option.drag, this._didInitialScroll = !1, d(this, Jt, Fi).call(this);
   }
   // 更新 active 位置
   update(i = !1) {
     const t = this.$element.querySelector(".wrapper"), e = t == null ? void 0 : t.querySelector(".active");
     if (!e || !t)
       return;
-    const s = t.querySelectorAll(".item"), o = e === s[0], a = e === s[s.length - 1];
-    let r = "center";
-    o ? r = "start" : a && (r = "end");
-    const l = () => {
-      e.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: r
+    const s = () => {
+      const o = t.getBoundingClientRect(), a = e.getBoundingClientRect(), r = o.left + o.width / 2, c = a.left + a.width / 2 - r, u = t.scrollLeft + c;
+      t.scrollTo({
+        left: u,
+        behavior: "smooth"
       });
     };
     if (i && !this._didInitialScroll) {
-      this._didInitialScroll = !0, setTimeout(l, 250);
+      this._didInitialScroll = !0, setTimeout(s, 250);
       return;
     }
-    l();
+    s();
   }
 }
-Jt = new WeakSet(), Yi = function() {
+Jt = new WeakSet(), Fi = function() {
   var s, o, a, r;
   const i = this;
   if (!i.$element)
@@ -2830,7 +2827,7 @@ Jt = new WeakSet(), Yi = function() {
   let t = !1;
   const e = () => {
     t || (requestAnimationFrame(() => {
-      d(this, nt, Me).call(this), d(this, F, ft).call(this), t = !1;
+      d(this, nt, Me).call(this), d(this, Y, ft).call(this), t = !1;
     }), t = !0);
   };
   i.$wrapper.removeEventListener("scroll", e), i.$wrapper.addEventListener("scroll", e), window.removeEventListener("resize", e), window.addEventListener("resize", e), (i.option.draggable || i.$element.s.type == "collapse") && d(s = i, Qt, Ji).call(s), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
@@ -2844,7 +2841,7 @@ Jt = new WeakSet(), Yi = function() {
         </div>
       </div>`
   ), i.$button = (o = i.$container) == null ? void 0 : o.querySelectorAll(".button"), d(a = i, Zt, Ui).call(a)), d(r = i, Vt, Zi).call(r), i.update(!0), requestAnimationFrame(() => {
-    d(this, nt, Me).call(this), d(this, F, ft).call(this);
+    d(this, nt, Me).call(this), d(this, Y, ft).call(this);
   });
 }, Zt = new WeakSet(), Ui = function() {
   const i = this, { $wrapper: t, $button: e } = i, s = function() {
@@ -2854,7 +2851,7 @@ Jt = new WeakSet(), Yi = function() {
       behavior: "smooth"
     }), setTimeout(() => {
       var r;
-      d(r = i, F, ft).call(r);
+      d(r = i, Y, ft).call(r);
     }, 100);
   };
   e.forEach((o) => {
@@ -2893,7 +2890,7 @@ Jt = new WeakSet(), Yi = function() {
 }, nt = new WeakSet(), Me = function() {
   const { $container: i, $wrapper: t } = this, e = t.scrollWidth - t.clientWidth, s = Math.round(t.scrollLeft);
   e <= 0 || ($(i, "scrollable"), s == 0 ? ($(t, "start"), _(t, "end")) : s + 1 >= e ? (_(t, "start"), $(t, "end")) : ($(t, "center"), _(t, "start"), _(t, "end")));
-}, F = new WeakSet(), ft = function() {
+}, Y = new WeakSet(), ft = function() {
   const { $wrapper: i, $button: t, $element: e } = this;
   if (!t)
     return;
@@ -2971,7 +2968,7 @@ const sn = (n) => {
   const { type: i, option: t, originalDomString: e } = n.s, s = document.createElement("div");
   return i == "drag" && (s.innerHTML = q.TEMPLATE[i]().trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(S.append, e)), i == "collapse" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.collapse).trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(S.append, e), s.querySelector(".collapse-container .wrapper").insertAdjacentHTML(S.append, e)), i == "dropdown" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.dropdown).trim(), s.querySelector("dropdown-el").insertAdjacentHTML(S.append, e)), s.children;
 };
-var se, es, ne, is, ot, Ie, Y, vt;
+var se, es, ne, is, ot, Ie, F, vt;
 class nn extends HTMLElement {
   constructor() {
     super();
@@ -2980,7 +2977,7 @@ class nn extends HTMLElement {
     // 斷點設定
     h(this, ot);
     // check type
-    h(this, Y);
+    h(this, F);
     this.initialize = !1, this.__events__ = {}, this.s = {}, this.s.originalDomString = this.innerHTML.trim().replace(/\n/g, ""), this.previousWidth = window.innerWidth;
   }
   static get observedAttributes() {
@@ -2992,7 +2989,7 @@ class nn extends HTMLElement {
       case "m4-type":
         if (e === null || e === s)
           return;
-        this.s.type = s, d(this, Y, vt).call(this);
+        this.s.type = s, d(this, F, vt).call(this);
         break;
       case "m4-status":
         if (e === s)
@@ -3032,14 +3029,14 @@ se = new WeakSet(), es = function() {
 }, ot = new WeakSet(), Ie = function() {
   const t = Object.keys(this.s.option.breakpoint);
   if (!t.length) {
-    d(this, Y, vt).call(this);
+    d(this, F, vt).call(this);
     return;
   }
   t.map((e) => Number(e)).sort((e, s) => s - e).some((e) => {
     var s, o, a, r;
-    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, Y, vt).call(this), window.innerWidth >= e;
+    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, F, vt).call(this), window.innerWidth >= e;
   });
-}, Y = new WeakSet(), vt = function() {
+}, F = new WeakSet(), vt = function() {
   var o;
   const { type: t } = this.s;
   this.innerHTML = "", [...sn(this)].forEach((a) => {
@@ -3397,14 +3394,14 @@ function Es() {
   });
 }
 document.addEventListener("click", Es);
-var ct, Pe, Ee, As, Ae, Ls, Le, Ss;
+var ct, Pe, Ee, Ls, Le, As, Ae, Ss;
 class cn extends HTMLElement {
   constructor() {
     super();
     h(this, ct);
     h(this, Ee);
-    h(this, Ae);
     h(this, Le);
+    h(this, Ae);
     this.initialize = !1;
   }
   connectedCallback() {
@@ -3430,13 +3427,13 @@ ct = new WeakSet(), Pe = function() {
     hover: this.getAttribute("r4-hover") ? e(this.getAttribute("r4-hover")) : t.hover,
     click: this.getAttribute("r4-hover-click") ? e(this.getAttribute("r4-hover-click")) : t.click
   };
-  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, Ee, As).call(this);
-}, Ee = new WeakSet(), As = function() {
-  d(this, Ae, Ls).call(this), d(this, Le, Ss).call(this), this.classList.add("r4-initialize");
-}, Ae = new WeakSet(), Ls = function() {
+  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, Ee, Ls).call(this);
+}, Ee = new WeakSet(), Ls = function() {
+  d(this, Le, As).call(this), d(this, Ae, Ss).call(this), this.classList.add("r4-initialize");
+}, Le = new WeakSet(), As = function() {
   const t = this, e = document.createElement("i");
   e.classList.add("hover-ball"), e.style.transitionDuration = `${t.s.options.speed}ms`, t.appendChild(e);
-}, Le = new WeakSet(), Ss = function() {
+}, Ae = new WeakSet(), Ss = function() {
   const t = this.querySelector("i.hover-ball"), e = this;
   e.addEventListener("click", function(a) {
     a.stopPropagation(), e.s.options.click && ln(a, e);
@@ -3652,8 +3649,8 @@ export {
   cn as R,
   Xn as S,
   ss as T,
-  Fn as U,
-  Yn as V,
+  Yn as U,
+  Fn as V,
   Un as W,
   Jn as X,
   Zn as Y,