npm - @golstats/gsc-table-scrollable - Versions diffs - 0.0.1 - Mend

@golstats/gsc-table-scrollable 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +29 -0
package/dist/favicon.ico +0 -0
package/dist/gsc-table-scrollable.css +1 -0
package/dist/gsc-table-scrollable.js +751 -0
package/dist/gsc-table-scrollable.umd.cjs +1 -0
package/package.json +35 -0

package/README.md ADDED Viewed

@@ -0,0 +1,29 @@
+# scrollable-table
+This template should help get you started developing with Vue 3 in Vite.
+## Recommended IDE Setup
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+## Customize configuration
+See [Vite Configuration Reference](https://vite.dev/config/).
+## Project Setup
+```sh
+npm install
+```
+### Compile and Hot-Reload for Development
+```sh
+npm run dev
+```
+### Compile and Minify for Production
+```sh
+npm run build
+```

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/gsc-table-scrollable.css ADDED Viewed

@@ -0,0 +1 @@

+ .checkbox[data-v-b6f124d8]{width:var(--7bd9d47b);height:var(--34dc7ddc);display:flex;justify-content:flex-start;align-items:flex-start;cursor:pointer}.checkbox__teams[data-v-b6f124d8]{margin-left:6px;display:flex}.checkbox__teams__logo[data-v-b6f124d8]{height:22px;width:22px;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid .5px #cbee6b;background-color:#0d1d29}.checkbox__teams__logo[data-v-b6f124d8]:first-child{transform:translate(8px)}.checkbox__teams__logo>img[data-v-b6f124d8]{height:18px;width:18px}.checkbox.box-right[data-v-b6f124d8]{flex-direction:row-reverse;justify-content:flex-end}.checkbox.box-top[data-v-b6f124d8]{flex-direction:column;justify-content:flex-start;align-items:center}.checkbox.box-bottom[data-v-b6f124d8]{flex-direction:column-reverse;justify-content:flex-end;align-items:center}.checkbox__box[data-v-b6f124d8]{display:flex;justify-content:center;align-items:center}.checkbox__label[data-v-b6f124d8]{margin:.3em 0;width:var(--7bd9d47b)}.button[data-v-f3ee6b2b],.button-active[data-v-f3ee6b2b]{display:inline-flex;justify-content:center;align-content:center;align-items:center;overflow:none;cursor:pointer!important}.button-target[data-v-f3ee6b2b]{display:inline-block;overflow:hidden;height:var(--9d01acb4);border-width:var(--14e95081)!important;border-style:var(--38fec285)!important;border-color:var(--34353510)!important;border-radius:var(--20d20dc6)!important;width:var(--17130967);background-color:var(--4ccb7d36);justify-content:center;align-content:center;align-items:center;overflow:none;cursor:pointer!important;cursor:var(--5d1e86a2)!important;font-size:var(--ce65d4a2)!important;font-style:var(--fe4ac47a)!important;font-family:var(--f98e44dc)!important}.stats[data-v-f3ee6b2b]{display:inline-flex;width:100%;padding-top:5px;justify-content:left;align-items:center;align-content:center;height:60%}.iconstats[data-v-f3ee6b2b]{width:14px;height:14px;margin-left:var(--93b87770)}.numstats[data-v-f3ee6b2b]{font-family:Poppins-SemiBold;color:#fff;font-size:var(--c7f7beba);margin-left:7px}.leyend[data-v-f3ee6b2b]{display:inline-flex;justify-content:center;align-items:center;align-content:center;font-family:Poppins-Regular;color:#a0a3a5;width:100%;height:15%}.text[data-v-f3ee6b2b],.icon[data-v-f3ee6b2b]{padding:0 4px}.scrollable-row-2[data-v-c362d03a]{display:grid;grid-template-columns:var(--grid-template-columns);width:fit-content}.scrollable-row-totals[data-v-c362d03a]{display:grid;grid-template-columns:var(--grid-template-columns-totals);width:fit-content;transition:all .3s ease}.titles[data-v-c362d03a]{width:100%}.column-title-2[data-v-c362d03a]{height:70px;width:fit-content;display:flex;justify-content:center;align-items:center;background-color:#1e3142;border-bottom:solid 1px rgba(255,255,255,.1);font-family:Poppins-Medium,sans-serif;font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:center;color:#f4f4f4;padding:0 17px}.row[data-v-c362d03a]{height:72px;border-bottom:solid 1px rgba(255,255,255,.1);background-color:#111d28}.row.odd[data-v-c362d03a]{background-color:#172531}.scroll-columns[data-v-c362d03a]{display:flex;flex-direction:column;position:relative}.overlay[data-v-c362d03a]{position:absolute;top:71px;left:0;right:0;bottom:0;background-color:#0009;z-index:1}.underline[data-v-c362d03a]{text-decoration:underline}.data-info[data-v-c362d03a]{display:flex;justify-content:center;align-items:center;font-family:Poppins-Medium,sans-serif;font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:left;color:#f4f4f4}.data-info>svg[data-v-c362d03a]{cursor:pointer}.country-flag[data-v-f240471a]{width:14px;height:auto}.team-info[data-v-f240471a]{display:flex;justify-content:center;align-items:center;gap:12px}.team-info>.team-logo[data-v-f240471a]{width:25px;height:25px}.team-info>.team-logo>img[data-v-f240471a]{width:25px;height:25px}.underline[data-v-f240471a]{text-decoration:underline}.data-info[data-v-f240471a]{display:flex;justify-content:center;align-items:center;font-family:Poppins-Medium,sans-serif;font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:left;color:#f4f4f4}.scrollable-row[data-v-f240471a]{display:grid;grid-template-columns:104px 100px 100px 100px 100px 100px 104px 114px 100px}.titles[data-v-f240471a]{width:100%}.row[data-v-f240471a]{height:72px;border-bottom:solid 1px rgba(255,255,255,.1);background-color:#111d28}.row.odd[data-v-f240471a]{background-color:#172531}.column-title[data-v-f240471a]{height:70px;display:flex;justify-content:center;align-items:center;background-color:#1e3142;border-bottom:solid 1px rgba(255,255,255,.1);font-family:Poppins-Medium,sans-serif;font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:center;color:#f4f4f4}.details-row[data-v-f240471a]{width:var(--width-details);position:absolute;top:74px;left:0;z-index:1;background-color:#111d28;border-bottom:solid 1px rgba(255,255,255,.1)}.details-row>.container[data-v-f240471a]{width:calc(var(--width-details) - 80px);padding:16px 40px 0;display:flex;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap}.details-row>.container>div[data-v-f240471a]{margin-bottom:24px}.details-row__info[data-v-f240471a]{display:flex;align-items:flex-start;font-family:Poppins-Regular,sans-serif;font-weight:500;font-size:12px;color:#fff}.details-row__info>div[data-v-f240471a]{margin:0 40px}.details-row__info span.bold[data-v-f240471a]{font-family:Poppins-Medium,sans-serif}.details-row__buttons[data-v-f240471a]{display:flex;align-items:center;gap:16px;margin-left:40px}.details-row.odd[data-v-f240471a]{background-color:#172531}.static-row[data-v-f240471a]{display:flex;justify-content:flex-start;align-items:center;gap:18px;padding-left:24px;position:relative;transition:all .3s ease}.static-row>.position[data-v-f240471a]{font-family:Montserrat-SemiBold,sans-serif;font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:left;color:#f4f4f4}.static-row>.player-name[data-v-f240471a]{font-family:Poppins-Medium,sans-serif;font-size:12px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.67;letter-spacing:.2px;text-align:left;color:#f4f4f4}.player-photo[data-v-f240471a]{width:32px;height:32px;border-radius:50%;background-color:#fff}.player-photo>img[data-v-f240471a]{width:32px;height:32px;border-radius:50%}.table[data-v-f240471a]{width:100%;height:fit-content;display:flex;justify-content:flex-start;align-items:flex-start}.table__static-column[data-v-f240471a]{width:256px;min-width:256px;background-color:#1e3142}.table__scrollable-columns[data-v-f240471a]{width:100%;overflow-x:scroll}

package/dist/gsc-table-scrollable.js ADDED Viewed

@@ -0,0 +1,751 @@
+import { useCssVars as q, ref as _, computed as P, watch as T, createElementBlock as s, openBlock as i, normalizeClass as h, createElementVNode as l, createCommentVNode as S, normalizeStyle as C, Fragment as B, toDisplayString as n, pushScopeId as I, popScopeId as L, onMounted as G, renderList as V, createVNode as R, createBlock as M, Transition as j, withCtx as K, withDirectives as Q, createTextVNode as z, unref as F, vShow as X, createStaticVNode as Y } from "vue";
+const tt = (t, u) => {
+  const e = t.__vccOpts || t;
+  for (const [d, f] of u)
+    e[d] = f;
+  return e;
+}, et = { key: 1 }, ot = {
+  width: "10",
+  height: "8",
+  viewBox: "0 0 10 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, lt = ["fill"], it = {
+  key: 0,
+  class: "checkbox__teams"
+}, st = { class: "checkbox__teams__logo" }, at = ["src"], nt = { class: "checkbox__teams__logo" }, dt = ["src"], rt = {
+  __name: "GSC-Checkbox",
+  props: {
+    width: {
+      type: String,
+      default: "fit-content"
+    },
+    height: {
+      type: String,
+      default: "fit-content"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    labelWhiteSpace: {
+      type: String,
+      default: "normal"
+    },
+    labelColor: {
+      type: String,
+      default: "white"
+    },
+    fontFamily: {
+      type: String,
+      default: "sans-serif"
+    },
+    labelFontSize: {
+      type: String,
+      default: "12px"
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    justifyContent: {
+      type: String,
+      default: "flex-start"
+    },
+    alignItems: {
+      type: String,
+      default: "center"
+    },
+    boxBackgroundColor: {
+      type: String,
+      default: "#CBEE6B"
+    },
+    boxValueColor: {
+      type: String,
+      default: "#0d1d29"
+    },
+    boxValue: {
+      type: [String, Number],
+      default: ""
+    },
+    boxPosition: {
+      type: String,
+      default: "left",
+      // values can be 'left', 'right', 'top', 'bottom'
+      validator(t) {
+        return ["left", "right", "top", "bottom"].includes(t);
+      }
+    },
+    boxMarginTop: {
+      type: String,
+      default: "0.2em"
+    },
+    boxWidthAndHeight: {
+      type: String,
+      default: "16px"
+    },
+    boxBorderColor: {
+      type: String,
+      default: "#969da2"
+    },
+    boxBorderWidth: {
+      type: String,
+      default: "2px"
+    },
+    boxBorderRadius: {
+      type: String,
+      default: "4px"
+    },
+    boxValueFontSize: {
+      type: String,
+      default: "10px"
+    },
+    boxValueFontFamily: {
+      type: String,
+      default: "sans-serif"
+    },
+    avoidInteraction: {
+      type: Boolean,
+      default: !1
+    },
+    avoidToCheck: {
+      type: Boolean,
+      default: !1
+    },
+    isBoxOnly: {
+      type: Boolean,
+      default: !1
+    },
+    teamsIds: {
+      type: Array,
+      default: () => null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: u }) {
+    const e = t;
+    q((c) => ({
+      "7bd9d47b": t.width,
+      "34dc7ddc": t.height
+    }));
+    const d = _(!1), f = P(() => {
+      const c = {
+        color: e.boxValueColor,
+        "font-family": e.fontFamily,
+        height: e.boxWidthAndHeight,
+        width: e.boxWidthAndHeight,
+        minWidth: e.boxWidthAndHeight,
+        "border-radius": e.boxBorderRadius,
+        "margin-top": e.boxMarginTop
+      };
+      return d.value ? (c["background-color"] = e.boxBackgroundColor, c.border = `solid ${e.boxBorderWidth} ${e.boxBackgroundColor}`) : c.border = `solid ${e.boxBorderWidth} ${e.boxBorderColor}`, c;
+    }), r = P(() => ({
+      "font-family": e.boxValueFontFamily,
+      "font-size": e.boxValueFontSize,
+      color: e.boxValueColor,
+      "line-height": 1
+    })), m = P(() => {
+      const c = {
+        color: e.labelColor,
+        "font-family": e.fontFamily,
+        "font-size": e.labelFontSize,
+        "white-space": e.labelWhiteSpace,
+        "text-align": e.boxPosition === "top" || e.boxPosition === "bottom" ? "center" : e.boxPosition
+      };
+      return (e.boxPosition === "left" || e.boxPosition === "right") && (c[`margin-${e.boxPosition}`] = e.isBoxOnly ? "0" : e.teamsIds ? "8px" : "10px"), c;
+    });
+    T(
+      () => e.modelValue,
+      (c) => {
+        c !== d.value && (d.value = c);
+      },
+      { immediate: !0 }
+    );
+    function w() {
+      e.avoidInteraction || !d.value && e.avoidToCheck || (d.value = !d.value, u("update:modelValue", d.value));
+    }
+    function k(c) {
+      return `${{}.TEAM_LOGOS_URL || "https://golstatsimages.blob.core.windows.net/teams-80/"}${c}.png`;
+    }
+    return (c, O) => (i(), s("div", {
+      class: h(["checkbox", `box-${t.boxPosition}`]),
+      onClick: w
+    }, [
+      l("div", {
+        class: "checkbox__box",
+        style: C(f.value)
+      }, [
+        d.value ? (i(), s(B, { key: 0 }, [
+          e.boxValue ? (i(), s("div", {
+            key: 0,
+            class: "checkbox__box__value",
+            style: C(r.value)
+          }, n(t.boxValue), 5)) : (i(), s("div", et, [
+            (i(), s("svg", ot, [
+              l("path", {
+                d: "M9.77994 1.70133L4.10994 7.37133C3.96994 7.51133 3.77994 7.59133 3.57994 7.59133C3.37994 7.59133 3.18994 7.51133 3.04994 7.37133L0.219941 4.54133C-0.0700586 4.25133 -0.0700586 3.77133 0.219941 3.48133C0.509941 3.19133 0.989941 3.19133 1.27994 3.48133L3.57994 5.78133L8.71994 0.641328C9.00994 0.351328 9.48994 0.351328 9.77994 0.641328C10.0699 0.931328 10.0699 1.40133 9.77994 1.70133Z",
+                fill: t.boxValueColor
+              }, null, 8, lt)
+            ]))
+          ]))
+        ], 64)) : S("", !0)
+      ], 4),
+      t.teamsIds && t.teamsIds.length ? (i(), s("div", it, [
+        l("div", st, [
+          l("img", {
+            src: k(t.teamsIds[0]),
+            alt: ""
+          }, null, 8, at)
+        ]),
+        l("div", nt, [
+          l("img", {
+            src: k(t.teamsIds[1]),
+            alt: ""
+          }, null, 8, dt)
+        ])
+      ])) : S("", !0),
+      l("div", {
+        class: "checkbox__label",
+        style: C(m.value)
+      }, n(t.label), 5)
+    ], 2));
+  }
+}, ct = /* @__PURE__ */ tt(rt, [["__scopeId", "data-v-b6f124d8"]]), ut = (t, u) => {
+  const e = t.__vccOpts || t;
+  for (const [d, f] of u)
+    e[d] = f;
+  return e;
+}, W = {
+  props: {
+    type: { type: Number, default: 0 },
+    value: { type: Boolean, default: !1 },
+    textValue: String,
+    icon: String,
+    iconPosition: { type: String, default: "left" },
+    iconSize: String,
+    fontColor: { type: String, default: "#FFFFFF" },
+    textDecoration: String,
+    fontSize: { type: String, default: "16px" },
+    fontSizeStat: { type: String, default: "16px" },
+    fontStyle: String,
+    fontFamily: { type: String, default: "Poppins-Regular" },
+    height: { type: String, default: "fit-content" },
+    width: { type: String, default: "fit-content" },
+    borderRadius: { type: String, default: "0px" },
+    borderType: { type: String, default: "solid" },
+    borderWidth: { type: Number, default: 0 },
+    borderWidthBtn: { type: String, default: "2px" },
+    borderColor: String,
+    backgroundColor: { type: String, default: "none" },
+    activeBackgroundColor: { type: String, default: "#000000" },
+    activeBorderWidth: { type: Number, default: 2 },
+    activeBorderType: { type: String, default: "solid" },
+    activeBorderColor: { type: String, default: "#cbee6b" },
+    activeColorText: { type: String, default: "#FFFFFF" },
+    cursorType: { type: String, default: "default" },
+    typeOnOff: { type: Boolean, default: !1 },
+    textCategory: String,
+    textStat: String,
+    marginLeftStat: { type: String, default: "15%" }
+  },
+  watch: {
+    value: {
+      deep: !0,
+      immediate: !0,
+      handler(t) {
+        this.status = t;
+      }
+    }
+  },
+  data() {
+    return { status: !1 };
+  },
+  computed: {
+    customStyle() {
+      return {
+        height: this.height,
+        width: this.width,
+        backgroundColor: this.backgroundColor,
+        borderRadius: this.borderRadius,
+        border: `${this.borderType} ${this.borderWidth}px ${this.borderColor}`,
+        color: this.fontColor,
+        textDecoration: this.textDecoration,
+        cursor: this.cursorType,
+        fontSize: this.fontSize,
+        fontStyle: this.fontStyle,
+        fontFamily: `${this.fontFamily} !important`
+      };
+    },
+    customActive() {
+      return {
+        backgroundColor: this.activeBackgroundColor,
+        color: this.activeColorText,
+        border: `${this.activeBorderType} ${this.activeBorderWidth}px ${this.activeBorderColor}`
+      };
+    }
+  },
+  methods: {
+    btnClick(t) {
+      this.$emit("click", t), this.typeOnOff && (this.status = !this.status, this.$emit("status", this.status));
+    }
+  }
+}, N = () => {
+  q((t) => ({
+    "9d01acb4": t.height,
+    "14e95081": t.borderWidthBtn,
+    "38fec285": t.borderType,
+    34353510: t.borderColor,
+    "20d20dc6": t.borderRadius,
+    17130967: t.width,
+    "4ccb7d36": t.backgroundColor,
+    "5d1e86a2": t.cursorType,
+    ce65d4a2: t.fontSize,
+    fe4ac47a: t.fontStyle,
+    f98e44dc: t.fontFamily,
+    "93b87770": t.marginLeftStat,
+    c7f7beba: t.fontSizeStat
+  }));
+}, U = W.setup;
+W.setup = U ? (t, u) => (N(), U(t, u)) : N;
+const ft = (t) => (I("data-v-f3ee6b2b"), t = t(), L(), t), pt = ["src"], vt = {
+  key: 1,
+  class: "text"
+}, ht = ["src"], bt = { class: "stats" }, gt = /* @__PURE__ */ ft(() => /* @__PURE__ */ l("img", {
+  class: "iconstats",
+  src: "https://golstatsimages.blob.core.windows.net/todoelfut/playdes.png"
+}, null, -1)), mt = { class: "numstats" }, _t = { class: "leyend" };
+function yt(t, u, e, d, f, r) {
+  return i(), s("div", null, [
+    e.type == 0 ? (i(), s("div", {
+      key: 0,
+      class: h(["button", f.status && e.typeOnOff && "button-active"]),
+      style: C([r.customStyle, f.status && e.typeOnOff && r.customActive]),
+      onClick: u[0] || (u[0] = (...m) => r.btnClick && r.btnClick(...m))
+    }, [
+      e.icon && e.iconPosition.toLowerCase() === "left" ? (i(), s("img", {
+        key: 0,
+        class: "icon",
+        style: C({ width: e.iconSize }),
+        src: e.icon
+      }, null, 12, pt)) : S("", !0),
+      e.textValue ? (i(), s("div", vt, n(e.textValue), 1)) : S("", !0),
+      e.icon && e.iconPosition.toLowerCase() === "right" ? (i(), s("img", {
+        key: 2,
+        class: "icon",
+        style: C({ width: e.iconSize }),
+        src: e.icon
+      }, null, 12, ht)) : S("", !0)
+    ], 6)) : S("", !0),
+    e.type == 1 ? (i(), s("div", {
+      key: 1,
+      class: "button-target",
+      onClick: u[1] || (u[1] = (...m) => r.btnClick && r.btnClick(...m))
+    }, [
+      l("div", bt, [
+        gt,
+        l("div", mt, n(e.textStat), 1)
+      ]),
+      l("div", _t, n(e.textCategory), 1)
+    ])) : S("", !0)
+  ]);
+}
+const E = /* @__PURE__ */ ut(W, [["render", yt], ["__scopeId", "data-v-f3ee6b2b"]]), H = (t, u) => {
+  const e = t.__vccOpts || t;
+  for (const [d, f] of u)
+    e[d] = f;
+  return e;
+}, J = (t) => (I("data-v-c362d03a"), t = t(), L(), t), xt = {
+  key: 0,
+  class: "overlay"
+}, St = /* @__PURE__ */ J(() => /* @__PURE__ */ l("div", { class: "column-title-2" }, null, -1)), wt = ["onClick"], Ct = /* @__PURE__ */ J(() => /* @__PURE__ */ l("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z",
+  fill: "#D9D9D9"
+}, null, -1)), kt = [
+  Ct
+], $t = {
+  __name: "ScrollColumns",
+  props: {
+    availablePlayers: {
+      type: Array,
+      default: () => []
+    },
+    isEditMode: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["expand"],
+  setup(t, { expose: u, emit: e }) {
+    const d = t, f = _(null), r = _(null), m = _(0), w = P(() => {
+      const v = d.availablePlayers[0];
+      return v ? v.stats : [];
+    }), k = P(() => {
+      const v = `repeat(${w.value.length}, max-content) 36px`;
+      let y = "";
+      return m.value > 0 && document.querySelectorAll(".column-title-2").forEach((x) => {
+        y += `${x.offsetWidth}px `;
+      }), {
+        "--grid-template-columns": v,
+        "--grid-template-columns-totals": y || v
+      };
+    });
+    function c() {
+      f.value = new ResizeObserver((v) => {
+        for (const y of v) {
+          const { width: g } = y.contentRect;
+          m.value = g;
+        }
+      }), f.value.observe(r.value);
+    }
+    function O(v) {
+      console.log("onClickExpand", v), e("expand", v);
+    }
+    function D(v, y) {
+      const x = document.querySelectorAll(".scrollable-row-totals")[v + 1];
+      x && (x.style.marginTop = `${y}px`);
+    }
+    return G(() => {
+      c();
+    }), u({
+      setMarginTopDetails: D
+    }), (v, y) => (i(), s("div", {
+      class: "scroll-columns",
+      style: C(k.value)
+    }, [
+      t.isEditMode ? (i(), s("div", xt)) : S("", !0),
+      l("div", {
+        ref_key: "titlesRow",
+        ref: r,
+        class: "scrollable-row-2"
+      }, [
+        (i(!0), s(B, null, V(w.value, (g) => (i(), s("div", {
+          key: `t-${g.category_id}`,
+          class: "column-title-2"
+        }, n(g.name), 1))), 128)),
+        St
+      ], 512),
+      (i(!0), s(B, null, V(t.availablePlayers, (g, x) => (i(), s("div", {
+        key: `i-${g.id}`,
+        class: "row scrollable-row-totals"
+      }, [
+        (i(!0), s(B, null, V(g.stats, ($) => (i(), s("div", {
+          key: $.category_id,
+          class: h(["row data-info underline", { odd: x % 2 !== 0 }])
+        }, n($.total), 3))), 128)),
+        l("div", {
+          class: h(["row data-info", { odd: x % 2 !== 0 }])
+        }, [
+          (i(), s("svg", {
+            onClick: ($) => O(g),
+            class: "_arrowExpandIcon_6ak64_1115 _rotate_6ak64_5",
+            width: "12",
+            height: "8",
+            viewBox: "0 0 12 8",
+            fill: "#D9D9D9",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, kt, 8, wt))
+        ], 2)
+      ]))), 128))
+    ], 4));
+  }
+}, Bt = /* @__PURE__ */ H($t, [["__scopeId", "data-v-c362d03a"]]), Z = (t) => (I("data-v-f240471a"), t = t(), L(), t), Ot = { class: "table__static-column" }, zt = /* @__PURE__ */ Z(() => /* @__PURE__ */ l("div", { class: "static-title column-title" }, null, -1)), Pt = { class: "container" }, Rt = { class: "details-row__info" }, Ft = { class: "details-row__info__personal" }, Vt = { class: "bold" }, Et = { class: "bold" }, Tt = { class: "bold" }, Dt = { class: "bold" }, It = { class: "details-row__info__games" }, Lt = { class: "bold" }, Wt = { class: "bold" }, At = { class: "details-row__buttons" }, Mt = { class: "position" }, Nt = { class: "player-photo" }, Ut = ["src"], qt = { class: "player-name" }, Gt = { class: "table__scrollable-columns" }, Ht = /* @__PURE__ */ Y('<div class="titles scrollable-row" data-v-f240471a><div class="column-title" data-v-f240471a>Equipo</div><div class="column-title" data-v-f240471a>Posición</div><div class="column-title" data-v-f240471a>Edad</div><div class="column-title" data-v-f240471a>País</div><div class="column-title" data-v-f240471a>Partidos Jugados</div><div class="column-title" data-v-f240471a>Minutos Jugados</div><div class="column-title" data-v-f240471a>Liga</div><div class="column-title" data-v-f240471a>Videos</div><div class="column-title" data-v-f240471a></div></div>', 1), Jt = { class: "team-logo" }, Zt = ["src"], jt = { class: "team-name data-info" }, Kt = ["src"], Qt = ["onClick"], Xt = /* @__PURE__ */ Z(() => /* @__PURE__ */ l("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z",
+  fill: "#D9D9D9"
+}, null, -1)), Yt = [
+  Xt
+], te = {
+  __name: "GSC-TableScrollable",
+  props: {
+    players: {
+      type: Array,
+      default: () => []
+    },
+    isGeneral: {
+      type: Boolean,
+      default: !0
+    },
+    isEditMode: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["change-selected-players"],
+  setup(t, { emit: u }) {
+    const e = t;
+    let d = null, f = null;
+    const r = _([]), m = _(null), w = _(null), k = _(0), c = _(0), O = _(-1), D = P(() => ({
+      "--width-details": `${k.value}px`
+    }));
+    T(
+      () => e.players,
+      (a) => {
+        a && a.length && (r.value = a.map((b, o) => {
+          const p = o + 1;
+          return console.log("isOdd", o % 2 !== 0), {
+            ...b,
+            position: p < 10 ? `0${p}` : `${p}`,
+            isSelected: !1,
+            isExpanded: !1,
+            isOdd: o % 2 !== 0,
+            index: o
+          };
+        }));
+      },
+      { immediate: !0 }
+    ), T(
+      () => e.isEditMode,
+      (a) => {
+        a && r.value.forEach((b) => {
+          b.isSelected = !1;
+        });
+      }
+    ), T(
+      c,
+      (a) => {
+        const o = document.querySelectorAll(".static-row")[O.value + 1];
+        o && (o.style.marginTop = `${a}px`), w.value && w.value.setMarginTopDetails(O.value, a), console.log("detailsHeight", a);
+      }
+    );
+    function v(a) {
+      console.log("onClickVideos", a);
+    }
+    function y() {
+      d = new ResizeObserver((a) => {
+        for (const b of a)
+          k.value = b.contentRect.width;
+      }), d.observe(m.value);
+    }
+    function g(a) {
+      f = new ResizeObserver((b) => {
+        for (const o of b)
+          c.value = o.contentRect.height;
+      }), f.observe(a);
+    }
+    function x(a, b) {
+      b.isSelected = a;
+      const o = r.value.filter((p) => p.isSelected);
+      console.log("selectedPlayers", o), u("change-selected-players", o);
+    }
+    function $(a) {
+      console.log("onCilckViewProfile", a);
+    }
+    function A(a) {
+      const b = a.isExpanded;
+      if (r.value.forEach((o) => {
+        o.isExpanded = !1;
+      }), !b) {
+        const o = document.querySelectorAll(".details-row");
+        console.log("detailsRows", o);
+        const p = o[a.index];
+        console.log("playerDetailRow", p), O.value = a.index, p && g(p);
+      }
+      a.isExpanded = !b;
+    }
+    return G(() => {
+      y();
+    }), (a, b) => (i(), s("div", {
+      class: "table",
+      ref_key: "tableSC",
+      ref: m,
+      style: C(D.value)
+    }, [
+      l("div", Ot, [
+        zt,
+        (i(!0), s(B, null, V(r.value, (o) => (i(), s("div", {
+          key: `s-${o.id}`,
+          class: h(["row static-row", { odd: o.isOdd }])
+        }, [
+          R(j, null, {
+            default: K(() => [
+              Q(l("div", {
+                class: h(["details-row", { odd: o.isOdd }])
+              }, [
+                l("div", Pt, [
+                  l("div", Rt, [
+                    l("div", Ft, [
+                      l("div", null, [
+                        z("Equipo: "),
+                        l("span", Vt, n(o.team_name), 1)
+                      ]),
+                      l("div", null, [
+                        z("Edad: "),
+                        l("span", Et, n(o.player_age) + " Años", 1)
+                      ]),
+                      l("div", null, [
+                        z("Nacionalidad: "),
+                        l("span", Tt, n(o.player_country), 1)
+                      ]),
+                      l("div", null, [
+                        z("Posición: "),
+                        l("span", Dt, n(o.position_name), 1)
+                      ])
+                    ]),
+                    l("div", It, [
+                      l("div", null, [
+                        z("Partidos Jugados: "),
+                        l("span", Lt, n(o.player_games), 1)
+                      ]),
+                      l("div", null, [
+                        z("Minutos Jugados: "),
+                        l("span", Wt, n(o.player_min), 1)
+                      ])
+                    ])
+                  ]),
+                  l("div", At, [
+                    R(F(E), {
+                      icon: "",
+                      width: "88px",
+                      height: "30px",
+                      "border-radius": "30px",
+                      "border-width": 1,
+                      "background-color": "#ffffff1a",
+                      "font-family": "Poppins-Semibold",
+                      "border-color": "gray",
+                      "text-value": "Ver gráfica",
+                      "font-size": "10px",
+                      onClick: (p) => $(o)
+                    }, null, 8, ["onClick"]),
+                    R(F(E), {
+                      icon: "",
+                      width: "88px",
+                      height: "30px",
+                      "border-radius": "30px",
+                      "border-width": 1,
+                      "background-color": "#ffffff1a",
+                      "font-family": "Poppins-Semibold",
+                      "border-color": "gray",
+                      "text-value": "Agregar a lista",
+                      "font-size": "10px",
+                      onClick: (p) => $(o)
+                    }, null, 8, ["onClick"]),
+                    R(F(E), {
+                      width: "88px",
+                      height: "30px",
+                      "border-radius": "30px",
+                      "border-width": 1,
+                      "background-color": "#ffffff1a",
+                      "font-family": "Poppins-Semibold",
+                      "border-color": "#cbee6b",
+                      "text-value": "Ver perfil",
+                      "font-size": "10px",
+                      onClick: (p) => $(o)
+                    }, null, 8, ["onClick"])
+                  ])
+                ])
+              ], 2), [
+                [X, o.isExpanded]
+              ])
+            ]),
+            _: 2
+          }, 1024),
+          t.isEditMode ? (i(), M(F(ct), {
+            key: 0,
+            fontFamily: "Poppins-Regular",
+            labelFontSize: "14px",
+            "model-value": o.isSelected,
+            "onUpdate:modelValue": (p) => x(p, o)
+          }, null, 8, ["model-value", "onUpdate:modelValue"])) : S("", !0),
+          l("div", Mt, n(o.position), 1),
+          l("div", Nt, [
+            l("img", {
+              src: o.player_photo,
+              alt: "player photo"
+            }, null, 8, Ut)
+          ]),
+          l("div", qt, n(o.player_name), 1)
+        ], 2))), 128))
+      ]),
+      l("div", Gt, [
+        t.isGeneral ? (i(), s(B, { key: 0 }, [
+          Ht,
+          (i(!0), s(B, null, V(r.value, (o) => (i(), s("div", {
+            key: `i-${o.id}`,
+            class: "row scrollable-row"
+          }, [
+            l("div", {
+              class: h(["row team-info", { odd: o.isOdd }])
+            }, [
+              l("div", Jt, [
+                l("img", {
+                  src: o.team_logo,
+                  alt: "team logo"
+                }, null, 8, Zt)
+              ]),
+              l("div", jt, n(o.team_abrev), 1)
+            ], 2),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, n(o.player_position), 3),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, n(o.player_age), 3),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, [
+              l("img", {
+                src: o.player_country_flag,
+                alt: "player country flag",
+                class: "country-flag"
+              }, null, 8, Kt)
+            ], 2),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, n(o.player_games), 3),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, n(o.player_min), 3),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, n(o.league_name), 3),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, [
+              R(F(E), {
+                icon: "https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png",
+                "icon-size": "13px",
+                "icon-position": "left",
+                width: "98px",
+                height: "30px",
+                "border-radius": "30px",
+                "border-width": "1",
+                "background-color": "#ffffff1a",
+                "font-family": "Poppins-Regular",
+                "border-color": "#55636e",
+                "text-value": "Ver videos",
+                "font-size": "10px",
+                onClick: (p) => v(o)
+              }, null, 8, ["onClick"])
+            ], 2),
+            l("div", {
+              class: h(["row data-info", { odd: o.isOdd }])
+            }, [
+              (i(), s("svg", {
+                onClick: (p) => A(o),
+                class: "_arrowExpandIcon_6ak64_1115 _rotate_6ak64_5",
+                width: "12",
+                height: "8",
+                viewBox: "0 0 12 8",
+                fill: "#D9D9D9",
+                xmlns: "http://www.w3.org/2000/svg"
+              }, Yt, 8, Qt))
+            ], 2)
+          ]))), 128))
+        ], 64)) : (i(), M(Bt, {
+          key: 1,
+          ref_key: "scrollColumns",
+          ref: w,
+          "available-players": r.value,
+          "is-edit-mode": t.isEditMode,
+          onExpand: A
+        }, null, 8, ["available-players", "is-edit-mode"]))
+      ])
+    ], 4));
+  }
+}, oe = /* @__PURE__ */ H(te, [["__scopeId", "data-v-f240471a"]]);
+export {
+  oe as GSCTableScrollable
+};

package/dist/gsc-table-scrollable.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+  "name": "@golstats/gsc-table-scrollable",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/gsc-table-scrollable.umd.cjs",
+  "module": "./dist/gsc-table-scrollable.js",
+  "exports": {
+    ".": {
+      "import": "./dist/gsc-table-scrollable.js",
+      "require": "./dist/gsc-table-scrollable.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@golstats/gsc-button": "^1.0.14",
+    "@golstats/gsc-checkbox": "^1.0.13",
+    "vue": "3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "prettier": "3.5.3",
+    "sass-embedded": "^1.85.1",
+    "sass-loader": "^13.3.2",
+    "vite": "^6.2.1",
+    "vite-plugin-vue-devtools": "^7.7.2"
+  }
+}