From b3194de029a898008d9a50327486e886798c0d70 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Wed, 4 Jan 2023 18:30:28 +0800
Subject: [PATCH] feat: add radio

---
 packages/docs/radio.md                        | 44 +++++++++
 .../src/components/checkbox/OCheckbox.vue     |  0
 packages/opendesign/src/components/index.scss |  2 +
 packages/opendesign/src/components/index.ts   |  2 +
 .../src/components/radio/ORadio.vue           | 61 +++++++++++++
 .../src/components/radio/ORadioGroup.vue      | 42 +++++++++
 .../components/radio/__demo__/IndexRadio.vue  | 16 ++++
 .../components/radio/__demo__/RadioBasic.vue  | 12 +++
 .../radio/__demo__/RadioDisabled.vue          | 12 +++
 .../components/radio/__demo__/RadioGroup.vue  | 27 ++++++
 .../opendesign/src/components/radio/index.ts  | 20 ++++
 .../src/components/radio/provide.ts           |  7 ++
 .../src/components/radio/style/index.scss     | 91 +++++++++++++++++++
 .../src/components/radio/style/index.ts       |  1 +
 .../src/components/radio/style/var.scss       | 14 +++
 .../opendesign/src/components/radio/types.ts  |  1 +
 .../opendesign/src/components/select/index.ts |  6 +-
 .../src/components/switch/OSwitch.vue         |  3 +-
 .../opendesign/src/components/switch/index.ts |  3 +-
 .../src/components/switch/style/index.scss    |  1 +
 .../src/components/switch/style/var.scss      |  2 +
 packages/portal/src/router.ts                 |  8 +-
 22 files changed, 365 insertions(+), 10 deletions(-)
 create mode 100644 packages/docs/radio.md
 create mode 100644 packages/opendesign/src/components/checkbox/OCheckbox.vue
 create mode 100644 packages/opendesign/src/components/radio/ORadio.vue
 create mode 100644 packages/opendesign/src/components/radio/ORadioGroup.vue
 create mode 100644 packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
 create mode 100644 packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
 create mode 100644 packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
 create mode 100644 packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
 create mode 100644 packages/opendesign/src/components/radio/index.ts
 create mode 100644 packages/opendesign/src/components/radio/provide.ts
 create mode 100644 packages/opendesign/src/components/radio/style/index.scss
 create mode 100644 packages/opendesign/src/components/radio/style/index.ts
 create mode 100644 packages/opendesign/src/components/radio/style/var.scss
 create mode 100644 packages/opendesign/src/components/radio/types.ts

diff --git a/packages/docs/radio.md b/packages/docs/radio.md
new file mode 100644
index 00000000..06d105f4
--- /dev/null
+++ b/packages/docs/radio.md
@@ -0,0 +1,44 @@
+# Radio 单选
+
+## props
+
+| name                 | type                        | 默认值 | 说明        |
+| :------------------- | :-------------------------- | :----- | ----------- |
+| value                | string \| number \| boolean | -      | 单选框 vale |
+| model-value(v-model) | string \| number \| boolean | -      | 双向绑定值  |
+| disabled             | boolean                     | false  | 是否禁用    |
+
+## event
+
+| name   | 参数                                | 说明           |
+| :----- | :---------------------------------- | :------------- |
+| change | {value: boolean, checked: boolean}; | 状态切换后触发 |
+
+## expose
+
+## slot
+
+| name  | 说明         |
+| :---- | :----------- |
+| radio | 自定义单选框 |
+
+# RadioGroup 单选
+
+## props
+
+| name                 | type                        | 默认值 | 说明        |
+| :------------------- | :-------------------------- | :----- | ----------- |
+| value                | string \| number \| boolean | -      | 单选框 vale |
+| model-value(v-model) | string \| number \| boolean | -      | 双向绑定值  |
+| disabled             | Boolean                     | false  | 是否禁用    |
+| direction            | Boolean                     | false  | 是否禁用    |
+
+## event
+
+| name   | 参数           | 说明           |
+| :----- | :------------- | :------------- |
+| change | value: boolean | 状态切换后触发 |
+
+## expose
+
+## slot
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index 5640fbf4..9164cf53 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -1,2 +1,4 @@
 @import './style/index.scss';
 @import './button/style/index.scss';
+@import './switch/style/index.scss';
+@import './radio/style/index.scss';
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 2fecc76c..4fadf1dd 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -5,3 +5,5 @@ export * from './hooks';
 export * from './button';
 
 export * from './switch';
+
+export * from './radio';
diff --git a/packages/opendesign/src/components/radio/ORadio.vue b/packages/opendesign/src/components/radio/ORadio.vue
new file mode 100644
index 00000000..4422834a
--- /dev/null
+++ b/packages/opendesign/src/components/radio/ORadio.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import { radioGroupInjectKey } from './provide';
+
+interface RadioPropT {
+  value: string | boolean | number;
+  modelValue?: string | boolean | number;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<RadioPropT>(), {
+  modelValue: undefined,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number | boolean): void;
+  (e: 'change', rlt: { value: string | number | boolean; checked: boolean }): void;
+}>();
+
+const radioGroupInjection = inject(radioGroupInjectKey, null);
+
+// 是否选中
+const isChecked = computed(() => props.value === (radioGroupInjection ? radioGroupInjection.modelValue.value : props.modelValue));
+
+// 是否disabled
+const isDisabled = computed(() => radioGroupInjection?.disabled.value || props.disabled);
+
+const onClick = (ev: Event) => {
+  ev.stopPropagation();
+};
+
+const onChange = () => {
+  if (isDisabled.value) {
+    return;
+  }
+
+  const val = props.value;
+  radioGroupInjection?.onChange(val);
+  emit('update:modelValue', val);
+};
+
+watch(
+  () => isChecked.value,
+  () => {
+    emit('change', { value: props.value, checked: isChecked.value });
+  }
+);
+</script>
+
+<template>
+  <label class="o-radio" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled }">
+    <input type="radio" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+    <slot v-if="$slots.radio" name="radio" :checked="isChecked" :disabled="isDisabled"></slot>
+    <template v-else>
+      <span class="o-radio-icon"></span>
+      <span class="o-radio-label">
+        <slot></slot>
+      </span>
+    </template>
+  </label>
+</template>
diff --git a/packages/opendesign/src/components/radio/ORadioGroup.vue b/packages/opendesign/src/components/radio/ORadioGroup.vue
new file mode 100644
index 00000000..37256d2c
--- /dev/null
+++ b/packages/opendesign/src/components/radio/ORadioGroup.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { provide, toRefs } from 'vue';
+import { radioGroupInjectKey } from './provide';
+import type { RadioGroupDirectionT } from './types';
+
+interface RadioGroupPropT {
+  modelValue?: string | boolean | number;
+  disabled?: boolean;
+  /**
+   * 单选组方向: 'horizontal' | 'vertical'
+   */
+  direction?: RadioGroupDirectionT;
+}
+
+const props = withDefaults(defineProps<RadioGroupPropT>(), {
+  modelValue: undefined,
+  disabled: false,
+  direction: 'horizontal',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number | boolean): void;
+  (e: 'change', val: string | number | boolean): void;
+}>();
+
+const { modelValue, disabled } = toRefs(props);
+
+const onChange = (val: string | number | boolean) => {
+  emit('update:modelValue', val);
+  emit('change', val);
+};
+
+provide(radioGroupInjectKey, { modelValue, disabled, onChange });
+</script>
+
+<template>
+  <div class="o-radio-group" :class="[`is-${props.direction}`]">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
new file mode 100644
index 00000000..94ba632f
--- /dev/null
+++ b/packages/opendesign/src/components/radio/__demo__/IndexRadio.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import '../style';
+import RadioBasic from './RadioBasic.vue';
+import RadioDisabled from './RadioDisabled.vue';
+import RadioGroup from './RadioGroup.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <h4>基础用法</h4>
+    <RadioBasic />
+    <h4>禁用状态</h4>
+    <RadioDisabled />
+    <h4>单选框组</h4>
+    <RadioGroup />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
new file mode 100644
index 00000000..c1d7c43c
--- /dev/null
+++ b/packages/opendesign/src/components/radio/__demo__/RadioBasic.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORadio } from '../index';
+const radioVal = ref(1);
+</script>
+
+<template>
+  <section>
+    <ORadio v-model="radioVal" :value="1">选项1</ORadio>
+    <ORadio v-model="radioVal" :value="2">选项2</ORadio>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
new file mode 100644
index 00000000..843771e8
--- /dev/null
+++ b/packages/opendesign/src/components/radio/__demo__/RadioDisabled.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORadio } from '../index';
+const radioVal = ref(1);
+</script>
+
+<template>
+  <section>
+    <ORadio v-model="radioVal" :value="1" disabled>选项1</ORadio>
+    <ORadio v-model="radioVal" :value="2" disabled>选项2</ORadio>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
new file mode 100644
index 00000000..b58b4168
--- /dev/null
+++ b/packages/opendesign/src/components/radio/__demo__/RadioGroup.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ORadio, ORadioGroup } from '../index';
+const radioVal1 = ref(1);
+const radioVal2 = ref('a');
+const handleChange = (val: string | number | boolean) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <section>
+    <ORadioGroup v-model="radioVal1">
+      <ORadio :value="1">选项1</ORadio>
+      <ORadio :value="2">选项2</ORadio>
+      <ORadio :value="3">选项3</ORadio>
+    </ORadioGroup>
+  </section>
+
+  <section>
+    <ORadioGroup v-model="radioVal2" direction="vertical" @change="handleChange">
+      <ORadio value="a">选项A</ORadio>
+      <ORadio value="b">选项B</ORadio>
+      <ORadio value="c">选项C</ORadio>
+    </ORadioGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/radio/index.ts b/packages/opendesign/src/components/radio/index.ts
new file mode 100644
index 00000000..db101b1d
--- /dev/null
+++ b/packages/opendesign/src/components/radio/index.ts
@@ -0,0 +1,20 @@
+import type { App } from 'vue';
+
+import _ORadio from './ORadio.vue';
+import _ORadioGroup from '../radio/ORadioGroup.vue';
+
+export * from './types';
+
+const ORadio = Object.assign(_ORadio, {
+  install(app: App) {
+    app.component(_ORadio.name, _ORadio);
+  },
+});
+
+const ORadioGroup = Object.assign(_ORadioGroup, {
+  install(app: App) {
+    app.component(_ORadioGroup.name, _ORadioGroup);
+  },
+});
+
+export { ORadio, ORadioGroup };
diff --git a/packages/opendesign/src/components/radio/provide.ts b/packages/opendesign/src/components/radio/provide.ts
new file mode 100644
index 00000000..e0d9ab18
--- /dev/null
+++ b/packages/opendesign/src/components/radio/provide.ts
@@ -0,0 +1,7 @@
+import { InjectionKey, Ref } from 'vue';
+
+export const radioGroupInjectKey: InjectionKey<{
+  modelValue: Ref<string | number | boolean>;
+  disabled: Ref<boolean>;
+  onChange: (val: string | number | boolean) => void;
+}> = Symbol('provide-radiogroup');
diff --git a/packages/opendesign/src/components/radio/style/index.scss b/packages/opendesign/src/components/radio/style/index.scss
new file mode 100644
index 00000000..f06574d4
--- /dev/null
+++ b/packages/opendesign/src/components/radio/style/index.scss
@@ -0,0 +1,91 @@
+@import './var.scss';
+
+.o-radio {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: var(--radio-text-size);
+  line-height: var(--radio-text-height);
+  color: var(--radio-color);
+
+  cursor: pointer;
+
+  input[type='radio'] {
+    position: absolute;
+    outline: none;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+  }
+
+  .o-radio-icon {
+    position: relative;
+    display: inline-block;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    background: var(--o-color-bg2);
+    border: 1px solid var(--o-color-border1);
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: transparent;
+      transition: background-color 0.3s;
+    }
+  }
+
+  .o-radio-label {
+    margin-left: 8px;
+  }
+
+  &.is-checked {
+    .o-radio-icon {
+      &::after {
+        background-color: var(--radio-icon-checked);
+      }
+    }
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--radio-color_disabled);
+    .o-radio-icon {
+      border-color: var(--o-color-border2);
+    }
+  }
+
+  &.is-checked.is-disabled {
+    .o-radio-icon {
+      &::after {
+        background-color: var(--radio-icon-checked_disabled);
+      }
+    }
+  }
+}
+
+.o-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  &.is-horizontal {
+    .o-radio + .o-radio {
+      margin-left: var(--radio-group-gap);
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+    .o-radio + .o-radio {
+      margin-top: var(--radio-group-gap);
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/radio/style/index.ts b/packages/opendesign/src/components/radio/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/radio/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/radio/style/var.scss b/packages/opendesign/src/components/radio/style/var.scss
new file mode 100644
index 00000000..35832ff4
--- /dev/null
+++ b/packages/opendesign/src/components/radio/style/var.scss
@@ -0,0 +1,14 @@
+.o-radio {
+  --radio-color: var(--o-color-text1);
+  --radio-color_disabled: var(--o-color-text4);
+
+  --radio-text-size: var(--o-font_size-text);
+  --radio-text-height: var(--o-line_height-text);
+
+  --radio-icon-checked: var(--o-color-primary1);
+  --radio-icon-checked_disabled: var(--o-color-primary4);
+}
+
+.o-radio-group {
+  --radio-group-gap: var(--o-gap-2);
+}
diff --git a/packages/opendesign/src/components/radio/types.ts b/packages/opendesign/src/components/radio/types.ts
new file mode 100644
index 00000000..60394c6e
--- /dev/null
+++ b/packages/opendesign/src/components/radio/types.ts
@@ -0,0 +1 @@
+export type RadioGroupDirectionT = 'horizontal' | 'vertical';
diff --git a/packages/opendesign/src/components/select/index.ts b/packages/opendesign/src/components/select/index.ts
index 54dbbeb8..c3485864 100644
--- a/packages/opendesign/src/components/select/index.ts
+++ b/packages/opendesign/src/components/select/index.ts
@@ -1,14 +1,10 @@
 import _OSelect from './OSelect.vue';
 import type { App } from 'vue';
 
-// export * from './types';
-
 const OSelect = Object.assign(_OSelect, {
   install(app: App) {
     app.component(_OSelect.name, _OSelect);
   },
 });
 
-export {
-  OSelect,
-};
+export { OSelect };
diff --git a/packages/opendesign/src/components/switch/OSwitch.vue b/packages/opendesign/src/components/switch/OSwitch.vue
index b8193e15..df75b037 100644
--- a/packages/opendesign/src/components/switch/OSwitch.vue
+++ b/packages/opendesign/src/components/switch/OSwitch.vue
@@ -3,7 +3,7 @@ import { isPromise, isBoolean } from '../_shared/utils';
 
 import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
-import { IconLoading } from '../icons';
+import { getLoadingIcon } from '../_shared/icons';
 
 interface SwitchPropT {
   /**
@@ -68,6 +68,7 @@ const onClick = () => {
       console.warn(`${err}`);
     });
 };
+const IconLoading = getLoadingIcon();
 </script>
 
 <template>
diff --git a/packages/opendesign/src/components/switch/index.ts b/packages/opendesign/src/components/switch/index.ts
index c4b4620a..ba1b8867 100644
--- a/packages/opendesign/src/components/switch/index.ts
+++ b/packages/opendesign/src/components/switch/index.ts
@@ -1,7 +1,6 @@
-import _OSWitch from './OSwitch.vue';
 import type { App } from 'vue';
 
-// export * from './types';
+import _OSWitch from './OSwitch.vue';
 
 const OSWitch = Object.assign(_OSWitch, {
   install(app: App) {
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index 151cb414..507f2c21 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -70,6 +70,7 @@
   .o-switch-wrapper {
     font-size: var(--switch-text-size-m);
     line-height: var(--switch-text-height-m);
+
     .o-switch-handler {
       width: 16px;
       height: 16px;
diff --git a/packages/opendesign/src/components/switch/style/var.scss b/packages/opendesign/src/components/switch/style/var.scss
index 2d97423c..ab95ef3b 100644
--- a/packages/opendesign/src/components/switch/style/var.scss
+++ b/packages/opendesign/src/components/switch/style/var.scss
@@ -3,7 +3,9 @@
   --switch-bg_disabled: var(--o-color-info4);
   --switch-bg-checked: var(--o-color-primary1);
   --switch-bg-checked_disabled: var(--o-color-primary4);
+
   --switch-handler-bg: var(--o-color-bg2);
+
   --switch-color: var(--o-color-text1_inverse);
 
   --switch-text-size-l: var(--o-font_size-h4);
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index a55adc35..0b9c26c2 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -57,8 +57,12 @@ export const routes = [
     label: '下拉框',
     component: () => import('@demo/select/__demo__/IndexSelect.vue'),
   },
-
-
+  {
+    path: '/radio',
+    name: 'Radio',
+    label: '单选',
+    component: () => import('@demo/radio/__demo__/IndexRadio.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee