@1337exp/taoui 1.5.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,7 +18,7 @@ change a handful of CSS variables and the whole kit follows.
18
18
  - **TaoModal** — modal with animation and slots
19
19
  - **TaoDrawer** — side panel (filters, settings). Esc, backdrop click, focus trap — same as the modal
20
20
  - **TaoSpoiler** — disclosure. `v-model` and `aria-expanded`. Neighbours do not close each other
21
- - **TaoSpoilerGroup** — accordion: `v-model` is the open panel key (`null` = all closed); spoilers take `name`
21
+ - **TaoSpoilerGroup** — accordion: `v-model` is the open panel key (`null` = all closed); spoilers take `name`. Without `v-model` the group keeps that key itself
22
22
  - **TaoTabs** — tabbed sections
23
23
  - **TaoTooltip** — hover hint. `top` / `bottom` / `left` / `right`, flips at the viewport edge
24
24
  - **TaoPopover** — click panel with any slot content, Esc and outside click. Not a tooltip, not an action menu
@@ -29,6 +29,7 @@ change a handful of CSS variables and the whole kit follows.
29
29
  - **TaoFlex** — flexbox wrapper: justify / align / direction / wrap / gap
30
30
  - **TaoSpace** — even gap between children
31
31
  - **TaoDivider** — `line` (hairline), `text` (line with a label), `gap` (empty space, size: small / medium / large)
32
+ - **TaoSplit** — two panes and a gutter. `row` / `column` like Flex. `v-model` is the start size in `%` or `px`; `resizable="false"` locks the gutter. Not Divider.
32
33
  - **TaoFieldset** — grouped frame: `legend` sits on the top border, `align` is start / center / end
33
34
  - **TaoAnimatedBorder** — rainbow border wrapper (decorative, not tied to the theme)
34
35
 
@@ -162,6 +163,23 @@ import '@1337exp/taoui/styles.css'
162
163
  </template>
163
164
  ```
164
165
 
166
+ ## Split
167
+
168
+ `TaoSplit` is two panes and a gutter. It is not `TaoDivider` (a line) and not an n-pane layout: three columns are two nested splits.
169
+
170
+ `direction` matches Flex: `row` (start | end) or `column` (start above end). Slots are `#start` / `#end`.
171
+
172
+ `v-model` is the start pane size. `unit` is `%` (default — the ratio survives a container resize) or `px` (a sidebar; the end pane takes the rest). With `px`, pass an explicit size — the default `50` is 50px. `min` / `max` apply to start; `min-end` is the other pane's floor; all three use the same unit. `resizable="false"` keeps the gutter but locks it.
173
+
174
+ The split fills the parent (`width` / `height: 100%`). Give the parent a bounded size on the split axis — a `column` split without a height has no `%` to compute. Panes use `min-width` / `min-height: 0` and `overflow: hidden`, so content cannot block shrinking. Scroll belongs on an inner wrapper (`overflow: auto; height: 100%; min-height: 0`). A nested `TaoSplit` as a direct child of a pane stretches on its own.
175
+
176
+ ```vue
177
+ <TaoSplit v-model="side" unit="px" :min="160" :max="480" :min-end="240">
178
+ <template #start>Nav</template>
179
+ <template #end>Main</template>
180
+ </TaoSplit>
181
+ ```
182
+
165
183
  ## Toast
166
184
 
167
185
  The chain runs in the same tick; `setTimeout(0)` actually shows the toast.
@@ -248,7 +266,7 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
248
266
 
249
267
  `TaoCombobox` is the same menu with a field. Typing filters options. `allow-create` writes the typed string into `v-model` when there is no exact match. The list does not mutate itself: listen to `create` and append an option from the parent.
250
268
 
251
- `TaoFormField` also wraps `TaoTextarea` and `TaoCheckbox` — id, hint, and error are forwarded for you.
269
+ `TaoFormField` also wraps `TaoTextarea`, `TaoCheckbox`, `TaoSwitch`, `TaoRadioGroup`, and `TaoSegmented` — id, hint, and error are forwarded for you.
252
270
 
253
271
  `TaoTag` can be a chip: `#prefix` on the left (usually `TaoAvatar`), `closable` draws a cross and emits `close`. The close click does not bubble. `flat` drops the border and keeps the fill.
254
272
 
package/README.ru.md CHANGED
@@ -18,7 +18,7 @@
18
18
  - **TaoModal** — модальное окно с анимацией и слотами
19
19
  - **TaoDrawer** — боковая панель (фильтры, настройки). Esc, клик по фону, ловушка фокуса — как у модалки
20
20
  - **TaoSpoiler** — раскрывающийся блок. `v-model` и `aria-expanded`. Несколько подряд сами друг друга не закрывают
21
- - **TaoSpoilerGroup** — аккордеон: `v-model` — ключ открытой панели (`null` — все закрыты), у спойлера `name`
21
+ - **TaoSpoilerGroup** — аккордеон: `v-model` — ключ открытой панели (`null` — все закрыты), у спойлера `name`. Без `v-model` группа помнит ключ сама
22
22
  - **TaoTabs** — вкладки для переключения между секциями контента
23
23
  - **TaoTooltip** — всплывающая подсказка при наведении. `top` / `bottom` / `left` / `right`, у края экрана переворачивается
24
24
  - **TaoPopover** — панель по клику: слот с любым контентом, Esc и клик снаружи. Не тултип и не меню действий
@@ -29,6 +29,7 @@
29
29
  - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
30
30
  - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
31
31
  - **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
32
+ - **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
32
33
  - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
33
34
  - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)
34
35
 
@@ -163,6 +164,23 @@ import '@1337exp/taoui/styles.css'
163
164
  </template>
164
165
  ```
165
166
 
167
+ ## Split
168
+
169
+ `TaoSplit` — две панели и полоса между ними. Это не `TaoDivider` (там только линия) и не раскладка на N панелей: три колонки — два вложенных сплита.
170
+
171
+ `direction` как у Flex: `row` (start | end) или `column` (start над end). Слоты `#start` / `#end`.
172
+
173
+ `v-model` — размер панели start. `unit` — `%` (по умолчанию, доля живёт при ресайзе контейнера) или `px` (сайдбар; вторая панель забирает остаток). Для `px` размер нужно задать явно: дефолт `50` — это 50px. `min` / `max` ограничивают start, `min-end` — минимум второй панели, все в той же единице. `resizable="false"` оставляет полосу, но без перетаскивания.
174
+
175
+ Сплит заполняет родителя (`width` / `height: 100%`). Родитель должен ограничить размер по оси сплита: у `column` без высоты не из чего считать `%`. Панели с `min-width` / `min-height: 0` и `overflow: hidden`, чтобы контент не мешал сжатию. Скролл — на внутренней обёртке (`overflow: auto; height: 100%; min-height: 0`). Вложенный `TaoSplit` прямым ребёнком панели растягивается сам.
176
+
177
+ ```vue
178
+ <TaoSplit v-model="side" unit="px" :min="160" :max="480" :min-end="240">
179
+ <template #start>Навигация</template>
180
+ <template #end>Основное</template>
181
+ </TaoSplit>
182
+ ```
183
+
166
184
  ## Toast
167
185
 
168
186
  Вызов — цепочка в одном тике, `setTimeout(0)` отправляет уведомление.
@@ -249,7 +267,7 @@ confirm.defaults({ ok: 'Yes', cancel: 'No' })
249
267
 
250
268
  `TaoCombobox` — то же меню, но с полем. Печатаете — варианты режутся. `allow-create` пишет введённое в `v-model`, если точного совпадения нет. Список сам не меняется: слушайте `create` и добавьте option снаружи.
251
269
 
252
- `TaoFormField` также оборачивает `TaoTextarea` и `TaoCheckbox` — id, hint и error прокидываются сами.
270
+ `TaoFormField` также оборачивает `TaoTextarea`, `TaoCheckbox`, `TaoSwitch`, `TaoRadioGroup` и `TaoSegmented` — id, hint и error прокидываются сами.
253
271
 
254
272
  `TaoTag` может быть чипом: `#prefix` слева (обычно `TaoAvatar`), `closable` рисует крестик и эмитит `close`. Клик по крестику наружу не всплывает. `flat` снимает рамку, заливка остаётся.
255
273