@shtabapp/ui-kit 1.88.0 → 1.88.2
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.
- package/CHANGELOG.md +13 -0
- package/dist/components/STable/STable.vue.d.ts.map +1 -1
- package/dist/components/STable/STable.vue_vue_type_script_setup_true_lang.cjs +6 -1
- package/dist/components/STable/STable.vue_vue_type_script_setup_true_lang.js +7 -2
- package/dist/components/STable/utils/useTableColumnResize.cjs +2 -2
- package/dist/components/STable/utils/useTableColumnResize.d.ts.map +1 -1
- package/dist/components/STable/utils/useTableColumnResize.js +2 -2
- package/dist/components/STable/utils/useTableColumns.cjs +14 -7
- package/dist/components/STable/utils/useTableColumns.d.ts +6 -1
- package/dist/components/STable/utils/useTableColumns.d.ts.map +1 -1
- package/dist/components/STable/utils/useTableColumns.js +14 -7
- package/dist/components/STable/utils/useTableContentWidths.cjs +61 -0
- package/dist/components/STable/utils/useTableContentWidths.d.ts +24 -0
- package/dist/components/STable/utils/useTableContentWidths.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableContentWidths.js +61 -0
- package/dist/uikit-components.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
## [@shtabapp/ui-kit-v1.88.2](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.88.1...@shtabapp/ui-kit@1.88.2) (2026-11-02)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
* **table:** замер контента колонки — по изменениям DOM, а не по смене строк ([d958517](https://gitlab.com/mstikharev/shtab-ui-kit/commit/d9585173383caeb3bf11ba66fd4b9fa025ce953f))
|
|
6
|
+
* **table:** колонка не бывает уже кнопок и своего minWidth ([87f9d35](https://gitlab.com/mstikharev/shtab-ui-kit/commit/87f9d3562ec3e696158dda5c363b0b940c100ea7))
|
|
7
|
+
|
|
8
|
+
## [@shtabapp/ui-kit-v1.88.1](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.88.0...@shtabapp/ui-kit@1.88.1) (2026-11-02)
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **input:** контур поля в покое — спокойный тон, как у заполненного ([d9094e4](https://gitlab.com/mstikharev/shtab-ui-kit/commit/d9094e408ab0a0cedf4d276323a02ef869d2999c))
|
|
13
|
+
|
|
1
14
|
## [@shtabapp/ui-kit-v1.88.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.87.0...@shtabapp/ui-kit@1.88.0) (2026-10-31)
|
|
2
15
|
|
|
3
16
|
### Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"STable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/STable/STable.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"STable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/STable/STable.vue"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,7 @@ const require_STableSkeletonRow = require("./parts/STableSkeletonRow.vue.cjs");
|
|
|
21
21
|
const require_useTableColumnDnd = require("./utils/useTableColumnDnd.cjs");
|
|
22
22
|
const require_useTableCellPlans = require("./utils/useTableCellPlans.cjs");
|
|
23
23
|
const require_useTableColumnResize = require("./utils/useTableColumnResize.cjs");
|
|
24
|
+
const require_useTableContentWidths = require("./utils/useTableContentWidths.cjs");
|
|
24
25
|
const require_useTableGridKeyboard = require("./utils/useTableGridKeyboard.cjs");
|
|
25
26
|
const require_useTableRowDnd = require("./utils/useTableRowDnd.cjs");
|
|
26
27
|
const require_useTableRenderEntries = require("./utils/useTableRenderEntries.cjs");
|
|
@@ -263,6 +264,7 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
|
|
|
263
264
|
const gridExitRef = (0, vue.useTemplateRef)("gridExitRef");
|
|
264
265
|
const tableRootRef = (0, vue.useTemplateRef)("tableRootRef");
|
|
265
266
|
const { width: scrollClientWidth, height: scrollClientHeight } = (0, _vueuse_core.useElementSize)(scrollElementRef);
|
|
267
|
+
const { contentWidths, scheduleContentMeasure } = require_useTableContentWidths.useTableContentWidths({ scrollElement: scrollElementRef });
|
|
266
268
|
const { primaryColumnKey, columnDescriptors, columnCssVars, totalWidth, columnCount } = require_useTableColumns.useTableColumns({
|
|
267
269
|
columns: () => __props.columns,
|
|
268
270
|
columnOrder,
|
|
@@ -275,7 +277,8 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
|
|
|
275
277
|
columnsManagerWidth: () => __props.columnsManagerWidth,
|
|
276
278
|
columnsResizable: () => __props.columnsResizable,
|
|
277
279
|
columnsDraggable: () => __props.columnsDraggable,
|
|
278
|
-
viewportWidth: () => scrollClientWidth.value
|
|
280
|
+
viewportWidth: () => scrollClientWidth.value,
|
|
281
|
+
contentWidths
|
|
279
282
|
});
|
|
280
283
|
const { treeIndex, snapshot, flatRows, toggleExpanded, expandAll, collapseAll } = require_useFlatTableRows.useFlatTableRows({
|
|
281
284
|
items: () => __props.items,
|
|
@@ -350,6 +353,8 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.d
|
|
|
350
353
|
enabled: () => virtualEnabled.value && __props.scrollSeekPlaceholders
|
|
351
354
|
});
|
|
352
355
|
(0, vue.watch)(hydratedKeys, measureNewRows, { flush: "post" });
|
|
356
|
+
(0, vue.watch)(columnDescriptors, scheduleContentMeasure, { flush: "post" });
|
|
357
|
+
(0, vue.onMounted)(scheduleContentMeasure);
|
|
353
358
|
const { resizingColumnKey, handleResizeHandlePointerdown, handleResizeHandleKeydown, handleResizeHandleDblclick } = require_useTableColumnResize.useTableColumnResize({
|
|
354
359
|
tableRootElement: tableRootRef,
|
|
355
360
|
scrollElement: scrollElementRef,
|
|
@@ -21,6 +21,7 @@ import STableSkeletonRow_default from "./parts/STableSkeletonRow.vue.js";
|
|
|
21
21
|
import { useTableColumnDnd } from "./utils/useTableColumnDnd.js";
|
|
22
22
|
import { useTableCellPlans } from "./utils/useTableCellPlans.js";
|
|
23
23
|
import { useTableColumnResize } from "./utils/useTableColumnResize.js";
|
|
24
|
+
import { useTableContentWidths } from "./utils/useTableContentWidths.js";
|
|
24
25
|
import { useTableGridKeyboard } from "./utils/useTableGridKeyboard.js";
|
|
25
26
|
import { useTableRowDnd } from "./utils/useTableRowDnd.js";
|
|
26
27
|
import { useTableRenderEntries } from "./utils/useTableRenderEntries.js";
|
|
@@ -31,7 +32,7 @@ import { useTableRowHydration } from "./utils/useTableRowHydration.js";
|
|
|
31
32
|
import { useTableStickyRows } from "./utils/useTableStickyRows.js";
|
|
32
33
|
import { useTableStyleVars } from "./utils/useTableStyleVars.js";
|
|
33
34
|
import { useTableVirtualRows } from "./utils/useTableVirtualRows.js";
|
|
34
|
-
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isMemoSame, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
35
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isMemoSame, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
35
36
|
import { SIcon, SSeparator, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
|
|
36
37
|
import { useElementSize } from "@vueuse/core";
|
|
37
38
|
//#region src/components/STable/STable.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -263,6 +264,7 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
|
|
|
263
264
|
const gridExitRef = useTemplateRef("gridExitRef");
|
|
264
265
|
const tableRootRef = useTemplateRef("tableRootRef");
|
|
265
266
|
const { width: scrollClientWidth, height: scrollClientHeight } = useElementSize(scrollElementRef);
|
|
267
|
+
const { contentWidths, scheduleContentMeasure } = useTableContentWidths({ scrollElement: scrollElementRef });
|
|
266
268
|
const { primaryColumnKey, columnDescriptors, columnCssVars, totalWidth, columnCount } = useTableColumns({
|
|
267
269
|
columns: () => __props.columns,
|
|
268
270
|
columnOrder,
|
|
@@ -275,7 +277,8 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
|
|
|
275
277
|
columnsManagerWidth: () => __props.columnsManagerWidth,
|
|
276
278
|
columnsResizable: () => __props.columnsResizable,
|
|
277
279
|
columnsDraggable: () => __props.columnsDraggable,
|
|
278
|
-
viewportWidth: () => scrollClientWidth.value
|
|
280
|
+
viewportWidth: () => scrollClientWidth.value,
|
|
281
|
+
contentWidths
|
|
279
282
|
});
|
|
280
283
|
const { treeIndex, snapshot, flatRows, toggleExpanded, expandAll, collapseAll } = useFlatTableRows({
|
|
281
284
|
items: () => __props.items,
|
|
@@ -350,6 +353,8 @@ var STable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
|
|
|
350
353
|
enabled: () => virtualEnabled.value && __props.scrollSeekPlaceholders
|
|
351
354
|
});
|
|
352
355
|
watch(hydratedKeys, measureNewRows, { flush: "post" });
|
|
356
|
+
watch(columnDescriptors, scheduleContentMeasure, { flush: "post" });
|
|
357
|
+
onMounted(scheduleContentMeasure);
|
|
353
358
|
const { resizingColumnKey, handleResizeHandlePointerdown, handleResizeHandleKeydown, handleResizeHandleDblclick } = useTableColumnResize({
|
|
354
359
|
tableRootElement: tableRootRef,
|
|
355
360
|
scrollElement: scrollElementRef,
|
|
@@ -13,8 +13,8 @@ var useTableColumnResize = ({ tableRootElement, scrollElement, columnDescriptors
|
|
|
13
13
|
return resizeSession.value?.columnKey;
|
|
14
14
|
});
|
|
15
15
|
const clampColumnWidth = (descriptor, nextWidth) => {
|
|
16
|
-
const
|
|
17
|
-
return
|
|
16
|
+
const clampedMax = descriptor.maxWidth ? Math.min(descriptor.maxWidth, nextWidth) : nextWidth;
|
|
17
|
+
return Math.max(descriptor.minWidth, clampedMax);
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* Live-запись ширины жеста и кумулятивных sticky-офсетов, без vdom.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/components/STable/utils/useTableColumnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAS/F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAEhE,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACjF,gBAAgB,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,aAAa,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACtC,iBAAiB,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;IAChE,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAA;IACrD,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAClC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,yEAAyE;IACzE,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B;AAUD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,4GAQzE,4BAA4B,CAAC,KAAK,CAAC;;
|
|
1
|
+
{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/components/STable/utils/useTableColumnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAS/F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAEhE,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACjF,gBAAgB,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,aAAa,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACtC,iBAAiB,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;IAChE,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,CAAA;IACrD,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAClC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,yEAAyE;IACzE,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B;AAUD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,4GAQzE,4BAA4B,CAAC,KAAK,CAAC;;2CAkGU,YAAY,aAAa,MAAM;uCA+EnC,aAAa,aAAa,MAAM;4CAwB3B,MAAM;CAyCtD,CAAA"}
|
|
@@ -13,8 +13,8 @@ var useTableColumnResize = ({ tableRootElement, scrollElement, columnDescriptors
|
|
|
13
13
|
return resizeSession.value?.columnKey;
|
|
14
14
|
});
|
|
15
15
|
const clampColumnWidth = (descriptor, nextWidth) => {
|
|
16
|
-
const
|
|
17
|
-
return
|
|
16
|
+
const clampedMax = descriptor.maxWidth ? Math.min(descriptor.maxWidth, nextWidth) : nextWidth;
|
|
17
|
+
return Math.max(descriptor.minWidth, clampedMax);
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* Live-запись ширины жеста и кумулятивных sticky-офсетов, без vdom.
|
|
@@ -110,7 +110,7 @@ var distributeTableColumnWidths = (descriptors, viewportWidth) => {
|
|
|
110
110
|
} : descriptor;
|
|
111
111
|
});
|
|
112
112
|
};
|
|
113
|
-
var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth = 32, columnsResizable, columnsDraggable, viewportWidth }) => {
|
|
113
|
+
var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth = 32, columnsResizable, columnsDraggable, viewportWidth, contentWidths }) => {
|
|
114
114
|
const primaryColumnKey = (0, vue.computed)(() => {
|
|
115
115
|
const sourceColumns = (0, vue.toValue)(columns);
|
|
116
116
|
return sourceColumns.find((tableColumn) => tableColumn.primary)?.key ?? sourceColumns[0]?.key;
|
|
@@ -163,21 +163,27 @@ var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasI
|
|
|
163
163
|
* Базовая ширина: модель (ресайз/автофит) → `width` конфига → дефолт. Колонка без явной
|
|
164
164
|
* ширины гибкая — заполняет свободную ширину вьюпорта; sticky-right всегда фиксированные.
|
|
165
165
|
*/
|
|
166
|
-
const resolveColumnBaseWidth = (tableColumn, isPrimaryColumn) => {
|
|
166
|
+
const resolveColumnBaseWidth = (tableColumn, isPrimaryColumn, minWidth) => {
|
|
167
167
|
const modelWidth = columnWidths.value?.[tableColumn.key];
|
|
168
168
|
if (modelWidth) return {
|
|
169
|
-
baseWidth: modelWidth,
|
|
169
|
+
baseWidth: Math.max(minWidth, modelWidth),
|
|
170
170
|
flexible: false
|
|
171
171
|
};
|
|
172
172
|
if (tableColumn.width) return {
|
|
173
|
-
baseWidth: tableColumn.width,
|
|
173
|
+
baseWidth: Math.max(minWidth, tableColumn.width),
|
|
174
174
|
flexible: false
|
|
175
175
|
};
|
|
176
176
|
return {
|
|
177
|
-
baseWidth: resolveDefaultColumnWidth(isPrimaryColumn),
|
|
177
|
+
baseWidth: Math.max(minWidth, resolveDefaultColumnWidth(isPrimaryColumn)),
|
|
178
178
|
flexible: tableColumn.sticky !== require_STable_types.ESTableColumnSticky.RIGHT
|
|
179
179
|
};
|
|
180
180
|
};
|
|
181
|
+
/** Нижняя граница ширины: `minWidth` конфига и замеренный несжимаемый контент ячеек. */
|
|
182
|
+
const resolveColumnMinWidth = (tableColumn) => {
|
|
183
|
+
const configMinWidth = tableColumn.minWidth ?? 60;
|
|
184
|
+
const contentWidth = contentWidths?.value[tableColumn.key] ?? 0;
|
|
185
|
+
return Math.max(configMinWidth, contentWidth);
|
|
186
|
+
};
|
|
181
187
|
/** Правые служебные колонки: right-edge, затем крайняя колонка управления колонками. */
|
|
182
188
|
const pushTrailingServiceColumns = (pushServiceColumn) => {
|
|
183
189
|
if ((0, vue.toValue)(hasRightEdge)) pushServiceColumn("rightEdge", 40);
|
|
@@ -220,14 +226,15 @@ var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasI
|
|
|
220
226
|
const isPrimaryColumn = tableColumn.key === primaryColumnKey.value;
|
|
221
227
|
const isLeadingColumn = Boolean(tableColumn.leading) && !isPrimaryColumn;
|
|
222
228
|
const sticky = isPrimaryColumn || isLeadingColumn ? require_STable_types.ESTableColumnSticky.LEFT : tableColumn.sticky;
|
|
223
|
-
const
|
|
229
|
+
const minWidth = resolveColumnMinWidth(tableColumn);
|
|
230
|
+
const { baseWidth, flexible } = resolveColumnBaseWidth(tableColumn, isPrimaryColumn, minWidth);
|
|
224
231
|
descriptors.push({
|
|
225
232
|
key: tableColumn.key,
|
|
226
233
|
column: tableColumn,
|
|
227
234
|
width: baseWidth,
|
|
228
235
|
baseWidth,
|
|
229
236
|
flexible,
|
|
230
|
-
minWidth
|
|
237
|
+
minWidth,
|
|
231
238
|
maxWidth: tableColumn.maxWidth,
|
|
232
239
|
sticky,
|
|
233
240
|
align: tableColumn.align ?? require_STable_types.ESTableColumnAlign.LEFT,
|
|
@@ -76,8 +76,13 @@ export interface IUseTableColumnsOptions<TItem extends Record<string, unknown>>
|
|
|
76
76
|
columnsDraggable: MaybeRefOrGetter<boolean>;
|
|
77
77
|
/** Ширина вьюпорта скроллера (content-box, без скроллбара) — излишек уходит гибким колонкам. */
|
|
78
78
|
viewportWidth: MaybeRefOrGetter<number>;
|
|
79
|
+
/**
|
|
80
|
+
* Замеренная ширина несжимаемого контента ячеек (кнопки, теги) по ключу колонки: колонка не
|
|
81
|
+
* бывает уже, иначе контент вылезает из ячейки под sticky-right и за край таблицы.
|
|
82
|
+
*/
|
|
83
|
+
contentWidths?: Ref<Record<string, number>>;
|
|
79
84
|
}
|
|
80
|
-
export declare const useTableColumns: <TItem extends Record<string, unknown>>({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth, columnsResizable, columnsDraggable, viewportWidth, }: IUseTableColumnsOptions<TItem>) => {
|
|
85
|
+
export declare const useTableColumns: <TItem extends Record<string, unknown>>({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth, columnsResizable, columnsDraggable, viewportWidth, contentWidths, }: IUseTableColumnsOptions<TItem>) => {
|
|
81
86
|
primaryColumnKey: import("vue").ComputedRef<string | undefined>;
|
|
82
87
|
orderedDataColumns: import("vue").ComputedRef<ISTableColumn<TItem>[]>;
|
|
83
88
|
columnDescriptors: import("vue").ComputedRef<TSTableColumnDescriptor<TItem>[]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/STable/utils/useTableColumns.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useTableColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/STable/utils/useTableColumns.ts"],"names":[],"mappings":"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"}
|
|
@@ -110,7 +110,7 @@ var distributeTableColumnWidths = (descriptors, viewportWidth) => {
|
|
|
110
110
|
} : descriptor;
|
|
111
111
|
});
|
|
112
112
|
};
|
|
113
|
-
var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth = 32, columnsResizable, columnsDraggable, viewportWidth }) => {
|
|
113
|
+
var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth = 32, columnsResizable, columnsDraggable, viewportWidth, contentWidths }) => {
|
|
114
114
|
const primaryColumnKey = computed(() => {
|
|
115
115
|
const sourceColumns = toValue(columns);
|
|
116
116
|
return sourceColumns.find((tableColumn) => tableColumn.primary)?.key ?? sourceColumns[0]?.key;
|
|
@@ -163,21 +163,27 @@ var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasI
|
|
|
163
163
|
* Базовая ширина: модель (ресайз/автофит) → `width` конфига → дефолт. Колонка без явной
|
|
164
164
|
* ширины гибкая — заполняет свободную ширину вьюпорта; sticky-right всегда фиксированные.
|
|
165
165
|
*/
|
|
166
|
-
const resolveColumnBaseWidth = (tableColumn, isPrimaryColumn) => {
|
|
166
|
+
const resolveColumnBaseWidth = (tableColumn, isPrimaryColumn, minWidth) => {
|
|
167
167
|
const modelWidth = columnWidths.value?.[tableColumn.key];
|
|
168
168
|
if (modelWidth) return {
|
|
169
|
-
baseWidth: modelWidth,
|
|
169
|
+
baseWidth: Math.max(minWidth, modelWidth),
|
|
170
170
|
flexible: false
|
|
171
171
|
};
|
|
172
172
|
if (tableColumn.width) return {
|
|
173
|
-
baseWidth: tableColumn.width,
|
|
173
|
+
baseWidth: Math.max(minWidth, tableColumn.width),
|
|
174
174
|
flexible: false
|
|
175
175
|
};
|
|
176
176
|
return {
|
|
177
|
-
baseWidth: resolveDefaultColumnWidth(isPrimaryColumn),
|
|
177
|
+
baseWidth: Math.max(minWidth, resolveDefaultColumnWidth(isPrimaryColumn)),
|
|
178
178
|
flexible: tableColumn.sticky !== ESTableColumnSticky.RIGHT
|
|
179
179
|
};
|
|
180
180
|
};
|
|
181
|
+
/** Нижняя граница ширины: `minWidth` конфига и замеренный несжимаемый контент ячеек. */
|
|
182
|
+
const resolveColumnMinWidth = (tableColumn) => {
|
|
183
|
+
const configMinWidth = tableColumn.minWidth ?? 60;
|
|
184
|
+
const contentWidth = contentWidths?.value[tableColumn.key] ?? 0;
|
|
185
|
+
return Math.max(configMinWidth, contentWidth);
|
|
186
|
+
};
|
|
181
187
|
/** Правые служебные колонки: right-edge, затем крайняя колонка управления колонками. */
|
|
182
188
|
const pushTrailingServiceColumns = (pushServiceColumn) => {
|
|
183
189
|
if (toValue(hasRightEdge)) pushServiceColumn("rightEdge", 40);
|
|
@@ -220,14 +226,15 @@ var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasI
|
|
|
220
226
|
const isPrimaryColumn = tableColumn.key === primaryColumnKey.value;
|
|
221
227
|
const isLeadingColumn = Boolean(tableColumn.leading) && !isPrimaryColumn;
|
|
222
228
|
const sticky = isPrimaryColumn || isLeadingColumn ? ESTableColumnSticky.LEFT : tableColumn.sticky;
|
|
223
|
-
const
|
|
229
|
+
const minWidth = resolveColumnMinWidth(tableColumn);
|
|
230
|
+
const { baseWidth, flexible } = resolveColumnBaseWidth(tableColumn, isPrimaryColumn, minWidth);
|
|
224
231
|
descriptors.push({
|
|
225
232
|
key: tableColumn.key,
|
|
226
233
|
column: tableColumn,
|
|
227
234
|
width: baseWidth,
|
|
228
235
|
baseWidth,
|
|
229
236
|
flexible,
|
|
230
|
-
minWidth
|
|
237
|
+
minWidth,
|
|
231
238
|
maxWidth: tableColumn.maxWidth,
|
|
232
239
|
sticky,
|
|
233
240
|
align: tableColumn.align ?? ESTableColumnAlign.LEFT,
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
let vue = require("vue");
|
|
2
|
+
let _vueuse_core = require("@vueuse/core");
|
|
3
|
+
//#region src/components/STable/utils/useTableContentWidths.ts
|
|
4
|
+
/** Ячейки обычных строк тела: служебные колонки, групповые и футерные строки не меряются. */
|
|
5
|
+
var MEASURED_CELL_BODY_SELECTOR = "tbody tr.s-ui-table__row > td[data-column-key]:not([data-column-key^=\"__s-ui-table-\"]) > .s-ui-table__cell-body";
|
|
6
|
+
/**
|
|
7
|
+
* Ширина несжимаемого контента ячеек по колонкам. При `table-layout: fixed` ячейка не растит
|
|
8
|
+
* колонку: кнопки шире колонки вылезали из ячейки, уходили под sticky-right колонку управления и
|
|
9
|
+
* растягивали скролл за край таблицы — прокрутка так и не показывала их целиком. Замер находит
|
|
10
|
+
* ячейки, чей контент шире тела (`scrollWidth > clientWidth`), и поднимает нижнюю границу колонки.
|
|
11
|
+
*
|
|
12
|
+
* Текст с многоточием не переполняет тело (у него `min-width: 0` и свой `overflow`), поэтому
|
|
13
|
+
* колонки с текстом не растут. Граница только растёт: иначе колонка дёргалась бы при прокрутке
|
|
14
|
+
* виртуальных строк. Ячейка под ховером или фокусом пропускается — её раскрытые кнопки ячейки
|
|
15
|
+
* (`cell-actions`) временные. Потолок — как у автофита по даблклику.
|
|
16
|
+
*
|
|
17
|
+
* Контент растёт и без смены данных: иконка кнопки догружается асинхронно, шрифт подменяется
|
|
18
|
+
* после первого рендера. Поэтому замер идёт по любому изменению DOM таблицы и по `loadingdone`
|
|
19
|
+
* шрифтов — не чаще раза за кадр.
|
|
20
|
+
*/
|
|
21
|
+
var useTableContentWidths = ({ scrollElement }) => {
|
|
22
|
+
const contentWidths = (0, vue.ref)({});
|
|
23
|
+
let frameId;
|
|
24
|
+
const measureContentWidths = () => {
|
|
25
|
+
frameId = void 0;
|
|
26
|
+
const container = (0, vue.toValue)(scrollElement);
|
|
27
|
+
if (!container) return;
|
|
28
|
+
const nextWidths = {};
|
|
29
|
+
container.querySelectorAll(MEASURED_CELL_BODY_SELECTOR).forEach((cellBody) => {
|
|
30
|
+
const cell = cellBody.parentElement;
|
|
31
|
+
const columnKey = cell?.dataset.columnKey;
|
|
32
|
+
if (!(cellBody instanceof HTMLElement) || !cell || !columnKey) return;
|
|
33
|
+
const overflow = cellBody.scrollWidth - cellBody.clientWidth;
|
|
34
|
+
if (overflow <= 0 || cell.matches(":hover, :focus-within")) return;
|
|
35
|
+
const neededWidth = Math.min(640, Math.ceil(cell.offsetWidth + overflow));
|
|
36
|
+
if (neededWidth > (nextWidths[columnKey] ?? contentWidths.value[columnKey] ?? 0)) nextWidths[columnKey] = neededWidth;
|
|
37
|
+
});
|
|
38
|
+
if (Object.keys(nextWidths).length > 0) contentWidths.value = {
|
|
39
|
+
...contentWidths.value,
|
|
40
|
+
...nextWidths
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
const scheduleContentMeasure = () => {
|
|
44
|
+
if (frameId === void 0 && typeof requestAnimationFrame !== "undefined") frameId = requestAnimationFrame(measureContentWidths);
|
|
45
|
+
};
|
|
46
|
+
(0, _vueuse_core.useMutationObserver)(scrollElement, scheduleContentMeasure, {
|
|
47
|
+
childList: true,
|
|
48
|
+
subtree: true,
|
|
49
|
+
characterData: true
|
|
50
|
+
});
|
|
51
|
+
(0, _vueuse_core.useEventListener)(() => typeof document === "undefined" ? void 0 : document.fonts, "loadingdone", scheduleContentMeasure);
|
|
52
|
+
(0, _vueuse_core.tryOnScopeDispose)(() => {
|
|
53
|
+
if (frameId !== void 0) cancelAnimationFrame(frameId);
|
|
54
|
+
});
|
|
55
|
+
return {
|
|
56
|
+
contentWidths,
|
|
57
|
+
scheduleContentMeasure
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
//#endregion
|
|
61
|
+
exports.useTableContentWidths = useTableContentWidths;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type MaybeRefOrGetter } from 'vue';
|
|
2
|
+
export interface IUseTableContentWidthsOptions {
|
|
3
|
+
scrollElement: MaybeRefOrGetter<HTMLElement | null | undefined>;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Ширина несжимаемого контента ячеек по колонкам. При `table-layout: fixed` ячейка не растит
|
|
7
|
+
* колонку: кнопки шире колонки вылезали из ячейки, уходили под sticky-right колонку управления и
|
|
8
|
+
* растягивали скролл за край таблицы — прокрутка так и не показывала их целиком. Замер находит
|
|
9
|
+
* ячейки, чей контент шире тела (`scrollWidth > clientWidth`), и поднимает нижнюю границу колонки.
|
|
10
|
+
*
|
|
11
|
+
* Текст с многоточием не переполняет тело (у него `min-width: 0` и свой `overflow`), поэтому
|
|
12
|
+
* колонки с текстом не растут. Граница только растёт: иначе колонка дёргалась бы при прокрутке
|
|
13
|
+
* виртуальных строк. Ячейка под ховером или фокусом пропускается — её раскрытые кнопки ячейки
|
|
14
|
+
* (`cell-actions`) временные. Потолок — как у автофита по даблклику.
|
|
15
|
+
*
|
|
16
|
+
* Контент растёт и без смены данных: иконка кнопки догружается асинхронно, шрифт подменяется
|
|
17
|
+
* после первого рендера. Поэтому замер идёт по любому изменению DOM таблицы и по `loadingdone`
|
|
18
|
+
* шрифтов — не чаще раза за кадр.
|
|
19
|
+
*/
|
|
20
|
+
export declare const useTableContentWidths: ({ scrollElement }: IUseTableContentWidthsOptions) => {
|
|
21
|
+
contentWidths: import("vue").Ref<Record<string, number>, Record<string, number>>;
|
|
22
|
+
scheduleContentMeasure: () => void;
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useTableContentWidths.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableContentWidths.d.ts","sourceRoot":"","sources":["../../../../src/components/STable/utils/useTableContentWidths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAKzD,MAAM,WAAW,6BAA6B;IAC5C,aAAa,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;CAChE;AAMD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,GAAI,mBAAmB,6BAA6B;;;CAgErF,CAAA"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ref, toValue } from "vue";
|
|
2
|
+
import { tryOnScopeDispose, useEventListener, useMutationObserver } from "@vueuse/core";
|
|
3
|
+
//#region src/components/STable/utils/useTableContentWidths.ts
|
|
4
|
+
/** Ячейки обычных строк тела: служебные колонки, групповые и футерные строки не меряются. */
|
|
5
|
+
var MEASURED_CELL_BODY_SELECTOR = "tbody tr.s-ui-table__row > td[data-column-key]:not([data-column-key^=\"__s-ui-table-\"]) > .s-ui-table__cell-body";
|
|
6
|
+
/**
|
|
7
|
+
* Ширина несжимаемого контента ячеек по колонкам. При `table-layout: fixed` ячейка не растит
|
|
8
|
+
* колонку: кнопки шире колонки вылезали из ячейки, уходили под sticky-right колонку управления и
|
|
9
|
+
* растягивали скролл за край таблицы — прокрутка так и не показывала их целиком. Замер находит
|
|
10
|
+
* ячейки, чей контент шире тела (`scrollWidth > clientWidth`), и поднимает нижнюю границу колонки.
|
|
11
|
+
*
|
|
12
|
+
* Текст с многоточием не переполняет тело (у него `min-width: 0` и свой `overflow`), поэтому
|
|
13
|
+
* колонки с текстом не растут. Граница только растёт: иначе колонка дёргалась бы при прокрутке
|
|
14
|
+
* виртуальных строк. Ячейка под ховером или фокусом пропускается — её раскрытые кнопки ячейки
|
|
15
|
+
* (`cell-actions`) временные. Потолок — как у автофита по даблклику.
|
|
16
|
+
*
|
|
17
|
+
* Контент растёт и без смены данных: иконка кнопки догружается асинхронно, шрифт подменяется
|
|
18
|
+
* после первого рендера. Поэтому замер идёт по любому изменению DOM таблицы и по `loadingdone`
|
|
19
|
+
* шрифтов — не чаще раза за кадр.
|
|
20
|
+
*/
|
|
21
|
+
var useTableContentWidths = ({ scrollElement }) => {
|
|
22
|
+
const contentWidths = ref({});
|
|
23
|
+
let frameId;
|
|
24
|
+
const measureContentWidths = () => {
|
|
25
|
+
frameId = void 0;
|
|
26
|
+
const container = toValue(scrollElement);
|
|
27
|
+
if (!container) return;
|
|
28
|
+
const nextWidths = {};
|
|
29
|
+
container.querySelectorAll(MEASURED_CELL_BODY_SELECTOR).forEach((cellBody) => {
|
|
30
|
+
const cell = cellBody.parentElement;
|
|
31
|
+
const columnKey = cell?.dataset.columnKey;
|
|
32
|
+
if (!(cellBody instanceof HTMLElement) || !cell || !columnKey) return;
|
|
33
|
+
const overflow = cellBody.scrollWidth - cellBody.clientWidth;
|
|
34
|
+
if (overflow <= 0 || cell.matches(":hover, :focus-within")) return;
|
|
35
|
+
const neededWidth = Math.min(640, Math.ceil(cell.offsetWidth + overflow));
|
|
36
|
+
if (neededWidth > (nextWidths[columnKey] ?? contentWidths.value[columnKey] ?? 0)) nextWidths[columnKey] = neededWidth;
|
|
37
|
+
});
|
|
38
|
+
if (Object.keys(nextWidths).length > 0) contentWidths.value = {
|
|
39
|
+
...contentWidths.value,
|
|
40
|
+
...nextWidths
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
const scheduleContentMeasure = () => {
|
|
44
|
+
if (frameId === void 0 && typeof requestAnimationFrame !== "undefined") frameId = requestAnimationFrame(measureContentWidths);
|
|
45
|
+
};
|
|
46
|
+
useMutationObserver(scrollElement, scheduleContentMeasure, {
|
|
47
|
+
childList: true,
|
|
48
|
+
subtree: true,
|
|
49
|
+
characterData: true
|
|
50
|
+
});
|
|
51
|
+
useEventListener(() => typeof document === "undefined" ? void 0 : document.fonts, "loadingdone", scheduleContentMeasure);
|
|
52
|
+
tryOnScopeDispose(() => {
|
|
53
|
+
if (frameId !== void 0) cancelAnimationFrame(frameId);
|
|
54
|
+
});
|
|
55
|
+
return {
|
|
56
|
+
contentWidths,
|
|
57
|
+
scheduleContentMeasure
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
//#endregion
|
|
61
|
+
export { useTableContentWidths };
|