@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/checkbox-group/checkbox-group.vue

@@ -1,99 +1,97 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['CheckboxGroup']]">
 		<slot></slot>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed, provide, ref, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'CheckboxGroup',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-	provide() {
-		return {
-			checkboxGroupCheck: this.check,
-			checkboxGroupProps: this.$props,
-			checkboxGroupData: this.$data,
-		};
-	},
-	props: {
-		/** 值 */
-		value: {
-			type: [Number, String, Boolean, Array, null],
-			default: null,
-		},
-		/** 类型 */
-		radio: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示勾选图标 */
-		icon: {
-			type: Boolean,
-			default: true,
-		},
-		/** 选中时的图标 */
-		checkedIcon: {
-			type: String,
-			default: '',
-		},
-		/** 未选中时的图标 */
-		uncheckedIcon: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			checkedValue: null,
-		};
+});
+
+const classNames = useClassNames('checkbox-group');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | number | boolean | Array<unknown>;
+	/** 是否单选 */
+	radio?: boolean;
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: undefined,
+	radio: false,
+	icon: true,
+	checkedIcon: '',
+	uncheckedIcon: '',
+});
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value?: string | number | boolean | Array<unknown>): void;
+	(event: 'change', value?: string | number | boolean | Array<unknown>): void;
+}>();
+
+const checkedValue = ref<undefined | string | number | boolean | Array<unknown>>(undefined);
+
+const currentValue = computed({
+	get: function () {
+		return props.modelValue === undefined ? checkedValue.value : props.modelValue;
 	},
-	computed: {
-		currentValue: {
-			get: function () {
-				return this.value === null ? this.checkedValue : this.value;
-			},
-			set: function (val) {
-				this.$emit('input', val);
-				this.checkedValue = val;
-				this.$emit('change', val);
-			},
-		},
+	set: function (val) {
+		if (checkedValue.value === val) return;
+		emit('update:modelValue', val);
+		checkedValue.value = val;
+		emit('change', val);
 	},
-	watch: {
-		value: {
-			handler: function (val) {
-				this.checkedValue = val;
-			},
-			immediate: true,
-			deep: true,
-		},
+});
+
+watch(
+	() => props.modelValue,
+	(val) => {
+		if (checkedValue.value === val) return;
+		emit('update:modelValue', val);
+		checkedValue.value = val;
+		emit('change', val);
 	},
-	methods: {
-		check(val) {
-			if (this.radio) {
-				this.currentValue = val;
-				return;
-			}
+	{
+		immediate: true,
+		deep: true,
+	}
+);
 
-			if (!Array.isArray(this.currentValue)) {
-				this.currentValue = [val];
-				return;
-			}
+const check = (val: string | number | boolean | Array<unknown>) => {
+	if (props.radio) {
+		currentValue.value = val;
+		return;
+	}
 
-			if (this.currentValue.includes(val)) {
-				this.currentValue = this.currentValue.filter((item) => item !== val);
-			} else {
-				this.currentValue.push(val);
-			}
-		},
-	},
+	if (!Array.isArray(currentValue.value)) {
+		currentValue.value = [val];
+		return;
+	}
+
+	if (currentValue.value.includes(val)) {
+		currentValue.value = currentValue.value.filter((item) => item !== val);
+	} else {
+		currentValue.value = currentValue.value.concat(val);
+	}
 };
+
+provide('ecolovo/checkboxGroup/props', props);
+provide('ecolovo/checkboxGroup/checkedValue', checkedValue);
+provide('ecolovo/checkboxGroup/check', check);
 </script>
 
 <style lang="scss" module>

package/components/checkbox-group2/checkbox-group2.vue

@@ -1,9 +1,11 @@
 <template>
-	<view :class="componentClassNames">
-		<checkbox-cpn
+	<view :class="[...classNames, $style['CheckboxGroup2']]">
+		<checkbox2-cpn
 			v-for="(item, index) in options"
 			:key="index"
-			:value="radio ? item.value === currentValue : currentValue && currentValue.includes(item.value)"
+			:value="
+				radio ? item.value === currentValue : Array.isArray(currentValue) && currentValue.includes(item.value)
+			"
 			:icon="icon"
 			:checked-icon="checkedIcon || (radio ? 'radio-checked' : 'checkbox-checked')"
 			:unchecked-icon="uncheckedIcon || (radio ? 'radio-unchecked' : 'checkbox-unchecked')"
@@ -11,120 +13,122 @@
 			@change="check(item.value)"
 		>
 			{{ item.label }}
-		</checkbox-cpn>
+		</checkbox2-cpn>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import CheckboxCpn from './checkbox.vue';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import useClassNames from '../../composable/component-name';
+import Checkbox2Cpn from './checkbox2.vue';
 
-export default {
-	name: 'CheckboxGroup2',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { CheckboxCpn },
-	mixins: [componentName],
-	props: {
-		/** 值 */
-		value: {
-			type: [Number, String, Boolean, Array, null],
-			default: null,
-		},
-		/** 类型 */
-		options: {
-			type: Array,
-			default: () => [],
-		},
-		/** 类型 */
-		radio: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否显示勾选图标 */
-		icon: {
-			type: Boolean,
-			default: true,
-		},
-		/** 选中时的图标 */
-		checkedIcon: {
-			type: String,
-			default: '',
-		},
-		/** 未选中时的图标 */
-		uncheckedIcon: {
-			type: String,
-			default: '',
-		},
-	},
-	data() {
-		return {
-			checkedValue: null,
-		};
-	},
-	computed: {
-		currentValue: {
-			get() {
-				return this.value === null ? this.checkedValue : this.value;
-			},
-			set(val) {
-				this.$emit('input', val);
-				this.checkedValue = val;
-				this.$emit('change', val);
-			},
-		},
-		optionsValue() {
-			return this.options.map((item) => item.value);
-		},
+});
+
+const classNames = useClassNames('aspect');
+
+type OptionValue = string | number | boolean;
+interface _Option {
+	label: string;
+	value: OptionValue;
+}
+
+type _Props = {
+	/** 选项值 */
+	modelValue?: OptionValue | OptionValue[];
+	/** 选项 */
+	options?: _Option[];
+	/** 是否单选 */
+	radio?: boolean;
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: undefined,
+	options: () => [],
+	radio: false,
+	icon: true,
+	checkedIcon: undefined,
+	uncheckedIcon: undefined,
+});
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value?: OptionValue | OptionValue[]): void;
+	(event: 'change', value?: OptionValue | OptionValue[]): void;
+}>();
+
+const checkedValue = ref<OptionValue | OptionValue[]>();
+
+const currentValue = computed<undefined | OptionValue | OptionValue[]>({
+	get() {
+		return props.modelValue === undefined ? checkedValue.value : props.modelValue;
 	},
-	methods: {
-		check(val) {
-			if (this.radio) {
-				this.currentValue = val;
-				return;
-			}
-
-			if (!Array.isArray(this.currentValue)) {
-				this.currentValue = [val];
-				return;
-			}
-
-			if (this.currentValue.includes(val)) {
-				this.currentValue = this.currentValue.filter((item) => item !== val);
-			} else {
-				this.currentValue.push(val);
-			}
-		},
-		/** 切换全选
-		 * @param {boolean | Array} isSelectedAll
-		 */
-		toggle(isSelectedAll) {
-			if (this.radio) return;
-
-			if (typeof isSelectedAll === 'boolean') {
-				if (isSelectedAll) {
-					this.currentValue = this.optionsValue;
-				} else {
-					this.currentValue = [];
-				}
-				return;
-			}
-
-			if (Array.isArray(isSelectedAll)) {
-				this.currentValue = isSelectedAll.filter((item) => this.optionsValue.includes(item));
-				return;
-			}
-
-			if (Array.isArray(this.currentValue) && this.currentValue.length === this.options.length) {
-				this.currentValue = [];
-			} else {
-				this.currentValue = this.optionsValue;
-			}
-		},
+	set(val) {
+		emit('update:modelValue', val);
+		checkedValue.value = val;
+		emit('change', val);
 	},
+});
+
+const optionsValue = computed(() => {
+	return props.options.map((item) => item.value);
+});
+
+const check = (val: OptionValue) => {
+	if (props.radio) {
+		currentValue.value = val;
+		return;
+	}
+
+	if (!Array.isArray(currentValue.value)) {
+		currentValue.value = [val];
+		return;
+	}
+
+	if (currentValue.value.includes(val)) {
+		currentValue.value = currentValue.value.filter((item) => item !== val);
+	} else {
+		currentValue.value.push(val);
+	}
+};
+
+/** 切换全选
+ * @param {boolean | Array} isSelectedAll
+ */
+const toggle = (isSelectedAll: boolean | OptionValue | OptionValue[]) => {
+	if (props.radio) return;
+
+	if (typeof isSelectedAll === 'boolean') {
+		if (isSelectedAll) {
+			currentValue.value = optionsValue.value;
+		} else {
+			currentValue.value = [];
+		}
+		return;
+	}
+
+	if (Array.isArray(isSelectedAll)) {
+		currentValue.value = isSelectedAll.filter((item) => optionsValue.value.includes(item));
+		return;
+	}
+
+	if (Array.isArray(currentValue.value) && currentValue.value.length === props.options.length) {
+		currentValue.value = [];
+	} else {
+		currentValue.value = optionsValue.value;
+	}
 };
+
+defineExpose({ toggle });
 </script>
 
 <style lang="scss" module>

package/components/checkbox-group2/checkbox2.vue

@@ -0,0 +1,104 @@
+<template>
+	<view :class="[...classNames, $style['Checkbox2']]" @click="toggle()">
+		<icon-cpn
+			v-if="icon"
+			:icon="currentValue ? checkedIcon || 'checkbox-checked' : uncheckedIcon || 'checkbox-unchecked'"
+			tap-size="50rpx"
+			:class="[$style['Checkbox2--icon'], { [$style['Checkbox2--checked']]: currentValue }]"
+		/>
+		<view :class="$style['Checkbox2--text']">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import useClassNames from '../../composable/component-name';
+import IconCpn from '../icon/icon.vue';
+
+defineOptions({
+	options: {
+		styleIsolation: 'shared',
+		virtualHost: true,
+	},
+});
+
+const classNames = useClassNames('aspect');
+
+type _Props = {
+	/** 选项值 */
+	value?: boolean;
+	/** 是否显示勾选图标 */
+	icon?: boolean;
+	/** 选中时的图标 */
+	checkedIcon?: string;
+	/** 未选中时的图标 */
+	uncheckedIcon?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	value: undefined,
+	icon: true,
+	checkedIcon: undefined,
+	uncheckedIcon: undefined,
+});
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: boolean): void;
+	(event: 'change', value: boolean): void;
+}>();
+
+const innerValue = ref(false);
+
+const currentValue = computed({
+	get: function () {
+		return props.value === undefined ? innerValue.value : props.value;
+	},
+	set: function (val) {
+		emit('update:modelValue', val);
+		innerValue.value = val;
+		emit('change', val);
+	},
+});
+
+/** 切换选择 */
+const toggle = (checked?: boolean) => {
+	if (checked === undefined || checked === null) {
+		currentValue.value = !currentValue.value;
+		return;
+	}
+
+	if (currentValue.value !== !!checked) {
+		currentValue.value = !!checked;
+	}
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/utils' as *;
+@use '../checkbox/checkbox' as *;
+
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS($checkbox, 'checkbox');
+}
+
+.Checkbox2 {
+	@extend %external-vars;
+	display: flex;
+	align-items: center;
+
+	.Checkbox2--icon {
+		flex: none;
+		margin-right: 12rpx;
+		color: UTILS__LOCAL_VAR(unchecked-color);
+	}
+	.Checkbox2--checked {
+		color: UTILS__LOCAL_VAR(checked-color);
+	}
+	.Checkbox2--text {
+		flex: 0 1 auto;
+	}
+}
+</style>

package/components/data-list/data-list.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+// 可配置的变量
+$data-list: () !default;
+$data-list-default: (
+	// 触发加载更多的区域高度
+	observer-height: 100vh
+);
+$data-list: map.merge($data-list-default, $data-list);