@varlet/ui 2.2.1 → 2.3.0

package/lib/style.js

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

package/lib/switch/Switch.js

@@ -52,7 +52,7 @@ function render(_ctx, _cache) {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.ripple)
   }, [(0, _vue.createElementVNode)("div", {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.handle),
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
+    class: (0, _vue.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 ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
     radius: _ctx.radius,

package/lib/tab/Tab.js

@@ -25,7 +25,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.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.computeColorClass(), _ctx.n("--" + _ctx.itemDirection))),
     ref: "tabEl",
     style: (0, _vue.normalizeStyle)({
       color: _ctx.computeColorStyle()
@@ -88,7 +88,7 @@ var _default = (0, _vue.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/lib/table/Table.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(), 'var-elevation--1 var--box'))
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$-elevation--1'), _ctx.n('$--box')))
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('main'))
   }, [(0, _vue.createElementVNode)("table", {

package/lib/tabs/Tabs.js

@@ -32,11 +32,11 @@ var {
 } = (0, _components.createNamespace)('tabs');
 
 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.offsetTop : null
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.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/lib/time-picker/TimePicker.js

@@ -41,7 +41,7 @@ function render(_ctx, _cache) {
   var _component_clock = (0, _vue.resolveComponent)("clock");
 
   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')])),
     ref: "picker"
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('title')),

package/lib/uploader/Uploader.js

@@ -56,12 +56,12 @@ 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", {
     class: (0, _vue.normalizeClass)(_ctx.n('file-list'))
   }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.files, f => {
     return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('file'), 'var-elevation--2', [f.state === 'loading', _ctx.n('--loading')])),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('file'), _ctx.n('$-elevation--2'), [f.state === 'loading', _ctx.n('--loading')])),
       key: f.id,
       onClick: $event => _ctx.preview(f)
     }, [(0, _vue.createElementVNode)("div", {
@@ -103,7 +103,7 @@ function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(_ctx.classes([!_ctx.$slots.default, _ctx.n('action') + " var-elevation--2"], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')])),
+    class: (0, _vue.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/lib/utils/components.js

@@ -295,11 +295,17 @@ function exposeApis(apis) {
 }
 
 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 () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -46,17 +46,15 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@varlet/icons": "2.2.1",
-    "@varlet/shared": "2.2.1",
     "dayjs": "^1.10.4",
-    "decimal.js": "^10.2.1"
+    "decimal.js": "^10.2.1",
+    "@varlet/icons": "2.3.0",
+    "@varlet/shared": "2.3.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.7.18",
-    "@varlet/cli": "2.2.1",
-    "@varlet/touch-emulator": "2.2.1",
     "@vue/runtime-core": "3.2.25",
     "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",
@@ -65,7 +63,9 @@
     "postcss-px-to-viewport": "^1.1.1",
     "typescript": "^4.4.4",
     "vue": "3.2.25",
-    "vue-router": "4.0.12"
+    "vue-router": "4.0.12",
+    "@varlet/cli": "2.3.0",
+    "@varlet/touch-emulator": "2.3.0"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/index.d.ts

@@ -31,6 +31,7 @@ export * from './indexAnchor'
 export * from './indexBar'
 export * from './input'
 export * from './lazy'
+export * from './link'
 export * from './list'
 export * from './loading'
 export * from './locale'
@@ -100,6 +101,7 @@ declare module 'vue' {
     VarIndexBar: typeof import('@varlet/ui')['_IndexBarComponent']
     VarInput: typeof import('@varlet/ui')['_InputComponent']
     VarLazy: typeof import('@varlet/ui')['_LazyComponent']
+    VarLink: typeof import('@varlet/ui')['_LinkComponent']
     VarList: typeof import('@varlet/ui')['_ListComponent']
     VarLoading: typeof import('@varlet/ui')['_LoadingComponent']
     VarLocale: typeof import('@varlet/ui')['_LocaleComponent']

package/types/link.d.ts

@@ -0,0 +1,30 @@
+import { VarComponent, BasicAttributes, Type as LinkType } from './varComponent'
+import { VNode } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type LinkUnderline = 'always' | 'hover' | 'none'
+
+export { LinkType }
+
+export interface LinkProps extends BasicAttributes {
+  type?: LinkType
+  href?: string
+  target?: string
+  to?: RouteLocationRaw
+  replace?: boolean
+  underline?: LinkUnderline
+  disabled?: boolean
+  textColor?: string
+  textSize?: string | number
+  onClick?: (e: Event) => void
+}
+
+export class Link extends VarComponent {
+  $props: LinkProps
+
+  $slots: {
+    default(): VNode[]
+  }
+}
+
+export class _LinkComponent extends Link {}