@varlet/ui 2.18.0-alpha.1697555377370 → 2.18.0-alpha.1697608760113

package/es/avatar/Avatar.mjs

@@ -22,7 +22,8 @@ function __render__(_ctx, _cache) {
           _ctx.n("$--box"),
           [_ctx.isInternalSize(_ctx.size), _ctx.n(`--${_ctx.size}`)],
           [_ctx.round, _ctx.n("--round")],
-          [_ctx.bordered, _ctx.n("--bordered")]
+          [_ctx.bordered, _ctx.n("--bordered")],
+          [_ctx.hoverable, _ctx.n("--hoverable")]
         )
       ),
       style: _normalizeStyle({

package/es/avatar/avatar.css

@@ -1 +1 @@
-:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe;}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}
+:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}

package/es/avatar/props.mjs

@@ -20,6 +20,7 @@ const props = {
   loading: String,
   error: String,
   lazy: Boolean,
+  hoverable: Boolean,
   onClick: defineListenerProp(),
   onLoad: defineListenerProp(),
   onError: defineListenerProp()

package/es/back-top/BackTop.mjs

@@ -2,17 +2,9 @@ import VarButton from "../button/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import { defineComponent, ref, onMounted, onActivated } from "vue";
 import { props } from "./props.mjs";
-import { throttle } from "@varlet/shared";
+import { throttle, getScrollTop, getScrollLeft } from "@varlet/shared";
 import { easeInOutCubic } from "../utils/shared.mjs";
-import {
-  getScrollTop,
-  getScrollLeft,
-  scrollTo,
-  getParentScroller,
-  toPxNum,
-  toSizeUnit,
-  getTarget
-} from "../utils/elements.mjs";
+import { scrollTo, getParentScroller, toPxNum, toSizeUnit, getTarget } from "../utils/elements.mjs";
 import { call, createNamespace } from "../utils/components.mjs";
 import { onSmartUnmounted } from "@varlet/use";
 const { name, n, classes } = createNamespace("back-top");

package/es/floating-panel/FloatingPanel.mjs

@@ -17,7 +17,7 @@ function __render__(_ctx, _cache) {
     _createElementVNode(
       "div",
       {
-        class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.safeArea, _ctx.n("--safe-area")], _ctx.formatElevation(_ctx.elevation, 2))),
+        class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.safeArea, _ctx.n("--safe-area")], _ctx.formatElevation(_ctx.elevation, 3))),
         style: _normalizeStyle({
           height: `${_ctx.toSizeUnit(_ctx.maxAnchor)}`,
           transform: `translateY(calc(100% - ${_ctx.toSizeUnit(_ctx.visibleHeight)}))`,

package/es/floating-panel/floatingPanel.css

@@ -1 +1 @@
-:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: #fff; --floating-panel-header-height: 40px; --floating-panel-toolbar-width: 20px; --floating-panel-toolbar-height: 3px; --floating-panel-toolbar-border-radius: 10px; --floating-panel-toolbar-background: #ddd; --floating-panel-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);}.var-floating-panel { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: var(--floating-panel-z-index); border-top: var(--floating-panel-border-top); border-top-left-radius: var(--floating-panel-border-radius); border-top-right-radius: var(--floating-panel-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: var(--floating-panel-background); will-change: transform; touch-action: none;}.var-floating-panel::after { content: ''; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100vw; background-color: inherit;}.var-floating-panel__header { height: var(--floating-panel-header-height); display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none;}.var-floating-panel__header-toolbar { width: var(--floating-panel-toolbar-width); height: var(--floating-panel-toolbar-height); border-radius: var(--floating-panel-toolbar-border-radius); background: var(--floating-panel-toolbar-background);}.var-floating-panel__content { flex: 1; overflow-y: auto;}.var-floating-panel--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
+:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: #fff; --floating-panel-header-height: 40px; --floating-panel-toolbar-width: 20px; --floating-panel-toolbar-height: 3px; --floating-panel-toolbar-border-radius: 10px; --floating-panel-toolbar-background: #ddd; --floating-panel-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);}.var-floating-panel { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: var(--floating-panel-z-index); border-top: var(--floating-panel-border-top); border-top-left-radius: var(--floating-panel-border-radius); border-top-right-radius: var(--floating-panel-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: var(--floating-panel-background); will-change: transform; touch-action: none;}.var-floating-panel::after { content: ''; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100%; background-color: inherit; box-shadow: 0 -1px var(--floating-panel-background);}.var-floating-panel__header { height: var(--floating-panel-header-height); display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none;}.var-floating-panel__header-toolbar { width: var(--floating-panel-toolbar-width); height: var(--floating-panel-toolbar-height); border-radius: var(--floating-panel-toolbar-border-radius); background: var(--floating-panel-toolbar-background);}.var-floating-panel__content { flex: 1; overflow-y: auto;}.var-floating-panel--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}

package/es/index-bar/IndexBar.mjs

@@ -19,9 +19,18 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { computed, defineComponent, ref, watch, onBeforeUnmount, onDeactivated, onActivated } from "vue";
-import { isPlainObject, isWindow, toNumber, doubleRaf, requestAnimationFrame, getRect } from "@varlet/shared";
+import {
+  isPlainObject,
+  isWindow,
+  toNumber,
+  doubleRaf,
+  requestAnimationFrame,
+  getRect,
+  getScrollLeft,
+  getScrollTop
+} from "@varlet/shared";
 import { easeInOutCubic } from "../utils/shared.mjs";
-import { getParentScroller, getScrollLeft, getScrollTop, scrollTo as varScrollTo, toPxNum } from "../utils/elements.mjs";
+import { getParentScroller, scrollTo as varScrollTo, toPxNum } from "../utils/elements.mjs";
 import { useIndexAnchors } from "./provide.mjs";
 import { props } from "./props.mjs";
 import { createNamespace, call } from "../utils/components.mjs";

package/es/index.bundle.mjs

@@ -259,7 +259,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.18.0-alpha.1697555377370'
+const version = '2.18.0-alpha.1697608760113'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -172,7 +172,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.18.0-alpha.1697555377370'
+const version = '2.18.0-alpha.1697608760113'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/pull-refresh/PullRefresh.mjs

@@ -20,11 +20,11 @@ var __async = (__this, __arguments, generator) => {
 };
 import VarIcon from "../icon/index.mjs";
 import { defineComponent, ref, computed, watch, nextTick } from "vue";
-import { getParentScroller, getScrollTop, getTarget } from "../utils/elements.mjs";
+import { getParentScroller, getTarget } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
-import { isNumber, isString, toNumber, getRect, preventDefault } from "@varlet/shared";
+import { isNumber, isString, toNumber, getRect, preventDefault, getScrollTop } from "@varlet/shared";
 import { call, createNamespace } from "../utils/components.mjs";
-import { useEventListener, onSmartMounted } from "@varlet/use";
+import { useEventListener, onSmartMounted, useTouch } from "@varlet/use";
 const { name, n, classes } = createNamespace("pull-refresh");
 const ICON_TRANSITION = 150;
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
@@ -35,9 +35,9 @@ function __render__(_ctx, _cache) {
     {
       ref: "freshNode",
       class: _normalizeClass(_ctx.n()),
-      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
-      onTouchend: _cache[1] || (_cache[1] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args)),
-      onTouchcancel: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+      onTouchend: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args)),
+      onTouchcancel: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
     },
     [
       _createElementVNode(
@@ -88,10 +88,9 @@ const __sfc__ = defineComponent({
       background: isSuccess.value ? props2.successBgColor : props2.bgColor,
       color: isSuccess.value ? props2.successColor : props2.color
     }));
+    const { startTouch, moveTouch, endTouch, isReachTop } = useTouch();
     let scroller;
     let eventTargetScroller;
-    let startY = 0;
-    let deltaY = 0;
     watch(
       () => props2.modelValue,
       (newValue) => {
@@ -107,7 +106,7 @@ const __sfc__ = defineComponent({
       }
     );
     onSmartMounted(setScroller);
-    useEventListener(freshNode, "touchmove", touchMove);
+    useEventListener(freshNode, "touchmove", handleTouchmove);
     function startIconTransition(name2) {
       return __async(this, null, function* () {
         if (iconName.value === name2) {
@@ -123,16 +122,16 @@ const __sfc__ = defineComponent({
       const el = "classList" in scroller ? scroller : document.body;
       el.classList[action](`${n()}--lock`);
     }
-    function touchStart(event) {
+    function handleTouchstart(event) {
+      startTouch(event);
       if (controlPosition.value === 0) {
         const { width } = getRect(controlNode.value);
         controlPosition.value = -(width + width * 0.25);
       }
-      startY = event.touches[0].clientY;
-      deltaY = 0;
       eventTargetScroller = getParentScroller(event.target);
     }
-    function touchMove(event) {
+    function handleTouchmove(event) {
+      moveTouch(event);
       if (!isTouchable.value || !eventTargetScroller) {
         return;
       }
@@ -143,25 +142,23 @@ const __sfc__ = defineComponent({
       if (scrollTop > 0) {
         return;
       }
-      const isReachTop = scrollTop === 0;
-      const touch = event.touches[0];
-      deltaY = touch.clientY - startY;
-      if (isReachTop && deltaY >= 0) {
+      if (isReachTop(scroller)) {
         preventDefault(event);
       }
       if (refreshStatus.value !== "pulling") {
         refreshStatus.value = "pulling";
         startPosition.value = event.touches[0].clientY;
       }
-      if (isReachTop && isNumber(distance.value) && distance.value > controlPosition.value) {
+      if (isReachTop(scroller) && isNumber(distance.value) && distance.value > controlPosition.value) {
         lockEvent("add");
       }
       const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
       distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
       startIconTransition(distance.value >= maxDistance.value * 0.2 ? "refresh" : "arrow-down");
     }
-    function touchEnd() {
+    function handleTouchend() {
       return __async(this, null, function* () {
+        endTouch();
         if (!isTouchable.value) {
           return;
         }
@@ -207,9 +204,9 @@ const __sfc__ = defineComponent({
       isSuccess,
       n,
       classes,
-      touchStart,
-      touchMove,
-      touchEnd
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend
     };
   }
 });

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'