@1337exp/taoui 1.3.2 → 1.3.4

package/README.md

@@ -1,6 +1,6 @@
 # Tao UI
 
-**English** · [Русский](README.RU.md)
+**English** · [Русский](README.ru.md)
 
 A Vue 3 component library for Nuxt/Vue apps, driven by design tokens:
 change a handful of CSS variables and the whole kit follows.
@@ -46,7 +46,7 @@ change a handful of CSS variables and the whole kit follows.
 - **TaoQuantity** — cart quantity: `− | field | +`, integers, stock; minus at the minimum can remove the row
 - **TaoTextarea** — autosizing multiline. `maxlength` caps input, `count` shows “entered / max”
 - **TaoPinCode** — N cells. By default a click clears the cell and everything to the right (`clear-on="focus"`); `clear-on="input"` replaces the digit only when typing. The last cell blurs and emits `complete`
-- **TaoSlider** — mouse, touch, and arrows. Optional precise input on right-click
+- **TaoSlider** — mouse, touch, and arrows. Optional precise input on right-click. `size="small"` is a thin track for seek / volume
 - **TaoFileDrop** — drop zone (drag & drop + click). File names listed under the zone, `v-model` is `File[]`. Clearing the whole batch is the parent’s job (`clear-request`)
 
 ### Data display
@@ -68,7 +68,7 @@ change a handful of CSS variables and the whole kit follows.
 
 ### Navigation
 
-- **TaoLink** — uses `<NuxtLink>` in Nuxt and a plain `<a>` elsewhere, with no extra setup
+- **TaoLink** — `<NuxtLink>` in Nuxt, `<RouterLink>` with vue-router, otherwise a plain `<a>` — no extra setup
 - **TaoBreadcrumb** — crumbs: the last item is the current page
 - **TaoDropdownMenu** — dropdown that flips at the viewport edge
 - **TaoScrollTop** — floating “back to top” with a ripple. Appears on reverse scroll after `boundary`

package/{README.RU.md → README.ru.md}

@@ -46,7 +46,7 @@
 - **TaoQuantity** — количество в корзине: `− | поле | +`, целые штуки, сток, минус на минимуме может убрать строку
 - **TaoTextarea** — многострочное поле с авто-высотой. `maxlength` ограничивает ввод, `count` показывает «введено / максимум»
 - **TaoPinCode** — пин-код из N полей. По умолчанию клик стирает ячейку и все справа (`clear-on="focus"`); `clear-on="input"` заменяет цифру только при вводе. Последняя ячейка снимает фокус и эмитит `complete`
-- **TaoSlider** — слайдер: мышь, тач и стрелки. Опциональный точный ввод по правому клику
+- **TaoSlider** — слайдер: мышь, тач и стрелки. Опциональный точный ввод по правому клику. `size="small"` — тонкий трек для seek / громкости
 - **TaoFileDrop** — зона загрузки (drag & drop + клик). Список имён под зоной, `v-model` — `File[]`. Очистку всей пачки решает родитель (`clear-request`)
 
 ### Отображение данных
@@ -68,7 +68,7 @@
 
 ### Навигация и взаимодействие
 
-- **TaoLink** — ссылка, использующая `<NuxtLink>` в Nuxt-проекте и обычный `<a>` вне его — без дополнительной настройки
+- **TaoLink** — `<NuxtLink>` в Nuxt, `<RouterLink>` при vue-router, иначе обычный `<a>` — без дополнительной настройки
 - **TaoBreadcrumb** — крошки: последний пункт — текущая страница
 - **TaoDropdownMenu** — выпадающее меню с авто-позиционированием у края экрана
 - **TaoScrollTop** — плавающая кнопка «наверх» с ripple. Появляется при обратном скролле после `boundary`

package/dist/index.cjs

@@ -968,6 +968,21 @@
     }
   });
   const TaoTabs = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-bf16735e"]]);
+  function listenFocusLoss(onLoss) {
+    function onVisibilityChange() {
+      if (document.hidden) {
+        onLoss();
+      }
+    }
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("blur", onLoss);
+    window.addEventListener("pagehide", onLoss);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("blur", onLoss);
+      window.removeEventListener("pagehide", onLoss);
+    };
+  }
   const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoTooltip" },
     __name: "TaoTooltip",
@@ -977,6 +992,14 @@
     },
     setup(__props) {
       const showTooltip = vue.ref(false);
+      function hide() {
+        showTooltip.value = false;
+      }
+      let stopFocusLoss;
+      vue.onMounted(() => {
+        stopFocusLoss = listenFocusLoss(hide);
+      });
+      vue.onBeforeUnmount(() => stopFocusLoss == null ? void 0 : stopFocusLoss());
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "tao-tooltip-wrapper",
@@ -1000,7 +1023,7 @@
       };
     }
   });
-  const TaoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-6f3b3c11"]]);
+  const TaoTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-fa4a9dac"]]);
   const _hoisted_1$B = { class: "tao-popover" };
   const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoPopover" },
@@ -2262,7 +2285,8 @@
       showValue: { type: Boolean, default: false },
       placeholder: { default: "" },
       modelValue: {},
-      disabled: { type: Boolean, default: false }
+      disabled: { type: Boolean, default: false },
+      size: { default: "medium" }
     },
     emits: ["update:modelValue"],
     setup(__props, { emit: __emit }) {
@@ -2282,6 +2306,7 @@
       const current = vue.computed(() => unpackModelValue());
       const trackRef = vue.ref(null);
       const isDragging = vue.ref(false);
+      let dragPointer = -1;
       const shadowInputRef = vue.ref(null);
       const shadowModel = vue.ref("0");
       const showShadowModel = vue.ref(false);
@@ -2303,42 +2328,63 @@
           return props.min;
         }
         const rect = trackRef.value.getBoundingClientRect();
-        const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
-        const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+        const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
         const ratio = rect.width ? x / rect.width : 0;
         const v = props.min + ratio * (props.max - props.min);
         return clampValue(Math.round((v - props.min) / props.step) * props.step + props.min);
       }
-      function handleMove(event) {
-        if (props.disabled) {
+      function releaseDragCapture() {
+        const el = trackRef.value;
+        const id = dragPointer;
+        if (!el || id === -1) {
           return;
         }
-        commit(calculateValue(event));
-      }
-      function onMouseUp(event) {
-        const evBtn = "touches" in event ? void 0 : event.button;
-        if (typeof evBtn !== "undefined" && evBtn !== 0 || showShadowModel.value) {
+        if (typeof el.hasPointerCapture === "function" && !el.hasPointerCapture(id)) {
           return;
         }
-        isDragging.value = false;
+        try {
+          el.releasePointerCapture(id);
+        } catch {
+        }
       }
-      function onMouseDown(event) {
-        if (props.disabled) {
+      function endDrag() {
+        if (!isDragging.value) {
           return;
         }
-        const evBtn = "touches" in event ? void 0 : event.button;
-        if (typeof evBtn !== "undefined" && evBtn !== 0 || showShadowModel.value) {
+        isDragging.value = false;
+        releaseDragCapture();
+        dragPointer = -1;
+      }
+      function onPointerDown(event) {
+        if (props.disabled || showShadowModel.value || event.button !== 0 || !trackRef.value) {
           return;
         }
+        dragPointer = event.pointerId;
         isDragging.value = true;
-        handleMove(event);
+        commit(calculateValue(event));
         event.preventDefault();
+        try {
+          trackRef.value.setPointerCapture(event.pointerId);
+        } catch {
+        }
+      }
+      function onPointerMove(event) {
+        if (!isDragging.value || event.pointerId !== dragPointer) {
+          return;
+        }
+        commit(calculateValue(event));
       }
-      function onMouseMove(event) {
+      function onPointerEnd(event) {
         if (!isDragging.value) {
           return;
         }
-        handleMove(event);
+        if (dragPointer !== -1 && event.pointerId !== dragPointer) {
+          return;
+        }
+        endDrag();
+      }
+      function onLostPointerCapture() {
+        endDrag();
       }
       function onKeydown(event) {
         if (props.disabled || showShadowModel.value) {
@@ -2392,26 +2438,23 @@
           return (_a = shadowInputRef.value) == null ? void 0 : _a.focus();
         });
       }
+      let stopFocusLoss;
       vue.onMounted(() => {
-        window.addEventListener("mouseleave", onMouseUp);
-        window.addEventListener("mouseup", onMouseUp);
-        window.addEventListener("mousemove", onMouseMove);
-        window.addEventListener("touchend", onMouseUp);
-        window.addEventListener("touchmove", onMouseMove);
+        stopFocusLoss = listenFocusLoss(endDrag);
       });
       vue.onBeforeUnmount(() => {
-        window.removeEventListener("mouseleave", onMouseUp);
-        window.removeEventListener("mouseup", onMouseUp);
-        window.removeEventListener("mousemove", onMouseMove);
-        window.removeEventListener("touchend", onMouseUp);
-        window.removeEventListener("touchmove", onMouseMove);
+        endDrag();
+        stopFocusLoss == null ? void 0 : stopFocusLoss();
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           id: controlId.value,
           ref_key: "trackRef",
           ref: trackRef,
-          class: vue.normalizeClass(["tao-slider", { "tao-slider--show-value": __props.showValue, "tao-slider--disabled": __props.disabled }]),
+          class: vue.normalizeClass(["tao-slider", [
+            `tao-slider--${__props.size}`,
+            { "tao-slider--show-value": __props.showValue, "tao-slider--disabled": __props.disabled }
+          ]]),
           role: "slider",
           tabindex: __props.disabled ? -1 : 0,
           "aria-valuemin": __props.min,
@@ -2420,8 +2463,11 @@
           "aria-disabled": __props.disabled || void 0,
           "aria-describedby": describedBy.value,
           onContextmenu: vue.withModifiers(onContextMenu, ["prevent"]),
-          onMousedown: onMouseDown,
-          onTouchstart: onMouseDown,
+          onPointerdown: onPointerDown,
+          onPointermove: onPointerMove,
+          onPointerup: onPointerEnd,
+          onPointercancel: onPointerEnd,
+          onLostpointercapture: onLostPointerCapture,
           onKeydown
         }, [
           _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "tao-slider__track" }, null, -1)),
@@ -2444,7 +2490,7 @@
             class: "tao-slider__shadow-input",
             onBlur: onBlurShadowModel,
             onKeydown: onShadowKeydown,
-            onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            onPointerdown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
             }, ["stop"]))
           }, null, 40, _hoisted_2$m)), [
             [vue.vModelText, shadowModel.value]
@@ -2457,7 +2503,7 @@
       };
     }
   });
-  const TaoSlider = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-241d1042"]]);
+  const TaoSlider = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-24a38782"]]);
   const _hoisted_1$o = { class: "tao-file-drop" };
   const _hoisted_2$l = { class: "tao-file-drop__row" };
   const _hoisted_3$i = ["accept", "multiple"];
@@ -2559,6 +2605,13 @@
       function fileKey(file, index) {
         return `${file.name}-${file.size}-${file.lastModified}-${index}`;
       }
+      let stopFocusLoss;
+      vue.onMounted(() => {
+        stopFocusLoss = listenFocusLoss(() => {
+          isDragging.value = false;
+        });
+      });
+      vue.onBeforeUnmount(() => stopFocusLoss == null ? void 0 : stopFocusLoss());
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createElementVNode("div", _hoisted_2$l, [
@@ -2612,7 +2665,7 @@
       };
     }
   });
-  const TaoFileDrop = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-fbd848b0"]]);
+  const TaoFileDrop = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-f97c4e91"]]);
   const _hoisted_1$n = ["aria-expanded"];
   const _hoisted_2$k = {
     key: 1,
@@ -2977,15 +3030,15 @@
       exactPath: { type: Boolean, default: false }
     },
     setup(__props) {
+      var _a;
       const props = __props;
-      const linkComponent = vue.computed(() => {
-        const resolved = vue.resolveComponent("NuxtLink");
-        return typeof resolved === "string" ? "a" : resolved;
-      });
+      const globals = ((_a = vue.getCurrentInstance()) == null ? void 0 : _a.appContext.components) ?? {};
+      const linkKind = globals.NuxtLink ? "nuxt" : globals.RouterLink ? "router" : "a";
+      const linkComponent = linkKind === "nuxt" ? globals.NuxtLink : linkKind === "router" ? globals.RouterLink : "a";
       const linkProps = vue.computed(() => {
         const target = props.asNewTab ? "_blank" : void 0;
         const rel = props.private && "noopener noreferrer" || props.asNewTab && "noopener" || void 0;
-        if (linkComponent.value === "a") {
+        if (linkKind === "a") {
           return {
             href: typeof props.to === "string" ? props.to : void 0,
             target,
@@ -2996,11 +3049,11 @@
           to: props.to,
           target,
           rel,
-          exactPath: props.exactPath
+          ...linkKind === "nuxt" ? { exactPath: props.exactPath } : {}
         };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(linkComponent.value), vue.mergeProps(linkProps.value, { draggable: "false" }), {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(linkComponent)), vue.mergeProps(linkProps.value, { draggable: "false" }), {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "default")
           ]),
@@ -3701,7 +3754,14 @@
         window.removeEventListener("resize", onViewportChange);
         window.removeEventListener("scroll", onViewportChange, true);
       });
+      let stopFocusLoss;
+      vue.onMounted(() => {
+        stopFocusLoss = listenFocusLoss(() => {
+          picking.value = false;
+        });
+      });
       vue.onBeforeUnmount(() => {
+        stopFocusLoss == null ? void 0 : stopFocusLoss();
         document.removeEventListener("pointerdown", onDocumentPointer);
         window.removeEventListener("resize", onViewportChange);
         window.removeEventListener("scroll", onViewportChange, true);
@@ -3805,7 +3865,7 @@
       };
     }
   });
-  const TaoCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-adeb76a4"]]);
+  const TaoCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-60be67d0"]]);
   const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
   function formatTaoDateIso(parts) {
     return `${String(parts.y).padStart(4, "0")}-${String(parts.m).padStart(2, "0")}-${String(parts.d).padStart(2, "0")}`;
@@ -4581,7 +4641,14 @@
         window.removeEventListener("resize", onViewportChange);
         window.removeEventListener("scroll", onViewportChange, true);
       });
+      let stopFocusLoss;
+      vue.onMounted(() => {
+        stopFocusLoss = listenFocusLoss(() => {
+          hoverIso.value = null;
+        });
+      });
       vue.onBeforeUnmount(() => {
+        stopFocusLoss == null ? void 0 : stopFocusLoss();
         document.removeEventListener("pointerdown", onDocumentPointer);
         window.removeEventListener("resize", onViewportChange);
         window.removeEventListener("scroll", onViewportChange, true);
@@ -4752,7 +4819,7 @@
       };
     }
   });
-  const TaoDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-4e222262"]]);
+  const TaoDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3d067081"]]);
   const _hoisted_1$g = ["for"];
   const _hoisted_2$e = ["id", "checked", "disabled", "aria-checked"];
   const _hoisted_3$c = {
@@ -5985,10 +6052,13 @@
       }
       function onWindowBlur() {
         endDrag();
+        hoverPaused.value = false;
+        syncAutoplay();
       }
       function onVisibilityChange() {
         if (document.hidden) {
           endDrag();
+          hoverPaused.value = false;
         }
         syncAutoplay();
       }
@@ -6160,7 +6230,7 @@
       };
     }
   });
-  const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-81afb8b0"]]);
+  const TaoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4f6de725"]]);
   const _hoisted_1$3 = ["aria-label"];
   const _hoisted_2$2 = ["aria-label"];
   const _hoisted_3$2 = {
@@ -6468,7 +6538,12 @@
         close();
       }
       startTimer();
+      let stopFocusLoss;
+      vue.onMounted(() => {
+        stopFocusLoss = listenFocusLoss(resume);
+      });
       vue.onBeforeUnmount(() => {
+        stopFocusLoss == null ? void 0 : stopFocusLoss();
         clearTimer();
       });
       return (_ctx, _cache) => {
@@ -6593,7 +6668,7 @@
       };
     }
   });
-  const TaoToastItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c8a329f5"]]);
+  const TaoToastItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7c4692c0"]]);
   const _hoisted_1$1 = { class: "tao-toast-slot__inner" };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "TaoToastViewport" },