@xenknight/framework7 0.0.2

package/components/swipeout/swipeout.js

@@ -0,0 +1,513 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { nextFrame, bindMethods } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+const Swipeout = {
+  init() {
+    const app = this;
+    const document = getDocument();
+    const touchesStart = {};
+    let isTouched;
+    let isMoved;
+    let isScrolling;
+    let touchStartTime;
+    let touchesDiff;
+    let $swipeoutEl;
+    let $swipeoutContent;
+    let $actionsRight;
+    let $actionsLeft;
+    let actionsLeftWidth;
+    let actionsRightWidth;
+    let translate;
+    let opened;
+    let openedActionsSide;
+    let $leftButtons;
+    let $rightButtons;
+    let direction;
+    let $overswipeLeftButton;
+    let $overswipeRightButton;
+    let overswipeLeft;
+    let overswipeRight;
+    function handleTouchStart(e) {
+      if (!app.swipeout.allow) return;
+      isMoved = false;
+      isTouched = true;
+      isScrolling = undefined;
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      touchStartTime = new Date().getTime();
+      $swipeoutEl = $(this);
+    }
+    function handleTouchMove(e) {
+      if (!isTouched) return;
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      if (typeof isScrolling === 'undefined') {
+        isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
+      }
+      if (isScrolling) {
+        isTouched = false;
+        return;
+      }
+      if (!isMoved) {
+        if ($('.list.sortable-opened').length > 0) return;
+        $swipeoutContent = $swipeoutEl.find('.swipeout-content');
+        $actionsRight = $swipeoutEl.find('.swipeout-actions-right');
+        $actionsLeft = $swipeoutEl.find('.swipeout-actions-left');
+        actionsLeftWidth = null;
+        actionsRightWidth = null;
+        $leftButtons = null;
+        $rightButtons = null;
+        $overswipeRightButton = null;
+        $overswipeLeftButton = null;
+        if ($actionsLeft.length > 0) {
+          actionsLeftWidth = $actionsLeft.outerWidth();
+          $leftButtons = $actionsLeft.children('a');
+          $overswipeLeftButton = $actionsLeft.find('.swipeout-overswipe');
+        }
+        if ($actionsRight.length > 0) {
+          actionsRightWidth = $actionsRight.outerWidth();
+          $rightButtons = $actionsRight.children('a');
+          $overswipeRightButton = $actionsRight.find('.swipeout-overswipe');
+        }
+        opened = $swipeoutEl.hasClass('swipeout-opened');
+        if (opened) {
+          openedActionsSide = $swipeoutEl.find('.swipeout-actions-left.swipeout-actions-opened').length > 0 ? 'left' : 'right';
+        }
+        $swipeoutEl.removeClass('swipeout-transitioning');
+        if (!app.params.swipeout.noFollow) {
+          $swipeoutEl.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened');
+          $swipeoutEl.removeClass('swipeout-opened');
+        }
+      }
+      isMoved = true;
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      touchesDiff = pageX - touchesStart.x;
+      translate = touchesDiff;
+      if (opened) {
+        if (openedActionsSide === 'right') translate -= actionsRightWidth;else translate += actionsLeftWidth;
+      }
+      if (translate > 0 && $actionsLeft.length === 0 || translate < 0 && $actionsRight.length === 0) {
+        if (!opened) {
+          isTouched = false;
+          isMoved = false;
+          $swipeoutContent.transform('');
+          if ($rightButtons && $rightButtons.length > 0) {
+            $rightButtons.transform('');
+          }
+          if ($leftButtons && $leftButtons.length > 0) {
+            $leftButtons.transform('');
+          }
+          return;
+        }
+        translate = 0;
+      }
+      if (translate < 0) direction = 'to-left';else if (translate > 0) direction = 'to-right';else if (!direction) direction = 'to-left';
+      let buttonOffset;
+      let progress;
+      e.f7PreventSwipePanel = true;
+      if (app.params.swipeout.noFollow) {
+        if (opened) {
+          if (openedActionsSide === 'right' && touchesDiff > 0) {
+            app.swipeout.close($swipeoutEl);
+          }
+          if (openedActionsSide === 'left' && touchesDiff < 0) {
+            app.swipeout.close($swipeoutEl);
+          }
+        } else {
+          if (touchesDiff < 0 && $actionsRight.length > 0) {
+            app.swipeout.open($swipeoutEl, 'right');
+          }
+          if (touchesDiff > 0 && $actionsLeft.length > 0) {
+            app.swipeout.open($swipeoutEl, 'left');
+          }
+        }
+        isTouched = false;
+        isMoved = false;
+        return;
+      }
+      overswipeLeft = false;
+      overswipeRight = false;
+      if ($actionsRight.length > 0) {
+        // Show right actions
+        let buttonTranslate = translate;
+        progress = buttonTranslate / actionsRightWidth;
+        if (buttonTranslate < -actionsRightWidth) {
+          const ratio = buttonTranslate / -actionsRightWidth;
+          buttonTranslate = -actionsRightWidth - (-buttonTranslate - actionsRightWidth) ** 0.8;
+          translate = buttonTranslate;
+          if ($overswipeRightButton.length > 0 && ratio > app.params.swipeout.overswipeRatio) {
+            overswipeRight = true;
+          }
+        }
+        if (direction !== 'to-left') {
+          progress = 0;
+          buttonTranslate = 0;
+        }
+        $rightButtons.each(buttonEl => {
+          const $buttonEl = $(buttonEl);
+          if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
+          }
+          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
+            $buttonEl.css({
+              left: `${overswipeRight ? -buttonOffset : 0}px`
+            });
+            if (overswipeRight) {
+              if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
+                $swipeoutEl.trigger('swipeout:overswipeenter');
+                app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]);
+              }
+              $buttonEl.addClass('swipeout-overswipe-active');
+            } else {
+              if ($buttonEl.hasClass('swipeout-overswipe-active')) {
+                $swipeoutEl.trigger('swipeout:overswipeexit');
+                app.emit('swipeoutOverswipeExit', $swipeoutEl[0]);
+              }
+              $buttonEl.removeClass('swipeout-overswipe-active');
+            }
+          }
+          $buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
+        });
+      }
+      if ($actionsLeft.length > 0) {
+        // Show left actions
+        let buttonTranslate = translate;
+        progress = buttonTranslate / actionsLeftWidth;
+        if (buttonTranslate > actionsLeftWidth) {
+          const ratio = buttonTranslate / actionsRightWidth;
+          buttonTranslate = actionsLeftWidth + (buttonTranslate - actionsLeftWidth) ** 0.8;
+          translate = buttonTranslate;
+          if ($overswipeLeftButton.length > 0 && ratio > app.params.swipeout.overswipeRatio) {
+            overswipeLeft = true;
+          }
+        }
+        if (direction !== 'to-right') {
+          buttonTranslate = 0;
+          progress = 0;
+        }
+        $leftButtons.each((buttonEl, index) => {
+          const $buttonEl = $(buttonEl);
+          if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+          }
+          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
+            $buttonEl.css({
+              left: `${overswipeLeft ? buttonOffset : 0}px`
+            });
+            if (overswipeLeft) {
+              if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
+                $swipeoutEl.trigger('swipeout:overswipeenter');
+                app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]);
+              }
+              $buttonEl.addClass('swipeout-overswipe-active');
+            } else {
+              if ($buttonEl.hasClass('swipeout-overswipe-active')) {
+                $swipeoutEl.trigger('swipeout:overswipeexit');
+                app.emit('swipeoutOverswipeExit', $swipeoutEl[0]);
+              }
+              $buttonEl.removeClass('swipeout-overswipe-active');
+            }
+          }
+          if ($leftButtons.length > 1) {
+            $buttonEl.css('z-index', $leftButtons.length - index);
+          }
+          $buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
+        });
+      }
+      $swipeoutEl.trigger('swipeout', progress);
+      app.emit('swipeout', $swipeoutEl[0], progress);
+      $swipeoutContent.transform(`translate3d(${translate}px,0,0)`);
+    }
+    function handleTouchEnd() {
+      if (!isTouched || !isMoved) {
+        isTouched = false;
+        isMoved = false;
+        return;
+      }
+      isTouched = false;
+      isMoved = false;
+      const timeDiff = new Date().getTime() - touchStartTime;
+      const $actions = direction === 'to-left' ? $actionsRight : $actionsLeft;
+      const actionsWidth = direction === 'to-left' ? actionsRightWidth : actionsLeftWidth;
+      let action;
+      let $buttons;
+      let i;
+      if (timeDiff < 300 && (touchesDiff < -10 && direction === 'to-left' || touchesDiff > 10 && direction === 'to-right') || timeDiff >= 300 && Math.abs(translate) > actionsWidth / 2) {
+        action = 'open';
+      } else {
+        action = 'close';
+      }
+      if (timeDiff < 300) {
+        if (Math.abs(translate) === 0) action = 'close';
+        if (Math.abs(translate) === actionsWidth) action = 'open';
+      }
+      if (action === 'open') {
+        Swipeout.el = $swipeoutEl[0];
+        $swipeoutEl.trigger('swipeout:open');
+        app.emit('swipeoutOpen', $swipeoutEl[0]);
+        $swipeoutEl.addClass('swipeout-opened swipeout-transitioning');
+        const newTranslate = direction === 'to-left' ? -actionsWidth : actionsWidth;
+        $swipeoutContent.transform(`translate3d(${newTranslate}px,0,0)`);
+        $actions.addClass('swipeout-actions-opened');
+        $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
+        if ($buttons) {
+          for (i = 0; i < $buttons.length; i += 1) {
+            $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
+          }
+        }
+        if (overswipeRight) {
+          $actionsRight.find('.swipeout-overswipe').trigger('click', 'f7Overswipe');
+        }
+        if (overswipeLeft) {
+          $actionsLeft.find('.swipeout-overswipe').trigger('click', 'f7Overswipe');
+        }
+      } else {
+        $swipeoutEl.trigger('swipeout:close');
+        app.emit('swipeoutClose', $swipeoutEl[0]);
+        Swipeout.el = undefined;
+        $swipeoutEl.addClass('swipeout-transitioning').removeClass('swipeout-opened');
+        $swipeoutContent.transform('');
+        $actions.removeClass('swipeout-actions-opened');
+      }
+      let buttonOffset;
+      if ($leftButtons && $leftButtons.length > 0 && $leftButtons !== $buttons) {
+        $leftButtons.each(buttonEl => {
+          const $buttonEl = $(buttonEl);
+          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          if (typeof buttonOffset === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+          }
+          $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
+        });
+      }
+      if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) {
+        $rightButtons.each(buttonEl => {
+          const $buttonEl = $(buttonEl);
+          buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          if (typeof buttonOffset === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
+          }
+          $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
+        });
+      }
+      $swipeoutContent.transitionEnd(() => {
+        if (opened && action === 'open' || !opened && action === 'close') return;
+        $swipeoutEl.trigger(action === 'open' ? 'swipeout:opened' : 'swipeout:closed');
+        app.emit(action === 'open' ? 'swipeoutOpened' : 'swipeoutClosed', $swipeoutEl[0]);
+        $swipeoutEl.removeClass('swipeout-transitioning');
+        if (opened && action === 'close') {
+          if ($actionsRight.length > 0) {
+            $rightButtons.transform('');
+          }
+          if ($actionsLeft.length > 0) {
+            $leftButtons.transform('');
+          }
+        }
+      });
+    }
+    const passiveListener = getSupport().passiveListener ? {
+      passive: true
+    } : false;
+    app.on('touchstart', e => {
+      if (Swipeout.el) {
+        const $targetEl = $(e.target);
+        if (!($(Swipeout.el).is($targetEl[0]) || $targetEl.parents('.swipeout').is(Swipeout.el) || $targetEl.hasClass('modal-in') || ($targetEl.attr('class') || '').indexOf('-backdrop') > 0 || $targetEl.hasClass('actions-modal') || $targetEl.parents('.actions-modal.modal-in, .dialog.modal-in').length > 0)) {
+          app.swipeout.close(Swipeout.el);
+        }
+      }
+    });
+    $(document).on(app.touchEvents.start, 'li.swipeout', handleTouchStart, passiveListener);
+    app.on('touchmove:active', handleTouchMove);
+    app.on('touchend:passive', handleTouchEnd);
+  },
+  allow: true,
+  el: undefined,
+  open() {
+    const app = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    let [el, side, callback] = args;
+    if (typeof args[1] === 'function') {
+      [el, callback, side] = args;
+    }
+    const $el = $(el).eq(0);
+    if ($el.length === 0) return;
+    if (!$el.hasClass('swipeout') || $el.hasClass('swipeout-opened')) return;
+    if (!side) {
+      if ($el.find('.swipeout-actions-right').length > 0) side = 'right';else side = 'left';
+    }
+    const $swipeoutActions = $el.find(`.swipeout-actions-${side}`);
+    const $swipeoutContent = $el.find('.swipeout-content');
+    if ($swipeoutActions.length === 0) return;
+    $el.trigger('swipeout:open').addClass('swipeout-opened').removeClass('swipeout-transitioning');
+    app.emit('swipeoutOpen', $el[0]);
+    $swipeoutActions.addClass('swipeout-actions-opened');
+    const $buttons = $swipeoutActions.children('a');
+    const swipeoutActionsWidth = $swipeoutActions.outerWidth();
+    const translate = side === 'right' ? -swipeoutActionsWidth : swipeoutActionsWidth;
+    if ($buttons.length > 1) {
+      $buttons.each((buttonEl, buttonIndex) => {
+        const $buttonEl = $(buttonEl);
+        if (side === 'right') {
+          $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+        } else {
+          $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+        }
+      });
+    }
+    $el.addClass('swipeout-transitioning');
+    $swipeoutContent.transitionEnd(() => {
+      $el.trigger('swipeout:opened');
+      app.emit('swipeoutOpened', $el[0]);
+      if (callback) callback.call($el[0]);
+    });
+    nextFrame(() => {
+      $buttons.transform(`translate3d(${translate}px,0,0)`);
+      $swipeoutContent.transform(`translate3d(${translate}px,0,0)`);
+    });
+    Swipeout.el = $el[0];
+  },
+  close(el, callback) {
+    const app = this;
+    const $el = $(el).eq(0);
+    if ($el.length === 0) return;
+    if (!$el.hasClass('swipeout-opened')) return;
+    const side = $el.find('.swipeout-actions-opened').hasClass('swipeout-actions-right') ? 'right' : 'left';
+    const $swipeoutActions = $el.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened');
+    const $buttons = $swipeoutActions.children('a');
+    const swipeoutActionsWidth = $swipeoutActions.outerWidth();
+    app.swipeout.allow = false;
+    $el.trigger('swipeout:close');
+    app.emit('swipeoutClose', $el[0]);
+    $el.removeClass('swipeout-opened').addClass('swipeout-transitioning');
+    let closeTimeout;
+    function onSwipeoutClose() {
+      app.swipeout.allow = true;
+      if ($el.hasClass('swipeout-opened')) return;
+      $el.removeClass('swipeout-transitioning');
+      $buttons.transform('');
+      $el.trigger('swipeout:closed');
+      app.emit('swipeoutClosed', $el[0]);
+      if (callback) callback.call($el[0]);
+      if (closeTimeout) clearTimeout(closeTimeout);
+    }
+    $el.find('.swipeout-content').transform('').transitionEnd(onSwipeoutClose);
+    closeTimeout = setTimeout(onSwipeoutClose, 500);
+    $buttons.each(buttonEl => {
+      const $buttonEl = $(buttonEl);
+      if (side === 'right') {
+        $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+      } else {
+        $buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+      }
+      $buttonEl.css({
+        left: '0px'
+      }).removeClass('swipeout-overswipe-active');
+    });
+    if (Swipeout.el && Swipeout.el === $el[0]) Swipeout.el = undefined;
+  },
+  delete(el, callback) {
+    const app = this;
+    const $el = $(el).eq(0);
+    if ($el.length === 0) return;
+    Swipeout.el = undefined;
+    $el.trigger('swipeout:delete');
+    app.emit('swipeoutDelete', $el[0]);
+    $el.css({
+      height: `${$el.outerHeight()}px`
+    });
+    $el.transitionEnd(() => {
+      $el.trigger('swipeout:deleted');
+      app.emit('swipeoutDeleted', $el[0]);
+      if (callback) callback.call($el[0]);
+      if ($el.parents('.virtual-list').length > 0) {
+        const virtualList = $el.parents('.virtual-list')[0].f7VirtualList;
+        const virtualIndex = $el[0].f7VirtualListIndex;
+        if (virtualList && typeof virtualIndex !== 'undefined') virtualList.deleteItem(virtualIndex);
+      } else if (app.params.swipeout.removeElements) {
+        if (app.params.swipeout.removeElementsWithTimeout) {
+          setTimeout(() => {
+            $el.remove();
+          }, app.params.swipeout.removeElementsTimeout);
+        } else {
+          $el.remove();
+        }
+      } else {
+        $el.removeClass('swipeout-deleting swipeout-transitioning');
+      }
+    });
+    // eslint-disable-next-line
+    // $el[0]._clientLeft = $el[0].clientLeft;
+    nextFrame(() => {
+      $el.addClass('swipeout-deleting swipeout-transitioning').css({
+        height: '0px'
+      }).find('.swipeout-content').transform('translate3d(-100%,0,0)');
+    });
+  }
+};
+export default {
+  name: 'swipeout',
+  params: {
+    swipeout: {
+      actionsNoFold: false,
+      noFollow: false,
+      removeElements: true,
+      removeElementsWithTimeout: false,
+      removeElementsTimeout: 0,
+      overswipeRatio: 1.2
+    }
+  },
+  create() {
+    const app = this;
+    bindMethods(app, {
+      swipeout: Swipeout
+    });
+  },
+  clicks: {
+    '.swipeout-open': function openSwipeout($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.swipeout.open(data.swipeout, data.side);
+    },
+    '.swipeout-close': function closeSwipeout($clickedEl) {
+      const app = this;
+      const $swipeoutEl = $clickedEl.closest('.swipeout');
+      if ($swipeoutEl.length === 0) return;
+      app.swipeout.close($swipeoutEl);
+    },
+    '.swipeout-delete': function deleteSwipeout($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const $swipeoutEl = $clickedEl.closest('.swipeout');
+      if ($swipeoutEl.length === 0) return;
+      const {
+        confirm,
+        confirmTitle
+      } = data;
+      if (data.confirm) {
+        app.dialog.confirm(confirm, confirmTitle, () => {
+          app.swipeout.delete($swipeoutEl);
+        });
+      } else {
+        app.swipeout.delete($swipeoutEl);
+      }
+    }
+  },
+  on: {
+    init() {
+      const app = this;
+      if (!app.params.swipeout) return;
+      app.swipeout.init();
+    }
+  }
+};

package/components/swipeout/swipeout.less

@@ -0,0 +1,109 @@
+/* === Swipeout === */
+@import './swipeout-vars.less';
+
+.swipeout {
+  overflow: hidden;
+  transform-style: preserve-3d;
+}
+.swipeout-deleting {
+  transition-duration: 300ms;
+  .swipeout-content {
+    transform: translateX(-100%);
+  }
+}
+.swipeout-transitioning {
+  .swipeout-content,
+  .swipeout-actions-right a,
+  .swipeout-actions-left a,
+  .swipeout-overswipe {
+    transition-duration: 300ms;
+    transition-property: transform, left;
+  }
+}
+.swipeout-content {
+  position: relative;
+  z-index: 10;
+}
+.swipeout-overswipe {
+  transition-duration: 200ms;
+  transition-property: left;
+}
+.swipeout-actions-left,
+.swipeout-actions-right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  display: flex;
+  direction: ltr;
+  > a,
+  > button,
+  > span,
+  > div {
+    color: var(--f7-swipeout-button-text-color);
+    background: var(--f7-swipeout-button-bg-color);
+    padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
+    display: flex;
+    align-items: center;
+    position: relative;
+    left: 0;
+    font-size: var(--f7-swipeout-button-font-size);
+    font-weight: var(--f7-swipeout-button-font-weight);
+    &:after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: 600%;
+      height: 100%;
+      background: inherit;
+      z-index: -1;
+      transform: translate3d(0, 0, 0);
+      pointer-events: none;
+    }
+  }
+  .swipeout-delete {
+    background: var(--f7-swipeout-delete-button-bg-color);
+  }
+}
+.swipeout-actions-right {
+  right: 0%;
+  transform: translateX(calc(100% + 1px));
+  > a,
+  > button,
+  > span,
+  > div {
+    &:after {
+      left: 100%;
+    }
+    &:last-child {
+      padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
+    }
+  }
+}
+.swipeout-actions-left {
+  left: 0%;
+  transform: translateX(calc(-100% - 1px));
+  > a,
+  > button,
+  > span,
+  > div {
+    &:after {
+      right: 100%;
+    }
+    &:first-child {
+      padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
+    }
+  }
+}
+.swipeout-actions-left,
+.swipeout-actions-right {
+  [class*='color-'] {
+    --f7-swipeout-button-bg-color: var(--f7-theme-color);
+  }
+}
+.if-ios-theme({
+  @import './swipeout-ios.less';
+});
+.if-md-theme({
+  @import './swipeout-md.less';
+});

package/components/swiper/swiper-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/swiper/swiper-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/swiper/swiper-rtl.css

@@ -0,0 +1 @@
+@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}