Initial commit of akmon project

uni_modules/lime-transition/components/l-transition/index.scss

@@ -0,0 +1,82 @@
+.l-transition {
+  transition-timing-function: ease;
+  // transition-duration: 3000ms;
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.l-fade-enter-active,
+.l-fade-leave-active {
+  transition-property: opacity;
+}
+
+.l-fade-enter,
+.l-fade-leave-to {
+  opacity: 0;
+}
+
+.l-fade-up-enter-active,
+.l-fade-up-leave-active,
+.l-fade-down-enter-active,
+.l-fade-down-leave-active,
+.l-fade-left-enter-active,
+.l-fade-left-leave-active,
+.l-fade-right-enter-active,
+.l-fade-right-leave-active {
+  transition-property: opacity, transform;
+}
+
+.l-fade-up-enter,
+.l-fade-up-leave-to {
+  transform: translate(0, 100%);
+  opacity: 0;
+}
+
+.l-fade-down-enter,
+.l-fade-down-leave-to {
+  transform: translate(0, -100%);
+  opacity: 0;
+}
+
+.l-fade-left-enter,
+.l-fade-left-leave-to {
+  transform: translate(-100%, 0);
+  opacity: 0;
+}
+
+.l-fade-right-enter,
+.l-fade-right-leave-to {
+  transform: translate(100%, 0);
+  opacity: 0;
+}
+
+.l-slide-up-enter-active,
+.l-slide-up-leave-active,
+.l-slide-down-enter-active,
+.l-slide-down-leave-active,
+.l-slide-left-enter-active,
+.l-slide-left-leave-active,
+.l-slide-right-enter-active,
+.l-slide-right-leave-active {
+  transition-property: transform;
+}
+
+.l-slide-up-enter,
+.l-slide-up-leave-to {
+  transform: translate(0, 100%);
+}
+
+.l-slide-down-enter,
+.l-slide-down-leave-to {
+  transform: translate(0, -100%);
+}
+
+.l-slide-left-enter,
+.l-slide-left-leave-to {
+  transform: translate(-100%, 0);
+}
+
+.l-slide-right-enter,
+.l-slide-right-leave-to {
+  transform: translate(100%, 0);
+}

uni_modules/lime-transition/components/l-transition/l-transition.uvue

@@ -0,0 +1,97 @@
+<template>
+	<view class="l-transition l-class" 
+		ref="rootRef"
+		v-if="destoryOnClose ? display && inited : inited"
+		:class="[lClass, classes]" 
+		:style="[styles, lStyle]"
+		@transitionend="finished">
+		<slot/>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	/**
+	 * Transition 过渡动画组件
+	 * @description 用于实现元素显示/隐藏的过渡动画效果，支持自定义动画类名和参数
+	 * <br>插件类型：LTransitionComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-transition
+	 * 
+	 * @property {boolean} appear 初始渲染是否应用动画（默认：false）
+	 * @property {string} lClass 自定义容器类名
+	 * @property {string} lStyle 自定义容器样式（CSS字符串）
+	 * @property {boolean} destoryOnClose 隐藏时销毁内容（默认：false）
+	 * @property {number} zIndex 层级（默认：100）
+	 * @property {number} duration 过渡持续时间（ms，默认：300）
+	 * @property {string} name 基础过渡类名前缀（默认："fade"）
+	 * @property {boolean} visible 是否显示（支持v-model）
+	 * @property {string} enterClass 进入动画初始状态类名
+	 * @property {string} enterActiveClass 进入动画激活状态类名
+	 * @property {string} enterToClass 进入动画结束状态类名
+	 * @property {string} leaveClass 离开动画初始状态类名
+	 * @property {string} leaveActiveClass 离开动画激活状态类名
+	 * @property {string} leaveToClass 离开动画结束状态类名
+	 * @event {Function} before-enter 进入动画开始前触发
+	 * @event {Function} enter 进入动画开始触发
+	 * @event {Function} after-enter 进入动画完成后触发
+	 * @event {Function} before-leave 离开动画开始前触发
+	 * @event {Function} leave 离开动画开始触发
+	 * @event {Function} after-leave 离开动画完成后触发
+	 */
+	
+	
+	import { useTransition, UseTransitionOptions, TransitionEmitStatus } from '@/uni_modules/lime-transition';
+	import { TransitionProps } from './type';
+	
+	const emit = defineEmits(['before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
+	const props = withDefaults(defineProps<TransitionProps>(), {
+		appear: false,
+		destoryOnClose: false,
+		zIndex: 11000,
+		duration: 300,
+		name: 'fade', // transition
+		visible: false,
+		enterClass : '',
+		enterActiveClass : '',
+		enterToClass : '',
+		leaveClass : '',
+		leaveActiveClass : '',
+		leaveToClass : ''
+	})
+	const rootRef = ref<UniElement|null>(null)
+	const {inited, display, classes, finished} = useTransition({
+		element: rootRef,
+		defaultName: 'fade',
+		name: (): string => props.name,
+		emits: (name:TransitionEmitStatus) => { emit(name) },
+		visible: (): boolean => props.visible,
+		enterClass: props.enterClass,
+		enterActiveClass: props.enterActiveClass,
+		enterToClass: props.enterToClass,
+		leaveClass: props.leaveClass,
+		leaveActiveClass: props.leaveActiveClass,
+		leaveToClass: props.leaveToClass,
+		appear: props.appear,
+		duration: props.duration,
+	} as UseTransitionOptions)
+
+	const styles = computed(():Map<string, any>=>{
+		const style = new Map<string, any>()
+		style.set('transition-duration', props.duration + 'ms')
+		style.set('z-index', props.zIndex)
+		// if (!display.value) {
+		// 	style.set("display", "none")
+		// }
+		return style
+	})
+	
+	// watchEffect(()=>{
+	// 	console.log('inited', inited.value)
+	// 	console.log('display', display.value)
+	// 	console.log('classes', classes.value)
+		
+	// })
+		
+</script>
+<style lang="scss">
+	@import './index';
+</style>

uni_modules/lime-transition/components/l-transition/l-transition.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="l-transition l-class"
+		v-if="destoryOnClose ? display && inited : inited"
+		:class="[lClass, classes]" 
+		:style="styles + lStyle"
+		@transitionend="finished">
+		<slot/>
+	</view>
+</template>
+<script lang="ts">
+	// @ts-nocheck
+	/**
+	 * Transition 过渡动画组件
+	 * @description 用于实现元素显示/隐藏的过渡动画效果，支持自定义动画类名和参数
+	 * <br>插件类型：LTransitionComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-transition
+	 * 
+	 * @property {boolean} appear 初始渲染是否应用动画（默认：false）
+	 * @property {string} lClass 自定义容器类名
+	 * @property {string} lStyle 自定义容器样式（CSS字符串）
+	 * @property {boolean} destoryOnClose 隐藏时销毁内容（默认：false）
+	 * @property {number} zIndex 层级（默认：100）
+	 * @property {number} duration 过渡持续时间（ms，默认：300）
+	 * @property {string} name 基础过渡类名前缀（默认："fade"）
+	 * @property {boolean} visible 是否显示（支持v-model）
+	 * @property {string} enterClass 进入动画初始状态类名
+	 * @property {string} enterActiveClass 进入动画激活状态类名
+	 * @property {string} enterToClass 进入动画结束状态类名
+	 * @property {string} leaveClass 离开动画初始状态类名
+	 * @property {string} leaveActiveClass 离开动画激活状态类名
+	 * @property {string} leaveToClass 离开动画结束状态类名
+	 * @event {Function} before-enter 进入动画开始前触发
+	 * @event {Function} enter 进入动画开始触发
+	 * @event {Function} after-enter 进入动画完成后触发
+	 * @event {Function} before-leave 离开动画开始前触发
+	 * @event {Function} leave 离开动画开始触发
+	 * @event {Function} after-leave 离开动画完成后触发
+	 */
+	import { computed, defineComponent} from '@/uni_modules/lime-shared/vue';
+	import { useTransition, UseTransitionOptions } from '@/uni_modules/lime-transition';
+	import transitionsProps from './props';
+	
+	export default defineComponent({
+		props: transitionsProps,
+		options: {
+			styleIsolation: "apply-shared",
+			addGlobalClass: true,
+			externalClasses: true,
+			virtualHost: true,
+		},
+		externalClasses: ['l-class'],
+		emits: ['before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
+		setup(props, {emit}) {
+
+			const {inited, display, classes, finished, toggle} = useTransition({
+				name: (): string => props.name,
+				emits: (name:string) => {
+					emit(name)
+				},
+				visible: (): boolean => props.visible,
+				enterClass: props.enterClass,
+				enterActiveClass: props.enterActiveClass,
+				enterToClass: props.enterToClass,
+				leaveClass: props.leaveClass,
+				leaveActiveClass: props.leaveActiveClass,
+				leaveToClass: props.leaveToClass,
+				appear: props.appear,
+				duration: props.duration,
+			} as UseTransitionOptions)
+			
+			const styles = computed(()=>{
+				let style = `transition-duration:${props.duration}ms; z-index:${props.zIndex};`
+				if (!display.value) {
+					style+=`display:none;`
+				}
+				return style
+			})
+			
+			return {
+				inited,
+				styles,
+				display,
+				classes,
+				finished
+			}
+		}
+	})
+	
+</script>
+<style lang="scss">
+ @import './index';
+</style>

uni_modules/lime-transition/components/l-transition/props.ts

@@ -0,0 +1,35 @@
+
+export default {
+	appear: {
+		type: Boolean,
+		default: false
+	},
+	destoryOnClose: {
+		type: Boolean,
+		default: false
+	},
+	duration: {
+		type: [Number, Array],
+		default: 300
+	},
+	zIndex: {
+		type: Number,
+		default: 11000
+	},
+	name: {
+		type: String,
+		default: 'fade'
+	},
+	visible: {
+		type: Boolean,
+		default: false
+	},
+	lClass: String,
+	lStyle: String,
+	enterClass: String,
+	enterActiveClass: String,
+	enterToClass: String,
+	leaveClass: String,
+	leaveActiveClass: String,
+	leaveToClass: String,
+}

uni_modules/lime-transition/components/l-transition/type.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck
+export interface TransitionProps {
+	/**
+	 * 首次出现是否展示动画
+	 */
+	appear : boolean;
+	/**
+	 * 自定义容器类名
+	 */
+	lClass ?: string;
+	lStyle ?: string;
+	/**
+	 * 隐藏时是否销毁内容
+	 */
+	destoryOnClose : boolean;
+	/**
+	 * 层级
+	 */
+	zIndex: number;
+	/**
+	 * 指定过渡时间
+	 */
+	duration : number;
+	/**
+	 * 过渡类名
+	 */
+	name : string;
+	/**
+	 * 是否显示
+	 */
+	visible : boolean;
+	enterClass: string;
+	enterActiveClass: string;
+	enterToClass: string;
+	leaveClass: string;
+	leaveActiveClass: string;
+	leaveToClass: string;
+};