u

code/g3soft-libs/docs/examples/checkbox/indeterminate.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// indeterminate：半选状态，用于「全选」与部分选中的联动
+import { computed, ref } from 'vue'
+import { G3Checkbox, G3Space } from '@g3soft/ui'
+
+const all = ref(['read', 'write'])
+const checkedKeys = ref<string[]>(['read'])
+
+const options = [
+  { label: '可读', value: 'read' },
+  { label: '可写', value: 'write' },
+  { label: '可删除', value: 'delete' },
+]
+
+const isAllChecked = computed(() => checkedKeys.value.length === options.length)
+const isIndeterminate = computed(
+  () => checkedKeys.value.length > 0 && checkedKeys.value.length < options.length,
+)
+
+function toggleAll(checked: boolean) {
+  checkedKeys.value = checked ? options.map((item) => item.value) : []
+}
+
+function toggleOne(value: string, checked: boolean) {
+  checkedKeys.value = checked
+    ? [...checkedKeys.value, value]
+    : checkedKeys.value.filter((item) => item !== value)
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="8" style="display: flex">
+    <!-- 全选：半选时显示减号 -->
+    <G3Checkbox
+      :model-value="isAllChecked"
+      :indeterminate="isIndeterminate"
+      @change="toggleAll"
+    >
+      全选（{{ checkedKeys.length }} / {{ options.length }}）
+    </G3Checkbox>
+
+    <div style="padding-left: 24px">
+      <G3Space direction="vertical" :size="8" style="display: flex">
+        <G3Checkbox
+          v-for="option in options"
+          :key="option.value"
+          :model-value="checkedKeys.includes(option.value)"
+          @change="(checked: boolean) => toggleOne(option.value, checked)"
+        >
+          {{ option.label }}
+        </G3Checkbox>
+      </G3Space>
+    </div>
+  </G3Space>
+</template>