chore: extarct js component

src/style/button.less

@@ -1,4 +1,7 @@
-.table-up-btn {
+@import './variables.less';
+@import './functions.less';
+
+.@{namespace}-button {
   .setCssVar(table-btn-color, #606266);
   .setCssVar(table-btn-bg-hover, #f3f4f6);
   .setCssVar(table-btn-color-border, #dcdfe6);

src/style/dialog.less

@@ -1,7 +1,8 @@
+@import './variables.less';
 @import './functions.less';
 @import './button.less';
 
-.dialog {
+.@{namespace}-dialog {
   .setCssVar(dialog-bg, rgba(0, 0, 0, 0.5));
   .setCssVar(dialog-color-border, #ebeef5);
   .setCssVar(dialog-color-boxshadow, rgba(0, 0, 0, 0.12));

src/style/index.less

@@ -423,5 +423,5 @@
 }
 
 @import './select-box.less';
-@import './tool-tip.less';
+@import './tooltip.less';
 @import './dialog.less';

src/style/input.less

@@ -1,6 +1,7 @@
+@import './variables.less';
 @import './functions.less';
 
-.input {
+.@{namespace}-input {
   &__item {
     .setCssVar(input-height,  32px);
     .setCssVar(input-inner-height,  calc(.getCssVar(input-height) [] - 2px));
@@ -52,14 +53,12 @@
       box-shadow: .getCssVar(input-boxshaow-error) [];
     }
   }
-  &__error {
-    &-tip {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      font-size: 12px;
-      color: .getCssVar(input-color-error) [];
-      line-height: 16px;
-    }
+  &__error-tip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    font-size: 12px;
+    color: .getCssVar(input-color-error) [];
+    line-height: 16px;
   }
 }

src/style/tool-tip.less → src/style/tooltip.less

@@ -1,4 +1,6 @@
-.tooltip {
+@import './variables.less';
+
+.@{namespace}-tooltip {
   position: absolute;
   z-index: 20;
   padding: 4px 12px;

src/style/variables.less

@@ -0,0 +1 @@
+@namespace: table-up;

src/utils/bem.ts

@@ -0,0 +1,27 @@
+import { cssNamespace } from './constants';
+import { isBoolean } from './is';
+
+export const createBEM = (b: string, n: string = cssNamespace) => {
+  const prefix = n ? `${n}-` : '';
+  return {
+    /** n-b */
+    b: () => `${prefix}${b}`,
+    /** n-b__e */
+    be: (e?: string) => e ? `${prefix}${b}__${e}` : '',
+    /** n-b--m */
+    bm: (m?: string) => m ? `${prefix}${b}--${m}` : '',
+    /** n-b__e--m */
+    bem: (e?: string, m?: string) => e && m ? `${prefix}${b}__${e}--${m}` : '',
+    /** n-s */
+    ns: (s?: string) => s ? `${prefix}${s}` : '',
+    /** n-b-s */
+    bs: (s?: string) => s ? `${prefix}${b}-${s}` : '',
+    /** --n-v */
+    cv: (v?: string) => v ? `--${prefix}${v}` : '',
+    /** is-n */
+    is: (n: string, status: (boolean | undefined)[] | boolean) => {
+      const state = isBoolean(status) ? status : status.every(Boolean);
+      return state ? `is-${n}` : '';
+    },
+  };
+};