@webitel/ui-sdk 26.2.51 → 26.2.53

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -18,7 +18,8 @@
             class="wt-tree-table-th typo-body-1"
             @click="sort(col, key)"
           >
-            <div class="wt-tree-table-th__content">
+            <div class="wt-tree-table-th__content"
+                 :class="{'wt-tree-table-th__content--selectable': key === 0 && selectable}">
               <div
                 v-if="key === 0 && selectable"
                 @click.stop
@@ -288,6 +289,10 @@ const handleSelection = (row, select) => {
   background: var(--wt-tree-table-head-background-color);
 }
 
+.wt-tree-table-th__content--selectable {
+  display: flex;
+}
+
 .wt-tree-table-wrapper {
   border-collapse: collapse;
   width: 100%;

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -200,13 +200,6 @@ onMounted(() => {
   overflow-wrap: break-word;
 }
 
-.wt-tree-table-td__actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
-}
-
 .wt-tree-table-td__content {
   display: flex;
   align-items: center;

package/dist/wt-tree-table-DbHZ-clu.js

@@ -1,284 +0,0 @@
-import { computed as C, unref as B, defineComponent as V, ref as D, onMounted as F, resolveComponent as z, createElementBlock as d, openBlock as l, Fragment as $, createElementVNode as u, createCommentVNode as b, normalizeClass as L, renderList as v, renderSlot as p, createBlock as x, createTextVNode as U, toDisplayString as H, createSlots as W, withCtx as I, toRef as O, normalizeStyle as Q, withModifiers as j, createVNode as q } from "vue";
-import { B as G, P as R, Q as J, _ as M } from "./install-CvqefYzX.js";
-import { g as X } from "./sortQueryAdapters-M9bNEM3P.js";
-const Y = ({ headers: t }) => {
-  const { t: m } = G();
-  return {
-    tableHeaders: C(() => (B(t) ?? []).filter(
-      (r) => r.show === void 0 || r.show
-    ).map((r) => !r.text && r.locale ? {
-      ...r,
-      text: typeof r.locale == "string" ? m(r.locale) : m(...r.locale)
-    } : r))
-  };
-}, Z = { class: "wt-tree-table-td__content" }, K = {
-  key: 0,
-  class: "wt-tree-table-td__icon-wrapper"
-}, _ = {
-  key: 0,
-  class: "wt-tree-table-td__actions typo-body-1"
-}, ee = { class: "wt-tree-table-td__content" }, te = /* @__PURE__ */ V({
-  __name: "wt-tree-table-row",
-  props: {
-    data: {},
-    rowPosition: {},
-    childrenProp: {},
-    selectable: { type: Boolean, default: !1 },
-    selectedElements: {},
-    dataHeaders: {},
-    gridActions: { type: Boolean, default: !0 },
-    nestingLevel: { default: 0 },
-    searchedProp: { default: "searched" }
-  },
-  emits: [
-    "update:selected",
-    "expanded-collapse"
-  ],
-  setup(t, { emit: m }) {
-    const s = t, r = m, h = D(!0), N = C(() => s.nestingLevel), A = C(() => s.nestingLevel + 1), y = C(() => s.selectedElements.includes(s.data)), P = () => {
-      h.value = !1, r("expanded-collapse");
-    }, k = (c, i = 0) => {
-      if (c[s.searchedProp] && i) return !0;
-      if (Array.isArray(c[s.childrenProp])) {
-        for (const f of c[s.childrenProp])
-          if (k(f, i + 1))
-            return !0;
-      }
-      return !1;
-    };
-    return F(() => {
-      s.searchedProp && k(s.data) && P();
-    }), (c, i) => {
-      const f = z("wt-tree-table-row", !0);
-      return l(), d($, null, [
-        u("tr", {
-          class: L([[{ "wt-tree-table-row--alternate": t.rowPosition % 2 }], "wt-tree-table-row"])
-        }, [
-          (l(!0), d($, null, v(t.dataHeaders, (g, S) => (l(), d("td", {
-            key: S,
-            class: "wt-tree-table-td typo-body-1"
-          }, [
-            u("div", Z, [
-              S ? b("", !0) : (l(), d("div", K, [
-                (l(!0), d($, null, v(N.value, (e) => (l(), d("div", {
-                  key: e,
-                  class: "wt-tree-table-row__tree-space"
-                }))), 128)),
-                t.selectable ? (l(), x(R, {
-                  key: 0,
-                  selected: y.value,
-                  "onUpdate:selected": i[0] || (i[0] = (e) => c.$emit("update:selected", {
-                    data: t.data,
-                    select: e
-                  }))
-                }, null, 8, ["selected"])) : b("", !0),
-                t.data[t.childrenProp] ? (l(), x(J, {
-                  key: 1,
-                  icon: h.value ? "tree-expand" : "tree-collapse",
-                  onClick: i[1] || (i[1] = (e) => h.value = !h.value)
-                }, null, 8, ["icon"])) : b("", !0)
-              ])),
-              p(c.$slots, g.value, {
-                index: t.rowPosition,
-                item: t.data
-              }, () => [
-                U(H(t.data[g.value]), 1)
-              ], !0)
-            ])
-          ]))), 128)),
-          t.gridActions ? (l(), d("td", _, [
-            u("div", ee, [
-              p(c.$slots, "actions", {
-                index: t.rowPosition,
-                item: t.data
-              }, void 0, !0)
-            ])
-          ])) : b("", !0)
-        ], 2),
-        h.value ? b("", !0) : (l(!0), d($, { key: 0 }, v(t.data[t.childrenProp], (g, S) => (l(), x(f, {
-          key: S,
-          "children-prop": t.childrenProp,
-          data: g,
-          "data-headers": t.dataHeaders,
-          "nesting-level": A.value,
-          "row-position": t.rowPosition,
-          "searched-prop": t.searchedProp,
-          selectable: t.selectable,
-          "selected-elements": t.selectedElements,
-          onExpandedCollapse: P,
-          "onUpdate:selected": i[2] || (i[2] = (e) => c.$emit("update:selected", {
-            data: e.data,
-            select: e.select
-          }))
-        }, W({
-          actions: I(({ item: e }) => [
-            p(c.$slots, "actions", {
-              index: t.rowPosition,
-              item: e
-            }, void 0, !0)
-          ]),
-          _: 2
-        }, [
-          v(t.dataHeaders, (e, o) => ({
-            name: e.value,
-            fn: I(({ item: n }) => [
-              p(c.$slots, e.value, {
-                index: t.rowPosition,
-                item: n
-              }, () => [
-                u("div", null, H(n[e.value]), 1)
-              ], !0)
-            ])
-          }))
-        ]), 1032, ["children-prop", "data", "data-headers", "nesting-level", "row-position", "searched-prop", "selectable", "selected-elements"]))), 128))
-      ], 64);
-    };
-  }
-}), se = /* @__PURE__ */ M(te, [["__scopeId", "data-v-24d49e9c"]]), ae = { class: "wt-tree-table wt-scrollbar" }, le = { class: "wt-tree-table-wrapper" }, re = { class: "wt-tree-table-head" }, oe = { class: "wt-tree-table-tr wt-tree-table-tr-head" }, ne = ["onClick"], de = { class: "wt-tree-table-th__content" }, ce = { class: "wt-tree-table-th__text" }, ie = {
-  key: 0,
-  class: "wt-tree-table-th__actions"
-}, ue = { class: "wt-tree-table-th__content" }, he = { class: "wt-tree-table-body" }, we = /* @__PURE__ */ V({
-  __name: "wt-tree-table",
-  props: {
-    headers: {},
-    data: {},
-    sortable: { type: Boolean, default: !1 },
-    selectable: { type: Boolean, default: !0 },
-    selected: {},
-    gridActions: { type: Boolean, default: !0 },
-    childrenProp: {},
-    searchedProp: { default: "searched" }
-  },
-  emits: [
-    "sort",
-    "update:selected"
-  ],
-  setup(t, { emit: m }) {
-    const s = t, r = m, h = (e) => e[s.childrenProp] && Array.isArray(e[s.childrenProp]), N = (e) => {
-      const o = [], n = (a) => {
-        if (a._isSelected)
-          return [
-            a
-          ];
-        h(a) && a[s.childrenProp].forEach(n);
-      };
-      return e.forEach(n), o;
-    }, A = (e) => {
-      const o = [], n = (a) => {
-        o.push(a), h(a) && a[s.childrenProp].forEach(n);
-      };
-      return e.forEach(n), o;
-    }, y = C(() => s.selected || N(s.data)), P = C(() => y.value.length === A(s.data).length && A(s.data).length > 0), { tableHeaders: k } = Y({
-      headers: O(s, "headers")
-    }), c = ({ sort: e }) => s.sortable && e !== void 0, i = (e) => {
-      if (!c(e)) return;
-      const o = X(e.sort);
-      r("sort", e, o);
-    }, f = (e, o) => {
-      e.forEach((n) => {
-        n._isSelected = o, h(n) && f(n[s.childrenProp], o);
-      });
-    }, g = () => {
-      s.selected ? r(
-        "update:selected",
-        P.value ? [] : [
-          ...A(s.data)
-        ]
-      ) : P.value ? f(s.data, !1) : f(s.data, !0);
-    }, S = (e, o) => {
-      s.selected ? o ? r("update:selected", [
-        ...y.value,
-        e
-      ]) : r(
-        "update:selected",
-        y.value.filter((n) => n !== e)
-      ) : e._isSelected = !e._isSelected;
-    };
-    return (e, o) => {
-      const n = z("wt-icon");
-      return l(), d("div", ae, [
-        u("table", le, [
-          u("thead", re, [
-            u("tr", oe, [
-              (l(!0), d($, null, v(B(k), (a, E) => (l(), d("th", {
-                key: String(E) + (a == null ? void 0 : a.sort),
-                class: L([[
-                  {
-                    "wt-tree-table-th--sortable": c(a)
-                  },
-                  `wt-tree-table-th--sort-${a.sort}`
-                ], "wt-tree-table-th typo-body-1"]),
-                style: Q(a.width ? `min-width:${a.width}` : ""),
-                onClick: (w) => i(a)
-              }, [
-                u("div", de, [
-                  E === 0 && t.selectable ? (l(), d("div", {
-                    key: 0,
-                    onClick: o[0] || (o[0] = j(() => {
-                    }, ["stop"]))
-                  }, [
-                    q(R, {
-                      selected: P.value,
-                      "onUpdate:selected": g
-                    }, null, 8, ["selected"])
-                  ])) : b("", !0),
-                  u("div", ce, H(a.text), 1),
-                  t.sortable ? (l(), x(n, {
-                    key: 1,
-                    class: "wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--asc",
-                    icon: "sort-arrow-up",
-                    size: "sm"
-                  })) : b("", !0),
-                  t.sortable ? (l(), x(n, {
-                    key: 2,
-                    class: "wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--desc",
-                    icon: "sort-arrow-down",
-                    size: "sm"
-                  })) : b("", !0)
-                ])
-              ], 14, ne))), 128)),
-              t.gridActions ? (l(), d("th", ie, [
-                u("div", ue, [
-                  p(e.$slots, "actions-header", {}, void 0, !0)
-                ])
-              ])) : b("", !0)
-            ])
-          ]),
-          u("tbody", he, [
-            (l(!0), d($, null, v(t.data, (a, E) => (l(), x(se, {
-              key: E,
-              "row-position": E,
-              "data-headers": B(k),
-              data: a,
-              selectable: t.selectable,
-              "children-prop": t.childrenProp,
-              "selected-elements": y.value,
-              "searched-prop": t.searchedProp,
-              "onUpdate:selected": o[1] || (o[1] = (w) => S(w.data, w.select))
-            }, W({
-              actions: I(({ item: w }) => [
-                p(e.$slots, "actions", { item: w }, void 0, !0)
-              ]),
-              _: 2
-            }, [
-              v(B(k), (w, be) => ({
-                name: w.value,
-                fn: I(({ item: T }) => [
-                  p(e.$slots, w.value, {
-                    index: E,
-                    item: T
-                  }, () => [
-                    U(H(T[w.value]), 1)
-                  ], !0)
-                ])
-              }))
-            ]), 1032, ["row-position", "data-headers", "data", "selectable", "children-prop", "selected-elements", "searched-prop"]))), 128))
-          ])
-        ])
-      ]);
-    };
-  }
-}), me = /* @__PURE__ */ M(we, [["__scopeId", "data-v-6dfd7d3a"]]);
-export {
-  me as default
-};