@ecolovo/uniapp-components 2.0.4 → 2.0.6

package/components/form-item/form-item.vue

@@ -31,6 +31,7 @@
 import { computed, inject } from 'vue';
 import type { ComputedRef } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { formItemProps } from './types';
 
 defineOptions({
 	options: {
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	subLabel: '',
 	required: false,
 	type: undefined,
+	...formItemProps,
 });
 
 /** 表单是否只读 */
@@ -94,7 +96,9 @@ const usingType = computed(() => props.type || formType.value);
 	}
 
 	.FormItem--label {
-		color: #999;
+		color: UTILS__LOCAL_VAR(label-color);
+		font-size: UTILS__LOCAL_VAR(label-font-size);
+		font-weight: UTILS__LOCAL_VAR(label-font-weight);
 	}
 
 	&.FormItem--line {
@@ -119,8 +123,8 @@ const usingType = computed(() => props.type || formType.value);
 
 	&.FormItem--next {
 		.FormItem--label {
-			margin-top: 20rpx;
-			margin-bottom: 12rpx;
+			padding-top: 20rpx;
+			padding-bottom: 12rpx;
 		}
 		.FormItem--sub-label {
 			margin-left: 30rpx;
@@ -147,6 +151,8 @@ const usingType = computed(() => props.type || formType.value);
 			background: UTILS__GLOBAL_VAR(color, background);
 			border-radius: 12rpx;
 			height: 104rpx;
+
+			@include UTILS__SET_VAR(input, height, 100%);
 		}
 	}
 }

package/components/form-item/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableFormItemProps = {
+    /** 表单显示类型 */
+    type?: 'line' | 'next' | 'block';
+};
+export declare let formItemProps: ConfigurableFormItemProps;
+export declare const setDefaultFormItemProps: (props?: ConfigurableFormItemProps) => void;

package/components/form-item/types.js

@@ -0,0 +1,4 @@
+export let formItemProps = {};
+export const setDefaultFormItemProps = (props = {}) => {
+    formItemProps = props;
+};

package/components/form-item/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableFormItemProps = {
+	/** 表单显示类型 */
+	type?: 'line' | 'next' | 'block';
+};
+
+export let formItemProps: ConfigurableFormItemProps = {};
+
+export const setDefaultFormItemProps = (
+	props: ConfigurableFormItemProps = {}
+) => {
+	formItemProps = props;
+};

package/components/image/image.vue

@@ -1,15 +1,19 @@
 <template>
 	<image
 		:src="src || ''"
-		:preview-list="previewList"
+		:show-menu-by-longpress="showMenuByLongpress"
+		:webp="webp"
+		:lazy-load="lazyLoad"
 		:class="[...classNames]"
 		:mode="mode"
-		@click="preview"
+		@click="handlePreview"
 	></image>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import useClassNames from '../../composable/component-name';
+import { imageProps, type ImageProps } from './types';
 
 defineOptions({
 	options: {
@@ -20,44 +24,47 @@ defineOptions({
 
 const classNames = useClassNames('image');
 
-type _Props = {
-	/** 图片地址 */
-	src?: string;
-	/** 图片显示模式 */
-	mode?: string;
+type _Props = ImageProps & {
 	/** 是否开启预览 */
-	preview?: boolean;
+	preview?: boolean | string[];
 	/** 预览列表 */
-	previewList?: string[];
+	previewIndex?: number;
 };
 
 const props = withDefaults(defineProps<_Props>(), {
 	src: '',
-	mode: '',
+	mode: 'scaleToFill',
+	showMenuByLongpress: false,
+	webp: false,
+	lazyLoad: false,
 	preview: false,
-	previewList: () => [],
+	previewIndex: undefined,
+	...imageProps,
 });
 
 const emit = defineEmits<{
 	(e: 'click'): void;
 }>();
 
-const preview = () => {
+const previewList = computed(() => {
 	if (!props.preview) {
-		emit('click');
-		return;
+		return [];
 	}
+	if (props.preview === true) {
+		return [props.src];
+	}
+	return props.preview;
+});
 
-	if (props.previewList.length > 0) {
-		uni.previewImage({
-			current: props.src,
-			urls: props.previewList,
-		});
+const handlePreview = () => {
+	if (!props.preview) {
+		emit('click');
 		return;
 	}
+
 	uni.previewImage({
-		current: props.src,
-		urls: [props.src],
+		current: props.previewIndex ?? props.src,
+		urls: previewList.value,
 	});
 };
 </script>

package/components/image/types.d.ts

@@ -0,0 +1,18 @@
+export interface ImageProps {
+    /** 图片地址 */
+    src?: string;
+    /** 图片显示模式 */
+    mode?: UniApp.ImageMode;
+    /** 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 */
+    showMenuByLongpress?: boolean;
+    /** 默认不解析 webP 格式，只支持网络资源 */
+    webp?: boolean;
+    /** 是否开启懒加载 */
+    lazyLoad?: boolean;
+}
+export type ConfigurableImageProps = {
+    /** 图片显示模式 */
+    mode?: UniApp.ImageMode;
+};
+export declare let imageProps: ConfigurableImageProps;
+export declare const setDefaultImageProps: (props?: ConfigurableImageProps) => void;

package/components/image/types.js

@@ -0,0 +1,4 @@
+export let imageProps = {};
+export const setDefaultImageProps = (props = {}) => {
+    imageProps = props;
+};

package/components/image/types.ts

@@ -0,0 +1,23 @@
+export interface ImageProps {
+	/** 图片地址 */
+	src?: string;
+	/** 图片显示模式 */
+	mode?: UniApp.ImageMode;
+	/** 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 */
+	showMenuByLongpress?: boolean;
+	/** 默认不解析 webP 格式，只支持网络资源 */
+	webp?: boolean;
+	/** 是否开启懒加载 */
+	lazyLoad?: boolean;
+}
+
+export type ConfigurableImageProps = {
+	/** 图片显示模式 */
+	mode?: UniApp.ImageMode;
+};
+
+export let imageProps: ConfigurableImageProps = {};
+
+export const setDefaultImageProps = (props: ConfigurableImageProps = {}) => {
+	imageProps = props;
+};

package/components/index.d.ts

@@ -48,3 +48,4 @@ export { default as Selector } from './selector/selector.vue';
 export { default as Switch } from './switch/switch.vue';
 export { default as Tab } from './tab/tab.vue';
 export { default as Textarea } from './textarea/textarea.vue';
+export { default as MediaUpload } from './upload/media-upload.vue';

package/components/index.js

@@ -48,3 +48,4 @@ export { default as Selector } from './selector/selector.vue';
 export { default as Switch } from './switch/switch.vue';
 export { default as Tab } from './tab/tab.vue';
 export { default as Textarea } from './textarea/textarea.vue';
+export { default as MediaUpload } from './upload/media-upload.vue';

package/components/index.ts

@@ -48,3 +48,4 @@ export { default as Selector } from './selector/selector.vue';
 export { default as Switch } from './switch/switch.vue';
 export { default as Tab } from './tab/tab.vue';
 export { default as Textarea } from './textarea/textarea.vue';
+export { default as MediaUpload } from './upload/media-upload.vue';

package/components/input/input.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$input: () !default;
+$input-default: (
+	height: null,
+);
+$input: map.merge($input-default, $input);

package/components/input/input.vue

@@ -39,6 +39,7 @@
 import { computed, inject, ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { inputProps } from './types';
 
 defineOptions({
 	options: {
@@ -87,6 +88,7 @@ const props = withDefaults(defineProps<_Props>(), {
 	maxlength: 140,
 	placeholder: '请输入',
 	useText: false,
+	...inputProps,
 });
 
 defineEmits<{
@@ -112,16 +114,22 @@ const setFocus = () => {
 
 <style lang="scss" module>
 @use '../../styles/utils' as *;
+@use './input' as *;
+
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS('input', $input);
+}
 
 .Input {
-	width: 100%;
-	height: 100%;
+	@extend %external-vars;
+
+	height: var(--height);
 	display: flex;
 	align-items: center;
 
 	.Input--text {
 		flex: 1;
-		width: 100%;
 		pointer-events: none;
 	}
 	.Input--ellipsis {
@@ -131,7 +139,6 @@ const setFocus = () => {
 	}
 	.Input--input {
 		flex: 1;
-		width: 100%;
 		height: 100%;
 		min-height: 1em;
 		padding: 0;

package/components/input/password-input.vue

@@ -24,6 +24,7 @@
 import { ref } from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { passwordInputProps } from './types';
 
 defineOptions({
 	options: {
@@ -48,8 +49,9 @@ type _Props = {
 withDefaults(defineProps<_Props>(), {
 	modelValue: '',
 	disabled: false,
-	maxlength: 140,
+	maxlength: 20,
 	placeholder: '请输入密码',
+	...passwordInputProps,
 });
 
 defineEmits<{

package/components/input/types.d.ts

@@ -0,0 +1,20 @@
+export type ConfigurableInputProps = {
+    /** 文本超长时是否省略 */
+    ellipsis?: boolean;
+    /** 最大输入长度 */
+    maxlength?: number;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 当不聚焦时是否使用文本替换 input */
+    useText?: boolean;
+};
+export declare let inputProps: ConfigurableInputProps;
+export declare const setDefaultInputProps: (props?: ConfigurableInputProps) => void;
+export type ConfigurablePasswordInputProps = {
+    /** 最大输入长度 */
+    maxlength?: number;
+    /** 占位文本 */
+    placeholder?: string;
+};
+export declare let passwordInputProps: ConfigurablePasswordInputProps;
+export declare const setDefaultPasswordInputProps: (props?: ConfigurablePasswordInputProps) => void;

package/components/input/types.js

@@ -0,0 +1,8 @@
+export let inputProps = {};
+export const setDefaultInputProps = (props = {}) => {
+    inputProps = props;
+};
+export let passwordInputProps = {};
+export const setDefaultPasswordInputProps = (props = {}) => {
+    passwordInputProps = props;
+};

package/components/input/types.ts

@@ -0,0 +1,31 @@
+export type ConfigurableInputProps = {
+	/** 文本超长时是否省略 */
+	ellipsis?: boolean;
+	/** 最大输入长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 当不聚焦时是否使用文本替换 input */
+	useText?: boolean;
+};
+
+export let inputProps: ConfigurableInputProps = {};
+
+export const setDefaultInputProps = (props: ConfigurableInputProps = {}) => {
+	inputProps = props;
+};
+
+export type ConfigurablePasswordInputProps = {
+	/** 最大输入长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+};
+
+export let passwordInputProps: ConfigurablePasswordInputProps = {};
+
+export const setDefaultPasswordInputProps = (
+	props: ConfigurablePasswordInputProps = {}
+) => {
+	passwordInputProps = props;
+};

package/components/list-page/list-page.vue

@@ -1,6 +1,5 @@
 <template>
 	<page-cpn
-		:custom="custom"
 		:title="title"
 		:theme="theme"
 		:has-footer="hasFooter"
@@ -26,19 +25,18 @@
 			:class="$style['ListPage--empty']"
 		></empty-cpn>
 
-		<template v-if="hasFooter" #footer>
-			<slot name="footer"></slot>
-		</template>
+		<template #[footerSlot]><slot name="footer" /></template>
 	</page-cpn>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, useSlots } from 'vue';
 import type { PagingData } from '@ecolovo/utils';
 import useClassNames from '../../composable/component-name';
 import DataListCpn from '../data-list/data-list.vue';
 import EmptyCpn from '../empty/empty.vue';
 import PageCpn from '../page/page.vue';
+import { listPageProps } from './types';
 
 defineOptions({
 	options: {
@@ -49,9 +47,17 @@ defineOptions({
 
 const classNames = useClassNames('list-page');
 
+type _Slots = {
+	default: () => void;
+	footer: () => void;
+};
+
+defineSlots<_Slots>();
+
+const $slots = useSlots();
+const footerSlot = $slots.footer ? 'footer' : 'unused_slot';
+
 type _Props = {
-	/** 是否使用自定义导航栏 */
-	custom?: boolean;
 	/** 页面标题 */
 	title?: string;
 	/** 页面头部样式，主要用于控制导航栏字体颜色 */
@@ -69,7 +75,6 @@ type _Props = {
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	custom: true,
 	title: '',
 	theme: 'light',
 	hasFooter: false,
@@ -77,11 +82,15 @@ const props = withDefaults(defineProps<_Props>(), {
 	pagingData: null,
 	showLoadMore: true,
 	loading: false,
+	...listPageProps,
 });
 
 const emit = defineEmits<{
-	(e: 'refresh', payload?: UniApp.PromiseResolvers<unknown>): void;
-	(e: 'reach-bottom', payload?: UniApp.PromiseResolvers<unknown>): void;
+	(e: 'refresh', payload?: PromiseResolvers<unknown> | VoidFunction): void;
+	(
+		e: 'reach-bottom',
+		payload?: PromiseResolvers<unknown> | VoidFunction
+	): void;
 }>();
 
 /** 是否正在刷新中 */
@@ -95,13 +104,7 @@ const onRefresh = () => {
 
 	isRefreshing.value = true;
 
-	// const { promise, resolve, reject } = Promise.withResolvers();
-	let resolve: UniApp.PromiseResolver<unknown>,
-		reject: UniApp.PromiseRejector<unknown>;
-	const promise = new Promise((res, rej) => {
-		resolve = res;
-		reject = rej;
-	});
+	const { promise, resolve, reject } = Promise.withResolvers();
 
 	promise.finally(() => {
 		isRefreshing.value = false;
@@ -116,13 +119,7 @@ const onLoadMore = () => {
 	if (!props.pagingData?.hasMore) return;
 
 	isLoadingMore.value = true;
-	// const { promise, resolve, reject } = Promise.withResolvers();
-	let resolve: UniApp.PromiseResolver<unknown>,
-		reject: UniApp.PromiseRejector<unknown>;
-	const promise = new Promise((res, rej) => {
-		resolve = res;
-		reject = rej;
-	});
+	const { promise, resolve, reject } = Promise.withResolvers();
 
 	promise.finally(() => {
 		isLoadingMore.value = false;

package/components/list-page/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableListPageProps = {
+    /** 页面头部样式，主要用于控制导航栏字体颜色 */
+    theme?: 'light' | 'dark';
+};
+export declare let listPageProps: ConfigurableListPageProps;
+export declare const setDefaultListPageProps: (props?: ConfigurableListPageProps) => void;

package/components/list-page/types.js

@@ -0,0 +1,4 @@
+export let listPageProps = {};
+export const setDefaultListPageProps = (props = {}) => {
+    listPageProps = props;
+};

package/components/list-page/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableListPageProps = {
+	/** 页面头部样式，主要用于控制导航栏字体颜色 */
+	theme?: 'light' | 'dark';
+};
+
+export let listPageProps: ConfigurableListPageProps = {};
+
+export const setDefaultListPageProps = (
+	props: ConfigurableListPageProps = {}
+) => {
+	listPageProps = props;
+};

package/components/load-more/load-more.scss

@@ -8,5 +8,6 @@ $load-more-default: (
 	space: 40rpx,
 	color: #ccc,
 	font-size: UTILS__GLOBAL_VAR(font-size, normal),
+	observer-height: 50vh,
 );
 $load-more: map.merge($load-more-default, $load-more);

package/components/load-more/load-more.vue

@@ -1,24 +1,35 @@
 <template>
 	<view :class="[...classNames, $style['LoadMore']]">
 		<template v-if="end">
-			<view :class="$style['LoadMore--content']">{{ endTitle }}</view>
+			<view :class="$style['LoadMore--content']">
+				<text>{{ endTitle }}</text>
+			</view>
 		</template>
 		<view v-else-if="loading" :class="$style['LoadMore--content']">
-			<icon-cpn icon="loading-dot-spinner"></icon-cpn>
-			加载中...
+			<icon-cpn icon="loading-dot-spinner" spinning></icon-cpn>
+			<text>加载中...</text>
 		</view>
 		<view
 			v-else
 			:class="$style['LoadMore--content']"
 			@click="$emit('load-more')"
-			>上滑或点击加载更多</view
 		>
+			<text>上滑或点击加载更多</text>
+		</view>
+		<view v-if="observe" :class="$style['LoadMore--observe-view']"></view>
 	</view>
 </template>
 
 <script lang="ts" setup>
+import {
+	getCurrentInstance,
+	onBeforeUnmount,
+	onMounted,
+	useCssModule,
+} from 'vue';
 import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
+import { loadMoreProps } from './types';
 
 defineOptions({
 	options: {
@@ -28,6 +39,7 @@ defineOptions({
 });
 
 const classNames = useClassNames('load-more');
+const $style = useCssModule();
 
 type _Props = {
 	/** 是否加载中 */
@@ -36,17 +48,54 @@ type _Props = {
 	end?: boolean;
 	/** 到最后一页时文本 */
 	endTitle?: string;
+	/** 是否开启观察 */
+	observe?: boolean;
 };
 
-withDefaults(defineProps<_Props>(), {
+const props = withDefaults(defineProps<_Props>(), {
 	loading: false,
 	end: false,
 	endTitle: '没有更多了',
+	observe: true,
+	...loadMoreProps,
 });
 
-defineEmits<{
+const emit = defineEmits<{
 	(event: 'load-more'): void;
 }>();
+
+let _observer: UniApp.IntersectionObserver | null = null;
+
+const vm = getCurrentInstance();
+
+const startObserver = () => {
+	stopObserver();
+
+	_observer = uni
+		.createIntersectionObserver(vm, {
+			nativeMode: true,
+		} as UniApp.CreateIntersectionObserverOptions)
+		.relativeToViewport({
+			bottom: 0,
+		});
+	_observer.observe('.' + $style['LoadMore--observe-view'], (res) => {
+		if (res.intersectionRatio === 0) return;
+		if (props.end || props.loading) return;
+		emit('load-more');
+	});
+};
+
+const stopObserver = () => {
+	_observer?.disconnect();
+};
+
+onMounted(() => {
+	startObserver();
+});
+
+onBeforeUnmount(() => {
+	stopObserver();
+});
 </script>
 
 <style lang="scss" module>
@@ -66,6 +115,8 @@ defineEmits<{
 	text-align: center;
 	padding-top: UTILS__LOCAL_VAR(space);
 	font-size: UTILS__GLOBAL_VAR(font-size, normal);
+	position: relative;
+	z-index: 0;
 }
 .LoadMore--content {
 	box-sizing: border-box;
@@ -99,4 +150,13 @@ defineEmits<{
 		background: linear-gradient(to left, transparent, #ccc 75%);
 	}
 }
+.LoadMore--observe-view {
+	position: absolute;
+	z-index: -1;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: UTILS__LOCAL_VAR(observer-height);
+	pointer-events: none;
+}
 </style>

package/components/load-more/types.d.ts

@@ -0,0 +1,6 @@
+export type ConfigurableLoadMoreProps = {
+    /** 到最后一页时文本 */
+    endTitle?: string;
+};
+export declare let loadMoreProps: ConfigurableLoadMoreProps;
+export declare const setDefaultLoadMoreProps: (props?: ConfigurableLoadMoreProps) => void;

package/components/load-more/types.js

@@ -0,0 +1,4 @@
+export let loadMoreProps = {};
+export const setDefaultLoadMoreProps = (props = {}) => {
+    loadMoreProps = props;
+};

package/components/load-more/types.ts

@@ -0,0 +1,12 @@
+export type ConfigurableLoadMoreProps = {
+	/** 到最后一页时文本 */
+	endTitle?: string;
+};
+
+export let loadMoreProps: ConfigurableLoadMoreProps = {};
+
+export const setDefaultLoadMoreProps = (
+	props: ConfigurableLoadMoreProps = {}
+) => {
+	loadMoreProps = props;
+};