@varlet/ui 3.5.1 → 3.5.3

package/es/styles/common.css

@@ -0,0 +1 @@
+.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--lock { overflow: hidden !important;}.var--ellipsis { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --hsl-body: 0, 0%, 100%; --color-body: hsla(var(--hsl-body), 1); --hsl-text: 0, 0%, 20%; --color-text: hsla(var(--hsl-text), 1); --hsl-primary: 220, 99%, 61%; --color-primary: hsla(var(--hsl-primary), 1); --hsl-info: 196, 100%, 47%; --color-info: hsla(var(--hsl-info), 1); --hsl-success: 164, 100%, 38%; --color-success: hsla(var(--hsl-success), 1); --hsl-warning: 37, 100%, 50%; --color-warning: hsla(var(--hsl-warning), 1); --hsl-danger: 4, 90%, 58%; --color-danger: hsla(var(--hsl-danger), 1); --hsl-disabled: 0, 0%, 88%; --color-disabled: hsla(var(--hsl-disabled), 1); --hsl-text-disabled: 0, 0%, 67%; --color-text-disabled: hsla(var(--hsl-text-disabled), 1); --hsl-on-primary: 0, 0%, 100%; --color-on-primary: hsla(var(--hsl-on-primary), 1); --hsl-on-info: 0, 0%, 100%; --color-on-info: hsla(var(--hsl-on-info), 1); --hsl-on-success: 0, 0%, 100%; --color-on-success: hsla(var(--hsl-on-success), 1); --hsl-on-warning: 0, 0%, 100%; --color-on-warning: hsla(var(--hsl-on-warning), 1); --hsl-on-danger: 0, 0%, 100%; --color-on-danger: hsla(var(--hsl-on-danger), 1); --hsl-primary-container: 220, 99%, 61%; --color-primary-container: hsla(var(--hsl-primary-container), 1); --hsl-info-container: 196, 100%, 47%; --color-info-container: hsla(var(--hsl-info-container), 1); --hsl-success-container: 164, 100%, 38%; --color-success-container: hsla(var(--hsl-success-container), 1); --hsl-warning-container: 37, 100%, 50%; --color-warning-container: hsla(var(--hsl-warning-container), 1); --hsl-danger-container: 4, 90%, 58%; --color-danger-container: hsla(var(--hsl-danger-container), 1); --hsl-on-primary-container: 0, 0%, 100%; --color-on-primary-container: hsla(var(--hsl-on-primary-container), 1); --hsl-on-info-container: 0, 0%, 100%; --color-on-info-container: hsla(var(--hsl-on-info-container), 1); --hsl-on-success-container: 0, 0%, 100%; --color-on-success-container: hsla(var(--hsl-on-success-container), 1); --hsl-on-warning-container: 0, 0%, 100%; --color-on-warning-container: hsla(var(--hsl-on-warning-container), 1); --hsl-on-danger-container: 0, 0%, 100%; --color-on-danger-container: hsla(var(--hsl-on-danger-container), 1); --hsl-surface-container: 0, 0%, 100%; --color-surface-container: hsla(var(--hsl-surface-container), 1); --hsl-surface-container-low: 0, 0%, 100%; --color-surface-container-low: hsla(var(--hsl-surface-container-low), 1); --hsl-surface-container-high: 0, 0%, 100%; --color-surface-container-high: hsla(var(--hsl-surface-container-high), 1); --hsl-surface-container-highest: 0, 0%, 100%; --color-surface-container-highest: hsla(var(--hsl-surface-container-highest), 1); --hsl-inverse-surface: 0, 0%, 20%; --color-inverse-surface: hsla(var(--hsl-inverse-surface), 1); --hsl-outline: 0, 0%, 0%; --color-outline: hsla(var(--hsl-outline), 0.12); --hsl-on-surface-variant: 0, 0%, 53%; --color-on-surface-variant: hsla(var(--hsl-on-surface-variant), 1); --opacity-disabled: 0.6; --opacity-hover: 0.15; --opacity-focus: 0.2; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}

package/es/styles/elevation.css

@@ -0,0 +1 @@
+.var-elevation--0 { box-shadow: 0 0 0 0 var(--shadow-key-umbra-opacity), 0 0 0 0 var(--shadow-key-penumbra-opacity), 0 0 0 0 var(--shadow-key-ambient-opacity);}.var-elevation--1 { box-shadow: 0 2px 1px -1px var(--shadow-key-umbra-opacity), 0 1px 1px 0 var(--shadow-key-penumbra-opacity), 0 1px 3px 0 var(--shadow-key-ambient-opacity);}.var-elevation--2 { box-shadow: 0 3px 1px -2px var(--shadow-key-umbra-opacity), 0 2px 2px 0 var(--shadow-key-penumbra-opacity), 0 1px 5px 0 var(--shadow-key-ambient-opacity);}.var-elevation--3 { box-shadow: 0 3px 3px -2px var(--shadow-key-umbra-opacity), 0 3px 4px 0 var(--shadow-key-penumbra-opacity), 0 1px 8px 0 var(--shadow-key-ambient-opacity);}.var-elevation--4 { box-shadow: 0 2px 4px -1px var(--shadow-key-umbra-opacity), 0 4px 5px 0 var(--shadow-key-penumbra-opacity), 0 1px 10px 0 var(--shadow-key-ambient-opacity);}.var-elevation--5 { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-elevation--6 { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 6px 10px 0 var(--shadow-key-penumbra-opacity), 0 1px 18px 0 var(--shadow-key-ambient-opacity);}.var-elevation--7 { box-shadow: 0 4px 5px -2px var(--shadow-key-umbra-opacity), 0 7px 10px 1px var(--shadow-key-penumbra-opacity), 0 2px 16px 1px var(--shadow-key-ambient-opacity);}.var-elevation--8 { box-shadow: 0 5px 5px -3px var(--shadow-key-umbra-opacity), 0 8px 10px 1px var(--shadow-key-penumbra-opacity), 0 3px 14px 2px var(--shadow-key-ambient-opacity);}.var-elevation--9 { box-shadow: 0 5px 6px -3px var(--shadow-key-umbra-opacity), 0 9px 12px 1px var(--shadow-key-penumbra-opacity), 0 3px 16px 2px var(--shadow-key-ambient-opacity);}.var-elevation--10 { box-shadow: 0 6px 6px -3px var(--shadow-key-umbra-opacity), 0 10px 14px 1px var(--shadow-key-penumbra-opacity), 0 4px 18px 3px var(--shadow-key-ambient-opacity);}.var-elevation--11 { box-shadow: 0 6px 7px -4px var(--shadow-key-umbra-opacity), 0 11px 15px 1px var(--shadow-key-penumbra-opacity), 0 4px 20px 3px var(--shadow-key-ambient-opacity);}.var-elevation--12 { box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 12px 17px 2px var(--shadow-key-penumbra-opacity), 0 5px 22px 4px var(--shadow-key-ambient-opacity);}.var-elevation--13 { box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 13px 19px 2px var(--shadow-key-penumbra-opacity), 0 5px 24px 4px var(--shadow-key-ambient-opacity);}.var-elevation--14 { box-shadow: 0 7px 9px -4px var(--shadow-key-umbra-opacity), 0 14px 21px 2px var(--shadow-key-penumbra-opacity), 0 5px 26px 4px var(--shadow-key-ambient-opacity);}.var-elevation--15 { box-shadow: 0 8px 9px -5px var(--shadow-key-umbra-opacity), 0 15px 22px 2px var(--shadow-key-penumbra-opacity), 0 6px 28px 5px var(--shadow-key-ambient-opacity);}.var-elevation--16 { box-shadow: 0 8px 10px -5px var(--shadow-key-umbra-opacity), 0 16px 24px 2px var(--shadow-key-penumbra-opacity), 0 6px 30px 5px var(--shadow-key-ambient-opacity);}.var-elevation--17 { box-shadow: 0 8px 11px -5px var(--shadow-key-umbra-opacity), 0 17px 26px 2px var(--shadow-key-penumbra-opacity), 0 6px 32px 5px var(--shadow-key-ambient-opacity);}.var-elevation--18 { box-shadow: 0 9px 11px -5px var(--shadow-key-umbra-opacity), 0 18px 28px 2px var(--shadow-key-penumbra-opacity), 0 7px 34px 6px var(--shadow-key-ambient-opacity);}.var-elevation--19 { box-shadow: 0 9px 12px -6px var(--shadow-key-umbra-opacity), 0 19px 29px 2px var(--shadow-key-penumbra-opacity), 0 7px 36px 6px var(--shadow-key-ambient-opacity);}.var-elevation--20 { box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 20px 31px 3px var(--shadow-key-penumbra-opacity), 0 8px 38px 7px var(--shadow-key-ambient-opacity);}.var-elevation--21 { box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 21px 33px 3px var(--shadow-key-penumbra-opacity), 0 8px 40px 7px var(--shadow-key-ambient-opacity);}.var-elevation--22 { box-shadow: 0 10px 14px -6px var(--shadow-key-umbra-opacity), 0 22px 35px 3px var(--shadow-key-penumbra-opacity), 0 8px 42px 7px var(--shadow-key-ambient-opacity);}.var-elevation--23 { box-shadow: 0 11px 14px -7px var(--shadow-key-umbra-opacity), 0 23px 36px 3px var(--shadow-key-penumbra-opacity), 0 9px 44px 8px var(--shadow-key-ambient-opacity);}.var-elevation--24 { box-shadow: 0 11px 15px -7px var(--shadow-key-umbra-opacity), 0 24px 38px 3px var(--shadow-key-penumbra-opacity), 0 9px 46px 8px var(--shadow-key-ambient-opacity);}

package/es/swipe/Swipe.mjs

@@ -0,0 +1,534 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import VarButton from "../button/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import Hover from "../hover/index.mjs";
+import { defineComponent, ref, computed, watch, onActivated } from "vue";
+import { useSwipeItems, useSwipeResizeListeners } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { clamp, isNumber, toNumber, doubleRaf, preventDefault, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { onSmartUnmounted, onWindowResize, useEventListener, useTouch } from "@varlet/use";
+import { usePopup } from "../popup/provide.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+const SWIPE_DELAY = 250;
+const SWIPE_OFFSET = 20;
+const { name, n, classes } = createNamespace("swipe");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, mergeProps as _mergeProps, renderList as _renderList, Fragment as _Fragment, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["onClick"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      ref: "swipeEl"
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.vertical, _ctx.n("--vertical")])),
+          style: _normalizeStyle({
+            width: !_ctx.vertical ? _ctx.toSizeUnit(_ctx.trackSize) : void 0,
+            height: _ctx.vertical ? _ctx.toSizeUnit(_ctx.trackSize) : void 0,
+            transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.trackTranslate)})`,
+            transitionDuration: _ctx.lockDuration ? "0ms" : `${_ctx.toNumber(_ctx.duration)}ms`
+          }),
+          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))
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        38
+        /* CLASS, STYLE, NEED_HYDRATION */
+      ),
+      _ctx.navigation ? _renderSlot(_ctx.$slots, "prev", _normalizeProps(_mergeProps({ key: 0 }, {
+        index: _ctx.index,
+        length: _ctx.length,
+        prev: _ctx.prev,
+        next: _ctx.next,
+        to: _ctx.to,
+        hovering: _ctx.hovering
+      })), () => [
+        _createVNode(_Transition, {
+          name: _ctx.getNavigationAnimation("prev")
+        }, {
+          default: _withCtx(() => [
+            _ctx.navigation === true || _ctx.hovering ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.classes(_ctx.n("navigation"), _ctx.n("navigation-prev"), [_ctx.vertical, _ctx.n("--navigation-vertical-prev")]))
+              },
+              [
+                _createVNode(_component_var_button, {
+                  "var-swipe-cover": "",
+                  disabled: !_ctx.loop && _ctx.index === 0,
+                  class: _normalizeClass(_ctx.n("navigation-prev-button")),
+                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.prev())
+                }, {
+                  default: _withCtx(() => [
+                    _createVNode(_component_var_icon, {
+                      "var-swipe-cover": "",
+                      class: _normalizeClass(_ctx.n("navigation-prev-button-icon")),
+                      name: _ctx.vertical ? "chevron-up" : "chevron-left"
+                    }, null, 8, ["class", "name"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "class"])
+              ],
+              2
+              /* CLASS */
+            )) : _createCommentVNode("v-if", true)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["name"])
+      ]) : _createCommentVNode("v-if", true),
+      _ctx.navigation ? _renderSlot(_ctx.$slots, "next", _normalizeProps(_mergeProps({ key: 1 }, {
+        index: _ctx.index,
+        length: _ctx.length,
+        hovering: _ctx.hovering,
+        prev: _ctx.prev,
+        next: _ctx.next,
+        to: _ctx.to
+      })), () => [
+        _createVNode(_Transition, {
+          name: _ctx.getNavigationAnimation("next")
+        }, {
+          default: _withCtx(() => [
+            _ctx.navigation === true || _ctx.hovering ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.classes(_ctx.n("navigation"), _ctx.n("navigation-next"), [_ctx.vertical, _ctx.n("--navigation-vertical-next")]))
+              },
+              [
+                _createVNode(_component_var_button, {
+                  "var-swipe-cover": "",
+                  class: _normalizeClass(_ctx.n("navigation-next-button")),
+                  disabled: !_ctx.loop && _ctx.index === _ctx.length - 1,
+                  onClick: _cache[4] || (_cache[4] = ($event) => _ctx.next())
+                }, {
+                  default: _withCtx(() => [
+                    _createVNode(_component_var_icon, {
+                      "var-swipe-cover": "",
+                      class: _normalizeClass(_ctx.n("navigation-next-button-icon")),
+                      name: _ctx.vertical ? "chevron-down" : "chevron-right"
+                    }, null, 8, ["class", "name"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "disabled"])
+              ],
+              2
+              /* CLASS */
+            )) : _createCommentVNode("v-if", true)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["name"])
+      ]) : _createCommentVNode("v-if", true),
+      _renderSlot(_ctx.$slots, "indicator", _normalizeProps(_guardReactiveProps({
+        index: _ctx.index,
+        length: _ctx.length,
+        hovering: _ctx.hovering,
+        prev: _ctx.prev,
+        next: _ctx.next,
+        to: _ctx.to
+      })), () => [
+        _ctx.indicator && _ctx.length ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.classes(_ctx.n("indicators"), [_ctx.vertical, _ctx.n("--indicators-vertical")]))
+          },
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.length, (l, idx) => {
+                return _openBlock(), _createElementBlock("div", {
+                  class: _normalizeClass(
+                    _ctx.classes(_ctx.n("indicator"), [_ctx.index === idx, _ctx.n("--indicator-active")], [_ctx.vertical, _ctx.n("--indicator-vertical")])
+                  ),
+                  style: _normalizeStyle({ background: _ctx.indicatorColor }),
+                  key: l,
+                  onClick: ($event) => _ctx.to(idx)
+                }, null, 14, _hoisted_1);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ])
+    ],
+    2
+    /* CLASS */
+  )), [
+    [_directive_hover, _ctx.handleHovering]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Hover },
+  components: { VarButton, VarIcon },
+  props,
+  setup(props2) {
+    const swipeEl = ref(null);
+    const size = ref(0);
+    const vertical = computed(() => props2.vertical);
+    const trackSize = ref(0);
+    const trackTranslate = ref(0);
+    const lockDuration = ref(false);
+    const index = ref(0);
+    const hovering = ref(false);
+    const { swipeItems, bindSwipeItems, length } = useSwipeItems();
+    const { swipeResizeListeners, bindSwipeResizeListeners } = useSwipeResizeListeners();
+    const { popup, bindPopup } = usePopup();
+    const {
+      deltaX,
+      deltaY,
+      moveX,
+      moveY,
+      offsetX,
+      offsetY,
+      touching,
+      direction,
+      startTime,
+      startTouch,
+      moveTouch,
+      endTouch
+    } = useTouch();
+    const isExpectDirection = computed(() => direction.value === (props2.vertical ? "vertical" : "horizontal"));
+    let initializedIndex = false;
+    let timer = -1;
+    const swipeProvider = {
+      size,
+      currentIndex: index,
+      vertical
+    };
+    bindSwipeItems(swipeProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    call(bindPopup, null);
+    call(bindSwipeResizeListeners, null);
+    watch(
+      () => length.value,
+      () => __async(this, null, function* () {
+        yield doubleRaf();
+        initialIndex();
+        resize();
+      })
+    );
+    if (popup) {
+      watch(
+        () => popup.show.value,
+        (show) => __async(this, null, function* () {
+          if (show) {
+            yield doubleRaf();
+            resize();
+          } else {
+            stopAutoplay();
+          }
+        })
+      );
+    }
+    onActivated(resize);
+    onSmartUnmounted(stopAutoplay);
+    onWindowResize(resize);
+    function findSwipeItem(idx) {
+      return swipeItems.find(({ index: index2 }) => index2.value === idx);
+    }
+    function dispatchSwipeItems() {
+      if (!props2.loop) {
+        return;
+      }
+      if (trackTranslate.value >= 0) {
+        findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
+      }
+      if (trackTranslate.value <= -(trackSize.value - size.value)) {
+        findSwipeItem(0).setTranslate(trackSize.value);
+      }
+      if (trackTranslate.value > -(trackSize.value - size.value) && trackTranslate.value < 0) {
+        findSwipeItem(length.value - 1).setTranslate(0);
+        findSwipeItem(0).setTranslate(0);
+      }
+    }
+    function getSwipeIndex(targetSwipeIndex) {
+      const swipeIndex = isNumber(targetSwipeIndex) ? targetSwipeIndex : Math.floor((trackTranslate.value - size.value / 2) / -size.value);
+      const { loop } = props2;
+      if (swipeIndex <= -1) {
+        return loop ? -1 : 0;
+      }
+      if (swipeIndex >= length.value) {
+        return loop ? length.value : length.value - 1;
+      }
+      return swipeIndex;
+    }
+    function swipeIndexToIndex(swipeIndex) {
+      const { loop } = props2;
+      if (swipeIndex === -1) {
+        return loop ? length.value - 1 : 0;
+      }
+      if (swipeIndex === length.value) {
+        return loop ? 0 : length.value - 1;
+      }
+      return swipeIndex;
+    }
+    function clampIndex(index2) {
+      if (props2.loop) {
+        if (index2 < 0) {
+          return length.value + index2;
+        }
+        if (index2 >= length.value) {
+          return index2 - length.value;
+        }
+        return index2;
+      }
+      return clamp(index2, 0, length.value - 1);
+    }
+    function fixPosition() {
+      return __async(this, null, function* () {
+        const overLeft = trackTranslate.value >= size.value;
+        const overRight = trackTranslate.value <= -trackSize.value;
+        const leftTranslate = 0;
+        const rightTranslate = -(trackSize.value - size.value);
+        lockDuration.value = true;
+        if (overLeft || overRight) {
+          lockDuration.value = true;
+          trackTranslate.value = overRight ? leftTranslate : rightTranslate;
+          findSwipeItem(0).setTranslate(0);
+          findSwipeItem(length.value - 1).setTranslate(0);
+        }
+        yield doubleRaf();
+        lockDuration.value = false;
+      });
+    }
+    function initialIndex() {
+      if (initializedIndex) {
+        return;
+      }
+      index.value = clampIndex(toNumber(props2.initialIndex));
+      initializedIndex = true;
+    }
+    function startAutoplay() {
+      const { autoplay } = props2;
+      if (!autoplay || length.value <= 1) {
+        return;
+      }
+      stopAutoplay();
+      timer = window.setTimeout(() => {
+        next();
+        startAutoplay();
+      }, toNumber(autoplay));
+    }
+    function stopAutoplay() {
+      timer && clearTimeout(timer);
+    }
+    function handleTouchstart(event) {
+      return __async(this, null, function* () {
+        if (length.value <= 1 || !props2.touchable) {
+          return;
+        }
+        startTouch(event);
+        stopAutoplay();
+        yield fixPosition();
+        lockDuration.value = true;
+      });
+    }
+    function handleTouchmove(event) {
+      const { touchable, vertical: vertical2 } = props2;
+      if (!touching.value || !touchable) {
+        return;
+      }
+      moveTouch(event);
+      if (!isExpectDirection.value) {
+        return;
+      }
+      preventDefault(event);
+      trackTranslate.value += vertical2 ? moveY.value : moveX.value;
+      dispatchSwipeItems();
+    }
+    function handleTouchend() {
+      if (!touching.value) {
+        return;
+      }
+      endTouch();
+      if (!isExpectDirection.value) {
+        return;
+      }
+      const { vertical: vertical2, onChange } = props2;
+      const positive = vertical2 ? deltaY.value < 0 : deltaX.value < 0;
+      const offset = vertical2 ? offsetY.value : offsetX.value;
+      const quickSwiping = performance.now() - startTime.value <= SWIPE_DELAY && offset >= SWIPE_OFFSET;
+      const swipeIndex = quickSwiping ? positive ? getSwipeIndex(index.value + 1) : getSwipeIndex(index.value - 1) : getSwipeIndex();
+      lockDuration.value = false;
+      trackTranslate.value = swipeIndex * -size.value;
+      const prevIndex = index.value;
+      index.value = swipeIndexToIndex(swipeIndex);
+      startAutoplay();
+      if (prevIndex !== index.value) {
+        call(onChange, index.value);
+      }
+    }
+    function handleHovering(value) {
+      if (props2.navigation === "hover") {
+        hovering.value = value;
+      }
+    }
+    function getNavigationAnimation(type) {
+      if (props2.navigation !== "hover") {
+        return "";
+      }
+      return n(`--navigation${props2.vertical ? "-vertical" : ""}-${type}-animation`);
+    }
+    function handleKeydown(event) {
+      if (!swipeItems.length) {
+        return;
+      }
+      const focusingSwipeItemIndex = swipeItems.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingSwipeItemIndex === -1) {
+        return;
+      }
+      const { key } = event;
+      preventDefault(event);
+      if (key === "ArrowLeft") {
+        prev();
+      }
+      if (key === "ArrowRight") {
+        next();
+      }
+    }
+    function resize() {
+      if (!swipeEl.value) {
+        return;
+      }
+      lockDuration.value = true;
+      size.value = props2.vertical ? swipeEl.value.offsetHeight : swipeEl.value.offsetWidth;
+      trackSize.value = size.value * length.value;
+      trackTranslate.value = index.value * -size.value;
+      swipeItems.forEach((swipeItem) => {
+        swipeItem.setTranslate(0);
+      });
+      startAutoplay();
+      setTimeout(() => {
+        lockDuration.value = false;
+      });
+      swipeResizeListeners.forEach(({ onResize }) => {
+        onResize();
+      });
+    }
+    function next(options) {
+      return __async(this, null, function* () {
+        if (length.value <= 1) {
+          return;
+        }
+        initialIndex();
+        const { loop, onChange } = props2;
+        const currentIndex = index.value;
+        index.value = clampIndex(currentIndex + 1);
+        if ((options == null ? void 0 : options.event) !== false) {
+          call(onChange, index.value);
+        }
+        yield fixPosition();
+        if (currentIndex === length.value - 1 && loop) {
+          findSwipeItem(0).setTranslate(trackSize.value);
+          trackTranslate.value = length.value * -size.value;
+          return;
+        }
+        if (currentIndex !== length.value - 1) {
+          trackTranslate.value = index.value * -size.value;
+        }
+      });
+    }
+    function prev(options) {
+      return __async(this, null, function* () {
+        if (length.value <= 1) {
+          return;
+        }
+        initialIndex();
+        const { loop, onChange } = props2;
+        const currentIndex = index.value;
+        index.value = clampIndex(currentIndex - 1);
+        if ((options == null ? void 0 : options.event) !== false) {
+          call(onChange, index.value);
+        }
+        yield fixPosition();
+        if (currentIndex === 0 && loop) {
+          findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
+          trackTranslate.value = size.value;
+          return;
+        }
+        if (currentIndex !== 0) {
+          trackTranslate.value = index.value * -size.value;
+        }
+      });
+    }
+    function to(idx, options) {
+      if (length.value <= 1 || idx === index.value) {
+        return;
+      }
+      idx = idx < 0 ? 0 : idx;
+      idx = idx >= length.value ? length.value : idx;
+      const task = idx > index.value ? next : prev;
+      const count = Math.abs(idx - index.value);
+      Array.from({ length: count }).forEach((_, index2) => {
+        task({ event: index2 === count - 1 ? options == null ? void 0 : options.event : false });
+      });
+    }
+    return {
+      length,
+      index,
+      swipeEl,
+      trackSize,
+      trackTranslate,
+      lockDuration,
+      hovering,
+      n,
+      toSizeUnit,
+      classes,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      next,
+      prev,
+      to,
+      resize,
+      toNumber,
+      handleHovering,
+      getNavigationAnimation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/swipe/index.mjs

@@ -0,0 +1,12 @@
+import Swipe from "./Swipe.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as swipeProps } from "./props.mjs";
+withInstall(Swipe);
+withPropsDefaultsSetter(Swipe, swipeProps);
+const _SwipeComponent = Swipe;
+var stdin_default = Swipe;
+export {
+  _SwipeComponent,
+  stdin_default as default,
+  swipeProps
+};

package/es/swipe/props.mjs

@@ -0,0 +1,34 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  loop: {
+    type: Boolean,
+    default: true
+  },
+  autoplay: [String, Number],
+  duration: {
+    type: [String, Number],
+    default: 300
+  },
+  initialIndex: {
+    type: [String, Number],
+    default: 0
+  },
+  navigation: {
+    type: [Boolean, String],
+    default: false
+  },
+  indicator: {
+    type: Boolean,
+    default: true
+  },
+  indicatorColor: String,
+  vertical: Boolean,
+  touchable: {
+    type: Boolean,
+    default: true
+  },
+  onChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/swipe/provide.mjs

@@ -0,0 +1,40 @@
+import { useChildren, useParent } from "@varlet/use";
+const SWIPE_BIND_SWIPE_ITEM_KEY = Symbol("SWIPE_BIND_SWIPE_ITEM_KEY");
+const SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY = Symbol(
+  "SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY"
+);
+function useSwipeItems() {
+  const { childProviders, length, bindChildren } = useChildren(
+    SWIPE_BIND_SWIPE_ITEM_KEY
+  );
+  return {
+    length,
+    swipeItems: childProviders,
+    bindSwipeItems: bindChildren
+  };
+}
+function useSwipeResizeListeners() {
+  const { childProviders, bindChildren } = useChildren(
+    SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY
+  );
+  return {
+    swipeResizeListeners: childProviders,
+    bindSwipeResizeListeners: bindChildren
+  };
+}
+function useSwipeResizeDispatcher() {
+  const { parentProvider, bindParent } = useParent(
+    SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY
+  );
+  return {
+    swipeResizeDispatcher: parentProvider,
+    bindSwipeResizeDispatcher: bindParent
+  };
+}
+export {
+  SWIPE_BIND_SWIPE_ITEM_KEY,
+  SWIPE_RESIZE_DISPATCHER_BIND_SWIPE_RESIZE_LISTENER_KEY,
+  useSwipeItems,
+  useSwipeResizeDispatcher,
+  useSwipeResizeListeners
+};

package/es/swipe/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../../icon/icon.css'
+import '../swipe.css'
+import '../SwipeSfc.css'

package/es/swipe/swipe.css

@@ -0,0 +1 @@
+:root { --swipe-indicator-color: #fff; --swipe-indicators-offset: 10px; --swipe-indicator-offset: 4px; --swipe-navigation-z-index: 9; --swipe-navigation-button-width: 36px; --swipe-navigation-button-height: 36px; --swipe-navigation-button-border-radius: 50%; --swipe-navigation-icon-size: 20px; --swipe-navigation-prev-left: 8px; --swipe-navigation-next-right: 8px; --swipe-navigation-prev-top: 8px; --swipe-navigation-next-bottom: 8px;}.var-swipe { position: relative; overflow: hidden; user-select: none; width: 100%;}.var-swipe__track { width: 100%; height: 100%; display: flex; transition-property: transform;}.var-swipe__navigation { position: absolute; top: 50%; z-index: var(--swipe-navigation-z-index);}.var-swipe__navigation-prev { left: 0; transform: translate(var(--swipe-navigation-prev-left), -50%);}.var-swipe__navigation-prev-button[var-swipe-cover] { width: var(--swipe-navigation-button-width); height: var(--swipe-navigation-button-height); border-radius: var(--swipe-navigation-button-border-radius);}.var-swipe__navigation-prev-button-icon[var-swipe-cover] { font-size: var(--swipe-navigation-icon-size);}.var-swipe__navigation-next { right: 0; transform: translate(calc(-1 * var(--swipe-navigation-next-right)), -50%);}.var-swipe__navigation-next-button[var-swipe-cover] { width: var(--swipe-navigation-button-width); height: var(--swipe-navigation-button-height); border-radius: var(--swipe-navigation-button-border-radius);}.var-swipe__navigation-next-button-icon[var-swipe-cover] { font-size: var(--swipe-navigation-icon-size);}.var-swipe__indicators { position: absolute; display: flex; bottom: var(--swipe-indicators-offset); left: 50%; transform: translateX(-50%);}.var-swipe__indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--swipe-indicator-color); opacity: 0.3; margin: 0 var(--swipe-indicator-offset); transition: opacity 0.3s;}.var-swipe--vertical { flex-direction: column;}.var-swipe--indicators-vertical { flex-direction: column; left: var(--swipe-indicators-offset); bottom: 50%; transform: translateY(50%);}.var-swipe--indicator-active { opacity: 1;}.var-swipe--indicator-vertical { margin: var(--swipe-indicator-offset) 0;}.var-swipe--navigation-vertical-prev { top: 0; left: 50%; right: unset; transform: translate(-50%, var(--swipe-navigation-prev-top));}.var-swipe--navigation-vertical-next { bottom: 0; left: 50%; right: unset; top: unset; transform: translate(-50%, calc(-1 * var(--swipe-navigation-next-bottom)));}.var-swipe--navigation-prev-animation-enter-active,.var-swipe--navigation-prev-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-prev-animation-enter-from,.var-swipe--navigation-prev-animation-leave-to { transform: translate(-100%, -50%);}.var-swipe--navigation-next-animation-enter-active,.var-swipe--navigation-next-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-next-animation-enter-from,.var-swipe--navigation-next-animation-leave-to { transform: translate(100%, -50%);}.var-swipe--navigation-vertical-prev-animation-enter-active,.var-swipe--navigation-vertical-prev-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-vertical-prev-animation-enter-from,.var-swipe--navigation-vertical-prev-animation-leave-to { transform: translate(-50%, -100%);}.var-swipe--navigation-vertical-next-animation-enter-active,.var-swipe--navigation-vertical-next-animation-leave-active { transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);}.var-swipe--navigation-vertical-next-animation-enter-from,.var-swipe--navigation-vertical-next-animation-leave-to { transform: translate(-50%, 100%);}