@opentiny/tiny-engine-canvas 1.0.0

package/test/group.json

@@ -0,0 +1,99 @@
+{
+  "componentName": "div",
+  "children": [
+    {
+      "componentName": "TinyForm",
+      "props": { "labelWidth": 80, "labelPosition": "disabled" },
+      "children": [
+        {
+          "componentName": "TinyFormItem",
+          "props": { "label": "人员" },
+          "children": [
+            {
+              "componentName": "TinyInput",
+              "props": { "placeholder": "请输入", "modelValue": "" },
+              "id": "c3ec1fff"
+            }
+          ],
+          "id": "62717bc1"
+        },
+        {
+          "componentName": "TinyFormItem",
+          "props": { "label": "密码" },
+          "children": [
+            {
+              "componentName": "TinyInput",
+              "props": {
+                "placeholder": "请输入",
+                "modelValue": "",
+                "type": "password"
+              },
+              "id": "e1331c84"
+            }
+          ],
+          "id": "808159c9"
+        },
+        {
+          "componentName": "TinyFormItem",
+          "props": { "label": "" },
+          "children": [
+            {
+              "componentName": "TinyButton",
+              "props": {
+                "text": "提交",
+                "type": "primary",
+                "style": { "marginRight": "10px" }
+              },
+              "id": "01e8a1f3"
+            },
+            {
+              "componentName": "TinyButton",
+              "props": { "text": "重置", "type": "primary" },
+              "id": "7aecc5f4"
+            }
+          ],
+          "id": "41ecdb3d"
+        }
+      ],
+      "id": "b2341d0e"
+    },
+    {
+      "componentName": "TinyTabs",
+      "props": {
+        "modelValue": "first"
+      },
+      "children": [
+        {
+          "componentName": "TinyTabItem",
+          "props": {
+            "title": "标签页1",
+            "name": "first"
+          },
+          "children": [
+            {
+              "componentName": "div",
+              "id": "2e2bfde3"
+            }
+          ],
+          "id": "813aae66"
+        },
+        {
+          "componentName": "TinyTabItem",
+          "props": {
+            "title": "标签页2",
+            "name": "second"
+          },
+          "children": [
+            {
+              "componentName": "div",
+              "id": "295578a9"
+            }
+          ],
+          "id": "21873fc9"
+        }
+      ],
+      "id": "1f6e781f"
+    }
+  ],
+  "id": "root"
+}

package/test/jsslot.json

@@ -0,0 +1,427 @@
+{
+  "componentName": "Block",
+  "fileName": "CrmConsumeVoucherGrid",
+  "schema": {
+    "properties": [
+      {
+        "label": {
+          "zh_CN": "基础信息"
+        },
+        "description": {
+          "zh_CN": "基础信息"
+        },
+        "collapse": {
+          "number": 6,
+          "text": {
+            "zh_CN": "显示更多"
+          }
+        },
+        "content": [
+          {
+            "property": "isEdit",
+            "type": "Boolean",
+            "defaultValue": true,
+            "label": {
+              "text": {
+                "zh_CN": "是否编辑"
+              }
+            },
+            "description": {
+              "zh_CN": "是否编辑配置项"
+            },
+            "widget": {
+              "component": "MetaCodeEditor"
+            },
+            "cols": 12,
+            "rules": [],
+            "required": true,
+            "handle": {}
+          },
+          {
+            "property": "tableData",
+            "type": "Array",
+            "defaultValue": [
+              {
+                "way": "test",
+                "_RID": "row_1"
+              }
+            ],
+            "label": {
+              "text": {
+                "zh_CN": "表格数据"
+              }
+            },
+            "description": {
+              "zh_CN": "表格数据配置项"
+            },
+            "widget": {
+              "component": "MetaCodeEditor"
+            },
+            "cols": 12,
+            "rules": [],
+            "required": true,
+            "handle": {}
+          },
+          {
+            "property": "options",
+            "type": "Array",
+            "defaultValue": [
+              {
+                "value": "test"
+              }
+            ],
+            "label": {
+              "text": {
+                "zh_CN": "下拉框数据"
+              }
+            },
+            "description": {
+              "zh_CN": "下拉框数据配置项"
+            },
+            "widget": {
+              "component": "MetaCodeEditor"
+            },
+            "cols": 12,
+            "rules": [],
+            "required": true,
+            "handle": {}
+          }
+        ]
+      }
+    ],
+    "lifeCycles": {
+      "setup": {
+        "type": "JSFunction",
+        "value": "function( props, context, vue, state ) {\r\n    watch(()=>props.tableData, (value) => {state.tableData = value })\r\n}"
+      }
+    }
+  },
+  "methods": {
+    "deleteData": {
+      "type": "JSFunction",
+      "value": "function deleteData(row) {\n  this.utils.Modal.confirm({\n    title: '提示',\n    message: '您确定要删除吗？'\n  }).then(res => {\n    if (res === 'confirm') {\n      this.$('gridRef').remove(row);\n    }\n  });\n}"
+    },
+    "activeMethod": {
+      "type": "JSFunction",
+      "value": "function activeMethod() {\n  return this.props.isEdit;\n}"
+    },
+    "stepsChange": {
+      "type": "JSFunction",
+      "value": "function stepsChange(data) {\n  console.log(data);\n  this.emit('change', data);\n}"
+    },
+    "strategySubTypeChange": {
+      "type": "JSFunction",
+      "value": "function strategySubTypeChange(row) {\n  console.log(row);\n}"
+    }
+  },
+  "children": [
+    {
+      "componentName": "TinyGrid",
+      "props": {
+        "ref": "gridRef",
+        "className": "crm-consume-voucher-grid",
+        "edit-config": {
+          "type": "JSExpression",
+          "value": "this.{ trigger: 'click', mode: 'cell', showStatus: false, activeMethod }"
+        },
+        "edit-rules": {
+          "type": "JSExpression",
+          "value": "this.state.validRules"
+        },
+        "data": {
+          "type": "JSExpression",
+          "value": "this.state.tableData"
+        },
+        "columns": {
+          "type": "JSExpression",
+          "value": "this.state.columns"
+        },
+        "auto-resize": true
+      },
+      "id": "ab110672"
+    }
+  ],
+  "blockName": "CrmConsumeVoucherGrid",
+  "state": {
+    "validRules": {
+      "interval": {
+        "required": true
+      },
+      "way": {
+        "required": true
+      },
+      "percent": {
+        "required": true
+      },
+      "deadline": {
+        "required": true
+      }
+    },
+    "tableData": {
+      "type": "JSExpression",
+      "value": "this.props.tableData"
+    },
+    "columns": [
+      {
+        "type": "index",
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.tier"
+        },
+        "width": 80
+      },
+      {
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.consumption_interval"
+        },
+        "field": "interval",
+        "slots": {
+          "default": {
+            "type": "JSSlot",
+            "params": ["row", "data", "seq", "rowIndex"],
+            "value": [
+              {
+                "componentName": "ConsumptionRangeGrid",
+                "fileName": "ConsumptionRangeGrid",
+                "props": {
+                  "isEdit": {
+                    "type": "JSExpression",
+                    "value": "this.props.isEdit"
+                  },
+                  "tableData": {
+                    "type": "JSExpression",
+                    "value": "data"
+                  },
+                  "seq": {
+                    "type": "JSExpression",
+                    "value": "seq"
+                  },
+                  "rowIndex": {
+                    "type": "JSExpression",
+                    "value": "rowIndex"
+                  },
+                  "rowData": {
+                    "type": "JSExpression",
+                    "value": "row"
+                  },
+                  "onChange": {
+                    "type": "JSExpression",
+                    "value": "this.stepsChange"
+                  }
+                },
+                "id": "da20dae5"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "field": "strategySubType",
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.vouchertype"
+        },
+        "showIcon": false,
+        "editor": {
+          "component": {
+            "type": "JSResource",
+            "value": "this.utils.Select"
+          },
+          "type": {
+            "type": "JSExpression",
+            "value": "this.props.isEdit ? 'visible' : ''"
+          },
+          "events": {
+            "change": {
+              "type": "JSExpression",
+              "value": "this.strategySubTypeChange"
+            }
+          },
+          "attrs": {
+            "type": "JSExpression",
+            "value": "{ options: props.options, textField: 'name', valueField: 'valueId' }"
+          }
+        },
+        "formatConfig": {
+          "data": {
+            "type": "JSExpression",
+            "value": "this.props.options"
+          },
+          "label": "name",
+          "value": "valueId"
+        },
+        "formatText": "enum"
+      },
+      {
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.giveamount"
+        },
+        "slots": {
+          "default": {
+            "type": "JSSlot",
+            "params": ["row"],
+            "value": [
+              {
+                "componentName": "div",
+                "children": [
+                  {
+                    "componentName": "TinyInput",
+                    "props": {
+                      "style": {
+                        "type": "JSExpression",
+                        "value": "props.isEdit ? 'display:inline-block' : 'display:none'"
+                      },
+                      "value": {
+                        "type": "JSExpression",
+                        "value": "row.voucherSpec.amount",
+                        "model": {
+                          "prop": ""
+                        }
+                      },
+                      "disabled": {
+                        "type": "JSExpression",
+                        "value": "row.strategySubType === 1"
+                      }
+                    },
+                    "id": "d1c37157"
+                  },
+                  {
+                    "componentName": "span",
+                    "props": {
+                      "style": {
+                        "type": "JSExpression",
+                        "value": "props.isEdit ? 'display:none' : 'display:inline-block'"
+                      }
+                    },
+                    "children": {
+                      "type": "JSExpression",
+                      "value": "row.voucherSpec.amount"
+                    },
+                    "id": "f4686ebb"
+                  }
+                ],
+                "id": "7b588b12"
+              }
+            ]
+          }
+        },
+        "field": "voucherSpec.amount",
+        "width": 120
+      },
+      {
+        "field": "percvoucherSpec.ratioent",
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.ratio"
+        },
+        "showIcon": false,
+        "slots": {
+          "default": {
+            "type": "JSSlot",
+            "params": ["row"],
+            "value": [
+              {
+                "componentName": "div",
+                "children": [
+                  {
+                    "componentName": "TinyInput",
+                    "props": {
+                      "style": {
+                        "type": "JSExpression",
+                        "value": "props.isEdit ? 'display:inline-block' : 'display:none'"
+                      },
+                      "value": {
+                        "type": "JSExpression",
+                        "value": "row.voucherSpec.ratio",
+                        "model": {
+                          "prop": ""
+                        }
+                      },
+                      "disabled": {
+                        "type": "JSExpression",
+                        "value": "row.strategySubType === 2"
+                      },
+                      "size": "medium"
+                    },
+                    "id": "d1c37157"
+                  },
+                  {
+                    "componentName": "span",
+                    "props": {
+                      "style": {
+                        "type": "JSExpression",
+                        "value": "props.isEdit ? 'display:none' : 'display:inline-block'"
+                      }
+                    },
+                    "children": {
+                      "type": "JSExpression",
+                      "value": "row.voucherSpec.ratio"
+                    },
+                    "id": "f4686ebb"
+                  }
+                ],
+                "id": "7b588b12"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "title": {
+          "type": "i18n",
+          "key": "quotes.voucher.validity_period_month"
+        },
+        "field": "voucherSpec.validationPeriod",
+        "showIcon": false,
+        "editor": {
+          "component": "input",
+          "attrs": {
+            "disabled": true
+          },
+          "type": {
+            "type": "JSExpression",
+            "value": "this.props.isEdit ? 'visible' : ''"
+          }
+        }
+      },
+      {
+        "title": {
+          "type": "i18n",
+          "key": "quotes.quoteconfig.operate"
+        },
+        "width": 100,
+        "slots": {
+          "default": {
+            "type": "JSSlot",
+            "params": ["row"],
+            "value": [
+              {
+                "componentName": "span",
+                "props": {
+                  "style": "color: #5285db,cursor: pointer",
+                  "onClick": {
+                    "type": "JSFunction",
+                    "value": " ()=>{this.deleteData(row)}"
+                  }
+                },
+                "children": {
+                  "type": "i18n",
+                  "key": "quotes.voucher.voucher_modal_tip4"
+                },
+                "id": "6d81ff9d"
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
+  "lifeCycles": {
+    "setup": {
+      "type": "JSFunction",
+      "value": "function setup({ props, state, watchEffect }) {\r\n  \r\n  watchEffect(\r\n    () => {\r\n      this.state.tableData = props.tableData\r\n      this.state.columns[2].editor.attrs.options = props.options;\r\n    }\r\n  )\r\n}"
+    }
+  }
+}

package/vite.config.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { defineConfig } from 'vite'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { terser } from 'rollup-plugin-terser'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  define: {
+    'process.env': process.env
+  },
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('tiny-i18n-host')
+        }
+      }
+    }),
+    vueJsx(),
+    { ...terser({ module: true }), enforce: 'post' },
+    {
+      apply: 'build',
+      enforce: 'post',
+      generateBundle(_, bundle) {
+        const cssFileName = 'style.css'
+        const jsFileName = 'index.js'
+        const { [cssFileName]: cssBundle } = bundle
+        let IIFEcss = ''
+
+        if (cssBundle) {
+          IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify(
+            cssBundle.source
+          )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()`
+          delete bundle[cssFileName]
+        }
+
+        bundle[jsFileName].code += IIFEcss
+      }
+    }
+  ],
+  publicDir: false,
+  build: {
+    cssCodeSplit: false,
+    lib: {
+      entry: path.resolve(__dirname, './src/index.js'),
+      name: 'canvas',
+      fileName: () => 'index.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-i18n', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
+    },
+    minify: true
+  }
+})