@varlet/ui 1.23.4 → 1.23.5

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.23.5](https://github.com/haoziqaq/varlet/compare/v1.23.4...v1.23.5) (2021-11-21)
+
+
+### Bug Fixes
+
+* **cli:** add module moduleCompatible option in varlet.config.js ([0b1d95f](https://github.com/haoziqaq/varlet/commit/0b1d95fc740a225240ee3f28e06015f4538b2304))
+* **cli:** expose lib folder ([2a8848a](https://github.com/haoziqaq/varlet/commit/2a8848a6f064aa91d56875ba467c46da79589a79))
+* **cli/compile:** add commonjs bundle ([4a424d4](https://github.com/haoziqaq/varlet/commit/4a424d4c066f7de69cbf561a5bc9279862739637))
+* **ui:** dayjs compatible ([3f2289b](https://github.com/haoziqaq/varlet/commit/3f2289bdf39e82529df94fea6fec9dd7739a5c96))
+* **ui/list:** support nuxt ([dd7a71e](https://github.com/haoziqaq/varlet/commit/dd7a71ee37e2eadbacc6febd22949ef664997cb3))
+* **ui/popup,input:** support nuxt ([def81ef](https://github.com/haoziqaq/varlet/commit/def81ef821a8ce679287702316bd98ca363bc7f4))
+* **ui/sticky:** support nuxt ([29c24d6](https://github.com/haoziqaq/varlet/commit/29c24d61a0e91ceb948ff5a3e1bc6eb4c52b416a))
+* compatible nuxt ([d681176](https://github.com/haoziqaq/varlet/commit/d6811763867f44731544c8c218e5368896aab6b1))
+
+
+
+
+
 ## [1.23.4](https://github.com/haoziqaq/varlet/compare/v1.23.3...v1.23.4) (2021-11-21)
 
 

package/es/action-sheet/index.js

@@ -5,7 +5,7 @@ import { mountInstance } from '../utils/components';
 var singletonOptions;
 
 function ActionSheet(options) {
-  if (!inBrowser) {
+  if (!inBrowser()) {
     return Promise.resolve();
   }
 

package/es/back-top/BackTop.js

@@ -38,7 +38,7 @@ export default defineComponent({
   props,
 
   setup(props) {
-    var element = window;
+    var element;
     var show = ref(false);
 
     var click = () => {
@@ -65,7 +65,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      if (props.target) element = getHTMLElement();
+      element = props.target ? getHTMLElement() : window;
       element.addEventListener('scroll', throttleScroll);
     });
     onBeforeUnmount(() => {

package/es/dialog/index.js

@@ -5,7 +5,7 @@ import { mountInstance } from '../utils/components';
 var singletonOptions;
 
 function Dialog(options) {
-  if (!inBrowser) {
+  if (!inBrowser()) {
     return Promise.resolve();
   }
 

package/es/image-preview/index.js

@@ -5,7 +5,7 @@ import { mountInstance } from '../utils/components';
 var singletonOptions;
 
 function ImagePreview(options) {
-  if (!inBrowser) {
+  if (!inBrowser()) {
     return;
   }
 

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from '../types'

package/es/input/Input.js

@@ -5,7 +5,7 @@ import { props } from './props';
 import { isEmpty } from '../utils/shared';
 import { useValidation } from '../utils/components';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, createBlock as _createBlock, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createBlock as _createBlock, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -13,7 +13,9 @@ var _hoisted_1 = {
   key: 0,
   class: "var-input__autocomplete"
 };
-var _hoisted_2 = ["for"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength", "rows"];
+var _hoisted_3 = ["id", "disabled", "type", "value", "maxlength"];
+var _hoisted_4 = ["for"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -21,7 +23,7 @@ export function render(_ctx, _cache) {
 
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    onClick: _cache[8] || (_cache[8] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
   }, [_createElementVNode("div", {
     class: _normalizeClass(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
     style: _normalizeStyle({
@@ -33,8 +35,9 @@ export function render(_ctx, _cache) {
   /* CLASS */
   ), _createElementVNode("div", {
     class: _normalizeClass(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
-  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.textarea ? 'textarea' : 'input'), {
-    class: _normalizeClass(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
+    key: 1,
+    class: _normalizeClass(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -48,18 +51,38 @@ export function render(_ctx, _cache) {
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
       resize: _ctx.resize ? 'vertical' : 'none'
     }),
-    onFocus: _ctx.handleFocus,
-    onBlur: _ctx.handleBlur,
-    onInput: _ctx.handleInput,
-    onChange: _ctx.handleChange
-  }, null, 8
-  /* PROPS */
-  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), _createElementVNode("label", {
+    onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+    onInput: _cache[2] || (_cache[2] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+    onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, "\n        ", 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
+    key: 2,
+    class: _normalizeClass(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    ref: "el",
+    autocomplete: "new-password",
+    id: _ctx.id,
+    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+    type: _ctx.type,
+    value: _ctx.modelValue,
+    maxlength: _ctx.maxlength,
+    style: _normalizeStyle({
+      color: _ctx.textColor,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null
+    }),
+    onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+    onInput: _cache[6] || (_cache[6] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+    onChange: _cache[7] || (_cache[7] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_3)), _createElementVNode("label", {
     class: _normalizeClass([_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]),
     for: _ctx.id
   }, _toDisplayString(_ctx.placeholder), 11
   /* TEXT, CLASS, PROPS */
-  , _hoisted_2)], 2
+  , _hoisted_4)], 2
   /* CLASS */
   ), _createElementVNode("div", {
     class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])

package/es/list/List.js

@@ -75,7 +75,7 @@ export default defineComponent({
   setup(props) {
     var listEl = ref(null);
     var detectorEl = ref(null);
-    var scroller = window;
+    var scroller;
 
     var load = () => {
       var _props$onUpdateError, _props$onUpdateLoadi;

package/es/popup/Popup.js

@@ -1,70 +1,28 @@
+import { isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+
 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); }
 
-import { defineComponent, watch } from 'vue';
+import { defineComponent, watch, Transition, Teleport } from 'vue';
 import { props } from './props';
 import { useLock } from '../context/lock';
 import { useZIndex } from '../context/zIndex';
 import { addRouteListener, useTeleport } from '../utils/components';
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, vShow as _vShow, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Teleport as _Teleport, createBlock as _createBlock } from "vue";
-export function render(_ctx, _cache) {
-  return _openBlock(), _createBlock(_Teleport, {
-    to: _ctx.teleport,
-    disabled: !_ctx.teleport || _ctx.disabled
-  }, [_createVNode(_Transition, {
-    name: "var-fade",
-    onAfterEnter: _ctx.onOpened,
-    onAfterLeave: _ctx.onClosed
-  }, {
-    default: _withCtx(() => [_withDirectives(_createElementVNode("div", {
-      class: "var--box var-popup",
-      style: _normalizeStyle({
-        zIndex: _ctx.zIndex - 2
-      })
-    }, [_ctx.overlay ? (_openBlock(), _createElementBlock("div", {
-      key: 0,
-      class: _normalizeClass(["var-popup__overlay", [_ctx.overlayClass]]),
-      style: _normalizeStyle(_extends({
-        zIndex: _ctx.zIndex - 1
-      }, _ctx.overlayStyle)),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.hidePopup && _ctx.hidePopup(...args))
-    }, null, 6
-    /* CLASS, STYLE */
-    )) : _createCommentVNode("v-if", true), _createVNode(_Transition, {
-      name: _ctx.transition ? _ctx.transition : "var-pop-" + _ctx.position
-    }, {
-      default: _withCtx(() => [_ctx.show ? (_openBlock(), _createElementBlock("div", _mergeProps({
-        key: 0,
-        class: ["var-popup__content var-elevation--3", ["var-popup--" + _ctx.position]],
-        style: {
-          zIndex: _ctx.zIndex
-        }
-      }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default")], 16
-      /* FULL_PROPS */
-      )) : _createCommentVNode("v-if", true)]),
-      _: 3
-      /* FORWARDED */
-
-    }, 8
-    /* PROPS */
-    , ["name"])], 4
-    /* STYLE */
-    ), [[_vShow, _ctx.show]])]),
-    _: 3
-    /* FORWARDED */
-
-  }, 8
-  /* PROPS */
-  , ["onAfterEnter", "onAfterLeave"])], 8
-  /* PROPS */
-  , ["to", "disabled"]);
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
+
 export default defineComponent({
-  render,
   name: 'VarPopup',
   inheritAttrs: false,
   props,
 
-  setup(props) {
+  setup(props, {
+    slots,
+    attrs
+  }) {
     var {
       zIndex
     } = useZIndex(() => props.show, 3);
@@ -98,10 +56,74 @@ export default defineComponent({
     }); // internal for Dialog
 
     addRouteListener(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
-    return {
-      zIndex,
-      disabled,
-      hidePopup
+
+    var renderOverlay = () => {
+      var {
+        overlayClass,
+        overlayStyle
+      } = props;
+      return _createVNode("div", {
+        "class": ['var-popup__overlay', overlayClass],
+        "style": _extends({
+          zIndex: zIndex.value - 1
+        }, overlayStyle),
+        "onClick": hidePopup
+      }, null);
+    };
+
+    var renderContent = () => {
+      return _createVNode("div", _mergeProps({
+        "class": ['var-popup__content', 'var-elevation--3', "var-popup--" + props.position],
+        "style": {
+          zIndex: zIndex.value
+        }
+      }, attrs), [slots.default == null ? void 0 : slots.default()]);
+    };
+
+    var renderPopup = () => {
+      var {
+        onOpened,
+        onClosed,
+        show,
+        overlay,
+        transition,
+        position
+      } = props;
+      return _createVNode(Transition, {
+        "name": "var-fade",
+        "onAfterEnter": onOpened,
+        "onAfterLeave": onClosed
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": "var--box var-popup",
+          "style": {
+            zIndex: zIndex.value - 2
+          }
+        }, [overlay && renderOverlay(), _createVNode(Transition, {
+          "name": transition || "var-pop-" + position
+        }, {
+          default: () => [show && renderContent()]
+        })]), [[_vShow, show]])]
+      });
+    };
+
+    return () => {
+      var {
+        teleport
+      } = props;
+
+      if (teleport) {
+        var _slot;
+
+        return _createVNode(Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot(_slot = renderPopup()) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+
+      return renderPopup();
     };
   }
 

package/es/popup/index.js

@@ -1,4 +1,4 @@
-import Popup from './Popup.js'
+import Popup from './Popup';
 
 Popup.install = function (app) {
   app.component(Popup.name, Popup);

package/es/popup/style/index.js

@@ -1,3 +1,2 @@
 import '../../styles/common.css'
 import '../popup.css'
-import '../PopupSfc.css'

package/es/popup/style/less.js

@@ -1,3 +1,2 @@
 import '../../styles/common.less'
 import '../popup.less'
-import '../PopupSfc.less'

package/es/pull-refresh/PullRefresh.js

@@ -5,7 +5,7 @@ import { props } from './props';
 import { toNumber } from '../utils/shared';
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
-var scroller = window;
+var scroller;
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");

package/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/snackbar/style/less.js

@@ -1,8 +1,8 @@
 import '../../styles/common.less'
+import '../SnackbarSfc.less'
 import '../../styles/elevation.less'
 import '../../loading/loading.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../snackbar.less'
 import '../coreSfc.less'
-import '../SnackbarSfc.less'

package/es/sticky/Sticky.js

@@ -48,7 +48,7 @@ export default defineComponent({
     var enableCSSMode = computed(() => !props.disabled && props.cssMode);
     var enableFixedMode = computed(() => !props.disabled && isFixed.value);
     var offsetTop = computed(() => toPxNum(props.offsetTop));
-    var scroller = window;
+    var scroller;
 
     var handleScroll = () => {
       var {

package/es/utils/components.js

@@ -244,4 +244,11 @@ export function useTeleport() {
   return {
     disabled
   };
+}
+export function exposeApis(apis) {
+  var instance = getCurrentInstance();
+
+  if (instance) {
+    Object.assign(instance.proxy, apis);
+  }
 }

package/es/utils/elements.js

@@ -153,10 +153,10 @@ export var toSizeUnit = value => {
   return toPxNum(value) + "px";
 };
 export function requestAnimationFrame(fn) {
-  return window.requestAnimationFrame ? window.requestAnimationFrame(fn) : window.setTimeout(fn, 16);
+  return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
 }
 export function cancelAnimationFrame(handle) {
-  window.cancelAnimationFrame ? window.cancelAnimationFrame(handle) : window.clearTimeout(handle);
+  globalThis.cancelAnimationFrame ? globalThis.cancelAnimationFrame(handle) : globalThis.clearTimeout(handle);
 }
 export function nextTickFrame(fn) {
   requestAnimationFrame(() => {

package/es/utils/shared.js

@@ -138,7 +138,7 @@ export function parseFormat(format, time) {
   return format;
 }
 export var dt = (value, defaultText) => value == null ? defaultText : value;
-export var inBrowser = typeof window !== 'undefined';
+export var inBrowser = () => typeof window !== 'undefined';
 export var uniq = arr => [...new Set(arr)];
 export function kebabCase(str) {
   var reg = /([^-])([A-Z])/g;

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;
+  }
+}