@varlet/ui 2.9.3-alpha.1679420700979 → 2.9.3-alpha.1679590630449

package/es/app-bar/AppBar.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, onUpdated, computed } from 'vue';
 import { props } from './props.mjs';
-import { createNamespace } from '../utils/components.mjs';
+import { createNamespace, formatElevation } from '../utils/components.mjs';
 import { useMounted } from '@varlet/use';
 var {
   n,
@@ -10,7 +10,7 @@ import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createT
 
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], [_ctx.elevation, _ctx.n('$-elevation--3')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], _ctx.formatElevation(_ctx.elevation, 3))),
     style: _normalizeStyle(_ctx.rootStyles)
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('toolbar'))
@@ -99,6 +99,7 @@ var __sfc__ = defineComponent({
     return {
       n,
       classes,
+      formatElevation,
       rootStyles,
       paddingLeft,
       paddingRight

package/es/app-bar/props.mjs

@@ -18,7 +18,7 @@ export var props = {
     validator: positionValidator
   },
   elevation: {
-    type: Boolean,
+    type: [Boolean, String, Number],
     default: true
   },
   round: {

package/es/back-top/BackTop.mjs

@@ -32,6 +32,7 @@ function __render__(_ctx, _cache) {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     }, ["stop"]))
   }), [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
+    elevation: _ctx.elevation,
     type: "primary",
     round: "",
     "var-back-top-cover": ""
@@ -42,7 +43,9 @@ function __render__(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 16
+  }, 8
+  /* PROPS */
+  , ["elevation"])])], 16
   /* FULL_PROPS */
   )], 8
   /* PROPS */

package/es/back-top/props.mjs

@@ -11,6 +11,10 @@ export var props = {
   right: {
     type: [Number, String]
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
   bottom: {
     type: [Number, String]
   },

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, 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,7 +104,7 @@ var __sfc__ = defineComponent({
     var openPanel = () => {
       if (!contentEl.value) return;
       contentEl.value.style.height = '';
-      show.value = true;
+      showContent.value = true;
       requestAnimationFrame(() => {
         var {
           offsetHeight
@@ -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/counter/Counter.mjs

@@ -8,7 +8,7 @@ import { props } from './props.mjs';
 import { toNumber } from '@varlet/shared';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { useForm } from '../form/provide.mjs';
-import { useValidation, createNamespace, call } from '../utils/components.mjs';
+import { useValidation, createNamespace, call, formatElevation } from '../utils/components.mjs';
 var {
   n,
   classes
@@ -31,7 +31,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
   }, [_createElementVNode("div", _mergeProps({
-    class: _ctx.classes(_ctx.n('controller'), _ctx.n('$-elevation--2'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')]),
+    class: _ctx.classes(_ctx.n('controller'), _ctx.formatElevation(_ctx.elevation, 2), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')]),
     style: {
       background: _ctx.color ? _ctx.color : undefined
     }
@@ -362,6 +362,7 @@ var __sfc__ = defineComponent({
     return {
       n,
       classes,
+      formatElevation,
       inputValue,
       errorMessage,
       formDisabled,

package/es/counter/props.mjs

@@ -26,6 +26,10 @@ export var props = {
   buttonSize: {
     type: [String, Number]
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
   decimalLength: {
     type: [String, Number]
   },

package/es/date-picker/DatePicker.mjs

@@ -6,7 +6,7 @@ import DayPickerPanel from './src/day-picker-panel.mjs';
 import { props, MONTH_LIST, WEEK_HEADER } from './props.mjs';
 import { isArray, toNumber } from '@varlet/shared';
 import { nextTickFrame } from '../utils/elements.mjs';
-import { createNamespace, call } from '../utils/components.mjs';
+import { createNamespace, call, formatElevation } from '../utils/components.mjs';
 import { padStart } from '../utils/shared.mjs';
 import { pack } from '../locale/index.mjs';
 var {
@@ -23,7 +23,7 @@ function __render__(_ctx, _cache) {
   var _component_day_picker_panel = _resolveComponent("day-picker-panel");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--2')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.formatElevation(_ctx.elevation, 2)))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
@@ -191,7 +191,8 @@ var __sfc__ = defineComponent({
       max: props.max,
       showCurrent: props.showCurrent,
       multiple: props.multiple,
-      range: props.range
+      range: props.range,
+      buttonElevation: props.buttonElevation
     });
     var getChoose = computed(() => ({
       chooseMonth: chooseMonth.value,
@@ -538,7 +539,8 @@ var __sfc__ = defineComponent({
       getChooseDay,
       getChooseMonth,
       getChooseYear,
-      checkPreview
+      checkPreview,
+      formatElevation
     };
   }
 

package/es/date-picker/props.mjs

@@ -63,9 +63,13 @@ export var props = {
     type: String
   },
   elevation: {
-    type: Boolean,
+    type: [Boolean, Number, String],
     default: false
   },
+  buttonElevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
   firstDayOfWeek: {
     type: [String, Number],
     default: 0

package/es/date-picker/src/day-picker-panel.mjs

@@ -66,7 +66,8 @@ function __render__(_ctx, _cache) {
         type: "primary",
         "var-day-picker-cover": "",
         round: "",
-        ripple: false
+        ripple: false,
+        elevation: _ctx.componentProps.buttonElevation
       }, _extends({}, _ctx.buttonProps(day)), {
         onClick: event => _ctx.chooseDay(day, event)
       }), {
@@ -78,7 +79,7 @@ function __render__(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["onClick"])]);
+      , ["elevation", "onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
     ))], 2

package/es/date-picker/src/month-picker-panel.mjs

@@ -50,7 +50,8 @@ function __render__(_ctx, _cache) {
       }, [_createVNode(_component_var_button, _mergeProps({
         type: "primary",
         "var-month-picker-cover": "",
-        ripple: false
+        ripple: false,
+        elevation: _ctx.componentProps.buttonElevation
       }, _extends({}, _ctx.buttonProps(month.index)), {
         onClick: event => _ctx.chooseMonth(month, event)
       }), {
@@ -62,7 +63,7 @@ function __render__(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["onClick"])]);
+      , ["elevation", "onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
     ))]))]),

package/es/fab/Fab.mjs

@@ -91,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,
@@ -111,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),

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.1679420700979'
+const version = '2.9.3-alpha.1679590630449'
 
 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.1679420700979'
+const version = '2.9.3-alpha.1679590630449'
 
 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/pagination/Pagination.mjs

@@ -7,7 +7,7 @@ import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props.mjs';
 import { isNumber, toNumber } from '@varlet/shared';
 import { pack } from '../locale/index.mjs';
-import { call, createNamespace } from '../utils/components.mjs';
+import { call, createNamespace, formatElevation } from '../utils/components.mjs';
 var {
   n,
   classes
@@ -32,7 +32,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("ul", {
     class: _normalizeClass(_ctx.n())
   }, [_withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.n('$-elevation--2')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.formatElevation(_ctx.elevation, 2)])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
   }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-left"
@@ -66,7 +66,7 @@ function __render__(_ctx, _cache) {
     return _withDirectives((_openBlock(), _createElementBlock("li", {
       key: _ctx.toNumber(item) + index,
       "item-mode": _ctx.getMode(item, index),
-      class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('$-elevation--2'), [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.formatElevation(_ctx.elevation, 2), [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
       onClick: $event => _ctx.clickItem(item, index)
     }, [_createTextVNode(_toDisplayString(item), 1
     /* TEXT */
@@ -78,7 +78,7 @@ function __render__(_ctx, _cache) {
   }), 128
   /* KEYED_FRAGMENT */
   )), _withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.n('$-elevation--2')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.formatElevation(_ctx.elevation, 2)])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
   }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-right"
@@ -348,7 +348,8 @@ var __sfc__ = defineComponent({
       showMenu,
       clickSize,
       setPage,
-      toNumber
+      toNumber,
+      formatElevation
     };
   }
 

package/es/pagination/props.mjs

@@ -11,6 +11,10 @@ export var props = {
     type: [Number, String],
     default: 0
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
   maxPagerCount: {
     type: Number,
     default: 3

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