@1337exp/taoui 1.7.0 → 1.8.0

package/README.md

@@ -28,6 +28,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoContainer** — max-width (wide / slim / ultra-slim) and centering
 - **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)
 - **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
@@ -92,6 +93,9 @@ Control sizes: `small` | `medium` | `large`.
 Avatar also accepts short `s` / `m` / `l`. Divider `gap` used to call the large size `big` — that is an alias of `large`.
 Container lives on another axis: `wide` / `slim` / `ultra-slim`.
 
+Font size scale (primitives): `xs` 12 … `xl` 18 for controls; `2xl` 24, `3xl` 32, `4xl` 36 for titles and prose.
+There is no heading component — use `h1 { font-size: var(--tao-font-size-3xl) }`.
+
 ## Icons
 
 `TaoIcon` does not ship its own set — it renders `icon-<name>`
@@ -476,6 +480,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-input-*` — fields, because input bg/text often differs from surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — radii (small controls vs large panels)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — shadows
+- `--tao-font-size-*` — type scale in `primitives.css`: `xs`–`xl` controls, `2xl`–`4xl` titles / prose
 
 The full list lives in `src/styles/semantic.css` — the only file worth opening
 to see the whole theming API.

package/README.ru.md

@@ -28,6 +28,7 @@
 - **TaoContainer** — контейнер с ограничением ширины (wide/slim/ultra-slim) и авто-центровкой
 - **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)
 - **TaoSplit** — две панели и полоса. `row` / `column` как у Flex. `v-model` — размер start в `%` или `px`; `resizable="false"` фиксирует полосу. Не Divider.
 - **TaoFieldset** — рамка-группа: `legend` сидит на верхней границе, `align` — start / center / end
@@ -92,6 +93,9 @@ Stages — это процесс, не тон: `wait` / `work` / `ok` / `bad` (`
 Avatar понимает и короткие `s` / `m` / `l`. Divider `gap` раньше называл крупный размер `big` — это алиас `large`.
 Container живёт на другой оси: `wide` / `slim` / `ultra-slim`.
 
+Шкала кегля (примитивы): `xs` 12 … `xl` 18 для контролов; `2xl` 24, `3xl` 32, `4xl` 36 для заголовков и прозы.
+Отдельного компонента заголовка нет — `h1 { font-size: var(--tao-font-size-3xl) }`.
+
 ## Иконки
 
 `TaoIcon` не поставляет собственный набор иконок — он рендерит класс `icon-<name>`
@@ -479,6 +483,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-input-*` — поля ввода отдельно, т.к. фон/текст полей часто не совпадают с surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — скругления (мелкие контролы vs крупные панели)
 - `--tao-shadow-panel`, `--tao-shadow-overlay` — тени
+- `--tao-font-size-*` — шкала кегля в `primitives.css`: `xs`–`xl` контролы, `2xl`–`4xl` заголовки / проза
 
 Полный список — в `src/styles/semantic.css`, он же единственный файл,
 который стоит открыть, чтобы понять весь доступный API темизации.

package/dist/index.cjs

@@ -12,7 +12,7 @@
     class: "tao-button__icon"
   };
   const _hoisted_4$v = { class: "tao-button__content" };
-  const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoButton" },
     __name: "TaoButton",
     props: {
@@ -67,8 +67,8 @@
     }
     return target;
   };
-  const TaoButton = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-c3034f66"]]);
-  const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+  const TaoButton = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-c3034f66"]]);
+  const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoBlock" },
     __name: "TaoBlock",
     props: {
@@ -100,7 +100,7 @@
       };
     }
   });
-  const TaoBlock = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-feb87e36"]]);
+  const TaoBlock = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-feb87e36"]]);
   const formFieldKey = Symbol("taoFormField");
   const _hoisted_1$O = { class: "tao-input-wrapper" };
   const _hoisted_2$H = ["for"];
@@ -117,7 +117,7 @@
     key: 1,
     class: "tao-input__error"
   };
-  const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoInput" },
     __name: "TaoInput",
     props: {
@@ -193,7 +193,7 @@
       };
     }
   });
-  const TaoInput = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-b522e041"]]);
+  const TaoInput = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__scopeId", "data-v-b522e041"]]);
   const _hoisted_1$N = {
     key: 0,
     class: "tao-input-group__addon tao-input-group__addon--before"
@@ -203,7 +203,7 @@
     key: 1,
     class: "tao-input-group__addon tao-input-group__addon--after"
   };
-  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoInputGroup" },
     __name: "TaoInputGroup",
     setup(__props) {
@@ -238,7 +238,7 @@
       };
     }
   });
-  const TaoInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-f06bb3b1"]]);
+  const TaoInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__scopeId", "data-v-f06bb3b1"]]);
   const _hoisted_1$M = ["id", "value", "placeholder", "disabled", "aria-invalid", "aria-describedby", "aria-valuenow", "aria-valuemin", "aria-valuemax"];
   const _hoisted_2$F = {
     key: 0,
@@ -248,7 +248,7 @@
   const _hoisted_4$t = { "aria-hidden": "true" };
   const _hoisted_5$l = ["aria-label", "disabled"];
   const _hoisted_6$g = { "aria-hidden": "true" };
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoInputNumber" },
     __name: "TaoInputNumber",
     props: {
@@ -434,13 +434,13 @@
       };
     }
   });
-  const TaoInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-331dd958"]]);
+  const TaoInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-331dd958"]]);
   const _hoisted_1$L = ["aria-label", "disabled"];
   const _hoisted_2$E = { "aria-hidden": "true" };
   const _hoisted_3$x = ["id", "value", "disabled", "aria-invalid", "aria-describedby", "aria-valuenow", "aria-valuemin", "aria-valuemax"];
   const _hoisted_4$s = ["aria-label", "disabled"];
   const _hoisted_5$k = { "aria-hidden": "true" };
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoQuantity" },
     __name: "TaoQuantity",
     props: {
@@ -620,7 +620,7 @@
       };
     }
   });
-  const TaoQuantity = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-c9c7c8b4"]]);
+  const TaoQuantity = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-c9c7c8b4"]]);
   const _hoisted_1$K = {
     key: 0,
     class: "tao-card__cover"
@@ -650,7 +650,7 @@
     key: 4,
     class: "tao-card__footer"
   };
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoCard" },
     __name: "TaoCard",
     props: {
@@ -722,7 +722,7 @@
       };
     }
   });
-  const TaoCard = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-2ff3d055"]]);
+  const TaoCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2ff3d055"]]);
   const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
   function getFocusable(root) {
     return [...root.querySelectorAll(FOCUSABLE)].filter(
@@ -790,7 +790,7 @@
     key: 1,
     class: "tao-modal__footer"
   };
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoModal" },
     __name: "TaoModal",
     props: {
@@ -932,11 +932,11 @@
       };
     }
   });
-  const TaoModal = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-102cfd66"]]);
+  const TaoModal = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-102cfd66"]]);
   const _hoisted_1$I = { class: "tao-tabs" };
   const _hoisted_2$B = ["id", "aria-selected", "aria-controls", "tabindex", "disabled", "onClick"];
   const _hoisted_3$u = ["id", "aria-labelledby"];
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoTabs" },
     __name: "TaoTabs",
     props: {
@@ -1040,7 +1040,7 @@
       };
     }
   });
-  const TaoTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-bf16735e"]]);
+  const TaoTabs = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-bf16735e"]]);
   function listenFocusLoss(onLoss) {
     function onVisibilityChange() {
       if (document.hidden) {
@@ -1056,7 +1056,7 @@
       window.removeEventListener("pagehide", onLoss);
     };
   }
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoTooltip" },
     __name: "TaoTooltip",
     props: {
@@ -1218,9 +1218,9 @@
       };
     }
   });
-  const TaoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-926dfa73"]]);
+  const TaoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-926dfa73"]]);
   const _hoisted_1$H = { class: "tao-popover" };
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoPopover" },
     __name: "TaoPopover",
     props: {
@@ -1418,7 +1418,7 @@
       };
     }
   });
-  const TaoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-afd791a7"]]);
+  const TaoPopover = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-afd791a7"]]);
   const spoilerGroupKey = Symbol("taoSpoilerGroup");
   const _hoisted_1$G = { class: "tao-spoiler" };
   const _hoisted_2$A = ["aria-expanded", "aria-controls"];
@@ -1428,7 +1428,7 @@
   };
   const _hoisted_4$p = ["id"];
   const _hoisted_5$h = { class: "tao-spoiler__content-inner" };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoSpoiler" },
     __name: "TaoSpoiler",
     props: {
@@ -1524,9 +1524,9 @@
       };
     }
   });
-  const TaoSpoiler = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-ccb052cf"]]);
+  const TaoSpoiler = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-ccb052cf"]]);
   const _hoisted_1$F = { class: "tao-spoiler-group" };
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoSpoilerGroup" },
     __name: "TaoSpoilerGroup",
     props: {
@@ -1557,9 +1557,9 @@
       };
     }
   });
-  const TaoSpoilerGroup = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-118970dd"]]);
+  const TaoSpoilerGroup = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-118970dd"]]);
   const _hoisted_1$E = ["aria-label"];
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoCopy" },
     __name: "TaoCopy",
     props: {
@@ -1710,8 +1710,8 @@
       };
     }
   });
-  const TaoCopy = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-38d3381d"]]);
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const TaoCopy = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-38d3381d"]]);
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoContainer" },
     __name: "TaoContainer",
     props: {
@@ -1728,8 +1728,8 @@
       };
     }
   });
-  const TaoContainer = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-4c0deb90"]]);
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const TaoContainer = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-4c0deb90"]]);
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoFlex" },
     __name: "TaoFlex",
     props: {
@@ -1760,7 +1760,7 @@
       };
     }
   });
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoSpace" },
     __name: "TaoSpace",
     props: {
@@ -1780,7 +1780,58 @@
       };
     }
   });
-  const TaoSpace = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-698ca712"]]);
+  const TaoSpace = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-698ca712"]]);
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+    ...{ name: "TaoGrid" },
+    __name: "TaoGrid",
+    props: {
+      min: { default: "220px" },
+      cols: { default: 0 },
+      gap: { default: "var(--tao-space-4)" }
+    },
+    setup(__props) {
+      const props = __props;
+      const isFixed = vue.computed(() => props.cols > 0);
+      const gridStyle = vue.computed(() => ({
+        "--tao-grid-min": props.min,
+        "--tao-grid-cols": isFixed.value ? String(props.cols) : void 0,
+        "--tao-grid-gap": props.gap
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["tao-grid", { "tao-grid--fixed": isFixed.value }]),
+          style: vue.normalizeStyle(gridStyle.value)
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 6);
+      };
+    }
+  });
+  const TaoGrid = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-bd5bc452"]]);
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+    ...{ name: "TaoGridItem" },
+    __name: "TaoGridItem",
+    props: {
+      col: { default: 1 },
+      row: { default: 1 }
+    },
+    setup(__props) {
+      const props = __props;
+      const itemStyle = vue.computed(() => ({
+        "--tao-grid-col": String(Math.max(1, props.col)),
+        "--tao-grid-row": String(Math.max(1, props.row))
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "tao-grid-item",
+          style: vue.normalizeStyle(itemStyle.value)
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 4);
+      };
+    }
+  });
+  const TaoGridItem = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-43bd1e34"]]);
   const _hoisted_1$D = { class: "tao-split__pane tao-split__pane--start" };
   const _hoisted_2$z = ["aria-orientation", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "tabindex"];
   const _hoisted_3$s = { class: "tao-split__pane tao-split__pane--end" };
@@ -8680,8 +8731,10 @@
     TaoSpoilerGroup,
     TaoCopy,
     TaoContainer,
-    _sfc_main$I,
+    _sfc_main$K,
     TaoSpace,
+    TaoGrid,
+    TaoGridItem,
     TaoSplit,
     TaoIcon,
     TaoLoader,
@@ -8754,8 +8807,10 @@
   exports2.TaoEmpty = TaoEmpty;
   exports2.TaoFieldset = TaoFieldset;
   exports2.TaoFileDrop = TaoFileDrop;
-  exports2.TaoFlex = _sfc_main$I;
+  exports2.TaoFlex = _sfc_main$K;
   exports2.TaoFormField = TaoFormField;
+  exports2.TaoGrid = TaoGrid;
+  exports2.TaoGridItem = TaoGridItem;
   exports2.TaoIcon = TaoIcon;
   exports2.TaoImage = TaoImage;
   exports2.TaoInput = TaoInput;