@1337exp/taoui 1.10.2 → 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)

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` (протокол, единица, кнопка)

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(