@varlet/ui 2.1.0 → 2.2.0-alpha.1667670228109

package/lib/checkbox/checkbox.css

@@ -1 +1 @@
-:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color);}.var-checkbox--error { color: var(--checkbox-error-color);}
+:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}

package/lib/counter/Counter.js

@@ -54,7 +54,7 @@ function render(_ctx, _cache) {
   }, _ctx.$attrs), [(0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
     "var-counter-cover": "",
     name: "minus",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--text-disabled') + " " + _ctx.n('--not-allowed')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -66,9 +66,9 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
+    disabled: !_ctx.ripple || _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
   }]]), (0, _vue.withDirectives)((0, _vue.createElementVNode)("input", {
-    class: (0, _vue.normalizeClass)(_ctx.n('input')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('input'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--text-disabled') + " " + _ctx.n('--not-allowed')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.inputWidth),
       fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
@@ -85,7 +85,7 @@ function render(_ctx, _cache) {
   , _hoisted_1), [[_vue.vModelText, _ctx.inputValue]]), (0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
     "var-counter-cover": "",
     name: "plus",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--text-disabled') + " " + _ctx.n('--not-allowed')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -97,7 +97,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
-    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.disableIncrement || !_ctx.incrementButton || _ctx.isMax
+    disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.formDisabled || _ctx.formReadonly || _ctx.disableIncrement || !_ctx.incrementButton || _ctx.isMax
   }]])], 16
   /* FULL_PROPS */
   ), (0, _vue.createVNode)(_component_var_form_details, {

package/lib/counter/counter.css

@@ -1 +1 @@
-:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-text-disabled); --input-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: background-color 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter--disabled { background: var(--counter-disabled-color);}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--color-danger);}
+:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-text-color: var(--color-text-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter--disabled { background: var(--counter-disabled-color); cursor: not-allowed;}.var-counter--text-disabled,.var-counter--text-disabled[var-counter-cover] { color: var(--counter-disabled-text-color);}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}

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

@@ -4,11 +4,11 @@ exports.__esModule = true;
 exports.default = void 0;
 exports.render = render;
 
-var _esm = _interopRequireDefault(require("dayjs/esm"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _isSameOrBefore = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrBefore"));
+var _isSameOrBefore = _interopRequireDefault(require("dayjs/plugin/isSameOrBefore"));
 
-var _isSameOrAfter = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrAfter"));
+var _isSameOrAfter = _interopRequireDefault(require("dayjs/plugin/isSameOrAfter"));
 
 var _panelHeader = _interopRequireDefault(require("./panel-header.js"));
 
@@ -28,9 +28,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-_esm.default.extend(_isSameOrBefore.default);
+_dayjs.default.extend(_isSameOrBefore.default);
 
-_esm.default.extend(_isSameOrAfter.default);
+_dayjs.default.extend(_isSameOrAfter.default);
 
 var {
   n,
@@ -186,8 +186,8 @@ var _default = (0, _vue.defineComponent)({
           previewYear
         }
       } = props;
-      var monthNum = (0, _esm.default)(previewYear + "-" + previewMonth.index).daysInMonth();
-      var firstDayToWeek = (0, _esm.default)(previewYear + "-" + previewMonth.index + "-01").day();
+      var monthNum = (0, _dayjs.default)(previewYear + "-" + previewMonth.index).daysInMonth();
+      var firstDayToWeek = (0, _dayjs.default)(previewYear + "-" + previewMonth.index + "-01").day();
       var index = sortWeekList.value.findIndex(week => week.index === "" + firstDayToWeek);
       days.value = [...Array(index).fill(-1), ...Array.from(Array(monthNum + 1).keys())].filter(value => value);
     };
@@ -206,13 +206,13 @@ var _default = (0, _vue.defineComponent)({
 
       if (max) {
         var date = previewYear + "-" + ((0, _shared.toNumber)(previewMonth.index) + 1);
-        panelBtnDisabled.right = !(0, _esm.default)(date).isSameOrBefore((0, _esm.default)(max), 'month');
+        panelBtnDisabled.right = !(0, _dayjs.default)(date).isSameOrBefore((0, _dayjs.default)(max), 'month');
       }
 
       if (min) {
         var _date = previewYear + "-" + ((0, _shared.toNumber)(previewMonth.index) - 1);
 
-        panelBtnDisabled.left = !(0, _esm.default)(_date).isSameOrAfter((0, _esm.default)(min), 'month');
+        panelBtnDisabled.left = !(0, _dayjs.default)(_date).isSameOrAfter((0, _dayjs.default)(min), 'month');
       }
     };
 
@@ -230,8 +230,8 @@ var _default = (0, _vue.defineComponent)({
       var isBeforeMax = true;
       var isAfterMin = true;
       var previewDate = previewYear + "-" + previewMonth.index + "-" + day;
-      if (max) isBeforeMax = (0, _esm.default)(previewDate).isSameOrBefore((0, _esm.default)(max), 'day');
-      if (min) isAfterMin = (0, _esm.default)(previewDate).isSameOrAfter((0, _esm.default)(min), 'day');
+      if (max) isBeforeMax = (0, _dayjs.default)(previewDate).isSameOrBefore((0, _dayjs.default)(max), 'day');
+      if (min) isAfterMin = (0, _dayjs.default)(previewDate).isSameOrAfter((0, _dayjs.default)(min), 'day');
       return isBeforeMax && isAfterMin;
     };
 
@@ -248,8 +248,8 @@ var _default = (0, _vue.defineComponent)({
 
       if (range) {
         if (!chooseRangeDay.length) return false;
-        var isBeforeMax = (0, _esm.default)(val).isSameOrBefore((0, _esm.default)(chooseRangeDay[1]), 'day');
-        var isAfterMin = (0, _esm.default)(val).isSameOrAfter((0, _esm.default)(chooseRangeDay[0]), 'day');
+        var isBeforeMax = (0, _dayjs.default)(val).isSameOrBefore((0, _dayjs.default)(chooseRangeDay[1]), 'day');
+        var isAfterMin = (0, _dayjs.default)(val).isSameOrAfter((0, _dayjs.default)(chooseRangeDay[0]), 'day');
         return isBeforeMax && isAfterMin;
       }
 

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

@@ -6,11 +6,11 @@ exports.render = render;
 
 var _vue = require("vue");
 
-var _esm = _interopRequireDefault(require("dayjs/esm"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _isSameOrBefore = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrBefore"));
+var _isSameOrBefore = _interopRequireDefault(require("dayjs/plugin/isSameOrBefore"));
 
-var _isSameOrAfter = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrAfter"));
+var _isSameOrAfter = _interopRequireDefault(require("dayjs/plugin/isSameOrAfter"));
 
 var _props = require("../props");
 
@@ -28,9 +28,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-_esm.default.extend(_isSameOrBefore.default);
+_dayjs.default.extend(_isSameOrBefore.default);
 
-_esm.default.extend(_isSameOrAfter.default);
+_dayjs.default.extend(_isSameOrAfter.default);
 
 var {
   n,
@@ -162,8 +162,8 @@ var _default = (0, _vue.defineComponent)({
       var isBeforeMax = true;
       var isAfterMin = true;
       var previewDate = previewYear + "-" + key;
-      if (max) isBeforeMax = (0, _esm.default)(previewDate).isSameOrBefore((0, _esm.default)(max), 'month');
-      if (min) isAfterMin = (0, _esm.default)(previewDate).isSameOrAfter((0, _esm.default)(min), 'month');
+      if (max) isBeforeMax = (0, _dayjs.default)(previewDate).isSameOrBefore((0, _dayjs.default)(max), 'month');
+      if (min) isAfterMin = (0, _dayjs.default)(previewDate).isSameOrAfter((0, _dayjs.default)(min), 'month');
       return isBeforeMax && isAfterMin;
     };
 
@@ -182,8 +182,8 @@ var _default = (0, _vue.defineComponent)({
 
       if (range) {
         if (!chooseRangeMonth.length) return false;
-        var isBeforeMax = (0, _esm.default)(val).isSameOrBefore((0, _esm.default)(chooseRangeMonth[1]), 'month');
-        var isAfterMin = (0, _esm.default)(val).isSameOrAfter((0, _esm.default)(chooseRangeMonth[0]), 'month');
+        var isBeforeMax = (0, _dayjs.default)(val).isSameOrBefore((0, _dayjs.default)(chooseRangeMonth[1]), 'month');
+        var isAfterMin = (0, _dayjs.default)(val).isSameOrAfter((0, _dayjs.default)(chooseRangeMonth[0]), 'month');
         return isBeforeMax && isAfterMin;
       }
 
@@ -281,8 +281,8 @@ var _default = (0, _vue.defineComponent)({
           max
         }
       } = props;
-      if (max) panelBtnDisabled.right = !(0, _esm.default)("" + ((0, _shared.toNumber)(year) + 1)).isSameOrBefore((0, _esm.default)(max), 'year');
-      if (min) panelBtnDisabled.left = !(0, _esm.default)("" + ((0, _shared.toNumber)(year) - 1)).isSameOrAfter((0, _esm.default)(min), 'year');
+      if (max) panelBtnDisabled.right = !(0, _dayjs.default)("" + ((0, _shared.toNumber)(year) + 1)).isSameOrBefore((0, _dayjs.default)(max), 'year');
+      if (min) panelBtnDisabled.left = !(0, _dayjs.default)("" + ((0, _shared.toNumber)(year) - 1)).isSameOrAfter((0, _dayjs.default)(min), 'year');
     }, {
       immediate: true
     });

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

@@ -6,7 +6,7 @@ exports.render = render;
 
 var _vue = require("vue");
 
-var _esm = _interopRequireDefault(require("dayjs/esm"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _shared = require("@varlet/shared");
 
@@ -75,14 +75,14 @@ var _default = (0, _vue.defineComponent)({
       var yearRange = [(0, _shared.toNumber)(preview) + 100, (0, _shared.toNumber)(preview) - 100];
 
       if (max) {
-        var formatMax = (0, _esm.default)(max).format('YYYY-MM-D');
+        var formatMax = (0, _dayjs.default)(max).format('YYYY-MM-D');
         var year = (0, _shared.toNumber)(formatMax.split('-')[0]);
         if (year < yearRange[0] && year > yearRange[1]) yearRange = [year, yearRange[1]];
         if (year <= yearRange[1]) return [year];
       }
 
       if (min) {
-        var formatMin = (0, _esm.default)(min).format('YYYY-MM-D');
+        var formatMin = (0, _dayjs.default)(min).format('YYYY-MM-D');
 
         var _year = (0, _shared.toNumber)(formatMin.split('-')[0]);
 

package/lib/form/index.js

@@ -5,12 +5,18 @@ exports.default = exports._FormComponent = void 0;
 
 var _Form = _interopRequireDefault(require("./Form.js"));
 
+var _components = require("../utils/components");
+
+var _provide = require("./provide");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 _Form.default.install = function (app) {
   app.component(_Form.default.name, _Form.default);
 };
 
+_Form.default.useValidation = _components.useValidation;
+_Form.default.useForm = _provide.useForm;
 var _FormComponent = _Form.default;
 exports._FormComponent = _FormComponent;
 var _default = _Form.default;

package/lib/form-details/FormDetails.js

@@ -14,21 +14,52 @@ var {
   n
 } = (0, _components.createNamespace)('form-details');
 
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  key: 0
+};
+var _hoisted_2 = {
+  key: 0
+};
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Transition, {
     name: _ctx.n()
   }, {
-    default: (0, _vue.withCtx)(() => [_ctx.errorMessage || _ctx.maxlengthText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    default: (0, _vue.withCtx)(() => [_ctx.errorMessage || _ctx.extraMessage ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: 0,
       class: (0, _vue.normalizeClass)(_ctx.n())
     }, [(0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(_ctx.n('message'))
-    }, (0, _vue.toDisplayString)(_ctx.errorMessage), 3
-    /* TEXT, CLASS */
+      class: (0, _vue.normalizeClass)(_ctx.n('error-message'))
+    }, [(0, _vue.createVNode)(_vue.Transition, {
+      name: _ctx.n('message')
+    }, {
+      default: (0, _vue.withCtx)(() => [_ctx.errorMessage ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, (0, _vue.toDisplayString)(_ctx.errorMessage), 1
+      /* TEXT */
+      )) : (0, _vue.createCommentVNode)("v-if", true)]),
+      _: 1
+      /* STABLE */
+
+    }, 8
+    /* PROPS */
+    , ["name"])], 2
+    /* CLASS */
     ), (0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(_ctx.n('length'))
-    }, (0, _vue.toDisplayString)(_ctx.maxlengthText), 3
-    /* TEXT, CLASS */
+      class: (0, _vue.normalizeClass)(_ctx.n('extra-message'))
+    }, [(0, _vue.createVNode)(_vue.Transition, {
+      name: _ctx.n('message')
+    }, {
+      default: (0, _vue.withCtx)(() => [_ctx.extraMessage ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.extraMessage), 1
+      /* TEXT */
+      )) : (0, _vue.createCommentVNode)("v-if", true)]),
+      _: 1
+      /* STABLE */
+
+    }, 8
+    /* PROPS */
+    , ["name"])], 2
+    /* CLASS */
     )], 2
     /* CLASS */
     )) : (0, _vue.createCommentVNode)("v-if", true)]),

package/lib/form-details/formDetails.css

@@ -1 +1 @@
-:root { --form-details-error-color: var(--color-danger); --form-details-length-color: #888; --form-details-margin-top: 6px; --form-details-font-size: 12px; --form-details-message-margin-right: 4px;}.var-form-details-enter-from,.var-form-details-leave-to { opacity: 0; margin-top: 2px !important;}.var-form-details-enter-active,.var-form-details-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details { display: flex; justify-content: space-between; font-size: var(--form-details-font-size); margin-top: var(--form-details-margin-top);}.var-form-details__message { flex-grow: 1; color: var(--form-details-error-color); margin-right: var(--form-details-message-margin-right); user-select: none; text-align: left;}.var-form-details__length { flex-shrink: 0; color: var(--form-details-length-color); user-select: none; text-align: right;}
+:root { --form-details-error-message-color: var(--color-danger); --form-details-extra-message-color: #888; --form-details-margin-top: 6px; --form-details-font-size: 12px; --form-details-message-margin-right: 4px;}.var-form-details { display: flex; justify-content: space-between; font-size: var(--form-details-font-size); margin-top: var(--form-details-margin-top);}.var-form-details-enter-from,.var-form-details-leave-to { opacity: 0; margin-top: 2px !important;}.var-form-details-enter-active,.var-form-details-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details__message-enter-from,.var-form-details__message-leave-to { opacity: 0;}.var-form-details__message-enter-active,.var-form-details__message-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details__error-message { flex-grow: 1; color: var(--form-details-error-message-color); margin-right: var(--form-details-message-margin-right); user-select: none; text-align: left;}.var-form-details__extra-message { flex-shrink: 0; color: var(--form-details-extra-message-color); user-select: none; text-align: right;}

package/lib/form-details/props.js

@@ -7,7 +7,7 @@ var props = {
     type: String,
     default: ''
   },
-  maxlengthText: {
+  extraMessage: {
     type: String,
     default: ''
   }

package/lib/index.d.ts

@@ -1 +1 @@
-export * from '..\types'
+export * from '../types'

package/lib/input/Input.js

@@ -122,7 +122,7 @@ function render(_ctx, _cache) {
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_2)), (0, _vue.createElementVNode)("label", {
-    class: (0, _vue.normalizeClass)(_ctx.classes('var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.textarea, _ctx.n('textarea-placeholder'), _ctx.n('placeholder')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes('var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.textarea, _ctx.n('textarea-placeholder'), _ctx.n('placeholder')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
     style: (0, _vue.normalizeStyle)({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),
@@ -163,10 +163,10 @@ function render(_ctx, _cache) {
   /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
-    "maxlength-text": _ctx.maxlengthText
+    "extra-message": _ctx.maxlengthText
   }, null, 8
   /* PROPS */
-  , ["error-message", "maxlength-text"])], 2
+  , ["error-message", "extra-message"])], 2
   /* CLASS */
   );
 }

package/lib/input/input.css

@@ -1 +1 @@
-:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; width: 100%; transform-origin: left; transition-property: transform, width; transition-duration: 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}
+:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition: top 0.3s, transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; width: 100%; transform-origin: left; transition: transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color); cursor: inherit;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); transition: color 0.25s; font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color); transition: background-color 0.25s;}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { color: var(--input-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}

package/lib/locale/en-US.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
-
-declare const enUS: Pack
-
-export default enUS
+import type { Pack } from '../../types'
+
+declare const enUS: Pack
+
+export default enUS

package/lib/locale/zh-CN.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
-
-declare const zhCN: Pack
-
-export default zhCN
+import type { Pack } from '../../types'
+
+declare const zhCN: Pack
+
+export default zhCN

package/lib/radio/radio.css

@@ -1 +1 @@
-:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color);}.var-radio--error { color: var(--radio-error-color);}
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}

package/lib/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-margin: 8px 0 0 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; margin: var(--select-scroller-margin);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-margin: 8px 0 0 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; margin: var(--select-scroller-margin); transition: background-color 0.25s;}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition: top 0.3s, transform 0.3s, width 0.3s, color 0.25s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color); transition: background-color 0.25s;}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}