uview-pro 0.6.18 → 0.6.19

package/components/u-checkbox-group/types.ts

@@ -1,45 +1,45 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { Shape } from '../../types/global';
-import { getColor } from '../../';
-
-/**
- * checkbox-group 复选框组类型定义
- * @description 供 u-checkbox-group 组件 props 使用
- */
-
-export const CheckboxGroupProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 绑定值，选中的复选框name组成的数组 */
-    modelValue: { type: Array as PropType<(string | number)[]>, default: undefined },
-    /** 最多能选中多少个checkbox */
-    max: { type: Number, default: 999 },
-    /** 是否禁用所有复选框 */
-    disabled: { type: Boolean, default: false },
-    /** 在表单内提交时的标识符 */
-    name: { type: [Boolean, String], default: '' },
-    /** 是否禁止点击提示语选中复选框 */
-    labelDisabled: { type: Boolean, default: false },
-    /** 形状，square为方形，circle为原型 */
-    shape: { type: String as PropType<Shape>, default: 'square' },
-    /** 选中状态下的颜色 */
-    activeColor: { type: String, default: () => getColor('primary') },
-    /** 组件的整体大小，单位rpx，默认34rpx */
-    size: { type: [String, Number], default: '' },
-    /** 每个checkbox占u-checkbox-group的宽度 */
-    width: { type: String, default: 'auto' },
-    /** 是否每个checkbox都换行 */
-    wrap: { type: Boolean, default: false },
-    /** 图标的大小，单位rpx，默认20rpx */
-    iconSize: { type: [String, Number], default: '' }
-};
-
-export type CheckboxGroupProps = ExtractPropTypes<typeof CheckboxGroupProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Shape } from '../../types/global';
+import { getColor } from '../../';
+
+/**
+ * checkbox-group 复选框组类型定义
+ * @description 供 u-checkbox-group 组件 props 使用
+ */
+
+export const CheckboxGroupProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 绑定值，选中的复选框name组成的数组 */
+    modelValue: { type: Array as PropType<(string | number)[]>, default: undefined },
+    /** 最多能选中多少个checkbox */
+    max: { type: Number, default: 999 },
+    /** 是否禁用所有复选框 */
+    disabled: { type: Boolean, default: false },
+    /** 在表单内提交时的标识符 */
+    name: { type: [Boolean, String], default: '' },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: Boolean, default: false },
+    /** 形状，square为方形，circle为原型 */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 选中状态下的颜色 */
+    activeColor: { type: String, default: () => getColor('primary') },
+    /** 组件的整体大小，单位rpx，默认34rpx */
+    size: { type: [String, Number], default: '' },
+    /** 每个checkbox占u-checkbox-group的宽度 */
+    width: { type: String, default: 'auto' },
+    /** 是否每个checkbox都换行 */
+    wrap: { type: Boolean, default: false },
+    /** 图标的大小，单位rpx，默认20rpx */
+    iconSize: { type: [String, Number], default: '' }
+};
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof CheckboxGroupProps>;

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

@@ -1,172 +1,172 @@
-<template>
-    <view class="u-checkbox-group u-clearfix" :class="customClass" :style="$u.toStyle(customStyle)">
-        <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 { computed, watch, nextTick, onMounted } from 'vue';
-import { $u, useParent, useChildren, useDebounce } from '../..';
-import { CheckboxGroupProps } from './types';
-
-/**
- * checkboxGroup 开关选择器父组件Group
- * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
- * @tutorial https://uviewpro.cn/zh/components/checkbox.html
- * @property {Array} modelValue 绑定值，选中的复选框name组成的数组（支持v-model双向绑定）
- * @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组件（默认主题色primary）
- * @event {Function} change 任一个checkbox状态发生变化时触发，回调为选中的name数组
- * @example <u-checkbox-group v-model="selectedValues">
- *              <u-checkbox name="apple">苹果</u-checkbox>
- *              <u-checkbox name="banana">香蕉</u-checkbox>
- *          </u-checkbox-group>
- */
-const props = defineProps(CheckboxGroupProps);
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 使用父组件Hook
-const { children, broadcast } = useParent('u-checkbox-group');
-const { emitToParent } = useChildren('u-checkbox-group', 'u-form-item');
-const { debounce } = useDebounce(1);
-
-/**
- * 根据modelValue设置子组件状态
- */
-function syncChildrenSelection() {
-    if (!children || children.length === 0 || !props.modelValue) return;
-    const modelValueSet = new Set(props.modelValue);
-    children.forEach((child: any) => {
-        const childValue = child.getExposed?.()?.value;
-        const shouldBeChecked = modelValueSet.has(childValue);
-        const isCurrentlyChecked = child.getExposed?.()?.isChecked.value;
-
-        if (shouldBeChecked !== isCurrentlyChecked) {
-            child.getExposed?.()?.setChecked({ checked: shouldBeChecked });
-        }
-    });
-}
-
-/**
- * 监听modelValue变化，同步子组件状态
- */
-watch(
-    () => props.modelValue,
-    () => {
-        syncChildrenSelection();
-    }
-);
-
-/**
- * 派发 change 事件和表单校验
- */
-function emitEvent() {
-    debounce(() => {
-        // 收集所有选中的 name
-        let values: any[] = [];
-        children.forEach((child: any) => {
-            if (child.getExposed?.()?.isChecked.value) {
-                values.push(child.getExposed?.()?.value);
-            }
-        });
-        emit('change', values);
-        emit('update:modelValue', values);
-        setTimeout(() => {
-            emitToParent('onFormChange', 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;
-}
-
-onMounted(() => {
-    nextTick(() => {
-        syncChildrenSelection();
-    });
-});
-
-// 使用defineExpose暴露给外部
-defineExpose({
-    // props
-    props,
-
-    // 方法
-    emitEvent,
-    setAllChecked,
-    getSelectedValues,
-    validateSelection,
-    syncChildrenSelection,
-
-    // 计算属性
-    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>
+<template>
+    <view class="u-checkbox-group u-clearfix" :class="customClass" :style="$u.toStyle(customStyle)">
+        <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 { computed, watch, nextTick, onMounted } from 'vue';
+import { $u, useParent, useChildren, useDebounce } from '../..';
+import { CheckboxGroupProps } from './types';
+
+/**
+ * checkboxGroup 开关选择器父组件Group
+ * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @tutorial https://uviewpro.cn/zh/components/checkbox.html
+ * @property {Array} modelValue 绑定值，选中的复选框name组成的数组（支持v-model双向绑定）
+ * @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组件（默认主题色primary）
+ * @event {Function} change 任一个checkbox状态发生变化时触发，回调为选中的name数组
+ * @example <u-checkbox-group v-model="selectedValues">
+ *              <u-checkbox name="apple">苹果</u-checkbox>
+ *              <u-checkbox name="banana">香蕉</u-checkbox>
+ *          </u-checkbox-group>
+ */
+const props = defineProps(CheckboxGroupProps);
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 使用父组件Hook
+const { children, broadcast } = useParent('u-checkbox-group');
+const { emitToParent } = useChildren('u-checkbox-group', 'u-form-item');
+const { debounce } = useDebounce(1);
+
+/**
+ * 根据modelValue设置子组件状态
+ */
+function syncChildrenSelection() {
+    if (!children || children.length === 0 || !props.modelValue) return;
+    const modelValueSet = new Set(props.modelValue);
+    children.forEach((child: any) => {
+        const childValue = child.getExposed?.()?.value;
+        const shouldBeChecked = modelValueSet.has(childValue);
+        const isCurrentlyChecked = child.getExposed?.()?.isChecked.value;
+
+        if (shouldBeChecked !== isCurrentlyChecked) {
+            child.getExposed?.()?.setChecked({ checked: shouldBeChecked });
+        }
+    });
+}
+
+/**
+ * 监听modelValue变化，同步子组件状态
+ */
+watch(
+    () => props.modelValue,
+    () => {
+        syncChildrenSelection();
+    }
+);
+
+/**
+ * 派发 change 事件和表单校验
+ */
+function emitEvent() {
+    debounce(() => {
+        // 收集所有选中的 name
+        let values: any[] = [];
+        children.forEach((child: any) => {
+            if (child.getExposed?.()?.isChecked.value) {
+                values.push(child.getExposed?.()?.value);
+            }
+        });
+        emit('change', values);
+        emit('update:modelValue', values);
+        setTimeout(() => {
+            emitToParent('onFormChange', 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;
+}
+
+onMounted(() => {
+    nextTick(() => {
+        syncChildrenSelection();
+    });
+});
+
+// 使用defineExpose暴露给外部
+defineExpose({
+    // props
+    props,
+
+    // 方法
+    emitEvent,
+    setAllChecked,
+    getSelectedValues,
+    validateSelection,
+    syncChildrenSelection,
+
+    // 计算属性
+    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,63 +1,63 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { ThemeType } from '../../types/global';
-import { $u } from '../../libs';
-
-/**
- * circleProgress 环形进度条 Props
- * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
- */
-export const CircleProgressProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 圆环进度百分比值 */
-    percent: {
-        type: Number,
-        default: 0,
-        validator: (val: number) => val >= 0 && val <= 100
-    },
-    /** 底部圆环的颜色（灰色的圆环） */
-    inactiveColor: {
-        type: String,
-        default: () => $u.getColor('dividerColor')
-    },
-    /** 圆环激活部分的颜色 */
-    activeColor: {
-        type: String,
-        default: 'var(--u-type-success)'
-    },
-    /** 圆环线条的宽度，单位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: 'var(--u-bg-white)'
-    }
-};
-
-export type CircleProgressProps = ExtractPropTypes<typeof CircleProgressProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+import { $u } from '../../libs';
+
+/**
+ * circleProgress 环形进度条 Props
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ */
+export const CircleProgressProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 圆环进度百分比值 */
+    percent: {
+        type: Number,
+        default: 0,
+        validator: (val: number) => val >= 0 && val <= 100
+    },
+    /** 底部圆环的颜色（灰色的圆环） */
+    inactiveColor: {
+        type: String,
+        default: () => $u.getColor('dividerColor')
+    },
+    /** 圆环激活部分的颜色 */
+    activeColor: {
+        type: String,
+        default: 'var(--u-type-success)'
+    },
+    /** 圆环线条的宽度，单位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: 'var(--u-bg-white)'
+    }
+};
+
+export type CircleProgressProps = ExtractPropTypes<typeof CircleProgressProps>;