@varlet/ui 2.2.1 → 2.3.0

package/es/style.js

@@ -28,6 +28,7 @@ import './index-anchor/style'
 import './index-bar/style'
 import './input/style'
 import './lazy/style'
+import './link/style'
 import './list/style'
 import './loading/style'
 import './locale/style'

package/es/switch/Switch.js

@@ -36,7 +36,7 @@ export function render(_ctx, _cache) {
     style: _normalizeStyle(_ctx.styleComputed.ripple)
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.handle),
-    class: _normalizeClass(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n('handle'), _ctx.n('$-elevation--2'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
   }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
     radius: _ctx.radius,

package/es/tab/Tab.js

@@ -12,7 +12,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.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
     ref: "tabEl",
     style: _normalizeStyle({
       color: _ctx.computeColorStyle()
@@ -74,7 +74,7 @@ export default defineComponent({
         disabled,
         name
       } = props;
-      return disabled ? 'var-tab--disabled' : active.value === name || active.value === (index == null ? void 0 : index.value) ? 'var-tab--active' : 'var-tab--inactive';
+      return disabled ? n('$-tab--disabled') : active.value === name || active.value === (index == null ? void 0 : index.value) ? n('$-tab--active') : n('$-tab--inactive');
     };
 
     var handleClick = event => {

package/es/table/Table.js

@@ -8,7 +8,7 @@ var {
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var-elevation--1 var--box'))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$-elevation--1'), _ctx.n('$--box')))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('main'))
   }, [_createElementVNode("table", {

package/es/tabs/Tabs.js

@@ -16,11 +16,11 @@ var {
 } = createNamespace('tabs');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, mergeProps as _mergeProps, 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.offsetTop : null
   }, {
     default: _withCtx(() => [_createElementVNode("div", _mergeProps({
-      class: _ctx.classes(_ctx.n(), 'var--box', _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, 'var-elevation--4'], [_ctx.fixedBottom, _ctx.n('--fixed-bottom')], [_ctx.safeArea, _ctx.n('--safe-area')]),
+      class: _ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--item-" + _ctx.itemDirection), _ctx.n("--layout-" + _ctx.layoutDirection + "-padding"), [_ctx.elevation, _ctx.n('$-elevation--4')], [_ctx.fixedBottom, _ctx.n('--fixed-bottom')], [_ctx.safeArea, _ctx.n('--safe-area')]),
       style: {
         background: _ctx.color
       }

package/es/time-picker/TimePicker.js

@@ -25,7 +25,7 @@ export function render(_ctx, _cache) {
   var _component_clock = _resolveComponent("clock");
 
   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')])),
     ref: "picker"
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('title')),

package/es/umdIndex.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 @@ import './index-anchor/style'
 import './index-bar/style'
 import './input/style'
 import './lazy/style'
+import './link/style'
 import './list/style'
 import './loading/style'
 import './locale/style'
@@ -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/uploader/Uploader.js

@@ -37,12 +37,12 @@ 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", {
     class: _normalizeClass(_ctx.n('file-list'))
   }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.files, f => {
     return _withDirectives((_openBlock(), _createElementBlock("div", {
-      class: _normalizeClass(_ctx.classes(_ctx.n('file'), 'var-elevation--2', [f.state === 'loading', _ctx.n('--loading')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n('file'), _ctx.n('$-elevation--2'), [f.state === 'loading', _ctx.n('--loading')])),
       key: f.id,
       onClick: $event => _ctx.preview(f)
     }, [_createElementVNode("div", {
@@ -84,7 +84,7 @@ export function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? _withDirectives((_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes([!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')])),
+    class: _normalizeClass(_ctx.classes([!_ctx.$slots.default, _ctx.n('action') + " " + _ctx.n('$-elevation--2')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')])),
     onClick: _cache[1] || (_cache[1] = function () {
       return _ctx.triggerAction && _ctx.triggerAction(...arguments);
     })

package/es/utils/components.js

@@ -261,11 +261,17 @@ export function exposeApis(apis) {
   }
 }
 export function createNamespace(name) {
-  var namespace = "var-" + name;
+  var namespace = "var";
+  var componentName = namespace + "-" + name;
 
   var createBEM = suffix => {
-    if (!suffix) return namespace;
-    return suffix.startsWith('--') ? "" + namespace + suffix : namespace + "__" + suffix;
+    if (!suffix) return componentName;
+
+    if (suffix[0] === '$') {
+      return suffix.replace('$', namespace);
+    }
+
+    return suffix.startsWith('--') ? "" + componentName + suffix : componentName + "__" + suffix;
   };
 
   var classes = function () {