fusions-ui 1.2.6 → 1.2.8

package/components/cell/src/cell.ts

@@ -0,0 +1,167 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const cellProps = {
+	/**
+	 * @description 标题
+	 */
+	title: {
+		type: [String],
+		default: ''
+	},
+	/**
+	 * @description 标题下方的描述信息
+	 */
+	label: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 右侧的内容
+	 */
+	value: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 左侧图标名称
+	 */
+	icon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 左侧图标大小
+	 */
+	iconSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 左侧图标颜色
+	 */
+	iconColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否禁用cell
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示下边框
+	 * @default true
+	 */
+	border: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 内容是否垂直居中(主要是针对右侧的value部分)
+	 * @default true
+	 */
+	center: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否开启点击反馈(表现为点击时加上灰色背景)
+	 * @default false
+	 */
+	clickable: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否展示右侧箭头并开启点击反馈
+	 * @default false
+	 */
+	isLink: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 右侧的图标箭头
+	 * @default 'right'
+	 */
+	rightIcon: {
+		type: String,
+		default: 'right'
+	},
+	/**
+	 * @description 右侧的图标大小
+	 * @default 16
+	 */
+	rightSize: {
+		type: [String, Number],
+		default: 16
+	},
+	/**
+	 * @description 右侧的图标颜色
+	 */
+	rightColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 右侧箭头的方向
+	 */
+	arrowDirection: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 左侧图标样式
+	 */
+	iconStyle: {
+		type: [Object, String],
+		default: () => {
+			return {}
+		}
+	},
+	/**
+	 * @description 标题的样式
+	 */
+	titleStyle: {
+		type: [Object, String],
+		default: () => {
+			return {}
+		}
+	},
+	/**
+	 * @description 单位元的大小
+	 */
+	size: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 点击cell是否阻止事件传播
+	 */
+	stop: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 标识符，cell被点击时返回
+	 */
+	name: {
+		type: [String, Number],
+		default: ''
+	},
+	...componentProps
+};
+
+export const cellEmits = {
+	/**
+	 * @description 点击cell触发回调
+	 */
+	click: (_e: any) => true
+};
+
+export type CellProps = ExtractPropTypes<typeof cellProps>;
+export type CellEmits = typeof cellEmits;

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

@@ -7,7 +7,7 @@
 		<view 
 			class="fu-cell__body" 
 			:class="[ center && 'fu-cell--center', size === 'large' && 'fu-cell__body--large']" 
-			:style="[$fu.addStyle(this.customStyle)]">
+			:style="[$fu.addStyle(customStyle)]">
 			<view class="fu-cell__body__content">
 				<view class="fu-cell__left-icon-wrap">
 					<slot name="icon">
@@ -18,7 +18,7 @@
 					<slot name="title">
 						<text 
 							class="fu-cell__title-text" 
-							:style="[$fu.addStyle(this.titleStyle)]" 
+							:style="[$fu.addStyle(titleStyle)]" 
 							:class="[disabled && 'fu-cell--disabled', size === 'large' && 'fu-cell__title-text--large']" 
 							v-if="title">
 							{{ title }}
@@ -52,16 +52,14 @@
 	</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>
 	/**
 	 * Cell 单元格
 	 * @description 此组件一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial http://www.fusions.top/components/cell.html
 	 * @property {String} title 标题
-	 * @property {String,Number} label 标题下方的描述信息
-	 * @property {String,Number} value 右侧的内容
+	 * @property {String | Number} label 标题下方的描述信息
+	 * @property {String | Number} value 右侧的内容
 	 * @property {String} icon 左侧图标名称
 	 * @property {Boolean} disabled = [true|false] 是否禁用cell	
 	 * @property {Boolean} border = [true|false] 是否显示下边框 (默认 true )
@@ -69,41 +67,34 @@
 	 * @property {Boolean} clickable = [true|false] 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ） 
 	 * @property {Boolean} isLink = [true|false] 是否展示右侧箭头并开启点击反馈 （默认 false ）
 	 * @property {String} rightIcon 右侧的图标箭头 （默认 'right'）
-	 * @property {String,Number} rightSize 右侧的图标大小（默认 16）
+	 * @property {String | Number} rightSize 右侧的图标大小（默认 16）
 	 * @property {String} rightColor 右侧的图标颜色
-	 * @property {String} arrowDirection 右侧箭头的方向，可选值为：left，up，down
-	 * @property {Object,String} titleStyle 标题的样式
-	 * @property {Object,String} iconStyle 左侧图标样式
-	 * @property {String} size 单位元的大小，可选值为 large，normal，mini 
+	 * @property {String} arrowDirection = [left|up|down] 右侧箭头的方向
+	 * @property {Object | String} titleStyle 标题的样式
+	 * @property {Object | String} iconStyle 左侧图标样式
+	 * @property {String} size = [large|normal|mini ] 单位元的大小
 	 * @property {Boolean} stop = [true|false] 点击cell是否阻止事件传播 (默认 true )
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @event {Function} click 点击cell列表时触发
 	 * @example 该组件需要搭配cell-group组件使用
 	 */
-	export default {
-		name:"FuCell",
-		mixins: [mpMixin, mixin, props],
-		emits: ['click'],
-		computed: {
-			emptyValue() {
-				return this.$fu.isNull(this.value)
-			}
-		},
-		methods: {
-			// 点击cell触发
-			handleClick(e) {
-				if (this.disabled) return
-				this.$emit('click', {
-					name: this.name
-				})
-			}
-		}
-	}
+	import { cellEmits, cellProps } from './cell';
+	import { useCell } from './composables';
+	
+	defineOptions({ name: 'FuCell', options: { virtualHost: true } })
+	
+	const props = defineProps(cellProps);
+	const $emit = defineEmits(cellEmits);
+	
+	const {
+		emptyValue,
+		handleClick
+	} = useCell(props, $emit);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 	$fu-cell-padding: 10px 15px !default;
 	$fu-cell-font-size: 15px !default;
 	$fu-cell-line-height: 24px !default;
@@ -132,7 +123,7 @@
 	.fu-cell {
 		
 		&__body {
-			@include flex(row);
+			@include components.flex(row);
 			/* #ifndef APP-NVUE */
 			box-sizing: border-box;
 			/* #endif */
@@ -140,7 +131,7 @@
 			font-size: $fu-cell-font-size;
 			color: $fu-cell-color;
 			&__content {
-				@include flex(row);
+				@include components.flex(row);
 				align-items: center;
 				flex: 1;
 			}
@@ -151,7 +142,7 @@
 		}
 		
 		&__left-icon-wrap, &__right-icon-wrap {
-			@include flex(row);
+			@include components.flex(row);
 			align-items: center;
 			font-size: $fu-cell-icon-size;
 		}
@@ -175,7 +166,7 @@
 		
 		&__title {
 			flex: $fu-cell-title-flex;
-			@include flex(column);
+			@include components.flex(column);
 			
 			&-text {
 				font-size: $fu-cell-title-font-size;

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

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

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

@@ -0,0 +1,20 @@
+import { computed, type SetupContext } from 'vue';
+import type { CellProps, CellEmits } from '../cell';
+
+export const useCell = (props: CellProps, $emit: SetupContext<CellEmits>['emit']) => {
+	const emptyValue = computed(() => {
+		return uni.$fu.isNull(props.value)
+	});
+	
+	const handleClick = () => {
+		if (props.disabled) return
+		$emit('click', {
+			name: props.name
+		})
+	}
+	
+	return {
+		emptyValue,
+		handleClick
+	}
+}

package/components/cell-group/index.ts

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

package/components/cell-group/src/cell-group.ts

@@ -0,0 +1,23 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const cellGroupProps = {
+	/**
+	 * @description 分组标题
+	 */
+	title: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否显示外边框
+	 * @default true
+	 */
+	border: {
+		type: Boolean,
+		default: true
+	},
+	...componentProps
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;

package/components/{fu-cell-group/fu-cell-group.vue → cell-group/src/cell-group.vue}

@@ -1,5 +1,5 @@
 <template>
-	<view class="fu-cell-group" :class="customClass" :style="[$fu.addStyle(this.customStyle)]">
+	<view class="fu-cell-group" :class="customClass" :style="[$fu.addStyle(customStyle)]">
 	    <view v-if="title" class="fu-cell-group__title">
 	        <slot name="title">
 				<text class="fu-cell-group__title__text">{{ title }}</text>
@@ -12,27 +12,22 @@
 	</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>
 	/**
 	 * CellGroup 单元格
 	 * @description 此组件一般用于一组列表的情况，比如个人中心页，设置页等。
 	 * @property {String} title 分组标题
 	 * @property {Boolean} border = [true|false] 是否显示外边框 (默认 true )
 	 * @property {String} customClass 定义需要用到的外部样式类
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @example <fu-cell-group title="设置喜好"></fu-cell-group>
 	 */
-	export default {
-		name:"FuCellGroup",
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {}
-		}
-	}
+	import { cellGroupProps } from './cell-group';
+	
+	defineOptions({ name: 'FuCellGroup', options: { virtualHost: true } });
+	
+	defineProps(cellGroupProps);
 </script>
 
 <style lang="scss" scoped>

package/components/checkbox/index.ts

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

package/components/checkbox/src/checkbox.ts

@@ -0,0 +1,144 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentShapes } from '../../../constants';
+
+export const checkboxProps = {
+	/**
+	 * @description 选中的值
+	 */
+	modelValue: {
+		type: [Array, String, Number],
+		default() {
+			return '';
+		}
+	},
+	/**
+	 * @description 显示模式
+	 * @default 'default'
+	 */
+	mode: {
+		type: String,
+		default: 'default'
+	},
+	/**
+	 * @description 是否多选
+	 * @default false
+	 */
+	multiple: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 选择项数据，默认格式 [{text:'',value:''}]，可通过map字段映射
+	 */
+	list: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 字段映射（默认 { text: 'text', value: 'value' }）
+	 */
+	map: {
+		type: Object,
+		default() {
+			return {
+				text: 'text',
+				value: 'value'
+			}
+		}
+	},
+	/**
+	 * @description 最小选择个数（仅multiple=true时生效）
+	 */
+	min: {
+		type: [Number, String],
+		default: ''
+	},
+	/**
+	 * @description 最大选择个数（仅multiple=true时生效）
+	 */
+	max: {
+		type: [Number, String],
+		default: ''
+	},
+	/**
+	 * @description 是否换行显示
+	 * @default false
+	 */
+	wrap: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否禁用全部checkbox
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 选中状态下的颜色
+	 * @default '#2979ff'
+	 */
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	/**
+	 * @description 非选中状态下的颜色 
+	 */
+	inactiveColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 形状
+	 * @values 'circle' - 圆形, 'square' - 方形
+	 * @default 'circle'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		default: 'circle'
+	},
+	/**
+	 * @description 选中时，文本是否高亮（仅mode=default|list时生效）
+	 * @default true
+	 */
+	highlight: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 列表模式下icon显示位置（仅mode=list时生效）
+	 * @default 'left'
+	 */
+	iconPos: {
+		type: String,
+		default: 'left'
+	},
+	/**
+	 * @description 选中文本颜色，如为空则自动显示
+	 */
+	activeTextColor: {
+		type: String,
+		default: ''
+	}
+};
+
+export const checkboxEmits = {
+	'update:modelValue': (_e : any) => true,
+	/**
+	  * @description 输入事件
+	  */
+	input: (_e : any) => true,
+	/**
+	 * @description 选中状态发生改变时触发
+	 */
+	change: (_e : any) => true
+};
+
+export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>;
+export type CheckboxEmits = typeof checkboxEmits;