perf: add class and call function

packages/varlet-ui/src/action-sheet/ActionSheet.vue

@@ -1,6 +1,6 @@
 <template>
   <var-popup
-    class="var-action-sheet__popup-radius"
+    :class="n('popup-radius')"
     position="bottom"
     :overlay="overlay"
     :overlay-class="overlayClass"
@@ -18,29 +18,28 @@
     @opened="onOpened"
     @route-change="onRouteChange"
   >
-    <div class="var-action-sheet var--box" v-bind="$attrs">
+    <div :class="classes([n(), 'var--box'])" v-bind="$attrs">
       <slot name="title">
-        <div class="var-action-sheet__title">{{ dt(title, pack.actionSheetTitle) }}</div>
+        <div :class="n('title')">{{ dt(title, pack.actionSheetTitle) }}</div>
       </slot>
 
       <slot name="actions">
         <div
-          class="var-action-sheet__action-item"
-          :class="[action.className, action.disabled ? 'var-action-sheet--disabled' : null]"
+          :class="classes([n('action-item'), action.className, [action.disabled, n('--disabled')]])"
           v-ripple="{ disabled: action.disabled }"
           v-for="action in actions"
           :key="action.name"
           :style="{ color: action.color }"
           @click="handleSelect(action)"
         >
           <var-icon
-            class="var-action-sheet__action-icon"
+            :class="n('action-icon')"
             var-action-sheet-cover
             :name="action.icon"
             :size="action.iconSize"
             v-if="action.icon"
           />
-          <div class="var-action-sheet__action-name">{{ action.name }}</div>
+          <div :class="n('action-name')">{{ action.name }}</div>
         </div>
       </slot>
     </div>
@@ -55,6 +54,7 @@ import { defineComponent, ref, watch } from 'vue'
 import { props } from './props'
 import { dt } from '../utils/shared'
 import { pack } from '../locale'
+import { createNamespace, call } from '../utils/components'
 import type { Ref } from 'vue'
 import type { ActionItem } from './index'
 
@@ -68,6 +68,8 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
+    const { n, classes } = createNamespace('action-sheet')
+
     const popupShow: Ref<boolean> = ref(false)
 
     const handleSelect = (action: ActionItem) => {
@@ -76,8 +78,8 @@ export default defineComponent({
       }
 
       const { closeOnClickAction, onSelect } = props
-      onSelect?.(action)
-      closeOnClickAction && props['onUpdate:show']?.(false)
+      call(onSelect, action)
+      closeOnClickAction && call(props['onUpdate:show'], false)
     }
 
     watch(
@@ -89,6 +91,8 @@ export default defineComponent({
     )
 
     return {
+      n,
+      classes,
       popupShow,
       pack,
       dt,

packages/varlet-ui/src/button/Button.vue

@@ -1,17 +1,7 @@
 <template>
   <button
     v-ripple="{ disabled: disabled || !ripple }"
-    class="var-button var--box"
-    :class="[
-      `var-button--${size}`,
-      block ? 'var--flex var-button--block' : 'var--inline-flex',
-      disabled ? 'var-button--disabled' : null,
-      text ? `var-button--text-${type}` : `var-button--${type}`,
-      text ? 'var-button--text' : 'var-elevation--2',
-      text && disabled ? 'var-button--text-disabled' : null,
-      round ? 'var-button--round' : null,
-      outline ? 'var-button--outline' : null,
-    ]"
+    :class="buttonClass"
     :style="{
       color: textColor,
       background: color,
@@ -21,14 +11,14 @@
     @touchstart="handleTouchstart"
   >
     <var-loading
-      class="var-button__loading"
+      :class="n('loading')"
       var-button-cover
       :type="loadingType"
       :size="loadingSize"
       :radius="loadingRadius"
       v-if="loading || pending"
     />
-    <div class="var-button__content" :class="[loading || pending ? 'var-button--hidden' : null]">
+    <div :class="classes([n('content'), [loading || pending, n('--hidden')]])">
       <slot />
     </div>
   </button>
@@ -37,8 +27,10 @@
 <script lang="ts">
 import Ripple from '../ripple'
 import VarLoading from '../loading'
-import { defineComponent, Ref, ref } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
+import type { Ref, ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'VarButton',
@@ -48,8 +40,24 @@ export default defineComponent({
   directives: { Ripple },
   props,
   setup(props) {
+    const { n, classes } = createNamespace('button')
+
     const pending: Ref<boolean> = ref(false)
 
+    const buttonClass: ComputedRef<string> = computed(() =>
+      classes([
+        n(),
+        'var--box',
+        n(`--${props.size}`),
+        [props.block, `var--flex ${n('--block')}`, 'var--inline-flex'],
+        [props.disabled, n('--disabled')],
+        [props.text, `${n(`--text-${props.type}`)} ${n('--text')}`, `${n(`--${props.type}`)} var-elevation--2`],
+        [props.text && props.disabled, n('--text-disabled')],
+        [props.round, n('--round')],
+        [props.outline, n('--outline')],
+      ])
+    )
+
     const attemptAutoLoading = (result: any) => {
       if (props.autoLoading) {
         pending.value = true
@@ -80,6 +88,9 @@ export default defineComponent({
     }
 
     return {
+      n,
+      classes,
+      buttonClass,
       pending,
       handleClick,
       handleTouchstart,

packages/varlet-ui/src/utils/components.ts

@@ -16,7 +16,7 @@ import {
   onDeactivated,
 } from 'vue'
 import type { Component, VNode, ComputedRef, ComponentInternalInstance, Ref } from 'vue'
-import { isArray, removeItem } from './shared'
+import { condition, isArray, removeItem } from './shared'
 
 export interface MountInstance {
   instance: any
@@ -25,12 +25,15 @@ export interface MountInstance {
 
 export interface ChildrenCounter {
   collect(instance: ComponentInternalInstance): void
+
   clear(instance: ComponentInternalInstance): void
+
   instances: ComponentInternalInstance[]
 }
 
 export interface BaseParentProvider<C> {
   collect(childProvider: C): void
+
   clear(childProvider: C): void
 }
 
@@ -289,3 +292,39 @@ export function exposeApis<T = Record<string, any>>(apis: T) {
     Object.assign(instance.proxy, apis)
   }
 }
+
+export function createNamespace(name: string) {
+  const namespace = `var-${name}`
+
+  const createBEM = (mod?: string): string => {
+    if (!mod) return namespace
+
+    return mod.startsWith('--') ? `${namespace}${mod}` : `${namespace}__${mod}`
+  }
+
+  const classes = (arg: any[]): string => {
+    return arg.reduce((pre, cur) => {
+      if (!cur) return pre
+
+      if (isArray(cur)) {
+        const result = condition(cur[0], cur[1], cur[2])
+
+        return result ? `${pre} ${result}` : pre
+      }
+
+      return `${pre} ${cur}`
+    }, '')
+  }
+
+  return {
+    n: createBEM,
+    classes,
+  }
+}
+
+export function call<F extends (...arg: any) => any, P extends Parameters<F>>(
+  fn?: F,
+  ...arg: P
+): ReturnType<F> | undefined {
+  if (fn) return fn(...arg)
+}

packages/varlet-ui/src/utils/shared.ts

@@ -176,3 +176,7 @@ export function kebabCase(str: string): string {
   const ret = str.replace(/([A-Z])/g, ' $1').trim()
   return ret.split(' ').join('-').toLowerCase()
 }
+
+export function condition<T, F>(bool: any, truthy: T, falsy?: F) {
+  return bool ? truthy : falsy
+}