Checkbox 多选框 ​

<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 mb-4" style="flex-wrap: wrap">
      <w-checkbox v-model="checked1" :size="size" label="选项 1" />
      <w-checkbox v-model="checked2" disabled :size="size" label="选项 2" />
      <w-checkbox v-model="checked3" disabled :size="size" label="选项 3" />
      <w-checkbox v-model="checked4" border :size="size" label="选项 4" />
    </div>
    <div class="flex gap-2" style="flex-wrap: wrap">
      <w-checkbox-button v-model="standalone1" self-badge :size="size"
        >内科</w-checkbox-button
      >
      <w-checkbox-button v-model="standalone1" self-badge :size="size" disabled
        >内科</w-checkbox-button
      >
      <w-checkbox-button
        v-model="standalone2"
        self-badge
        :size="size"
        show-overflow
        style="width: 120px"
        >Electrocardiography monitoring during transport</w-checkbox-button
      >
    </div>
  </div>
</template>

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

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

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

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(true)
const checked4 = ref(true)
const standalone1 = ref(true)
const standalone2 = ref(false)
</script>

<template>
  <div>
    <div class="mb-8">
      <w-title class="mb-4">基础用法：通过 options 配置选项</w-title>
      <w-checkbox-group v-model="checked" :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-checkbox-group
          v-model="checkedButton"
          :options="options"
          type="button"
        />
      </div>
    </div>

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

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

const checked = ref(['1', '4'])
const checkedButton = ref(['2', '4'])
const checkedAlias = ref([1])

const options = [
  { label: '呼吸科', value: '1' },
  { label: '妇产科', value: '2' },
  { label: '儿科', value: '3', disabled: true },
  { label: '妇产科', value: '5' },
  { 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-checkbox-group v-model="checkList">
      <w-checkbox label="选项 A" value="Value A" />
      <w-checkbox label="选项 B" value="Value B" />
      <w-checkbox label="选项 C" value="Value C" />
      <w-checkbox label="禁用" value="Value disabled" disabled />
      <w-checkbox
        label="已选中且禁用"
        value="Value selected and disabled"
        disabled
      />
    </w-checkbox-group>
  </div>
  <div class="mb-8">
    <w-title>
      indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
    </w-title>
    <w-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全选
    </w-checkbox>
    <w-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <w-checkbox
        v-for="city in cities"
        :key="city"
        :label="city"
        :value="city"
      >
        {{ city }}
      </w-checkbox>
    </w-checkbox-group>
  </div>
  <div>
    <w-title>使用 min 和 max 属性能够限制可以被勾选的项目的数量。</w-title>
    <w-checkbox-group v-model="checkedCities2" :min="1" :max="3">
      <w-checkbox
        v-for="city in cities"
        :key="city"
        :label="city"
        border
        :value="city"
      >
        {{ city }}
      </w-checkbox>
    </w-checkbox-group>
  </div>
</template>

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

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

const checkList = ref(['Value selected and disabled', 'Value A'])
const checkedCities2 = ref(['外科', '内科'])

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['内科', '外科'])
const cities = ['内科', '外科', '妇产科', '新生儿科']

const handleCheckAllChange = (val: CheckboxValueType) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</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-button value="show-badge">show-badge</w-checkbox-button>
    </w-checkbox-group>
  </div>
  <div style="margin-top: 24px">
    <w-checkbox-group
      v-model="checkboxGroup"
      :size="size"
      :tight="styles.includes('tight')"
      :discrete="styles.includes('discrete')"
      :round="styles.includes('round')"
      :plain="styles.includes('plain')"
      :show-badge="styles.includes('show-badge')"
    >
      <w-checkbox-button
        v-for="city in cities"
        :key="city"
        :value="city"
        :disabled="['外科（已选中禁用）', '新生儿科（禁用）'].includes(city)"
      >
        {{ city }}
      </w-checkbox-button>
    </w-checkbox-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 checkboxGroup = ref(['外科（已选中禁用）'])
const cities = [
  '内科',
  '呼吸科',
  '外科（已选中禁用）',
  '妇产科',
  '新生儿科（禁用）',
  '骨科',
]
</script>

<template>
  <div class="ellipsis-demo">
    <div class="ellipsis-demo__group">
      <div class="ellipsis-demo__title">默认样式</div>
      <w-checkbox-group v-model="checked">
        <w-checkbox value="base" label="血常规检查" />
        <w-checkbox value="base1" label="血常规检查" />
        <w-checkbox value="base2" label="血常规检查" />
        <w-checkbox
          value="en"
          label="Electrocardiography monitoring during transport"
        />
        <w-checkbox value="de" label="Elektrokardiographieuntersuchung" />
      </w-checkbox-group>
    </div>
    <div class="ellipsis-demo__group">
      <div class="ellipsis-demo__title">带边框</div>
      <w-checkbox-group v-model="checkedBorder">
        <w-checkbox value="base" label="血常规检查" border />
        <w-checkbox value="base2" label="血常规检查" border />
        <w-checkbox value="base3" label="血常规检查" border />
        <w-checkbox
          value="en"
          label="Electrocardiography monitoring during transport"
          border
        />
        <w-checkbox
          value="de"
          label="Elektrokardiographieuntersuchung"
          border
        />
      </w-checkbox-group>
    </div>
  </div>
</template>

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

const checked = ref(['en'])
const checkedBorder = ref<string[]>([])
</script>

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

.ellipsis-demo__group {
  width: 280px;
}

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

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

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

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

const options = [
  '血常规检查',
  '门诊心电图检查结果复核确认',
  'Elektrokardiographieuntersuchung',
]
const checkedOverflow = 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-checkbox-group) {
    width: 100%;
  }
}

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

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

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

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