@varlet/ui 2.2.1 → 2.3.1

package/highlight/attributes.json

@@ -177,7 +177,7 @@
   },
   "var-button/loading-radius": {
     "type": "string | number",
-    "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时 默认值：12"
+    "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时 默认值：-"
   },
   "var-button/loading-type": {
     "type": "string",
@@ -185,7 +185,7 @@
   },
   "var-button/loading-size": {
     "type": "string",
-    "description": "loading 的尺寸，可选值为 `large` `normal` `small` `mini` 不作用于 `loading-type=\"circle\"` 时 默认值：normal"
+    "description": "loading 的尺寸，可选值为 `large` `normal` `small` `mini` 默认值：normal"
   },
   "var-button/loading-color": {
     "type": "string",
@@ -931,6 +931,42 @@
     "type": "Array<(v: string) => any>",
     "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 默认值：-"
   },
+  "var-link/type": {
+    "type": "string",
+    "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger` 默认值：default"
+  },
+  "var-link/underline": {
+    "type": "string",
+    "description": "下划线状态，可选值为 `always` `hover` `none` 默认值：always"
+  },
+  "var-link/disabled": {
+    "type": "boolean",
+    "description": "禁用状态 默认值：false"
+  },
+  "var-link/text-color": {
+    "type": "string",
+    "description": "文字颜色 默认值：-"
+  },
+  "var-link/text-size": {
+    "type": "string | number",
+    "description": "文字尺寸 默认值：-"
+  },
+  "var-link/href": {
+    "type": "string",
+    "description": "原生 `href` 属性，优先级高于 `to` 默认值：-"
+  },
+  "var-link/target": {
+    "type": "string",
+    "description": "原生 `target` 属性 默认值：-"
+  },
+  "var-link/to": {
+    "type": "string | object",
+    "description": "`router-link` `to` 属性，将会渲染为 `<router-link />` 默认值：-"
+  },
+  "var-link/replace": {
+    "type": "boolean",
+    "description": "`router-link` `replace` 属性 默认值：false"
+  },
   "var-list/v-model:loading": {
     "type": "boolean",
     "description": "加载状态 默认值：false"

package/highlight/tags.json

@@ -346,6 +346,19 @@
   "var-lazy": {
     "attributes": []
   },
+  "var-link": {
+    "attributes": [
+      "type",
+      "underline",
+      "disabled",
+      "text-color",
+      "text-size",
+      "href",
+      "target",
+      "to",
+      "replace"
+    ]
+  },
   "var-list": {
     "attributes": [
       "v-model:loading",

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -548,7 +548,7 @@
             {
               "name": "loading-radius",
               "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时",
-              "default": "12",
+              "default": "-",
               "value": {
                 "type": "string | number",
                 "kind": "expression"
@@ -565,7 +565,7 @@
             },
             {
               "name": "loading-size",
-              "description": "loading 的尺寸，可选值为 `large` `normal` `small` `mini` 不作用于 `loading-type=\"circle\"` 时",
+              "description": "loading 的尺寸，可选值为 `large` `normal` `small` `mini`",
               "default": "normal",
               "value": {
                 "type": "string",
@@ -2768,6 +2768,104 @@
           "events": [],
           "slots": []
         },
+        {
+          "name": "var-link",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger`",
+              "default": "default",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "underline",
+              "description": "下划线状态，可选值为 `always` `hover` `none`",
+              "default": "always",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "禁用状态",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "text-color",
+              "description": "文字颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "text-size",
+              "description": "文字尺寸",
+              "default": "-",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "href",
+              "description": "原生 `href` 属性，优先级高于 `to`",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "target",
+              "description": "原生 `target` 属性",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "to",
+              "description": "`router-link` `to` 属性，将会渲染为 `<router-link />`",
+              "default": "-",
+              "value": {
+                "type": "string | object",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "replace",
+              "description": "`router-link` `replace` 属性",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "点击链接时触发"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "链接内容"
+            }
+          ]
+        },
         {
           "name": "var-list",
           "attributes": [

package/lib/action-sheet/ActionSheet.js

@@ -58,7 +58,7 @@ function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }), {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: _ctx.classes(_ctx.n(), 'var--box')
+      class: _ctx.classes(_ctx.n(), _ctx.n('$--box'))
     }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", {
       class: (0, _vue.normalizeClass)(_ctx.n('title'))
     }, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.actionSheetTitle)), 3

package/lib/app-bar/AppBar.js

@@ -17,7 +17,7 @@ var {
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--3'])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--3')])),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.color,
       color: _ctx.textColor

package/lib/badge/Badge.js

@@ -31,9 +31,9 @@ function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box'))
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-badge-fade"
+    name: _ctx.n('$-badge-fade')
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("span", (0, _vue.mergeProps)(_ctx.$attrs, {
       class: _ctx.classes(_ctx.n('content'), ..._ctx.contentClass),
@@ -54,7 +54,9 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  }), (0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  }, 8
+  /* PROPS */
+  , ["name"]), (0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   );
 }

package/lib/button/Button.js

@@ -31,7 +31,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("button", {
-    class: (0, _vue.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: (0, _vue.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: (0, _vue.normalizeStyle)({
       color: _ctx.textColor,
       background: _ctx.color

package/lib/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/lib/button/props.js

@@ -67,8 +67,7 @@ var props = {
     default: false
   },
   loadingRadius: {
-    type: [Number, String],
-    default: 12
+    type: [Number, String]
   },
   loadingType: (0, _components.pickProps)(_props.props, 'type'),
   loadingSize: (0, _components.pickProps)(_props.props, 'size'),

package/lib/card/Card.js

@@ -47,7 +47,7 @@ function render(_ctx, _cache) {
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     ref: "card",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, _ctx.n("$-elevation--" + _ctx.elevation), _ctx.n('$-elevation--1')])),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.floated ? _ctx.zIndex : undefined
     }),
@@ -114,7 +114,7 @@ function render(_ctx, _cache) {
   /* CLASS */
   ), _ctx.showFloatingButtons ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floating-buttons'), _ctx.n('$--box'))),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.zIndex,
       opacity: _ctx.opacity,
@@ -123,7 +123,7 @@ function render(_ctx, _cache) {
   }, [(0, _vue.renderSlot)(_ctx.$slots, "close-button", {}, () => [(0, _vue.createVNode)(_component_var_button, {
     "var-card-cover": "",
     round: "",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('close-button'), _ctx.n('$-elevation--6'))),
     onClick: (0, _vue.withModifiers)(_ctx.close, ["stop"])
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {

package/lib/cell/Cell.js

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

package/lib/chip/Chip.js

@@ -23,10 +23,10 @@ function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Transition, {
-    name: "var-fade"
+    name: _ctx.n('$-fade')
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("span", (0, _vue.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), [(0, _vue.renderSlot)(_ctx.$slots, "left"), (0, _vue.createElementVNode)("span", {
       class: (0, _vue.normalizeClass)(_ctx.n("text-" + _ctx.size))
@@ -50,7 +50,9 @@ function render(_ctx, _cache) {
     _: 3
     /* FORWARDED */
 
-  });
+  }, 8
+  /* PROPS */
+  , ["name"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -90,7 +92,7 @@ var _default = (0, _vue.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/lib/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/lib/col/Col.js

@@ -23,7 +23,7 @@ var {
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.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: (0, _vue.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: (0, _vue.normalizeStyle)({
       flexDirection: _ctx.direction,
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),

package/lib/counter/Counter.js

@@ -45,9 +45,9 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box'))
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
   }, [(0, _vue.createElementVNode)("div", (0, _vue.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/lib/date-picker/DatePicker.js

@@ -41,7 +41,7 @@ function render(_ctx, _cache) {
   var _component_day_picker_panel = (0, _vue.resolveComponent)("day-picker-panel");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--2']))
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--2')]))
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({

package/lib/dialog/Dialog.js

@@ -52,7 +52,7 @@ function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.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/lib/divider/Divider.js

@@ -23,7 +23,7 @@ var {
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.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: (0, _vue.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: (0, _vue.normalizeStyle)(_ctx.style)
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", {
     key: 0,

package/lib/image/Image.js

@@ -34,7 +34,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [!_ctx.block, 'var--inline-block'])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [!_ctx.block, _ctx.n('$--inline-block')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),

package/lib/image-preview/ImagePreview.js

@@ -47,7 +47,7 @@ function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, {
     class: (0, _vue.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,
@@ -146,7 +146,7 @@ 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"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -267,7 +267,7 @@ var _default = (0, _vue.defineComponent)({
       var {
         naturalWidth,
         naturalHeight
-      } = target.querySelector('.var-image-preview__image');
+      } = target.querySelector("." + n('image'));
       return {
         width: offsetWidth,
         height: offsetHeight,

package/lib/index-anchor/IndexAnchor.js

@@ -22,7 +22,7 @@ var {
 } = (0, _components.createNamespace)('index-anchor');
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.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/lib/index.js

@@ -28,6 +28,7 @@ var IndexAnchor = require('./index-anchor')['default']
 var IndexBar = require('./index-bar')['default']
 var Input = require('./input')['default']
 var Lazy = require('./lazy')['default']
+var Link = require('./link')['default']
 var List = require('./list')['default']
 var Loading = require('./loading')['default']
 var Locale = require('./locale')['default']
@@ -96,6 +97,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)
@@ -166,6 +168,7 @@ module.exports = {
   IndexBar,
   Input,
   Lazy,
+  Link,
   List,
   Loading,
   Locale,

package/lib/input/Input.js

@@ -37,7 +37,7 @@ function render(_ctx, _cache) {
   var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
+    class: (0, _vue.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);
     })
@@ -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.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: (0, _vue.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: (0, _vue.normalizeStyle)({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     }),

package/lib/link/Link.js

@@ -0,0 +1,115 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('link');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.tag), (0, _vue.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: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "default")]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  , ["class", "style", "onClick"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarLink',
+  props: _props.props,
+
+  setup(props) {
+    var tag = (0, _vue.computed)(() => {
+      if (props.disabled) {
+        return 'span';
+      }
+
+      if (props.href) {
+        return 'a';
+      }
+
+      if (props.to) {
+        return 'router-link';
+      }
+
+      return 'a';
+    });
+    var linkProps = (0, _vue.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;
+      }
+
+      (0, _components.call)(onClick, e);
+    };
+
+    return {
+      n,
+      classes,
+      tag,
+      linkProps,
+      handleClick,
+      toSizeUnit: _elements.toSizeUnit
+    };
+  }
+
+});
+
+exports.default = _default;