@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

package/es/image/Image.js

@@ -3,7 +3,12 @@ import Lazy from '../lazy';
 import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('image');
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -15,7 +20,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-image var--box", [!_ctx.block ? 'var--inline-block' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [!_ctx.block, 'var--inline-block'])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
@@ -23,7 +28,7 @@ export function render(_ctx, _cache) {
     })
   }, [_ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
     key: 0,
-    class: "var-image__image",
+    class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
     "lazy-error": _ctx.error,
     "lazy-loading": _ctx.loading,
@@ -39,11 +44,11 @@ export function render(_ctx, _cache) {
     onClick: _cache[2] || (_cache[2] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createElementBlock("img", {
     key: 1,
-    class: "var-image__image",
+    class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
     style: _normalizeStyle({
       objectFit: _ctx.fit
@@ -58,8 +63,8 @@ export function render(_ctx, _cache) {
     onClick: _cache[5] || (_cache[5] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_2))], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
@@ -85,10 +90,10 @@ export default defineComponent({
       } = props;
 
       if (lazy) {
-        el._lazy.state === 'success' && (onLoad == null ? void 0 : onLoad(e));
-        el._lazy.state === 'error' && (onError == null ? void 0 : onError(e));
+        el._lazy.state === 'success' && call(onLoad, e);
+        el._lazy.state === 'error' && call(onError, e);
       } else {
-        onLoad == null ? void 0 : onLoad(e);
+        call(onLoad, e);
       }
     };
 
@@ -97,10 +102,12 @@ export default defineComponent({
         lazy,
         onError
       } = props;
-      !lazy && (onError == null ? void 0 : onError(e));
+      !lazy && call(onError, e);
     };
 
     return {
+      n,
+      classes,
       toSizeUnit,
       handleLoad,
       handleError

package/es/image-preview/ImagePreview.js

@@ -5,22 +5,20 @@ import VarPopup from '../popup';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
+import { call, createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('image-preview');
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-image-preview__indicators"
-};
-var _hoisted_3 = {
-  class: "var-image-preview__extra"
-};
 export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
@@ -31,7 +29,7 @@ export function render(_ctx, _cache) {
   var _component_var_popup = _resolveComponent("var-popup");
 
   return _openBlock(), _createBlock(_component_var_popup, {
-    class: "var-image-preview__popup",
+    class: _normalizeClass(_ctx.n('popup')),
     "var-image-preview-cover": "",
     transition: "var-fade",
     show: _ctx.popupShow,
@@ -46,7 +44,7 @@ export function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }, {
     default: _withCtx(() => [_createVNode(_component_var_swipe, _mergeProps({
-      class: "var-image-preview__swipe",
+      class: _ctx.n('swipe'),
       "var-image-preview-cover": "",
       touchable: _ctx.canSwipe,
       indicator: _ctx.indicator && _ctx.images.length > 1,
@@ -56,12 +54,12 @@ export function render(_ctx, _cache) {
     }, _ctx.$attrs), {
       default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.images, image => {
         return _openBlock(), _createBlock(_component_var_swipe_item, {
-          class: "var-image-preview__swipe-item",
+          class: _normalizeClass(_ctx.n('swipe-item')),
           "var-image-preview-cover": "",
           key: image
         }, {
           default: _withCtx(() => [_createElementVNode("div", {
-            class: "var-image-preview__zoom-container",
+            class: _normalizeClass(_ctx.n('zoom-container')),
             style: _normalizeStyle({
               transform: "scale(" + _ctx.scale + ") translate(" + _ctx.translateX + "px, " + _ctx.translateY + "px)",
               transitionTimingFunction: _ctx.transitionTimingFunction,
@@ -77,20 +75,20 @@ export function render(_ctx, _cache) {
               return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
             })
           }, [_createElementVNode("img", {
-            class: "var-image-preview__image",
+            class: _normalizeClass(_ctx.n('image')),
             src: image,
             alt: image
-          }, null, 8
-          /* PROPS */
-          , _hoisted_1)], 36
-          /* STYLE, HYDRATE_EVENTS */
+          }, null, 10
+          /* CLASS, PROPS */
+          , _hoisted_1)], 38
+          /* CLASS, STYLE, HYDRATE_EVENTS */
           )]),
           _: 2
           /* DYNAMIC */
 
-        }, 1024
-        /* DYNAMIC_SLOTS */
-        );
+        }, 1032
+        /* PROPS, DYNAMIC_SLOTS */
+        , ["class"]);
       }), 128
       /* KEYED_FRAGMENT */
       ))]),
@@ -102,8 +100,11 @@ export function render(_ctx, _cache) {
         return [_renderSlot(_ctx.$slots, "indicator", {
           index: index,
           length: length
-        }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 1
-        /* TEXT */
+        }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createElementBlock("div", {
+          key: 0,
+          class: _normalizeClass(_ctx.n('indicators'))
+        }, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 3
+        /* TEXT, CLASS */
         )) : _createCommentVNode("v-if", true)])];
       }),
       _: 3
@@ -111,21 +112,25 @@ export function render(_ctx, _cache) {
 
     }, 16
     /* FULL_PROPS */
-    , ["touchable", "indicator", "initial-index", "loop", "onChange"]), _renderSlot(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
+    , ["class", "touchable", "indicator", "initial-index", "loop", "onChange"]), _renderSlot(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
       key: 0,
-      class: "var-image-preview__close-icon",
+      class: _normalizeClass(_ctx.n('close-icon')),
       name: "close-circle",
       "var-image-preview-cover": "",
       onClick: _ctx.close
     }, null, 8
     /* PROPS */
-    , ["onClick"])) : _createCommentVNode("v-if", true)]), _createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "extra")])]),
+    , ["class", "onClick"])) : _createCommentVNode("v-if", true)]), _createElementVNode("div", {
+      class: _normalizeClass(_ctx.n('extra'))
+    }, [_renderSlot(_ctx.$slots, "extra")], 2
+    /* CLASS */
+    )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 export default defineComponent({
   render,
@@ -325,19 +330,13 @@ export default defineComponent({
     };
 
     var close = () => {
-      var _props$onUpdateShow2;
-
       if (scale.value > 1) {
         zoomOut();
-        setTimeout(() => {
-          var _props$onUpdateShow;
-
-          return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-        }, ANIMATION_DURATION);
+        setTimeout(() => call(props['onUpdate:show'], false), ANIMATION_DURATION);
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      call(props['onUpdate:show'], false);
     };
 
     watch(() => props.show, newValue => {
@@ -346,6 +345,8 @@ export default defineComponent({
       immediate: true
     });
     return {
+      n,
+      classes,
       initialIndex,
       popupShow,
       scale,

package/es/index-anchor/IndexAnchor.js

@@ -2,6 +2,11 @@ import VarSticky from '../sticky';
 import { computed, defineComponent, ref, Transition } from 'vue';
 import { useIndexBar } from './provide';
 import { props } from './props';
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('index-anchor');
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
@@ -12,7 +17,7 @@ export function render(_ctx, _cache) {
     ref: "anchorEl"
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: "var-index-anchor"
+      class: _ctx.n()
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.name), 1
     /* TEXT */
     )])], 16
@@ -70,6 +75,8 @@ export default defineComponent({
     };
     bindIndexBar(indexAnchorProvider);
     return {
+      n,
+      classes,
       name,
       anchorEl,
       active,

package/es/index-bar/IndexBar.js

@@ -7,18 +7,22 @@ import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
 import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('index-bar');
 import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-index-bar",
-  ref: "barEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 export function render(_ctx, _cache) {
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("ul", {
-    class: "var-index-bar__anchor-list",
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n()),
+    ref: "barEl"
+  }, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("ul", {
+    class: _normalizeClass(_ctx.n('anchor-list')),
     style: _normalizeStyle({
       zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
       display: _ctx.hideList ? 'none' : 'block'
@@ -26,22 +30,20 @@ export function render(_ctx, _cache) {
   }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.anchorNameList, anchorName => {
     return _openBlock(), _createElementBlock("li", {
       key: anchorName,
-      class: _normalizeClass(["var-index-bar__anchor-item", {
-        'var-index-bar__anchor-item--active': _ctx.active === anchorName
-      }]),
+      class: _normalizeClass(_ctx.classes(_ctx.n('anchor-item'), [_ctx.active === anchorName, _ctx.n('anchor-item--active')])),
       style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
       onClick: $event => _ctx.anchorClick(anchorName)
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 4
-  /* STYLE */
-  )], 512
-  /* NEED_PATCH */
+  ))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
   );
 }
 export default defineComponent({
@@ -77,7 +79,7 @@ export default defineComponent({
       var anchorName = isPlainObject(anchor) ? anchor.name.value : anchor;
       if (anchorName === active.value || anchorName === undefined) return;
       active.value = anchorName;
-      props.onChange == null ? void 0 : props.onChange(anchorName);
+      call(props.onChange, anchorName);
     };
 
     var handleScroll = () => {
@@ -107,7 +109,7 @@ export default defineComponent({
         var {
           offsetTop
         } = barEl.value;
-        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (manualCall) call(props.onClick, anchorName);
         if (anchorName === active.value) return;
         var indexAnchor = indexAnchors.find(_ref2 => {
           var {
@@ -158,11 +160,11 @@ export default defineComponent({
       scroller.value.addEventListener('scroll', handleScroll);
     }));
     onBeforeUnmount(() => {
-      var _scroller$value;
-
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
+      call(scroller.value.removeEventListener, 'scroll', handleScroll);
     });
     return {
+      n,
+      classes,
       barEl,
       active,
       zIndex,

package/es/index.js

@@ -2,6 +2,8 @@ import ActionSheet, * as ActionSheetModule from './action-sheet'
 import AppBar, * as AppBarModule from './app-bar'
 import BackTop, * as BackTopModule from './back-top'
 import Badge, * as BadgeModule from './badge'
+import BottomNavigation, * as BottomNavigationModule from './bottom-navigation'
+import BottomNavigationItem, * as BottomNavigationItemModule from './bottom-navigation-item'
 import Button, * as ButtonModule from './button'
 import Card, * as CardModule from './card'
 import Cell, * as CellModule from './cell'
@@ -65,6 +67,8 @@ export const _ActionSheetComponent = ActionSheetModule._ActionSheetComponent ||
 export const _AppBarComponent = AppBarModule._AppBarComponent || {}
 export const _BackTopComponent = BackTopModule._BackTopComponent || {}
 export const _BadgeComponent = BadgeModule._BadgeComponent || {}
+export const _BottomNavigationComponent = BottomNavigationModule._BottomNavigationComponent || {}
+export const _BottomNavigationItemComponent = BottomNavigationItemModule._BottomNavigationItemComponent || {}
 export const _ButtonComponent = ButtonModule._ButtonComponent || {}
 export const _CardComponent = CardModule._CardComponent || {}
 export const _CellComponent = CellModule._CellComponent || {}
@@ -130,6 +134,8 @@ function install(app) {
   AppBar.install && app.use(AppBar)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
+  BottomNavigation.install && app.use(BottomNavigation)
+  BottomNavigationItem.install && app.use(BottomNavigationItem)
   Button.install && app.use(Button)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
@@ -196,6 +202,8 @@ export {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,
@@ -262,6 +270,8 @@ export default {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,

package/es/input/Input.js

@@ -3,43 +3,48 @@ import VarIcon from '../icon';
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue';
 import { props } from './props';
 import { isEmpty } from '../utils/shared';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useForm } from '../form/provide';
+var {
+  n,
+  classes
+} = createNamespace('input');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createBlock as _createBlock, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  key: 0,
-  class: "var-input__autocomplete"
-};
-var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength", "rows"];
-var _hoisted_3 = ["id", "disabled", "type", "value", "maxlength"];
-var _hoisted_4 = ["for"];
+var _hoisted_1 = ["id", "disabled", "type", "value", "maxlength", "rows"];
+var _hoisted_2 = ["id", "disabled", "type", "value", "maxlength"];
+var _hoisted_3 = ["for"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-input var--box", [_ctx.disabled ? 'var-input--disabled' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[8] || (_cache[8] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-input__controller", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), _createElementVNode("div", {
-    class: _normalizeClass(["var-input__wrap", [!_ctx.hint ? 'var-input--non-hint' : null]])
-  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')]))
+  }, [_ctx.type === 'password' ? (_openBlock(), _createElementBlock("input", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('autocomplete'))
+  }, null, 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
     key: 1,
-    class: _normalizeClass(["var-input__input var-input--textarea", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('input'), _ctx.n('--textarea'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -50,7 +55,7 @@ export function render(_ctx, _cache) {
     rows: _ctx.rows,
     style: _normalizeStyle({
       color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null,
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined,
       resize: _ctx.resize ? 'vertical' : 'none'
     }),
     onFocus: _cache[0] || (_cache[0] = function () {
@@ -67,9 +72,9 @@ export function render(_ctx, _cache) {
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
+  , _hoisted_1)) : (_openBlock(), _createElementBlock("input", {
     key: 2,
-    class: _normalizeClass(["var-input__input", [_ctx.formDisabled || _ctx.disabled ? 'var-input--disabled' : null, _ctx.errorMessage ? 'var-input--caret-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--caret-error')])),
     ref: "el",
     autocomplete: "new-password",
     id: _ctx.id,
@@ -79,7 +84,7 @@ export function render(_ctx, _cache) {
     maxlength: _ctx.maxlength,
     style: _normalizeStyle({
       color: _ctx.textColor,
-      caretColor: !_ctx.errorMessage ? _ctx.focusColor : null
+      caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
     }),
     onFocus: _cache[4] || (_cache[4] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
@@ -95,39 +100,39 @@ export function render(_ctx, _cache) {
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_3)), _createElementVNode("label", {
-    class: _normalizeClass(["var--ellipsis", [_ctx.isFocus ? 'var-input--focus' : null, _ctx.errorMessage ? 'var-input--error' : null, _ctx.textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder', _ctx.computePlaceholderState(), !_ctx.hint ? 'var-input--placeholder-non-hint' : null]]),
+  , _hoisted_2)), _createElementVNode("label", {
+    class: _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')])),
     style: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),
     for: _ctx.id
   }, _toDisplayString(_ctx.placeholder), 15
   /* TEXT, CLASS, STYLE, PROPS */
-  , _hoisted_4)], 2
+  , _hoisted_3)], 2
   /* CLASS */
   ), _createElementVNode("div", {
-    class: _normalizeClass(["var-input__icon", [!_ctx.hint ? 'var-input--non-hint' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.modelValue) ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
-    class: "var-input__clear-icon",
+    class: _normalizeClass(_ctx.n('clear-icon')),
     "var-input-cover": "",
     name: "close-circle",
     size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
-  , ["onClick"])) : _createCommentVNode("v-if", true)])], 2
+  , ["class", "onClick"])) : _createCommentVNode("v-if", true)])], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
   ), _ctx.line ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-input__line", [_ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.blurColor : undefined
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-input__dot", [_ctx.isFocus ? 'var-input--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-input--line-disabled' : null, _ctx.errorMessage ? 'var-input--line-error' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--spread')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: _normalizeStyle({
       background: !_ctx.errorMessage ? _ctx.focusColor : undefined
     })
@@ -203,34 +208,32 @@ export default defineComponent({
       } = props;
 
       if (!hint && !isEmpty(modelValue)) {
-        return 'var-input--placeholder-hidden';
+        return n('--placeholder-hidden');
       }
 
       if (hint && (!isEmpty(modelValue) || isFocus.value)) {
-        return 'var-input--placeholder-hint';
+        return n('--placeholder-hint');
       }
     };
 
     var handleFocus = e => {
       isFocus.value = true;
-      props.onFocus == null ? void 0 : props.onFocus(e);
+      call(props.onFocus, e);
       validateWithTrigger('onFocus');
     };
 
     var handleBlur = e => {
       isFocus.value = false;
-      props.onBlur == null ? void 0 : props.onBlur(e);
+      call(props.onBlur, e);
       validateWithTrigger('onBlur');
     };
 
     var handleInput = e => {
-      var _props$onUpdateModel;
-
       var {
         value
       } = e.target;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
-      props.onInput == null ? void 0 : props.onInput(value, e);
+      call(props['onUpdate:modelValue'], value);
+      call(props.onInput, value, e);
       validateWithTrigger('onInput');
     };
 
@@ -238,13 +241,11 @@ export default defineComponent({
       var {
         value
       } = e.target;
-      props.onChange == null ? void 0 : props.onChange(value, e);
+      call(props.onChange, value, e);
       validateWithTrigger('onChange');
     };
 
     var handleClear = () => {
-      var _props$onUpdateModel2;
-
       var {
         disabled,
         readonly,
@@ -256,8 +257,8 @@ export default defineComponent({
         return;
       }
 
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, '');
-      onClear == null ? void 0 : onClear('');
+      call(props['onUpdate:modelValue'], '');
+      call(onClear, '');
       validateWithTrigger('onClear');
     };
 
@@ -271,15 +272,13 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
       validateWithTrigger('onClick');
     }; // expose
 
 
     var reset = () => {
-      var _props$onUpdateModel3;
-
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, '');
+      call(props['onUpdate:modelValue'], '');
       resetValidation();
     }; // expose
 
@@ -303,7 +302,7 @@ export default defineComponent({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(inputProvider);
+    call(bindForm, inputProvider);
     return {
       el,
       id,
@@ -312,6 +311,8 @@ export default defineComponent({
       maxlengthText,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       isEmpty,
       computePlaceholderState,
       handleFocus,