aurora-admin/frameworks/ListPicker.vue3.vue

<template>
  <div class="kole-listpicker" ref="root">
    <div class="kole-listpicker-trigger" :class="{ 'is-open': open }" @click="toggle">
      <template v-if="modelValue.length">
        <span v-for="v in modelValue" :key="v" class="kole-listpicker-tag">
          {{ labelOf(v) }}<span class="x" @click.stop="remove(v)">×</span>
        </span>
      </template>
      <span v-else class="kole-listpicker-placeholder">{{ placeholder }}</span>
      <span class="kole-listpicker-caret">▾</span>
    </div>

    <div v-if="open" class="kole-listpicker-panel">
      <div v-if="filterable" class="kole-listpicker-search">
        <input v-model="query" placeholder="搜索">
      </div>
      <div class="kole-listpicker-selectall" @click="selectAll">全选</div>
      <template v-for="(g, gi) in visibleGroups" :key="gi">
        <div class="kole-listpicker-group-label" v-if="g.label">{{ g.label }}</div>
        <div
          v-for="o in g.children" :key="o.value"
          class="kole-listpicker-option" :class="{ 'is-checked': modelValue.includes(o.value), 'is-disabled': o.disabled }"
          @click="toggleOpt(o)"
        >
          <span class="box">{{ modelValue.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}
        </div>
      </template>
      <div v-if="!flatVisible.length" class="kole-listpicker-empty">无匹配项</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';

const props = defineProps({
  modelValue: { type: Array, default: () => [] },      // 选中 value 数组
  options: { type: Array, required: true },             // 扁平 [{value,label}] 或 分组 [{label, children}]
  filterable: { type: Boolean, default: true },
  placeholder: { type: String, default: '请选择' }
});
const emit = defineEmits(['update:modelValue', 'change']);

const root = ref(null);
const open = ref(false);
const query = ref('');

const isGrouped = computed(() => props.options.length && props.options[0] && props.options[0].children);
const flat = computed(() => isGrouped.value ? props.options.flatMap(g => g.children) : props.options);
const labelMap = computed(() => Object.fromEntries(flat.value.map(o => [o.value, o.label])));

const flatVisible = computed(() => flat.value.filter(o => o.label.includes(query.value)));
const visibleGroups = computed(() => {
  if (!isGrouped.value) return [{ children: flatVisible.value }];
  return props.options
    .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query.value)) }))
    .filter(g => g.children.length);
});

function labelOf(v) { return labelMap.value[v] || v; }
function toggle(openState) { open.value = !open.value; if (!open.value) query.value = ''; }
function toggleOpt(o) { if (o.disabled) return; commit(modelValue.includes(o.value) ? modelValue.filter(x => x !== o.value) : [...modelValue, o.value]); }
function remove(v) { commit(modelValue.filter(x => x !== v)); }
function selectAll() { commit([...new Set([...modelValue, ...flatVisible.value.map(o => o.value)])]); }
function commit(next) { emit('update:modelValue', next); emit('change', next); }

function onDocClick(e) { if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; } }
document.addEventListener('click', onDocClick, true);
onBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));
</script>

<!-- 样式对齐 组件7.txt ListPicker 规范 -->
<style scoped>
.kole-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
.kole-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kole-listpicker-trigger:hover { border-color: #2F54EB; }
.kole-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
.kole-listpicker-tag .x { cursor: pointer; opacity: .65; }
.kole-listpicker-tag .x:hover { opacity: 1; }
.kole-listpicker-placeholder { color: #767676; font-size: 14px; }
.kole-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }
.kole-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.kole-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }
.kole-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }
.kole-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.kole-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }
.kole-listpicker-selectall:hover { background: #F5F7FA; }
.kole-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }
.kole-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.kole-listpicker-option:hover { background: #F5F7FA; }
.kole-listpicker-option.is-checked { color: #2F54EB; }
.kole-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.kole-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
.kole-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }
.kole-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }
</style>