@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.23.0",
+  "version": "1.23.3",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/action-sheet/ActionSheet.js

@@ -0,0 +1,149 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _locale = require("../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-action-sheet__title"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = {
+  class: "var-action-sheet__action-name"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_popup = (0, _vue.resolveComponent)("var-popup");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, (0, _vue.mergeProps)({
+    class: "var-action-sheet__popup-radius",
+    position: "bottom",
+    overlay: _ctx.overlay,
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    "lock-scroll": _ctx.lockScroll,
+    "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    teleport: _ctx.teleport,
+    show: _ctx.popupShow
+  }, {
+    'onUpdate:show': value => {
+      var _ctx$$props$onUpdate, _ctx$$props;
+
+      return (_ctx$$props$onUpdate = (_ctx$$props = _ctx.$props)['onUpdate:show']) == null ? void 0 : _ctx$$props$onUpdate.call(_ctx$$props, value);
+    }
+  }, {
+    onOpen: _ctx.onOpen,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onOpened: _ctx.onOpened,
+    onRouteChange: _ctx.onRouteChange
+  }), {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+      class: "var-action-sheet var--box"
+    }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", _hoisted_1, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 1
+    /* TEXT */
+    )]), (0, _vue.renderSlot)(_ctx.$slots, "actions", {}, () => [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.actions, action => {
+      return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+        class: (0, _vue.normalizeClass)(["var-action-sheet__action-item", [action.className, action.disabled ? 'var-action-sheet--disabled' : null]]),
+        key: action.name,
+        style: (0, _vue.normalizeStyle)({
+          color: action.color
+        }),
+        onClick: $event => _ctx.handleSelect(action)
+      }, [action.icon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+        key: 0,
+        class: "var-action-sheet__action-icon",
+        "var-action-sheet-cover": "",
+        name: action.icon,
+        size: action.iconSize
+      }, null, 8
+      /* PROPS */
+      , ["name", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(action.name), 1
+      /* TEXT */
+      )], 14
+      /* CLASS, STYLE, PROPS */
+      , _hoisted_2)), [[_directive_ripple, {
+        disabled: action.disabled
+      }]]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))])], 16
+    /* FULL_PROPS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  , ["overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarActionSheet',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarPopup: _popup.default,
+    VarIcon: _icon.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var popupShow = (0, _vue.ref)(false);
+
+    var handleSelect = action => {
+      var _props$onUpdateShow;
+
+      if (action.disabled) {
+        return;
+      }
+
+      var {
+        closeOnClickAction,
+        onSelect
+      } = props;
+      onSelect == null ? void 0 : onSelect(action);
+      closeOnClickAction && ((_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false));
+    };
+
+    (0, _vue.watch)(() => props.show, newValue => {
+      popupShow.value = newValue;
+    }, {
+      immediate: true
+    });
+    return {
+      popupShow,
+      pack: _locale.pack,
+      dt: _shared.dt,
+      handleSelect
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/action-sheet/actionSheet.css

@@ -0,0 +1 @@
+:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/lib/action-sheet/actionSheet.less

@@ -0,0 +1,68 @@
+@action-sheet-border-radius: 2px;
+@action-sheet-title-color: #888;
+@action-sheet-title-padding: 10px 16px;
+@action-sheet-title-font-size: 14px;
+@action-sheet-action-item-height: 48px;
+@action-sheet-action-item-padding: 0px 18px;
+@action-sheet-action-item-color: #333;
+@action-sheet-action-item-disabled-color: var(--color-text-disabled);
+@action-sheet-icon-margin: 0 20px 0 0;
+@action-sheet-icon-size: 24px;
+@action-sheet-background: #fff;
+
+:root {
+  --action-sheet-border-radius: @action-sheet-border-radius;
+  --action-sheet-title-color: @action-sheet-title-color;
+  --action-sheet-title-padding: @action-sheet-title-padding;
+  --action-sheet-title-font-size: @action-sheet-title-font-size;
+  --action-sheet-action-item-height: @action-sheet-action-item-height;
+  --action-sheet-action-item-padding: @action-sheet-action-item-padding;
+  --action-sheet-action-item-color: @action-sheet-action-item-color;
+  --action-sheet-action-item-disabled-color: @action-sheet-action-item-disabled-color;
+  --action-sheet-icon-margin: @action-sheet-icon-margin;
+  --action-sheet-icon-size: @action-sheet-icon-size;
+  --action-sheet-background: @action-sheet-background;
+}
+
+.var-action-sheet {
+  padding: 10px 0;
+  max-height: 80%;
+  background: var(--action-sheet-background);
+  transition: background-color 0.25s;
+
+  &__popup-radius {
+    border-radius: var(--action-sheet-border-radius);
+  }
+
+  &__title {
+    padding: var(--action-sheet-title-padding);
+    color: var(--action-sheet-title-color);
+    font-size: var(--action-sheet-title-font-size);
+  }
+
+  &__action-item {
+    display: flex;
+    align-items: center;
+    height: var(--action-sheet-action-item-height);
+    padding: var(--action-sheet-action-item-padding);
+    color: var(--action-sheet-action-item-color);
+    cursor: pointer;
+  }
+
+  &__action-name {
+    overflow: auto;
+    max-height: var(--action-sheet-action-item-height);
+  }
+
+  &__action-icon[var-action-sheet-cover] {
+    margin: var(--action-sheet-icon-margin);
+    width: var(--action-sheet-icon-size);
+    height: var(--action-sheet-icon-size);
+    font-size: var(--action-sheet-icon-size);
+  }
+
+  &--disabled {
+    color: var(--action-sheet-action-item-disabled-color) !important;
+    cursor: not-allowed;
+  }
+}

package/lib/action-sheet/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._ActionSheetComponent = void 0;
+
+var _ActionSheet = _interopRequireDefault(require("./ActionSheet.js"));
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _components = require("../utils/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var singletonOptions;
+
+function ActionSheet(options) {
+  if (!_shared.inBrowser) {
+    return Promise.resolve();
+  }
+
+  return new Promise(resolve => {
+    ActionSheet.close();
+    var reactiveActionSheetOptions = (0, _vue.reactive)(options);
+    reactiveActionSheetOptions.teleport = 'body';
+    singletonOptions = reactiveActionSheetOptions;
+    var {
+      unmountInstance
+    } = (0, _components.mountInstance)(_ActionSheet.default, reactiveActionSheetOptions, {
+      onSelect: action => {
+        reactiveActionSheetOptions.onSelect == null ? void 0 : reactiveActionSheetOptions.onSelect(action);
+        resolve(action);
+      },
+      onClose: () => {
+        reactiveActionSheetOptions.onClose == null ? void 0 : reactiveActionSheetOptions.onClose();
+        resolve('close');
+      },
+      onClosed: () => {
+        reactiveActionSheetOptions.onClosed == null ? void 0 : reactiveActionSheetOptions.onClosed();
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      'onUpdate:show': value => {
+        reactiveActionSheetOptions.show = value;
+      }
+    });
+    reactiveActionSheetOptions.show = true;
+  });
+}
+
+ActionSheet.Component = _ActionSheet.default;
+
+_ActionSheet.default.install = function (app) {
+  app.component(_ActionSheet.default.name, _ActionSheet.default);
+};
+
+ActionSheet.close = () => {
+  if (singletonOptions != null) {
+    var prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    (0, _vue.nextTick)().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+
+ActionSheet.install = function (app) {
+  app.component(_ActionSheet.default.name, _ActionSheet.default);
+};
+
+var _ActionSheetComponent = _ActionSheet.default;
+exports._ActionSheetComponent = _ActionSheetComponent;
+var _default = ActionSheet;
+exports.default = _default;

package/lib/action-sheet/props.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../popup/props");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var props = _extends({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String
+  },
+  closeOnClickAction: {
+    type: Boolean,
+    default: true
+  },
+  onSelect: {
+    type: Function
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+}, (0, _components.pickProps)(_props.props, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
+'onRouteChange']));
+
+exports.props = props;

package/lib/action-sheet/style/index.js

@@ -0,0 +1,6 @@
+require('../../styles/common.css')
+require('../../icon/icon.css')
+require('../../ripple/ripple.css')
+require('../../popup/popup.css')
+require('../actionSheet.css')
+require('../ActionSheetSfc.css')

package/lib/action-sheet/style/less.js

@@ -0,0 +1,6 @@
+require('../../styles/common.less')
+require('../../icon/icon.less')
+require('../../ripple/ripple.less')
+require('../../popup/popup.less')
+require('../actionSheet.less')
+require('../ActionSheetSfc.less')

package/lib/app-bar/AppBar.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-app-bar__left"
+};
+var _hoisted_2 = {
+  key: 0,
+  class: "var-app-bar__title"
+};
+var _hoisted_3 = {
+  class: "var-app-bar__right"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-app-bar", {
+      'var-elevation--3': _ctx.elevation
+    }]),
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.color,
+      color: _ctx.textColor
+    })
+  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "left"), _ctx.titlePosition === 'left' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: "var-app-bar__title",
+    style: (0, _vue.normalizeStyle)({
+      paddingLeft: _ctx.$slots.left ? 0 : undefined
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  /* TEXT */
+  )])], 4
+  /* STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.titlePosition === 'center' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  /* TEXT */
+  )])])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_3, [_ctx.titlePosition === 'right' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: "var-app-bar__title",
+    style: (0, _vue.normalizeStyle)({
+      paddingRight: _ctx.$slots.right ? 0 : undefined
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  /* TEXT */
+  )])], 4
+  /* STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "right")])], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarAppBar',
+  props: _props.props
+});
+
+exports.default = _default;

package/lib/app-bar/appBar.css

@@ -0,0 +1 @@
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px;}.var-app-bar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}

package/lib/app-bar/appBar.less

@@ -0,0 +1,56 @@
+@app-bar-color: var(--color-primary);
+@app-bar-height: 54px;
+@app-bar-text-color: #fff;
+@app-bar-title-padding: 0 12px;
+@app-bar-left-gap: 6px;
+@app-bar-right-gap: 6px;
+
+:root {
+  --app-bar-color: @app-bar-color;
+  --app-bar-title-padding: @app-bar-title-padding;
+  --app-bar-text-color: #fff;
+  --app-bar-height: @app-bar-height;
+  --app-bar-left-gap: @app-bar-left-gap;
+  --app-bar-right-gap: @app-bar-right-gap;
+}
+
+.var-app-bar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--app-bar-height);
+  background: var(--app-bar-color);
+  color: var(--app-bar-text-color);
+  transition: background-color 0.25s;
+
+  &__title {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: var(--app-bar-title-padding);
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    z-index: 2;
+  }
+
+  &__left {
+    position: absolute;
+    top: 0;
+    left: var(--app-bar-left-gap);
+  }
+
+  &__right {
+    position: absolute;
+    top: 0;
+    right: var(--app-bar-right-gap);
+  }
+}

package/lib/app-bar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._AppBarComponent = void 0;
+
+var _AppBar = _interopRequireDefault(require("./AppBar.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_AppBar.default.install = function (app) {
+  app.component(_AppBar.default.name, _AppBar.default);
+};
+
+var _AppBarComponent = _AppBar.default;
+exports._AppBarComponent = _AppBarComponent;
+var _default = _AppBar.default;
+exports.default = _default;

package/lib/app-bar/props.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.positionValidator = positionValidator;
+exports.props = void 0;
+
+function positionValidator(position) {
+  var validPositions = ['left', 'center', 'right'];
+  return validPositions.includes(position);
+}
+
+var props = {
+  color: {
+    type: String
+  },
+  textColor: {
+    type: String
+  },
+  title: {
+    type: String
+  },
+  titlePosition: {
+    type: String,
+    default: 'left',
+    validator: positionValidator
+  },
+  elevation: {
+    type: Boolean,
+    default: true
+  }
+};
+exports.props = props;

package/lib/app-bar/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../appBar.css')
+require('../AppBarSfc.css')

package/lib/app-bar/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../appBar.less')
+require('../AppBarSfc.less')

package/lib/back-top/BackTop.js

@@ -0,0 +1,96 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
+    onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+    type: "primary",
+    round: "",
+    "var-back-top-cover": ""
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {
+      name: "chevron-up"
+    })]),
+    _: 1
+    /* STABLE */
+
+  })])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarBackTop',
+  components: {
+    VarButton: _button.default,
+    VarIcon: _icon.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var element = window;
+    var show = (0, _vue.ref)(false);
+
+    var click = () => {
+      props.onClick == null ? void 0 : props.onClick();
+      var left = (0, _elements.getScrollLeft)(element);
+      (0, _elements.scrollTo)(element, {
+        left,
+        duration: props.duration,
+        animation: _shared.easeInOutCubic
+      });
+    };
+
+    var scroll = () => {
+      show.value = (0, _elements.getScrollTop)(element) >= (0, _shared.toNumber)(props.visibilityHeight);
+    };
+
+    var throttleScroll = (0, _shared.throttle)(scroll, 200);
+
+    var getHTMLElement = () => {
+      if (!(0, _shared.isString)(props.target)) throw Error('[Varlet] BackTop: type of prop "target" should be a string');
+      var el = document.querySelector(props.target);
+      if (!el) throw Error('[Varlet] BackTop: "target" should be a selector');
+      return el;
+    };
+
+    (0, _vue.onMounted)(() => {
+      if (props.target) element = getHTMLElement();
+      element.addEventListener('scroll', throttleScroll);
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      element.removeEventListener('scroll', throttleScroll);
+    });
+    return {
+      show,
+      click
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/back-top/backTop.css

@@ -0,0 +1 @@
+:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}