From 91dd24ec46d6c676d018b4569e4c8d5ecc28e195 Mon Sep 17 00:00:00 2001
From: jacknan <zhumaonan@aliyun.com>
Date: Wed, 22 Nov 2023 15:17:19 +0800
Subject: [PATCH] feat(radio): refresh radio UI (#845)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(radio): 刷新设计规范

Signed-off-by: jacknan <zhumaonan@aliyun.com>

* feat(radio): 刷新设计规范

Signed-off-by: jacknan <zhumaonan@aliyun.com>

* feat(radio): 拆分特性demo

Signed-off-by: jacknan <zhumaonan@aliyun.com>

* feat(radio): 刷新token定义，添加注释

Signed-off-by: jacknan <zhumaonan@aliyun.com>

* feat(radio): 优化demo

Signed-off-by: jacknan <zhumaonan@aliyun.com>

---------

Signed-off-by: jacknan <zhumaonan@aliyun.com>
---
 .../sites/demos/mobile/app/radio/base.vue     | 112 ++---------------
 .../sites/demos/mobile/app/radio/border.vue   |  27 ----
 .../sites/demos/mobile/app/radio/disabled.vue |  15 ++-
 .../demos/mobile/app/radio/event-change.vue   |  32 -----
 .../sites/demos/mobile/app/radio/event.vue    |  37 ++++++
 .../sites/demos/mobile/app/radio/label.vue    |  30 +++++
 .../demos/mobile/app/radio/webdoc/radio.js    |  74 +++++------
 packages/theme-mobile/src/radio/index.less    | 116 ++++++++++--------
 packages/theme-mobile/src/radio/vars.less     |  22 +++-
 packages/vue/src/radio/src/mobile.vue         |  16 ++-
 10 files changed, 205 insertions(+), 276 deletions(-)
 delete mode 100644 examples/sites/demos/mobile/app/radio/border.vue
 delete mode 100644 examples/sites/demos/mobile/app/radio/event-change.vue
 create mode 100644 examples/sites/demos/mobile/app/radio/event.vue
 create mode 100644 examples/sites/demos/mobile/app/radio/label.vue

diff --git a/examples/sites/demos/mobile/app/radio/base.vue b/examples/sites/demos/mobile/app/radio/base.vue
index 78deebe28..10154eea4 100644
--- a/examples/sites/demos/mobile/app/radio/base.vue
+++ b/examples/sites/demos/mobile/app/radio/base.vue
@@ -1,87 +1,20 @@
 <template>
   <div class="demo">
-    <p class="demo-title">勾选-单选</p>
-    <div>
-      <tiny-list
-        class="demo-list"
-        v-for="item of dataList"
-        :key="item.id"
-        :id="item.id"
-        :content="item.content"
-        :sub-text="item.subtext"
-        @click="clickFn"
-      >
-        <template #suffix>
-          <tiny-radio v-model="value1" :label="item.id"></tiny-radio>
-        </template>
-      </tiny-list>
-    </div>
-    <div class="withlist">
-      <tiny-list
-        class="demo-list"
-        v-for="item of dataList1"
-        :key="item.id"
-        :id="item.id"
-        :content="item.content"
-        :sub-text="item.subtext"
-        :content-des="item.contentdes"
-        @click="clickFn"
-      >
-        <template #suffix>
-          <tiny-radio v-model="value1" :label="item.id"></tiny-radio>
-        </template>
-      </tiny-list>
-    </div>
+    <p>默认</p>
+    <tiny-radio v-model="value"></tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
-import { Radio, List } from '@opentiny/vue'
+<script>
+import { Radio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyList: List
+    TinyRadio: Radio
   },
   data() {
     return {
-      value1: '1',
-      value2: '1',
-      dataList: [
-        {
-          id: '1',
-          content: '主文本1',
-          subtext: '次文本1',
-          contentdes: '这是描述文本1'
-        },
-        {
-          id: '2',
-          content: '主文本2',
-          subtext: '次文本2',
-          contentdes: '这是描述文本2'
-        }
-      ],
-      dataList1: [
-        {
-          id: '1',
-          content: '主文本1',
-          subtext: '',
-          contentdes: '这是描述文本1'
-        },
-        {
-          id: '2',
-          content: '主文本2',
-          subtext: '',
-          contentdes: '这是描述文本2'
-        }
-      ]
-    }
-  },
-  methods: {
-    clickFn(list) {
-      if (list.id) {
-        this.value1 = list.id
-      }
+      value: false
     }
   }
 }
@@ -89,39 +22,8 @@ export default {
 
 <style>
 .demo {
-  background: #eeeeee;
   height: 100%;
   overflow-y: scroll;
-}
-.demo-title {
-  padding-right: 16px;
-  padding-left: 16px;
-  margin-top: 0.77em;
-  margin-bottom: 0.3em;
-  color: #666;
-  font-size: 14px;
-}
-.demo-list {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  padding: 8px 16px;
-}
-.withlist {
-  margin-top: 20px;
-}
-.demo .tiny-mobile-list__content-des {
-  margin-top: 4px;
-  color: #999;
-  font-size: 12px;
-  line-height: 1.6;
-  text-align: justify;
-}
-.demo .tiny-mobile-radio__label {
-  display: none;
+  padding: 20px;
 }
 </style>
diff --git a/examples/sites/demos/mobile/app/radio/border.vue b/examples/sites/demos/mobile/app/radio/border.vue
deleted file mode 100644
index 90e963eb1..000000000
--- a/examples/sites/demos/mobile/app/radio/border.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="radio-wrap">
-    <tiny-radio v-model="value" label="1" border>单选框 1</tiny-radio>
-    <tiny-radio v-model="value" label="2" border>单选框 2</tiny-radio>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Radio } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio
-  },
-  data() {
-    return {
-      value: '1'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.radio-wrap {
-  padding: 20px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/radio/disabled.vue b/examples/sites/demos/mobile/app/radio/disabled.vue
index 63bc186de..5394637c0 100644
--- a/examples/sites/demos/mobile/app/radio/disabled.vue
+++ b/examples/sites/demos/mobile/app/radio/disabled.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="radio-wrap">
-    <tiny-radio v-model="value" label="1" border disabled text="单选框 1"></tiny-radio>
-    <tiny-radio v-model="value" label="2" border name="name">单选框 2</tiny-radio>
+  <div class="demo">
+    <p>禁用</p>
+    <tiny-radio v-model="value" label="1" disabled>我同意</tiny-radio>
+    <tiny-radio v-model="value" label="2" disabled>我拒绝</tiny-radio>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Radio } from '@opentiny/vue'
 
 export default {
@@ -20,8 +21,10 @@ export default {
 }
 </script>
 
-<style scoped>
-.radio-wrap {
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
   padding: 20px;
 }
 </style>
diff --git a/examples/sites/demos/mobile/app/radio/event-change.vue b/examples/sites/demos/mobile/app/radio/event-change.vue
deleted file mode 100644
index ae1dd334f..000000000
--- a/examples/sites/demos/mobile/app/radio/event-change.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="radio-wrap">
-    <tiny-radio v-model="value" label="1" @change="handleChange">单选框 1</tiny-radio>
-    <tiny-radio v-model="value" label="2" @change="handleChange">单选框 2</tiny-radio>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Radio } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio
-  },
-  data() {
-    return {
-      value: '1'
-    }
-  },
-  methods: {
-    handleChange(val) {
-      console.log('当前单选框为： ' + val)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.radio-wrap {
-  padding: 20px;
-}
-</style>
diff --git a/examples/sites/demos/mobile/app/radio/event.vue b/examples/sites/demos/mobile/app/radio/event.vue
new file mode 100644
index 000000000..989a8d46e
--- /dev/null
+++ b/examples/sites/demos/mobile/app/radio/event.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="demo">
+    <p>默认</p>
+    <tiny-radio v-model="value" label="1" @change="changeAction">男</tiny-radio>
+    <tiny-radio v-model="value" label="2" @change="changeAction">女</tiny-radio>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+import { Radio } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio: Radio
+  },
+  data() {
+    return {
+      value: '1',
+      text: '男'
+    }
+  },
+  methods: {
+    changeAction(value) {
+      this.text = value === '1' ? '男' : '女'
+    }
+  }
+}
+</script>
+
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
+  padding: 20px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/radio/label.vue b/examples/sites/demos/mobile/app/radio/label.vue
new file mode 100644
index 000000000..21446b5fd
--- /dev/null
+++ b/examples/sites/demos/mobile/app/radio/label.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="demo">
+    <p>默认</p>
+    <tiny-radio v-model="value" label="1">男</tiny-radio>
+    <tiny-radio v-model="value" label="2">女</tiny-radio>
+  </div>
+</template>
+
+<script>
+import { Radio } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyRadio: Radio
+  },
+  data() {
+    return {
+      value: '1'
+    }
+  }
+}
+</script>
+
+<style>
+.demo {
+  height: 100%;
+  overflow-y: scroll;
+  padding: 20px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/radio/webdoc/radio.js b/examples/sites/demos/mobile/app/radio/webdoc/radio.js
index a8f31393a..d9df40b24 100644
--- a/examples/sites/demos/mobile/app/radio/webdoc/radio.js
+++ b/examples/sites/demos/mobile/app/radio/webdoc/radio.js
@@ -14,41 +14,41 @@ export default {
       },
       codeFiles: ['base.vue']
     },
-    {
-      demoId: 'border',
-      name: {
-        'zh-CN': '显示边框',
-        'en-US': 'button type'
-      },
-      desc: {
-        'zh-CN': '<p>显示边框</p>',
-        'en-US': '<p>button type</p>'
-      },
-      codeFiles: ['border.vue']
-    },
     {
       demoId: 'disabled',
       name: {
-        'zh-CN': '是否禁用',
-        'en-US': 'button round'
+        'zh-CN': '禁用状态',
+        'en-US': 'disabled'
       },
       desc: {
-        'zh-CN': '<p>是否禁用</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN': '<p>禁用</p>',
+        'en-US': '<p>disabled</p>'
       },
       codeFiles: ['disabled.vue']
     },
     {
-      demoId: 'event-change',
+      demoId: 'label',
       name: {
-        'zh-CN': '值改变事件',
-        'en-US': 'events'
+        'zh-CN': '自定义label',
+        'en-US': 'custom label'
       },
       desc: {
-        'zh-CN': '<p>值改变事件</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>自定义label</p>',
+        'en-US': '<p>custom label</p>'
       },
-      codeFiles: ['event-change.vue']
+      codeFiles: ['label.vue']
+    },
+    {
+      demoId: 'event',
+      name: {
+        'zh-CN': '选中状态事件',
+        'en-US': 'event'
+      },
+      desc: {
+        'zh-CN': '<p>事件</p>',
+        'en-US': '<p>event</p>'
+      },
+      codeFiles: ['event.vue']
     }
   ],
   apis: [
@@ -58,7 +58,7 @@ export default {
       properties: [
         {
           name: 'disabled',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>是否禁用</p>',
@@ -66,55 +66,45 @@ export default {
           },
           demoId: 'disabled'
         },
-        {
-          name: 'border',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否显示边框</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'border'
-        },
         {
           name: 'label',
-          type: 'Object | String',
+          type: 'object | string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>Radio 的 value,该属性默认为{}</p>',
             'en-US': 'display different button'
           },
-          demoId: 'event-change'
+          demoId: 'label'
         },
         {
           name: 'name',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>原生 name 属性</p>',
             'en-US': 'display different button'
           },
-          demoId: 'disabled'
+          demoId: 'base'
         },
         {
           name: 'text',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>文本</p>',
             'en-US': 'display different button'
           },
-          demoId: 'disabled'
+          demoId: 'base'
         },
         {
           name: 'value',
-          type: 'Object | String',
+          type: 'object | string',
           defaultValue: '{}',
           desc: {
             'zh-CN': '<p>绑定值，该属性默认为{}</p>',
             'en-US': 'display different button'
           },
-          demoId: 'border'
+          demoId: 'base'
         }
       ],
       events: [
@@ -126,7 +116,7 @@ export default {
             'zh-CN': '<p>绑定值变化时触发的事件,可获取changeValue</p>',
             'en-US': 'Click'
           },
-          demoId: 'event-change'
+          demoId: 'event'
         }
       ],
       slots: [
diff --git a/packages/theme-mobile/src/radio/index.less b/packages/theme-mobile/src/radio/index.less
index 6cbc99ca7..f751aba38 100644
--- a/packages/theme-mobile/src/radio/index.less
+++ b/packages/theme-mobile/src/radio/index.less
@@ -28,7 +28,7 @@
   }
 
   &,
-  &__inner,
+  &__outer,
   &__input {
     position: relative;
     display: inline-block;
@@ -43,78 +43,91 @@
     vertical-align: middle;
   }
 
-  &__inner {
-    border: 1px solid transparent;
+  &__outer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    background-color: #fff;
+    width: var(--ti-mobile-radio-size-outer, 20px);
+    height: var(--ti-mobile-radio-size-outer, 20px);
+    border: 1.5px solid var(--ti-mobile-radio-border-color-default);
     border-radius: 50%;
-    width: var(--ti-mobile-radio-size, 24px);
-    height: var(--ti-mobile-radio-size, 24px);
-    background-color: transparent;
-    cursor: pointer;
-    box-sizing: border-box;
-    transition-duration: 0.2s;
-    transition-property: color, border-color, background-color;
 
-    &::after {
-      content: '';
-      width: 8px;
-      height: 12px;
-      border-width: 0.1em;
-      border-style: solid;
-      border-color: var(--ti-mobile-radio-checked-color, #f36f64);
-      border-left: 0;
-      border-top: 0;
-      position: absolute;
-      left: 50%;
-      top: 45%;
-      transform: translate(-50%, -50%) rotate(45deg) scale(0);
-      transform-origin: center;
-      transition: all 0.15s ease-in;
+    &:after {
+      border-color: var(--ti-mobile-radio-checked-color);
       opacity: 0;
     }
   }
 
-  &:hover:not(.is-disabled) &__inner,
-  &.is-checked &__inner {
-    &::after {
-      transform: translate(-50%, -50%) rotate(45deg) scale(1);
+  &__inner {
+    width: var(--ti-mobile-radio-size-inner, 10px);
+    height: var(--ti-mobile-radio-size-inner, 10px);
+    background-color: transparent;
+    box-sizing: border-box;
+    border-radius: 999px;
+
+    &:after {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      top: 45%;
+      transform-origin: center;
+    }
+  }
+
+  &:hover:not(.is-disabled) &__outer,
+  &.is-checked &__outer {
+    &:after {
       opacity: 1;
     }
   }
 
-  &.is-disabled &__inner,
+  &.is-bordered:not(.is-disabled):hover &__inner {
+    border-color: var(--ti-mobile-radio-checked-color #1476ff);
+  }
+
+  &.is-checked &__inner {
+    border-color: var(--ti-mobile-radio-checked-color);
+    background-color: var(--ti-mobile-radio-checked-color);
+  }
+
+  &.is-checked &__outer {
+    border-color: var(--ti-mobile-radio-checked-color);
+  }
+
+  &.is-disabled &__outer,
   &.is-disabled &__label {
     cursor: not-allowed;
   }
 
-  &.is-disabled.is-checked &__inner {
+  &.is-disabled.is-checked &__outer {
+    border-color: var(--ti-mobile-radio-color-disabled);
+
     &:after {
-      border-color: var(--ti-mobile-radio-disabled-color, #ddd);
+      border-color: var(--ti-mobile-radio-color-disabled);
     }
   }
 
-  &.is-bordered &__inner {
-    border-color: var(--ti-mobile-radio-disabled-color, #ddd);
+  &.is-disabled.is-checked &__inner {
+    background-color: var(--ti-mobile-radio-color-disabled);
+    border-color: var(--ti-mobile-radio-color-disabled);
 
-    &::after {
-      border-color: var(--ti-mobile-radio-inner-border-color, #fff);
+    &:after {
+      border-color: var(--ti-mobile-radio-color-disabled);
     }
   }
 
-  &.is-bordered:not(.is-disabled):hover &__inner {
-    border-color: var(--ti-mobile-radio-checked-color, #f36f64);
-  }
+  &.is-disabled &__inner {
+    background-color: var(--ti-mobile-radio-bg-color-disabled);
+    border-color: var(--ti-mobile-radio-color-disabled);
 
-  &.is-bordered.is-checked &__inner {
-    border-color: var(--ti-mobile-radio-checked-color, #f36f64);
-    background-color: var(--ti-mobile-radio-checked-color, #f36f64);
-  }
-
-  &.is-bordered.is-disabled.is-checked &__inner {
-    background-color: var(--ti-mobile-radio-disabled-color, #ddd);
-    border-color: var(--ti-mobile-radio-disabled-color, #ddd);
-
-    &::after {
-      border-color: var(--ti-mobile-radio-inner-border-color, #fff);
+    &:after {
+      border-color: var(--ti-mobile-radio-color-disabled);
+      background-color: var(--ti-mobile-radio-bg-color-disabled);
     }
   }
 
@@ -131,7 +144,8 @@
   }
 
   &__label {
-    font-size: var(--ti-mobile-radio-label-font-size, 16px);
+    font-size: var(--ti-mobile-radio-label-font-size);
+    color: var(--ti-mobile-radio-label-text-color);
     padding-left: 8px;
     vertical-align: middle;
   }
diff --git a/packages/theme-mobile/src/radio/vars.less b/packages/theme-mobile/src/radio/vars.less
index 5cddf7e70..e073220bd 100644
--- a/packages/theme-mobile/src/radio/vars.less
+++ b/packages/theme-mobile/src/radio/vars.less
@@ -1,7 +1,21 @@
 :root {
+  // 组件尺寸
   --ti-mobile-radio-size: 24px;
-  --ti-mobile-radio-checked-color: #f36f64;
-  --ti-mobile-radio-disabled-color: #ddd;
-  --ti-mobile-radio-inner-border-color: var(--ti-mobile-base-color-light, #fff);
-  --ti-mobile-radio-label-font-size: 16px;
+  // 外圈尺寸
+  --ti-mobile-radio-size-outer: 20px;
+  // 内圆尺寸
+  --ti-mobile-radio-size-inner: 10px;
+  --ti-mobile-radio-checked-color: var(--ti-mobile-color-icon-link, #1476ff);
+  // 外圈默认颜色
+  --ti-mobile-radio-border-color-default: var(--ti-mobile-color-border-default, #c2c2c2);
+  // 不可用状态填充颜色
+  --ti-mobile-radio-color-disabled: var(--ti-mobile-color-border-disabled, #dbdbdb);
+  // 不可用状态背景色
+  --ti-mobile-radio-bg-color-disabled: var(--ti-mobile-color-bg-container-2, #fafafa);
+  // 文字大小
+  --ti-mobile-radio-label-font-size: var(--ti-mobile-font-size-l, 16px);
+  // 文字颜色
+  --ti-mobile-radio-label-text-color: var(--ti-mobile-color-text-primary, #191919);
+  // 文字左边距
+  --ti-mobile-radio-label-padding-left: var(--ti-mobile-space-3x, 12px);
 }
diff --git a/packages/vue/src/radio/src/mobile.vue b/packages/vue/src/radio/src/mobile.vue
index 320c864ed..0c86e9e96 100644
--- a/packages/vue/src/radio/src/mobile.vue
+++ b/packages/vue/src/radio/src/mobile.vue
@@ -12,12 +12,7 @@
 <template>
   <label
     class="tiny-mobile-radio"
-    :class="[
-      { 'is-disabled': state.isDisabled },
-      { 'is-focus': state.focus },
-      { 'is-bordered': border },
-      { 'is-checked': state.model === label }
-    ]"
+    :class="[{ 'is-disabled': state.isDisabled }, { 'is-focus': state.focus }, { 'is-checked': state.model === label }]"
     role="radio"
     :aria-checked="state.model === label"
     :aria-disabled="state.isDisabled"
@@ -25,7 +20,10 @@
     @keydown.space.stop.prevent="state.model = state.isDisabled ? state.model : label"
   >
     <div class="tiny-mobile-radio__input">
-      <span class="tiny-mobile-radio__inner"></span>
+      <div class="tiny-mobile-radio__outer">
+        <div class="tiny-mobile-radio__inner"></div>
+      </div>
+
       <input
         ref="radio"
         class="tiny-mobile-radio__original"
@@ -53,8 +51,8 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme-mobile/radio/index.less'
 
 export default defineComponent({
-  emits: ['change'],
-  props: [...props, 'modelValue', 'events', 'label', 'text', 'disabled', 'name', 'border', 'size'],
+  emits: ['change', 'update:modelValue'],
+  props: [...props, 'modelValue', 'events', 'label', 'text', 'disabled', 'name'],
   inheritAttrs: false,
   setup(props, context) {
     return setup({ props, context, renderless, api })