@varlet/ui 1.27.0 → 1.27.3

package/lib/tabs/Tabs.js

@@ -34,7 +34,7 @@ function render(_ctx, _cache) {
     "offset-top": _ctx.sticky ? _ctx.offsetTop : null
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.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/lib/tabs/props.js

@@ -56,6 +56,10 @@ var props = {
     type: Boolean,
     default: false
   },
+  safeArea: {
+    type: Boolean,
+    default: false
+  },
   offsetTop: (0, _components.pickProps)(_props.props, 'offsetTop'),
   onClick: {
     type: Function

package/lib/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/lib/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/lib/uploader/Uploader.js

@@ -101,8 +101,12 @@ function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.classes('var--relative', [!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')]))
+    class: (0, _vue.normalizeClass)(_ctx.classes([!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')])),
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.triggerAction && _ctx.triggerAction(...arguments);
+    })
   }, [(0, _vue.createElementVNode)("input", {
+    ref: "input",
     class: (0, _vue.normalizeClass)(_ctx.n('action-input')),
     type: "file",
     multiple: _ctx.multiple,
@@ -136,8 +140,8 @@ function render(_ctx, _cache) {
     "var-uploader-cover": "",
     position: "center",
     show: _ctx.showPreview,
-    "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.showPreview = $event),
-    onClosed: _cache[2] || (_cache[2] = $event => _ctx.currentPreview = null)
+    "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.showPreview = $event),
+    onClosed: _cache[3] || (_cache[3] = $event => _ctx.currentPreview = null)
   }, {
     default: (0, _vue.withCtx)(() => {
       var _ctx$currentPreview, _ctx$currentPreview2;
@@ -180,6 +184,7 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
+    var input = (0, _vue.ref)(null);
     var showPreview = (0, _vue.ref)(false);
     var currentPreview = (0, _vue.ref)(null);
     var maxlengthText = (0, _vue.computed)(() => {
@@ -215,6 +220,10 @@ var _default = (0, _vue.defineComponent)({
       return modelValue;
     });
 
+    var triggerAction = () => {
+      input.value.click();
+    };
+
     var preview = varFile => {
       var {
         disabled,
@@ -433,6 +442,7 @@ var _default = (0, _vue.defineComponent)({
     return {
       n,
       classes,
+      input,
       files,
       showPreview,
       currentPreview,
@@ -443,6 +453,7 @@ var _default = (0, _vue.defineComponent)({
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       preview,
+      triggerAction,
       handleChange,
       handleRemove,
       getSuccess,

package/lib/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;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 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);}
+: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/lib/uploader/uploader.less

@@ -161,6 +161,7 @@
     background: var(--uploader-action-background);
     margin: var(--uploader-action-margin);
     transition: background-color 0.25s;
+    cursor: pointer;
   }
 
   &__action-icon[var-uploader-cover] {
@@ -168,15 +169,10 @@
   }
 
   &__action-input {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    display: block;
+    width: 0;
+    height: 0;
+    visibility: hidden;
   }
 
   &__preview[var-uploader-cover] {
@@ -215,5 +211,6 @@
   &--disabled {
     background: var(--uploader-disabled-color);
     color: var(--uploader-disabled-text-color);
+    cursor: not-allowed;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.27.0",
+  "version": "1.27.3",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,13 +39,13 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.27.0",
+    "@varlet/icons": "1.27.3",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.27.0",
-    "@varlet/touch-emulator": "1.27.0",
+    "@varlet/cli": "1.27.3",
+    "@varlet/touch-emulator": "1.27.3",
     "@vue/test-utils": "2.0.0-rc.6",
     "@vue/runtime-core": "3.2.25",
     "typescript": "^4.4.4",

package/types/bottomNavigation.d.ts

@@ -5,14 +5,15 @@ export interface BottomNavigationProps {
   active?: number | string
   fixed?: boolean
   border?: boolean
+  safeArea?: boolean
   zIndex?: number | string
   activeColor?: string
   inactiveColor?: string
+  fabProps?: Partial<ButtonProps>
   onChange?: (active: string | number) => void
   'onUpdate:active'?: (active: string | number) => void
   onBeforeChange?: (active: string | number) => boolean | Promise<any>
   onFabClick?: () => void
-  fabProps?: ButtonProps
 }
 
 export class BottomNavigation extends VarComponent {

package/types/tabs.d.ts

@@ -13,6 +13,7 @@ export interface TabsProps {
   indicatorSize?: string | number
   elevation?: boolean
   sticky?: boolean
+  safeArea?: boolean
   offsetTop?: string | number
   onClick?: (active: string | number) => void
   onChange?: (active: string | number) => void

package/types/uploader.d.ts

@@ -11,6 +11,12 @@ export interface VarFile {
 
 export type UploaderValidateTriggers = 'onChange' | 'onRemove'
 
+export type UploaderVarFileUtils = {
+  getLoading(): VarFile[]
+  getSuccess(): VarFile[]
+  getError(): VarFile[]
+}
+
 interface UploaderProps {
   modelValue?: VarFile[]
   accept?: string
@@ -25,10 +31,11 @@ interface UploaderProps {
   hideList?: boolean
   ripple?: boolean
   validateTrigger?: Array<UploaderValidateTriggers>
-  rules?: Array<(v: VarFile) => any>
+  rules?: Array<(v: VarFile[], u: UploaderVarFileUtils) => any>
   onBeforeRead?: (file: VarFile) => Promise<boolean> | boolean
   onAfterRead?: (file: VarFile) => any
   onOversize?: (file: VarFile) => any
+  onBeforeRemove?: (file: VarFile) => any
   onRemove?: (file: VarFile) => any
   'onUpdate:modelValue'?: (files: VarFile[]) => any
 }
@@ -36,11 +43,11 @@ interface UploaderProps {
 export class Uploader extends VarComponent {
   $props: UploaderProps
 
-  getLoading(varFiles: VarFile[]): VarFile[]
+  getLoading(): VarFile[]
 
-  getSuccess(varFiles: VarFile[]): VarFile[]
+  getSuccess(): VarFile[]
 
-  getError(varFiles: VarFile[]): VarFile[]
+  getError(): VarFile[]
 
   validate(): Promise<boolean>