create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-table/u-table.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="u-table" :style="[tableStyle]">
+		<template v-if="show">
+			<slot />
+		</template>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Table 表格 
+	 * @description 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成
+	 * @tutorial https://ijry.github.io/uview-plus/components/table.html
+	 * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
+	 * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+	 * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+	 * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+	 * @property {String Number} font-size 单元格字体大小，单位rpx（默认28）
+	 * @property {String} color 单元格字体颜色（默认#606266）
+	 * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <u-table><u-tr><u-th>学校</u-th </u-tr> <u-tr><u-td>浙江大学</u-td> </u-tr> <u-tr><u-td>清华大学</u-td> </u-tr></u-table>
+	 */
+	export default {
+		name: 'u-table',
+		mixins: [mpMixin, mixin, props],
+		props: {
+			borderColor: {
+				type: String,
+				default: '#e4e7ed'
+			},
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// td的内边距
+			padding: {
+				type: String,
+				default: '5px 3px'
+			},
+			// 字体大小
+			fontSize: {
+				type: [String],
+				default: '14px'
+			},
+			// 字体颜色
+			color: {
+				type: String,
+				default: '#606266'
+			},
+			// th的自定义样式
+			thStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// table的背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			}
+		},
+		data() {
+			return {
+				show: true
+			}
+		},
+		watch: {
+			align() {
+				this.change();
+			},
+			borderColor() {
+				this.change();
+			}
+		},
+		computed: {
+			tableStyle() {
+				let style = {};
+				style.borderLeft = `solid 1px ${this.borderColor}`;
+				style.borderTop = `solid 1px ${this.borderColor}`;
+				style.backgroundColor = this.bgColor;;
+				return style;
+			}
+		},
+		methods: {
+			change() {
+				this.show = false;
+				this.$nextTick(() => {
+					this.show = true;
+				});
+				// this.$forceUpdate();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

package/template/src/uni_modules/uview-plus/components/u-table2/u-table2.vue

@@ -0,0 +1,517 @@
+<template>
+    <view scroll-x class="u-table2" :style="{ height: height ? height + 'px' : 'auto' }">
+        <!-- 表头 -->
+        <view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
+            <view class="u-table-row">
+                <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
+                    :style="headerColStyle(col)"
+					:class="[
+                        col.align ? 'u-text-' + col.align : '',
+                        headerCellClassName ? headerCellClassName(col) : '',
+                        col.fixed === 'left' ? 'u-table-fixed-left' : '',
+                        col.fixed === 'right' ? 'u-table-fixed-right' : ''
+                    ]" @click="handleHeaderClick(col)">
+					<slot name="header" :column="col" :columnIndex="colIndex" :level="1">
+					    {{ col.title }}
+					</slot>
+                    <view v-if="col.sortable">
+                        {{ getSortIcon(col.key) }}
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 表体 -->
+        <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
+            <template v-if="data && data.length > 0">
+                <template v-for="(row, index) in sortedData" :key="row[rowKey] || index">
+                    <view class="u-table-row" :class="[
+                        highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
+                        rowClassName ? rowClassName(row, index) : '',
+                        stripe && index % 2 === 1 ? 'u-table-row-zebra' : ''
+                    ]" @click="handleRowClick(row)">
+                        <view v-for="(col, colIndex) in columns" :key="col.key"
+							class="u-table-cell" :class="[
+                            col.align ? 'u-text-' + col.align : '',
+                            cellClassName ? cellClassName(row, col) : '',
+                            col.fixed === 'left' ? 'u-table-fixed-left' : '',
+                            col.fixed === 'right' ? 'u-table-fixed-right' : ''
+                        ]" :style="cellStyleInner({row: row, column: col,
+							rowIndex: index, columnIndex: colIndex, level: 0})">
+                            <!-- 复选框列 -->
+                            <view v-if="col.type === 'selection'">
+                                <checkbox :checked="isSelected(row)"
+									@click.stop="toggleSelect(row)" />
+                            </view>
+
+                            <!-- 树形结构展开图标 -->
+                            <view v-else-if="col.type === 'expand'"
+								@click.stop="toggleExpand(row)">
+                                {{ isExpanded(row) ? '▼' : '▶' }}
+                            </view>
+
+                            <!-- 默认插槽或文本 -->
+                            <slot name="cell" :row="row" :column="col"
+								:rowIndex="index" :columnIndex="colIndex">
+                                <view class="u-table-cell_content">
+                                    {{ row[col.key] }}
+                                </view>
+                            </slot>
+                        </view>
+                    </view>
+
+                    <!-- 子级渲染 -->
+                    <template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
+                        <view v-for="childRow in row[treeProps.children]" :key="childRow[rowKey]"
+                            class="u-table-row u-table-row-child">
+                            <view v-for="(col2, col2Index) in columns" :key="col2.key" class="u-table-cell"
+                                :style="cellStyleInner({row: childRow, column: col2,
+									rowIndex: index, columnIndex: col2Index, level: 1})">
+                                <slot name="cell" :row="childRow" :column="col2" :prow="row"
+									:rowIndex="index" :columnIndex="col2Index" :level="1">
+                                    <view class="u-table-cell_content">
+                                        {{ childRow[col2.key] }}
+                                    </view>
+                                </slot>
+                            </view>
+                        </view>
+                    </template>
+                </template>
+            </template>
+            <template v-else>
+                <slot name="empty">
+                    <view class="u-table-empty">{{ emptyText }}</view>
+                </slot>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script>
+import { ref, watch, computed } from 'vue'
+import { addUnit, sleep } from '../../libs/function/index';
+
+export default {
+    name: 'u-table2',
+    props: {
+        data: {
+            type: Array,
+            required: true,
+            default: () => {
+                return []
+            }
+        },
+        columns: {
+            type: Array,
+            required: true,
+            default: () => {
+                return []
+            },
+            validator: cols =>
+                cols.every(col =>
+                    ['default', 'selection', 'expand'].includes(col.type || 'default')
+                )
+        },
+        stripe: {
+            type: Boolean,
+            default: false
+        },
+        border: {
+            type: Boolean,
+            default: false
+        },
+        height: {
+            type: [String, Number],
+            default: null
+        },
+        maxHeight: {
+            type: [String, Number],
+            default: null
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        highlightCurrentRow: {
+            type: Boolean,
+            default: false
+        },
+        rowKey: {
+            type: String,
+            default: 'id'
+        },
+        currentRowKey: {
+            type: [String, Number],
+            default: null
+        },
+        rowStyle: {
+            type: Object,
+            default: () => ({})
+        },
+        cellClassName: {
+            type: Function,
+            default: null
+        },
+		cellStyle: {
+		    type: Function,
+		    default: null
+		},
+        headerCellClassName: {
+            type: Function,
+            default: null
+        },
+        rowClassName: {
+            type: Function,
+            default: null
+        },
+        context: {
+            type: Object,
+            default: null
+        },
+        showOverflowTooltip: {
+            type: Boolean,
+            default: false
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        load: {
+            type: Function,
+            default: null
+        },
+        treeProps: {
+            type: Object,
+            default: () => ({
+                children: 'children',
+                hasChildren: 'hasChildren'
+            })
+        },
+        defaultExpandAll: {
+            type: Boolean,
+            default: false
+        },
+        expandRowKeys: {
+            type: Array,
+            default: () => []
+        },
+        sortOrders: {
+            type: Array,
+            default: () => ['ascending', 'descending']
+        },
+        sortable: {
+            type: [Boolean, String],
+            default: false
+        },
+        multiSort: {
+            type: Boolean,
+            default: false
+        },
+        sortBy: {
+            type: String,
+            default: null
+        },
+        sortMethod: {
+            type: Function,
+            default: null
+        },
+        filters: {
+            type: Object,
+            default: () => ({})
+        },
+        fixedHeader: {
+            type: Boolean,
+            default: true
+        },
+        emptyText: {
+            type: String,
+            default: '暂无数据'
+        },
+    },
+    emits: [
+        'select', 'select-all', 'selection-change',
+        'cell-click', 'row-click', 'row-dblclick',
+        'header-click', 'sort-change', 'filter-change',
+        'current-change', 'expand-change'
+    ],
+    data() {
+        return {
+            scrollWidth: 'auto'
+        }
+    },
+    mounted() {
+        this.getComponentWidth()
+    },
+	computed: {
+	},
+    methods: {
+        addUnit,
+		headerColStyle(col) {
+			let style = {
+				width: col.width ? addUnit(col.width) : 'auto',
+				flex: col.width ? 'none' : 1
+			};
+			if (col?.style) {
+				style = {...style, ...col?.style};
+			}
+			return style;
+		},
+		setCellStyle(e) {
+			this.cellStyle = e
+		},
+		cellStyleInner(scope) {
+			let style = {
+				width: scope.column?.width ? addUnit(scope.column.width) : 'auto',
+				flex: scope.column?.width ? 'none' : 1,
+				paddingLeft: (24 * scope.level) + 'px'
+			};
+			if (this.cellStyle != null) {
+				let styleCalc = this.cellStyle(scope)
+				if (styleCalc != null) {
+					style = {...style, ...styleCalc}
+				}
+			}
+			return style;
+		},
+        // 获取组件的宽度
+		async getComponentWidth() {
+			// 延时一定时间，以获取dom尺寸
+			await sleep(30)
+			this.$uGetRect('.u-table-row').then(size => {
+				this.scrollWidth = size.width + 'px'
+			})
+		},
+    },
+    setup(props, { emit }) {
+        const expandedKeys = ref([...props.expandRowKeys]);
+        const selectedRows = ref([]);
+        const sortConditions = ref([]);
+
+        // 当前高亮行
+        const currentRow = ref(null);
+
+        watch(
+            () => props.expandRowKeys,
+            newVal => {
+                expandedKeys.value = [...newVal];
+            }
+        );
+
+        watch(
+            () => props.currentRowKey,
+            newVal => {
+                const found = props.data.find(item => item[props.rowKey] === newVal);
+                if (found) {
+                    currentRow.value = found;
+                }
+            }
+        );
+
+        // 过滤后的数据
+        const filteredData = computed(() => {
+            return props.data.filter(row => {
+                return Object.keys(props.filters).every(key => {
+                    const filter = props.filters[key];
+                    if (!filter) return true;
+                    return row[key]?.toString().includes(filter.toString());
+                });
+            });
+        });
+
+        // 排序后的数据
+        const sortedData = computed(() => {
+            if (!sortConditions.value.length) return filteredData.value;
+
+            const data = [...filteredData.value];
+
+            return data.sort((a, b) => {
+                for (const condition of sortConditions.value) {
+                    const { field, order } = condition;
+                    let valA = a[field];
+                    let valB = b[field];
+
+                    if (props.sortMethod) {
+                        const result = props.sortMethod(a, b, field);
+                        if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
+                    }
+
+                    if (valA < valB) return order === 'ascending' ? -1 : 1;
+                    if (valA > valB) return order === 'ascending' ? 1 : -1;
+                }
+                return 0;
+            });
+        });
+
+        function handleRowClick(row) {
+            if (props.highlightCurrentRow) {
+                const oldRow = currentRow.value;
+                currentRow.value = row;
+                emit('current-change', row, oldRow);
+            }
+            emit('row-click', row);
+        }
+
+        function handleHeaderClick(column) {
+            if (!column.sortable) return;
+
+            const index = sortConditions.value.findIndex(c => c.field === column.key);
+            let newOrder = 'ascending';
+
+            if (index >= 0) {
+                if (sortConditions.value[index].order === 'ascending') {
+                    newOrder = 'descending';
+                } else {
+                    sortConditions.value.splice(index, 1);
+                    emit('sort-change', sortConditions.value);
+                    return;
+                }
+            }
+
+            if (!props.multiSort) {
+                sortConditions.value = [{ field: column.key, order: newOrder }];
+            } else {
+                if (index >= 0) {
+                    sortConditions.value[index].order = newOrder;
+                } else {
+                    sortConditions.value.push({ field: column.key, order: newOrder });
+                }
+            }
+
+            emit('sort-change', sortConditions.value);
+        }
+
+        function getSortIcon(field) {
+            const cond = sortConditions.value.find(c => c.field === field);
+            if (!cond) return '';
+            return cond.order === 'ascending' ? '↑' : '↓';
+        }
+
+        function toggleSelect(row) {
+            const index = selectedRows.value.findIndex(r => r[props.rowKey] === row[props.rowKey]);
+            if (index >= 0) {
+                selectedRows.value.splice(index, 1);
+            } else {
+                selectedRows.value.push(row);
+            }
+            emit('selection-change', selectedRows.value);
+            emit('select', row);
+        }
+
+        function isSelected(row) {
+            return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey]);
+        }
+
+        function toggleExpand(row) {
+            const key = row[props.rowKey];
+            const index = expandedKeys.value.indexOf(key);
+            if (index === -1) {
+                expandedKeys.value.push(key);
+            } else {
+                expandedKeys.value.splice(index, 1);
+            }
+            emit('expand-change', expandedKeys.value);
+        }
+
+        function isExpanded(row) {
+            return expandedKeys.value.includes(row[props.rowKey]);
+        }
+
+        return {
+            currentRow,
+            sortedData,
+            expandedKeys,
+            selectedRows,
+            sortConditions,
+            handleRowClick,
+            handleHeaderClick,
+            getSortIcon,
+            toggleSelect,
+            isSelected,
+            toggleExpand,
+            isExpanded
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-table2 {
+    width: auto;
+    overflow: auto;
+    white-space: nowrap;
+
+    .u-table-header {
+        min-width: 100% !important;
+        width: fit-content;
+        background-color: #f5f7fa;
+    }
+
+    .u-table-body {
+        min-width: 100% !important;
+        width: fit-content;
+    }
+
+    .u-table-sticky {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    .u-table-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1rpx solid #ebeef5;
+        overflow: hidden;
+    }
+
+    .u-table-cell {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        padding: 5px 4px;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .u-table-fixed-left {
+        position: sticky;
+        left: 0;
+        z-index: 9;
+    }
+
+    .u-table-fixed-right {
+        position: sticky;
+        right: 0;
+        z-index: 9;
+    }
+
+    .u-table-row-zebra {
+        background-color: #fafafa;
+    }
+
+    .u-table-row-highlight {
+        background-color: #f5f7fa;
+    }
+
+    .u-table-empty {
+        text-align: center;
+        padding: 20px;
+        color: #999;
+    }
+
+    .u-text-left {
+        text-align: left;
+    }
+
+    .u-text-center {
+        text-align: center;
+    }
+
+    .u-text-right {
+        text-align: right;
+    }
+}
+</style>

package/template/src/uni_modules/uview-plus/components/u-tabs/props.js

@@ -0,0 +1,71 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 滑块的移动过渡时间，单位ms
+        duration: {
+            type: Number,
+            default: () => defProps.tabs.duration
+        },
+        // tabs标签数组
+        list: {
+            type: Array,
+            default: () => defProps.tabs.list
+        },
+        // 滑块颜色
+        lineColor: {
+            type: String,
+            default: () => defProps.tabs.lineColor
+        },
+        // 菜单选择中时的样式
+        activeStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.activeStyle
+        },
+        // 菜单非选中时的样式
+        inactiveStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.inactiveStyle
+        },
+        // 滑块长度
+        lineWidth: {
+            type: [String, Number],
+            default: () => defProps.tabs.lineWidth
+        },
+        // 滑块高度
+        lineHeight: {
+            type: [String, Number],
+            default: () => defProps.tabs.lineHeight
+        },
+        // 滑块背景显示大小，当滑块背景设置为图片时使用
+        lineBgSize: {
+            type: String,
+            default: () => defProps.tabs.lineBgSize
+        },
+        // 菜单item的样式
+        itemStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.itemStyle
+        },
+        // 菜单是否可滚动
+        scrollable: {
+            type: Boolean,
+            default: () => defProps.tabs.scrollable
+        },
+		// 当前选中标签的索引
+		current: {
+			type: [Number, String],
+			default: () => defProps.tabs.current
+		},
+		// 默认读取的键名
+		keyName: {
+			type: String,
+			default: () => defProps.tabs.keyName
+		},
+        // 左侧图标样式
+        iconStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.iconStyle
+        }
+    }
+})