fusions-ui 1.2.6 → 1.2.8

package/components/{fu-search/fu-search.vue → search/src/search.vue}

@@ -16,9 +16,9 @@
 				:placeholder="placeholder" 
 				:maxlength="maxlength"
 				confirm-type="search" 
-				@confirm="confirm" 
-				@blur="blur" 
-				@focus="emitFocus" 
+				@confirm="handleConfirm" 
+				@blur="handleBlur" 
+				@focus="handleFocus" 
 				:style="[{
 					textAlign: inputAlign,
 					color: color,
@@ -27,28 +27,27 @@
 				}, inputStyle]"
 				v-if="show || searchValue" />
 			<text class="fu-search__text-placeholder" :style="[inputStyle]" v-else>{{ placeholder }}</text>
-			<view class="fu-search__box__icon-clear" v-if="show && (clearabled === 'always' || clearabled==='auto' && searchValue !=='') && !readonly" @click="clear">
+			<view class="fu-search__box__icon-clear" v-if="show && (clearabled === 'always' || clearabled==='auto' && searchValue !=='') && !readonly" @click="handleClear">
 				<slot name="clearIcon">
 					<fu-icon name="close-fill" color="#c0c4cc" size="20" />
 				</slot>
 			</view>
 		</view>
-		<text class="fu-search__custom" :style="[actionStyle]" v-if="(clearabled === 'always' || show && clearabled ==='auto') && showAction" @tap.stop.prevent="custom">
+		<text class="fu-search__custom" :style="[actionStyle]" v-if="(clearabled === 'always' || show && clearabled ==='auto') && showAction" @tap.stop.prevent="handleCustom">
 			{{actionText || ''}}
 		</text>
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * Search 搜索
 	 * @description Search 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
-	 * @property {String} value / v-model 输入框初始值
+	 * @tutorial http://www.fusions.top/components/search.html
+	 * @property {String | Number} v-model 输入框初始值
 	 * @property {String} placeholder 占位提示文字（默认 '搜索关键词'）
-	 * @property {String,Number} radius  自定义圆角  （默认 5）
-	 * @property {String,Number} maxlength 输入最大长度（默认 150）
+	 * @property {String | Number} radius  自定义圆角  （默认 5）
+	 * @property {String | Number} maxlength 输入最大长度（默认 150）
 	 * @property {String} clearabledd = [always|auto|none] 是否显示清除按钮
 	 * 	@value always 一直显示
 	 * 	@value auto 输入框不为空时显示
@@ -61,13 +60,13 @@
 	 * @property {String} actionText 右侧控件文字（默认 '搜索' ）
 	 * @property {Object} inputStyle input输入框的样式，可以定义文字颜色，大小等，对象形式
 	 * @property {String} searchIcon 左边的图标，可以为fuIcons图标名称（默认 'magnifier'）
-	 * @property {String,Number} searchIconSize 左边的图标大小（默认 18）
+	 * @property {String | Number} searchIconSize 左边的图标大小（默认 18）
 	 * @property {String} searchIconColor 左边图标的颜色（默认 '#c0c4cc'） 
 	 * @property {String} inputAlign 输入框对齐方式（默认 'center'） 
 	 * 	@value left 左对齐
 	 * 	@value center 居中
 	 * 	@value right 右对齐
-	 * @property {String,Number} height 高度（默认 36）
+	 * @property {String | Number} height 高度（默认 36）
 	 * @property {String} color 输入框字体颜色
 	 * 
 	 * @event {Function} confirm fuSearch 的输入框 confirm 事件，返回参数为fuSearch的value，e={value:Number}
@@ -77,157 +76,46 @@
 	 * @event {Function} focus input聚焦时触发事件
 	 * @event {Function} custom 用户点击右侧控件时触发
 	 * @event {Function} click readonly为true时，点击输入框，发出此事件，用于跳转搜索页
-	 * @example <fu-search></fu-search>
+	 * @example <fu-search v-model="keyword"></fu-search>
 	 */
-	export default {
-		name:"FuSearch",
-		emits: ['input', 'update:modelValue', 'clear', 'confirm', 'blur', 'focus', 'custom', 'click'],
-		mixins: [mpMixin, props],
-		data() {
-			return {
-				show: false,
-				showFocus: false,
-				searchValue: ''
-			};
-		},
-		computed: {
-			searchStyle() {
-				return {
-					borderRadius: this.$fu.addUnit(this.radius),
-					background: this.bgColor || '',
-					justifyContent: this.inputAlign,
-					height: this.$fu.addUnit(this.height)
-				}
-			},
-			placeholderStyle() {
-				if(typeof(this.inputStyle) === 'string') {
-					return this.inputStyle
-				}
-				return Object.keys(this.inputStyle).length? this.$fu.addStyle(this.inputStyle): ''
-			}
-		},
-		methods: {
-			searchClick() {
-				if(this.readonly) return this.$emit('click')
-				if (this.show) {
-					return
-				}
-				this.show = true;
-				this.$nextTick(() => {
-					this.showFocus = true
-				})
-			},
-			
-			// 清空输入
-			// 也可以作为用户通过this.$refs形式调用清空输入框内容
-			clear() {
-				this.$emit("clear", {
-					value: this.searchValue
-				})
-				this.searchValue = "";
-			},
-			
-			// 点击右边自定义按钮的事件
-			custom() {
-				if(this.readonly) return
-				this.$emit("custom", {
-					value: this.searchValue
-				});
-				this.show = false;
-				this.showFocus = false;
-				// #ifndef APP-PLUS
-				uni.hideKeyboard()
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-			},
-			
-			confirm() {
-				// #ifndef APP-PLUS
-				uni.hideKeyboard();
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-				this.$emit("confirm", {
-					value: this.searchValue
-				})
-			},
-			
-			blur() {
-				// #ifndef APP-PLUS
-				uni.hideKeyboard();
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-				this.$emit("blur", {
-					value: this.searchValue
-				})
-			},
-			
-			emitFocus(e) {
-				this.$emit("focus", e.detail)
-			}
-		},
-		watch: {
-			// #ifndef VUE3
-			value: {
-				immediate: true,
-				handler(newVal) {
-					this.searchValue = newVal;
-					if (newVal) {
-						this.show = true;
-					}
-				}
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal) {
-					this.searchValue = newVal;
-					if (newVal) {
-						this.show = true;
-					}
-				}
-			},
-			// #endif
-			focus: {
-				immediate: true,
-				handler(newVal) {
-					if (newVal) {
-						if(this.readonly) return
-						this.show = true;
-						this.$nextTick(() => {
-							this.showFocus = true;
-						})
-					}
-				}
-			},
-			searchValue(newVal, oldVal) {
-				this.$emit("input", newVal)
-				// #ifdef VUE3
-				this.$emit("update:modelValue", newVal)
-				// #endif
-			}
-		}
-	}
+	import { searchEmits, searchProps } from './search';
+	import { useSearch, useSearchCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSearch', options: { virtualHost: true } })
+	
+	const props = defineProps(searchProps);
+	const $emit = defineEmits(searchEmits);
+	
+	const {
+		show,
+		showFocus,
+		searchValue,
+		searchClick,
+		handleClear,
+		handleCustom,
+		handleConfirm,
+		handleBlur,
+		handleFocus
+	} = useSearch(props, $emit);
+	
+	const {
+		searchStyle,
+		placeholderStyle
+	} = useSearchCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	$fu-search-height: 36px;
 	
 	.fu-search {
-		@include flex(row);
+		@include components.flex(row);
 		flex: 1;
 		position: relative;
 		align-items: center;
 		
 		&__box {
-			@include flex(row);
+			@include components.flex(row);
 			/* #ifndef APP-NVUE */
 			box-sizing: border-box;
 			overflow: hidden;
@@ -239,7 +127,7 @@
 			height: $fu-search-height;
 			
 			&__icon-search {
-				@include flex(row);
+				@include components.flex(row);
 				padding: 0 8px;
 				justify-content: center;
 				align-items: center;
@@ -253,7 +141,7 @@
 			}
 			
 			&__icon-clear {
-				@include flex(row);
+				@include components.flex(row);
 				align-items: center;
 				padding: 0 8px;
 				/* #ifdef H5 */

package/components/section/index.ts

@@ -0,0 +1 @@
+export * from './src/section'

package/components/section/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-section'

package/components/section/src/composables/use-section.ts

@@ -0,0 +1,19 @@
+import { SetupContext, watch } from 'vue';
+import type { SectionProps, SectionEmits } from '../section';
+
+export const useSection = (props: SectionProps, $emit: SetupContext<SectionEmits>['emit']) => {
+	const handleClick = () => {
+		$emit('click')
+	}
+	
+	// watch监听事件
+	watch(() => props.title, (newVal) => {
+		if (uni.report && newVal !== '') {
+			uni.report('title', newVal)
+		}
+	});
+	
+	return {
+		handleClick
+	}
+}

package/components/section/src/section.ts

@@ -0,0 +1,83 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from "../../../constants";
+
+/**
+ * 标题mode有效值
+ */
+export const sectionModes = ['line', 'circle', 'square'] as const;
+
+export const sectionProps = {
+	/**
+	 * @description 标题装饰类型
+	 * @values 'line' - 竖线, 'circle' - 圆形, 'square' - 正方形
+	 * @example <fu-section mode="line"></fu-section>
+	 */
+	mode: {
+		type: String,
+		values: sectionModes,
+		default: ''
+	},
+	/**
+	 * @description 主标题
+	 * @example <fu-section title="标题"></fu-section>
+	 */
+	title: {
+		type: String,
+		required: true,
+		default: ''
+	},
+	/**
+	 * @description 主标题字体大小
+	 * @default 14
+	 * @example <fu-section titleSize="14"></fu-section>
+	 */
+	titleSize: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 主标题字体颜色
+	 * @example <fu-section titleColor="red"></fu-section>
+	 */
+	titleColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 副标题
+	 * @example <fu-section subTitle="副标题"></fu-section>
+	 */
+	subTitle: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 副标题字体大小
+	 * @default 12
+	 * @example <fu-section subTitleSize="12"></fu-section>
+	 */
+	subTitleSize: {
+		type: [String, Number],
+		default: 12
+	},
+	/**
+	 * @description 副标题字体颜色
+	 * @default '#999999'
+	 * @example <fu-section subTitleColor="#999999"></fu-section>
+	 */
+	subTitleColor: {
+		type: String,
+		default: '#999999'
+	},
+	...componentProps
+};
+
+export const sectionEmits = {
+	/**
+	 * @description 文本点击事件
+	 */
+	click: () => true,
+};
+
+export type SectionProps = ExtractPropTypes<typeof sectionProps>;
+export type SectionEmits = typeof sectionEmits;

package/components/{fu-section/fu-section.vue → section/src/section.vue}

@@ -5,10 +5,18 @@
 			<slot v-else name="decoration"></slot>
 
 			<view class="fu-section-header__content">
-				<text class="fu-section__content-title" 
+				<text 
+					class="fu-section__content-title" 
 					:class="{'distraction': !subTitle}" 
-					:style="{'font-size': $fu.addUnit(titleSize), 'color': titleColor}">{{ title }}</text>
-				<text class="fu-section-header__content-sub" :style="{fontSize: $fu.addUnit(subTitleSize), color: subTitleColor}" v-if="subTitle">{{ subTitle }}</text>
+					:style="{fontSize: $fu.addUnit(titleSize), 'color': titleColor}">
+					{{ title }}
+				</text>
+				<text 
+					class="fu-section-header__content-sub" 
+					:style="{fontSize: $fu.addUnit(subTitleSize), color: subTitleColor}" 
+					v-if="subTitle">
+					{{ subTitle }}
+				</text>
 			</view>
 
 			<view class="fu-section-header__slot-right">
@@ -22,55 +30,48 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * Section 标题栏
-	 * @description 标题栏
+	 * @description 主要用于文章、列表详情等标题展示
+	 * @tutorial http://www.fusions.top/components/section.html
 	 * @property {String} mode = [line|circle|square] 标题装饰类型
 	 * 	@value line 竖线
 	 * 	@value circle 圆形
 	 * 	@value square 正方形
 	 * @property {String} title 主标题
-	 * @property {String,Number} titleSize 主标题字体大小
+	 * @property {String | Number} titleSize 主标题字体大小（默认 14）
 	 * @property {String} titleColor 主标题字体颜色
 	 * @property {String} subTitle 副标题
-	 * @property {String,Number} subTitleSize 副标题字体大小
-	 * @property {String} subTitleColor 副标题字体颜色
+	 * @property {String | Number} subTitleSize 副标题字体大小（默认 12）
+	 * @property {String} subTitleColor 副标题字体颜色（默认 '#999999'）
 	 * @property {String} customClass 定义需要用到的外部样式
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @event {Function} click 点击标题栏触发
 	 * @example <fu-section title="标题"></fu-section>
 	 */
-	export default {
-		name: 'FuSection',
-		mixins: [mpMixin, mixin, props],
-		emits: ['click'],
-		methods: {
-			handleClick() {
-				this.$emit('click')
-			}
-		},
-		watch: {
-			title(newVal) {
-				if (uni.report && newVal !== '') {
-					uni.report('title', newVal)
-				}
-			}
-		}
-	}
+	import { sectionEmits, sectionProps } from './section';
+	import { useSection } from './composables';
+	
+	defineOptions({ name: 'FuSection', options: { virtualHost: true } });
+	
+	const props = defineProps(sectionProps);
+	const $emit = defineEmits(sectionEmits);
+	
+	const {
+		handleClick
+	} = useSection(props, $emit);
 </script>
+
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
 
 	.fu-section {
 
 		.fu-section-header {
-			@include flex(row);
+			@include components.flex(row);
 			position: relative;
 			align-items: center;
 			font-weight: normal;
@@ -78,7 +79,7 @@
 
 			&__decoration {
 				margin-right: 6px;
-				background-color: $fu-primary;
+				background-color: $fu-color-primary;
 
 				&.line {
 					width: 4px;
@@ -102,9 +103,9 @@
 			}
 
 			&__content {
-				@include flex(column);
+				@include components.flex(column);
 				flex: 1;
-				color: #333;
+				color: $fu-color-main;
 
 				.distraction {
 					flex-direction: row;

package/components/sign-board/index.ts

@@ -0,0 +1 @@
+export * from './src/sign-board'

package/components/sign-board/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-sign-board'