@1337exp/taoui 1.8.0 → 1.10.0

package/README.md

@@ -29,7 +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
 - **TaoGrid** / **TaoGridItem** — tiles: `min` is a catalog (auto-fill), `cols` is bento. Item `col` / `row` span; below ~560px span resets. Not masonry
-- **TaoDivider** — `line` (hairline), `text` (line with a label), `gap` (empty space, size: small / medium / large)
+- **TaoDivider** — `solid` (plain border) / `dashed` / `colored` (accent) / `gap`. Optional `text` sits in the middle of any of them; `fade` softens the line ends; `size` is for `gap` (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)
@@ -54,7 +54,7 @@ change a handful of CSS variables and the whole kit follows.
 
 ### Data display
 
-- **TaoTable** — simple table: columns, empty, loading, sort via `v-model:sort`. Not a datagrid.
+- **TaoTable** — simple table: columns, empty, loading, sort via `v-model:sort`. `head` tints the header, `lines` draws row rules (both on by default). `striped` starts on the first row; `striped="even"` starts on the second. Not a datagrid.
 - **TaoPagination** — pages with ellipsis. Clicking “…” jumps `jump` pages (5 by default)
 - **TaoEmpty** — empty list, no results, no access
 - **TaoList** / **TaoListItem** — list row: icon, title, caption, hover action. Not Select, not a table

package/README.ru.md

@@ -29,7 +29,7 @@
 - **TaoFlex** — обёртка над flexbox с пропами justify/align/direction/wrap/gap
 - **TaoSpace** — авто-расстановка дочерних элементов с равномерным gap
 - **TaoGrid** / **TaoGridItem** — плитки: `min` — каталог (auto-fill), `cols` — bento. У item `col` / `row`; уже ~560px span сбрасывается. Не masonry
-- **TaoDivider** — разделитель: line (тонкая линия), text (линия с текстом), gap (пустой отступ, size: small/medium/large)
+- **TaoDivider** — `solid` (обычный border) / `dashed` / `colored` (акцент) / `gap`. Подпись — опциональный `text` на любом варианте; `fade` — плавные края линии; `size` только у `gap` (small / medium / large)
 - **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
 - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
 - **TaoAnimatedBorder** — контейнер с анимированной радужной рамкой (декоративный, не завязан на тему)
@@ -54,7 +54,7 @@
 
 ### Отображение данных
 
-- **TaoTable** — простая таблица: колонки, empty, loading, сортировка через `v-model:sort`. Не datagrid.
+- **TaoTable** — простая таблица: колонки, empty, loading, сортировка через `v-model:sort`. `head` — подсветка шапки, `lines` — линии между рядами (оба по умолчанию включены). `striped` — зебра с первой строки, `striped="even"` — со второй. Не datagrid.
 - **TaoPagination** — страницы с многоточием. Клик по «…» прыгает на `jump` страниц (5 по умолчанию)
 - **TaoEmpty** — пустой список, нет результатов, нет прав
 - **TaoList** / **TaoListItem** — строка списка: иконка, заголовок, подпись, действие по ховеру. Не Select и не таблица

package/dist/index.cjs

@@ -2462,41 +2462,58 @@
       };
     }
   });
-  const TaoTag = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-f353f529"]]);
-  const _hoisted_1$y = {
+  const TaoTag = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-cbbbf8f3"]]);
+  const _hoisted_1$y = ["role", "aria-hidden"];
+  const _hoisted_2$v = {
     key: 1,
-    class: "tao-divider-text"
+    class: "tao-divider__text"
   };
-  const _hoisted_2$v = { class: "tao-divider-text__value" };
   const _hoisted_3$o = {
     key: 2,
-    class: "tao-divider-line"
+    class: "tao-divider__line tao-divider__line--end"
   };
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoDivider" },
     __name: "TaoDivider",
     props: {
-      variant: { default: "line" },
-      size: { default: "medium" }
+      variant: { default: "solid" },
+      size: { default: "medium" },
+      text: { default: "" },
+      fade: { type: Boolean, default: false }
     },
     setup(__props) {
       const props = __props;
+      const slots = vue.useSlots();
       const gapSize = vue.computed(() => props.size === "big" ? "large" : props.size);
+      const hasLabel = vue.computed(() => Boolean(props.text) || Boolean(slots.default));
       return (_ctx, _cache) => {
-        return __props.variant === "gap" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(["tao-divider-gap", `tao-divider-gap--${gapSize.value}`])
-        }, null, 2)) : __props.variant === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
-          _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "tao-divider-text__line tao-divider-text__line--left" }, null, -1)),
-          vue.createElementVNode("span", _hoisted_2$v, [
-            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "tao-divider-text__line tao-divider-text__line--right" }, null, -1))
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$o));
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["tao-divider", [
+            `tao-divider--${__props.variant}`,
+            {
+              "tao-divider--labeled": hasLabel.value,
+              "tao-divider--fade": __props.fade && __props.variant !== "gap",
+              [`tao-divider--gap-${gapSize.value}`]: __props.variant === "gap"
+            }
+          ]]),
+          role: __props.variant === "gap" && !hasLabel.value ? void 0 : "separator",
+          "aria-hidden": __props.variant === "gap" && !hasLabel.value ? true : void 0
+        }, [
+          __props.variant !== "gap" ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: vue.normalizeClass(["tao-divider__line", { "tao-divider__line--start": hasLabel.value }])
+          }, null, 2)) : vue.createCommentVNode("", true),
+          hasLabel.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$v, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(__props.text), 1)
+            ], true)
+          ])) : vue.createCommentVNode("", true),
+          __props.variant !== "gap" && hasLabel.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$o)) : vue.createCommentVNode("", true)
+        ], 10, _hoisted_1$y);
       };
     }
   });
-  const TaoDivider = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-8187a15d"]]);
+  const TaoDivider = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c1d072e5"]]);
   const _hoisted_1$x = {
     key: 0,
     class: "tao-fieldset__legend"
@@ -6188,9 +6205,11 @@
       rowKey: { type: [String, Function], default: "id" },
       loading: { type: Boolean, default: false },
       emptyText: { default: "Нет данных" },
-      striped: { type: Boolean, default: false },
+      striped: { type: [Boolean, String], default: false },
       compact: { type: Boolean, default: false },
       hover: { type: Boolean, default: true },
+      head: { type: Boolean, default: true },
+      lines: { type: Boolean, default: true },
       sticky: { type: Boolean, default: false },
       maxHeight: { default: "" },
       clickable: { type: Boolean, default: false },
@@ -6203,6 +6222,15 @@
       const emit = __emit;
       const colCount = vue.computed(() => Math.max(props.columns.length, 1));
       const isEmpty = vue.computed(() => !props.rows.length && !props.loading);
+      const stripeFrom = vue.computed(() => {
+        if (props.striped === "even") {
+          return "even";
+        }
+        if (props.striped === "odd" || props.striped === true) {
+          return "odd";
+        }
+        return null;
+      });
       function columnWidth(column) {
         if (column.width == null) {
           return void 0;
@@ -6253,9 +6281,12 @@
         }, [
           vue.createElementVNode("table", {
             class: vue.normalizeClass(["tao-table", {
-              "tao-table--striped": __props.striped,
+              "tao-table--striped": stripeFrom.value === "odd",
+              "tao-table--striped-even": stripeFrom.value === "even",
               "tao-table--compact": __props.compact,
               "tao-table--hover": __props.hover,
+              "tao-table--head": __props.head,
+              "tao-table--lines": __props.lines,
               "tao-table--clickable": __props.clickable,
               "tao-table--sticky": __props.sticky
             }])
@@ -6340,7 +6371,7 @@
       };
     }
   });
-  const TaoTable = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-5ce586b8"]]);
+  const TaoTable = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-497e62e7"]]);
   function buildPaginationItems(page, pageCount, siblingCount = 1) {
     if (pageCount <= 0) {
       return [];