golden-logic-ui 1.2.21 → 1.2.23

package/dist/GlMultiItemSlide-CxsiUcTr.js

@@ -0,0 +1,409 @@
+import { createElementBlock as o, openBlock as s, createElementVNode as r, normalizeClass as w, createCommentVNode as d, renderSlot as v, withModifiers as h, Fragment as c, renderList as m } from "vue";
+import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = {
+  props: {
+    elements_to_show_prop: {
+      type: Number,
+      default: 3
+    },
+    hide_arrow: {
+      type: Boolean,
+      default: !1
+    },
+    disable_touch: {
+      type: Boolean,
+      default: !1
+    },
+    direction_property: {
+      type: String,
+      default: "ltr"
+    },
+    slider_arrows_indicators_position: {
+      type: String,
+      default: "arrows_outside_slider"
+    }
+  },
+  data() {
+    return {
+      mutationObserver: null,
+      elementsToShow: this.elements_to_show_prop,
+      dotsNum: 0,
+      currentDot: 1,
+      dotsNavigation: [],
+      touchStartX: 0,
+      isMoving: !1,
+      initialX: 0,
+      initialY: 0,
+      Random_string: this.generateRandomString(6)
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.observeSlotChanges(), this.initSlider(), this.disable_touch || this.movingActions(), window.addEventListener("resize", this.resizeHandler);
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resizeHandler);
+  },
+  beforeUnmount() {
+    this.mutationObserver && this.mutationObserver.disconnect();
+  },
+  methods: {
+    observeSlotChanges() {
+      const i = this.$refs.slotContainer;
+      i && (this.mutationObserver = new MutationObserver((t) => {
+        t.forEach((e) => {
+          this.initSlider();
+        });
+      }), this.mutationObserver.observe(i, {
+        childList: !0,
+        subtree: !0
+      }));
+    },
+    resizeHandler() {
+      this.initSlider();
+    },
+    sliderIndicatorsAction() {
+      let i = "";
+      return this.direction_property === "rtl" && (i += " space-x-reverse "), this.slider_arrows_indicators_position === "arrows_indicators_inside_slider" && (i += " slider_indicators "), i;
+    },
+    sliderContainerAction() {
+      let i = "";
+      return !this.hide_arrow && this.slider_arrows_indicators_position === "arrows_outside_slider" ? i += " w-12/12 xl:w-8/12 xxl:w-8/12 md:w-8/12 sm:w-8/12" : this.slider_arrows_indicators_position !== "arrows_outside_slider" && (i += " w-12/12 "), i;
+    },
+    generateRandomString(i) {
+      let t = "";
+      const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", a = e.length;
+      for (let n = 0; n < i; n++)
+        t += e.charAt(Math.floor(Math.random() * a));
+      return t;
+    },
+    movingActions() {
+    },
+    next() {
+      this.currentDot < this.dotsNavigation.length && (this.currentDot++, this.setDot(this.currentDot));
+    },
+    prev() {
+      this.currentDot > 1 && (this.currentDot--, this.setDot(this.currentDot));
+    },
+    initSlider() {
+      let i = document.getElementById("sliderContainer_" + this.Random_string), t = document.getElementById("mainSliderContainer_" + this.Random_string), e = document.getElementById("slider_" + this.Random_string), a = Array.from(e.querySelectorAll("li")).filter((l) => l.parentNode === e), n = i.clientWidth, u = n / this.elementsToShow;
+      if (this.elementsToShow > 1 ? document.body.clientWidth < 1e3 ? (this.elementsToShow = 1, u = this.hide_arrow ? t.clientWidth : n) : document.body.clientWidth < 1500 && (this.elementsToShow = 2) : (this.elementsToShow = 1, u = this.hide_arrow ? t.clientWidth : n), a.length > 1) {
+        this.dotsNum = this.elementsToShow === 1 ? a.length : a.length - this.elementsToShow + 1;
+        let l = this.elementsToShow === 1 ? u * a.length / this.dotsNum : u * (a.length - this.elementsToShow) / (this.dotsNum - 1);
+        this.dotsNavigation = Array.from({ length: this.dotsNum }, (_, f) => l * f);
+      }
+      e.style.width = `${a.length * u}px`, e.style.transition = "margin", e.style.transitionDuration = "1s", a.forEach((l) => l.style.width = `${u}px`);
+    },
+    setDot(i) {
+      let t = document.getElementById("slider_" + this.Random_string);
+      this.direction_property === "rtl" ? t.style.marginRight = -this.dotsNavigation[i - 1] + "px" : t.style.marginLeft = -this.dotsNavigation[i - 1] + "px", this.currentDot = i;
+    }
+  }
+}, x = ["id"], y = {
+  key: 0,
+  class: "items-center hidden w-2/12 xl:flex xxl:flex md:flex sm:flex arrow_button"
+}, p = { class: "w-full" }, b = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, C = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, S = ["id"], N = ["id"], B = { class: "w-full" }, M = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, j = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, D = { class: "w-full" }, A = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, R = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, T = ["onClick"], E = {
+  key: 1,
+  class: "flex justify-between pl-5 pr-5"
+}, H = ["onClick"], I = {
+  key: 0,
+  class: "flex"
+}, z = { class: "flex items-center" }, L = { class: "w-full" }, O = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, W = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, V = { class: "flex items-center" }, X = { class: "w-full" }, q = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, F = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, G = {
+  key: 1,
+  class: "items-center hidden w-2/12 xl:flex xxl:flex md:flex sm:flex arrow_button"
+}, U = { class: "w-full" }, Y = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, J = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+function K(i, t, e, a, n, u) {
+  return s(), o("div", null, [
+    r("div", {
+      class: w(["", !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? "flex" : "relative block"]),
+      id: "mainSliderContainer_" + n.Random_string
+    }, [
+      n.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? (s(), o("div", y, [
+        r("div", p, [
+          r("button", {
+            class: "p-3 mr-5 rounded-full shadow-lg arrow_button_styles",
+            onClick: t[0] || (t[0] = (l) => u.prev())
+          }, [
+            e.direction_property == "ltr" ? (s(), o("svg", b, t[6] || (t[6] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+              }, null, -1)
+            ]))) : d("", !0),
+            e.direction_property == "rtl" ? (s(), o("svg", C, t[7] || (t[7] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }, null, -1)
+            ]))) : d("", !0)
+          ])
+        ])
+      ])) : d("", !0),
+      r("div", {
+        ref: "slotContainer",
+        class: w(["overflow-hidden flex flex-col gap-3", u.sliderContainerAction()]),
+        id: "sliderContainer_" + n.Random_string
+      }, [
+        r("ul", {
+          class: w(["flex", e.elements_to_show_prop == 1 ? "" : "gap-7"]),
+          id: "slider_" + n.Random_string
+        }, [
+          n.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_indicators_inside_slider" ? (s(), o("div", {
+            key: 0,
+            class: w(["items-center justify-center hidden arrow_button xl:flex xxl:flex md:flex sm:flex", e.direction_property == "rtl" ? "arrow_button_next" : "arrow_button_prev"])
+          }, [
+            r("div", B, [
+              r("button", {
+                class: "p-3 rounded-full shadow-lg arrow_button_styles",
+                onClick: t[1] || (t[1] = h((l) => u.prev(), ["stop"]))
+              }, [
+                e.direction_property == "ltr" ? (s(), o("svg", M, t[8] || (t[8] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                  }, null, -1)
+                ]))) : d("", !0),
+                e.direction_property == "rtl" ? (s(), o("svg", j, t[9] || (t[9] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                  }, null, -1)
+                ]))) : d("", !0)
+              ])
+            ])
+          ], 2)) : d("", !0),
+          v(i.$slots, "default", {}, void 0, !0),
+          n.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_indicators_inside_slider" ? (s(), o("div", {
+            key: 1,
+            class: w(["items-center justify-center hidden xl:flex xxl:flex md:flex sm:flex arrow_button", e.direction_property == "rtl" ? "arrow_button_prev" : "arrow_button_next"])
+          }, [
+            r("div", D, [
+              r("button", {
+                class: "p-3 rounded-full shadow-lg arrow_button_styles",
+                onClick: t[2] || (t[2] = h((l) => u.next(), ["stop"]))
+              }, [
+                e.direction_property == "ltr" ? (s(), o("svg", A, t[10] || (t[10] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                  }, null, -1)
+                ]))) : d("", !0),
+                e.direction_property == "rtl" ? (s(), o("svg", R, t[11] || (t[11] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                  }, null, -1)
+                ]))) : d("", !0)
+              ])
+            ])
+          ], 2)) : d("", !0)
+        ], 10, N),
+        e.slider_arrows_indicators_position != "arrows_indicators_below_slider" ? (s(), o("div", {
+          key: 0,
+          class: w(["flex justify-center mb-1 space-x-1", u.sliderIndicatorsAction()])
+        }, [
+          (s(!0), o(c, null, m(n.dotsNum, (l) => (s(), o("button", {
+            role: "button",
+            class: w(["gl-dot", { active: n.currentDot == l }]),
+            key: l,
+            onClick: (_) => u.setDot(l)
+          }, t[12] || (t[12] = [
+            r("span", null, null, -1)
+          ]), 10, T))), 128))
+        ], 2)) : d("", !0),
+        e.slider_arrows_indicators_position == "arrows_indicators_below_slider" ? (s(), o("div", E, [
+          r("div", {
+            class: w(["flex justify-center mb-1 space-x-1", u.sliderIndicatorsAction()])
+          }, [
+            (s(!0), o(c, null, m(n.dotsNum, (l) => (s(), o("button", {
+              role: "button",
+              class: w(["gl-dot", { active: n.currentDot == l }]),
+              key: l,
+              onClick: (_) => u.setDot(l)
+            }, t[13] || (t[13] = [
+              r("span", null, null, -1)
+            ]), 10, H))), 128))
+          ], 2),
+          n.dotsNum > 0 ? (s(), o("div", I, [
+            r("div", z, [
+              r("div", L, [
+                r("button", {
+                  class: w(["p-3 rounded-full arrow_button_styles", e.direction_property == "rtl" ? "ml-3" : "mr-3"]),
+                  onClick: t[3] || (t[3] = (l) => u.prev())
+                }, [
+                  e.direction_property == "ltr" ? (s(), o("svg", O, t[14] || (t[14] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                    }, null, -1)
+                  ]))) : d("", !0),
+                  e.direction_property == "rtl" ? (s(), o("svg", W, t[15] || (t[15] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                    }, null, -1)
+                  ]))) : d("", !0)
+                ], 2)
+              ])
+            ]),
+            r("div", V, [
+              r("div", X, [
+                r("button", {
+                  class: "p-3 rounded-full arrow_button_styles",
+                  onClick: t[4] || (t[4] = (l) => u.next())
+                }, [
+                  e.direction_property == "ltr" ? (s(), o("svg", q, t[16] || (t[16] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                    }, null, -1)
+                  ]))) : d("", !0),
+                  e.direction_property == "rtl" ? (s(), o("svg", F, t[17] || (t[17] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                    }, null, -1)
+                  ]))) : d("", !0)
+                ])
+              ])
+            ])
+          ])) : d("", !0)
+        ])) : d("", !0)
+      ], 10, S),
+      n.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? (s(), o("div", G, [
+        r("div", U, [
+          r("button", {
+            class: "p-3 ml-5 rounded-full shadow-lg arrow_button_styles",
+            onClick: t[5] || (t[5] = (l) => u.next())
+          }, [
+            e.direction_property == "ltr" ? (s(), o("svg", Y, t[18] || (t[18] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }, null, -1)
+            ]))) : d("", !0),
+            e.direction_property == "rtl" ? (s(), o("svg", J, t[19] || (t[19] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+              }, null, -1)
+            ]))) : d("", !0)
+          ])
+        ])
+      ])) : d("", !0)
+    ], 10, x)
+  ]);
+}
+const Z = /* @__PURE__ */ g(k, [["render", K], ["__scopeId", "data-v-8b2ed8ee"]]);
+export {
+  Z as default
+};