@varlet/ui 2.9.3-alpha.1679397366672 → 2.9.3-alpha.1679537809832

package/es/button/Button.mjs

@@ -4,7 +4,7 @@ import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import Hover from '../hover/index.mjs';
 import { computed, defineComponent, ref } from 'vue';
 import { props } from './props.mjs';
-import { call, createNamespace } from '../utils/components.mjs';
+import { call, createNamespace, formatElevation } from '../utils/components.mjs';
 import { useButtonGroup } from './provide.mjs';
 import { isArray } from '@varlet/shared';
 var {
@@ -27,7 +27,7 @@ function __render__(_ctx, _cache) {
   var _directive_hover = _resolveDirective("hover");
 
   return _withDirectives((_openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.states.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.states.text, _ctx.n("--text-" + _ctx.states.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.states.type) + " " + _ctx.n("$-elevation--" + _ctx.states.elevation)], [_ctx.states.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.states.outline, _ctx.n('--outline')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.states.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.states.text, _ctx.n("--text-" + _ctx.states.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.states.type) + " " + _ctx.states.elevation], [_ctx.states.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.states.outline, _ctx.n('--outline')])),
     style: _normalizeStyle({
       color: _ctx.states.textColor,
       background: _ctx.states.color
@@ -89,7 +89,7 @@ var __sfc__ = defineComponent({
     var states = computed(() => {
       if (!buttonGroup) {
         return {
-          elevation: 2,
+          elevation: formatElevation(props.elevation, 2),
           type: props.type != null ? props.type : 'default',
           size: props.size != null ? props.size : 'normal',
           color: props.color,
@@ -107,7 +107,7 @@ var __sfc__ = defineComponent({
         mode
       } = buttonGroup;
       return {
-        elevation: 0,
+        elevation: '',
         type: props.type != null ? props.type : type.value,
         size: props.size != null ? props.size : size.value,
         color: props.color != null ? props.color : color.value,

package/es/button/props.mjs

@@ -59,6 +59,10 @@ export var props = {
   textColor: {
     type: String
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
   autoLoading: {
     type: Boolean,
     default: false

package/es/button-group/ButtonGroup.mjs

@@ -1,6 +1,6 @@
 import { computed, defineComponent } from 'vue';
 import { useButtons } from './provide.mjs';
-import { createNamespace } from '../utils/components.mjs';
+import { createNamespace, formatElevation } from '../utils/components.mjs';
 import { props } from './props.mjs';
 var {
   n,
@@ -10,7 +10,7 @@ import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock
 
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.mode, "" + _ctx.n("--mode-" + _ctx.mode)], [_ctx.vertical, _ctx.n('--vertical'), _ctx.n('--horizontal')], [_ctx.mode === 'normal', _ctx.n("$-elevation--" + _ctx.elevation)]))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.mode, "" + _ctx.n("--mode-" + _ctx.mode)], [_ctx.vertical, _ctx.n('--vertical'), _ctx.n('--horizontal')], [_ctx.mode === 'normal', _ctx.formatElevation(_ctx.elevation, 2)]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   );
@@ -35,7 +35,8 @@ var __sfc__ = defineComponent({
     bindButtons(buttonGroupProvider);
     return {
       n,
-      classes
+      classes,
+      formatElevation
     };
   }
 

package/es/button-group/props.mjs

@@ -33,8 +33,8 @@ export var props = {
     validator: modeValidator
   },
   elevation: {
-    type: [Number, String],
-    default: 2
+    type: [Boolean, Number, String],
+    default: true
   },
   vertical: {
     type: Boolean,

package/es/card/Card.mjs

@@ -8,7 +8,7 @@ import VarButton from '../button/index.mjs';
 import { ref, defineComponent, watch, computed, nextTick } from 'vue';
 import { props } from './props.mjs';
 import { doubleRaf, toSizeUnit } from '../utils/elements.mjs';
-import { call, createNamespace } from '../utils/components.mjs';
+import { call, createNamespace, formatElevation } from '../utils/components.mjs';
 import { useZIndex } from '../context/zIndex.mjs';
 import { useLock } from '../context/lock.mjs';
 var {
@@ -31,7 +31,7 @@ function __render__(_ctx, _cache) {
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
     ref: "card",
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.outline, _ctx.n('--outline')], [_ctx.elevation, _ctx.n("$-elevation--" + _ctx.elevation), _ctx.n('$-elevation--1')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.outline, _ctx.n('--outline')], _ctx.formatElevation(_ctx.elevation, 1))),
     style: _normalizeStyle({
       zIndex: _ctx.floated ? _ctx.zIndex : undefined
     }),
@@ -280,6 +280,7 @@ var __sfc__ = defineComponent({
       close,
       showFloatingButtons,
       floated,
+      formatElevation,
       handleClick
     };
   }

package/es/card/props.mjs

@@ -48,7 +48,8 @@ export var props = {
     type: String
   },
   elevation: {
-    type: [Number, String]
+    type: [Boolean, Number, String],
+    default: true
   },
   ripple: {
     type: Boolean,

package/es/collapse/Collapse.mjs

@@ -28,6 +28,7 @@ var __sfc__ = defineComponent({
     } = useCollapseItem();
     var active = computed(() => props.modelValue);
     var offset = computed(() => props.offset);
+    var elevation = computed(() => props.elevation);
 
     var checkValue = () => {
       if (!props.accordion && !isArray(props.modelValue)) {
@@ -115,6 +116,7 @@ var __sfc__ = defineComponent({
     var collapseProvider = {
       active,
       offset,
+      elevation,
       updateItem
     };
     bindCollapseItem(collapseProvider);

package/es/collapse/props.mjs

@@ -11,6 +11,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
   onChange: defineListenerProp(),
   'onUpdate:modelValue': defineListenerProp()
 };

package/es/collapse-item/CollapseItem.mjs

@@ -1,7 +1,7 @@
-import { defineComponent, ref, nextTick, watch, computed } from 'vue';
+import { defineComponent, ref, watch, computed } from 'vue';
 import { nextTickFrame, requestAnimationFrame } from '../utils/elements.mjs';
 import { isArray } from '@varlet/shared';
-import { createNamespace } from '../utils/components.mjs';
+import { createNamespace, formatElevation } from '../utils/components.mjs';
 import { useCollapse } from './provide.mjs';
 import { props } from './props.mjs';
 import VarIcon from '../icon/index.mjs';
@@ -9,7 +9,7 @@ var {
   n,
   classes
 } = createNamespace('collapse-item');
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
@@ -17,6 +17,10 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n('--active')], [_ctx.disabled, _ctx.n('--disable')]))
   }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('shadow'), _ctx.formatElevation(_ctx.elevation, 2)))
+  }, null, 2
+  /* CLASS */
+  ), _createElementVNode("div", {
     class: _normalizeClass(_ctx.n('header')),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggle())
   }, [_createElementVNode("div", {
@@ -52,7 +56,7 @@ function __render__(_ctx, _cache) {
   /* CLASS */
   )], 34
   /* CLASS, HYDRATE_EVENTS */
-  ), [[_vShow, _ctx.show]])], 2
+  ), [[_vShow, _ctx.showContent]])], 2
   /* CLASS */
   );
 }
@@ -73,11 +77,12 @@ var __sfc__ = defineComponent({
     var isInitToTrigger = true; // ensure to trigger transitionend
 
     var contentEl = ref(null);
-    var show = ref(false);
+    var showContent = ref(false);
     var isShow = ref(false);
     var {
       active,
       offset,
+      elevation,
       updateItem
     } = collapse;
     var name = computed(() => props.name);
@@ -99,8 +104,8 @@ var __sfc__ = defineComponent({
     var openPanel = () => {
       if (!contentEl.value) return;
       contentEl.value.style.height = '';
-      show.value = true;
-      nextTick(() => {
+      showContent.value = true;
+      requestAnimationFrame(() => {
         var {
           offsetHeight
         } = contentEl.value;
@@ -134,7 +139,7 @@ var __sfc__ = defineComponent({
 
     var transitionend = () => {
       if (!isShow.value) {
-        show.value = false;
+        showContent.value = false;
       }
 
       ;
@@ -154,12 +159,14 @@ var __sfc__ = defineComponent({
       n,
       start,
       classes,
-      show,
+      showContent,
       isShow,
       offset,
+      elevation,
       toggle,
       contentEl,
-      transitionend
+      transitionend,
+      formatElevation
     };
   }
 

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/fab/Fab.mjs

@@ -1,8 +1,8 @@
 import { mergeProps as _mergeProps, isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
 import Button from '../button/index.mjs';
 import Icon from '../icon/index.mjs';
-import { computed, defineComponent, ref, Teleport, Transition, watch } from 'vue';
-import { useClickOutside } from '@varlet/use';
+import { defineComponent, ref, Teleport, Transition, watch } from 'vue';
+import { useClickOutside, useVModel } from '@varlet/use';
 import { call, createNamespace, flatFragment, useTeleport } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { toNumber } from '@varlet/shared';
@@ -33,22 +33,13 @@ export default defineComponent({
       slots,
       attrs
     } = _ref;
-    var localActive = ref(false);
+    var isActive = useVModel(props, 'active', {
+      emit: (event, value) => call(props['onUpdate:active'], value)
+    });
     var host = ref(null);
     var {
       disabled
     } = useTeleport();
-    var isActive = computed({
-      get() {
-        return localActive.value;
-      },
-
-      set(value) {
-        localActive.value = value;
-        call(props['onUpdate:active'], value);
-      }
-
-    });
 
     var handleClick = (e, value, childrenLength) => {
       e.stopPropagation();
@@ -100,7 +91,8 @@ export default defineComponent({
         "type": props.type,
         "color": props.color,
         "disabled": props.disabled,
-        "round": true
+        "round": true,
+        "elevation": props.elevation
       }, {
         default: () => [_createVNode(Icon, {
           "var-fab-cover": true,
@@ -120,7 +112,7 @@ export default defineComponent({
 
       var children = flatFragment((_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : []);
       return _createVNode("div", _mergeProps({
-        "class": classes(n(), n("--position-" + props.position), n("--direction-" + props.direction), [props.fixed, n('--fixed'), n('--absolute')]),
+        "class": classes(n(), n("--position-" + props.position), n("--direction-" + props.direction), [props.fixed, n('--fixed'), n('--absolute')], [props.safeArea, n('--safe-area')]),
         "style": {
           zIndex: toNumber(props.zIndex),
           top: toSizeUnit(props.top),
@@ -152,11 +144,6 @@ export default defineComponent({
       })]);
     };
 
-    watch(() => props.active, value => {
-      localActive.value = value;
-    }, {
-      immediate: true
-    });
     watch(() => props.trigger, () => {
       isActive.value = false;
     });

package/es/fab/fab.css

@@ -1 +1 @@
-:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}
+:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}.var-fab--safe-area { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);}

package/es/fab/props.mjs

@@ -79,6 +79,14 @@ export var props = {
   right: {
     type: [Number, String]
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   teleport: {
     type: String
   },

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.9.3-alpha.1679397366672'
+const version = '2.9.3-alpha.1679537809832'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.9.3-alpha.1679397366672'
+const version = '2.9.3-alpha.1679537809832'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu/Menu.mjs

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils/components.mjs';
+import { createNamespace, formatElevation } from '../utils/components.mjs';
 import { defineComponent } from 'vue';
 import { props } from './props.mjs';
 import { usePopover } from './usePopover.mjs';
@@ -35,7 +35,7 @@ function __render__(_ctx, _cache) {
         zIndex: _ctx.zIndex,
         width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : undefined
       }),
-      class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " " + _ctx.n('$-elevation--3')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color')], [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)])),
       onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
       onMouseenter: _cache[1] || (_cache[1] = function () {
         return _ctx.handlePopoverMouseenter && _ctx.handlePopoverMouseenter(...arguments);
@@ -88,6 +88,7 @@ var __sfc__ = defineComponent({
       hostSize,
       show,
       zIndex,
+      formatElevation,
       toSizeUnit,
       n,
       classes,

package/es/menu/props.mjs

@@ -46,6 +46,10 @@ export var props = {
     type: Boolean,
     default: false
   },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
   defaultStyle: {
     type: Boolean,
     default: true

package/es/menu/usePopover.mjs

@@ -6,7 +6,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import flip from '@popperjs/core/lib/modifiers/flip';
 import offset from '@popperjs/core/lib/modifiers/offset';
-import { useClickOutside } from '@varlet/use';
+import { useClickOutside, useVModel } from '@varlet/use';
 import { doubleRaf, toPxNum } from '../utils/elements.mjs';
 import { call } from '../utils/components.mjs';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
@@ -15,11 +15,24 @@ import { useZIndex } from '../context/zIndex.mjs';
 export function usePopover(options) {
   var host = ref(null);
   var popover = ref(null);
-  var show = ref(false);
   var hostSize = ref({
     width: 0,
     height: 0
   });
+  var show = useVModel(options, 'show', {
+    passive: true,
+    defaultValue: false,
+
+    emit(event, value) {
+      if (value) {
+        resize();
+        call(options.onOpen);
+      } else {
+        call(options.onClose);
+      }
+    }
+
+  });
   var {
     zIndex
   } = useZIndex(() => show.value, 1);
@@ -261,22 +274,9 @@ export function usePopover(options) {
   };
 
   useClickOutside(host, 'click', handleClickOutside);
-  watch(() => options.show, newValue => {
-    show.value = newValue != null ? newValue : false;
-  }, {
-    immediate: true
-  });
   watch(() => options.offsetX, resize);
   watch(() => options.offsetY, resize);
   watch(() => options.placement, resize);
-  watch(() => show.value, newValue => {
-    if (newValue) {
-      resize();
-      call(options.onOpen);
-    } else {
-      call(options.onClose);
-    }
-  });
   watch(() => options.disabled, close);
   onMounted(() => {
     var _host$value;

package/es/paper/Paper.mjs

@@ -1,6 +1,6 @@
 import Ripple from '../ripple/index.mjs';
 import { defineComponent } from 'vue';
-import { call, createNamespace } from '../utils/components.mjs';
+import { call, createNamespace, formatElevation } from '../utils/components.mjs';
 import { props } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 var {
@@ -13,7 +13,7 @@ function __render__(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.elevation != null, _ctx.n("$-elevation--" + _ctx.elevation)], [_ctx.onClick, _ctx.n('--cursor')], [_ctx.round, _ctx.n('--round')], [_ctx.inline, _ctx.n('$--inline-flex')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.formatElevation(_ctx.elevation, 2), [_ctx.onClick, _ctx.n('--cursor')], [_ctx.round, _ctx.n('--round')], [_ctx.inline, _ctx.n('$--inline-flex')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
@@ -44,6 +44,7 @@ var __sfc__ = defineComponent({
     return {
       n,
       classes,
+      formatElevation,
       toSizeUnit,
       handleClick
     };

package/es/paper/props.mjs

@@ -1,7 +1,8 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
   elevation: {
-    type: [Number, String]
+    type: [Boolean, Number, String],
+    default: false
   },
   ripple: {
     type: Boolean,

package/es/pull-refresh/PullRefresh.mjs

@@ -6,7 +6,7 @@ import VarIcon from '../icon/index.mjs';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { getParentScroller, getScrollTop, getTarget } from '../utils/elements.mjs';
 import { props } from './props.mjs';
-import { toNumber } from '@varlet/shared';
+import { isString, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
 import { useEventListener, useMounted } from '@varlet/use';
 var {
@@ -63,7 +63,7 @@ var __sfc__ = defineComponent({
     var freshNode = ref(null);
     var controlNode = ref(null);
     var startPosition = ref(0);
-    var distance = ref(-999);
+    var distance = ref('-125%');
     var iconName = ref('arrow-down');
     var refreshStatus = ref('default');
     var isEnd = ref(false);
@@ -73,7 +73,7 @@ var __sfc__ = defineComponent({
     var iconHasChanged = ref(true);
     var isTouchable = computed(() => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled);
     var controlStyle = computed(() => ({
-      transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
+      transform: "translate3d(0px, " + (isString(distance.value) ? distance.value : distance.value + "px") + ", 0px) translate(-50%, 0)",
       transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
       background: isSuccess.value ? props.successBgColor : props.bgColor,
       color: isSuccess.value ? props.successColor : props.color
@@ -96,6 +96,13 @@ var __sfc__ = defineComponent({
     };
 
     var touchStart = event => {
+      if (controlPosition.value === 0) {
+        var {
+          width
+        } = controlNode.value.getBoundingClientRect();
+        controlPosition.value = -(width + width * 0.25);
+      }
+
       startY = event.touches[0].clientY;
       deltaY = 0;
     };
@@ -161,14 +168,6 @@ var __sfc__ = defineComponent({
       };
     }();
 
-    var setPosition = () => {
-      var {
-        width
-      } = controlNode.value.getBoundingClientRect();
-      distance.value = -(width + width * 0.25);
-      controlPosition.value = -(width + width * 0.25);
-    };
-
     var setScroller = () => {
       scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value);
     };
@@ -192,10 +191,7 @@ var __sfc__ = defineComponent({
         }, toNumber(props.successDuration));
       }
     });
-    useMounted(() => {
-      setScroller();
-      setPosition();
-    });
+    useMounted(setScroller);
     useEventListener(freshNode, 'touchmove', touchMove);
     return {
       n,