@varlet/ui 2.18.0-alpha.1697511280107 → 2.18.0-alpha.1697559303154

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

@@ -0,0 +1,179 @@
+import { defineComponent, ref, computed, watch } from "vue";
+import { props } from "./props.mjs";
+import { useLock } from "../context/lock.mjs";
+import { call, createNamespace, useVModel, formatElevation, useTeleport } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { useTouch, useWindowSize } from "@varlet/use";
+import { toNumber, isEmpty, preventDefault } from "@varlet/shared";
+const { name, n, classes } = createNamespace("floating-panel");
+const DEFAULT_START_ANCHOR = 100;
+const OVERFLOW_REDUCE_RATIO = 0.2;
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_Teleport, {
+    to: _ctx.teleport === false ? void 0 : _ctx.teleport,
+    disabled: _ctx.teleportDisabled || _ctx.teleport === false
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.safeArea, _ctx.n("--safe-area")], _ctx.formatElevation(_ctx.elevation, 2))),
+        style: _normalizeStyle({
+          height: `${_ctx.toSizeUnit(_ctx.maxAnchor)}`,
+          transform: `translateY(calc(100% - ${_ctx.toSizeUnit(_ctx.visibleHeight)}))`,
+          transition: _ctx.touching ? "none" : `transform ${_ctx.toNumber(_ctx.duration)}ms var(--floating-panel-transition-timing-function)`
+        }),
+        onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+        onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
+        onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args)),
+        onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+      },
+      [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("header"))
+          },
+          [
+            _createElementVNode(
+              "div",
+              {
+                class: _normalizeClass(_ctx.n("header-toolbar"))
+              },
+              null,
+              2
+              /* CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        ),
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("content")),
+            ref: "contentRef"
+          },
+          [
+            _renderSlot(_ctx.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      38
+      /* CLASS, STYLE, HYDRATE_EVENTS */
+    )
+  ], 8, ["to", "disabled"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const visibleHeight = ref(0);
+    const contentRef = ref(null);
+    const { height: windowHeight } = useWindowSize();
+    const defaultEndAnchor = computed(() => windowHeight.value * 0.6);
+    const anchor = useVModel(props2, "anchor");
+    const anchors = computed(() => {
+      const defaultAnchors = [DEFAULT_START_ANCHOR, defaultEndAnchor.value];
+      const { anchors: anchors2 } = props2;
+      return isEmpty(anchors2) ? defaultAnchors : anchors2;
+    });
+    const minAnchor = computed(() => Math.min(...anchors.value));
+    const maxAnchor = computed(() => Math.max(...anchors.value));
+    const { disabled: teleportDisabled } = useTeleport();
+    const { deltaY, touching, startTouch, moveTouch, endTouch, isReachTop, isReachBottom } = useTouch();
+    let startVisibleHeight;
+    useLock(() => touching.value);
+    watch(() => anchor.value, matchAnchor, { immediate: true });
+    watch(
+      () => anchors.value,
+      () => {
+        matchAnchor(anchor.value);
+      },
+      { immediate: true }
+    );
+    function matchAnchor(anchor2) {
+      setVisibleHeight(anchor2 != null ? anchor2 : minAnchor.value);
+    }
+    function handleTouchstart(event) {
+      startTouch(event);
+      startVisibleHeight = visibleHeight.value;
+    }
+    function handleTouchmove(event) {
+      var _a;
+      moveTouch(event);
+      const target = event.target;
+      const eventFromContent = contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target));
+      if (eventFromContent && !props2.contentDraggable) {
+        if (isReachTop(contentRef.value) || isReachBottom(contentRef.value)) {
+          preventDefault(event);
+        }
+        return;
+      }
+      const targetVisibleHeight = startVisibleHeight - deltaY.value;
+      setVisibleHeight(clampVisibleHeight(targetVisibleHeight));
+      preventDefault(event);
+    }
+    function handleTouchend() {
+      endTouch();
+      const oldAnchor = anchor.value;
+      setVisibleHeight(visibleHeight.value);
+      anchor.value = visibleHeight.value;
+      if (anchor.value !== oldAnchor) {
+        call(props2.onAnchorChange, visibleHeight.value);
+      }
+    }
+    function setVisibleHeight(targetVisibleHeight) {
+      visibleHeight.value = touching.value ? targetVisibleHeight : findNearestAnchor(targetVisibleHeight);
+    }
+    function clampVisibleHeight(visibleHeight2) {
+      if (visibleHeight2 > maxAnchor.value) {
+        const overflowHeight = visibleHeight2 - maxAnchor.value;
+        return maxAnchor.value + overflowHeight * OVERFLOW_REDUCE_RATIO;
+      }
+      if (visibleHeight2 < minAnchor.value) {
+        const overflowHeight = minAnchor.value - visibleHeight2;
+        return minAnchor.value - overflowHeight * OVERFLOW_REDUCE_RATIO;
+      }
+      return visibleHeight2;
+    }
+    function findNearestAnchor(targetAnchor) {
+      if (anchors.value.includes(targetAnchor)) {
+        return targetAnchor;
+      }
+      let minDifference = Infinity;
+      let nearestAnchor = 0;
+      anchors.value.forEach((anchor2) => {
+        const difference = Math.abs(anchor2 - targetAnchor);
+        if (difference < minDifference) {
+          minDifference = difference;
+          nearestAnchor = anchor2;
+        }
+      });
+      return nearestAnchor;
+    }
+    return {
+      contentRef,
+      teleportDisabled,
+      touching,
+      minAnchor,
+      maxAnchor,
+      visibleHeight,
+      n,
+      classes,
+      toSizeUnit,
+      toNumber,
+      formatElevation,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/floating-panel/floatingPanel.css

@@ -0,0 +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);}

package/es/floating-panel/index.mjs

@@ -0,0 +1,9 @@
+import FloatingPanel from "./FloatingPanel.mjs";
+import { withInstall } from "../utils/components.mjs";
+withInstall(FloatingPanel);
+const _FloatingPanelComponent = FloatingPanel;
+var stdin_default = FloatingPanel;
+export {
+  _FloatingPanelComponent,
+  stdin_default as default
+};

package/es/floating-panel/props.mjs

@@ -0,0 +1,27 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  anchor: Number,
+  anchors: Array,
+  contentDraggable: {
+    type: Boolean,
+    default: true
+  },
+  duration: {
+    type: [Number, String],
+    default: 300
+  },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  safeArea: Boolean,
+  "onUpdate:anchor": defineListenerProp(),
+  onAnchorChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/floating-panel/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../floatingPanel.css'
+import '../FloatingPanelSfc.css'

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

@@ -28,6 +28,7 @@ import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import FieldDecorator from './field-decorator/index.mjs'
+import FloatingPanel from './floating-panel/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
@@ -114,6 +115,7 @@ export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './field-decorator/index.mjs'
+export * from './floating-panel/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
@@ -200,6 +202,7 @@ import './drag/style/index.mjs'
 import './ellipsis/style/index.mjs'
 import './fab/style/index.mjs'
 import './field-decorator/style/index.mjs'
+import './floating-panel/style/index.mjs'
 import './form/style/index.mjs'
 import './form-details/style/index.mjs'
 import './hover/style/index.mjs'
@@ -256,7 +259,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.18.0-alpha.1697511280107'
+const version = '2.18.0-alpha.1697559303154'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -289,6 +292,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   FieldDecorator.install && app.use(FieldDecorator)
+  FloatingPanel.install && app.use(FloatingPanel)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
@@ -379,6 +383,7 @@ export {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,
@@ -469,6 +474,7 @@ export default {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,

package/es/index.mjs

@@ -28,6 +28,7 @@ import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import FieldDecorator from './field-decorator/index.mjs'
+import FloatingPanel from './floating-panel/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
@@ -114,6 +115,7 @@ export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './field-decorator/index.mjs'
+export * from './floating-panel/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
@@ -170,7 +172,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.18.0-alpha.1697511280107'
+const version = '2.18.0-alpha.1697559303154'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -203,6 +205,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   FieldDecorator.install && app.use(FieldDecorator)
+  FloatingPanel.install && app.use(FloatingPanel)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
@@ -293,6 +296,7 @@ export {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,
@@ -383,6 +387,7 @@ export default {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,

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
     };
   }
 });