im-ui-mobile 0.1.22 → 0.1.24

package/components/im-button/im-button.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, useSlots } from 'vue'
+import { computed } from 'vue'
 import { validator } from '../../index'
 
 // 定义类型

package/components/im-card/im-card.vue

@@ -65,7 +65,7 @@
         </view>
 
         <!-- 主体内容 -->
-        <view class="im-card__body">
+        <view class="im-card__body" :style="bodyStyle">
             <slot></slot>
         </view>
 
@@ -91,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, useSlots } from 'vue'
+import { computed } from 'vue'
 import type { CSSProperties } from 'vue'
 import ImButton from '../im-button/im-button.vue'
 
@@ -102,7 +102,8 @@ interface CardAction {
     plain?: boolean
     disabled?: boolean
     loading?: boolean
-    data?: any
+    data?: any,
+    click?: Function
 }
 
 // Props 定义
@@ -143,6 +144,9 @@ interface Props {
     subtitleStyle?: CSSProperties
     descriptionStyle?: CSSProperties
 
+    // 内容区域
+    bodyStyle?: CSSProperties
+
     // 封面图片
     coverImage?: string
     coverMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
@@ -229,7 +233,13 @@ const handleCoverClick = (event: MouseEvent) => {
 }
 
 const handleActionClick = (action: CardAction, index: number) => {
-    if (!props.disabled && !props.loading && !action.disabled) {
+    if (props.disabled || props.loading || action.disabled) {
+        return
+    }
+
+    if (action.click) {
+        action.click()
+    } else {
         emit('action-click', action, index)
     }
 }

package/components/im-checkbox/im-checkbox.vue

@@ -0,0 +1,589 @@
+<!-- components/im-checkbox/im-checkbox.vue -->
+<template>
+    <view class="im-checkbox" :class="[
+        `im-checkbox--${innerSize}`,
+        `im-checkbox--${type}`,
+        {
+            'im-checkbox--disabled': disabled,
+            'im-checkbox--checked': isChecked,
+            'im-checkbox--indeterminate': indeterminate,
+            'im-checkbox--readonly': readonly,
+            'im-checkbox--bordered': bordered
+        }
+    ]" :style="[customStyle, computedStyle]" @click="handleClick" @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd">
+        <!-- 复选框内容 -->
+        <view class="im-checkbox__wrapper">
+            <!-- 图标区域 -->
+            <view class="im-checkbox__icon">
+                <slot name="icon" :checked="isChecked" :disabled="disabled" :indeterminate="indeterminate">
+                    <!-- 默认图标 -->
+                    <template v-if="type === 'square'">
+                        <view class="im-checkbox__icon-square" :class="{
+                            'im-checkbox__icon-square--checked': isChecked,
+                            'im-checkbox__icon-square--indeterminate': indeterminate
+                        }">
+                            <view v-if="isChecked && !indeterminate" class="im-checkbox__checkmark" />
+                            <view v-else-if="indeterminate" class="im-checkbox__indeterminate-mark" />
+                        </view>
+                    </template>
+
+                    <!-- 圆形图标 -->
+                    <template v-else-if="type === 'circle'">
+                        <view class="im-checkbox__icon-circle" :class="{
+                            'im-checkbox__icon-circle--checked': isChecked
+                        }">
+                            <view v-if="isChecked" class="im-checkbox__checkmark" />
+                        </view>
+                    </template>
+
+                    <!-- 开关样式 -->
+                    <template v-else-if="type === 'switch'">
+                        <!-- :color="switchColor" :backgroundColor="switchBackgroundColor" -->
+                        <switch :checked="isChecked" :color="props.checkedColor"
+                            :class="[`im-checkbox__switch--${innerSize}`]" :disabled="disabled" />
+                        <!-- <view class="im-checkbox__switch" :class="{
+                            'im-checkbox__switch--checked': isChecked
+                        }">
+                            <view class="im-checkbox__switch-handle" />
+                        </view> -->
+                    </template>
+
+                    <!-- 按钮样式 -->
+                    <template v-else-if="type === 'button'">
+                        <view class="im-checkbox__button" :class="{
+                            'im-checkbox__button--checked': isChecked
+                        }">
+                            <view class="im-checkbox__button-content">
+                                <slot>
+                                    <text v-if="label" class="im-checkbox__button-text">
+                                        {{ label }}
+                                    </text>
+                                </slot>
+                            </view>
+                        </view>
+                    </template>
+                </slot>
+            </view>
+
+            <!-- 标签区域 -->
+            <view v-if="type !== 'button' && (label || $slots.default)" class="im-checkbox__label" :class="{
+                'im-checkbox__label--disabled': disabled,
+                'im-checkbox__label--checked': isChecked
+            }">
+                <!-- 默认插槽 -->
+                <slot>
+                    <text class="im-checkbox__label-text">{{ label }}</text>
+                </slot>
+
+                <!-- 描述文本 -->
+                <text v-if="description" class="im-checkbox__description">
+                    {{ description }}
+                </text>
+            </view>
+        </view>
+
+        <!-- 角标 -->
+        <view v-if="badge" class="im-checkbox__badge" :class="[
+            `im-checkbox__badge--${badge.type || 'dot'}`,
+            `im-checkbox__badge--${badge.position || 'top-right'}`
+        ]" :style="badgeStyle">
+            <text v-if="badge.type === 'number' || badge.type === 'text'" class="im-checkbox__badge-text">
+                {{ badge.value }}
+            </text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import {
+    computed,
+    inject
+} from 'vue'
+import type {
+    CheckboxProps,
+    CheckboxEmits
+} from '../../types/components/checkbox'
+import type {
+    CheckboxGroupContext
+} from '../../types/components/checkbox-group'
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+    modelValue: false,
+    value: '',
+    label: '',
+    description: '',
+    disabled: false,
+    readonly: false,
+    indeterminate: false,
+    size: '',
+    type: 'square',
+    checkedColor: '#07c160',
+    uncheckedColor: '#dcdee0',
+    disabledColor: '#c8c9cc',
+    borderColor: '',
+    bordered: false,
+    badge: undefined,
+    clickable: true,
+    customStyle: () => ({})
+})
+
+const emit = defineEmits<CheckboxEmits>()
+
+// 获取复选框组上下文
+const checkboxGroup = inject<CheckboxGroupContext | null>('imCheckboxGroup', null)
+
+const innerSize = computed(() => {
+    const defultSize = 'medium'
+
+    if (checkboxGroup) {
+        if (checkboxGroup.size && props.size) {
+            return props.size
+        }
+
+        if (checkboxGroup.size) {
+            return checkboxGroup.size
+        }
+        else {
+            return props.size || defultSize
+        }
+    } else {
+        return props.size || defultSize
+    }
+})
+
+// 计算是否选中
+const isChecked = computed(() => {
+    if (checkboxGroup) {
+        // 在复选框组中
+        const groupValue = checkboxGroup.modelValue
+        return groupValue.includes(props.value as string | number)
+    } else {
+        // 独立使用
+        return !!props.modelValue
+    }
+})
+
+// 计算样式
+const computedStyle = computed(() => {
+    const style: Record<string, any> = {}
+
+    // 添加颜色变量
+    if (props.borderColor) {
+        style['--checkbox-border-color'] = props.borderColor
+    }
+
+    if (props.checkedColor) {
+        style['--checkbox-checked-color'] = props.checkedColor
+    }
+
+    return style
+})
+
+// 角标样式
+const badgeStyle = computed(() => {
+    if (!props.badge) return {}
+
+    const style: Record<string, any> = {}
+
+    if (props.badge.color) {
+        style.color = props.badge.color
+    }
+
+    if (props.badge.backgroundColor) {
+        style.backgroundColor = props.badge.backgroundColor
+    }
+
+    return style
+})
+
+// 注册和注销
+onMounted(() => {
+    if (checkboxGroup && checkboxGroup.registerCheckbox && props.value) {
+        checkboxGroup.registerCheckbox(props.value as string | number)
+    }
+})
+
+onUnmounted(() => {
+    if (checkboxGroup && checkboxGroup.unregisterCheckbox && props.value) {
+        checkboxGroup.unregisterCheckbox(props.value as string | number)
+    }
+})
+
+// 处理点击事件
+const handleClick = (event: Event) => {
+    if (props.disabled || props.readonly || !props.clickable) {
+        return
+    }
+
+    emit('click', event)
+
+    if (checkboxGroup) {
+        checkboxGroup.handleChange(props.value as string | number)
+    } else {
+        // 独立使用
+        const newValue = !props.modelValue
+        emit('update:modelValue', newValue)
+        emit('change', newValue)
+    }
+}
+
+// 触摸开始
+const handleTouchStart = (event: Event) => {
+    // 可以添加触摸反馈效果
+}
+
+// 触摸结束
+const handleTouchEnd = (event: Event) => {
+    // 可以添加触摸反馈效果
+}
+</script>
+
+<style lang="scss" scoped>
+.im-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease;
+
+    // 状态类
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        * {
+            pointer-events: none;
+        }
+    }
+
+    &--readonly {
+        cursor: default;
+    }
+
+    &:not(.im-checkbox--disabled):not(.im-checkbox--readonly):active {
+        opacity: 0.8;
+    }
+
+    // 带边框
+    &--bordered {
+        padding: 16rpx 24rpx;
+        border: 2rpx solid var(--checkbox-border-color, #f0f0f0);
+        border-radius: 12rpx;
+        background-color: #ffffff;
+
+        &:not(.im-checkbox--disabled):hover {
+            border-color: #e0e0e0;
+        }
+
+        &.im-checkbox--checked {
+            border-color: var(--checkbox-checked-color, #07c160);
+            background-color: rgba(7, 193, 96, 0.05);
+        }
+    }
+
+    // 大小类
+    $sizes: (
+        small: (wrapper-font-size: 24rpx,
+            icon-size: 32rpx,
+            checkmark-width: 16rpx,
+            checkmark-height: 8rpx,
+            switch-width: 80rpx,
+            switch-height: 40rpx,
+            switch-handle-size: 36rpx,
+            button-padding: 8rpx 16rpx,
+            button-font-size: 24rpx),
+        medium: (wrapper-font-size: 28rpx,
+            icon-size: 40rpx,
+            checkmark-width: 20rpx,
+            checkmark-height: 10rpx,
+            switch-width: 96rpx,
+            switch-height: 48rpx,
+            switch-handle-size: 44rpx,
+            button-padding: 12rpx 24rpx,
+            button-font-size: 28rpx),
+        large: (wrapper-font-size: 32rpx,
+            icon-size: 48rpx,
+            checkmark-width: 24rpx,
+            checkmark-height: 12rpx,
+            switch-width: 112rpx,
+            switch-height: 56rpx,
+            switch-handle-size: 52rpx,
+            button-padding: 16rpx 32rpx,
+            button-font-size: 32rpx)
+    );
+
+@each $size, $map in $sizes {
+    &--#{$size} {
+        .im-checkbox__wrapper {
+            font-size: map-get($map, wrapper-font-size);
+        }
+
+        .im-checkbox__icon-square,
+        .im-checkbox__icon-circle {
+            width: map-get($map, icon-size);
+            height: map-get($map, icon-size);
+
+            &--checked {
+                .im-checkbox__checkmark {
+                    width: map-get($map, checkmark-width);
+                    height: map-get($map, checkmark-height);
+                }
+            }
+        }
+
+        .im-checkbox__switch {
+            width: map-get($map, switch-width);
+            height: map-get($map, switch-height);
+
+            &-handle {
+                width: map-get($map, switch-handle-size);
+                height: map-get($map, switch-handle-size);
+            }
+        }
+
+        .im-checkbox__button {
+            padding: map-get($map, button-padding);
+            font-size: map-get($map, button-font-size);
+        }
+    }
+}
+
+&__switch {
+    &--small {
+        transform: scale(0.5);
+    }
+
+    &--medium {
+        transform: scale(0.7);
+    }
+
+    &--large {
+        transform: scale(1.5);
+    }
+}
+
+// 组件内部样式
+&__wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+&__icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    // 方形图标
+    &-square {
+        border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
+        border-radius: 6rpx;
+        background-color: #ffffff;
+        transition: all 0.2s ease;
+
+        &--checked {
+            border-color: var(--checkbox-checked-color, #07c160);
+            background-color: var(--checkbox-checked-color, #07c160);
+        }
+
+        &--indeterminate {
+            border-color: var(--checkbox-checked-color, #07c160);
+            background-color: var(--checkbox-checked-color, #07c160);
+        }
+
+        .im-checkbox--disabled & {
+            border-color: var(--checkbox-disabled-color, #c8c9cc);
+            background-color: #f5f5f5;
+        }
+    }
+
+    // 圆形图标
+    &-circle {
+        border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
+        border-radius: 50%;
+        background-color: #ffffff;
+        transition: all 0.2s ease;
+
+        &--checked {
+            border-color: var(--checkbox-checked-color, #07c160);
+            background-color: var(--checkbox-checked-color, #07c160);
+        }
+
+        .im-checkbox--disabled & {
+            border-color: var(--checkbox-disabled-color, #c8c9cc);
+            background-color: #f5f5f5;
+        }
+    }
+
+    // 开关
+    &-switch {
+        border-radius: 100rpx;
+        background-color: var(--checkbox-unchecked-color, #dcdee0);
+        transition: all 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+        position: relative;
+
+        &--checked {
+            background-color: var(--checkbox-checked-color, #07c160);
+        }
+
+        .im-checkbox--disabled & {
+            background-color: var(--checkbox-disabled-color, #c8c9cc);
+        }
+    }
+}
+
+&__checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    transform-origin: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-left: solid 2rpx #ffffff;
+        border-bottom: solid 2rpx #ffffff;
+        box-sizing: border-box;
+    }
+}
+
+&__indeterminate-mark {
+    width: 16rpx;
+    height: 2rpx;
+    background-color: #ffffff;
+    border-radius: 1rpx;
+}
+
+&__switch-handle {
+    position: absolute;
+    top: 2rpx;
+    left: 2rpx;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transition: all 0.3s cubic-bezier(0.3, 0, 0.15, 1);
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+
+    .im-checkbox__icon-switch--checked & {
+        left: calc(100% - 2rpx);
+        transform: translateX(-100%);
+    }
+}
+
+&__button {
+    border: 2rpx solid var(--checkbox-unchecked-color, #dcdee0);
+    border-radius: 8rpx;
+    background-color: #ffffff;
+    transition: all 0.2s ease;
+
+    &--checked {
+        border-color: var(--checkbox-checked-color, #07c160);
+        background-color: var(--checkbox-checked-color, #07c160);
+        color: #ffffff;
+    }
+
+    .im-checkbox--disabled & {
+        border-color: var(--checkbox-disabled-color, #c8c9cc);
+        background-color: #f5f5f5;
+    }
+
+    &-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-text {
+        font-weight: 500;
+    }
+}
+
+&__label {
+    margin-left: 16rpx;
+    color: #333333;
+    flex: 1;
+
+    &--disabled {
+        color: #999999;
+    }
+
+    &--checked {
+        font-weight: 500;
+    }
+}
+
+&__label-text {
+    line-height: 1.4;
+}
+
+&__description {
+    display: block;
+    margin-top: 4rpx;
+    font-size: 80%;
+    color: #666666;
+    line-height: 1.3;
+}
+
+// 角标
+&__badge {
+    position: absolute;
+    z-index: 1;
+
+    // 位置
+    &--top-right {
+        top: -8rpx;
+        right: -8rpx;
+    }
+
+    &--top-left {
+        top: -8rpx;
+        left: -8rpx;
+    }
+
+    &--bottom-right {
+        bottom: -8rpx;
+        right: -8rpx;
+    }
+
+    &--bottom-left {
+        bottom: -8rpx;
+        left: -8rpx;
+    }
+
+    // 类型
+    &--dot {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 50%;
+        background-color: #e64340;
+    }
+
+    &--number,
+    &--text {
+        min-width: 32rpx;
+        height: 32rpx;
+        padding: 0 8rpx;
+        border-radius: 16rpx;
+        background-color: #e64340;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-text {
+        font-size: 20rpx;
+        color: #ffffff;
+        font-weight: 500;
+        line-height: 1;
+    }
+}
+}
+</style>

package/components/im-checkbox-group/constants.ts

@@ -0,0 +1,28 @@
+// components/im-checkbox/constants.ts
+
+/**
+ * 组件常量定义
+ */
+export const CHECKBOX_SIZES = ['small', 'medium', 'large'] as const
+export const CHECKBOX_TYPES = ['square', 'circle', 'switch', 'button'] as const
+export const CHECKBOX_DIRECTIONS = ['horizontal', 'vertical'] as const
+export const BADGE_POSITIONS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const
+export const BADGE_TYPES = ['dot', 'number', 'text'] as const
+
+/**
+ * 默认配置
+ */
+export const DEFAULT_CONFIG = {
+  // 复选框
+  TYPE: 'square' as const,
+  CHECKED_COLOR: '#07c160',
+  UNCHECKED_COLOR: '#dcdee0',
+  DISABLED_COLOR: '#c8c9cc',
+
+  // 复选框组
+  DIRECTION: 'vertical' as const,
+  MIN: 0,
+  MAX: Infinity,
+  SHOW_CHECK_ALL: false,
+  CHECK_ALL_TEXT: '全选'
+} as const