@1337exp/taoui 1.10.1 → 1.10.3

package/README.md

@@ -11,7 +11,7 @@ change a handful of CSS variables and the whole kit follows.
 
 - **TaoBlock** — container with padding and radius
 - **TaoButton** — `primary` / `secondary` / `ghost` / `text` / `danger`. `tone` tints ghost and text (danger, success, warning, info)
-- **TaoCard** — card with cover / header / footer slots. `#cover` can be a photo or `TaoCarousel`
+- **TaoCard** — card with cover / header / footer slots. `#cover` can be a photo or `TaoCarousel`. `flush` is a tile (no padding/shadow, fills the cell); `#overlay` is a scrim on the cover
 - **TaoCopy** — clipboard icon. After a click, a “Copied” tooltip; if the trigger is gone, the tooltip is too
 - **TaoInput** — text field with v-model, validation, and `#prefix` / `#suffix` slots (icon or text inside the frame)
 - **TaoInputGroup** — outer glue: `#before` | field | `#after` (protocol, unit, button)
@@ -475,7 +475,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-selection`, `--tao-color-selection-text` — text selection (`::selection`)
 - `--tao-color-surface*` — container backgrounds (default / raised / sunken / hover)
 - `--tao-color-border*` — borders
-- `--tao-color-text*` — text (default / strong / muted / disabled)
+- `--tao-color-text*` — text (default / strong / subtle / muted / disabled)
 - `--tao-color-danger*`, `--tao-color-success*`, `--tao-color-warning*`, `--tao-color-info*` — status colors
 - `--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)

package/README.ru.md

@@ -11,7 +11,7 @@
 
 - **TaoBlock** — базовый контейнер с настраиваемыми отступами и скруглением
 - **TaoButton** — кнопка: `primary` / `secondary` / `ghost` / `text` / `danger`. `tone` красит ghost и text (danger, success, warning, info)
-- **TaoCard** — карточка со слотами cover / header / footer. В `#cover` — фото или `TaoCarousel`
+- **TaoCard** — карточка со слотами cover / header / footer. В `#cover` — фото или `TaoCarousel`. `flush` — плитка без padding/тени на всю ячейку; `#overlay` — scrim на обложке
 - **TaoCopy** — иконка копирования в буфер. После клика сверху тултип «Скопировано»; если кнопку убрали — тултип тоже
 - **TaoInput** — поле ввода с поддержкой v-model, валидации и слотов `#prefix` / `#suffix` (иконка или текст внутри рамки)
 - **TaoInputGroup** — склейка снаружи: `#before` | поле | `#after` (протокол, единица, кнопка)
@@ -478,7 +478,7 @@ document.documentElement.setAttribute('data-tao-theme', 'light')
 - `--tao-color-selection`, `--tao-color-selection-text` — выделение текста (`::selection`)
 - `--tao-color-surface*` — фоны контейнеров (обычный / приподнятый / утопленный / hover)
 - `--tao-color-border*` — границы
-- `--tao-color-text*` — текст (обычный / усиленный / приглушённый / disabled)
+- `--tao-color-text*` — текст (обычный / усиленный / subtle / приглушённый / disabled)
 - `--tao-color-danger*`, `--tao-color-success*`, `--tao-color-warning*`, `--tao-color-info*` — статусные цвета
 - `--tao-color-input-*` — поля ввода отдельно, т.к. фон/текст полей часто не совпадают с surface/text
 - `--tao-radius-control`, `--tao-radius-panel` — скругления (мелкие контролы vs крупные панели)

package/dist/index.cjs

@@ -627,26 +627,34 @@
   };
   const _hoisted_2$D = {
     key: 0,
-    class: "tao-card__header-title"
+    class: "tao-card__overlay"
+  };
+  const _hoisted_3$w = {
+    key: 1,
+    class: "tao-card__overlay"
   };
-  const _hoisted_3$w = { key: 0 };
   const _hoisted_4$r = {
+    key: 0,
+    class: "tao-card__header-title"
+  };
+  const _hoisted_5$j = { key: 0 };
+  const _hoisted_6$f = {
     key: 2,
     class: "tao-card__title-block"
   };
-  const _hoisted_5$j = {
+  const _hoisted_7$c = {
     key: 0,
     class: "tao-card__title"
   };
-  const _hoisted_6$f = {
+  const _hoisted_8$b = {
     key: 1,
     class: "tao-card__sub"
   };
-  const _hoisted_7$c = {
+  const _hoisted_9$5 = {
     key: 3,
     class: "tao-card__body"
   };
-  const _hoisted_8$b = {
+  const _hoisted_10$5 = {
     key: 4,
     class: "tao-card__footer"
   };
@@ -660,36 +668,54 @@
       shadowBottomOnly: { type: Boolean, default: false },
       hover: { type: Boolean, default: false },
       active: { type: Boolean, default: false },
-      overflow: { type: Boolean, default: false }
+      overflow: { type: Boolean, default: false },
+      flush: { type: Boolean, default: false }
     },
     setup(__props) {
       const props = __props;
+      const slots = vue.useSlots();
+      const hasContent = vue.computed(
+        () => Boolean(slots.headerTitle) || Boolean(slots.header) || Boolean(slots.headerSecondary) || Boolean(slots.title) || Boolean(slots.sub) || Boolean(slots.default) || Boolean(slots.footer)
+      );
+      const coverOnly = vue.computed(() => Boolean(slots.cover) && !hasContent.value);
       const paddingStyle = vue.computed(() => {
+        if (props.flush) {
+          return { padding: "0" };
+        }
         if (Array.isArray(props.padding)) {
           return { padding: `${props.padding.map((p) => `${p}px`).join(" ")}` };
         }
         return { padding: `${props.padding}px` };
       });
       const radiusStyle = vue.computed(() => ({ borderRadius: `${props.radius}px` }));
+      const showPanelShadow = vue.computed(() => props.shadow && !props.shadowBottomOnly && !props.flush);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["tao-card", {
-            "tao-card--shadow": __props.shadow && !__props.shadowBottomOnly,
+            "tao-card--shadow": showPanelShadow.value,
             "tao-card--shadow-bottom": __props.shadowBottomOnly,
             "tao-card--hover": __props.hover,
             "tao-card--active": __props.active,
-            "tao-card--overflow": __props.overflow
+            "tao-card--overflow": __props.overflow,
+            "tao-card--flush": __props.flush,
+            "tao-card--cover-only": coverOnly.value
           }]),
           style: vue.normalizeStyle(radiusStyle.value)
         }, [
           _ctx.$slots.cover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
-            vue.renderSlot(_ctx.$slots, "cover", {}, void 0, true)
+            vue.renderSlot(_ctx.$slots, "cover", {}, void 0, true),
+            _ctx.$slots.overlay ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, [
+              vue.renderSlot(_ctx.$slots, "overlay", {}, void 0, true)
+            ])) : vue.createCommentVNode("", true)
+          ])) : _ctx.$slots.overlay ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$w, [
+            vue.renderSlot(_ctx.$slots, "overlay", {}, void 0, true)
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
+          hasContent.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
             class: "tao-card__content",
             style: vue.normalizeStyle(paddingStyle.value)
           }, [
-            _ctx.$slots.headerTitle ? (vue.openBlock(), vue.createElementBlock("h2", _hoisted_2$D, [
+            _ctx.$slots.headerTitle ? (vue.openBlock(), vue.createElementBlock("h2", _hoisted_4$r, [
               vue.renderSlot(_ctx.$slots, "headerTitle", {}, void 0, true)
             ])) : vue.createCommentVNode("", true),
             _ctx.$slots.header || _ctx.$slots.headerSecondary ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -699,30 +725,30 @@
               vue.createElementVNode("span", null, [
                 vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
               ]),
-              _ctx.$slots.headerSecondary ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$w, [
+              _ctx.$slots.headerSecondary ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$j, [
                 vue.renderSlot(_ctx.$slots, "headerSecondary", {}, void 0, true)
               ])) : vue.createCommentVNode("", true)
             ], 2)) : vue.createCommentVNode("", true),
-            _ctx.$slots.title || _ctx.$slots.sub ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$r, [
-              _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("h2", _hoisted_5$j, [
+            _ctx.$slots.title || _ctx.$slots.sub ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
+              _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("h2", _hoisted_7$c, [
                 vue.renderSlot(_ctx.$slots, "title", {}, void 0, true)
               ])) : vue.createCommentVNode("", true),
-              _ctx.$slots.sub ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$f, [
+              _ctx.$slots.sub ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$b, [
                 vue.renderSlot(_ctx.$slots, "sub", {}, void 0, true)
               ])) : vue.createCommentVNode("", true)
             ])) : vue.createCommentVNode("", true),
-            _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$c, [
+            _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$5, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ])) : vue.createCommentVNode("", true),
-            _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$b, [
+            _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$5, [
               vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
             ])) : vue.createCommentVNode("", true)
-          ], 4)
+          ], 4)) : vue.createCommentVNode("", true)
         ], 6);
       };
     }
   });
-  const TaoCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-2ff3d055"]]);
+  const TaoCard = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-f4fc87bb"]]);
   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(
@@ -1040,7 +1066,7 @@
       };
     }
   });
-  const TaoTabs = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-bf16735e"]]);
+  const TaoTabs = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-a17ac487"]]);
   function listenFocusLoss(onLoss) {
     function onVisibilityChange() {
       if (document.hidden) {
@@ -6126,7 +6152,7 @@
       };
     }
   });
-  const TaoSegmentedOption = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-1a9357a1"]]);
+  const TaoSegmentedOption = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-acd5de66"]]);
   const _hoisted_1$f = ["role", "aria-live"];
   const _hoisted_2$d = { class: "tao-alert__body" };
   const _hoisted_3$b = {