feat(vue-components): 添加className配置，page新增css、cssFile、jsFile配置

vue-components/button/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",

vue-components/button/src/formConfig.ts

@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '文本',
     name: 'text',

vue-components/container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.6",
+  "version": "0.0.7",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/container/src/formConfig.ts

@@ -19,6 +19,11 @@
 import { getElById } from '@tmagic/core';
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'layout',
     text: '容器布局',

vue-components/img/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",

vue-components/img/src/formConfig.ts

@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '图片',
     name: 'src',

vue-components/iterator-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/iterator-container/src/formConfig.ts

@@ -18,6 +18,11 @@
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'iteratorData',
     text: '数据源数据',

vue-components/page-fragment-container/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",

vue-components/page-fragment-container/src/formConfig.ts

@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'pageFragmentId',
     text: '页面片ID',

vue-components/page/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.6",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",

vue-components/page/src/formConfig.ts

@@ -28,7 +28,6 @@ export default [
   {
     text: '页面标题',
     name: 'title',
-    type: 'data-source-input',
   },
   {
     name: 'layout',
@@ -51,4 +50,33 @@ export default [
       }
     },
   },
+  {
+    name: 'jsFiles',
+    text: 'js',
+    type: 'table',
+    items: [
+      {
+        name: 'url',
+        label: '链接',
+      },
+    ],
+  },
+  {
+    name: 'cssFiles',
+    text: 'css',
+    type: 'table',
+    items: [
+      {
+        name: 'url',
+        label: '链接',
+      },
+    ],
+  },
+  {
+    text: 'css',
+    name: 'css',
+    type: 'code',
+    language: 'css',
+    height: '500px',
+  },
 ];

vue-components/page/src/index.vue

@@ -5,9 +5,31 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MPage } from '@tmagic/core';
+import { asyncLoadCss, asyncLoadJs, type MPage } from '@tmagic/core';
 import { useApp, useComponent } from '@tmagic/vue-runtime-help';
 
+const createCss = (config: MPage) => {
+  if (config.cssFile) {
+    asyncLoadCss(config.cssFile);
+  }
+
+  if (Array.isArray(config.cssFiles)) {
+    config.cssFiles.map((file) => asyncLoadCss(file.url));
+  }
+
+  if (config.css) {
+    const style = window.document.createElement('style');
+    style.innerHTML = config.css;
+    window.document.head.appendChild(style);
+  }
+};
+
+const createJs = (config: MPage) => {
+  if (Array.isArray(config.jsFiles)) {
+    config.jsFiles.map((file) => asyncLoadJs(file.url));
+  }
+};
+
 export default defineComponent({
   props: {
     config: {
@@ -30,6 +52,11 @@ export default defineComponent({
       methods: { refresh },
     });
 
+    if (app?.jsEngine === 'browser') {
+      createCss(props.config);
+      createJs(props.config);
+    }
+
     const containerComponent = useComponent({ componentType: 'container', app });
 
     return {

vue-components/qrcode/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",

vue-components/qrcode/src/formConfig.ts

@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '链接',
     name: 'url',

vue-components/text/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",

vue-components/text/src/formConfig.ts

@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'text',
     text: '文本',