uview-pro 0.2.1 → 0.2.3

package/components/u-checkbox-group/u-checkbox-group.vue

@@ -1,79 +1,130 @@
-<template>
-    <view class="u-checkbox-group u-clearfix">
-        <slot></slot>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, getCurrentInstance, provide } from 'vue';
-import { $u } from '../..';
-import { CheckboxGroupProps } from './types';
-
-defineOptions({
-    name: 'u-checkbox-group'
-});
-
-/**
- * checkboxGroup 开关选择器父组件Group
- * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
- * @tutorial https://uviewpro.cn/zh/components/checkbox.html
- * @property {String Number} max 最多能选中多少个checkbox（默认999）
- * @property {String Number} size 组件整体的大小，单位rpx（默认40）
- * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
- * @property {String Number} icon-size 图标大小，单位rpx（默认20）
- * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
- * @property {String} width 宽度，需带单位
- * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
- * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
- * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
- * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
- * @example <u-checkbox-group></u-checkbox-group>
- */
-
-const props = defineProps(CheckboxGroupProps);
-
-const emit = defineEmits(['change']);
-
-// 复选框子项集合
-const children = ref<any[]>([]); // 用于存储所有子checkbox实例
-
-// 向子组件 provide 本 group 实例
-provide('u-checkbox-group', {
-    props,
-    emitEvent,
-    children
-});
-
-const instance = getCurrentInstance();
-
-/**
- * 派发 change 事件和表单校验
- */
-function emitEvent() {
-    // 收集所有选中的 name
-    let values: any[] = [];
-    children.value.forEach(val => {
-        if (val.modelValue) values.push(val.name);
-    });
-    emit('change', values);
-    // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
-    // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
-    setTimeout(() => {
-        // 将当前的值发送到 u-form-item 进行校验
-        $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
-    }, 60);
-}
-
-defineExpose({ emitEvent, children, props });
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-checkbox-group {
-    /* #ifndef MP || APP-NVUE */
-    display: inline-flex;
-    flex-wrap: wrap;
-    /* #endif */
-}
-</style>
+<template>
+    <view class="u-checkbox-group u-clearfix">
+        <slot></slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-checkbox-group',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { getCurrentInstance, computed } from 'vue';
+import { $u, useParent } from '../..';
+import { CheckboxGroupProps } from './types';
+
+/**
+ * checkboxGroup 开关选择器父组件Group
+ * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @tutorial https://uviewpro.cn/zh/components/checkbox.html
+ * @property {String Number} max 最多能选中多少个checkbox（默认999）
+ * @property {String Number} size 组件整体的大小，单位rpx（默认40）
+ * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
+ * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+ * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+ * @property {String} width 宽度，需带单位
+ * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+ * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
+ * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
+ * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
+ * @example <u-checkbox-group></u-checkbox-group>
+ */
+const instance = getCurrentInstance();
+const props = defineProps(CheckboxGroupProps);
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 使用父组件Hook
+const { children, broadcast } = useParent('u-checkbox-group');
+
+/**
+ * 派发 change 事件和表单校验
+ */
+function emitEvent() {
+    // 收集所有选中的 name
+    let values: any[] = [];
+    children.forEach((child: any) => {
+        if (child.getExposed?.()?.isChecked.value) {
+            values.push(child.getExposed?.()?.name);
+        }
+    });
+    emit('change', values);
+    setTimeout(() => {
+        $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
+    }, 60);
+}
+
+/**
+ * 全选/全不选方法
+ */
+function setAllChecked(checked: boolean) {
+    if (props.disabled) {
+        console.warn('u-checkbox-group已禁用，无法操作');
+        return;
+    }
+    broadcast('setChecked', { checked });
+}
+
+/**
+ * 获取选中的值
+ */
+function getSelectedValues() {
+    return children
+        .filter(child => child.getExposed?.()?.isChecked.value)
+        .map(child => child.getExposed?.()?.name)
+        .filter(Boolean);
+}
+
+/**
+ * 验证选择是否超过最大数量
+ */
+function validateSelection() {
+    const selectedCount = children.filter(child => child.getExposed?.()?.isChecked.value).length;
+    if (props.max && selectedCount >= props.max) {
+        $u.toast(`超过最大选择数量: ${props.max}`);
+        return false;
+    }
+    return true;
+}
+
+// 使用defineExpose暴露给外部
+defineExpose({
+    // props
+    props,
+
+    // 方法
+    emitEvent,
+    setAllChecked,
+    getSelectedValues,
+    validateSelection,
+
+    // 计算属性
+    selectedCount: computed(() => children.filter(child => child.getExposed?.()?.isChecked.value).length),
+    isFull: computed(() => {
+        const selectedCount = children.filter(child => child.getExposed?.()?.isChecked.value).length;
+        return props.max && selectedCount >= props.max;
+    }),
+    isEmpty: computed(() => children.filter(child => child.getExposed?.()?.isChecked.value).length === 0),
+    // 工具方法
+    getChildrenCount: () => children.length
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-checkbox-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+}
+</style>

package/components/u-circle-progress/types.ts

@@ -1,52 +1,52 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-import type { ThemeType } from '../../types/global';
-
-/**
- * circleProgress 环形进度条 Props
- * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
- */
-export const CircleProgressProps = {
-    /** 圆环进度百分比值 */
-    percent: {
-        type: Number,
-        default: 0,
-        validator: (val: number) => val >= 0 && val <= 100
-    },
-    /** 底部圆环的颜色（灰色的圆环） */
-    inactiveColor: {
-        type: String,
-        default: '#ececec'
-    },
-    /** 圆环激活部分的颜色 */
-    activeColor: {
-        type: String,
-        default: '#19be6b'
-    },
-    /** 圆环线条的宽度，单位rpx */
-    borderWidth: {
-        type: [Number, String] as PropType<number | string>,
-        default: 14
-    },
-    /** 整个圆形的宽度，单位rpx */
-    width: {
-        type: [Number, String] as PropType<number | string>,
-        default: 200
-    },
-    /** 整个圆环执行一圈的时间，单位ms */
-    duration: {
-        type: [Number, String] as PropType<number | string>,
-        default: 1500
-    },
-    /** 主题类型 */
-    type: {
-        type: String as PropType<ThemeType>,
-        default: ''
-    },
-    /** 整个圆环进度区域的背景色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    }
-};
-
-export type CircleProgressProps = ExtractPropTypes<typeof CircleProgressProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+
+/**
+ * circleProgress 环形进度条 Props
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ */
+export const CircleProgressProps = {
+    /** 圆环进度百分比值 */
+    percent: {
+        type: Number,
+        default: 0,
+        validator: (val: number) => val >= 0 && val <= 100
+    },
+    /** 底部圆环的颜色（灰色的圆环） */
+    inactiveColor: {
+        type: String,
+        default: '#ececec'
+    },
+    /** 圆环激活部分的颜色 */
+    activeColor: {
+        type: String,
+        default: '#19be6b'
+    },
+    /** 圆环线条的宽度，单位rpx */
+    borderWidth: {
+        type: [Number, String] as PropType<number | string>,
+        default: 14
+    },
+    /** 整个圆形的宽度，单位rpx */
+    width: {
+        type: [Number, String] as PropType<number | string>,
+        default: 200
+    },
+    /** 整个圆环执行一圈的时间，单位ms */
+    duration: {
+        type: [Number, String] as PropType<number | string>,
+        default: 1500
+    },
+    /** 主题类型 */
+    type: {
+        type: String as PropType<ThemeType>,
+        default: ''
+    },
+    /** 整个圆环进度区域的背景色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    }
+};
+
+export type CircleProgressProps = ExtractPropTypes<typeof CircleProgressProps>;