@varlet/ui 1.23.4-alpha.8 → 1.23.7-alpha.4

package/es/utils/elements.js

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

package/es/utils/shared.js

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

package/highlight/attributes.json

@@ -839,6 +839,10 @@
     "type": "string",
     "description": "loading 的大小，可选值位 `large` `normal` `small` `mini` 默认值：normal"
   },
+  "var-loading/radius": {
+    "type": "string | number",
+    "description": "loading 的类型为`circle`时，可设置其大小 默认值：-"
+  },
   "var-menu/v-model:show": {
     "type": "string",
     "description": "是否显示菜单 默认值：default"

package/highlight/tags.json

@@ -320,7 +320,8 @@
     "attributes": [
       "color",
       "type",
-      "size"
+      "size",
+      "radius"
     ]
   },
   "var-locale": {

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.23.3",
+  "version": "1.23.5",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2534,6 +2534,15 @@
                 "type": "string",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "radius",
+              "description": "loading 的类型为`circle`时，可设置其大小",
+              "default": "-",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],

package/lib/action-sheet/index.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var singletonOptions;
 
 function ActionSheet(options) {
-  if (!_shared.inBrowser) {
+  if (!(0, _shared.inBrowser)()) {
     return Promise.resolve();
   }
 

package/lib/back-top/BackTop.js

@@ -52,7 +52,7 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
-    var element = window;
+    var element;
     var show = (0, _vue.ref)(false);
 
     var click = () => {
@@ -79,7 +79,7 @@ var _default = (0, _vue.defineComponent)({
     };
 
     (0, _vue.onMounted)(() => {
-      if (props.target) element = getHTMLElement();
+      element = props.target ? getHTMLElement() : window;
       element.addEventListener('scroll', throttleScroll);
     });
     (0, _vue.onBeforeUnmount)(() => {

package/lib/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker-title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker-title__year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__year--active { opacity: 1;}.var-date-picker-title__date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__date--active { opacity: 1;}.var-date-picker-title__date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker-body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-year-picker__panel { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__panel li { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__panel--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker-main__color { color: var(--date-picker-main-color);}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker-title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker-title__year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__year--active { opacity: 1;}.var-date-picker-title__date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__date--active { opacity: 1;}.var-date-picker-title__date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker-body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__panel { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__panel li { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__panel--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/lib/date-picker/date-picker.less

@@ -192,6 +192,10 @@
       width: 100%;
       max-width: var(--month-picker-item-button-max-width);
     }
+
+    &__button[var-date-picker-color-cover='true'] {
+      color: var(--date-picker-main-color);
+    }
   }
 
   .var-year-picker {
@@ -250,10 +254,10 @@
       height: var(--day-picker-content-item-button-height);
       font-size: var(--day-picker-content-item-button-font-size);
     }
-  }
 
-  &-main__color {
-    color: var(--date-picker-main-color);
+    &__button[var-date-picker-color-cover='true'] {
+      color: var(--date-picker-main-color);
+    }
   }
 
   &-translatey-enter-from {

package/lib/date-picker/src/day-picker-panel.js

@@ -301,20 +301,20 @@ var _default = (0, _vue.defineComponent)({
         return true;
       };
 
-      var textColorOrClass = () => {
+      var textColorOrCover = () => {
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (dayExist()) return '';
-        return 'var-date-picker-main__color';
+        return 'var-date-picker-color-cover';
       };
 
-      var isClass = textColorOrClass().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith('var-date-picker');
       return {
         disabled,
         text: computeText(),
         outline: computeOutline(),
-        textColor: isClass ? '' : textColorOrClass(),
-        class: isClass ? textColorOrClass() : ''
+        textColor: isCover ? '' : textColorOrCover(),
+        'var-date-picker-color-cover': isCover
       };
     };
 

package/lib/date-picker/src/month-picker-panel.js

@@ -231,21 +231,21 @@ var _default = (0, _vue.defineComponent)({
         return true;
       };
 
-      var textColorOrClass = () => {
+      var textColorOrCover = () => {
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (monthExist()) return '';
-        return 'var-date-picker-main__color';
+        return 'var-date-picker-color-cover';
       };
 
-      var isClass = textColorOrClass().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith('var-date-picker');
       return {
         disabled,
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : '',
-        textColor: isClass ? '' : textColorOrClass(),
-        class: isClass ? textColorOrClass() : ''
+        textColor: isCover ? '' : textColorOrCover(),
+        'var-date-picker-color-cover': isCover
       };
     };
 

package/lib/date-picker/src/panel-header.js

@@ -30,7 +30,6 @@ function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
-    class: (0, _vue.normalizeClass)(_ctx.getClass('left')),
     style: {
       "filter": "opacity(0.54)"
     },
@@ -45,7 +44,7 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["class", "disabled"]), (0, _vue.createElementVNode)("div", {
+  , ["disabled"]), (0, _vue.createElementVNode)("div", {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
@@ -64,7 +63,6 @@ function render(_ctx, _cache) {
   , ["name"])]), (0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
-    class: (0, _vue.normalizeClass)(_ctx.getClass('right')),
     style: {
       "filter": "opacity(0.54)"
     },
@@ -79,7 +77,7 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["class", "disabled"])]);
+  , ["disabled"])]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -126,10 +124,6 @@ var _default = (0, _vue.defineComponent)({
       return _locale.pack.value.lang === 'zh-CN' ? previewYear + " " + monthName : monthName + " " + previewYear;
     });
 
-    var getClass = position => {
-      return props.disabled[position] ? '' : 'var-date-picker-main__color';
-    };
-
     var checkDate = checkType => {
       emit('check-date', checkType);
       reverse.value = checkType === 'prev';
@@ -142,8 +136,7 @@ var _default = (0, _vue.defineComponent)({
     return {
       reverse,
       showDate,
-      checkDate,
-      getClass
+      checkDate
     };
   }
 

package/lib/dialog/index.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var singletonOptions;
 
 function Dialog(options) {
-  if (!_shared.inBrowser) {
+  if (!(0, _shared.inBrowser)()) {
     return Promise.resolve();
   }
 

package/lib/image-preview/index.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var singletonOptions;
 
 function ImagePreview(options) {
-  if (!_shared.inBrowser) {
+  if (!(0, _shared.inBrowser)()) {
     return;
   }
 

package/lib/index.d.ts

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

package/lib/input/Input.js

@@ -26,7 +26,9 @@ var _hoisted_1 = {
   key: 0,
   class: "var-input__autocomplete"
 };
-var _hoisted_2 = ["for"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength", "rows"];
+var _hoisted_3 = ["id", "disabled", "type", "value", "maxlength"];
+var _hoisted_4 = ["for"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -35,7 +37,7 @@ function render(_ctx, _cache) {
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     class: (0, _vue.normalizeClass)(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    onClick: _cache[8] || (_cache[8] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
     style: (0, _vue.normalizeStyle)({
@@ -47,8 +49,9 @@ function render(_ctx, _cache) {
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
-  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.textarea ? 'textarea' : 'input'), {
-    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.textarea ? 'var-input--textarea' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+  }, [_ctx.type === 'password' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true), _ctx.textarea ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("textarea", {
+    key: 1,
+    class: (0, _vue.normalizeClass)(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -62,18 +65,38 @@ function render(_ctx, _cache) {
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
       resize: _ctx.resize ? 'vertical' : 'none'
     }),
-    onFocus: _ctx.handleFocus,
-    onBlur: _ctx.handleBlur,
-    onInput: _ctx.handleInput,
-    onChange: _ctx.handleChange
-  }, null, 8
-  /* PROPS */
-  , ["id", "disabled", "type", "value", "maxlength", "rows", "class", "style", "onFocus", "onBlur", "onInput", "onChange"])), (0, _vue.createElementVNode)("label", {
+    onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+    onInput: _cache[2] || (_cache[2] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+    onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, "\n        ", 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_2)) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("input", {
+    key: 2,
+    class: (0, _vue.normalizeClass)(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    ref: "el",
+    autocomplete: "new-password",
+    id: _ctx.id,
+    disabled: _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+    type: _ctx.type,
+    value: _ctx.modelValue,
+    maxlength: _ctx.maxlength,
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.textColor,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null
+    }),
+    onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+    onInput: _cache[6] || (_cache[6] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
+    onChange: _cache[7] || (_cache[7] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_3)), (0, _vue.createElementVNode)("label", {
     class: (0, _vue.normalizeClass)([_ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]),
     for: _ctx.id
   }, (0, _vue.toDisplayString)(_ctx.placeholder), 11
   /* TEXT, CLASS, PROPS */
-  , _hoisted_2)], 2
+  , _hoisted_4)], 2
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])

package/lib/list/List.js

@@ -90,7 +90,7 @@ var _default = (0, _vue.defineComponent)({
   setup(props) {
     var listEl = (0, _vue.ref)(null);
     var detectorEl = (0, _vue.ref)(null);
-    var scroller = window;
+    var scroller;
 
     var load = () => {
       var _props$onUpdateError, _props$onUpdateLoadi;

package/lib/loading/Loading.js

@@ -37,8 +37,9 @@ function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.type === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.createElementVNode)("span", {
     class: "var-loading__circle-block",
     style: (0, _vue.normalizeStyle)({
-      width: _ctx.toNumber(_ctx.radius) * 2 + 'px',
-      height: _ctx.toNumber(_ctx.radius) * 2 + 'px'
+      width: _ctx.getRadius * 2 + 'px',
+      height: _ctx.getRadius * 2 + 'px',
+      color: _ctx.color
     })
   }, _hoisted_4, 4
   /* STYLE */
@@ -75,16 +76,25 @@ var _default = (0, _vue.defineComponent)({
   name: 'VarLoading',
   props: _props.props,
 
-  setup() {
+  setup(props) {
     var loadingTypeDict = {
       wave: 5,
       cube: 4,
       rect: 8,
       disappear: 3
     };
+    var sizeDict = {
+      mini: 9,
+      small: 12,
+      normal: 15,
+      large: 18
+    };
+    var getRadius = (0, _vue.computed)(() => {
+      return props.radius ? (0, _shared.toNumber)(props.radius) : sizeDict[props.size];
+    });
     return {
       loadingTypeDict,
-      toNumber: _shared.toNumber
+      getRadius
     };
   }
 

package/lib/loading/props.js

@@ -21,8 +21,7 @@ var props = {
     validator: typeValidator
   },
   radius: {
-    type: [String, Number],
-    default: 15
+    type: [String, Number]
   },
   // loading尺寸
   size: {

package/lib/popup/Popup.js

@@ -1,7 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
-exports.render = render;
 exports.default = void 0;
 
 var _vue = require("vue");
@@ -14,68 +13,25 @@ var _zIndex = require("../context/zIndex");
 
 var _components = require("../utils/components");
 
+
+
+
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
-    to: _ctx.teleport,
-    disabled: !_ctx.teleport || _ctx.disabled
-  }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-fade",
-    onAfterEnter: _ctx.onOpened,
-    onAfterLeave: _ctx.onClosed
-  }, {
-    default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
-      class: "var--box var-popup",
-      style: (0, _vue.normalizeStyle)({
-        zIndex: _ctx.zIndex - 2
-      })
-    }, [_ctx.overlay ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      key: 0,
-      class: (0, _vue.normalizeClass)(["var-popup__overlay", [_ctx.overlayClass]]),
-      style: (0, _vue.normalizeStyle)(_extends({
-        zIndex: _ctx.zIndex - 1
-      }, _ctx.overlayStyle)),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.hidePopup && _ctx.hidePopup(...args))
-    }, null, 6
-    /* CLASS, STYLE */
-    )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_vue.Transition, {
-      name: _ctx.transition ? _ctx.transition : "var-pop-" + _ctx.position
-    }, {
-      default: (0, _vue.withCtx)(() => [_ctx.show ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
-        key: 0,
-        class: ["var-popup__content var-elevation--3", ["var-popup--" + _ctx.position]],
-        style: {
-          zIndex: _ctx.zIndex
-        }
-      }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default")], 16
-      /* FULL_PROPS */
-      )) : (0, _vue.createCommentVNode)("v-if", true)]),
-      _: 3
-      /* FORWARDED */
-
-    }, 8
-    /* PROPS */
-    , ["name"])], 4
-    /* STYLE */
-    ), [[_vue.vShow, _ctx.show]])]),
-    _: 3
-    /* FORWARDED */
-
-  }, 8
-  /* PROPS */
-  , ["onAfterEnter", "onAfterLeave"])], 8
-  /* PROPS */
-  , ["to", "disabled"]);
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
 }
 
 var _default = (0, _vue.defineComponent)({
-  render,
   name: 'VarPopup',
   inheritAttrs: false,
   props: _props.props,
 
-  setup(props) {
+  setup(props, {
+    slots,
+    attrs
+  }) {
     var {
       zIndex
     } = (0, _zIndex.useZIndex)(() => props.show, 3);
@@ -109,10 +65,74 @@ var _default = (0, _vue.defineComponent)({
     }); // internal for Dialog
 
     (0, _components.addRouteListener)(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
-    return {
-      zIndex,
-      disabled,
-      hidePopup
+
+    var renderOverlay = () => {
+      var {
+        overlayClass,
+        overlayStyle
+      } = props;
+      return (0, _vue.createVNode)("div", {
+        "class": ['var-popup__overlay', overlayClass],
+        "style": _extends({
+          zIndex: zIndex.value - 1
+        }, overlayStyle),
+        "onClick": hidePopup
+      }, null);
+    };
+
+    var renderContent = () => {
+      return (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
+        "class": ['var-popup__content', 'var-elevation--3', "var-popup--" + props.position],
+        "style": {
+          zIndex: zIndex.value
+        }
+      }, attrs), [slots.default == null ? void 0 : slots.default()]);
+    };
+
+    var renderPopup = () => {
+      var {
+        onOpened,
+        onClosed,
+        show,
+        overlay,
+        transition,
+        position
+      } = props;
+      return (0, _vue.createVNode)(_vue.Transition, {
+        "name": "var-fade",
+        "onAfterEnter": onOpened,
+        "onAfterLeave": onClosed
+      }, {
+        default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
+          "class": "var--box var-popup",
+          "style": {
+            zIndex: zIndex.value - 2
+          }
+        }, [overlay && renderOverlay(), (0, _vue.createVNode)(_vue.Transition, {
+          "name": transition || "var-pop-" + position
+        }, {
+          default: () => [show && renderContent()]
+        })]), [[_vue.vShow, show]])]
+      });
+    };
+
+    return () => {
+      var {
+        teleport
+      } = props;
+
+      if (teleport) {
+        var _slot;
+
+        return (0, _vue.createVNode)(_vue.Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot(_slot = renderPopup()) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+
+      return renderPopup();
     };
   }
 

package/lib/popup/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = exports._PopupComponent = void 0;
 
-var _Popup = _interopRequireDefault(require("./Popup.js"));
+var _Popup = _interopRequireDefault(require("./Popup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/popup/style/index.js

@@ -1,3 +1,2 @@
 require('../../styles/common.css')
 require('../popup.css')
-require('../PopupSfc.css')

package/lib/popup/style/less.js

@@ -1,3 +1,2 @@
 require('../../styles/common.less')
 require('../popup.less')
-require('../PopupSfc.less')

package/lib/pull-refresh/PullRefresh.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var MAX_DISTANCE = 100;
 var CONTROL_POSITION = -50;
-var scroller = window;
+var scroller;
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");

package/lib/sticky/Sticky.js

@@ -58,7 +58,7 @@ var _default = (0, _vue.defineComponent)({
     var enableCSSMode = (0, _vue.computed)(() => !props.disabled && props.cssMode);
     var enableFixedMode = (0, _vue.computed)(() => !props.disabled && isFixed.value);
     var offsetTop = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.offsetTop));
-    var scroller = window;
+    var scroller;
 
     var handleScroll = () => {
       var {