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

<template>
  <view
    class="kole-m-colorpicker"
    :class="rootClass"
    :style="rootStyle"
    :data-value="current"
    :aria-label="label"
  >
    <view class="kole-m-colorpicker__current">
      <view class="kole-m-colorpicker__dot" aria-hidden="true"></view>
      <text v-if="showValue" class="kole-m-colorpicker__value">{{ current || '—' }}</text>
    </view>

    <view class="kole-m-colorpicker__swatches" :role="'radiogroup'" :aria-label="label" :style="gridStyle">
      <view
        v-for="(item, i) in presets"
        :key="colorOf(item) + '-' + i"
        class="kole-m-colorpicker__swatch"
        :class="isOn(item) ? 'is-selected' : ''"
        :role="disabled ? '' : 'radio'"
        :aria-checked="isOn(item) ? 'true' : 'false'"
        :aria-label="nameOf(item)"
        :aria-disabled="disabled ? 'true' : 'false'"
        :data-color="colorOf(item)"
        :style="{ '--kole-m-colorpicker-swatch': colorOf(item) }"
        @tap="pick(item)"
      ></view>
    </view>

    <view v-if="mode === 'custom'" class="kole-m-colorpicker__custom">
      <slot></slot>
    </view>
    <slot v-else></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 颜色选择器（移动端）— 规格 §45
   跨端差异：用 view / text；色块是 view + role="radio"（小程序没有可聚焦的原生 button 语义），
   点击用 @tap；禁用不用原生 disabled（view 没有），改为 aria-disabled + 代码拦截。
   色值是**数据**：写在 data-color 与 `--kole-m-colorpicker-swatch` 行内自定义属性上 ——
   组件样式表里不出现任何 hex（颜色本身就是要选的内容，不随主题变）。
   选中态是「外环 + 放大」而不是换色，浅色块上也能读出来（规格 §45.4）。
   尺寸用 rpx（88rpx = 375pt 下的 44px 触控最小边长，色块 64rpx = 32px）。 */
import { computed } from 'vue';

const props = defineProps({
  mode: { type: String, default: 'swatch' },
  round: { type: Boolean, default: false },
  showValue: { type: Boolean, default: true },
  disabled: { type: Boolean, default: false },
  value: { type: String, default: '' },
  presets: { type: Array, default: () => [] },
  columns: { type: Number, default: 6 },
  label: { type: String, default: '颜色' }
});
const emit = defineEmits(['change']);

/* presets 项可以是字符串，也可以是 { value, label } 对象 */
function colorOf(item) {
  if (item === null || item === undefined) return '';
  if (typeof item === 'object') return String(item.value === undefined ? '' : item.value);
  return String(item);
}

function nameOf(item) {
  if (item && typeof item === 'object' && item.label) return String(item.label);
  return colorOf(item);
}

const current = computed(() => String(props.value || ''));

const rootClass = computed(() => [
  'kole-m-colorpicker--' + (props.mode === 'custom' ? 'custom' : 'swatch'),
  props.round ? 'kole-m-colorpicker--round' : '',
  props.showValue ? '' : 'kole-m-colorpicker--no-value',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

/* 当前色用行内自定义属性传给样式表（样式表里没有 hex） */
const rootStyle = computed(() => ({
  '--kole-m-colorpicker-current': current.value || 'transparent'
}));
const gridStyle = computed(() => ({ '--kole-m-colorpicker-columns': String(props.columns) }));

function isOn(item) {
  return colorOf(item).toUpperCase() === current.value.toUpperCase();
}

function pick(item) {
  if (props.disabled) return;
  emit('change', colorOf(item));
}
</script>

<style>
.kole-m-colorpicker {
  --kole-m-colorpicker-swatch-size: 64rpx;
  --kole-m-colorpicker-gap: 24rpx;
  --kole-m-colorpicker-columns: 6;
  --kole-m-colorpicker-current: var(--kole-color-border);
  --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);
}

/* 变体 mode=swatch：只有色板，没有任何自定义入口 */
.kole-m-colorpicker--swatch .kole-m-colorpicker__custom { display: none; }

/* 变体 mode=custom：色板之后追加自定义色值输入 */
.kole-m-colorpicker--custom .kole-m-colorpicker__custom {
  display: flex;
  align-items: center;
}

/* 变体 round=true：色块与当前色圆点都用圆形 */
.kole-m-colorpicker--round .kole-m-colorpicker__swatch,
.kole-m-colorpicker--round .kole-m-colorpicker__dot { border-radius: 50%; }

/* 变体 showValue=false：不显示色值文字，只留色块 */
.kole-m-colorpicker--no-value .kole-m-colorpicker__value { display: none; }

/* 顶部：当前色圆点 + 色值文字 —— 这是「当前色显示」的落点 */
.kole-m-colorpicker__current {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
}

.kole-m-colorpicker__dot {
  box-sizing: border-box;
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
  border: 1rpx solid var(--kole-color-border);
  border-radius: 8rpx;
  background-color: var(--kole-m-colorpicker-current);
}

.kole-m-colorpicker__value {
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
}

/* 色板：定列数网格（flex + calc 百分比实现，小程序对 grid 支持不一），色块在各列内居中 */
.kole-m-colorpicker__swatches {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.kole-m-colorpicker__swatch {
  box-sizing: border-box;
  width: calc(100% / var(--kole-m-colorpicker-columns));
  height: var(--kole-m-colorpicker-swatch-size);
  margin: 0;
  border-radius: 8rpx;
  background-color: var(--kole-m-colorpicker-swatch);
}

/* 状态 selected：外环 + 放大（形状差异，浅色块上也读得出） */
.kole-m-colorpicker__swatch.is-selected {
  transform: scale(1.08);
  border: 4rpx solid var(--kole-color-brand);
}

/* 状态 disabled：整块置灰且不响应 */
.kole-m-colorpicker__swatch[aria-disabled='true'] { opacity: 0.4; }

.kole-m-colorpicker.is-disabled .kole-m-colorpicker__value { color: var(--kole-color-text-disabled); }

/* 自定义区（mode=custom）：色值输入 + 应用按钮，由宿主以插槽填入 */
.kole-m-colorpicker__custom {
  display: none;
  box-sizing: border-box;
  min-height: var(--kole-m-touch-target);
}
</style>