@zhangqingcq/vgce 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"

package/src/components/svg-editor/left-panel.vue

@@ -1,5 +1,6 @@
 <!--左侧工具栏-->
 <script lang="ts" setup>
+	import { isEmpty } from 'lodash-es'
 	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'
@@ -23,7 +24,16 @@
 		'echarts'
 	])
 	const createBegin = (svg_item: IConfigItem) => {
-		globalStore.setCreateInfo(svg_item)
+		globalStore.setCreateInfo(sortProps(svg_item))
+	}
+
+	const sortProps = (svg_item: IConfigItem): IConfigItem => {
+		if (svg_item?.props && !isEmpty(svg_item.props)) {
+			Object.keys(svg_item.props).forEach((k, i) => {
+				svg_item.props[k].sort = String(i)
+			})
+		}
+		return svg_item
 	}
 	const dragEndEvent = (e: DragEvent) => {
 		//拖动时记录拖动的svg信息

package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue

@@ -21,6 +21,38 @@
 		code: false
 	})
 
+	const _objInfo = computed(() => {
+		const keys: Record<string, any> = {}
+		let l = 0
+		let t = []
+		for (let k of Object.keys(props.objInfo)) {
+			const s = props.objInfo[k]?.sort
+			if (s) {
+				const _s = Number(s)
+				if (_s > l) {
+					l = _s
+				}
+			}
+			if (s) {
+				keys[s] = k
+			} else {
+				return Object.keys(props.objInfo).map((k) => ({
+					...props.objInfo[k],
+					_key: k
+				}))
+			}
+		}
+
+		for (let i = 0; i < l + 1; i++) {
+			const _i = String(i)
+			t.push({
+				...props.objInfo[keys[_i]],
+				_key: keys[_i]
+			})
+		}
+		return t
+	})
+
 	function propsChangeHandle(e: any) {
 		let t: any = window.setTimeout(function () {
 			emit('change', e)
@@ -31,19 +63,19 @@
 </script>
 
 <template>
-	<div v-for="(attr_item, key) in props.objInfo" :key="key">
+	<div v-for="attr_item in _objInfo" :key="attr_item._key">
 		<!--表单项上显示的灰色值-->
 		<el-form-item v-if="props.code" class="props-row" size="small">
 			<template #label>
 				<el-tooltip
-					:content="String(key)"
-					v-if="getStringWidth(String(key)) > 78"
+					:content="String(attr_item._key)"
+					v-if="getStringWidth(String(attr_item._key)) > 78"
 					placement="left"
 					popper-class="props-popper"
 				>
-					<div class="one-row-txt" style="width: 78px">{{ key }}</div>
+					<div class="one-row-txt" style="width: 78px">{{ attr_item._key }}</div>
 				</el-tooltip>
-				<span v-else>{{ key }}</span>
+				<span v-else>{{ attr_item._key }}</span>
 			</template>
 			<el-tooltip
 				:content="JSON.stringify(attr_item.val)"
@@ -56,10 +88,10 @@
 			<span v-else>{{ attr_item.val }}</span>
 		</el-form-item>
 		<!--props-->
-		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(key)) < 0">
+		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(attr_item._key)) < 0">
 			<el-select
 				v-if="attr_item.type === EConfigItemPropsType.Select"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				placeholder="Select"
 				size="small"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -69,19 +101,19 @@
 			</el-select>
 			<el-input-number
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				autosize
 				type="textarea"
 				:disabled="Boolean(attr_item?.disabled)"
@@ -89,19 +121,19 @@
 			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@change="propsChangeHandle"
 			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
-				v-model="attr_item.val"
+				v-model="props.objInfo[attr_item._key].val"
 				:disabled="Boolean(attr_item?.disabled)"
 				@close="propsChangeHandle"
 			/>
@@ -119,8 +151,4 @@
 	.props-popper {
 		max-width: 350px;
 	}
-	sdf {
-		color: rgb(245, 247, 250);
-		background-color: rgb(92, 184, 122);
-	}
 </style>

package/src/config/types.ts

@@ -36,6 +36,7 @@ export interface IConfigItemProps {
 		val: any
 		options?: any
 		disabled?: boolean
+		sort?: string
 	}
 }