@kengic/uni 0.3.2-beta.10

package/dist/uni-ui/uni-transition/uni-transition.vue

@@ -0,0 +1,281 @@
+<template>
+	<view v-if="isShow||onceRender" v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'UniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		customClass:{
+			type: String,
+			default: ''
+		},
+		onceRender:{
+			type:Boolean,
+			default:false
+		},
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			for (let i in obj) {
+				try {
+					if(typeof obj[i] === 'object'){
+						this.animation[i](...obj[i])
+					}else{
+						this.animation[i](obj[i])
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
+			this.animation.step(config)
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 1 : 0,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
+<style></style>

package/package.json

@@ -0,0 +1,90 @@
+{
+    "name": "@kengic/uni",
+    "version": "0.3.2-beta.10",
+    "scripts": {
+        "build": "rimraf dist && vue-tsc && vite build",
+        "build:dev": "rimraf dist && vue-tsc && vite build --mode development",
+        "publish:all:beta": "npm run bump-version:beta && npm run publish:all",
+        "publish:all:patch": "npm run bump-version:patch && npm run publish:all",
+        "publish:all:minor": "npm run bump-version:minor && npm run publish:all",
+        "publish:all:major": "npm run bump-version:major && npm run publish:all",
+        "-------------------- C": "",
+        "bump-to:luotao.c.wms-pda": "tsx scripts/bump-to.luotao.c.wms-pda.ts",
+        "copy-to:luotao.c.wms-pda": "tsx scripts/copy-to.luotao.c.wms-pda.ts",
+        "copy-to:luotao.c.wms-pda & build": "npm run build:dev && npm run copy-to:luotao.c.wms-pda",
+        "-------------------- D": "",
+        "bump-to:luotao.wms-pda": "tsx scripts/bump-to.luotao.wms-pda.ts",
+        "copy-to:luotao.wms-pda": "tsx scripts/copy-to.luotao.wms-pda.ts",
+        "copy-to:luotao.wms-pda & build": "npm run build:dev && npm run copy-to:luotao.wms-pda",
+        "--------------------": "",
+        "gen:apis:WMS": "kengic-pont generate-apis --config kg.config.ts --origin WMS",
+        "bump-version:beta": "tsx scripts/bump.ts beta",
+        "bump-version:major": "tsx scripts/bump.ts major",
+        "bump-version:minor": "tsx scripts/bump.ts minor",
+        "bump-version:patch": "tsx scripts/bump.ts patch",
+        "publish:all": "tsx scripts/publish.ts",
+        "publish:npm": "npmrc kengic && npm publish ./ --registry https://registry.npmjs.org/ --access public"
+    },
+    "peerDependencies": {
+        "vue": "3.2.47"
+    },
+    "dependencies": {
+        "@ant-design/icons-vue": "6.1.0",
+        "@iconify-icons/ant-design": "1.2.5",
+        "@iconify/vue": "4.1.1",
+        "@vueuse/core": "8.9.4",
+        "@vueuse/shared": "8.9.4",
+        "lodash-es": "4.17.21",
+        "pinia": "2.0.35"
+    },
+    "devDependencies": {
+        "@dcloudio/types": "3.3.3",
+        "@kengic/pont": "1.2.10-beta.37",
+        "@types/lodash-es": "~4.17.7",
+        "@types/node": "~18.14.6",
+        "@types/semver": "~7.3.13",
+        "@vitejs/plugin-vue": "4.2.1",
+        "@vitejs/plugin-vue-jsx": "3.0.1",
+        "chalk": "~4.1.2",
+        "less": "~4.1.3",
+        "prettier": "~2.8.4",
+        "rimraf": "~3.0.2",
+        "rollup": "~2.79.1",
+        "sass": "1.62.1",
+        "sass-loader": "10.4.1",
+        "semver": "~7.3.8",
+        "tsx": "3.12.7",
+        "typescript": "4.9.5",
+        "vite": "4.3.4",
+        "vue": "3.2.47",
+        "vue-tsc": "1.6.4"
+    },
+    "main": "./dist/kengic-uni.js",
+    "module": "./dist/kengic-uni.js",
+    "types": "./dist/src/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/kengic-uni.js"
+        },
+        "./dist/index.css": "./dist/index.css",
+        "./dist/uni-ui": "./dist/uni-ui/index.ts",
+        "./uni-ui/uni-icons/uni-icons.vue": "./dist/uni-ui/uni-icons/uni-icons.vue",
+        "./uni-ui/uni-easyinput/uni-easyinput.vue": "./dist/uni-ui/uni-easyinput/uni-easyinput.vue",
+        "./uni-ui/uni-card/uni-card.vue": "./dist/uni-ui/uni-card/uni-card.vue",
+        "./uni-ui/uni-popup/uni-popup.vue": "./dist/uni-ui/uni-popup/uni-popup.vue",
+        "./uni-ui/uni-grid/uni-grid.vue": "./dist/uni-ui/uni-grid/uni-grid.vue",
+        "./uni-ui/uni-grid-item/uni-grid-item.vue": "./dist/uni-ui/uni-grid-item/uni-grid-item.vue",
+        "./uni-ui/uni-list/uni-list.vue": "./dist/uni-ui/uni-list/uni-list.vue",
+        "./uni-ui/uni-badge/uni-badge.vue": "./dist/uni-ui/uni-badge/uni-badge.vue",
+        "./uni-ui/uni-list-item/uni-list-item.vue": "./dist/uni-ui/uni-list-item/uni-list-item.vue",
+        "./uni-ui/uni-transition/uni-transition.vue": "./dist/uni-ui/uni-transition/uni-transition.vue"
+    },
+    "prettier": {
+        "endOfLine": "auto",
+        "printWidth": 160,
+        "semi": true,
+        "singleQuote": true,
+        "tabWidth": 4,
+        "trailingComma": "all"
+    }
+}