From 861a561e425a0c7f1b53f2dce5ae42a9044c4e52 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 22 Mar 2023 15:38:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90markd=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=92=8Ccode=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Readme.md            |   4 +-
 src/form/checkbox.js |   1 -
 src/form/radio.js    |   1 -
 src/form/switch.js   | 210 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 212 insertions(+), 4 deletions(-)
 create mode 100644 src/form/switch.js

diff --git a/Readme.md b/Readme.md
index f9f0609..64c5892 100644
--- a/Readme.md
+++ b/Readme.md
@@ -35,14 +35,14 @@
 - [ ] `wc-switch`表单组件-开关
 - [x] `wc-icon`图标组件
 - [ ] `wc-layer` 弹层组件
-- [ ] `wc-markd`markdown组件
+- [x] `wc-markd`markdown组件
 - [ ] `wc-meditor`md文本编辑器
 - [ ] `wc-neditor`富文本编辑器
 - [ ] `wc-pager`分页组件
 - [ ] `wc-colorpicker`颜色选择器
 - [ ] `wc-datepicker`日期选择器
 - [ ] `wc-timepicker`时间选择器
-- [ ] `wc-code`代码高亮插件
+- [x] `wc-code`代码高亮插件
 - [ ] `wc-scroll`滚动组件
 - [ ] `wc-silder`滑块组件
 - [ ] `wc-progress`进度条组件
diff --git a/src/form/checkbox.js b/src/form/checkbox.js
index 16dfbe5..5cc1012 100644
--- a/src/form/checkbox.js
+++ b/src/form/checkbox.js
@@ -253,7 +253,6 @@ class CheckboxItem extends Component {
 
   render() {
     return html` <label
-      ref="radio"
       tabindex=${this.disabled ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
diff --git a/src/form/radio.js b/src/form/radio.js
index 2aa75cc..cbb7bf0 100644
--- a/src/form/radio.js
+++ b/src/form/radio.js
@@ -249,7 +249,6 @@ class RadioItem extends Component {
 
   render() {
     return html` <label
-      ref="radio"
       tabindex=${this.disabled ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
diff --git a/src/form/switch.js b/src/form/switch.js
new file mode 100644
index 0000000..1e2385d
--- /dev/null
+++ b/src/form/switch.js
@@ -0,0 +1,210 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/21 16:14:10
+ */
+
+import { nextTick, css, html, Component } from '@bd/core'
+
+class Switch extends Component {
+  static props = {
+    value: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    checked: false,
+    disabled: false,
+    readonly: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+        font-size: 14px;
+        cursor: pointer;
+
+        label {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: 32px;
+          padding-right: 16px;
+          line-height: 1;
+          -moz-user-select: none;
+          user-select: none;
+          white-space: nowrap;
+          cursor: inherit;
+          outline: none;
+          color: var(--color-dark-1);
+        }
+
+        .dot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 14px;
+          height: 14px;
+          margin-right: 4px;
+          border: 1px solid var(--color-dark-1);
+          border-radius: 4px;
+          background: #fff;
+          transition: box-shadow 0.15s linear;
+
+          wc-icon {
+            display: block;
+            visibility: hidden;
+            width: 10px;
+            height: 10px;
+            transform: scale(0);
+            transition: transform 0.15s linear;
+          }
+        }
+        &:host([checked]) .dot wc-icon {
+          visibility: visible;
+          transform: scale(1);
+        }
+      }
+    `,
+
+    css`
+      :host(:focus-within) .dot {
+        box-shadow: 0 0 0 2px var(--color-plain-a);
+      }
+    `,
+    // 尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        m: (
+          w: 72px,
+          h: 24px,
+          f: 12px
+        ),
+        l: (
+          w: 108px,
+          h: 32px,
+          f: 14px
+        ),
+        xl: (
+          w: 132px,
+          h: 36px,
+          f: 14px
+        ),
+        xxl: (
+          w: 160px,
+          h: 44px,
+          f: 14px
+        ),
+        xxxl: (
+          w: 192px,
+          h: 52px,
+          f: 16px
+        )
+      );
+
+      @loop $s, $v in $sizes {
+        :host([size='#{$s}']) {
+          height: map.get($v, 'h');
+          font-size: map.get($v, 'f');
+
+          .dot {
+            width: #{map.get($v, 'f')};
+            height: #{map.get($v, 'f')};
+          }
+        }
+      }
+    `,
+    // 配色
+    css`
+      $colors: (
+        primary: 'teal',
+        info: 'blue',
+        success: 'green',
+        warning: 'orange',
+        danger: 'red',
+        secondary: 'dark',
+        help: 'grey'
+      );
+
+      @loop $t, $c in $colors {
+        :host([type='#{$t}']) {
+          label {
+            color: var(--color-#{$c}-2);
+          }
+
+          .dot {
+            border-color: var(--color-#{$c}-2);
+
+            &::after {
+              background: var(--color-#{$c}-2);
+            }
+          }
+
+          &:host(:focus-within) .dot {
+            box-shadow: 0 0 0 2px var(--color-#{$c}-a);
+          }
+        }
+      }
+    `,
+    // 状态
+    css`
+      :host([readonly]),
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      :host([readonly]) {
+        cursor: default;
+      }
+    `
+  ]
+
+  toggleCheck(ev) {
+    if (this.disabled || this.readOnly) {
+      return
+    }
+
+    ev.stopPropagation()
+
+    this.checked = !this.checked
+    let data = {
+      value: this.value,
+      checked: this.checked
+    }
+
+    if (this.inGroup) {
+      this.parentNode.$emit('child-change', data)
+    } else {
+      this.$emit('change', data)
+    }
+  }
+
+  handleClick(ev) {
+    if (ev.type === 'click' || ev.keyCode === 32) {
+      this.toggleCheck(ev)
+    }
+  }
+
+  mounted() {
+    if (this.parentNode?.tagName === 'WC-CHECKBOX-GROUP') {
+      this.inGroup = true
+    }
+  }
+
+  render() {
+    return html` <label
+      tabindex=${this.disabled ? 'none' : 0}
+      @click=${this.handleClick}
+      @keydown=${this.handleClick}
+    >
+      <span class="dot"><wc-icon name="get"></wc-icon></span>
+      <slot></slot>
+    </label>`
+  }
+}
+
+Switch.reg('switch')