feat(components): add radio & checkbox components

example/App.vue

@@ -182,6 +182,15 @@
       </template>
     </emqx-avatar>
   </div>
+  <h2>Checkbox</h2>
+  <div class="show-item">
+    <emqx-checkbox v-model="checked">备选项</emqx-checkbox>
+  </div>
+  <h2>Radio</h2>
+  <div class="show-item">
+    <emqx-radio v-model="radio" label="1">备选项1</emqx-radio>
+    <emqx-radio v-model="radio" label="2">备选项2</emqx-radio>
+  </div>
 </template>
 
 <script lang="ts">
@@ -266,6 +275,8 @@ export default defineComponent({
         }, 2000)
       })
     }
+    const checked = ref(true)
+    const radio = ref('1')
     return {
       testInput,
       testSelect,
@@ -285,6 +296,8 @@ export default defineComponent({
       tagOptions,
       fakeRequestToAddTag,
       jsonValue,
+      checked,
+      radio,
     }
   },
 })

packages/Checkbox/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Checkbox from './src/checkbox.vue'
+
+Checkbox.install = (Vue: App): void => {
+  Vue.component(Checkbox.name, Checkbox)
+}
+
+export default Checkbox

packages/Checkbox/src/checkbox.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-checkbox class="emqx-checkbox">
+    <slot></slot>
+  </el-checkbox>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElCheckbox } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxCheckbox',
+  components: {
+    ElCheckbox,
+  },
+})
+</script>

packages/Radio/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Radio from './src/radio.vue'
+
+Radio.install = (Vue: App): void => {
+  Vue.component(Radio.name, Radio)
+}
+
+export default Radio

packages/Radio/src/radio.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-radio class="emqx-radio">
+    <slot></slot>
+  </el-radio>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ElRadio } from 'element-plus'
+
+export default defineComponent({
+  name: 'EmqxRadio',
+  components: {
+    ElRadio,
+  },
+})
+</script>

packages/index.ts

@@ -29,6 +29,8 @@ import Tags from './Tags'
 import KeyValueEditor from './KeyValueEditor'
 import Loading from './Loading'
 import Avatar from './Avatar'
+import Checkbox from './Checkbox'
+import Radio from './Radio'
 
 import lang from 'element-plus/lib/locale/lang/zh-cn'
 import locale from 'element-plus/lib/locale'
@@ -69,6 +71,8 @@ const components = [
   Tags,
   KeyValueEditor,
   Avatar,
+  Checkbox,
+  Radio,
 ]
 
 const plugins = [Loading]
@@ -115,6 +119,8 @@ const packages = {
   Tags,
   KeyValueEditor,
   Avatar,
+  Checkbox,
+  Radio,
 }
 
 export const EmqxMessage = Message