@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/bottom-navigation-item/BottomNavigationItem.js

@@ -0,0 +1,122 @@
+import { defineComponent, computed, ref, watch } from 'vue';
+import { props } from './props';
+import Ripple from '../ripple';
+import VarBadge from '../badge';
+import VarIcon from '../icon';
+import { useBottomNavigation } from './provide';
+import { createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('bottom-navigation-item');
+var defaultBadgeProps = {
+  type: 'danger',
+  dot: true
+};
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
+export function render(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  var _component_var_badge = _resolveComponent("var-badge");
+
+  var _directive_ripple = _resolveDirective("ripple");
+
+  return _withDirectives((_openBlock(), _createElementBlock("button", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n('--active')])),
+    style: _normalizeStyle({
+      color: _ctx.computeColorStyle()
+    }),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_ctx.icon && !_ctx.$slots.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+    key: 0,
+    name: _ctx.icon,
+    namespace: _ctx.namespace,
+    class: _normalizeClass(_ctx.n('icon')),
+    "var-bottom-navigation-item-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["name", "namespace", "class"])) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "icon", {
+    active: _ctx.active === _ctx.index || _ctx.active === _ctx.name
+  }), _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({
+    key: 1
+  }, _ctx.badgeProps, {
+    class: _ctx.n('badge'),
+    "var-bottom-navigation-item-cover": ""
+  }), null, 16
+  /* FULL_PROPS */
+  , ["class"])) : _createCommentVNode("v-if", true), _createElementVNode("span", {
+    class: _normalizeClass(_ctx.n('label'))
+  }, [!_ctx.$slots.default ? (_openBlock(), _createElementBlock(_Fragment, {
+    key: 0
+  }, [_createTextVNode(_toDisplayString(_ctx.label), 1
+  /* TEXT */
+  )], 2112
+  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+  )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )), [[_directive_ripple]]);
+}
+export default defineComponent({
+  render,
+  name: 'VarBottomNavigationItem',
+  components: {
+    VarBadge,
+    VarIcon
+  },
+  directives: {
+    Ripple
+  },
+  props,
+
+  setup(props) {
+    var name = computed(() => props.name);
+    var badge = computed(() => props.badge);
+    var badgeProps = ref({});
+    var {
+      index,
+      bottomNavigation,
+      bindBottomNavigation
+    } = useBottomNavigation();
+    var {
+      active,
+      activeColor,
+      inactiveColor
+    } = bottomNavigation;
+    var bottomNavigationItemProvider = {
+      name,
+      index
+    };
+    bindBottomNavigation(bottomNavigationItemProvider);
+
+    var computeColorStyle = () => {
+      return active.value === name.value || active.value === index.value ? activeColor.value : inactiveColor.value;
+    };
+
+    var handleClick = () => {
+      var active = name.value || index.value;
+      call(props.onClick, active);
+      call(bottomNavigation.onToggle, active);
+    };
+
+    watch(() => badge.value, newValue => {
+      badgeProps.value = newValue === true ? defaultBadgeProps : badge.value;
+    }, {
+      immediate: true
+    });
+    return {
+      n,
+      classes,
+      index,
+      active,
+      badge,
+      badgeProps,
+      computeColorStyle,
+      handleClick
+    };
+  }
+
+});

package/es/bottom-navigation-item/bottomNavigationItem.css

@@ -0,0 +1 @@
+:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: #fff; --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px;}.var-bottom-navigation-item { height: 100%; padding: 6px 12px 8px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: var(--bottom-navigation-height);}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { position: absolute; left: 4px; transform: translateY(-22px);}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}

package/es/bottom-navigation-item/bottomNavigationItem.less

@@ -0,0 +1,78 @@
+@bottom-navigation-item-font-size: var(--font-size-sm);
+@bottom-navigation-item-inactive-color: #646566;
+@bottom-navigation-item-active-color: var(--color-primary);
+@bottom-navigation-item-active-background-color: #fff;
+@bottom-navigation-item-line-height: 1;
+@bottom-navigation-item-icon-size: 22px;
+@bottom-navigation-item-icon-margin-bottom: 5px;
+
+:root {
+  --bottom-navigation-item-font-size: @bottom-navigation-item-font-size;
+  --bottom-navigation-item-inactive-color: @bottom-navigation-item-inactive-color;
+  --bottom-navigation-item-active-color: @bottom-navigation-item-active-color;
+  --bottom-navigation-item-active-background-color: @bottom-navigation-item-active-background-color;
+  --bottom-navigation-item-line-height: @bottom-navigation-item-line-height;
+  --bottom-navigation-item-icon-size: @bottom-navigation-item-icon-size;
+  --bottom-navigation-item-icon-margin-bottom: @bottom-navigation-item-icon-margin-bottom;
+}
+
+.var-bottom-navigation-item {
+  height: 100%;
+  padding: 6px 12px 8px;
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: var(--bottom-navigation-item-line-height);
+  color: var(--bottom-navigation-item-inactive-color);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &--active {
+    color: var(--bottom-navigation-item-active-color);
+    background-color: var(--bottom-navigation-item-active-background-color);
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    .var-bottom-navigation-item__label {
+      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
+    }
+  }
+
+  &--right-half-space {
+    margin-right: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--left-half-space {
+    margin-left: calc(var(--bottom-navigation-height) / 2);
+  }
+
+  &--right-space {
+    margin-right: var(--bottom-navigation-height);
+  }
+
+  &__icon[var-bottom-navigation-item-cover] {
+    font-size: var(--bottom-navigation-item-icon-size);
+  }
+
+  &__badge[var-bottom-navigation-item-cover] {
+    position: absolute;
+    left: 4px;
+    transform: translateY(-22px);
+  }
+
+  &__label {
+    margin-top: var(--bottom-navigation-item-icon-margin-bottom);
+    font-size: var(--bottom-navigation-item-font-size);
+    transition: font-size 0.2s ease 0.1s;
+    white-space: nowrap;
+  }
+}

package/es/bottom-navigation-item/index.js

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

package/es/bottom-navigation-item/props.js

@@ -0,0 +1,22 @@
+export var props = {
+  name: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  label: {
+    type: String
+  },
+  namespace: {
+    type: String,
+    default: 'var-icon'
+  },
+  badge: {
+    type: [Boolean, Object],
+    default: false
+  },
+  onClick: {
+    type: Function
+  }
+};

package/es/bottom-navigation-item/provide.js

@@ -0,0 +1,21 @@
+import { useAtParentIndex, useParent } from '../utils/components';
+import { BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY, BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY } from '../bottom-navigation/provide';
+export function useBottomNavigation() {
+  var {
+    parentProvider,
+    bindParent
+  } = useParent(BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY);
+  var {
+    index
+  } = useAtParentIndex(BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-bottom-navigation-item/> must in <var-bottom-navigation/>');
+  }
+
+  return {
+    index,
+    bottomNavigation: parentProvider,
+    bindBottomNavigation: bindParent
+  };
+}

package/es/bottom-navigation-item/style/index.js

@@ -0,0 +1,6 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../badge/badge.css'
+import '../../icon/icon.css'
+import '../bottomNavigationItem.css'
+import '../BottomNavigationItemSfc.css'

package/es/bottom-navigation-item/style/less.js

@@ -0,0 +1,6 @@
+import '../../styles/common.less'
+import '../../ripple/ripple.less'
+import '../../badge/badge.less'
+import '../../icon/icon.less'
+import '../bottomNavigationItem.less'
+import '../BottomNavigationItemSfc.less'

package/es/button/Button.js

@@ -2,7 +2,12 @@ import Ripple from '../ripple';
 import VarLoading from '../loading';
 import { defineComponent, ref } from 'vue';
 import { props } from './props';
-import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('button');
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -13,7 +18,7 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(["var-button var--box", ["var-button--" + _ctx.size, _ctx.block ? 'var--flex var-button--block' : 'var--inline-flex', _ctx.disabled ? 'var-button--disabled' : null, _ctx.text ? "var-button--text-" + _ctx.type : "var-button--" + _ctx.type, _ctx.text ? 'var-button--text' : 'var-elevation--2', _ctx.text && _ctx.disabled ? 'var-button--text-disabled' : null, _ctx.round ? 'var-button--round' : null, _ctx.outline ? 'var-button--outline' : null]]),
+    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')])),
     style: _normalizeStyle({
       color: _ctx.textColor,
       background: _ctx.color
@@ -27,15 +32,15 @@ export function render(_ctx, _cache) {
     })
   }, [_ctx.loading || _ctx.pending ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
-    class: "var-button__loading",
+    class: _normalizeClass(_ctx.n('loading')),
     "var-button-cover": "",
     type: _ctx.loadingType,
     size: _ctx.loadingSize,
     radius: _ctx.loadingRadius
   }, null, 8
   /* PROPS */
-  , ["type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass(["var-button__content", [_ctx.loading || _ctx.pending ? 'var-button--hidden' : null]])
+  , ["class", "type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading || _ctx.pending, _ctx.n('--hidden')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 46
@@ -96,6 +101,8 @@ export default defineComponent({
     };
 
     return {
+      n,
+      classes,
       pending,
       handleClick,
       handleTouchstart

package/es/card/Card.js

@@ -2,53 +2,56 @@ import Ripple from '../ripple';
 import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('card');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-card__title"
-};
-var _hoisted_3 = {
-  key: 0,
-  class: "var-card__subtitle"
-};
-var _hoisted_4 = {
-  key: 0,
-  class: "var-card__description"
-};
-var _hoisted_5 = {
-  key: 0,
-  class: "var-card__footer"
-};
 export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-card", [_ctx.elevation ? "var-elevation--" + _ctx.elevation : 'var-elevation--2']]),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--2'])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
   }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
     key: 0,
-    class: "var-card__image",
+    class: _normalizeClass(_ctx.n('image')),
     style: _normalizeStyle({
       objectFit: _ctx.fit,
       height: _ctx.toSizeUnit(_ctx.height)
     }),
     src: _ctx.src,
     alt: _ctx.alt
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(_ctx.title), 1
-  /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.subtitle), 1
-  /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("div", _hoisted_4, _toDisplayString(_ctx.description), 1
-  /* TEXT */
-  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", _hoisted_5, [_renderSlot(_ctx.$slots, "extra")])) : _createCommentVNode("v-if", true)], 2
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('title'))
+  }, _toDisplayString(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('subtitle'))
+  }, _toDisplayString(_ctx.subtitle), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('description'))
+  }, _toDisplayString(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('footer'))
+  }, [_renderSlot(_ctx.$slots, "extra")], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple
@@ -64,6 +67,8 @@ export default defineComponent({
 
   setup() {
     return {
+      n,
+      classes,
       toSizeUnit
     };
   }

package/es/cell/Cell.js

@@ -1,21 +1,20 @@
 import { defineComponent } from 'vue';
 import { props } from './props';
 import VarIcon from '../icon';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-cell__content"
-};
+import { createNamespace } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('cell');
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-cell", [_ctx.border ? 'var-cell--border' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.border, _ctx.n('--border')]))
   }, [_ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-cell__icon", [_ctx.iconClass ? _ctx.iconClass : null]])
+    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
@@ -23,22 +22,26 @@ export function render(_ctx, _cache) {
   /* PROPS */
   , ["name"])])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", _hoisted_1, [_createElementVNode("div", {
-    class: _normalizeClass(["var-cell__title", [_ctx.titleClass ? _ctx.titleClass : null]])
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('title'), [_ctx.titleClass, _ctx.titleClass]))
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.title), 1
   /* TEXT */
   )])], 2
   /* CLASS */
   ), _ctx.$slots.desc || _ctx.desc ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(["var-cell__desc", [_ctx.descClass ? _ctx.descClass : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('desc'), [_ctx.descClass, _ctx.descClass]))
   }, [_renderSlot(_ctx.$slots, "desc", {}, () => [_createTextVNode(_toDisplayString(_ctx.desc), 1
   /* TEXT */
   )])], 2
   /* CLASS */
-  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", {
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  ), _ctx.$slots.extra ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(["var-cell__extra", [_ctx.extraClass ? _ctx.extraClass : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('extra'), [_ctx.extraClass, _ctx.extraClass]))
   }, [_renderSlot(_ctx.$slots, "extra")], 2
   /* CLASS */
   )) : _createCommentVNode("v-if", true)], 2
@@ -51,5 +54,13 @@ export default defineComponent({
   components: {
     VarIcon
   },
-  props
+  props,
+
+  setup() {
+    return {
+      n,
+      classes
+    };
+  }
+
 });

package/es/checkbox/Checkbox.js

@@ -3,16 +3,14 @@ import VarFormDetails from '../form-details';
 import Ripple from '../ripple';
 import { defineComponent, ref, computed, watch, nextTick } from 'vue';
 import { props } from './props';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
 import { useCheckboxGroup } from './provide';
 import { useForm } from '../form/provide';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-checkbox"
-};
+var {
+  n,
+  classes
+} = createNamespace('checkbox');
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -21,19 +19,21 @@ export function render(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _openBlock(), _createElementBlock("div", {
-    class: "var-checkbox__wrap",
+    class: _normalizeClass(_ctx.n('wrap')),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
-  }, [_createElementVNode("div", _hoisted_1, [_withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]]),
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('action'), [_ctx.checked, _ctx.n('--checked'), _ctx.n('--unchecked')], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
       color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
     })
   }, [_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", {
     key: 0
   }, () => [_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-marked",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -42,7 +42,7 @@ export function render(_ctx, _cache) {
   , ["class", "size"])]) : _renderSlot(_ctx.$slots, "unchecked-icon", {
     key: 1
   }, () => [_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
@@ -53,14 +53,18 @@ export function render(_ctx, _cache) {
   )), [[_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
   }]]), _createElementVNode("div", {
-    class: _normalizeClass(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n('text'), [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
-  )]), _createVNode(_component_var_form_details, {
+  )], 2
+  /* CLASS */
+  ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -107,15 +111,13 @@ export default defineComponent({
     };
 
     var change = changedValue => {
-      var _props$onUpdateModel;
-
       value.value = changedValue;
       var {
         checkedValue,
         onChange
       } = props;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value.value);
-      onChange == null ? void 0 : onChange(value.value);
+      call(props['onUpdate:modelValue'], value.value);
+      call(onChange, value.value);
       validateWithTrigger('onChange');
       changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
     };
@@ -133,7 +135,7 @@ export default defineComponent({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      call(onClick, e);
 
       if (form != null && form.readonly.value || readonly) {
         return;
@@ -163,9 +165,7 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, props.uncheckedValue);
+      call(props['onUpdate:modelValue'], props.uncheckedValue);
       resetValidation();
     }; // expose
 
@@ -201,8 +201,8 @@ export default defineComponent({
       reset,
       resetWithAnimation
     };
-    bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
-    bindForm == null ? void 0 : bindForm(checkboxProvider);
+    call(bindCheckboxGroup, checkboxProvider);
+    call(bindForm, checkboxProvider);
     return {
       withAnimation,
       checked,
@@ -210,6 +210,8 @@ export default defineComponent({
       checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
+      n,
+      classes,
       handleClick,
       toggle,
       reset,