@1337exp/taoui 1.10.2 → 1.10.4

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(
@@ -7233,6 +7259,7 @@
       let dragMoved = 0;
       let dragPointer = -1;
       let scrollFrame = 0;
+      let focusFrame = 0;
       let autoplayTimer = 0;
       const step = vue.computed(() => Math.max(1, Math.round(props.perView)));
       const lastIndex = vue.computed(() => Math.max(count.value - step.value, 0));
@@ -7341,18 +7368,32 @@
         hoverPaused.value = false;
         syncAutoplay();
       }
-      function onFocusIn() {
-        focusPaused.value = true;
-        stopAutoplay();
+      function hasKeyboardFocus(root) {
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement) || !root.contains(active)) {
+          return false;
+        }
+        try {
+          return active.matches(":focus-visible");
+        } catch {
+          return true;
+        }
       }
-      function onFocusOut(event) {
+      function scheduleFocusPause(event) {
         const root = event.currentTarget;
-        const next = event.relatedTarget;
-        if (next && root.contains(next)) {
-          return;
-        }
-        focusPaused.value = false;
-        syncAutoplay();
+        cancelAnimationFrame(focusFrame);
+        focusFrame = requestAnimationFrame(() => {
+          if (!track.value) {
+            return;
+          }
+          const next = hasKeyboardFocus(root);
+          focusPaused.value = next;
+          if (next) {
+            stopAutoplay();
+            return;
+          }
+          syncAutoplay();
+        });
       }
       function onScroll() {
         if (dragging.value) {
@@ -7489,6 +7530,7 @@
       vue.onBeforeUnmount(() => {
         endDrag();
         cancelAnimationFrame(scrollFrame);
+        cancelAnimationFrame(focusFrame);
         stopAutoplay();
         document.removeEventListener("visibilitychange", onVisibilityChange);
         window.removeEventListener("blur", onWindowBlur);
@@ -7500,8 +7542,8 @@
           style: vue.normalizeStyle(trackStyle.value),
           onMouseenter: onMouseEnter,
           onMouseleave: onMouseLeave,
-          onFocusin: onFocusIn,
-          onFocusout: onFocusOut
+          onFocusin: scheduleFocusPause,
+          onFocusout: scheduleFocusPause
         }, [
           vue.createElementVNode("div", _hoisted_1$4, [
             vue.renderSlot(_ctx.$slots, "prev", {
@@ -7624,7 +7666,7 @@
       };
     }
   });
-  const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bc396e5d"]]);
+  const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b4139b57"]]);
   const _hoisted_1$3 = ["aria-label"];
   const _hoisted_2$2 = ["aria-label"];
   const _hoisted_3$2 = {