@varlet/ui 2.2.1-alpha.1668396604067 → 2.3.0

package/es/action-sheet/ActionSheet.js

@@ -42,7 +42,7 @@ export function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }), {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: _ctx.classes(_ctx.n(), 'var--box')
+      class: _ctx.classes(_ctx.n(), _ctx.n('$--box'))
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "title", {}, () => [_createElementVNode("div", {
       class: _normalizeClass(_ctx.n('title'))
     }, _toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 3

package/es/app-bar/AppBar.js

@@ -8,7 +8,7 @@ var {
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--3'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--3')])),
     style: _normalizeStyle({
       background: _ctx.color,
       color: _ctx.textColor

package/es/badge/Badge.js

@@ -18,9 +18,9 @@ export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box'))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
   }, [_createVNode(_Transition, {
-    name: "var-badge-fade"
+    name: _ctx.n('$-badge-fade')
   }, {
     default: _withCtx(() => [_withDirectives(_createElementVNode("span", _mergeProps(_ctx.$attrs, {
       class: _ctx.classes(_ctx.n('content'), ..._ctx.contentClass),
@@ -41,7 +41,9 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  }), _renderSlot(_ctx.$slots, "default")], 2
+  }, 8
+  /* PROPS */
+  , ["name"]), _renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   );
 }

package/es/button/Button.js

@@ -18,7 +18,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', _ctx.n("--" + _ctx.size), [_ctx.block, "var--flex " + _ctx.n('--block'), 'var--inline-flex'], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.text, _ctx.n("--text-" + _ctx.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.type) + " var-elevation--2"], [_ctx.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.outline, _ctx.n('--outline')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.text, _ctx.n("--text-" + _ctx.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.type) + " " + _ctx.n('$-elevation--2')], [_ctx.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.outline, _ctx.n('--outline')])),
     style: _normalizeStyle({
       color: _ctx.textColor,
       background: _ctx.color

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}

package/es/button/props.js

@@ -61,8 +61,7 @@ export var props = {
     default: false
   },
   loadingRadius: {
-    type: [Number, String],
-    default: 12
+    type: [Number, String]
   },
   loadingType: pickProps(loadingProps, 'type'),
   loadingSize: pickProps(loadingProps, 'size'),

package/es/card/Card.js

@@ -30,7 +30,7 @@ export function render(_ctx, _cache) {
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
     ref: "card",
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, _ctx.n("$-elevation--" + _ctx.elevation), _ctx.n('$-elevation--1')])),
     style: _normalizeStyle({
       zIndex: _ctx.floated ? _ctx.zIndex : undefined
     }),
@@ -97,7 +97,7 @@ export function render(_ctx, _cache) {
   /* CLASS */
   ), _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('floating-buttons'), _ctx.n('$--box'))),
     style: _normalizeStyle({
       zIndex: _ctx.zIndex,
       opacity: _ctx.opacity,
@@ -106,7 +106,7 @@ export function render(_ctx, _cache) {
   }, [_renderSlot(_ctx.$slots, "close-button", {}, () => [_createVNode(_component_var_button, {
     "var-card-cover": "",
     round: "",
-    class: _normalizeClass(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('close-button'), _ctx.n('$-elevation--6'))),
     onClick: _withModifiers(_ctx.close, ["stop"])
   }, {
     default: _withCtx(() => [_createVNode(_component_var_icon, {

package/es/cell/Cell.js

@@ -16,7 +16,6 @@ export function render(_ctx, _cache) {
     key: 0,
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.iconClass, _ctx.iconClass]))
   }, [_renderSlot(_ctx.$slots, "icon", {}, () => [_createVNode(_component_var_icon, {
-    class: "var--flex",
     name: _ctx.icon
   }, null, 8
   /* PROPS */

package/es/chip/Chip.js

@@ -11,10 +11,10 @@ export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createBlock(_Transition, {
-    name: "var-fade"
+    name: _ctx.n('$-fade')
   }, {
     default: _withCtx(() => [_createElementVNode("span", _mergeProps({
-      class: _ctx.classes(_ctx.n(), 'var--box', ..._ctx.contentClass),
+      class: _ctx.classes(_ctx.n(), _ctx.n('$--box'), ..._ctx.contentClass),
       style: _ctx.chipStyles
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "left"), _createElementVNode("span", {
       class: _normalizeClass(_ctx.n("text-" + _ctx.size))
@@ -38,7 +38,9 @@ export function render(_ctx, _cache) {
     _: 3
     /* FORWARDED */
 
-  });
+  }, 8
+  /* PROPS */
+  , ["name"]);
 }
 export default defineComponent({
   render,
@@ -77,7 +79,7 @@ export default defineComponent({
         plain,
         round
       } = props;
-      var blockClass = block ? 'var--flex' : 'var--inline-flex';
+      var blockClass = block ? n('$--flex') : n('$--inline-flex');
       var plainTypeClass = plain ? n('plain') + " " + n("plain-" + type) : n("--" + type);
       var roundClass = round ? n('--round') : null;
       return [n("--" + size), blockClass, plainTypeClass, roundClass];

package/es/chip/chip.css

@@ -1 +1 @@
-:root { --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px;}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--font-size-md); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--font-size-lg); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--font-size-sm); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--font-size-xs); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}
+:root { --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}

package/es/col/Col.js

@@ -11,7 +11,7 @@ var {
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.span >= 0, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
     style: _normalizeStyle({
       flexDirection: _ctx.direction,
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),

package/es/counter/Counter.js

@@ -27,9 +27,9 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box'))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
   }, [_createElementVNode("div", _mergeProps({
-    class: _ctx.classes(_ctx.n('controller'), 'var-elevation--2', [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')]),
+    class: _ctx.classes(_ctx.n('controller'), _ctx.n('$-elevation--2'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')]),
     style: {
       background: _ctx.color ? _ctx.color : undefined
     }

package/es/date-picker/DatePicker.js

@@ -22,7 +22,7 @@ export function render(_ctx, _cache) {
   var _component_day_picker_panel = _resolveComponent("day-picker-panel");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--2']))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--2')]))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({

package/es/dialog/Dialog.js

@@ -36,7 +36,7 @@ export function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: _ctx.classes('var--box', _ctx.n(), _ctx.dialogClass),
+      class: _ctx.classes(_ctx.n('$--box'), _ctx.n(), _ctx.dialogClass),
       style: _extends({
         width: _ctx.toSizeUnit(_ctx.width)
       }, _ctx.dialogStyle)

package/es/divider/Divider.js

@@ -12,7 +12,7 @@ var {
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.isInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')], [_ctx.hairline, _ctx.n('--hairline')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.isInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')], [_ctx.hairline, _ctx.n('--hairline')])),
     style: _normalizeStyle(_ctx.style)
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", {
     key: 0,

package/es/image/Image.js

@@ -20,7 +20,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [!_ctx.block, 'var--inline-block'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [!_ctx.block, _ctx.n('$--inline-block')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),

package/es/image-preview/ImagePreview.js

@@ -31,7 +31,7 @@ export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_component_var_popup, {
     class: _normalizeClass(_ctx.n('popup')),
     "var-image-preview-cover": "",
-    transition: "var-fade",
+    transition: _ctx.n('$-fade'),
     show: _ctx.popupShow,
     overlay: false,
     "close-on-click-overlay": false,
@@ -130,7 +130,7 @@ export function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["class", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "transition", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 export default defineComponent({
   render,
@@ -250,7 +250,7 @@ export default defineComponent({
       var {
         naturalWidth,
         naturalHeight
-      } = target.querySelector('.var-image-preview__image');
+      } = target.querySelector("." + n('image'));
       return {
         width: offsetWidth,
         height: offsetHeight,

package/es/index-anchor/IndexAnchor.js

@@ -9,7 +9,7 @@ var {
 } = 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), {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? _ctx.n('$-sticky') : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.stickyOffsetTop : null,
     "z-index": _ctx.sticky ? _ctx.zIndex : null,
     disabled: _ctx.disabled && !_ctx.cssMode,

package/es/index.js

@@ -28,6 +28,7 @@ import IndexAnchor, * as IndexAnchorModule from './index-anchor'
 import IndexBar, * as IndexBarModule from './index-bar'
 import Input, * as InputModule from './input'
 import Lazy, * as LazyModule from './lazy'
+import Link, * as LinkModule from './link'
 import List, * as ListModule from './list'
 import Loading, * as LoadingModule from './loading'
 import Locale, * as LocaleModule from './locale'
@@ -94,6 +95,7 @@ export const _IndexAnchorComponent = IndexAnchorModule._IndexAnchorComponent ||
 export const _IndexBarComponent = IndexBarModule._IndexBarComponent || {}
 export const _InputComponent = InputModule._InputComponent || {}
 export const _LazyComponent = LazyModule._LazyComponent || {}
+export const _LinkComponent = LinkModule._LinkComponent || {}
 export const _ListComponent = ListModule._ListComponent || {}
 export const _LoadingComponent = LoadingModule._LoadingComponent || {}
 export const _LocaleComponent = LocaleModule._LocaleComponent || {}
@@ -162,6 +164,7 @@ function install(app) {
   IndexBar.install && app.use(IndexBar)
   Input.install && app.use(Input)
   Lazy.install && app.use(Lazy)
+  Link.install && app.use(Link)
   List.install && app.use(List)
   Loading.install && app.use(Loading)
   Locale.install && app.use(Locale)
@@ -231,6 +234,7 @@ export {
   IndexBar,
   Input,
   Lazy,
+  Link,
   List,
   Loading,
   Locale,
@@ -300,6 +304,7 @@ export default {
   IndexBar,
   Input,
   Lazy,
+  Link,
   List,
   Loading,
   Locale,

package/es/input/Input.js

@@ -22,7 +22,7 @@ export function render(_ctx, _cache) {
   var _component_var_form_details = _resolveComponent("var-form-details");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[10] || (_cache[10] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
@@ -107,7 +107,7 @@ export function render(_ctx, _cache) {
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_2)), _createElementVNode("label", {
-    class: _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')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('$--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: _normalizeStyle({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),

package/es/link/Link.js

@@ -0,0 +1,102 @@
+import { computed, defineComponent } from 'vue';
+import { props } from './props';
+import { call, createNamespace } from '../utils/components';
+import { toSizeUnit } from '../utils/elements';
+var {
+  n,
+  classes
+} = createNamespace('link');
+import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps(_ctx.linkProps, {
+    class: _ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n('$--inline-flex'), _ctx.n("--" + _ctx.type), [_ctx.underline !== 'none', _ctx.n("--underline-" + _ctx.underline)], [_ctx.disabled, _ctx.n('--disabled')]),
+    style: {
+      color: _ctx.textColor,
+      fontSize: _ctx.toSizeUnit(_ctx.textSize)
+    },
+    onClick: _ctx.handleClick
+  }), {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default")]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  , ["class", "style", "onClick"]);
+}
+export default defineComponent({
+  render,
+  name: 'VarLink',
+  props,
+
+  setup(props) {
+    var tag = computed(() => {
+      if (props.disabled) {
+        return 'span';
+      }
+
+      if (props.href) {
+        return 'a';
+      }
+
+      if (props.to) {
+        return 'router-link';
+      }
+
+      return 'a';
+    });
+    var linkProps = computed(() => {
+      var {
+        disabled,
+        href,
+        target,
+        to,
+        replace
+      } = props;
+
+      if (disabled) {
+        return {};
+      }
+
+      if (href) {
+        return {
+          href,
+          target
+        };
+      }
+
+      if (to) {
+        return {
+          to,
+          target,
+          replace
+        };
+      }
+
+      return {};
+    });
+
+    var handleClick = e => {
+      var {
+        disabled,
+        onClick
+      } = props;
+
+      if (disabled) {
+        return;
+      }
+
+      call(onClick, e);
+    };
+
+    return {
+      n,
+      classes,
+      tag,
+      linkProps,
+      handleClick,
+      toSizeUnit
+    };
+  }
+
+});

package/es/link/index.js

@@ -0,0 +1,8 @@
+import Link from './Link.js'
+
+Link.install = function (app) {
+  app.component(Link.name, Link);
+};
+
+export var _LinkComponent = Link;
+export default Link;

package/es/link/link.css

@@ -0,0 +1 @@
+:root { --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md);}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; color: inherit; text-decoration: none; font-size: var(--link-font-size);}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: inherit;}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}

package/es/link/props.js

@@ -0,0 +1,50 @@
+function typeValidator(type) {
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
+}
+
+function underlineValidator(status) {
+  return ['always', 'hover', 'none'].includes(status);
+}
+
+export var props = {
+  type: {
+    type: String,
+    default: 'default',
+    validator: typeValidator
+  },
+  href: {
+    type: String
+  },
+  target: {
+    type: String
+  },
+  to: {
+    type: [String, Object]
+  },
+  replace: {
+    type: Boolean,
+    default: false
+  },
+  underline: {
+    type: String,
+    default: 'always',
+    validator: underlineValidator
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  textSize: {
+    type: [String, Number]
+  },
+  textColor: {
+    type: String
+  },
+  defaultStyle: {
+    type: Boolean,
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};

package/es/link/style/index.js

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../link.css'
+import '../LinkSfc.css'

package/es/list/List.js

@@ -22,7 +22,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box')),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'))),
     ref: "listEl"
   }, [_renderSlot(_ctx.$slots, "default"), _ctx.loading ? _renderSlot(_ctx.$slots, "loading", {
     key: 0

package/es/loading/Loading.js

@@ -37,7 +37,7 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.isShow ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(_ctx.classes('var--box', _ctx.n('body'), [_ctx.$slots.default, _ctx.n('inside')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n('$--box'), _ctx.n('body'), [_ctx.$slots.default, _ctx.n('inside')]))
   }, [_ctx.type === 'circle' ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: _normalizeClass(_ctx.n('circle'))

package/es/menu/Menu.js

@@ -42,7 +42,7 @@ export function render(_ctx, _cache) {
       style: _normalizeStyle({
         zIndex: _ctx.zIndex
       }),
-      class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " var-elevation--3"])),
+      class: _normalizeClass(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " " + _ctx.n('$-elevation--3')])),
       onClick: _cache[0] || (_cache[0] = _withModifiers(() => {}, ["stop"])),
       onMouseenter: _cache[1] || (_cache[1] = function () {
         return _ctx.handleMenuMouseenter && _ctx.handleMenuMouseenter(...arguments);

package/es/option/Option.js

@@ -15,7 +15,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.optionSelected, _ctx.n('--selected-color')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.optionSelected, _ctx.n('--selected-color')])),
     style: _normalizeStyle({
       width: _ctx.wrapWidth,
       color: _ctx.optionSelected ? _ctx.focusColor : undefined
@@ -41,7 +41,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('text'), 'var--ellipsis'))
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), _ctx.n('$--ellipsis')))
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.label), 1
   /* TEXT */
   )])], 2

package/es/pagination/Pagination.js

@@ -31,7 +31,7 @@ export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("ul", {
     class: _normalizeClass(_ctx.n())
   }, [_withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), 'var-elevation--2'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('prev'), [_ctx.current <= 1 || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.n('$-elevation--2')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickItem('prev'))
   }, [_renderSlot(_ctx.$slots, "prev", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-left"
@@ -65,7 +65,7 @@ export function render(_ctx, _cache) {
     return _withDirectives((_openBlock(), _createElementBlock("li", {
       key: _ctx.toNumber(item) + index,
       "item-mode": _ctx.getMode(item, index),
-      class: _normalizeClass(_ctx.classes(_ctx.n('item'), 'var-elevation--2', [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('$-elevation--2'), [item === _ctx.current && !_ctx.disabled, _ctx.n('item--active')], [_ctx.isHideEllipsis(item, index), _ctx.n('item--hide')], [_ctx.disabled, _ctx.n('item--disabled')], [item === _ctx.current && _ctx.disabled, _ctx.n('item--disabled--active')])),
       onClick: $event => _ctx.clickItem(item, index)
     }, [_createTextVNode(_toDisplayString(item), 1
     /* TEXT */
@@ -77,7 +77,7 @@ export function render(_ctx, _cache) {
   }), 128
   /* KEYED_FRAGMENT */
   )), _withDirectives((_openBlock(), _createElementBlock("li", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), 'var-elevation--2'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('item'), _ctx.n('next'), [_ctx.current >= _ctx.pageCount || _ctx.disabled, _ctx.n('item--disabled')], [_ctx.simple, _ctx.n('item--simple'), _ctx.n('$-elevation--2')])),
     onClick: _cache[4] || (_cache[4] = $event => _ctx.clickItem('next'))
   }, [_renderSlot(_ctx.$slots, "next", {}, () => [_createVNode(_component_var_icon, {
     name: "chevron-right"

package/es/picker/Picker.js

@@ -23,7 +23,7 @@ var _hoisted_2 = ["onTransitionend"];
 export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.dynamic ? 'var-popup' : _ctx.Transition), _mergeProps(_ctx.dynamic ? {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.dynamic ? _ctx.n('$-popup') : _ctx.Transition), _mergeProps(_ctx.dynamic ? {
     onOpen: _ctx.onOpen,
     onOpened: _ctx.onOpened,
     onClose: _ctx.onClose,

package/es/popup/Popup.js

@@ -78,7 +78,7 @@ export default defineComponent({
 
     var renderContent = () => {
       return _createVNode("div", _mergeProps({
-        "class": classes(n('content'), 'var-elevation--3', n("--" + props.position)),
+        "class": classes(n('content'), n('$-elevation--3'), n("--" + props.position)),
         "style": {
           zIndex: zIndex.value
         }
@@ -95,17 +95,17 @@ export default defineComponent({
         position
       } = props;
       return _createVNode(Transition, {
-        "name": "var-fade",
+        "name": n('$-fade'),
         "onAfterEnter": onOpened,
         "onAfterLeave": onClosed
       }, {
         default: () => [_withDirectives(_createVNode("div", {
-          "class": classes('var--box', n()),
+          "class": classes(n('$--box'), n()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [overlay && renderOverlay(), _createVNode(Transition, {
-          "name": transition || "var-pop-" + position
+          "name": transition || n("$-pop-" + position)
         }, {
           default: () => [show && renderContent()]
         })]), [[_vShow, show]])]