test(components): button

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.eslintcache

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">

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"
     }
   }
-}
+}

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 {

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'
+}

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
   }
+
 }

src/card/index.ts

@@ -2,7 +2,6 @@ import { RenderShadow } from '../_utils'
 import type { DomTreeType } from '../_interface'
 
 export class FCard extends RenderShadow {
-
   constructor () {
     super()
   }