aurora-admin/frameworks-mobile/Checkbox.uniapp.vue

<template>
  <view class="kole-m-checkbox-group" :class="groupClass" role="group" :aria-label="label">
    <view
      v-if="selectAll"
      class="kole-m-checkbox kole-m-checkbox--all"
      :class="{ 'is-checked': allState === 'true', 'is-indeterminate': allState === 'mixed' }"
      :role="disabled ? '' : 'checkbox'"
      :aria-checked="allState"
      :aria-disabled="disabled ? 'true' : 'false'"
      @tap="toggleAll"
    >
      <view class="kole-m-checkbox__icon" />
      <view class="kole-m-checkbox__label"><text>全选</text></view>
    </view>
    <view
      v-for="(item, i) in options"
      :key="String(keyOf(item, i))"
      class="kole-m-checkbox"
      :class="{ 'kole-m-checkbox--button': button, 'is-checked': isPicked(item, i) }"
      :role="item && (item.disabled || disabled) ? '' : 'checkbox'"
      :aria-checked="isPicked(item, i) ? 'true' : 'false'"
      :aria-disabled="item && (item.disabled || disabled) ? 'true' : 'false'"
      @tap="toggle(item, i)"
    >
      <view class="kole-m-checkbox__icon" />
      <view class="kole-m-checkbox__label">
        <text>{{ item && item.label }}</text>
        <text v-if="item && item.desc" class="kole-m-checkbox__desc">{{ item.desc }}</text>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 多选框（移动端）— 规格 §34
   跨端差异：
   ① 项用 view + role="checkbox"（小程序没有可聚焦的原生 button 语义差异），点击用 @tap；
   ② 勾号用 view::after 两条边框拼（不引入图标字体），半选态改成一条横杠；
   ③ 禁用不用原生 disabled（view 没有），改为 aria-disabled + 代码拦截点击；
   ④ 全选行的三态由组内各项推导，半选写 aria-checked="mixed"。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长，方框 40rpx = 20px。 */
import { computed } from 'vue';

const props = defineProps({
  options: { type: Array, default: () => [] },
  value: { type: Array, default: () => [] },
  orientation: { type: String, default: 'vertical' },
  button: { type: Boolean, default: false },
  selectAll: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '多选项' }
});
const emit = defineEmits(['change']);

const groupClass = computed(() => [
  props.orientation === 'horizontal' ? 'kole-m-checkbox-group--horizontal' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function keyOf(item, i) {
  return item && item.value !== undefined ? item.value : String(i);
}
function isPicked(item, i) {
  return props.value.indexOf(keyOf(item, i)) >= 0;
}
function toggle(item, i) {
  if (props.disabled || (item && item.disabled)) return;
  const key = keyOf(item, i);
  const has = props.value.indexOf(key) >= 0;
  emit('change', has ? props.value.filter((k) => k !== key) : props.value.concat([key]));
}
const allState = computed(() => {
  const total = props.options.length;
  const picked = props.options.filter((o, i) => isPicked(o, i)).length;
  if (picked === 0) return 'false';
  return picked === total ? 'true' : 'mixed';
});
function toggleAll() {
  if (props.disabled) return;
  /* 只要还有没选中的就全选，否则全部清空（与演示页同一判据） */
  const anyOff = props.options.some((o, i) => !(o && o.disabled) && !isPicked(o, i));
  emit('change', anyOff ? props.options.filter((o) => o && !o.disabled).map((o) => o.value || '') : []);
}
</script>

<style>
.kole-m-checkbox-group {
  --kole-m-checkbox-size: 40rpx;   /* 方框边长（20px @375pt） */
  --kole-m-checkbox-gap: 24rpx;    /* 方框与文字的间距 */
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-checkbox-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.kole-m-checkbox-group:not(.kole-m-checkbox-group--horizontal) .kole-m-checkbox + .kole-m-checkbox {
  border-top: 1rpx solid var(--kole-color-border);
}

.kole-m-checkbox {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--kole-m-touch-target);
  padding: 24rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: inherit;
}

.kole-m-checkbox-group--horizontal .kole-m-checkbox {
  width: auto;
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.kole-m-checkbox:active { background-color: var(--kole-color-table-header-bg); }

/* 方框：未选中空心，选中品牌底 + 反色勾号（勾号用两条边框拼，不引图标字体） */
.kole-m-checkbox__icon {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--kole-m-checkbox-size);
  height: var(--kole-m-checkbox-size);
  margin-right: var(--kole-m-checkbox-gap);
  border: 1rpx solid var(--kole-color-text-placeholder);
  border-radius: 4rpx;
  background-color: var(--kole-color-card-bg);
}

.kole-m-checkbox__icon::after {
  content: '';
  position: absolute;
  top: 6rpx;
  left: 12rpx;
  width: 10rpx;
  height: 18rpx;
  border-color: var(--kole-color-text-inverse);
  border-style: solid;
  border-width: 0 4rpx 4rpx 0;
  transform: rotate(45deg) scale(0);
}

.kole-m-checkbox.is-checked .kole-m-checkbox__icon {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand);
}

.kole-m-checkbox.is-checked .kole-m-checkbox__icon::after { transform: rotate(45deg) scale(1); }

/* 状态 indeterminate（半选）：品牌底 + 一条横杠 */
.kole-m-checkbox.is-indeterminate .kole-m-checkbox__icon {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand);
}

.kole-m-checkbox.is-indeterminate .kole-m-checkbox__icon::after {
  top: 16rpx;
  left: 6rpx;
  width: 20rpx;
  height: 0;
  border-width: 0 0 4rpx 0;
  transform: rotate(0deg) scale(1);
}

.kole-m-checkbox__label { flex: 1; display: flex; flex-direction: column; }

.kole-m-checkbox__desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

/* 全选行：与普通项同一行结构，仅用一条分隔线把它和明细分开 */
.kole-m-checkbox--all {
  border-bottom: 1rpx solid var(--kole-color-border);
  color: var(--kole-color-text-title);
}

/* 变体 button=true：胶囊标签式（无方框） */
.kole-m-checkbox--button {
  width: auto;
  padding: 16rpx 32rpx;
  border: 1rpx solid var(--kole-color-border);
  border-radius: 999rpx;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-checkbox--button .kole-m-checkbox__icon { display: none; }

.kole-m-checkbox--button.is-checked {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand-bg);
  color: var(--kole-color-brand);
}

/* 状态 disabled：置灰且不响应 */
.kole-m-checkbox[aria-disabled='true'] { color: var(--kole-color-text-disabled); }

.kole-m-checkbox[aria-disabled='true'] .kole-m-checkbox__icon {
  border-color: var(--kole-color-text-disabled);
  background-color: var(--kole-color-disabled-bg);
}

.kole-m-checkbox--button[aria-disabled='true'] {
  border-color: var(--kole-color-border);
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}
</style>