init

uni_modules/nutui-uni/components/checkboxgroup/checkboxgroup.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes } from 'vue'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_constants'
+import { commonProps, makeArrayProp, makeNumberProp, nullableBooleanProp } from '../_utils'
+
+export const checkboxgroupProps = {
+  ...commonProps,
+  /**
+   * @description 当前选中项的标识符，和 `label` 相对应
+   */
+  modelValue: makeArrayProp<any>([]),
+  /**
+   * @description 是否禁用选择,将用于其下的全部复选框
+   */
+  disabled: nullableBooleanProp,
+  /**
+   * @description 限制选择的数量，不能和全选/取消/反选一起使用, 0表示没有限制
+   */
+  max: makeNumberProp(0),
+}
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxgroupProps>
+
+/* eslint-disable unused-imports/no-unused-vars */
+export const checkboxgroupEmits = {
+  [UPDATE_MODEL_EVENT]: (value: any[]) => true,
+  [CHANGE_EVENT]: (value: any[]) => true,
+}
+/* eslint-enable unused-imports/no-unused-vars */
+
+export type CheckboxGroupEmits = typeof checkboxgroupEmits

uni_modules/nutui-uni/components/checkboxgroup/checkboxgroup.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue'
+import { CHANGE_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
+import { useProvide } from '../_hooks'
+import { getMainClass } from '../_utils'
+import { CHECKBOX_KEY } from '../checkbox'
+import { checkboxgroupEmits, checkboxgroupProps } from './checkboxgroup'
+
+const props = defineProps(checkboxgroupProps)
+
+const emit = defineEmits(checkboxgroupEmits)
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+const valuesMap = computed(() => {
+  const results = new Map<any, boolean>()
+
+  for (const it of props.modelValue)
+    results.set(it, true)
+
+  return results
+})
+
+function isCheckedValue<T>(value: T) {
+  const result = valuesMap.value.get(value)
+
+  if (result == null)
+    return false
+
+  return result
+}
+
+function updateValue(value: any[]) {
+  emit(UPDATE_MODEL_EVENT, value)
+  emit(CHANGE_EVENT, value)
+}
+
+const { children } = useProvide(CHECKBOX_KEY)({
+  value: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  max: computed(() => props.max),
+  updateValue,
+})
+
+function toggleAll(checked: boolean) {
+  const values: string[] = []
+
+  for (const item of children) {
+    if (item == null)
+      continue
+
+    if (checked) {
+      if (!item.disabled || isCheckedValue(item.label))
+        values.push(item.label)
+    }
+    else {
+      if (item.disabled && isCheckedValue(item.label))
+        values.push(item.label)
+    }
+  }
+
+  emit(UPDATE_MODEL_EVENT, values)
+}
+
+function toggleReverse() {
+  const values: string[] = []
+
+  for (const item of children) {
+    if (item == null)
+      continue
+
+    if (item.disabled) {
+      if (isCheckedValue(item.label))
+        values.push(item.label)
+    }
+    else {
+      if (!isCheckedValue(item.label))
+        values.push(item.label)
+    }
+  }
+
+  emit(UPDATE_MODEL_EVENT, values)
+}
+
+watch(() => props.modelValue, (value) => {
+  emit(CHANGE_EVENT, value)
+})
+
+defineExpose({
+  toggleAll,
+  toggleReverse,
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-checkbox-group`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="props.customStyle">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import "./index";
+</style>

uni_modules/nutui-uni/components/checkboxgroup/index.ts

@@ -0,0 +1,2 @@
+export * from './checkboxgroup'
+export * from './types'

uni_modules/nutui-uni/components/checkboxgroup/types.ts

@@ -0,0 +1,16 @@
+export interface CheckboxGroupInst {
+  /**
+   * @description 全选/取消 传 true,表示全选，传 false,表示取消全选
+   */
+  toggleAll: (checked: boolean) => void
+  /**
+   * @description 反选
+   */
+  toggleReverse: () => void
+}
+
+// TODO 2.x移除
+/**
+ * @deprecated
+ */
+export type CheckBoxInst = CheckboxGroupInst