@varlet/ui 2.16.6 → 2.16.7-alpha.1695050636971

package/es/swipe/Swipe.mjs

@@ -1,5 +1,8 @@
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+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 } from './provide.mjs';
 import { props } from './props.mjs';
@@ -14,11 +17,14 @@ var {
   n,
   classes
 } = createNamespace('swipe');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 var _hoisted_1 = ["onClick"];
 function __render__(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", {
+  var _component_var_icon = _resolveComponent("var-icon");
+  var _component_var_button = _resolveComponent("var-button");
+  var _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n()),
     ref: "swipeEl"
   }, [_createElementVNode("div", {
@@ -38,13 +44,72 @@ function __render__(_ctx, _cache) {
     onTouchend: _cache[2] || (_cache[2] = function () {
       return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
     })
-  }, [_renderSlot(_ctx.$slots, "default")], 38 /* CLASS, STYLE, HYDRATE_EVENTS */), _renderSlot(_ctx.$slots, "indicator", {
+  }, [_renderSlot(_ctx.$slots, "default")], 38 /* CLASS, STYLE, HYDRATE_EVENTS */), _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 /* PROPS */, ["class", "name"])]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["disabled", "class"])], 2 /* CLASS */)) : _createCommentVNode("v-if", true)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["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 /* PROPS */, ["class", "name"])]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["class", "disabled"])], 2 /* CLASS */)) : _createCommentVNode("v-if", true)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["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", {
+  })), () => [_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) => {
@@ -56,11 +121,17 @@ function __render__(_ctx, _cache) {
       key: l,
       onClick: $event => _ctx.to(idx)
     }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_1);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : _createCommentVNode("v-if", true)])], 2 /* CLASS */);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : _createCommentVNode("v-if", true)])], 2 /* CLASS */)), [[_directive_hover, _ctx.handleHovering]]);
 }
-
 var __sfc__ = defineComponent({
   name,
+  directives: {
+    Hover
+  },
+  components: {
+    VarButton,
+    VarIcon
+  },
   props,
   setup(props) {
     var swipeEl = ref(null);
@@ -70,6 +141,7 @@ var __sfc__ = defineComponent({
     var trackTranslate = ref(0);
     var lockDuration = ref(false);
     var index = ref(0);
+    var hovering = ref(false);
     var {
       swipeItems,
       bindSwipeItems,
@@ -389,6 +461,17 @@ var __sfc__ = defineComponent({
         });
       });
     }
+    var handleHovering = value => {
+      if (props.navigation === 'hover') {
+        hovering.value = value;
+      }
+    };
+    function getNavigationAnimation(type) {
+      if (props.navigation !== 'hover') {
+        return '';
+      }
+      return props.vertical ? n("--navigation-vertical-" + type + "-animation") : n("--navigation-" + type + "-animation");
+    }
     return {
       length,
       index,
@@ -396,6 +479,7 @@ var __sfc__ = defineComponent({
       trackSize,
       trackTranslate,
       lockDuration,
+      hovering,
       n,
       classes,
       handleTouchstart,
@@ -405,7 +489,9 @@ var __sfc__ = defineComponent({
       prev,
       to,
       resize,
-      toNumber
+      toNumber,
+      handleHovering,
+      getNavigationAnimation
     };
   }
 });

package/es/swipe/props.mjs

@@ -13,6 +13,10 @@ export var props = {
     type: [String, Number],
     default: 0
   },
+  navigation: {
+    type: [Boolean, String],
+    default: false
+  },
   indicator: {
     type: Boolean,
     default: true

package/es/swipe/style/index.mjs

@@ -1,3 +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

@@ -1 +1 @@
-:root { --swipe-indicator-color: #fff; --swipe-indicators-offset: 10px; --swipe-indicator-offset: 4px;}.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__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;}
+:root { --swipe-indicator-color: #fff; --swipe-indicators-offset: 10px; --swipe-indicator-offset: 4px; --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: 99;}.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%);}