From eaafb94b575a99870533042b4d683a418933088e Mon Sep 17 00:00:00 2001
From: Simon He <13917107469@163.com>
Date: Wed, 30 Nov 2022 18:07:08 +0800
Subject: [PATCH] test(components): button

---
 .gitignore                  |  1 +
 demos/vue/src/App.vue       | 11 ++++++----
 package.json                |  6 +++---
 src/_utils/render-shadow.ts | 42 +++++++++++++++++++++++++++----------
 src/button/color.ts         | 17 +++++++++++++++
 src/button/index.ts         | 17 ++++++++-------
 src/card/index.ts           |  1 -
 7 files changed, 69 insertions(+), 26 deletions(-)
 create mode 100644 src/button/color.ts

diff --git a/.gitignore b/.gitignore
index f06235c..6b699e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+.eslintcache
diff --git a/demos/vue/src/App.vue b/demos/vue/src/App.vue
index 1f0ed80..0e0ab8c 100644
--- a/demos/vue/src/App.vue
+++ b/demos/vue/src/App.vue
@@ -1,9 +1,12 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <f-button type="default">默认按钮</f-button>
+  <f-button type="default">Default</f-button>
+  <f-button type="primary">Primary</f-button>
+  <f-button type="success">Success</f-button>
+  <f-button type="info">Info</f-button>
+  <f-button type="warning">Warning</f-button>
+  <f-button type="danger">Danger</f-button>
 
   <f-card shadow="always">
     <div slot="header">
diff --git a/package.json b/package.json
index 2b0a6c9..63dfc27 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "build:react": "pnpm -C demos/react build",
     "preview:vue": "pnpm -C demos/vue preview",
     "preview:react": "pnpm -C demos/react preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "eslint . --cache",
+    "lint:fix": "pnpm run lint --fix",
     "commit": "cz"
   },
   "license": "MIT",
@@ -35,4 +35,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/_utils/render-shadow.ts b/src/_utils/render-shadow.ts
index 589a8ff..ba3864f 100644
--- a/src/_utils/render-shadow.ts
+++ b/src/_utils/render-shadow.ts
@@ -2,34 +2,54 @@ import { render } from './utils'
 import type { DomTreeType } from '../_interface'
 
 export class RenderShadow extends HTMLElement {
+  props: Record<string, string> = {}
+  /**
+  * 创建影子节点
+  * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow
+  */
+  shadowRoot: ShadowRoot = this.attachShadow({ mode: 'open' })
   constructor () {
     super()
+    this.initial()
     this.setupShadow()
   }
+  initial (): void {
+    const mutationObserver = new MutationObserver(() => this.setProps())
+    mutationObserver.observe(this, {
+      attributes: true
+    })
+  }
+
   /**
    * 初始化影子节点
    */
   setupShadow (): void {
-    /**
-     * 创建影子节点
-     * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow
-     */
-    const shadowRoot: ShadowRoot = this.attachShadow({ mode: 'open' })
-
     // https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet
-    const stylesheet: CSSStyleSheet = new CSSStyleSheet()
-
     // 渲染组件内部元素节点
-    render(this.html(), shadowRoot)
+    render(this.html(), this.shadowRoot)
 
     /**
      * https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/replaceSync
      * 必须传入字符串样式，不能传入路径
      */
-    stylesheet.replaceSync(this.css())
+    this.renderCss()
+    // this.shadowRoot.host.setAttribute('class', ` f-button`)
 
     // https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
-    shadowRoot.adoptedStyleSheets = [stylesheet]
+  }
+
+  renderCss (): void {
+    const stylesheet: CSSStyleSheet = new CSSStyleSheet()
+    stylesheet.replaceSync(this.css())
+    this.shadowRoot.adoptedStyleSheets = [stylesheet]
+  }
+  setProps (): void {
+    this.props = [...this.attributes].reduce((result, item) => {
+      const { name, value } = item
+      result[name] = value
+      return result
+    }, {} as Record<string, string>)
+    this.renderCss()
   }
 
   css (): string {
diff --git a/src/button/color.ts b/src/button/color.ts
new file mode 100644
index 0000000..58ef069
--- /dev/null
+++ b/src/button/color.ts
@@ -0,0 +1,17 @@
+export const bgColors: Record<string, string> = {
+  default: '#ffffff',
+  primary: '#409eff',
+  success: '#67c23a',
+  info: '#909399',
+  warning: '#e6a23c',
+  danger: '#f56c6c'
+}
+
+export const color: Record<string, string> = {
+  default: '#606266',
+  primary: '#ffffff',
+  success: '#ffffff',
+  info: '#ffffff',
+  warning: '#ffffff',
+  danger: '#ffffff'
+}
diff --git a/src/button/index.ts b/src/button/index.ts
index 9de756c..102fd80 100644
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -1,13 +1,14 @@
 import { RenderShadow } from '../_utils'
 import type { DomTreeType } from '../_interface'
-
+import { bgColors, color } from './color'
 export class FButton extends RenderShadow {
-
+  props: Record<string, string> = {}
   constructor () {
     super()
   }
 
   css (): string {
+    const { type = 'default' } = this.props
     return `
       :host {  
         justify-content: center;
@@ -22,14 +23,15 @@ export class FButton extends RenderShadow {
         overflow: hidden;
         white-space: nowrap;
         vertical-align: middle;
-        background: #2d5af1;
+        background:  ${bgColors[type]};
         width: 105px;
         height: 35px;
-        border-radius: 2px;
-        display: inline-flex;
-        color: #fff;
+        border-radius: 4px;
+        padding:8px 15px;
+        display: inline - flex;
+        color: ${color[type]};
       }
-    `
+`
   }
 
   html (): DomTreeType {
@@ -39,4 +41,5 @@ export class FButton extends RenderShadow {
       }
     ] as const
   }
+
 }
diff --git a/src/card/index.ts b/src/card/index.ts
index 5848108..6e753d8 100644
--- a/src/card/index.ts
+++ b/src/card/index.ts
@@ -2,7 +2,6 @@ import { RenderShadow } from '../_utils'
 import type { DomTreeType } from '../_interface'
 
 export class FCard extends RenderShadow {
-
   constructor () {
     super()
   }