@1337exp/taoui 1.5.0 → 1.6.0

package/README.md

@@ -29,6 +29,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoFlex** — flexbox wrapper: justify / align / direction / wrap / gap
 - **TaoSpace** — even gap between children
 - **TaoDivider** — `line` (hairline), `text` (line with a label), `gap` (empty space, size: small / medium / large)
+- **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.
 - **TaoFieldset** — grouped frame: `legend` sits on the top border, `align` is start / center / end
 - **TaoAnimatedBorder** — rainbow border wrapper (decorative, not tied to the theme)
 
@@ -162,6 +163,23 @@ import '@1337exp/taoui/styles.css'
 </template>
 ```
 
+## Split
+
+`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.
+
+`direction` matches Flex: `row` (start | end) or `column` (start above end). Slots are `#start` / `#end`.
+
+`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.
+
+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.
+
+```vue
+<TaoSplit v-model="side" unit="px" :min="160" :max="480" :min-end="240">
+  <template #start>Nav</template>
+  <template #end>Main</template>
+</TaoSplit>
+```
+
 ## Toast
 
 The chain runs in the same tick; `setTimeout(0)` actually shows the toast.

package/README.ru.md

@@ -29,6 +29,7 @@
 - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
 - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
 - **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
+- **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
 - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
 - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)
 
@@ -163,6 +164,23 @@ import '@1337exp/taoui/styles.css'
 </template>
 ```
 
+## Split
+
+`TaoSplit` — две панели и полоса между ними. Это не `TaoDivider` (там только линия) и не раскладка на N панелей: три колонки — два вложенных сплита.
+
+`direction` как у Flex: `row` (start | end) или `column` (start над end). Слоты `#start` / `#end`.
+
+`v-model` — размер панели start. `unit` — `%` (по умолчанию, доля живёт при ресайзе контейнера) или `px` (сайдбар; вторая панель забирает остаток). Для `px` размер нужно задать явно: дефолт `50` — это 50px. `min` / `max` ограничивают start, `min-end` — минимум второй панели, все в той же единице. `resizable="false"` оставляет полосу, но без перетаскивания.
+
+Сплит заполняет родителя (`width` / `height: 100%`). Родитель должен ограничить размер по оси сплита: у `column` без высоты не из чего считать `%`. Панели с `min-width` / `min-height: 0` и `overflow: hidden`, чтобы контент не мешал сжатию. Скролл — на внутренней обёртке (`overflow: auto; height: 100%; min-height: 0`). Вложенный `TaoSplit` прямым ребёнком панели растягивается сам.
+
+```vue
+<TaoSplit v-model="side" unit="px" :min="160" :max="480" :min-end="240">
+  <template #start>Навигация</template>
+  <template #end>Основное</template>
+</TaoSplit>
+```
+
 ## Toast
 
 Вызов — цепочка в одном тике, `setTimeout(0)` отправляет уведомление.