@varlet/ui 1.27.1 → 1.27.4

package/es/tabs/Tabs.js

@@ -19,7 +19,7 @@ export function render(_ctx, _cache) {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: _ctx.classes(_ctx.n(), 'var--box', _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, 'var-elevation--4'], [_ctx.fixedBottom, _ctx.n('--fixed-bottom')]),
+      class: _ctx.classes(_ctx.n(), 'var--box', _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, 'var-elevation--4'], [_ctx.fixedBottom, _ctx.n('--fixed-bottom')], [_ctx.safeArea, _ctx.n('--safe-area')]),
       style: {
         background: _ctx.color
       }

package/es/tabs/props.js

@@ -50,6 +50,10 @@ export var props = {
     type: Boolean,
     default: false
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   offsetTop: pickProps(stickyProps, 'offsetTop'),
   onClick: {
     type: Function

package/es/tabs/tabs.css

@@ -1 +1 @@
-:root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { position: absolute; z-index: 10; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}
+:root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { position: absolute; z-index: 10; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}.var-tabs--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}

package/es/tabs/tabs.less

@@ -90,4 +90,10 @@
     bottom: 0;
     z-index: 99;
   }
+
+  &--safe-area {
+    padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
+    padding-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
+    box-sizing: content-box !important;
+  }
 }

package/es/uploader/Uploader.js

@@ -88,8 +88,8 @@ export function render(_ctx, _cache) {
       return _ctx.triggerAction && _ctx.triggerAction(...arguments);
     })
   }, [_createElementVNode("input", {
-    class: _normalizeClass(_ctx.n('action-input')),
     ref: "input",
+    class: _normalizeClass(_ctx.n('action-input')),
     type: "file",
     multiple: _ctx.multiple,
     accept: _ctx.accept,
@@ -165,7 +165,7 @@ export default defineComponent({
   props,
 
   setup(props) {
-    var input = ref();
+    var input = ref(null);
     var showPreview = ref(false);
     var currentPreview = ref(null);
     var maxlengthText = computed(() => {
@@ -433,8 +433,8 @@ export default defineComponent({
       isHTMLSupportImage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
-      triggerAction,
       preview,
+      triggerAction,
       handleChange,
       handleRemove,
       getSuccess,

package/es/uploader/uploader.css

@@ -1 +1 @@
-:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); transition: all 0.25s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; z-index: 1; width: 0; height: 0; opacity: 0;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}
+:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); transition: all 0.25s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}

package/es/uploader/uploader.less

@@ -170,10 +170,9 @@
 
   &__action-input {
     display: block;
-    z-index: 1;
     width: 0;
     height: 0;
-    opacity: 0;
+    visibility: hidden;
   }
 
   &__preview[var-uploader-cover] {

package/es/varlet.esm.js

@@ -2158,6 +2158,10 @@ var props$M = {
     type: Boolean,
     default: false
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   zIndex: {
     type: [Number, String],
     default: 1
@@ -2230,7 +2234,7 @@ var defaultFabProps = {
 function render$S(_ctx, _cache) {
   var _component_var_button = resolveComponent("var-button");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n("--fixed")], [_ctx.border, _ctx.n("--border")])),
+    class: normalizeClass(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n("--fixed")], [_ctx.border, _ctx.n("--border")], [_ctx.safeArea, _ctx.n("--safe-area")])),
     ref: "bottomNavigationDom",
     style: normalizeStyle("z-index:" + _ctx.zIndex)
   }, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.fab ? (openBlock(), createBlock(_component_var_button, mergeProps({
@@ -13019,7 +13023,7 @@ var Rate = defineComponent({
       } = transformValue(val);
       return {
         [n$j("content")]: true,
-        [n$j("--disabled")]: form == null ? void 0 : form.disabled.value,
+        [n$j("--disabled")]: (form == null ? void 0 : form.disabled.value) || props2.disabled,
         [n$j("--error")]: errorMessage.value,
         [n$j("--primary")]: type !== "empty" && !color
       };
@@ -15543,6 +15547,10 @@ var props$3 = {
     type: Boolean,
     default: false
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   offsetTop: pickProps(props$s, "offsetTop"),
   onClick: {
     type: Function
@@ -15592,7 +15600,7 @@ function render$4(_ctx, _cache) {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
     default: withCtx(() => [createElementVNode("div", mergeProps({
-      class: _ctx.classes(_ctx.n(), "var--box", _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, "var-elevation--4"], [_ctx.fixedBottom, _ctx.n("--fixed-bottom")]),
+      class: _ctx.classes(_ctx.n(), "var--box", _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, "var-elevation--4"], [_ctx.fixedBottom, _ctx.n("--fixed-bottom")], [_ctx.safeArea, _ctx.n("--safe-area")]),
       style: {
         background: _ctx.color
       }
@@ -16832,8 +16840,8 @@ function render(_ctx, _cache) {
       return _ctx.triggerAction && _ctx.triggerAction(...arguments);
     })
   }, [createElementVNode("input", {
-    class: normalizeClass(_ctx.n("action-input")),
     ref: "input",
+    class: normalizeClass(_ctx.n("action-input")),
     type: "file",
     multiple: _ctx.multiple,
     accept: _ctx.accept,
@@ -16889,7 +16897,7 @@ var Uploader = defineComponent({
   },
   props,
   setup(props2) {
-    var input2 = ref();
+    var input2 = ref(null);
     var showPreview = ref(false);
     var currentPreview = ref(null);
     var maxlengthText = computed(() => {
@@ -17114,8 +17122,8 @@ var Uploader = defineComponent({
       isHTMLSupportImage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
-      triggerAction,
       preview,
+      triggerAction,
       handleChange,
       handleRemove,
       getSuccess,
@@ -17218,9 +17226,9 @@ var skeleton = "";
 var SkeletonSfc = "";
 var slider = "";
 var SliderSfc = "";
+var SnackbarSfc = "";
 var snackbar = "";
 var coreSfc = "";
-var SnackbarSfc = "";
 var space = "";
 var step = "";
 var StepSfc = "";

package/highlight/attributes.json

@@ -119,6 +119,10 @@
     "type": "boolean",
     "description": "是否显示外边框 默认值：false"
   },
+  "var-bottom-navigation/safe-area": {
+    "type": "boolean",
+    "description": "是否开启底部安全区适配 默认值：false"
+  },
   "var-bottom-navigation/z-index": {
     "type": "number | string",
     "description": "元素 z-index 默认值：1"
@@ -1265,7 +1269,7 @@
   },
   "var-rate/disabled-color": {
     "type": "string",
-    "description": "禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color` 默认值：-"
+    "description": "禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color` 默认值：#aaa"
   },
   "var-rate/readonly": {
     "type": "boolean",
@@ -1699,6 +1703,10 @@
     "type": "boolean",
     "description": "是否启用粘性布局 默认值：false"
   },
+  "var-tabs/safe-area": {
+    "type": "boolean",
+    "description": "是否开启底部安全区适配 默认值：false"
+  },
   "var-tabs/offset-top": {
     "type": "string | number",
     "description": "吸顶距离 默认值：0"

package/highlight/tags.json

@@ -47,6 +47,7 @@
       "v-model:active",
       "fixed",
       "border",
+      "safe-area",
       "z-index",
       "active-color",
       "inactive-color",
@@ -660,6 +661,7 @@
       "indicator-size",
       "elevation",
       "sticky",
+      "safe-area",
       "offset-top"
     ]
   },

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.27.0",
+  "version": "1.27.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -369,6 +369,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "safe-area",
+              "description": "是否开启底部安全区适配",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "z-index",
               "description": "元素 z-index",
@@ -3771,7 +3780,7 @@
             {
               "name": "disabled-color",
               "description": "禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`",
-              "default": "-",
+              "default": "#aaa",
               "value": {
                 "type": "string",
                 "kind": "expression"
@@ -5059,6 +5068,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "safe-area",
+              "description": "是否开启底部安全区适配",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "offset-top",
               "description": "吸顶距离",

package/lib/bottom-navigation/BottomNavigation.js

@@ -38,7 +38,7 @@ function render(_ctx, _cache) {
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n('--fixed')], [_ctx.border, _ctx.n('--border')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n('--fixed')], [_ctx.border, _ctx.n('--border')], [_ctx.safeArea, _ctx.n('--safe-area')])),
     ref: "bottomNavigationDom",
     style: (0, _vue.normalizeStyle)("z-index:" + _ctx.zIndex)
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), _ctx.$slots.fab ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, (0, _vue.mergeProps)({

package/lib/bottom-navigation/bottomNavigation.css

@@ -1 +1 @@
-:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}
+:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}

package/lib/bottom-navigation/bottomNavigation.less

@@ -21,6 +21,11 @@
   transition: background-color 250ms, border-color 250ms;
   -webkit-tap-highlight-color: transparent;
 
+  &--safe-area {
+    padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
+    padding-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
+  }
+
   &--fixed {
     position: fixed;
     left: 0;

package/lib/bottom-navigation/props.js

@@ -15,6 +15,10 @@ var props = {
     type: Boolean,
     default: false
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   zIndex: {
     type: [Number, String],
     default: 1

package/lib/rate/Rate.js

@@ -122,7 +122,7 @@ var _default = (0, _vue.defineComponent)({
       } = transformValue(val);
       return {
         [n('content')]: true,
-        [n('--disabled')]: form == null ? void 0 : form.disabled.value,
+        [n('--disabled')]: (form == null ? void 0 : form.disabled.value) || props.disabled,
         [n('--error')]: errorMessage.value,
         [n('--primary')]: type !== 'empty' && !color
       };

package/lib/rate/rate.css

@@ -1 +1 @@
-:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--disabled { color: var(--rate-disabled-color) !important;}.var-rate--error { color: var(--rate-error-color) !important;}.var-rate--primary { color: var(--rate-primary-color);}
+:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; display: flex; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/lib/rate/rate.less

@@ -18,18 +18,20 @@
     padding: var(--rate-action-padding);
     box-sizing: unset;
     cursor: pointer;
+    display: flex;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  &--disabled {
-    color: var(--rate-disabled-color) !important;
+  &--primary {
+    color: var(--rate-primary-color);
   }
 
-  &--error {
-    color: var(--rate-error-color) !important;
+  &--disabled {
+    color: var(--rate-disabled-color);
+    cursor: not-allowed;
   }
 
-  &--primary {
-    color: var(--rate-primary-color);
+  &--error {
+    color: var(--rate-error-color);
   }
 }