voiptime-components 0.0.25 → 0.0.27

package/dist/index.d.ts

@@ -124,7 +124,18 @@ declare const __VLS_component_4: DefineComponent<__VLS_PublicProps, {
     }) => any) | undefined;
     "onColumns-change"?: ((columns: VTableColumnProps[]) => any) | undefined;
     "onInfinity-scroll"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+}>, {
+    maxHeight: number;
+    selectable: boolean;
+    columns: VTableColumnProps[];
+    columnsSelector: VTableColumnGroup[];
+    showSummary: boolean;
+    selectionKey: string;
+    defaultSelection: any[];
+    selectOnClickRow: boolean;
+    highlightCurrentRow: boolean;
+    allData: Record<string, any>[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
     tableWrapperRef: HTMLDivElement;
 }, HTMLDivElement>;
 
@@ -135,7 +146,7 @@ declare type __VLS_Props = {
 declare type __VLS_Props_2 = VTableProps;
 
 declare type __VLS_PublicProps = {
-    'columns'?: VTableColumnProps[];
+    'columns'?: VTableColumnProps[] | undefined;
 } & __VLS_Props_2;
 
 declare function __VLS_template(): {
@@ -168,7 +179,9 @@ declare function __VLS_template_3(): {
 
 declare function __VLS_template_4(): {
     attrs: Partial<{}>;
-    slots: Readonly<VTableColumnSlots> & VTableColumnSlots;
+    slots: {
+        default?(_: {}): any;
+    };
     refs: {
         tableWrapperRef: HTMLDivElement;
     };
@@ -208,12 +221,12 @@ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
 };
 
 export declare const DEFAULT_COLUMN_CONFIG: {
-    sortable: boolean;
-    actionColumn: boolean;
-    showOverflowTooltip: boolean;
-    visible: boolean;
-    pinnedLeft: boolean;
-    pinnedRight: boolean;
+    readonly sortable: true;
+    readonly actionColumn: false;
+    readonly showOverflowTooltip: true;
+    readonly visible: true;
+    readonly pinnedLeft: false;
+    readonly pinnedRight: false;
 };
 
 export declare type IconName = keyof typeof icons;
@@ -505,10 +518,6 @@ export declare interface VTableColumnProps {
     sortMethod?: Function;
 }
 
-declare interface VTableColumnSlots {
-    default?: () => VNode[];
-}
-
 export declare interface VTableEmits {
     'sort-change': [payload: SortChangeEventData];
     'selection-change': [payload: SelectionChangeEventData];
@@ -545,25 +554,38 @@ export declare interface VTableEmits {
 }
 
 export declare interface VTableProps {
+    /** Масив даних для відображення в таблиці */
     data: Record<string, any>[];
+    /** Максимальна висота таблиці (для sticky header) */
     maxHeight?: number;
+    /** Початкове сортування */
     defaultSort?: SortState;
+    /** Показувати підсумковий рядок */
     showSummary?: boolean;
+    /** Метод для обчислення підсумкових значень */
     summaryMethod?: (params: {
         columns: VTableColumnProps[];
         data: Record<string, any>[];
     }) => any[];
+    /** Групи колонок для селектора */
     columnsSelector?: VTableColumnGroup[];
+    /** Чи включити функціонал виділення рядків */
     selectable?: boolean;
+    /** Ключ для ідентифікації рядків (за замовчуванням 'id') */
     selectionKey?: string;
+    /** Рядки виділені за замовчуванням */
     defaultSelection?: any[];
+    /** Виділяти рядок при кліку на нього */
     selectOnClickRow?: boolean;
+    /** Підсвічувати поточний рядок */
     highlightCurrentRow?: boolean;
+    /** Всі дані для повного виділення (якщо відрізняються від data) */
     allData?: Record<string, any>[];
+    /** Конфігурація колонок */
     columns?: VTableColumnProps[];
 }
 
-declare type VTableRenderSlot = (props: {
+export declare type VTableRenderSlot = (props: {
     row: Record<string, any>;
     column: VTableColumnProps;
     value: any;
@@ -589,7 +611,7 @@ export { }
 
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
-        $modal: VModalInstance;
+        $modal: import('./components/modal/types').VModalInstance;
     }
 }
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { createElementBlock as m, openBlock as p, createElementVNode as h, createStaticVNode as Ae, defineComponent as le, computed as x, createBlock as ae, createCommentVNode as D, resolveDynamicComponent as Oe, useSlots as je, resolveDirective as Fe, withDirectives as Le, normalizeClass as z, renderSlot as pe, Teleport as st, normalizeStyle as re, withModifiers as he, toDisplayString as te, watch as me, Fragment as ne, renderList as oe, vModelSelect as rt, createVNode as Z, withCtx as xe, createTextVNode as _e, ref as A, createApp as it, h as be, onMounted as ve, onUnmounted as $e, nextTick as at, mergeModels as Re, useModel as ct, reactive as ut, provide as dt, unref as q, inject as pt } from "vue";
+import { createElementBlock as m, openBlock as p, createElementVNode as h, createStaticVNode as Ae, defineComponent as le, computed as x, createBlock as ae, createCommentVNode as D, resolveDynamicComponent as Oe, useSlots as je, resolveDirective as Ne, withDirectives as Le, normalizeClass as z, renderSlot as pe, Teleport as st, normalizeStyle as re, withModifiers as he, toDisplayString as te, watch as me, Fragment as ne, renderList as oe, vModelSelect as rt, createVNode as Z, withCtx as xe, createTextVNode as _e, ref as A, createApp as it, h as be, onMounted as ve, onUnmounted as $e, nextTick as at, mergeModels as Re, useModel as ct, reactive as ut, provide as dt, unref as q, inject as pt } from "vue";
 const H = (t, e) => {
   const o = t.__vccOpts || t;
   for (const [n, s] of e)
@@ -147,7 +147,7 @@ const At = /* @__PURE__ */ H(Wt, [["render", Pt]]), Ot = {}, jt = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ft(t, e) {
+function Nt(t, e) {
   return p(), m("svg", jt, e[0] || (e[0] = [
     h("path", {
       d: "M8 3V5.2225M8 5.2225V10.7775M8 5.2225L9.875 4.25M8 5.2225L6.125 4.25M8 10.7775V13M8 10.7775L6.125 11.75M8 10.7775L9.875 11.75M13 8H10.7775M10.7775 8H5.2225M10.7775 8L11.75 9.875M10.7775 8L11.75 6.125M5.2225 8H3M5.2225 8L4.25 6.125M5.2225 8L4.25 9.875",
@@ -164,7 +164,7 @@ function Ft(t, e) {
     }, null, -1)
   ]));
 }
-const Nt = /* @__PURE__ */ H(Ot, [["render", Ft]]), Zt = {}, Ut = {
+const Ft = /* @__PURE__ */ H(Ot, [["render", Nt]]), Zt = {}, Ut = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "60",
   height: "60",
@@ -411,7 +411,7 @@ function jn(t, e) {
     Ae('<circle cx="4.5" cy="12.5" r="1.5" stroke="currentColor" stroke-width="1.5"></circle><circle cx="9.5" cy="8.5" r="1.5" transform="rotate(-180 9.5 8.5)" stroke="currentColor" stroke-width="1.5"></circle><circle cx="14.5" cy="12.5" r="1.5" stroke="currentColor" stroke-width="1.5"></circle><path d="M4.55469 10.5V2" stroke="currentColor" stroke-width="1.5"></path><path d="M9.44531 9.5L9.44531 18" stroke="currentColor" stroke-width="1.5"></path><path d="M14.5547 10.5V2" stroke="currentColor" stroke-width="1.5"></path><path d="M4.55469 18V15.5" stroke="currentColor" stroke-width="1.5"></path><path d="M9.44531 2L9.44531 5.5" stroke="currentColor" stroke-width="1.5"></path><path d="M14.5547 18V15.5" stroke="currentColor" stroke-width="1.5"></path>', 9)
   ]));
 }
-const Fn = /* @__PURE__ */ H(An, [["render", jn]]), Nn = {}, Zn = {
+const Nn = /* @__PURE__ */ H(An, [["render", jn]]), Fn = {}, Zn = {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
@@ -436,7 +436,7 @@ function Un(t, e) {
     }, null, -1)
   ]));
 }
-const qn = /* @__PURE__ */ H(Nn, [["render", Un]]), Xn = {
+const qn = /* @__PURE__ */ H(Fn, [["render", Un]]), Xn = {
   // arrow icons
   arrowDown: ft,
   arrowTop: wt,
@@ -446,7 +446,7 @@ const qn = /* @__PURE__ */ H(Nn, [["render", Un]]), Xn = {
   // table icons
   columnInsert: Ht,
   freeze: At,
-  unfreeze: Nt,
+  unfreeze: Ft,
   columnsMove: Jt,
   empty: Xt,
   // actions icons
@@ -461,7 +461,7 @@ const qn = /* @__PURE__ */ H(Nn, [["render", Un]]), Xn = {
   filterExchange: Bn,
   filterEdit: zn,
   filterDateCheck: Pn,
-  filterAdvanced: Fn,
+  filterAdvanced: Nn,
   filterAdd: qn
 }, Y = /* @__PURE__ */ le({
   __name: "VIcon",
@@ -476,7 +476,7 @@ const qn = /* @__PURE__ */ H(Nn, [["render", Un]]), Xn = {
 function Yn(t, e) {
   return p(), m("span", Kn);
 }
-const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "data-placement"], Qn = {
+const Fe = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "data-placement"], Qn = {
   key: 2,
   class: "vt-button__content"
 }, ge = /* @__PURE__ */ le({
@@ -510,7 +510,7 @@ const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "d
       !o.disabled && !o.loading && n("click", c);
     };
     return (c, b) => {
-      const M = Fe("tooltip");
+      const M = Ne("tooltip");
       return Le((p(), m("button", {
         class: z(r.value),
         disabled: o.disabled || o.loading,
@@ -518,7 +518,7 @@ const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "d
         "data-placement": o.tooltipPlacement,
         onClick: u
       }, [
-        o.loading ? (p(), ae(Ne, {
+        o.loading ? (p(), ae(Fe, {
           key: 0,
           class: "vt-button__icon"
         })) : o.icon ? (p(), ae(Y, {
@@ -625,13 +625,13 @@ const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "d
       });
     }, X = (L) => {
       typeof L == "number" && L !== s.value && (s.value = L, M());
-    }, F = () => {
+    }, N = () => {
       u.value || (s.value--, M());
     }, Q = () => {
       c.value || (s.value++, M());
     }, U = () => {
       s.value = 1, M();
-    }, N = () => {
+    }, F = () => {
       n("reloadData", s.value);
     };
     return me(
@@ -664,7 +664,7 @@ const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "d
       ]),
       h("div", io, [
         h("button", {
-          onClick: F,
+          onClick: N,
           disabled: u.value,
           class: z({ "vt-pagination__nav-button": !0, "has-items": !u.value })
         }, [
@@ -691,7 +691,7 @@ const Ne = /* @__PURE__ */ H(Gn, [["render", Yn]]), Jn = ["disabled", "type", "d
           shape: "circle",
           tooltip: "",
           tooltipPlacement: "left",
-          onClick: N
+          onClick: F
         }, {
           default: xe(() => W[2] || (W[2] = [
             _e("Оновити дані ", -1)
@@ -913,10 +913,10 @@ function _o() {
       const r = (u) => {
         const { resizingCol: c, startX: b, startWidth: M } = t.value;
         if (!c) return;
-        document.querySelectorAll(`[data-resizer="${c.prop}"]`).forEach((N) => {
-          N.classList.add("vt-table__resizer--active");
+        document.querySelectorAll(`[data-resizer="${c.prop}"]`).forEach((F) => {
+          F.classList.add("vt-table__resizer--active");
         });
-        const X = u.clientX - b, F = c.minWidth || 50, Q = c.maxWidth || 1e3, U = Math.max(Math.min(M + X, Q), F);
+        const X = u.clientX - b, N = c.minWidth || 50, Q = c.maxWidth || 1e3, U = Math.max(Math.min(M + X, Q), N);
         c.width = U;
       }, i = () => {
         const { resizingCol: u } = t.value;
@@ -937,7 +937,7 @@ function go(t, e, o, n) {
     if (r.value) return !1;
     const v = c.value;
     return v > 0 && v < e.value.length;
-  }), X = x(() => r.value ? !0 : b.value && !M.value), F = x(() => r.value), Q = (v, O) => {
+  }), X = x(() => r.value ? !0 : b.value && !M.value), N = x(() => r.value), Q = (v, O) => {
     const R = i(v), K = l.value.some((_) => i(_) === i(v)), d = O !== void 0 ? O : !K;
     if (r.value && !d) {
       r.value = !1, n != null && n.value && (l.value = n.value.filter((_) => i(_) !== R)), $(v, !1);
@@ -945,7 +945,7 @@ function go(t, e, o, n) {
     }
     r.value && d || (d && !K ? l.value.push(v) : !d && K && (l.value = l.value.filter((_) => i(_) !== R)), t.selectOnClickRow && O === void 0 && G(d ? v : null), $(v, d));
   }, U = () => {
-    switch (N()) {
+    switch (F()) {
       case "none":
       case "partial":
         L();
@@ -957,7 +957,7 @@ function go(t, e, o, n) {
         B();
         break;
     }
-  }, N = () => r.value ? "absoluteAll" : b.value ? "allVisible" : c.value > 0 ? "partial" : "none", L = () => {
+  }, F = () => r.value ? "absoluteAll" : b.value ? "allVisible" : c.value > 0 ? "partial" : "none", L = () => {
     const v = [], O = new Set(l.value.map((R) => i(R)));
     l.value.forEach((R) => {
       v.push(R);
@@ -996,7 +996,7 @@ function go(t, e, o, n) {
     isRowSelected: u,
     isAllSelected: X,
     isIndeterminate: M,
-    isDoubleCheck: F,
+    isDoubleCheck: N,
     isFullSelection: r,
     toggleRowSelection: Q,
     toggleAllSelection: U,
@@ -1166,7 +1166,7 @@ const ie = new yo(), xo = {
         minIndex: _ + 1,
         maxIndex: g - 1
       };
-    }, F = (d) => {
+    }, N = (d) => {
       const _ = X();
       return !(d < _.minIndex || d > _.maxIndex + 1);
     }, Q = (d, _) => {
@@ -1181,8 +1181,8 @@ const ie = new yo(), xo = {
       d.preventDefault();
       const g = d.currentTarget.getBoundingClientRect(), k = d.clientY, V = g.top + g.height / 2;
       let S = _, ee = "before";
-      k < V ? (S = _, ee = "before") : (S = _ + 1, ee = "after"), a.value < S && S--, F(S) ? (r.value = _, i.value = ee, d.dataTransfer.dropEffect = "move") : (r.value = -1, d.dataTransfer.dropEffect = "none");
-    }, N = () => {
+      k < V ? (S = _, ee = "before") : (S = _ + 1, ee = "after"), a.value < S && S--, N(S) ? (r.value = _, i.value = ee, d.dataTransfer.dropEffect = "move") : (r.value = -1, d.dataTransfer.dropEffect = "none");
+    }, F = () => {
       setTimeout(() => {
         a.value === -1 && (r.value = -1);
       }, 50);
@@ -1193,7 +1193,7 @@ const ie = new yo(), xo = {
       }
       const g = d.currentTarget.getBoundingClientRect(), k = d.clientY, V = g.top + g.height / 2;
       let S = _;
-      if (k >= V && (S = _ + 1), a.value < S && S--, !F(S) || S === a.value) {
+      if (k >= V && (S = _ + 1), a.value < S && S--, !N(S) || S === a.value) {
         B();
         return;
       }
@@ -1253,7 +1253,7 @@ const ie = new yo(), xo = {
             draggable: M(g),
             onDragstart: (V) => Q(V, k),
             onDragover: (V) => U(V, k),
-            onDragleave: N,
+            onDragleave: F,
             onDrop: (V) => L(V, k),
             onDragend: W
           }, [
@@ -1359,7 +1359,7 @@ const ie = new yo(), xo = {
       i.value = !0, r.value = !1, a.value && a.value.style.removeProperty("z-index"), setTimeout(() => {
         i.value = !1;
       }, 100);
-    }, F = (y) => {
+    }, N = (y) => {
       var E, $;
       !((E = l.value) != null && E.contains(y.target)) && !(($ = s.value) != null && $.contains(y.target)) && X();
     }, Q = () => {
@@ -1370,7 +1370,7 @@ const ie = new yo(), xo = {
       order: 999,
       // Найвищий порядок, щоб відображались останніми
       columns: y
-    }), N = (y) => {
+    }), F = (y) => {
       var O;
       const E = new Set(y.map((R) => R.prop)), $ = /* @__PURE__ */ new Set();
       (O = o.columnsSelector) == null || O.forEach((R) => {
@@ -1390,7 +1390,7 @@ const ie = new yo(), xo = {
       const v = [...o.columnsSelector || []];
       J.length > 0 && v.push(U(J)), u.value = v;
     }, L = () => {
-      N(o.allColumns), ie.open({
+      F(o.allColumns), ie.open({
         component: zo,
         title: "Управління колонками таблиці",
         props: {
@@ -1399,7 +1399,7 @@ const ie = new yo(), xo = {
           columnsSelector: u.value,
           // Передаємо оновлені доступні колонки
           "onUpdate-columns": (y) => {
-            console.log("ColumnActions отримав оновлені колонки:", y), n("update-columns", y), N(y);
+            console.log("ColumnActions отримав оновлені колонки:", y), n("update-columns", y), F(y);
           }
         },
         size: "large",
@@ -1407,9 +1407,9 @@ const ie = new yo(), xo = {
       }), X();
     }, W = () => o.column.pinnedLeft, B = () => o.column.pinnedRight, G = () => W() || B();
     return ve(() => {
-      document.addEventListener("click", F), l.value && (a.value = l.value.closest("th")), N(o.allColumns);
+      document.addEventListener("click", N), l.value && (a.value = l.value.closest("th")), F(o.allColumns);
     }), $e(() => {
-      document.removeEventListener("click", F);
+      document.removeEventListener("click", N);
     }), (y, E) => (p(), m("div", {
       ref_key: "triggerRef",
       ref: l,
@@ -1439,41 +1439,44 @@ const ie = new yo(), xo = {
 }), Wo = { class: "vt-table" }, Do = { class: "vt-th__content" }, Po = { class: "vt-th__content" }, Ao = { class: "vt-th__label" }, Oo = {
   key: 0,
   class: "vt-th__sortable"
-}, jo = ["data-resizer", "onMousedown"], Fo = {
+}, jo = ["data-resizer", "onMousedown"], No = {
   key: 0,
   class: "vt-table__empty-row"
-}, No = ["colspan"], Zo = { class: "vt-table__empty-content" }, Uo = ["onClick"], qo = { class: "vt-table__cell-content" }, Xo = { class: "vt-table__cell-content vt-table__cell-content--ellipsis" }, Go = { key: 1 }, Ko = ["data-resizer", "onMousedown"], Yo = {
+}, Fo = ["colspan"], Zo = { class: "vt-table__empty-content" }, Uo = ["onClick"], qo = { class: "vt-table__cell-content" }, Xo = { class: "vt-table__cell-content vt-table__cell-content--ellipsis" }, Go = { key: 1 }, Ko = ["data-resizer", "onMousedown"], Yo = {
   key: 0,
   class: "vt-table__summary"
 }, Jo = { class: "vt-table__cell-content vt-table__cell-content--summary" }, ye = 50, Qo = /* @__PURE__ */ le({
   __name: "VTable",
   props: /* @__PURE__ */ Re({
     data: {},
-    maxHeight: {},
+    maxHeight: { default: void 0 },
     defaultSort: {},
-    showSummary: { type: Boolean },
-    summaryMethod: { type: Function },
-    columnsSelector: {},
-    selectable: { type: Boolean },
-    selectionKey: {},
-    defaultSelection: {},
-    selectOnClickRow: { type: Boolean },
-    highlightCurrentRow: { type: Boolean },
-    allData: {},
-    columns: {}
+    showSummary: { type: Boolean, default: !1 },
+    summaryMethod: {},
+    columnsSelector: { default: () => [] },
+    selectable: { type: Boolean, default: !1 },
+    selectionKey: { default: "id" },
+    defaultSelection: { default: () => [] },
+    selectOnClickRow: { type: Boolean, default: !1 },
+    highlightCurrentRow: { type: Boolean, default: !1 },
+    allData: { default: void 0 },
+    columns: { default: () => [] }
   }, {
-    columns: { required: !1 },
+    columns: {
+      required: !1,
+      default: void 0
+    },
     columnsModifiers: {}
   }),
   emits: /* @__PURE__ */ Re(["sort-change", "selection-change", "current-change", "row-click", "update:columns", "column-pin", "column-resize", "column-visibility", "column-sort", "columns-change", "infinity-scroll"], ["update:columns"]),
   setup(t, { expose: e, emit: o }) {
-    const n = t, s = ct(t, "columns"), l = o, a = A({}), r = A(), i = ut([]), u = A(n.defaultSort || null), c = x(() => s.value !== void 0), b = x(() => n.data && n.data.length > 0), M = A(!1), X = A(0);
-    let F = null;
+    const n = t, s = o, l = ct(t, "columns"), a = A({}), r = A(), i = ut([]), u = A(n.defaultSort || null), c = x(() => l.value !== void 0), b = x(() => n.data && n.data.length > 0), M = A(!1), X = A(0);
+    let N = null;
     const Q = () => {
-      c.value && s.value ? i.splice(0, i.length, ...s.value) : n.columns && i.splice(0, i.length, ...n.columns);
+      c.value && l.value ? i.splice(0, i.length, ...l.value) : n.columns && n.columns.length > 0 && i.splice(0, i.length, ...n.columns);
     };
     me(
-      () => s.value,
+      () => l.value,
       (f) => {
         f && c.value && i.splice(0, i.length, ...f);
       },
@@ -1485,7 +1488,7 @@ const ie = new yo(), xo = {
       },
       { deep: !0 }
     ), dt("vt-table-columns", i);
-    const { sortedColumns: U, getDefaultColumnWidth: N, getStickyOffset: L } = vo(i), { getTableWrapperStyle: W, getColumnStyle: B, getHeaderStyle: G, getFooterStyle: y } = fo(n), { onMouseDown: E } = _o(), $ = x(() => bo(n.data, u.value, i)), J = x(() => n.allData || n.data), v = n.selectable ? go(n, $, l, J) : null, O = () => ({
+    const { sortedColumns: U, getDefaultColumnWidth: F, getStickyOffset: L } = vo(i), { getTableWrapperStyle: W, getColumnStyle: B, getHeaderStyle: G, getFooterStyle: y } = fo(n), { onMouseDown: E } = _o(), $ = x(() => bo(n.data, u.value, i)), J = x(() => n.allData || n.data), v = n.selectable ? go(n, $, s, J) : null, O = () => ({
       width: `${ye}px`,
       minWidth: `${ye}px`,
       maxWidth: `${ye}px`,
@@ -1511,9 +1514,9 @@ const ie = new yo(), xo = {
     }, d = () => {
       if (!r.value || M.value) return;
       const f = r.value, C = f.scrollTop, I = f.scrollHeight, T = f.clientHeight, P = 30;
-      F && clearTimeout(F), F = setTimeout(() => {
+      N && clearTimeout(N), N = setTimeout(() => {
         const fe = C - X.value > 1, w = I - C - T <= P, ce = I - C - T <= 5;
-        X.value = C, fe && (w || ce) && (M.value = !0, l("infinity-scroll"), setTimeout(() => {
+        X.value = C, fe && (w || ce) && (M.value = !0, s("infinity-scroll"), setTimeout(() => {
           M.value = !1;
         }, 1e3));
       }, 50);
@@ -1523,12 +1526,12 @@ const ie = new yo(), xo = {
     ve(() => {
       r.value && r.value.addEventListener("scroll", d);
     }), $e(() => {
-      F && clearTimeout(F), r.value && r.value.removeEventListener("scroll", d);
+      N && clearTimeout(N), r.value && r.value.removeEventListener("scroll", d);
     });
     const g = (f, C) => {
       ko(f, C, (I) => {
         var T, P;
-        ((T = u.value) == null ? void 0 : T.prop) === f.prop && u.value.direction === C ? u.value = null : u.value = I, l("sort-change", {
+        ((T = u.value) == null ? void 0 : T.prop) === f.prop && u.value.direction === C ? u.value = null : u.value = I, s("sort-change", {
           column: f,
           direction: ((P = u.value) == null ? void 0 : P.direction) || null,
           prop: f.prop,
@@ -1540,20 +1543,20 @@ const ie = new yo(), xo = {
         pinnedLeft: C === "left",
         pinnedRight: C === "right"
       };
-      S(f.prop, I), l("column-pin", { column: { ...f, ...I }, position: C });
+      S(f.prop, I), s("column-pin", { column: { ...f, ...I }, position: C });
     }, V = (f) => {
-      i.splice(0, i.length, ...f), c.value && (s.value = [...f]), l("columns-change", [...f]);
+      i.splice(0, i.length, ...f), c.value && (l.value = [...f]), s("columns-change", [...f]);
     }, S = (f, C) => {
       const I = i.findIndex((T) => T.prop === f);
       if (I !== -1) {
-        if (Object.assign(i[I], C), c.value && s.value) {
-          const T = s.value.findIndex((P) => P.prop === f);
+        if (Object.assign(i[I], C), c.value && l.value) {
+          const T = l.value.findIndex((P) => P.prop === f);
           if (T !== -1) {
-            const P = [...s.value];
-            P[T] = { ...P[T], ...C }, s.value = P;
+            const P = [...l.value];
+            P[T] = { ...P[T], ...C }, l.value = P;
           }
         }
-        l("columns-change", [...i]);
+        s("columns-change", [...i]);
       } else
         console.error(
           "Колонку не знайдено:",
@@ -1562,7 +1565,7 @@ const ie = new yo(), xo = {
           i.map((T) => T.prop)
         );
     }, ee = (f, C, I) => {
-      l("row-click", { row: f, column: C, event: I }), n.highlightCurrentRow && v && v.setCurrentRow(f);
+      s("row-click", { row: f, column: C, event: I }), n.highlightCurrentRow && v && v.setCurrentRow(f);
     }, Ce = (f, C, I) => {
       I.stopPropagation(), v && v.toggleRowSelection(C, f);
     }, Ue = (f, C) => {
@@ -1570,15 +1573,15 @@ const ie = new yo(), xo = {
     }, Se = (f, C) => {
       f && (a.value[C] = f);
     }, Ie = (f, C) => {
-      const I = C.width || N();
-      E(f, C, N, (T) => {
-        S(C.prop, { width: T }), l("column-resize", {
+      const I = C.width || F();
+      E(f, C, F, (T) => {
+        S(C.prop, { width: T }), s("column-resize", {
           column: { ...C, width: T },
           width: T,
           oldWidth: I
         });
       });
-    }, qe = (f, C) => B(f, C, L, N), Xe = (f, C) => G(f, C, L, N), Ge = (f, C) => y(f, C, L, N), Ke = (f, C) => {
+    }, qe = (f, C) => B(f, C, L, F), Xe = (f, C) => G(f, C, L, F), Ge = (f, C) => y(f, C, L, F), Ke = (f, C) => {
       if (!C || !C.prop) return "";
       const I = f[C.prop];
       return I == null ? "" : String(I);
@@ -1623,7 +1626,7 @@ const ie = new yo(), xo = {
       // Додаємо метод для скидання infinity scroll
     }), (f, C) => {
       var T, P, de, fe;
-      const I = Fe("tooltip");
+      const I = Ne("tooltip");
       return p(), m("div", {
         ref_key: "tableWrapperRef",
         ref: r,
@@ -1752,7 +1755,7 @@ const ie = new yo(), xo = {
                   }, null, 40, Ko)
                 ], 6))), 128))
               ], 10, Uo);
-            }), 128)) : (p(), m("tr", Fo, [
+            }), 128)) : (p(), m("tr", No, [
               h("td", {
                 colspan: q(U).length + (n.selectable ? 1 : 0),
                 class: "vt-table__empty-cell"
@@ -1764,7 +1767,7 @@ const ie = new yo(), xo = {
                   }),
                   C[0] || (C[0] = h("span", { class: "vt-table__empty-text" }, "Немає даних!", -1))
                 ])
-              ], 8, No)
+              ], 8, Fo)
             ]))
           ]),
           Je.value ? (p(), m("tfoot", Yo, [
@@ -2002,24 +2005,32 @@ const ie = new yo(), xo = {
   beforeUnmount(t) {
     t.__tooltipEl && t.__tooltipEl.parentElement && (t.__tooltipEl.parentElement.removeChild(t.__tooltipEl), delete t.__tooltipEl), t.__mouseenterHandler && (t.removeEventListener("mouseenter", t.__mouseenterHandler), delete t.__mouseenterHandler), t.__mouseleaveHandler && (t.removeEventListener("mouseleave", t.__mouseleaveHandler), delete t.__mouseleaveHandler), t.__scrollHandler && (window.removeEventListener("scroll", t.__scrollHandler, !0), window.removeEventListener("resize", t.__scrollHandler), delete t.__scrollHandler);
   }
+}, ll = {
+  sortable: !0,
+  actionColumn: !1,
+  showOverflowTooltip: !0,
+  visible: !0,
+  pinnedLeft: !1,
+  pinnedRight: !1
 }, nl = {
   install(t, e = {}) {
     const { prefix: o = "V", modal: n = !0 } = e;
-    t.component(`${o}Button`, ge), t.component(`${o}Icon`, Y), t.component(`${o}Loader`, Ne), t.component(`${o}Modal`, Ze), t.component(`${o}Pagination`, po), t.component(`${o}Checkbox`, ue), t.component(`${o}Table`, Qo), t.component(`${o}TableColumn`, el), t.directive("tooltip", tl), n && t.use(xo);
+    t.component(`${o}Button`, ge), t.component(`${o}Icon`, Y), t.component(`${o}Loader`, Fe), t.component(`${o}Modal`, Ze), t.component(`${o}Pagination`, po), t.component(`${o}Checkbox`, ue), t.component(`${o}Table`, Qo), t.component(`${o}TableColumn`, el), t.directive("tooltip", tl), n && t.use(xo);
   }
-}, ll = nl.install;
+}, sl = nl.install;
 export {
+  ll as DEFAULT_COLUMN_CONFIG,
   ge as VButton,
   ue as VCheckbox,
   Y as VIcon,
-  Ne as VLoader,
+  Fe as VLoader,
   Ze as VModal,
   xo as VModalPlugin,
   po as VPagination,
   Qo as VTable,
   el as VTableColumn,
   nl as default,
-  ll as install,
+  sl as install,
   ie as modalManager,
   tl as tooltipDirective
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "voiptime-components",
   "private": false,
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -16,7 +16,8 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs"
     },
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/index.css",
+    "./scss/mixins": "./src/assets/_mixins.scss"
   },
   "scripts": {
     "dev": "vite",