@zhangqingcq/vgce 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -57,34 +57,36 @@
   },
   "homepage": "https://github.com/RickyHeaven/VGCE#readme",
   "dependencies": {
-    "@types/lodash": "^4.14.182",
+    "@types/lodash-es": "^4.17.8",
     "ace-builds": "^1.14.0",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.1",
-    "element-plus": "^2.3.7",
-    "lodash": "^4.17.21",
+    "element-plus": "^2.3.8",
+    "lodash-es": "^4.17.21",
     "mqtt": "^4.3.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-echarts": "^6.5.1",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.2",
     "vue3-ace-editor": "^2.2.2"
   },
   "devDependencies": {
     "@tsconfig/node18": "^2.0.1",
-    "@types/node": "^18.16.8",
+    "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/tsconfig": "^0.4.0",
     "less": "^4.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "3.0.0",
-    "typescript": "~5.1.6",
-    "vite": "4.3.9",
+    "typescript": "~5.0.4",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.3.9",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.9.0",
-    "vue-tsc": "^1.8.4",
+    "vue-tsc": "^1.6.5",
     "windicss": "^3.5.6"
   },
   "engines": {

package/src/App.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
-	import { RouterView } from 'vue-router'
-</script>
+<script setup lang="ts"></script>
 
 <template>
 	<RouterView />

package/src/components/svg-analysis/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
-
 	const props = withDefaults(defineProps<{ name: string; props?: object }>(), { props: () => ({}) })
 	const symbolId = computed(() => `#svg-${props.name}`)
 </script>

package/src/components/svg-editor/center-panel/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'

package/src/components/svg-editor/component-tree/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-	import { ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
 	import { ElTree } from 'element-plus'

package/src/components/svg-editor/connection-panel/index.vue

@@ -5,7 +5,6 @@
 	import type { ISystemStraightLine } from '@/components/config/types'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
-	import { ref } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'

package/src/components/svg-editor/export-json/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { onMounted, ref } from 'vue'
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 	import { pinia } from '@/hooks'

package/src/components/svg-editor/handle-panel/index.vue

@@ -2,7 +2,6 @@
 <script lang="ts" setup>
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
-	import { ref } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState, EScaleInfoType } from '@/stores/global/types'
 	import type { IDoneJson } from '@/stores/global/types'

package/src/components/svg-editor/import-json/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { ref } from 'vue'
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 

package/src/components/svg-editor/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
 	import {
 		ElContainer,
 		ElHeader,

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

@@ -1,6 +1,5 @@
 <!--左侧工具栏-->
 <script lang="ts" setup>
-	import { ref } from 'vue'
 	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
 	import type { IConfig, IConfigItem } from '@/config/types'
 	import { pinia } from '@/hooks'

package/src/components/svg-editor/right-panel/code-edit-modal.vue

@@ -2,7 +2,6 @@
 	import { VAceEditor } from 'vue3-ace-editor'
 	import '@/components/ace-edit'
 	import { ElButton, ElDialog } from 'element-plus'
-	import { computed, ref } from 'vue'
 
 	const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
 		modelValue: () => ({}),

package/src/components/svg-editor/right-panel/common-animate.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 	import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
-	import { ref, watch } from 'vue'
 	import { common_animate_list } from '@/components/config'
 	import SvgAnalysis from '@/components/svg-analysis/index.vue'
 

package/src/components/svg-editor/right-panel/condition.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
 	import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus/es'
 	import type { ICondition } from '@/config/types'
 	import { EConditionType } from '@/config/types'

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

@@ -59,22 +59,22 @@
 				v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-input-number>
+			/>
 			<el-input
 				v-else-if="attr_item.type === EConfigItemPropsType.Input"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-input>
+			/>
 			<el-color-picker
 				v-else-if="attr_item.type === EConfigItemPropsType.Color"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-color-picker>
+			/>
 			<el-switch
 				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
 				v-model="attr_item.val"
 				:disabled="Boolean(attr_item?.disabled)"
-			></el-switch>
+			/>
 			<code-edit-modal
 				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
 				v-model="attr_item.val"

package/src/components/svg-editor/right-panel/index.vue

@@ -14,7 +14,6 @@
 		ElTabPane,
 		ElTabs
 	} from 'element-plus'
-	import { ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useConfigStore } from '@/stores/config'
 	import { useGlobalStore } from '@/stores/global'
@@ -248,7 +247,7 @@
 				</el-form-item>
 				<div
 					v-for="(e, k) in globalStore.handle_svg_info!.info.state"
-					:key="'state' + k"
+					:key="'state' + String(k)"
 					v-if="globalStore.handle_svg_info!.info.state"
 				>
 					<el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>

package/src/components/svg-editor/right-panel/list.vue

@@ -2,7 +2,6 @@
 	import type { IAttrItem } from '@/config/types'
 	import { ElIcon, ElInput } from 'element-plus'
 	import SvgAnalysis from '@/components/svg-analysis/index.vue'
-	import { computed } from 'vue'
 
 	const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
 		modelValue: () => [

package/src/components/svg-viewer/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { getCurrentInstance, onMounted, onBeforeUnmount, reactive } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useGlobalStore } from '@/stores/global'
 	import { EGlobalStoreIntention, EMouseInfoState } from '@/stores/global/types'
@@ -16,6 +15,7 @@
 
 	import { sub, close } from '@/utils/mqtt-net'
 
+	const emit = defineEmits(['onMessage'])
 	//注册所有组件
 	const instance = getCurrentInstance()
 	Object.keys(vueComp).forEach((key: string) => {
@@ -46,7 +46,14 @@
 						y: 50
 					}
 				},
-				net: { mqtt: { url: '', user: '', pwd: '', topics: '' } }
+				net: {
+					mqtt: {
+						url: '',
+						user: '',
+						pwd: '',
+						topics: ''
+					}
+				}
 			},
 			done_json: []
 		}
@@ -215,6 +222,11 @@
 			sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)
 				console.log(message.toString())
+				//暂时先暴露给外部，让用户自己处理消息，后期功能会补上
+				emit('onMessage', {
+					topics,
+					message
+				})
 			})
 		}
 	}

package/src/components/vue3-ruler-tool/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
 	import { pinia } from '@/hooks'
 	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
 

package/src/config/files/clock-a.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-	import { ref } from 'vue'
-
 	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
 	const nowTime = ref(new Date())
 	const s = nowTime.value.getSeconds()

package/src/config/files/common-table.vue

@@ -4,7 +4,6 @@
 	</el-table>
 </template>
 <script setup lang="ts">
-	import { ref, watchEffect } from 'vue'
 	import { ElTable, ElTableColumn } from 'element-plus'
 
 	const props = withDefaults(

package/src/config/files/light-a.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { watch } from 'vue'
-
 	const props = withDefaults(defineProps<{ id: string; isOpen: boolean }>(), {
 		id: '',
 		isOpen: false

package/src/config/files/now-time.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { computed, onMounted, ref, onUnmounted } from 'vue'
 	const props = defineProps({
 		fontColor: {
 			type: String,

package/src/config/files/pie-charts.vue

@@ -4,7 +4,6 @@
 	import { PieChart } from 'echarts/charts'
 	import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 	import VChart, { THEME_KEY } from 'vue-echarts'
-	import { watch, provide, reactive } from 'vue'
 	use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
 
 	provide(THEME_KEY, 'dark')

package/src/config/files/progress.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import { ElProgress } from 'element-plus'
 	import type { ProgressColor } from 'element-plus'
-	import { watch } from 'vue'
 
 	const colors: ProgressColor[] = [
 		{

package/src/config/files/svg-text.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 	// 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
-	import { nextTick, watch } from 'vue'
-
 	const emit = defineEmits(['resize'])
 
 	const props = defineProps({

package/src/config/files/switch-a.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-	import { watch } from 'vue'
-
 	const props = defineProps({
 		id: {
 			type: String,

package/src/config/svg/stateless/index.ts

@@ -6,9 +6,5 @@ import { svg_bot_2 } from './bot-2'
 export const stateless_group: IConfigComponentGroup = {
 	groupType: 'stateless',
 	title: '静态图标',
-	list: [
-		alternator_svg_file,
-		svg_house,
-		svg_bot_2
-	]
+	list: [alternator_svg_file, svg_house, svg_bot_2]
 }

package/src/config/types.ts

@@ -37,7 +37,7 @@ export interface IAnimations {
 }
 
 export interface IConfigItemProps {
-	[key: string]: {
+	[key: keyof any]: {
 		title: string
 		type: EConfigItemPropsType
 		val: any
@@ -77,7 +77,7 @@ interface IDoneJsonConfig {
 }
 
 export interface IConfigItemState {
-	OnOff?: {
+	[k: keyof any]: {
 		title: string
 		default: false
 		props: { [key: string]: { openVal: any; closeVal: any } }

package/src/hooks.ts

@@ -1,5 +1,4 @@
 import type { IDataModel } from '@/components/svg-editor/types'
-import { createPinia } from 'pinia'
 import { useConfigStore } from '@/stores/config'
 import { useGlobalStore } from '@/stores/global'
 import type { IDoneJson } from '@/stores/global/types'

package/src/index.ts

@@ -8,7 +8,5 @@ import 'virtual:windi.css'
 import 'virtual:svg-icons-register'
 import './assets/main.less'
 
-import SvgEditor from '@/components/svg-editor/index.vue'
-import SvgViewer from '@/components/svg-viewer/index.vue'
-
-export { SvgEditor, SvgViewer }
+export { default as SvgEditor } from '@/components/svg-editor/index.vue'
+export { default as SvgViewer } from '@/components/svg-viewer/index.vue'

package/src/main.ts

@@ -1,4 +1,3 @@
-import { createApp } from 'vue'
 import { pinia } from '@/hooks'
 
 import App from './App.vue'

package/src/stores/config/index.ts

@@ -1,4 +1,3 @@
-import { defineStore } from 'pinia'
 import { objectDeepClone } from '@/utils'
 import { connection_line_system } from '@/components/config'
 

package/src/stores/global/index.ts

@@ -1,5 +1,3 @@
-import { defineStore } from 'pinia'
-import { nextTick } from 'vue'
 import { config } from '@/config'
 import type { IConfigItem } from '@/config/types'
 import { isOfType, objectDeepClone, setSvgActualInfo } from '@/utils'

package/src/stores/main.ts

@@ -1,6 +1,3 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
 export const useStore = defineStore('main', () => {
 	const data = ref()
 

package/src/stores/svg-edit-layout/index.ts

@@ -1,4 +1,3 @@
-import { defineStore } from 'pinia'
 import type { ISvgEditLayoutStore } from './types'
 /**
  * 编辑器布局状态

package/src/stores/system/index.ts

@@ -1,5 +1,4 @@
 import { objectDeepClone, randomString } from '@/utils'
-import { defineStore } from 'pinia'
 import { useGlobalStore } from '../global'
 import type { IDoneJson } from '../global/types'
 import { EGlobalStoreIntention } from '../global/types'

package/src/utils/fetch.ts

@@ -3,10 +3,8 @@
  * @author Ricky email:zhangqingcq@foxmail.com
  * @created 2023.06.21
  */
-import axios from 'axios'
+import { isEmpty } from 'lodash-es'
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
-import _ from 'lodash'
-
 import type { Collection } from './types'
 
 // const host = window.location.origin
@@ -164,7 +162,7 @@ function checkRequest(
 			if (config && config.headers && config.headers['Content-Type'] === 'multipart/form-data') {
 				data_ = data
 			} else {
-				if (data && !_.isEmpty(data)) {
+				if (data && !isEmpty(data)) {
 					if (Array.isArray(data)) {
 						data_ = []
 						for (let e of data) {

package/src/utils/proxy.ts

@@ -1,5 +1,4 @@
 import type { ComponentInternalInstance } from 'vue'
-import { getCurrentInstance } from 'vue'
 
 export default function () {
 	const { appContext } = getCurrentInstance() as ComponentInternalInstance

package/src/views/EditorS.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import SvgEditor from '@/components/svg-editor/index.vue'
 	import { useStore } from '@/stores/main'
-	import { useRouter } from 'vue-router'
 	import type { IDataModel } from '@/components/svg-editor/types'
 
 	const router = useRouter()

package/types/index.d.ts

@@ -3,7 +3,25 @@
  * @author Ricky email:zhangqingcq@foxmail.com
  * @created 2023.07.10
  */
+import { DefineComponent } from 'vue'
+import type { IConfig } from '../src/config/types'
+import type { IDataModel } from '../src/components/svg-editor/types'
 
-import SvgEditor from '../dist/vgce'
-import SvgViewer from '../dist/vgce'
-export { SvgEditor, SvgViewer }
+export declare const SvgEditor: DefineComponent<{
+	data?: string
+	customToolbar?: IConfig
+	saveFile?: boolean
+	onOnPreview?: (d: IDataModel) => void
+	onOnSave?: (d: IDataModel) => void
+	onOnReturn?: () => void
+}>
+export declare const SvgViewer: DefineComponent<{
+	data?: IDataModel
+	canvasDrag?: boolean
+	onOnMessage?: (d: { topics: string, message: string }) => void
+}>
+
+export default {
+	SvgEditor,
+	SvgViewer
+}