@1337exp/taoui 1.10.2 → 1.10.4

package/dist/index.d.ts

@@ -382,8 +382,8 @@ onChange?: ((value: boolean) => any) | undefined;
 error: boolean;
 label: string;
 disabled: boolean;
-modelValue: boolean;
 value: boolean;
+modelValue: boolean;
 indeterminate: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1545,7 +1545,7 @@ peek?: number;
 /** How many slides fit in the viewport. 5 = product strip. 1 = one card. */
 perView?: number;
 controls?: boolean;
-/** Interval in ms. 0 — off. Pauses on hover, focus, drag, and reduced motion. */
+/** Interval in ms. 0 — off. Pauses on hover, keyboard focus, drag, and reduced motion. */
 autoplay?: number;
 loop?: boolean;
 /** Pips under the track: one per snap. Inactive are dots, the current one stretches into a pill. */
@@ -1578,7 +1578,7 @@ peek?: number;
 /** How many slides fit in the viewport. 5 = product strip. 1 = one card. */
 perView?: number;
 controls?: boolean;
-/** Interval in ms. 0 — off. Pauses on hover, focus, drag, and reduced motion. */
+/** Interval in ms. 0 — off. Pauses on hover, keyboard focus, drag, and reduced motion. */
 autoplay?: number;
 loop?: boolean;
 /** Pips under the track: one per snap. Inactive are dots, the current one stretches into a pill. */
@@ -1722,6 +1722,7 @@ shadowBottomOnly: boolean;
 hover: boolean;
 active: boolean;
 overflow: boolean;
+flush: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_6<__VLS_TypePropsToRuntimeProps_6<Props_4>, {
 padding: number;
 radius: number;
@@ -1730,6 +1731,7 @@ shadowBottomOnly: boolean;
 hover: boolean;
 active: boolean;
 overflow: boolean;
+flush: boolean;
 }>>> & Readonly<{}>, {
 padding: number | number[];
 radius: number;
@@ -1738,6 +1740,7 @@ hover: boolean;
 shadowBottomOnly: boolean;
 active: boolean;
 overflow: boolean;
+flush: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare const __VLS_component_8: DefineComponent<ExtractPropTypes<__VLS_WithDefaults_7<__VLS_TypePropsToRuntimeProps_7<Props_5>, {
@@ -2445,6 +2448,7 @@ declare function __VLS_template_6(): {
 
 declare function __VLS_template_7(): {
     cover?(_: {}): any;
+    overlay?(_: {}): any;
     headerTitle?(_: {}): any;
     header?(_: {}): any;
     headerSecondary?(_: {}): any;
@@ -3762,6 +3766,8 @@ declare interface Props_4 {
     hover?: boolean;
     active?: boolean;
     overflow?: boolean;
+    /** Плитка: без отступа и без тени, cover/body тянутся на ячейку. */
+    flush?: boolean;
 }
 
 declare interface Props_5 {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, toDisplayString, createElementVNode, renderSlot, computed, normalizeStyle, inject, useId, ref, unref, watch, createTextVNode, onBeforeUnmount, createBlock, Teleport, createVNode, Transition, withCtx, withModifiers, nextTick, Fragment, renderList, onMounted, provide, resolveDynamicComponent, useCssVars, useSlots, reactive, onBeforeMount, withDirectives, vModelText, getCurrentInstance, mergeProps, TransitionGroup, onUpdated, createApp } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, toDisplayString, createElementVNode, renderSlot, computed, normalizeStyle, inject, useId, ref, unref, watch, createTextVNode, useSlots, onBeforeUnmount, createBlock, Teleport, createVNode, Transition, withCtx, withModifiers, nextTick, Fragment, renderList, onMounted, provide, resolveDynamicComponent, useCssVars, reactive, onBeforeMount, withDirectives, vModelText, getCurrentInstance, mergeProps, TransitionGroup, onUpdated, createApp } from "vue";
 const _hoisted_1$P = ["type", "disabled"];
 const _hoisted_2$I = {
   key: 0,
@@ -624,26 +624,34 @@ const _hoisted_1$K = {
 };
 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"
 };
@@ -657,36 +665,54 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     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 = useSlots();
+    const hasContent = computed(
+      () => Boolean(slots.headerTitle) || Boolean(slots.header) || Boolean(slots.headerSecondary) || Boolean(slots.title) || Boolean(slots.sub) || Boolean(slots.default) || Boolean(slots.footer)
+    );
+    const coverOnly = computed(() => Boolean(slots.cover) && !hasContent.value);
     const paddingStyle = 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 = computed(() => ({ borderRadius: `${props.radius}px` }));
+    const showPanelShadow = computed(() => props.shadow && !props.shadowBottomOnly && !props.flush);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: 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: normalizeStyle(radiusStyle.value)
       }, [
         _ctx.$slots.cover ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
-          renderSlot(_ctx.$slots, "cover", {}, void 0, true)
+          renderSlot(_ctx.$slots, "cover", {}, void 0, true),
+          _ctx.$slots.overlay ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
+            renderSlot(_ctx.$slots, "overlay", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ])) : _ctx.$slots.overlay ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
+          renderSlot(_ctx.$slots, "overlay", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", {
+        hasContent.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
           class: "tao-card__content",
           style: normalizeStyle(paddingStyle.value)
         }, [
-          _ctx.$slots.headerTitle ? (openBlock(), createElementBlock("h2", _hoisted_2$D, [
+          _ctx.$slots.headerTitle ? (openBlock(), createElementBlock("h2", _hoisted_4$r, [
             renderSlot(_ctx.$slots, "headerTitle", {}, void 0, true)
           ])) : createCommentVNode("", true),
           _ctx.$slots.header || _ctx.$slots.headerSecondary ? (openBlock(), createElementBlock("div", {
@@ -696,30 +722,30 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             createElementVNode("span", null, [
               renderSlot(_ctx.$slots, "header", {}, void 0, true)
             ]),
-            _ctx.$slots.headerSecondary ? (openBlock(), createElementBlock("span", _hoisted_3$w, [
+            _ctx.$slots.headerSecondary ? (openBlock(), createElementBlock("span", _hoisted_5$j, [
               renderSlot(_ctx.$slots, "headerSecondary", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true),
-          _ctx.$slots.title || _ctx.$slots.sub ? (openBlock(), createElementBlock("div", _hoisted_4$r, [
-            _ctx.$slots.title ? (openBlock(), createElementBlock("h2", _hoisted_5$j, [
+          _ctx.$slots.title || _ctx.$slots.sub ? (openBlock(), createElementBlock("div", _hoisted_6$f, [
+            _ctx.$slots.title ? (openBlock(), createElementBlock("h2", _hoisted_7$c, [
               renderSlot(_ctx.$slots, "title", {}, void 0, true)
             ])) : createCommentVNode("", true),
-            _ctx.$slots.sub ? (openBlock(), createElementBlock("div", _hoisted_6$f, [
+            _ctx.$slots.sub ? (openBlock(), createElementBlock("div", _hoisted_8$b, [
               renderSlot(_ctx.$slots, "sub", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_7$c, [
+          _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_9$5, [
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])) : createCommentVNode("", true),
-          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8$b, [
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_10$5, [
             renderSlot(_ctx.$slots, "footer", {}, void 0, true)
           ])) : createCommentVNode("", true)
-        ], 4)
+        ], 4)) : 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(
@@ -7230,6 +7256,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     let dragMoved = 0;
     let dragPointer = -1;
     let scrollFrame = 0;
+    let focusFrame = 0;
     let autoplayTimer = 0;
     const step = computed(() => Math.max(1, Math.round(props.perView)));
     const lastIndex = computed(() => Math.max(count.value - step.value, 0));
@@ -7338,18 +7365,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       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) {
@@ -7486,6 +7527,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       endDrag();
       cancelAnimationFrame(scrollFrame);
+      cancelAnimationFrame(focusFrame);
       stopAutoplay();
       document.removeEventListener("visibilitychange", onVisibilityChange);
       window.removeEventListener("blur", onWindowBlur);
@@ -7497,8 +7539,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(trackStyle.value),
         onMouseenter: onMouseEnter,
         onMouseleave: onMouseLeave,
-        onFocusin: onFocusIn,
-        onFocusout: onFocusOut
+        onFocusin: scheduleFocusPause,
+        onFocusout: scheduleFocusPause
       }, [
         createElementVNode("div", _hoisted_1$4, [
           renderSlot(_ctx.$slots, "prev", {
@@ -7621,7 +7663,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 = {