V1.2.6 更新

V1.2.6 更新

README.md

@@ -107,6 +107,37 @@ GitHub地址：[https://github.com/FirstUI/FirstUI-uvue](https://github.com/Firs
 
 ### 更新日志
 
+#### V1.2.6（2024-04-02）
+
+- 新增常用的基础样式class，类（class）选择器，用于页面布局，详见文档。
+
+- 新增 Form 表单校验 组件，支持 submit/reset 事件 [vip]。
+
+- 新增 FormItem 表单项 组件，可结合 Form组件进行校验 [vip]。
+
+- 新增 Validator 表单验证 组件（uts）[vip]。
+
+- 新增 FormField 表单字段 组件，用于表单传递数据。
+
+- Button 按钮 组件优化，新增formType属性，结合Form组件实现 submit/reset 事件。
+
+- Input 输入框 组件优化，可结合Form组件进行表单相关操作。
+
+- Textarea 多行输入框 组件优化，可结合Form组件进行表单相关操作。
+
+- InputNumber 数字输入框 组件优化，可结合Form组件进行表单相关操作。
+
+- Radio 单选框 组件优化，可结合Form组件进行表单相关操作。
+
+- Checkbox 复选框 组件优化，可结合Form组件进行表单相关操作。
+
+- Switch 开关 组件优化，可结合Form组件进行表单相关操作。
+
+- Slider 滑块选择器 组件优化，可结合Form组件进行表单相关操作，修复pc端可能报错的问题。
+
+- 新增表单示例，用于演示表单数据收集与重置（submit/reset）。
+
+
 #### V1.2.5（2024-02-03）
 
 - 重要优化：本次更新开发工具需升级至Hbuilderx 4.01.20+，更新后必须升级开发工具（alpha版本）。

TODO.md

@@ -1,36 +1,35 @@
 
-# 三期组件：
+# 待更新组件：
 
-- 打卡页面【布局组件】
-- tabbar 自定义布局 【布局组件】
-- 自定义上拉加载，下拉刷新
-- todo：Button组件 需要支持 form-type="submit" 和 form-type="reset"
-- Form 表单校验。
-- FormItem 表单项。
-- Validator 表单验证。
+- Picker 选择器，支持reset，submit。
+- DatePicker 日期时间选择器，支持reset，submit。
+- Rate 评分，支持reset，submit。
+- Spin 旋转动画
+- Request 网络请求
+- NavBar 导航栏
+- Progress 进度条
+- Circle 圆形进度条
+- Message 消息提示
 - SliderRange 滑块区间选择器。
-- Rate 评分。
-- Select 选择器
-- MovableView 可移动的视图容器
+- BannerArc 横幅底部圆弧
 - Panel 面板
 - Preview 表单预览
-- HorizontalScroll 横向滚动的视图容器
-- BannerArc 横幅底部圆弧
-- Calendar 日历
-- Cascader 级联选择器
-- Picker 选择器
-- DatePicker 日期时间选择器
 - Upload 图片上传
 - SearchBar 搜索栏
 - Modal 模态框
 - Gallery 画廊
 - Landscape 压屏窗
 - LoadAni 加载动画
-- Spin 旋转动画
-- Message 消息提示
-- NavBar 导航栏
-- BubbleBox 气泡框
 - Tabbar 标签栏
+- Qrcode 二维码
+- Barcode 条形码
+- Autograph 手写签名
+- Select 选择器
+- MovableView 可移动的视图容器
+- HorizontalScroll 横向滚动的视图容器
+- Calendar 日历
+- Cascader 级联选择器
+- BubbleBox 气泡框
 - BottomNavbar 底部导航栏
 - IndexList 索引列表
 - NoticeBar 通告栏
@@ -41,8 +40,6 @@
 - Vtabs 纵向选项卡
 - Link 超链接
 - DataTag 标签选择
-- Progress 进度条
-- Circle 圆形进度条
 - CountDown 倒计时
 - Skeleton 骨架屏
 - ShareSheet 分享面板
@@ -54,9 +51,8 @@
 - LicensePlate 车牌号键盘
 - Table 表格 
 - Poster 分享海报
-- Qrcode 二维码
-- Barcode 条形码
-- Autograph 手写签名
-- Request 网络请求
-- ......
 
+- 打卡页面【布局组件】
+- tabbar 自定义布局 【布局组件】
+- 自定义上拉加载，下拉刷新
+- ......

components/firstui/fui-button/fui-button.uvue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+	import { ComponentPublicInstance } from 'vue';
 	/**
 	 * Button 按钮
 	 * @description Button 按钮，支持自定义大小、颜色等。
@@ -40,7 +41,8 @@
 	 * @property {Boolean} disabled	{Boolean} 是否禁用
 	 * @property {Boolean}loading {Boolean} 是否显示加载图标
 	 * @property {String} iconColor	{String} loading圆环背景色
-	 * @property {String} activeColor loading圆环高亮部分颜色
+	 * @property {String} activeColor {String} loading圆环高亮部分颜色
+	 * @property {String} formType {String} 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
 	 * @event {Function} onclick 按钮点击事件，(event: MouseEvent) => void
 	 */
 	export default {
@@ -130,6 +132,11 @@
 			activeColor: {
 				type: String,
 				default: "#FFFFFF"
+			},
+			//V1.2.6+
+			formType: {
+				type: String,
+				default: ''
 			}
 		},
 		computed: {
@@ -224,9 +231,13 @@
 				times: 0,
 				isSpin: false,
 				element: null as UniElement | null,
-				hoverEle: null as UniElement | null
+				hoverEle: null as UniElement | null,
+				fuiForm: null as null | ComponentPublicInstance
 			};
 		},
+		created() {
+			this.getParent('fui-form')
+		},
 		mounted() {
 			this.$nextTick(() => {
 				setTimeout(() => {
@@ -248,6 +259,10 @@
 			handleTap(e : MouseEvent) {
 				if (this.disabled) return;
 				this.$emit('onclick', e);
+				if (this.formType != '' && this.fuiForm != null) {
+					const form = this.fuiForm as ComponentPublicInstance;
+					form.$callMethod('buttonEvent', this.formType)
+				}
 			},
 			handleEnd() {
 				// #ifndef WEB
@@ -283,6 +298,19 @@
 					this.times = this.times + 1
 					this.element!.style.setProperty('transform', `rotate(${this.times * 360}deg)`)
 				}
+			},
+			getParent(name : string) : boolean {
+				if (this.$parent == null) return false;
+				let parent = this.$parent as ComponentPublicInstance;
+				let parentName = parent.$options['name'];
+				while (parentName != name) {
+					if (parent.$parent == null) return false;
+					parent = parent.$parent as ComponentPublicInstance;
+					if (parent.$options['name'] == '') return false;
+					parentName = parent.$options['name'];
+				}
+				this.fuiForm = parent;
+				return true;
 			}
 		}
 	};

components/firstui/fui-checkbox-group/fui-checkbox-group.uvue

@@ -65,6 +65,7 @@
 				this.checkboxChange(vals)
 			},
 			modelChange(vals : string[]) {
+				this.vals = vals;
 				this.childrens.forEach((item : ComponentPublicInstance) => {
 					const value = item.$props['value'] as string;
 					if (vals.includes(value)) {
@@ -94,6 +95,9 @@
 				})
 				this.vals = [] as string[];
 				this.checkboxChange(this.vals)
+			},
+			getSubmitValue() : string[] {
+				return this.vals;
 			}
 		}
 	}

components/firstui/fui-css/base/common.scss

@@ -0,0 +1,75 @@
+/*!
+ * common v1.0.0 (https://unix.firstui.cn)
+ * Copyright 2024 FirstUI.
+ * Licensed under the Apache license
+ */
+
+/* ipx 底部安全区域 */
+.fs-safe__area{
+	padding-bottom: 34px;
+}
+
+/* hover */
+.fs-hover{
+	/* #ifdef WEB */
+	cursor: pointer;
+	/* #endif */
+
+	/* #ifdef APP */
+	background: $fv-bg-color-hover;
+	/* #endif */
+}
+.fs-text__hover{
+	/* #ifdef WEB */
+	cursor: pointer;
+	/* #endif */
+
+	/* #ifdef APP */
+	opacity: .5;
+	/* #endif */
+}
+
+/* #ifndef APP */
+.fs-hover:active{
+	background: $fv-bg-color-hover;
+}
+.fs-text__hover:active{
+	opacity: .5;
+}
+/* #endif */
+
+
+
+.fs-full{
+	width: 100%;
+}
+
+.fs-disabled{
+	opacity: $fv-opacity-disabled;
+	/* #ifdef WEB */
+	cursor: not-allowed;
+	/* #endif */
+}
+
+/* thin 细边线 0.5px*/
+.fs-cell__thin{
+	position: relative;
+	/* #ifdef APP */
+	border-bottom: 0.5px solid $fv-color-border;
+	/* #endif */
+}
+
+/* #ifndef APP */
+.fs-cell__thin::after{
+	content: ' ';
+	position: absolute;
+	border-bottom: 1px solid $fv-color-border;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	bottom: 0;
+	left: 32rpx;
+	right: 0;
+	z-index: 1;
+	pointer-events: none;
+}
+/* #endif */