@studio-west/component-sw 0.12.12 → 0.12.14

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 (11) hide show
  1. package/README.md +163 -66
  2. package/dist/SwTable-BryA1Lud.js +338 -0
  3. package/dist/SwTableColumn-DCxVGb9d.js +66 -0
  4. package/dist/component-sw.css +1 -1
  5. package/dist/index.cjs +6 -6
  6. package/dist/index.js +2 -2
  7. package/package.json +8 -5
  8. package/src/components/SwTable.vue +288 -104
  9. package/src/components/SwTableColumn.vue +65 -3
  10. package/dist/SwTable-DNt-mSdn.js +0 -167
  11. package/dist/SwTableColumn-S8ldvuhL.js +0 -28
package/README.md CHANGED
@@ -30,6 +30,8 @@ The `Component SW` library provides a set of ready-to-use UI components on Vue 3
30
30
 
31
31
  - [SwDropdownItem](#swdropdownitem)
32
32
 
33
+ - [SwIcon](#swicon)
34
+
33
35
  - [SwGide](#swgide)
34
36
 
35
37
  - [SwInput](#swinput)
@@ -141,8 +143,8 @@ if (typeof document !== 'undefined') {
141
143
  | `type` | `String` | `info` | Тип сообщения: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
142
144
  | `message` | `String` | `Default message` | Само сообщение. |
143
145
  | `duration` | `Number` | `6000` | Время отображения в миллисекундах. |
144
- | `before` | `String` | `` | Название svg в спрайте загружаемое в начале. |
145
- | `after` | `String` | `` | Название svg в спрайте загружаемое в конце (кнопка закрыть). |
146
+ | `before` | `String` | `` | Иконка в начале: имя из SVG-спрайта или URL (`https://…`). См. [SwIcon](#swicon). |
147
+ | `after` | `String` | `` | Иконка в конце (кнопка закрыть): имя из спрайта или URL. См. [SwIcon](#swicon). |
146
148
 
147
149
  ### Слоты / Slots
148
150
 
@@ -158,12 +160,13 @@ if (typeof document !== 'undefined') {
158
160
  // .js addons
159
161
  import { Alert, components } from "@studio-west/component-sw"
160
162
  import { h } from 'vue'
161
- Alert({message: 'Message', type: 'danger', duration:10000, before:'bell', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})
163
+ Alert({message: 'Message', type: 'danger', duration:10000, before:'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/bell.svg', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})
162
164
 
163
165
  // Composition API else <script setup>:
164
166
  import { inject, h } from "vue"
167
+ import { components } from "@studio-west/component-sw"
165
168
  const Alert = inject('Alert')
166
- Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwgIcon, { name: 'info-circle' })})
169
+ Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwIcon, { iconClass: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/info-circle.svg' })})
167
170
  //Options API:
168
171
  this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнительная информация'});
169
172
  ```
@@ -186,8 +189,8 @@ this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнител
186
189
  | `href` | `String` | `` | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |
187
190
  | `disabled` | `Boolean` | `false` | Блокирует кнопку, делая её неактивной. |
188
191
  | `label` | `String` | `` | Текст кнопки (альтернатива содержимому слота). |
189
- | `prefix` | `String` | `` | Название SVG-иконки из спрайта, отображаемой перед текстом. |
190
- | `postfix` | `String` | `` | Название SVG-иконки из спрайта, отображаемой после текста. |
192
+ | `prefix` | `String` | `` | Иконка перед текстом: имя из SVG-спрайта или URL (`https://…`). См. [SwIcon](#swicon). |
193
+ | `postfix` | `String` | `` | Иконка после текста: имя из спрайта или URL. См. [SwIcon](#swicon). |
191
194
 
192
195
  ### Слоты / Slots
193
196
 
@@ -216,8 +219,8 @@ Default - содержимое кнопки (текст, иконки или д
216
219
  ```html
217
220
  <sw-button
218
221
  label="Сохранить"
219
- prefix="save-icon"
220
- postfix="arrow-right"
222
+ prefix="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/device-floppy.svg"
223
+ postfix="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/arrow-right.svg"
221
224
  type="success"
222
225
  />
223
226
  ```
@@ -280,9 +283,9 @@ model - индекс активной кнопки.
280
283
 
281
284
  ### Свойства / Properties
282
285
 
283
- | Имя | Тип | По умолчанию | Значения/Описание |
284
- |----------|-----------|--------------|----------------------------------------------------------------------|
285
- | `visual` | `Boolean` | `true` | Видимость |
286
+ | Имя | Тип | По умолчанию | Значения/Описание |
287
+ |----------|-----------|--------------|-------------------|
288
+ | `visual` | `Boolean` | `true` | Видимость |
286
289
 
287
290
  ### Слоты / Slots
288
291
 
@@ -339,8 +342,8 @@ input - событие выбора с данными {dateStart: "11.11.2011",
339
342
  ```html
340
343
  <script>const addDateStart = (date) => {console.log(date)}</script>
341
344
  <sw-date-picker
342
- :data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
343
- limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
345
+ :data="{startDate: '11.11.2011', endDate: '14-12-2011'}"
346
+ :limitation="[{endDate: '14-04-2025', startDate:'30-03-2025'}]"
344
347
  range="range"
345
348
  @input="addDateStart"
346
349
  >
@@ -404,7 +407,7 @@ model - состояние меню, булевое значение откры
404
407
  | `class` | `String` | `sw-dropdown-item` | Добавляет пользовательский CSS-класс к компоненту. |
405
408
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
406
409
  | `type` | `String` | `info` | `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
407
- | `iconBefore` | `String` | `` | Название иконки в коллекции. При наличии вставляет иконку. |
410
+ | `iconBefore` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
408
411
 
409
412
  ### Слоты / Slots
410
413
 
@@ -422,13 +425,41 @@ Default - текст названия или модуль
422
425
  >
423
426
  <sw-button @click="visual = true">Описание / Description</sw-button>
424
427
  <template #dropdown>
425
- <sw-dropdown-item @click="visual = false" iconBefore="documents"> содержание / context </sw-dropdown-item>
428
+ <sw-dropdown-item @click="visual = false" icon-before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/files.svg"> содержание / context </sw-dropdown-item>
426
429
  </template>
427
430
 
428
431
  </sw-dropdown>
429
432
  ```
430
433
  ---
431
434
 
435
+ ## SwIcon
436
+
437
+ Компонент `SwIcon` отображает SVG-иконку из встроенного спрайта или по внешнему URL.
438
+
439
+ Если `iconClass` начинается с `http://`, `https://`, `mailto:` или `tel:`, иконка загружается как внешний SVG через CSS `mask` (класс `sw-external-icon`). Иначе используется символ из спрайта: `#prefix-iconClass`.
440
+
441
+ Компонент используется внутри [SwButton](#swbutton) (`prefix`, `postfix`), [SwInput](#swinput) (`before`, `after`), [SwAlert](#swalert), [SwDropdownItem](#swdropdownitem) (`iconBefore`), [SwSection](#swsection) и [SwMessage](#swmessage) (`iconAfter`) — во всех этих props можно передавать как имя из спрайта, так и полный URL.
442
+
443
+ ### Свойства / Properties
444
+
445
+ | Имя | Тип | По умолчанию | Значения/Описание |
446
+ |-------------|----------|--------------|----------------------------------------------------------------|
447
+ | `iconClass` | `String` | `required` | Имя иконки в спрайте или URL (`https://…`). |
448
+ | `prefix` | `String` | `icon` | Префикс символа в спрайте: `#prefix-iconClass`. |
449
+ | `className` | `String` | `` | Дополнительный CSS-класс для элемента `<svg>`. |
450
+
451
+ ### Пример использования / Example Usage
452
+
453
+ ```html
454
+ <!-- из спрайта -->
455
+ <sw-icon icon-class="star" />
456
+
457
+ <!-- внешний URL (Tabler Icons) -->
458
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg" />
459
+ ```
460
+
461
+ ---
462
+
432
463
  ## SwGide
433
464
 
434
465
  Компонент `SwGide` Создает затенение вокруг блока по заданному тегу, и выводит [SwDropdown](#swdropdown) с управляющими кнопками, переключающими по массиву из параметров `steps`
@@ -438,7 +469,7 @@ Default - текст названия или модуль
438
469
  | Имя | Тип | По умолчанию | Значения/Описание |
439
470
  |--------------|-----------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
440
471
  | `steps` | `Array` | `() => []` | Массив шагов обучения. [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }], |
441
- | `iconClose` | `String` | `` | Иконка закрытия обучения. |
472
+ | `iconClose` | `String` | `` | Иконка закрытия: имя из спрайта или URL. См. [SwIcon](#swicon). |
442
473
  | `maxWidth` | `Number` | `250` | Ширина всплывающего окна в px (без картинки). по умолчанию 250 |
443
474
 
444
475
  ### Слоты / Slots
@@ -457,6 +488,7 @@ model - массив обьектов шагов обучения
457
488
 
458
489
  ```html
459
490
  <script>
491
+ let settings = { gide: true };
460
492
  let step = 0;
461
493
  let steps = [
462
494
  {header: 'заголовок',
@@ -467,12 +499,12 @@ model - массив обьектов шагов обучения
467
499
  }
468
500
  ]
469
501
  </script>
470
- <sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-step="arrow">
502
+ <sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-close="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg">
471
503
  <template #header>
472
504
  Блок {{ steps[step].header }}
473
- <sw-button type="primary" link @click="settings.gide=false"><svg-icon icon-class="close" /></sw-button>
505
+ <sw-button type="primary" link @click="settings.gide=false"><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg" /></sw-button>
474
506
  </template>
475
- <template #arrow><svg-icon icon-class="arrow" /></template>
507
+ <template #arrow><sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-left.svg" /></template>
476
508
  </sw-gide>
477
509
  ```
478
510
  ---
@@ -489,8 +521,8 @@ model - массив обьектов шагов обучения
489
521
  | `size` | `String` | `` | Размер поля: `'large'`, `'small'`. |
490
522
  | `type` | `String` | `text` | Тип поля: `'text'`- текст, `'phone'`- телефон, `'password'` - пароль |
491
523
  | `inputMode` | `String` | `text` | Мобильная клавиатура: `'text'`- стандартная, `'search'`- поиск, `'numeric'`- цифры, `'decimal'` - числа, `'tel'` - телефон, `'url'` - адреса, `'email'` - почта |
492
- | `before` | `String` | `` | Название svg в спрайте загружаемое в начале. |
493
- | `after` | `String` | `` | Название svg в спрайте загружаемое в конце. |
524
+ | `before` | `String` | `` | Иконка в начале: имя из спрайта или URL. См. [SwIcon](#swicon). |
525
+ | `after` | `String` | `` | Иконка в конце: имя из спрайта или URL. См. [SwIcon](#swicon). |
494
526
  | `placeholder` | `String` | `` | Текст Placeholder. |
495
527
  | `required` | `Boolean` | `false` | Признак обязательно ли для заполнения. |
496
528
  | `label` | `String` | `` | Текст в Label. |
@@ -525,7 +557,7 @@ focusInput - focus на поле ввода
525
557
  class="custom-class"
526
558
  size="large"
527
559
  type="phone"
528
- before="phone"
560
+ before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/phone.svg"
529
561
  placeholder="input"
530
562
  label="input"
531
563
  @prefix="console.log('before')"
@@ -593,7 +625,7 @@ change - событие изменения значения компонента
593
625
  'SwInput': {
594
626
  name: 'input1',
595
627
  placeholder: 'Введите текст',
596
- before: 'search'
628
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg'
597
629
  }
598
630
  }
599
631
  ]
@@ -656,7 +688,7 @@ const menuConfig = {
656
688
  'SwButton': {
657
689
  label: 'Нажми меня',
658
690
  type: 'primary',
659
- prefix: 'star'
691
+ prefix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/star.svg'
660
692
  },
661
693
  'SwSwitch': [
662
694
  {
@@ -715,7 +747,7 @@ const menuItems = [
715
747
  'SwInput': {
716
748
  name: 'search',
717
749
  placeholder: 'Поиск...',
718
- before: 'search',
750
+ before: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/search.svg',
719
751
  size: 'small'
720
752
  }
721
753
  }
@@ -742,19 +774,19 @@ const dropdownMenu = {
742
774
  'SwButton': {
743
775
  label: 'Меню',
744
776
  type: 'primary',
745
- postfix: 'arrow-down'
777
+ postfix: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg'
746
778
  }
747
779
  },
748
780
  'slot.dropdown': [
749
781
  {
750
782
  'SwDropdownItem': {
751
- iconBefore: 'user',
783
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/user.svg',
752
784
  slot: 'Профиль'
753
785
  }
754
786
  },
755
787
  {
756
788
  'SwDropdownItem': {
757
- iconBefore: 'settings',
789
+ iconBefore: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/settings.svg',
758
790
  slot: 'Настройки'
759
791
  }
760
792
  }
@@ -776,7 +808,7 @@ import { components } from '@studio-west/component-sw'
776
808
  const complexMenu = {
777
809
  'SwSection': {
778
810
  name: 'Панель управления',
779
- iconAfter: 'chevron-down',
811
+ iconAfter: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/chevron-down.svg',
780
812
  slot: 'Основное содержимое секции',
781
813
  'slot.footer': {
782
814
  'SwButtonGroup': {
@@ -814,7 +846,7 @@ const complexMenu = {
814
846
  |-------------|-----------|--------------|----------------------------------------------------------------------------|
815
847
  | `name` | `String` | `` | Добавляет текстовый заголовок, при отсутствии реализован слот `"header"`. |
816
848
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
817
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции для кнопки закрытия (при наличии заголовка). |
849
+ | `iconAfter` | `String` | `` | Иконка кнопки закрытия (при заголовке): имя из спрайта или URL. См. [SwIcon](#swicon). |
818
850
 
819
851
  ### Слоты / Slots
820
852
 
@@ -849,7 +881,7 @@ model - состояние компонента булевое значение,
849
881
  |-------------|-----------|--------------|----------------------------------------------------|
850
882
  | `name` | `String` | `` | Добавляет заголовок в секцию. |
851
883
  | `class` | `String` | `sw-section` | Добавляет пользовательский CSS-класс к компоненту. |
852
- | `iconAfter` | `String` | `` | Добавляет иконку из коллекции. |
884
+ | `iconAfter` | `String` | `` | Иконка в заголовке: имя из спрайта или URL. См. [SwIcon](#swicon). |
853
885
 
854
886
  ### Слоты / Slots
855
887
 
@@ -869,7 +901,7 @@ header - клик по всему Header
869
901
  <sw-section
870
902
  name="section"
871
903
  class="custom-class"
872
- iconAfter="cross"
904
+ icon-after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg"
873
905
  >
874
906
  <p>Содержимое / Content</p>
875
907
  <template #footer>
@@ -1005,7 +1037,7 @@ model - значение слайдера (число, массив чисел)
1005
1037
  class="custom-class"
1006
1038
  vertical
1007
1039
  >
1008
- <svg-icon icon-class="component" />
1040
+ <sw-icon icon-class="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/components.svg" />
1009
1041
  </sw-slider>
1010
1042
  ```
1011
1043
  ---
@@ -1052,28 +1084,71 @@ model - состояние чекбокса (checked ) булевое знач
1052
1084
 
1053
1085
  ## SwTable
1054
1086
 
1055
- Компонент `SwTable` представляет собой динамическую таблицу с поддержкой сложных заголовков, объединения ячеек и кастомизации содержимого через слоты.
1087
+ Компонент `SwTable` — динамическая таблица с вложенными заголовками, объединением ячеек (`rowspan` / `colspan`), кастомизацией через слоты, подсветкой строк и столбцов при наведении, изменением ширины колонок и фиксацией крайних колонок при горизонтальном скролле.
1056
1088
 
1057
- ### Свойства / Properties
1089
+ The `SwTable` component is a dynamic table with nested headers, cell merging (`rowspan` / `colspan`), slot-based customization, row and column hover highlighting, column resizing, and sticky edge columns during horizontal scroll.
1090
+
1091
+ Колонки описываются дочерним компонентом `SwTableColumn`. / Columns are defined with the child `SwTableColumn` component.
1092
+
1093
+ ### Свойства SwTable / SwTable Properties
1094
+
1095
+ | Имя / Name | Тип / Type | По умолчанию / Default | Значения/Описание / Values & Description |
1096
+ |-------------|---------------------|------------------------|--------------------------------------------------------------------------------------------------------|
1097
+ | `data` | `Array` | `required` | Данные таблицы — массив объектов. / Table data — an array of row objects. |
1098
+ | `resizable` | `Boolean` | `true` | Разрешить изменение ширины колонок перетаскиванием края заголовка. / Allow resizing leaf columns by dragging the header edge. |
1099
+ | `maxWidth` | `String` \| `Number`| — | Максимальная ширина контейнера таблицы. При переполнении — горизонтальный скролл и активация `fixed`-колонок. / Max table container width; enables horizontal scroll and `fixed` columns when content overflows. |
1100
+
1101
+ ### События SwTable / SwTable Events
1102
+
1103
+ | Имя / Name | Параметры / Payload | Описание / Description |
1104
+ |-----------------|-----------------------|--------------------------------------------------------------------------------|
1105
+ | `column-resize` | `{ prop, width }` | Срабатывает после изменения ширины колонки (в px). / Fired after a column width change (px). |
1106
+
1107
+ ### Свойства SwTableColumn / SwTableColumn Properties
1108
+
1109
+ | Имя / Name | Тип / Type | По умолчанию / Default | Значения/Описание / Values & Description |
1110
+ |-------------|---------------------|------------------------|----------------------------------------------------------------------------------------------------------|
1111
+ | `prop` | `String` | — | Ключ поля в объекте строки. Поддерживает вложенные пути: `speed.midl`. / Row field key; supports nested paths such as `speed.midl`. |
1112
+ | `label` | `String` | `''` | Заголовок колонки. / Column header label. |
1113
+ | `width` | `String` \| `Number`| `'auto'` | Ширина колонки, например `180` или `'180px'`. / Column width, e.g. `180` or `'180px'`. |
1114
+ | `height` | `String` \| `Number`| `'auto'` | Минимальная высота ячейки заголовка. / Minimum header cell height. |
1115
+ | `resizable` | `Boolean` | — | Разрешить ресайз конкретной колонки. По умолчанию наследует `resizable` таблицы. / Allow resizing this column; defaults to the table `resizable` value. |
1116
+ | `minWidth` | `String` \| `Number`| `48` | Минимальная ширина при ресайзе (px). / Minimum width while resizing (px). |
1117
+ | `fixed` | `String` | — | `'left'` \| `'right'` — фиксация колонки при горизонтальном скролле. / `'left'` \| `'right'` — sticky column during horizontal scroll. |
1118
+
1119
+ `SwTableColumn` без `prop` используется как групповой заголовок; внутри него задаются дочерние `SwTableColumn`. / A `SwTableColumn` without `prop` is a group header; place child `SwTableColumn` components inside it.
1058
1120
 
1059
- | Имя | Тип | По умолчанию | Значения/Описание |
1060
- |--------|----------|--------------|----------------------------------------------------|
1061
- | `data` | `Array` | `required` | Содержание таблицы - обязательный массив объектов. |
1121
+ ### Подсветка при наведении / Hover highlight
1122
+
1123
+ - **Строка** — при наведении на строку в `tbody` подсвечиваются все её ячейки (учитывается `rowspan`). / **Row** — hovering a `tbody` row highlights all of its cells (`rowspan` is respected).
1124
+ - **Столбец** — при наведении на ячейку заголовка подсвечивается весь столбец; для группового заголовка с `colspan` — все вложенные колонки. / **Column** — hovering a header cell highlights the whole column; for a grouped header with `colspan`, all nested columns are highlighted.
1125
+
1126
+ Стили подсветки заданы в `component-sw.css` (классы `row-hover`, `col-hover`). / Hover styles are defined in `component-sw.css` (`row-hover`, `col-hover` classes).
1127
+
1128
+ ### Фиксированные колонки / Fixed columns
1129
+
1130
+ Фиксация включается, когда одновременно: / Sticky columns activate when all of the following are true:
1131
+
1132
+ 1. задан `max-width` у `SwTable`; / `max-width` is set on `SwTable`;
1133
+ 2. у колонок указан `fixed="left"` или `fixed="right"`; / columns have `fixed="left"` or `fixed="right"`;
1134
+ 3. суммарная ширина таблицы превышает контейнер. / total table width exceeds the container.
1135
+
1136
+ Групповой заголовок фиксируется, если все его дочерние колонки имеют одинаковое значение `fixed`. / A group header is sticky when all of its child columns share the same `fixed` value.
1062
1137
 
1063
1138
  ### Слоты / Slots
1064
1139
 
1065
- #`<prop>` - именованный слот для конкретной колонки (приоритет выше default). Доступные параметры: `{ row, $index, value }`
1140
+ `#<prop>` — именованный слот для конкретной колонки (приоритет выше default). Параметры: `{ row, $index, value }` / Named slot for a specific column (higher priority than default). Parameters: `{ row, $index, value }`
1066
1141
 
1067
- #default - универсальный слот для всех колонок. Доступные параметры: `{ row, $index, column, value }`
1142
+ `#default` — универсальный слот для всех колонок. Параметры: `{ row, $index, column, value }` / Default slot for all columns. Parameters: `{ row, $index, column, value }`
1068
1143
 
1069
- - `row` - весь объект строки данных
1070
- - `$index` - индекс строки (начиная с 0)
1071
- - `column` - имя колонки (prop)
1072
- - `value` - значение ячейки
1144
+ - `row` — весь объект строки данных / the full row data object
1145
+ - `$index` — индекс строки (начиная с 0) / row index (zero-based)
1146
+ - `column` — имя колонки (`prop`) / column name (`prop`)
1147
+ - `value` — значение ячейки / cell value
1073
1148
 
1074
1149
  ### Пример использования / Example Usage
1075
1150
 
1076
- #### Базовый пример с вложенными колонками:
1151
+ #### Базовый пример с вложенными колонками / Nested column headers:
1077
1152
 
1078
1153
  ```html
1079
1154
  <script>
@@ -1091,7 +1166,39 @@ model - состояние чекбокса (checked ) булевое знач
1091
1166
  </sw-table>
1092
1167
  ```
1093
1168
 
1094
- #### Пример с v-for для динамических колонок:
1169
+ #### Ресайз колонок / Column resize:
1170
+
1171
+ ```html
1172
+ <sw-table :data="users" @column-resize="onColumnResize">
1173
+ <sw-table-column prop="name" label="Имя" width="180px" />
1174
+ <sw-table-column prop="age" label="Возраст" width="100px" />
1175
+ <sw-table-column
1176
+ prop="actions"
1177
+ label="Действия"
1178
+ width="150px"
1179
+ :resizable="false"
1180
+ />
1181
+ </sw-table>
1182
+
1183
+ <script setup>
1184
+ function onColumnResize({ prop, width }) {
1185
+ console.log(prop, width)
1186
+ }
1187
+ </script>
1188
+ ```
1189
+
1190
+ #### Фиксированные крайние колонки / Fixed edge columns:
1191
+
1192
+ ```html
1193
+ <sw-table :data="rows" max-width="520px">
1194
+ <sw-table-column prop="id" label="ID" width="70px" fixed="left" />
1195
+ <sw-table-column prop="name" label="Имя" width="160px" fixed="left" />
1196
+ <sw-table-column prop="email" label="Email" width="200px" />
1197
+ <sw-table-column prop="note" label="Примечание" width="180px" fixed="right" />
1198
+ </sw-table>
1199
+ ```
1200
+
1201
+ #### Пример с v-for для динамических колонок / Dynamic columns with v-for:
1095
1202
 
1096
1203
  ```html
1097
1204
  <script setup>
@@ -1121,7 +1228,7 @@ const tableData = ref([
1121
1228
  </sw-table>
1122
1229
  ```
1123
1230
 
1124
- #### Пример с кастомизацией через слоты:
1231
+ #### Пример с кастомизацией через слоты / Slot customization:
1125
1232
 
1126
1233
  ```html
1127
1234
  <script setup>
@@ -1167,7 +1274,7 @@ const deleteUser = (id) => {
1167
1274
  </sw-table>
1168
1275
  ```
1169
1276
 
1170
- #### Пример с универсальным default слотом:
1277
+ #### Пример с универсальным default слотом / Default slot for all columns:
1171
1278
 
1172
1279
  ```html
1173
1280
  <script setup>
@@ -1198,7 +1305,7 @@ const products = ref([
1198
1305
  </sw-table>
1199
1306
  ```
1200
1307
 
1201
- #### Пример с объединением ячеек (rowspan/colspan):
1308
+ #### Пример с объединением ячеек (rowspan/colspan) / Cell merging (rowspan/colspan):
1202
1309
 
1203
1310
  ```html
1204
1311
  <script setup>
@@ -1292,25 +1399,15 @@ Default - для вкладок
1292
1399
 
1293
1400
  ## Изменения / Changelog
1294
1401
 
1295
- ### 0.12.11
1296
-
1297
- **SSR-совместимость / SSR compatibility**
1298
-
1299
- - `Alert`: инициализация контейнера вынесена из верхнего уровня модуля в саму функцию и защищена проверкой `typeof document === 'undefined'` — больше не падает при импорте на сервере. / `Alert`: container initialization moved out of module top-level into the function and guarded with `typeof document === 'undefined'` — no longer crashes when imported on the server.
1300
- - `SwDatePicker`: обращение к `navigator.language` обёрнуто в проверку окружения (раньше выполнялось в `setup` при SSR). / `SwDatePicker`: `navigator.language` access is now environment-guarded (previously executed in `setup` during SSR).
1301
- - `SwSlider`: обращение к `document.querySelector` в рендер-функции `tooltipStyle` защищено проверкой окружения. / `SwSlider`: the `document.querySelector` call inside the `tooltipStyle` render function is now environment-guarded.
1302
- - `dist` пересобран — `dist/index.js` и `dist/index.cjs` больше не содержат обращений к `document`/`window` на верхнем уровне и корректно импортируются в Node/SSR. / `dist` rebuilt — `dist/index.js` and `dist/index.cjs` no longer contain top-level `document`/`window` access and import correctly in Node/SSR.
1303
-
1304
- **Самодостаточные исходники / Self-contained source**
1305
-
1306
- - Все внутренние импорты переведены с алиаса `@/` на относительные пути, поэтому сырые `.vue`/`.ts` файлы корректно резолвятся при прямом импорте из `src` (в т.ч. при pre-bundle в Vite у проекта-потребителя). / All internal imports switched from the `@/` alias to relative paths, so the raw `.vue`/`.ts` files resolve correctly when imported directly from `src` (including Vite pre-bundle in the consumer project).
1307
- - Добавлен shim `types/shims-vue.d.ts` для корректной типизации импортов `.vue`. / Added `types/shims-vue.d.ts` shim for correct typing of `.vue` imports.
1308
- - Удалены «мёртвые» type-реэкспорты из несуществующего модуля `@/types`. / Removed dead type re-exports from the non-existent `@/types` module.
1402
+ ### 0.12.13
1309
1403
 
1310
- **Исправления / Fixes**
1404
+ **SwTable**
1311
1405
 
1312
- - `SwSwitch`: модификатор `.sw-small` теперь действительно уменьшает переключатель (использует `--sw-component-size-small` вместо базового размера). / `SwSwitch`: the `.sw-small` modifier now actually shrinks the switch (uses `--sw-component-size-small` instead of the base size).
1313
- - Устранены все ошибки `vue-tsc` (`SwMenu`, `SwSelect`, `index.ts`, `utils`) — проверка типов проходит чисто. / Fixed all `vue-tsc` errors (`SwMenu`, `SwSelect`, `index.ts`, `utils`) — type-check passes cleanly.
1406
+ - Подсветка строки при наведении на строку в `tbody` (с учётом `rowspan`). / Row highlight on `tbody` row hover (`rowspan` supported).
1407
+ - Подсветка столбца при наведении на ячейку заголовка; для группового заголовка с `colspan` — все вложенные колонки. / Column highlight on header cell hover; grouped headers with `colspan` highlight all nested columns.
1408
+ - Изменение ширины колонок перетаскиванием края заголовка; проп `resizable` у таблицы и колонки, событие `column-resize`. / Resize leaf columns by dragging the header edge; table/column `resizable` prop and `column-resize` event.
1409
+ - Фиксация крайних колонок (`fixed="left"` \| `fixed="right"` на `SwTableColumn`) при горизонтальном скролле; prop `maxWidth` у `SwTable`. / Sticky edge columns (`fixed="left"` \| `fixed="right"` on `SwTableColumn`) during horizontal scroll; `maxWidth` prop on `SwTable`.
1410
+ - Колонки снова регистрируются корректно: `SwTable` и `SwTableColumn` монтируют слот через скрытый контейнер (`provide` / `inject`). / Columns register correctly again: `SwTable` and `SwTableColumn` mount the slot via a hidden container (`provide` / `inject`).
1314
1411
 
1315
1412
  ---
1316
1413