vue-app-sdk/dist/plugins/Animation/Animation.cjs

Vue App SDK.

"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
require("../../vendors/nice-fns/dist/compactObject.cjs");
require("../../vendors/nice-fns/dist/pascalCase.cjs");
require("vue-router");
require("../../vendors/easy-hookable/dist/callers.cjs");
require("../../vendors/easy-hookable/dist/ContextHelper.cjs");
const Router = require("../../core/Router.cjs");
require("../Tabs/Tabs.cjs");
const ANIMATION_ID = Symbol("animation");
class Animation {
  constructor(options = {}) {
    __publicField(this, "id", ANIMATION_ID);
    /**
     * 是否在路由导航后自动延迟启用动画
     */
    __publicField(this, "_isAutoEnabled", true);
    /**
     * 动画启用状态
     */
    __publicField(this, "_isEnabled", vue.ref(true));
    /**
     * 当前使用的动画名称
     */
    __publicField(this, "_animationName", vue.ref(this.forwardName));
    /**
     * 设置是否在路由导航后自动延迟启用动画状态
     * @param value 状态值
     */
    __publicField(this, "setAutoEnabled", (value) => {
      this._isAutoEnabled = value;
    });
    /**
     * 设置动画启用状态
     * @param value 状态值
     */
    __publicField(this, "setEnabled", (value) => {
      this._isEnabled.value = value;
    });
    /**
     * 启用动画
     */
    __publicField(this, "enable", () => {
      this.setEnabled(true);
    });
    /**
     * 禁用动画
     *
     * ***注意：禁用时需设置 {@link https://cn.vuejs.org/api/built-in-components.html#transition Transition} 组件的 `css` 属性为 `false`，否则会影响切换效果！***
     */
    __publicField(this, "disable", () => {
      this.setEnabled(false);
    });
    __publicField(this, "install", (sdk) => {
      sdk.hook("sdk:router:navigate", (direction) => {
        this._animationName.value = direction === Router.NavigationDirection.backward ? this.backwardName : this.forwardName;
        if (this._isAutoEnabled)
          vue.nextTick(() => this.enable());
      });
      return () => {
        this._isAutoEnabled = true;
        this._isEnabled.value = true;
        this._animationName.value = this.forwardName;
      };
    });
    this.options = options;
  }
  /**
   * 是否在路由导航后自动延迟启用动画
   * @readonly
   */
  get isAutoEnabled() {
    return this._isAutoEnabled;
  }
  /**
   * 动画启用状态
   * @readonly
   */
  get isEnabled() {
    return this._isEnabled.value;
  }
  /**
   * 路由导航时的动画名称，禁用动画时将返回 `undefined`
   */
  get name() {
    return this.isEnabled ? this._animationName.value : void 0;
  }
  /**
   * 前进动画名称
   * @readonly
   */
  get forwardName() {
    return vue.toValue(this.options.forwardName) || "forward";
  }
  /**
   * 后退动画名称
   * @readonly
   */
  get backwardName() {
    return vue.toValue(this.options.backwardName) || "backward";
  }
}
exports.ANIMATION_ID = ANIMATION_ID;
exports.Animation = Animation;