Radio 单选框 ​

<template>
  <div>
    <w-radio-group v-model="size" class="mb-8" aria-label="size control">
      <w-radio-button value="large">large</w-radio-button>
      <w-radio-button value="default">default</w-radio-button>
      <w-radio-button value="small">small</w-radio-button>
    </w-radio-group>

    <div class="flex gap-8 mb-4" style="flex-wrap: wrap">
      <w-radio-group v-model="radio1" :size="size">
        <w-radio value="1">选项 1</w-radio>
        <w-radio value="2">选项 2</w-radio>
      </w-radio-group>
      <w-radio-group v-model="radio2" :size="size" disabled>
        <w-radio value="1">选项 1</w-radio>
        <w-radio value="2">选项 2</w-radio>
      </w-radio-group>
      <w-radio-group v-model="radio3" :size="size">
        <w-radio value="1" border>选项 A</w-radio>
        <w-radio value="2" border disabled>选项 B</w-radio>
      </w-radio-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ComponentSize } from 'win-design-next'

const size = ref<ComponentSize>('default')

const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
</script>

<template>
  <div>
    <div class="mb-8">
      <w-title class="mb-4">基础用法：通过 options 配置选项</w-title>
      <w-radio-group v-model="radio" :options="options" />
    </div>

    <div class="mb-8">
      <w-title class="mb-4">按钮形态：type="button"</w-title>
      <div class="flex gap-8" style="flex-wrap: wrap">
        <w-radio-group v-model="radioButton" :options="options" type="button" />
      </div>
    </div>

    <div>
      <w-title class="mb-4 mt-4">自定义字段名：props</w-title>
      <div class="flex gap-8" style="flex-wrap: wrap">
        <w-radio-group
          v-model="radioAlias"
          type="button"
          :options="aliasOptions"
          :props="{ label: 'name', value: 'id' }"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio = ref('1')
const radioButton = ref('2')
const radioAlias = ref(1)

const options = [
  { label: '呼吸科', value: '1' },
  { label: '妇产科', value: '2' },
  { label: '儿科', value: '3', disabled: true },
  { label: '骨科', value: '4', disabled: true },
]

const aliasOptions = [
  { name: '内科', id: 1 },
  { name: '外科', id: 2 },
  { name: '妇产科', id: 3 },
]
</script>

<template>
  <div class="mb-8">
    <w-title>默认</w-title>
    <w-radio-group v-model="radio">
      <w-radio label="选项 A" value="Value A" />
      <w-radio label="选项 B" value="Value B" />
      <w-radio label="选项 C" value="Value C" />
      <w-radio label="禁用" value="Value disabled" disabled />
      <w-radio
        label="已选中且禁用"
        value="Value selected and disabled"
        disabled
      />
    </w-radio-group>
  </div>
  <div>
    <w-title
      >通过 change 事件来响应变化，它会传入一个参数 value
      来表示改变之后的值。</w-title
    >
    <w-radio-group v-model="radioCity" @change="handleChange">
      <w-radio v-for="city in cities" :key="city" :label="city" :value="city">
        {{ city }}
      </w-radio>
    </w-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio = ref('Value selected and disabled')
const radioCity = ref('内科')
const cities = ['内科', '外科', '妇产科', '新生儿科']

const handleChange = (val: string | number | boolean | undefined) => {
  console.log(val)
}
</script>

<template>
  <div>
    <w-radio-group
      v-model="radio"
      allow-deselect
      :options="options"
      :props="props"
      @change="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio = ref(3)
const props = { value: 'id', label: 'name', disabled: 'unable' }
const options = [
  {
    id: 3,
    name: '耳鼻喉科',
  },
  {
    id: 6,
    name: '眼科',
  },
  {
    id: 8,
    name: '口腔科',
  },
  {
    id: '10',
    name: '皮肤科',
  },
  {
    id: 9,
    name: '皮肤科',
    unable: true,
  },
]

function handleChange(val) {
  console.log(val)
}
</script>

<template>
  <div class="flex gap-4">
    <w-radio-group v-model="size" aria-label="size control">
      <w-radio-button value="large">large</w-radio-button>
      <w-radio-button value="default">default</w-radio-button>
      <w-radio-button value="small">small</w-radio-button>
      <w-radio-button value="mini">mini</w-radio-button>
    </w-radio-group>
    <w-checkbox-group v-model="styles" aria-label="style control">
      <w-checkbox-button value="tight">tight</w-checkbox-button>
      <w-checkbox-button value="discrete">discrete</w-checkbox-button>
      <w-checkbox-button value="round">round</w-checkbox-button>
      <w-checkbox-button value="plain">plain</w-checkbox-button>
    </w-checkbox-group>
  </div>
  <div style="margin-top: 24px">
    <w-radio-group
      v-model="radioGroup"
      :size="size"
      :tight="styles.includes('tight')"
      :discrete="styles.includes('discrete')"
      :round="styles.includes('round')"
      :plain="styles.includes('plain')"
    >
      <w-radio-button
        v-for="city in cities"
        :key="city"
        :value="city"
        :disabled="['外科（已选中禁用）', '新生儿科（禁用）'].includes(city)"
      >
        {{ city }}
      </w-radio-button>
    </w-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ComponentSize } from 'win-design-next'

const size = ref<ComponentSize>('default')
const styles = ref<string[]>([])

const radioGroup = ref('外科（已选中禁用）')
const cities = [
  '内科',
  '呼吸科',
  '外科（已选中禁用）',
  '妇产科',
  '新生儿科（禁用）',
  '骨科',
]
</script>

<template>
  <div class="ellipsis-demo">
    <div class="ellipsis-demo__group">
      <div class="ellipsis-demo__title">默认样式</div>
      <w-radio-group v-model="radio">
        <w-radio value="1" label="血常规检查" />
        <w-radio value="4" label="血常规检查" border />
        <w-radio
          value="2"
          label="Electrocardiography monitoring during transport"
        />
        <w-radio value="3" label="Elektrokardiographieuntersuchung" />
      </w-radio-group>
    </div>
    <div class="ellipsis-demo__group">
      <div class="ellipsis-demo__title">带边框</div>
      <w-radio-group v-model="radioBorder">
        <w-radio value="1" label="血常规检查" border />
        <w-radio value="4" label="血常规检查" border />
        <w-radio
          value="2"
          label="Electrocardiography monitoring during transport"
          border
        />
        <w-radio value="3" label="Elektrokardiographieuntersuchung" border />
      </w-radio-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio = ref('1')
const radioBorder = ref('2')
</script>

<style scoped lang="scss">
.ellipsis-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.ellipsis-demo__group {
  width: 280px;

  :deep(.w3-radio-group) {
    width: 100%;
  }
}

.ellipsis-demo__title {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--w3-text-color-secondary, #909399);
}

.ellipsis-demo :deep(.w3-radio) {
  margin-bottom: 12px;
}
</style>

<template>
  <div class="overflow-demo">
    <div class="overflow-demo__group">
      <w-radio-group v-model="radioOverflow" show-overflow>
        <w-radio-button
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
          style="width: 80px"
        />
      </w-radio-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const options = [
  '血常规检查',
  '门诊心电图检查结果复核确认',
  'Elektrokardiographieuntersuchung',
]
const radioOverflow = ref(options[1])
</script>

<style scoped lang="scss">
.overflow-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.overflow-demo__group {
  flex: 0 0 270px;
  width: 270px;
  min-width: 0;
  overflow: hidden;

  :deep(.w3-radio-group) {
    width: 100%;
  }
}

.overflow-demo__title {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--w3-text-color-secondary, #909399);
}
</style>

<template>
  <div>
    <w-radio-group v-model="radio" direction="vertical">
      <w-radio v-for="dept in depts" :key="dept" :value="dept">
        {{ dept }}
      </w-radio>
    </w-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio = ref('内科')
const depts = ['内科', '外科', '妇产科', '新生儿科']
</script>