├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── package.json ├── packages ├── varlet-lowcode-cli │ ├── lib │ │ └── index.js │ ├── package.json │ ├── src │ │ ├── commands │ │ │ ├── build.ts │ │ │ ├── compile.ts │ │ │ ├── dev.ts │ │ │ └── preview.ts │ │ ├── config │ │ │ ├── varletLowcode.config.ts │ │ │ └── vite.config.ts │ │ ├── index.ts │ │ └── shared │ │ │ ├── constant.ts │ │ │ ├── logger.ts │ │ │ └── utils.ts │ ├── tsconfig.json │ └── varlet.lowcode.default.config.js ├── varlet-lowcode-code-editor │ ├── package.json │ ├── src │ │ ├── CodeEditor.vue │ │ └── index.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-codegen │ ├── package.json │ ├── src │ │ ├── Codegen.vue │ │ ├── index.ts │ │ ├── module.d.ts │ │ ├── template │ │ │ ├── README.md │ │ │ ├── index.html │ │ │ ├── package.json │ │ │ └── vite.config.js │ │ └── utils │ │ │ └── stringifyObject.js │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-core │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── modules │ │ │ ├── assets.ts │ │ │ ├── events.ts │ │ │ ├── locale.ts │ │ │ ├── plugins.ts │ │ │ └── schema.ts │ │ └── shared.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-data-source-panel │ ├── package.json │ ├── src │ │ ├── DataSourceModal.vue │ │ ├── DataSourcePanel.vue │ │ └── index.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-designer │ ├── package.json │ ├── src │ │ ├── Designer.vue │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-dnd │ ├── package.json │ ├── src │ │ ├── Drag.ts │ │ ├── DragOver.ts │ │ ├── Drop.ts │ │ ├── index.ts │ │ └── shared.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-exec │ ├── index.d.ts │ ├── index.js │ └── package.json ├── varlet-lowcode-locale-switcher │ ├── package.json │ ├── src │ │ ├── LocaleSwitcher.vue │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-materials-panel │ ├── package.json │ ├── src │ │ ├── MaterialsPanel.vue │ │ └── index.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-monaco │ ├── package.json │ ├── src │ │ ├── Monaco.vue │ │ ├── index.ts │ │ └── worker.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-parser │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── module.d.ts │ │ └── shim │ │ │ ├── buffer.ts │ │ │ └── process.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-profile │ ├── package.json │ ├── src │ │ ├── button.ts │ │ ├── card.ts │ │ ├── countdown.ts │ │ ├── dialog.ts │ │ ├── index.ts │ │ ├── input.ts │ │ └── space.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-renderer │ ├── package.json │ ├── src │ │ ├── Renderer.ts │ │ ├── exec.ts │ │ ├── index.ts │ │ └── renderer.less │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-resizer │ ├── package.json │ ├── src │ │ ├── Resizer.vue │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-schema-editor │ ├── package.json │ ├── src │ │ ├── SchemaEditor.vue │ │ └── index.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-schema-jsx-vite-plugin │ ├── package.json │ ├── src │ │ ├── index.ts │ │ └── transform.ts │ └── tsconfig.json ├── varlet-lowcode-schema-tree │ ├── package.json │ ├── src │ │ ├── DraggableTree │ │ │ ├── DraggableTree.vue │ │ │ ├── DraggableTreeNode.vue │ │ │ ├── index.ts │ │ │ └── provider.ts │ │ ├── index.ts │ │ ├── index.vue │ │ └── shared.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-selector │ ├── package.json │ ├── src │ │ ├── PluginRender.tsx │ │ ├── Selector.tsx │ │ ├── index.ts │ │ ├── plugin.less │ │ ├── props.ts │ │ ├── selectorPlugins │ │ │ ├── copy.vue │ │ │ ├── openSlots.vue │ │ │ └── remove.vue │ │ └── shared.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-setters │ ├── assets │ │ ├── accessory.png │ │ ├── edit.png │ │ └── move.png │ ├── package.json │ ├── src │ │ ├── Setters.tsx │ │ ├── built-in-setters │ │ │ ├── counter-setter │ │ │ │ └── index.tsx │ │ │ ├── draggable-setter │ │ │ │ ├── index.less │ │ │ │ └── index.vue │ │ │ ├── index.ts │ │ │ ├── input-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── margin-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── radio-setter │ │ │ │ └── index.tsx │ │ │ ├── select-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── slider-setter │ │ │ │ └── index.tsx │ │ │ ├── switch-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ └── text-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ ├── component │ │ │ ├── back-gauge │ │ │ │ └── index.tsx │ │ │ ├── bind-type │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── dialog-detail │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── dialog-event │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ ├── dialog-setter │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ │ └── popover │ │ │ │ ├── popover.less │ │ │ │ └── popover.tsx │ │ ├── empty.tsx │ │ ├── images.d.ts │ │ ├── index.less │ │ ├── index.ts │ │ ├── style.ts │ │ └── tabs-content │ │ │ ├── setters-advanced-setting │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── setters-attribute │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ ├── setters-event │ │ │ ├── index.less │ │ │ └── index.tsx │ │ │ └── setters-style │ │ │ ├── index.less │ │ │ └── index.tsx │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── varlet-lowcode-skeleton │ ├── package.json │ ├── playground │ │ ├── App.vue │ │ ├── index.html │ │ ├── main.ts │ │ ├── mock.schema.tsx │ │ ├── plugins │ │ │ ├── index.ts │ │ │ └── preview │ │ │ │ ├── Preview.vue │ │ │ │ └── index.ts │ │ └── preview │ │ │ ├── App.vue │ │ │ ├── index.html │ │ │ └── main.ts │ ├── public │ │ ├── naive-lowcode-profile.js │ │ ├── varlet-lowcode-exec.js │ │ └── vue-use-lowcode-profile.js │ ├── src │ │ ├── Skeleton.tsx │ │ ├── global.d.ts │ │ ├── index.ts │ │ ├── shared.ts │ │ ├── skeleton.less │ │ ├── types.ts │ │ └── useLoading.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js └── varlet-lowcode-undo-redo │ ├── package.json │ ├── src │ ├── UndoRedo.vue │ └── index.ts │ ├── tsconfig.json │ └── varlet.lowcode.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── scripts ├── bootstrap.mjs └── build.mjs /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | insert_final_newline = false 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-vendored 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | .idea 4 | .vscode 5 | .history 6 | *.log 7 | .DS_Store 8 | *.vsix 9 | package-lock.json 10 | 11 | .varlet-lowcode 12 | dist 13 | es 14 | 15 | packages/varlet-lowcode-cli/lib/commands 16 | packages/varlet-lowcode-cli/lib/compiler 17 | packages/varlet-lowcode-cli/lib/config 18 | packages/varlet-lowcode-cli/lib/shared 19 | packages/varlet-lowcode-cli/lib/index.d.ts 20 | 21 | packages/varlet-lowcode-schema-jsx-vite-plugin/lib 22 | 23 | packages/varlet-lowcode-schema-tree/lib 24 | packages/varlet-lowcode-schema-tree/types 25 | 26 | packages/varlet-lowcode-core/lib 27 | packages/varlet-lowcode-core/types 28 | 29 | packages/varlet-lowcode-renderer/lib 30 | packages/varlet-lowcode-renderer/public/varlet-lowcode-core.umd.js 31 | packages/varlet-lowcode-renderer/public/varlet-lowcode-profile.umd.js 32 | packages/varlet-lowcode-renderer/public/varlet-lowcode-dnd.umd.js 33 | packages/varlet-lowcode-renderer/public/varlet-lowcode-selector.umd.js 34 | packages/varlet-lowcode-renderer/types 35 | 36 | packages/varlet-lowcode-dnd/lib 37 | packages/varlet-lowcode-dnd/public/varlet-lowcode-core.umd.js 38 | packages/varlet-lowcode-dnd/types 39 | 40 | packages/varlet-lowcode-designer/lib 41 | packages/varlet-lowcode-designer/public/varlet-lowcode-core.umd.js 42 | packages/varlet-lowcode-designer/public/varlet-lowcode-renderer.umd.js 43 | packages/varlet-lowcode-designer/public/varlet-lowcode-profile.umd.js 44 | packages/varlet-lowcode-designer/types 45 | 46 | 47 | packages/varlet-lowcode-codegen/lib 48 | packages/varlet-lowcode-codegen/public/varlet-lowcode-profile.umd.js 49 | packages/varlet-lowcode-codegen/public/varlet-lowcode-core.umd.js 50 | packages/varlet-lowcode-codegen/types 51 | 52 | packages/varlet-lowcode-skeleton/public/varlet-lowcode-core.umd.js 53 | packages/varlet-lowcode-skeleton/public/varlet-lowcode-profile.umd.js 54 | packages/varlet-lowcode-skeleton/public/varlet-lowcode-renderer.umd.js 55 | packages/varlet-lowcode-skeleton/lib 56 | packages/varlet-lowcode-skeleton/types 57 | 58 | packages/varlet-lowcode-materials-panel/lib 59 | packages/varlet-lowcode-materials-panel/types 60 | 61 | packages/varlet-lowcode-selector/public/varlet-lowcode-core.umd.js 62 | packages/varlet-lowcode-selector/lib/varlet-lowcode-selector.es.js 63 | packages/varlet-lowcode-selector/lib/varlet-lowcode-selector.umd.js 64 | packages/varlet-lowcode-selector/types 65 | 66 | packages/varlet-lowcode-profile/lib 67 | packages/varlet-lowcode-profile/types 68 | 69 | packages/varlet-lowcode-parser/lib 70 | packages/varlet-lowcode-parser/types 71 | 72 | packages/varlet-lowcode-code-editor/lib 73 | packages/varlet-lowcode-code-editor/types 74 | 75 | packages/varlet-lowcode-monaco/lib 76 | packages/varlet-lowcode-monaco/types 77 | 78 | packages/varlet-lowcode-schema-editor/lib 79 | packages/varlet-lowcode-schema-editor/types 80 | 81 | packages/varlet-lowcode-undo-redo/lib 82 | packages/varlet-lowcode-undo-redo/types 83 | 84 | packages/varlet-lowcode-resizer/lib 85 | packages/varlet-lowcode-resizer/types 86 | 87 | packages/varlet-lowcode-setters/lib 88 | packages/varlet-lowcode-setters/types 89 | 90 | packages/varlet-lowcode-data-source-panel/lib 91 | packages/varlet-lowcode-data-source-panel/types 92 | 93 | packages/varlet-lowcode-draggable-tree/lib 94 | packages/varlet-lowcode-draggable-tree/types 95 | 96 | packages/varlet-lowcode-locale-switcher/lib 97 | packages/varlet-lowcode-locale-switcher/types 98 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=false 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | packages/varlet-lowcode-core/lib/** 2 | packages/varlet-lowcode-core/public/** 3 | packages/varlet-lowcode-core/dist/** 4 | packages/varlet-lowcode-core/types/** 5 | 6 | packages/varlet-lowcode-dnd/lib/** 7 | packages/varlet-lowcode-dnd/public/** 8 | packages/varlet-lowcode-dnd/dist/** 9 | packages/varlet-lowcode-dnd/types/** 10 | 11 | packages/varlet-lowcode-designer/lib/** 12 | packages/varlet-lowcode-designer/public/** 13 | packages/varlet-lowcode-designer/dist/** 14 | packages/varlet-lowcode-designer/types/** 15 | 16 | packages/varlet-lowcode-renderer/lib/** 17 | packages/varlet-lowcode-renderer/public/** 18 | packages/varlet-lowcode-renderer/dist/** 19 | packages/varlet-lowcode-renderer/types/** 20 | 21 | packages/varlet-lowcode-profile/lib/** 22 | packages/varlet-lowcode-profile/public/** 23 | packages/varlet-lowcode-profile/types/** 24 | 25 | packages/varlet-lowcode-skeleton/lib/** 26 | packages/varlet-lowcode-skeleton/public/** 27 | packages/varlet-lowcode-skeleton/dist/** 28 | packages/varlet-lowcode-skeleton/types/** 29 | 30 | packages/varlet-lowcode-selector/lib/** 31 | packages/varlet-lowcode-selector/public/** 32 | packages/varlet-lowcode-selector/dist/** 33 | packages/varlet-lowcode-selector/types/** 34 | 35 | packages/varlet-lowcode-codegen/lib/** 36 | packages/varlet-lowcode-codegen/public/** 37 | packages/varlet-lowcode-codegen/dist/** 38 | packages/varlet-lowcode-codegen/types/** 39 | packages/varlet-lowcode-codegen/src/template/** 40 | 41 | packages/varlet-lowcode-setters/lib/** 42 | packages/varlet-lowcode-setters/public/** 43 | packages/varlet-lowcode-setters/dist/** 44 | packages/varlet-lowcode-setters/types/** 45 | 46 | packages/varlet-lowcode-cli/lib/** 47 | packages/varlet-lowcode-schema-jsx-vite-plugin/lib/** 48 | 49 | packages/varlet-lowcode-code-editor/lib/** 50 | packages/varlet-lowcode-code-editor/types/** 51 | 52 | packages/varlet-lowcode-data-source-panel/lib/** 53 | packages/varlet-lowcode-data-source-panel/types/** 54 | 55 | packages/varlet-lowcode-monaco/lib/** 56 | packages/varlet-lowcode-monaco/types/** 57 | 58 | packages/varlet-lowcode-schema-editor/lib/** 59 | packages/varlet-lowcode-schema-editor/types/** 60 | 61 | packages/varlet-lowcode-undo-redo/lib/** 62 | packages/varlet-lowcode-undo-redo/types/** 63 | 64 | packages/varlet-lowcode-resizer/lib/** 65 | packages/varlet-lowcode-resizer/types/** 66 | 67 | packages/varlet-lowcode-materials-panel/lib/** 68 | packages/varlet-lowcode-materials-panel/types/** 69 | 70 | **/package.json 71 | *.md 72 | 73 | pnpm-lock.yaml 74 | pnpm-workspace.yaml 75 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "semi": false 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WIP !!! -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/lib/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | "use strict"; 3 | var __importDefault = (this && this.__importDefault) || function (mod) { 4 | return (mod && mod.__esModule) ? mod : { "default": mod }; 5 | }; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | const logger_1 = __importDefault(require("./shared/logger")); 8 | const commander_1 = require("commander"); 9 | const dev_1 = require("./commands/dev"); 10 | const build_1 = require("./commands/build"); 11 | const compile_1 = require("./commands/compile"); 12 | const preview_1 = require("./commands/preview"); 13 | const program = new commander_1.Command(); 14 | program.version(`varlet-lowcode-cli ${require('../package.json').version}`).usage(' [options]'); 15 | program 16 | .command('dev') 17 | .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed') 18 | .description('Run varlet low-code development environment') 19 | .action(dev_1.dev); 20 | program.command('build').description('Build varlet low-code playground for production').action(build_1.build); 21 | program 22 | .command('compile') 23 | .option('-w --watch', 'Compile varlet low-code plugin to library code in watch mode') 24 | .description('Compile varlet low-code plugin to library code') 25 | .action(compile_1.compile); 26 | program.command('preview').description('Preview varlet low-code playground for production').action(preview_1.preview); 27 | program.on('command:*', ([cmd]) => { 28 | program.outputHelp(); 29 | logger_1.default.error(`\nUnknown command ${cmd}.\n`); 30 | process.exitCode = 1; 31 | }); 32 | program.parse(); 33 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-cli", 3 | "version": "0.0.0", 4 | "description": "cli of varlet low-code", 5 | "bin": { 6 | "varlet-lowcode-cli": "./lib/index.js" 7 | }, 8 | "keywords": [ 9 | "cli", 10 | "varlet", 11 | "lowcode", 12 | "plugin", 13 | "library" 14 | ], 15 | "author": "haoziqaq <357229046@qq.com>", 16 | "license": "MIT", 17 | "files": [ 18 | "lib", 19 | "tsconfig.json" 20 | ], 21 | "scripts": { 22 | "dev": "tsc --watch", 23 | "build": "tsc" 24 | }, 25 | "dependencies": { 26 | "@vitejs/plugin-vue": "2.2.0", 27 | "@vitejs/plugin-vue-jsx": "1.3.5", 28 | "@varlet/lowcode-schema-jsx-vite-plugin": "workspace:*", 29 | "vite-plugin-externals": "0.5.1", 30 | "typescript": "^4.4.4", 31 | "vite": "2.9.5", 32 | "vue": "3.2.25", 33 | "execa": "^5.0.0", 34 | "fs-extra": "^9.0.1", 35 | "commander": "^8.3.0", 36 | "chalk": "^4.1.0", 37 | "vite-plugin-html": "^2.1.0", 38 | "lodash": "^4.17.21", 39 | "chokidar": "^3.5.2" 40 | }, 41 | "devDependencies": { 42 | "@types/fs-extra": "^9.0.2", 43 | "@types/lodash": "^4.14.174", 44 | "vue-tsc": "^0.37.3" 45 | }, 46 | "peerDependencies": { 47 | "vue": "3.2.25", 48 | "live-server": "^1.2.1", 49 | "vue-tsc": "^0.37.3" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/commands/build.ts: -------------------------------------------------------------------------------- 1 | import logger from '../shared/logger' 2 | import { build as buildVite } from 'vite' 3 | import { getBuildConfig, getEntry } from '../config/vite.config' 4 | import { getVarletLowCodeConfig } from '../config/varletLowcode.config' 5 | 6 | export async function build() { 7 | process.env.NODE_ENV = 'production' 8 | process.env.COMMAND = 'build' 9 | 10 | if (!getEntry()) { 11 | logger.warning('Plugin entry not found') 12 | return 13 | } 14 | 15 | const varletLowCodeConfig = getVarletLowCodeConfig() 16 | const buildConfig = getBuildConfig(varletLowCodeConfig) 17 | 18 | await buildVite(buildConfig) 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/commands/compile.ts: -------------------------------------------------------------------------------- 1 | import logger from '../shared/logger' 2 | import chokidar from 'chokidar' 3 | import execa from 'execa' 4 | import { build as buildVite } from 'vite' 5 | import { getLibConfig, getEntry } from '../config/vite.config' 6 | import { getVarletLowCodeConfig } from '../config/varletLowcode.config' 7 | import { VARLET_LOW_CODE_CONFIG, PLUGIN_WORKSPACE } from '../shared/constant' 8 | 9 | async function runTask() { 10 | if (!getEntry()) { 11 | logger.warning('Plugin entry not found') 12 | return 13 | } 14 | 15 | const varletLowCodeConfig = getVarletLowCodeConfig() 16 | const buildConfig = getLibConfig(varletLowCodeConfig) 17 | 18 | try { 19 | await execa('vue-tsc', ['--declaration', '--emitDeclarationOnly']) 20 | await buildVite(buildConfig) 21 | } catch (e: any) { 22 | logger.error(e.toString()) 23 | } 24 | } 25 | 26 | export async function compile({ watch = false }: { watch: boolean }) { 27 | process.env.NODE_ENV = 'production' 28 | process.env.COMMAND = 'compile' 29 | 30 | await runTask() 31 | 32 | if (watch) { 33 | const watcher = chokidar.watch([VARLET_LOW_CODE_CONFIG, PLUGIN_WORKSPACE], { ignoreInitial: true }) 34 | watcher.on('all', runTask) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/commands/dev.ts: -------------------------------------------------------------------------------- 1 | import logger from '../shared/logger' 2 | import chokidar, { FSWatcher } from 'chokidar' 3 | import { createServer, ViteDevServer } from 'vite' 4 | import { pathExistsSync } from 'fs-extra' 5 | import { getVarletLowCodeConfig } from '../config/varletLowcode.config' 6 | import { getDevConfig, getEntry } from '../config/vite.config' 7 | import { merge } from 'lodash' 8 | import { VARLET_LOW_CODE_CONFIG } from '../shared/constant' 9 | 10 | let server: ViteDevServer 11 | let watcher: FSWatcher 12 | 13 | async function startServer(force: boolean | undefined) { 14 | const isRestart = Boolean(server) 15 | logger.info(`${isRestart ? 'Res' : 'S'}tarting server...`) 16 | 17 | // close all instance 18 | server && (await server.close()) 19 | watcher && (await watcher.close()) 20 | 21 | // build all config 22 | const varletLowCodeConfig = getVarletLowCodeConfig() 23 | const devConfig = getDevConfig(varletLowCodeConfig) 24 | const inlineConfig = merge(devConfig, force ? { server: { force: true } } : {}) 25 | 26 | server = await createServer(inlineConfig) 27 | await server.listen() 28 | server.printUrls() 29 | 30 | if (pathExistsSync(VARLET_LOW_CODE_CONFIG)) { 31 | watcher = chokidar.watch(VARLET_LOW_CODE_CONFIG) 32 | watcher.on('change', () => startServer(force)) 33 | } 34 | 35 | logger.success(`\n${isRestart ? 'Res' : 'S'}tart successfully!!!`) 36 | } 37 | 38 | export async function dev(cmd: { force?: boolean }) { 39 | process.env.NODE_ENV = 'development' 40 | process.env.COMMAND = 'dev' 41 | 42 | if (!getEntry()) { 43 | logger.warning('Plugin entry not found') 44 | return 45 | } 46 | 47 | await startServer(cmd.force) 48 | } 49 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/commands/preview.ts: -------------------------------------------------------------------------------- 1 | import logger from '../shared/logger' 2 | import execa from 'execa' 3 | import { PLAYGROUND_OUTPUT_PATH } from '../shared/constant' 4 | import { pathExistsSync } from 'fs-extra' 5 | 6 | export async function preview() { 7 | if (!pathExistsSync(PLAYGROUND_OUTPUT_PATH)) { 8 | logger.warning('Cannot find the playground folder, you must first run the build command to build the playground') 9 | return 10 | } 11 | 12 | try { 13 | await execa.command('live-server --port=5500', { cwd: PLAYGROUND_OUTPUT_PATH }).stdout?.pipe(process.stdout) 14 | } catch (e: any) { 15 | logger.error(e.toString()) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/config/varletLowcode.config.ts: -------------------------------------------------------------------------------- 1 | import { pathExistsSync } from 'fs-extra' 2 | import { merge } from 'lodash' 3 | import { VARLET_LOW_CODE_CONFIG } from '../shared/constant' 4 | 5 | export function getVarletLowCodeConfig(): Record { 6 | let config: any = {} 7 | 8 | if (pathExistsSync(VARLET_LOW_CODE_CONFIG)) { 9 | delete require.cache[require.resolve(VARLET_LOW_CODE_CONFIG)] 10 | config = require(VARLET_LOW_CODE_CONFIG) 11 | } 12 | 13 | delete require.cache[require.resolve('../../varlet.lowcode.default.config.js')] 14 | const defaultConfig = require('../../varlet.lowcode.default.config.js') 15 | 16 | const mergedConfig = merge(defaultConfig, config) 17 | 18 | return mergedConfig 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/index.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import logger from './shared/logger' 3 | import { Command } from 'commander' 4 | import { dev } from './commands/dev' 5 | import { build } from './commands/build' 6 | import { compile } from './commands/compile' 7 | import { preview } from './commands/preview' 8 | 9 | const program = new Command() 10 | 11 | program.version(`varlet-lowcode-cli ${require('../package.json').version}`).usage(' [options]') 12 | 13 | program 14 | .command('dev') 15 | .option('-f --force', 'Force dep pre-optimization regardless of whether deps have changed') 16 | .description('Run varlet low-code development environment') 17 | .action(dev) 18 | 19 | program.command('build').description('Build varlet low-code playground for production').action(build) 20 | 21 | program 22 | .command('compile') 23 | .option('-w --watch', 'Compile varlet low-code plugin to library code in watch mode') 24 | .description('Compile varlet low-code plugin to library code') 25 | .action(compile) 26 | 27 | program.command('preview').description('Preview varlet low-code playground for production').action(preview) 28 | 29 | program.on('command:*', ([cmd]) => { 30 | program.outputHelp() 31 | logger.error(`\nUnknown command ${cmd}.\n`) 32 | process.exitCode = 1 33 | }) 34 | 35 | program.parse() 36 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/shared/constant.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { LibraryFormats } from 'vite' 3 | 4 | export const CWD = process.cwd() 5 | export const VARLET_LOW_CODE_CONFIG = resolve(CWD, 'varlet.lowcode.config.js') 6 | export const PLUGIN_WORKSPACE = resolve(CWD, 'src') 7 | export const PLUGIN_TS_ENTRY = resolve(CWD, 'src/index.ts') 8 | export const PLUGIN_JS_ENTRY = resolve(CWD, 'src/index.js') 9 | export const PLUGIN_OUTPUT_PATH = resolve(CWD, 'lib') 10 | export const PLUGIN_OUTPUT_FORMATS: LibraryFormats[] = ['es', 'umd'] 11 | export const VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.less', '.css'] 12 | export const PLAYGROUND_OUTPUT_PATH = resolve(CWD, 'dist') 13 | export const PLAYGROUND_PUBLIC_PATH = resolve(CWD, 'public') 14 | export const PLAYGROUND_DIR = resolve(CWD, 'playground') 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/shared/logger.ts: -------------------------------------------------------------------------------- 1 | import chalk from 'chalk' 2 | 3 | export default { 4 | info(text: string) { 5 | console.log(text) 6 | }, 7 | success(text: string) { 8 | console.log(chalk.hex('#00c48f')(text)) 9 | }, 10 | warning(text: string) { 11 | console.log(chalk.hex('#ff9800')(text)) 12 | }, 13 | error(text: string) { 14 | console.log(chalk.hex('#f44336')(text)) 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/src/shared/utils.ts: -------------------------------------------------------------------------------- 1 | export const camelize = (s: string): string => s.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase()) 2 | 3 | export function bigCamelize(str: string): string { 4 | return camelize(str).replace(str.charAt(0), str.charAt(0).toUpperCase()) 5 | } 6 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./lib", 4 | "target": "es6", 5 | "module": "CommonJS", 6 | "strict": true, 7 | "downlevelIteration": true, 8 | "declaration": true, 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-cli/varlet.lowcode.default.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-plugin', 3 | host: 'localhost', 4 | port: 9090, 5 | playground: { 6 | title: 'Varlet Low Code Plugin', 7 | logo: 'https://varlet-varletjs.vercel.app/varlet_icon.png', 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-code-editor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-code-editor", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-code-editor.es.js", 5 | "module": "lib/varlet-lowcode-code-editor.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "lib/assets", 10 | "types", 11 | "tsconfig.json" 12 | ], 13 | "scripts": { 14 | "dev": "varlet-lowcode-cli dev", 15 | "build": "varlet-lowcode-cli build", 16 | "compile": "varlet-lowcode-cli compile", 17 | "compile:watch": "varlet-lowcode-cli compile -w", 18 | "preview": "varlet-lowcode-cli preview" 19 | }, 20 | "devDependencies": { 21 | "@varlet/lowcode-core": "workspace: *", 22 | "@varlet/lowcode-cli": "workspace: *", 23 | "@varlet/lowcode-parser": "workspace: *", 24 | "@varlet/lowcode-monaco": "workspace: *", 25 | "@varlet/lowcode-skeleton": "workspace: *", 26 | "@varlet/ui": "1.27.17", 27 | "@types/node": "*", 28 | "monaco-editor": "^0.33.0", 29 | "live-server": "^1.2.1", 30 | "typescript": "^4.4.4", 31 | "vite": "^2.9.12", 32 | "vue": "3.2.25", 33 | "vue-tsc": "^0.37.3" 34 | }, 35 | "peerDependencies": { 36 | "@varlet/lowcode-core": "workspace: *", 37 | "@varlet/lowcode-skeleton": "workspace: *", 38 | "@varlet/lowcode-parser": "workspace: *", 39 | "@varlet/lowcode-monaco": "workspace: *", 40 | "@varlet/ui": "1.27.17" 41 | }, 42 | "browserslist": [ 43 | "Chrome >= 55", 44 | "iOS >= 10.4" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-code-editor/src/index.ts: -------------------------------------------------------------------------------- 1 | import CodeEditor from './CodeEditor.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const plugin: SkeletonPlugin = { 6 | name: 'code-editor', 7 | component: CodeEditor, 8 | layout: SkeletonLayouts.SIDEBAR_TOP, 9 | layoutProps: { 10 | icon: 'xml', 11 | label: '源码面板', 12 | }, 13 | } 14 | 15 | export default plugin 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-code-editor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | "types": ["vite/client"] 15 | }, 16 | "include": ["src/**/*"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-code-editor/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-code-editor', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-codegen", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-codegen.es.js", 5 | "module": "lib/varlet-lowcode-codegen.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "dependencies": { 17 | "@varlet/shared": "latest", 18 | "file-saver": "^2.0.5", 19 | "get-own-enumerable-property-symbols": "^3.0.2", 20 | "is-obj": "^3.0.0", 21 | "is-regexp": "^3.0.0", 22 | "jszip": "^3.6.0", 23 | "lodash-es": "^4.17.21", 24 | "prettier": "^2.7.1", 25 | "stringify-object": "^4.0.1" 26 | }, 27 | "devDependencies": { 28 | "@types/file-saver": "^2.0.5", 29 | "@types/lodash-es": "^4.17.6", 30 | "@types/node": "*", 31 | "@varlet/lowcode-cli": "workspace: *", 32 | "@varlet/lowcode-core": "workspace: *", 33 | "@varlet/lowcode-parser": "workspace: *", 34 | "@varlet/ui": "1.27.17", 35 | "live-server": "^1.2.1", 36 | "typescript": "^4.4.4", 37 | "vite": "^2.9.12", 38 | "vue": "3.2.25", 39 | "vue-tsc": "^0.37.3" 40 | }, 41 | "peerDependencies": { 42 | "@varlet/lowcode-core": "workspace: *", 43 | "@varlet/lowcode-parser": "workspace: *", 44 | "@varlet/ui": "1.27.17" 45 | }, 46 | "browserslist": [ 47 | "Chrome >= 55", 48 | "iOS >= 10.4" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/index.ts: -------------------------------------------------------------------------------- 1 | import Codegen from './Codegen.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const CodegenPlugin: SkeletonPlugin = { 6 | name: 'codegen', 7 | component: Codegen, 8 | layout: SkeletonLayouts.HEADER_RIGHT, 9 | } 10 | 11 | export default CodegenPlugin 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/module.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'prettier/*' 2 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/template/README.md: -------------------------------------------------------------------------------- 1 | # Vite Varlet Low Code Starter 2 | 3 | This is a project template using [Vite](https://vitejs.dev/). It requires [Node.js](https://nodejs.org) v12+. 4 | 5 | To start: 6 | 7 | ```sh 8 | npm install 9 | npm run dev 10 | 11 | # if using yarn: 12 | yarn 13 | yarn dev 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite Varlet Low Code Starter 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-varlet-low-code-starter", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@varlet/axle": "latest", 11 | "vue": "latest" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-vue": "latest", 15 | "vite-plugin-externals": "latest", 16 | "@vue/compiler-sfc": "latest", 17 | "vite": "latest" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/src/template/vite.config.js: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { viteExternalsPlugin } from 'vite-plugin-externals' 3 | import { defineConfig } from 'vite' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [ 8 | vue(), 9 | viteExternalsPlugin() 10 | ], 11 | }) 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowJs": true, 13 | "jsx": "preserve", 14 | "lib": ["esnext", "dom"], 15 | "types": ["vite/client"] 16 | }, 17 | "include": ["src/**/*"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-codegen/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-codegen', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-core", 3 | "version": "0.0.0", 4 | "description": "core of varlet low-code", 5 | "main": "lib/varlet-lowcode-core.umd.js", 6 | "module": "lib/varlet-lowcode-core.umd.js", 7 | "types": "./types/index.d.ts", 8 | "keywords": [ 9 | "core", 10 | "varlet", 11 | "lowcode" 12 | ], 13 | "author": "haoziqaq <357229046@qq.com>", 14 | "license": "MIT", 15 | "files": [ 16 | "lib", 17 | "types", 18 | "tsconfig.json" 19 | ], 20 | "scripts": { 21 | "compile": "varlet-lowcode-cli compile", 22 | "compile:watch": "varlet-lowcode-cli compile -w" 23 | }, 24 | "dependencies": { 25 | "@varlet/shared": "latest", 26 | "lodash-es": "^4.17.21", 27 | "uuid": "^8.3.2" 28 | }, 29 | "devDependencies": { 30 | "@varlet/lowcode-cli": "workspace: *", 31 | "@types/uuid": "^8.3.4", 32 | "@types/lodash-es": "^4.17.6", 33 | "@types/fs-extra": "^9.0.13", 34 | "fs-extra": "^10.1.0", 35 | "typescript": "^4.4.4", 36 | "vue": "^3.2.25", 37 | "vue-tsc": "^0.37.3" 38 | }, 39 | "peerDependencies": { 40 | "vue": "^3.2.25" 41 | }, 42 | "browserslist": [ 43 | "Chrome >= 55", 44 | "iOS >= 10.4" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/src/index.ts: -------------------------------------------------------------------------------- 1 | import schemaManager from './modules/schema' 2 | import assetsManager, { Assets } from './modules/assets' 3 | import eventsManager from './modules/events' 4 | import pluginsManager from './modules/plugins' 5 | import localeManager from './modules/locale' 6 | 7 | export enum BuiltInEvents { 8 | SCHEMA_CHANGE = 'schema-change', 9 | ASSETS_CHANGE = 'assets-change', 10 | } 11 | 12 | const originImportSchema = schemaManager.importSchema 13 | const originImportAssets = assetsManager.importAssets 14 | 15 | schemaManager.importSchema = function (schemaPageNode: any, payload?: any) { 16 | const newSchema = originImportSchema.call(this, schemaPageNode) 17 | 18 | if (newSchema) { 19 | eventsManager.emit(BuiltInEvents.SCHEMA_CHANGE, newSchema, payload) 20 | } 21 | 22 | return newSchema 23 | } 24 | 25 | assetsManager.importAssets = function (assets: Assets, payload?: any) { 26 | const newAssets = originImportAssets.call(this, assets) 27 | 28 | if (newAssets) { 29 | eventsManager.emit(BuiltInEvents.ASSETS_CHANGE, newAssets, payload) 30 | } 31 | 32 | return newAssets 33 | } 34 | 35 | export { schemaManager, assetsManager, eventsManager, pluginsManager, localeManager } 36 | 37 | export * from './modules/schema' 38 | export * from './modules/assets' 39 | export * from './modules/events' 40 | export * from './modules/plugins' 41 | export * from './modules/locale' 42 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/src/modules/events.ts: -------------------------------------------------------------------------------- 1 | export type Listener = (...args: any[]) => void 2 | 3 | export interface ListenerDescriptor { 4 | listener: Listener 5 | event: string 6 | once: boolean 7 | task?(): void 8 | } 9 | 10 | export interface EventsManager { 11 | on(event: string, listener: Listener): void 12 | 13 | once(event: string, listener: Listener): void 14 | 15 | off(event: string, listener: Listener): void 16 | 17 | emit(event: string, ...args: any[]): void 18 | } 19 | 20 | export function createEventsManager(): EventsManager { 21 | const listenerDescriptors: ListenerDescriptor[] = [] 22 | let listenerDescriptorQueue: ListenerDescriptor[] = [] 23 | 24 | function has(event: string, listener: Listener) { 25 | return listenerDescriptors.some((listenerDescriptor) => { 26 | return listenerDescriptor.listener === listener && listenerDescriptor.event === event 27 | }) 28 | } 29 | 30 | function on(event: string, listener: Listener) { 31 | if (has(event, listener)) { 32 | return 33 | } 34 | 35 | listenerDescriptors.push({ 36 | event, 37 | listener, 38 | once: false, 39 | }) 40 | } 41 | 42 | function once(event: string, listener: Listener) { 43 | if (has(event, listener)) { 44 | return 45 | } 46 | 47 | listenerDescriptors.push({ 48 | event, 49 | listener, 50 | once: true, 51 | }) 52 | } 53 | 54 | function off(event: string, listener: Listener) { 55 | const listenerDescriptorIndex = listenerDescriptors.findIndex((listenerDescriptor) => { 56 | return listenerDescriptor.event === event && listenerDescriptor.listener === listener 57 | }) 58 | 59 | if (listenerDescriptorIndex === -1) { 60 | return 61 | } 62 | 63 | listenerDescriptors.splice(listenerDescriptorIndex, 1) 64 | } 65 | 66 | function emit(event: string, ...args: any[]) { 67 | listenerDescriptorQueue = listenerDescriptorQueue.filter((listenerDescriptor) => listenerDescriptor.event !== event) 68 | 69 | listenerDescriptors.forEach((listenerDescriptor) => { 70 | if (listenerDescriptor.event === event) { 71 | listenerDescriptorQueue.push({ 72 | ...listenerDescriptor, 73 | task: () => { 74 | listenerDescriptor.listener(...args) 75 | }, 76 | }) 77 | } 78 | }) 79 | 80 | flushQueue() 81 | } 82 | 83 | function flushQueue() { 84 | while (listenerDescriptorQueue.length > 0) { 85 | const listenerDescriptor = listenerDescriptorQueue.shift()! 86 | 87 | if (listenerDescriptor.once) { 88 | off(listenerDescriptor.event, listenerDescriptor.listener) 89 | } 90 | 91 | listenerDescriptor.task!() 92 | } 93 | } 94 | 95 | return { 96 | on, 97 | 98 | once, 99 | 100 | off, 101 | 102 | emit, 103 | } 104 | } 105 | 106 | export default createEventsManager() 107 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/src/modules/locale.ts: -------------------------------------------------------------------------------- 1 | import { ref, onUnmounted, computed } from 'vue' 2 | import { removeItem } from '@varlet/shared' 3 | import { get } from 'lodash-es' 4 | import type { Ref, ComputedRef } from 'vue' 5 | 6 | export interface Locale { 7 | t(path: string): string 8 | } 9 | 10 | export interface LocaleManager { 11 | use(language: string): void 12 | 13 | useLocale(config: T): Locale 14 | } 15 | 16 | export type LocaleConfig = Record> 17 | 18 | export function createLocaleManager(): LocaleManager { 19 | const configs: Record[] = [] 20 | const currentLanguage: Ref = ref('zh-CN') 21 | 22 | function useLocale(config: T) { 23 | if (!configs.includes(config)) { 24 | configs.push(config) 25 | } 26 | 27 | const pack: ComputedRef> = computed(() => config[currentLanguage.value]) 28 | 29 | function t(path: string): string { 30 | return get(pack.value, path) 31 | } 32 | 33 | onUnmounted(() => { 34 | removeItem(configs, config) 35 | }) 36 | 37 | return { t } 38 | } 39 | 40 | function use(language: string) { 41 | currentLanguage.value = language 42 | } 43 | 44 | return { use, useLocale } 45 | } 46 | 47 | export default createLocaleManager() 48 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/src/modules/plugins.ts: -------------------------------------------------------------------------------- 1 | import type { Component, DefineComponent } from 'vue' 2 | 3 | export enum SkeletonLayouts { 4 | HEADER_LEFT = 'header-left', 5 | HEADER_RIGHT = 'header-right', 6 | HEADER_CENTER = 'header-center', 7 | SIDEBAR_TOP = 'sidebar-top', 8 | SIDEBAR_BOTTOM = 'sidebar-bottom', 9 | DESIGNER = 'designer', 10 | SETTERS = 'setters', 11 | } 12 | 13 | export type SkeletonLayoutProps = Record 14 | 15 | export interface Plugin { 16 | readonly name: string 17 | component: Component | DefineComponent 18 | componentProps?: Record 19 | } 20 | 21 | export interface SkeletonPlugin extends Plugin { 22 | layout: SkeletonLayouts 23 | layoutProps?: SkeletonLayoutProps 24 | } 25 | 26 | export interface SelectorPlugin extends Plugin {} 27 | 28 | export interface PluginsManager { 29 | useSkeletonPlugin(skeletonPlugin: SkeletonPlugin): PluginsManager 30 | useSelectorPlugin(selectorPlugin: SelectorPlugin): PluginsManager 31 | 32 | exportSkeletonPlugins(): SkeletonPlugin[] 33 | exportSelectorPlugins(): SelectorPlugin[] 34 | } 35 | 36 | export function createPluginsManager(): PluginsManager { 37 | const skeletonPlugins: SkeletonPlugin[] = [] 38 | const selectorPlugins: SelectorPlugin[] = [] 39 | 40 | const pluginManager: PluginsManager = { 41 | useSkeletonPlugin, 42 | useSelectorPlugin, 43 | 44 | exportSkeletonPlugins, 45 | exportSelectorPlugins, 46 | } 47 | 48 | function useSkeletonPlugin(skeletonPlugin: SkeletonPlugin): PluginsManager { 49 | if (skeletonPlugins.some((_skeletonPlugin) => _skeletonPlugin.name === skeletonPlugin.name)) { 50 | console.warn('Skeleton plugins registered with the same name will be automatically ignored') 51 | return pluginManager 52 | } 53 | 54 | skeletonPlugins.push(skeletonPlugin) 55 | 56 | return pluginManager 57 | } 58 | 59 | function useSelectorPlugin(selectorPlugin: SelectorPlugin): PluginsManager { 60 | if (selectorPlugins.some((_selectorPlugin) => _selectorPlugin.name === selectorPlugin.name)) { 61 | console.warn('Selector plugins registered with the same name will be automatically ignored') 62 | return pluginManager 63 | } 64 | 65 | selectorPlugins.push(selectorPlugin) 66 | 67 | return pluginManager 68 | } 69 | 70 | function exportSkeletonPlugins() { 71 | return skeletonPlugins 72 | } 73 | 74 | function exportSelectorPlugins() { 75 | return selectorPlugins 76 | } 77 | 78 | return pluginManager 79 | } 80 | 81 | export default createPluginsManager() 82 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/src/shared.ts: -------------------------------------------------------------------------------- 1 | export const removePrivateProperty = (obj: Record) => { 2 | Object.keys(obj).forEach((key) => { 3 | if (key.startsWith('_')) { 4 | Reflect.deleteProperty(obj, key) 5 | } 6 | }) 7 | } 8 | 9 | export const removeHyphen = (str: string) => { 10 | return str.replace(/-/g, '') 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-core/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-core', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['umd'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-data-source-panel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-data-source-panel", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-code-data-source.es.js", 5 | "module": "lib/varlet-lowcode-code-data-source.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "lib/assets", 10 | "types", 11 | "tsconfig.json" 12 | ], 13 | "scripts": { 14 | "dev": "varlet-lowcode-cli dev", 15 | "build": "varlet-lowcode-cli build", 16 | "compile": "varlet-lowcode-cli compile", 17 | "compile:watch": "varlet-lowcode-cli compile -w", 18 | "preview": "varlet-lowcode-cli preview" 19 | }, 20 | "devDependencies": { 21 | "@varlet/lowcode-core": "workspace: *", 22 | "@varlet/lowcode-cli": "workspace: *", 23 | "@varlet/lowcode-parser": "workspace: *", 24 | "@varlet/lowcode-monaco": "workspace: *", 25 | "@varlet/ui": "1.27.16", 26 | "@types/node": "*", 27 | "monaco-editor": "^0.33.0", 28 | "live-server": "^1.2.1", 29 | "typescript": "^4.4.4", 30 | "vite": "^2.9.12", 31 | "vue": "3.2.25", 32 | "vue-tsc": "^0.37.3" 33 | }, 34 | "peerDependencies": { 35 | "@varlet/lowcode-core": "workspace: *", 36 | "@varlet/lowcode-parser": "workspace: *", 37 | "@varlet/lowcode-monaco": "workspace: *", 38 | "@varlet/ui": "1.27.16" 39 | }, 40 | "browserslist": [ 41 | "Chrome >= 51", 42 | "iOS >= 10" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-data-source-panel/src/index.ts: -------------------------------------------------------------------------------- 1 | import DataSourcePanel from './DataSourcePanel.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const DataSourcePanelPlugin: SkeletonPlugin = { 6 | name: 'data-source-panel', 7 | component: DataSourcePanel, 8 | layout: SkeletonLayouts.SIDEBAR_TOP, 9 | layoutProps: { 10 | icon: 'weather-cloudy', 11 | label: '数据源', 12 | }, 13 | } 14 | 15 | export default DataSourcePanelPlugin 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-data-source-panel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"] 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-data-source-panel/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-code-data-source', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-designer", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-designer.es.js", 5 | "module": "lib/varlet-lowcode-designer.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w", 15 | "preview": "varlet-lowcode-cli preview" 16 | }, 17 | "devDependencies": { 18 | "@varlet/lowcode-core": "workspace: *", 19 | "@varlet/lowcode-skeleton": "workspace: *", 20 | "@varlet/lowcode-cli": "workspace: *", 21 | "@varlet/lowcode-codegen": "workspace: *", 22 | "@varlet/lowcode-code-editor": "workspace: *", 23 | "@varlet/lowcode-schema-editor": "workspace: *", 24 | "@varlet/lowcode-monaco": "workspace: *", 25 | "@varlet/lowcode-resizer": "workspace: *", 26 | "@varlet/ui": "latest", 27 | "@varlet/touch-emulator": "latest", 28 | "live-server": "^1.2.1", 29 | "typescript": "^4.4.4", 30 | "vue": "3.2.25", 31 | "vue-tsc": "^0.37.3" 32 | }, 33 | "peerDependencies": { 34 | "@varlet/lowcode-core": "workspace: *", 35 | "@varlet/lowcode-skeleton": "workspace: *" 36 | }, 37 | "browserslist": [ 38 | "Chrome >= 55", 39 | "iOS >= 10.4" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/src/Designer.vue: -------------------------------------------------------------------------------- 1 | 142 | 143 | 146 | 147 | 153 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/src/index.ts: -------------------------------------------------------------------------------- 1 | import Designer from './Designer.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | export * from './types' 6 | 7 | const DesignerPlugin: SkeletonPlugin = { 8 | name: 'designer', 9 | component: Designer, 10 | layout: SkeletonLayouts.DESIGNER, 11 | } 12 | 13 | export default DesignerPlugin 14 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/src/types.ts: -------------------------------------------------------------------------------- 1 | export enum DesignerEvents { 2 | IFRAME_CLICK = 'designer-iframe-click', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-designer/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-designer', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-dnd", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-dnd.es.js", 5 | "module": "lib/varlet-lowcode-dnd.es.js", 6 | "types": "./types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "devDependencies": { 20 | "@varlet/lowcode-cli": "workspace: *", 21 | "@varlet/lowcode-core": "workspace: *", 22 | "@types/uuid": "^8.3.4", 23 | "@types/fs-extra": "^9.0.13", 24 | "uuid": "^8.3.2", 25 | "live-server": "^1.2.1", 26 | "typescript": "^4.4.4", 27 | "fs-extra": "^10.1.0", 28 | "vue": "3.2.25", 29 | "vue-tsc": "^0.37.3" 30 | }, 31 | "peerDependencies": { 32 | "@varlet/lowcode-core": "workspace: *" 33 | }, 34 | "browserslist": [ 35 | "Chrome >= 51", 36 | "iOS >= 10" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/src/Drag.ts: -------------------------------------------------------------------------------- 1 | import { toRaw } from 'vue' 2 | import type { Directive, Plugin, App, DirectiveBinding } from 'vue' 3 | import { mergeStyle } from './shared' 4 | import type { SchemaNode, EventsManager } from '@varlet/lowcode-core' 5 | 6 | export interface DragOptions { 7 | id?: string 8 | dragStyle?: Partial 9 | // TODO: this attributes will like this { schema: SchemaNode; snapshot: SnapShotType } 10 | dragData: SchemaNode 11 | eventsManager: EventsManager 12 | dragImg?: HTMLImageElement | HTMLCanvasElement 13 | type?: DataTransfer['effectAllowed'] 14 | } 15 | 16 | interface DragHTMLElement extends HTMLElement { 17 | _drag?: DragOptions 18 | } 19 | 20 | function dragCanvasImg(name: string): HTMLImageElement { 21 | const oGrayImg = new Image() 22 | const newCanvas = document.createElement('canvas') 23 | newCanvas.setAttribute('width', `500px`) 24 | newCanvas.setAttribute('height', `200px`) 25 | const ctx = newCanvas.getContext('2d') 26 | ctx!.fillStyle = 'red' 27 | ctx!.fillRect(0, 0, 100, 30) 28 | 29 | ctx!.font = '12px Arial' 30 | ctx!.fillStyle = 'green' 31 | ctx!.textAlign = 'center' 32 | ctx!.fillText(name, 50, 20) 33 | 34 | oGrayImg.src = newCanvas.toDataURL('image/png') 35 | 36 | return oGrayImg 37 | } 38 | 39 | function onDragStart(this: DragHTMLElement, e: DragEvent) { 40 | if (e.target !== e.currentTarget) return 41 | 42 | const _drag = this._drag as DragOptions 43 | const { dragStyle, dragData, dragImg, type = 'all', eventsManager } = _drag 44 | 45 | dragStyle && mergeStyle(this, dragStyle) 46 | // TODO: `DragData` not only schema data and also some hook functions and snapshots 47 | // dragData.onDragStart that use on the Material library 48 | dragData && e.dataTransfer!.setData('text/plain', JSON.stringify(dragData)) 49 | e.dataTransfer!.effectAllowed = type 50 | 51 | if (dragImg) { 52 | e.dataTransfer!.setDragImage(dragImg, 0, 0) 53 | } else { 54 | const _dragImg = dragCanvasImg(dragData.name) 55 | e.dataTransfer!.setDragImage(_dragImg, 50, 15) 56 | } 57 | 58 | eventsManager.emit('drag-start', { 59 | dragEvent: e, 60 | dragOptions: JSON.parse(JSON.stringify(_drag)), 61 | id: (e?.target).id, 62 | }) 63 | } 64 | 65 | function onDragEnter(this: DragHTMLElement, e: DragEvent) { 66 | e.stopPropagation() 67 | e.preventDefault() 68 | 69 | const _drag = this._drag as DragOptions 70 | 71 | if (this._drag?.id) { 72 | _drag.eventsManager.emit('drag-enter', { dragEvent: e, dragOptions: JSON.parse(JSON.stringify(_drag)) }) 73 | } 74 | } 75 | 76 | function onDragOver(this: DragHTMLElement, e: DragEvent) { 77 | e.preventDefault() 78 | // 后续计算鼠标用 79 | // eventBroadcast('drag-over', this) 80 | } 81 | 82 | function onDragEnd(this: DragHTMLElement, e: DragEvent) { 83 | e.preventDefault() 84 | 85 | const _drag = this._drag as DragOptions 86 | const { dragStyle, eventsManager } = _drag 87 | 88 | dragStyle && mergeStyle(this, dragStyle, true) 89 | 90 | eventsManager.emit('drag-end', this) 91 | } 92 | 93 | function mounted(el: DragHTMLElement, props: DirectiveBinding) { 94 | const defaultsProps = { 95 | dragStyle: { 96 | opacity: '.5', 97 | }, 98 | type: 'move', 99 | } as DragOptions 100 | el._drag = { ...defaultsProps, ...toRaw(props.value) } 101 | el.draggable = true 102 | 103 | el.addEventListener('dragstart', onDragStart, { passive: false }) 104 | el.addEventListener('dragenter', onDragEnter, { passive: false }) 105 | el.addEventListener('dragover', onDragOver, { passive: false }) 106 | el.addEventListener('dragend', onDragEnd, { passive: false }) 107 | } 108 | 109 | function unmounted(el: DragHTMLElement) { 110 | el._drag = undefined 111 | 112 | el.removeEventListener('dragstart', onDragStart) 113 | el.removeEventListener('dragenter', onDragEnter) 114 | el.removeEventListener('dragover', onDragOver) 115 | el.removeEventListener('dragend', onDragEnd) 116 | } 117 | 118 | export type VarletDragProps = Directive & Plugin 119 | 120 | export default { 121 | mounted, 122 | unmounted, 123 | install(app: App) { 124 | app.directive('drag', this) 125 | }, 126 | } as VarletDragProps 127 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/src/Drop.ts: -------------------------------------------------------------------------------- 1 | import { DirectiveBinding } from 'vue' 2 | import type { Directive, Plugin, App } from 'vue' 3 | import { mergeStyle } from './shared' 4 | import type { EventsManager, SchemaNode } from '@varlet/lowcode-core' 5 | 6 | export interface DropOptions { 7 | dropStyle?: Partial 8 | type?: DataTransfer['dropEffect'] 9 | eventsManager: EventsManager 10 | } 11 | 12 | export interface DropHTMLElement extends HTMLElement { 13 | _drop?: DropOptions 14 | } 15 | 16 | function onDropEnter(this: DropHTMLElement) { 17 | const _drop = this._drop as DropOptions 18 | const { dropStyle, eventsManager } = _drop 19 | 20 | dropStyle && mergeStyle(this, dropStyle) 21 | 22 | eventsManager.emit('drop-enter', this) 23 | } 24 | 25 | function onDropLeave(this: DropHTMLElement, e: DragEvent) { 26 | if (e.target !== e.currentTarget) return 27 | 28 | e.dataTransfer!.dropEffect = 'none' 29 | const _drop = this._drop as DropOptions 30 | const { dropStyle, eventsManager } = _drop 31 | 32 | dropStyle && mergeStyle(this, dropStyle, true) 33 | 34 | eventsManager.emit('drop-leave', this) 35 | } 36 | 37 | function onDragOver(this: DropHTMLElement, e: DragEvent) { 38 | e.preventDefault() 39 | 40 | const _drop = this._drop as DropOptions 41 | const { type = 'none' } = _drop 42 | 43 | e.dataTransfer!.dropEffect = type 44 | } 45 | 46 | function onDropEnd(this: DropHTMLElement, e: DragEvent) { 47 | const _data = e.dataTransfer!.getData('text/plain') 48 | 49 | if (!_data) return 50 | 51 | const _dragData: SchemaNode = JSON.parse(_data) 52 | const _drop = this._drop as DropOptions 53 | const { dropStyle, eventsManager } = _drop 54 | 55 | dropStyle && mergeStyle(this, dropStyle, true) 56 | 57 | eventsManager.emit('drop-end', { el: this, data: _dragData }) 58 | } 59 | 60 | function onDrop(this: DropHTMLElement, e: DragEvent) { 61 | e.stopPropagation() 62 | 63 | const _data = e.dataTransfer!.getData('text/plain') 64 | 65 | if (!_data) return 66 | 67 | const _dragData: SchemaNode = JSON.parse(_data) 68 | const _drop = this._drop as DropOptions 69 | const { dropStyle, eventsManager } = _drop 70 | 71 | dropStyle && mergeStyle(this, dropStyle, true) 72 | 73 | // TODO: this data's type is same as the DragOptions.dragData 74 | eventsManager.emit('drop', { el: this, data: _dragData }) 75 | } 76 | 77 | function mounted(el: DropHTMLElement, props: DirectiveBinding) { 78 | const defaultProps = { 79 | dropStyle: { 80 | background: '#bfcef5', 81 | }, 82 | type: 'move', 83 | } as DropOptions 84 | el._drop = { ...defaultProps, ...props.value } 85 | 86 | el.addEventListener('dragenter', onDropEnter, { passive: false }) 87 | el.addEventListener('dragend', onDropEnd, { passive: false }) 88 | el.addEventListener('dragleave', onDropLeave, { passive: false }) 89 | el.addEventListener('dragover', onDragOver, { passive: false }) 90 | el.addEventListener('drop', onDrop, { passive: false }) 91 | } 92 | 93 | function unmounted(el: HTMLElement) { 94 | el.removeEventListener('dragenter', onDropEnter) 95 | el.removeEventListener('dragleave', onDropLeave) 96 | el.removeEventListener('dragover', onDragOver) 97 | el.removeEventListener('drop', onDrop) 98 | } 99 | 100 | export type VarletDropProps = Directive & Plugin 101 | 102 | export default { 103 | mounted, 104 | unmounted, 105 | install(app: App) { 106 | app.directive('drop', this) 107 | }, 108 | } as VarletDropProps 109 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/src/index.ts: -------------------------------------------------------------------------------- 1 | import Drag from './Drag' 2 | import Drop from './Drop' 3 | import DragOver from './DragOver' 4 | 5 | export { Drag, Drop, DragOver } 6 | 7 | export * from './Drag' 8 | export * from './Drop' 9 | export * from './DragOver' 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/src/shared.ts: -------------------------------------------------------------------------------- 1 | export function mergeStyle(e: HTMLElement, newStyle: Partial, reset = false) { 2 | const _style = e.style 3 | for (const key in newStyle) { 4 | if (Object.prototype.hasOwnProperty.call(newStyle, key)) { 5 | _style[key] = reset ? '' : newStyle[key as keyof CSSStyleDeclaration] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "moduleResolution": "node", 7 | "declarationDir": "./types", 8 | "declaration": true, 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-dnd/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-dnd', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-exec/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: (expression: string, ctx?: any) => any 2 | 3 | export default _default 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-exec/index.js: -------------------------------------------------------------------------------- 1 | ;((window) => { 2 | function exec(expression, ctx = window) { 3 | with (ctx) { 4 | return eval(`(${expression})`) 5 | } 6 | } 7 | 8 | window.VarletLowcodeExec = { 9 | default: exec, 10 | } 11 | })(window) 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-exec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-exec", 3 | "version": "0.0.0", 4 | "main": "index.js", 5 | "types": "index.d.ts", 6 | "files": [ 7 | "index.js" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-locale-switcher", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-locale-switcher.es.js", 5 | "module": "lib/varlet-lowcode-locale-switcher.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "devDependencies": { 17 | "@varlet/lowcode-core": "workspace: *", 18 | "@varlet/lowcode-cli": "workspace: *", 19 | "@varlet/lowcode-designer": "workspace: *", 20 | "@varlet/ui": "1.27.17", 21 | "live-server": "^1.2.1", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.9.12", 24 | "vue": "3.2.25", 25 | "vue-tsc": "^0.37.3" 26 | }, 27 | "peerDependencies": { 28 | "@varlet/lowcode-core": "workspace: *", 29 | "@varlet/lowcode-designer": "workspace: *", 30 | "@varlet/ui": "1.27.17" 31 | }, 32 | "browserslist": [ 33 | "Chrome >= 55", 34 | "iOS >= 10.4" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/src/LocaleSwitcher.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 101 | 102 | 127 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/src/index.ts: -------------------------------------------------------------------------------- 1 | import LocaleSwitcher from './LocaleSwitcher.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const LocaleSwitcherPlugin: SkeletonPlugin = { 6 | name: 'locale-switcher', 7 | component: LocaleSwitcher, 8 | layout: SkeletonLayouts.HEADER_CENTER, 9 | } 10 | 11 | export default LocaleSwitcherPlugin 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface Language { 2 | label: string 3 | value: string 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-locale-switcher/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-locale-switcher', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-materials-panel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-materials-panel", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-materials-panel.es.js", 5 | "module": "lib/varlet-lowcode-materials-panel.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "devDependencies": { 20 | "@varlet/lowcode-core": "workspace: *", 21 | "@varlet/lowcode-cli": "workspace: *", 22 | "@varlet/lowcode-dnd": "workspace: *", 23 | "@varlet/ui": "1.27.17", 24 | "live-server": "^1.2.1", 25 | "typescript": "^4.4.4", 26 | "vue": "3.2.25", 27 | "vue-tsc": "^0.37.3" 28 | }, 29 | "peerDependencies": { 30 | "@varlet/lowcode-core": "workspace: *", 31 | "@varlet/ui": "1.27.17" 32 | }, 33 | "browserslist": [ 34 | "Chrome >= 55", 35 | "iOS >= 10.4" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-materials-panel/src/MaterialsPanel.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 83 | 84 | 120 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-materials-panel/src/index.ts: -------------------------------------------------------------------------------- 1 | import MaterialsPanel from './MaterialsPanel.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const MaterialsPanelPlugin: SkeletonPlugin = { 6 | name: 'materials-panel', 7 | component: MaterialsPanel, 8 | layout: SkeletonLayouts.SIDEBAR_TOP, 9 | layoutProps: { 10 | icon: 'image-outline', 11 | label: '物料面板', 12 | }, 13 | } 14 | 15 | export default MaterialsPanelPlugin 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-materials-panel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-materials-panel/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-materials-panel', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-monaco", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-monaco.es.js", 5 | "module": "lib/varlet-lowcode-monaco.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "dependencies": { 20 | "monaco-editor": "^0.33.0", 21 | "monaco-themes": "^0.4.2" 22 | }, 23 | "devDependencies": { 24 | "@varlet/lowcode-cli": "workspace: *", 25 | "@types/node": "*", 26 | "live-server": "^1.2.1", 27 | "typescript": "^4.4.4", 28 | "vite": "^2.9.12", 29 | "vue": "3.2.25", 30 | "vue-tsc": "^0.37.3" 31 | }, 32 | "peerDependencies": { 33 | "vue": "3.2.25" 34 | }, 35 | "browserslist": [ 36 | "Chrome >= 55", 37 | "iOS >= 10.4" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/src/Monaco.vue: -------------------------------------------------------------------------------- 1 | 111 | 112 | 115 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/src/index.ts: -------------------------------------------------------------------------------- 1 | import Monaco from './Monaco.vue' 2 | import registerWorkers from './worker' 3 | 4 | registerWorkers() 5 | 6 | export default Monaco 7 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/src/worker.ts: -------------------------------------------------------------------------------- 1 | import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' 2 | import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' 3 | import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' 4 | import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' 5 | import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' 6 | 7 | export default function registerWorkers() { 8 | // @ts-ignore 9 | self.MonacoEnvironment = { 10 | getWorker(_: string, label: string) { 11 | if (label === 'json') { 12 | return new JsonWorker() 13 | } 14 | 15 | if (label === 'css' || label === 'scss' || label === 'less') { 16 | return new CssWorker() 17 | } 18 | 19 | if (label === 'html' || label === 'handlebars' || label === 'razor') { 20 | return new HtmlWorker() 21 | } 22 | 23 | if (label === 'typescript' || label === 'javascript') { 24 | return new TsWorker() 25 | } 26 | 27 | return new EditorWorker() 28 | }, 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "resolveJsonModule": true, 13 | "jsx": "preserve", 14 | "lib": ["esnext", "dom"], 15 | "types": ["vite/client"] 16 | }, 17 | "include": ["src/**/*"] 18 | } 19 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-monaco/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-monaco', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | config.build.rollupOptions.external.push( 8 | 'monaco-editor/esm/vs/editor/editor.worker?worker', 9 | 'monaco-editor/esm/vs/language/json/json.worker?worker', 10 | 'monaco-editor/esm/vs/language/css/css.worker?worker', 11 | 'monaco-editor/esm/vs/language/html/html.worker?worker', 12 | 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' 13 | ) 14 | } 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-parser", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-parser.es.js", 5 | "module": "lib/varlet-lowcode-parser.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "dependencies": { 17 | "@varlet/shared": "latest", 18 | "@babel/standalone": "^7.18.7", 19 | "@babel/generator": "^7.18.7", 20 | "@babel/parser": "^7.18.6", 21 | "@babel/traverse": "^7.18.6", 22 | "@babel/types": "^7.18.7", 23 | "buffer": "^6.0.3" 24 | }, 25 | "devDependencies": { 26 | "@types/babel__generator": "^7.6.4", 27 | "@types/babel__traverse": "^7.18.0", 28 | "@varlet/lowcode-core": "workspace: *", 29 | "@varlet/lowcode-cli": "workspace: *", 30 | "@types/node": "*", 31 | "live-server": "^1.2.1", 32 | "typescript": "^4.4.4", 33 | "vite": "^2.9.12", 34 | "vue": "3.2.25", 35 | "vue-tsc": "^0.37.3" 36 | }, 37 | "browserslist": [ 38 | "Chrome >= 55", 39 | "iOS >= 10.4" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/src/module.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@babel/preset-env' 2 | declare module '@babel/standalone' 3 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/src/shim/buffer.ts: -------------------------------------------------------------------------------- 1 | import { Buffer } from 'buffer' 2 | 3 | window.Buffer = Buffer 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/src/shim/process.ts: -------------------------------------------------------------------------------- 1 | ;(window as any).process = { env: {} } 2 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-parser/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-parser', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-profile", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-profile.es.js", 5 | "module": "lib/varlet-lowcode-profile.es.js", 6 | "types": "./types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "devDependencies": { 17 | "@varlet/lowcode-core": "workspace: *", 18 | "@varlet/lowcode-cli": "workspace: *", 19 | "@varlet/ui": "1.27.17", 20 | "live-server": "^1.2.1", 21 | "typescript": "^4.4.4", 22 | "vue": "3.2.25", 23 | "vue-tsc": "^0.37.3" 24 | }, 25 | "browserslist": [ 26 | "Chrome >= 55", 27 | "iOS >= 10.4" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/card.ts: -------------------------------------------------------------------------------- 1 | import type { AssetProfileMaterial } from '@varlet/lowcode-core' 2 | 3 | export default { 4 | name: 'Card', 5 | slots: [ 6 | { 7 | name: 'image', 8 | }, 9 | { 10 | name: 'title', 11 | }, 12 | { 13 | name: 'subtitle', 14 | }, 15 | { 16 | name: 'description', 17 | }, 18 | { 19 | name: 'content', 20 | }, 21 | { 22 | name: 'extra', 23 | }, 24 | { 25 | name: 'close-button', 26 | }, 27 | ], 28 | codegen: { 29 | name: 'var-card', 30 | }, 31 | } as AssetProfileMaterial 32 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/countdown.ts: -------------------------------------------------------------------------------- 1 | import type { AssetProfileMaterial } from '@varlet/lowcode-core' 2 | 3 | export default { 4 | name: 'Countdown', 5 | slots: [ 6 | { 7 | name: 'default', 8 | hasSlotProps: true, 9 | }, 10 | ], 11 | codegen: { 12 | name: 'var-countdown', 13 | }, 14 | } as AssetProfileMaterial 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/dialog.ts: -------------------------------------------------------------------------------- 1 | import type { AssetProfileMaterial } from '@varlet/lowcode-core' 2 | 3 | export default { 4 | name: 'Dialog.Component', 5 | slots: [ 6 | { 7 | name: 'default', 8 | }, 9 | { 10 | name: 'title', 11 | }, 12 | ], 13 | codegen: { 14 | name: 'var-dialog', 15 | }, 16 | } as AssetProfileMaterial 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/index.ts: -------------------------------------------------------------------------------- 1 | import button from './button' 2 | import card from './card' 3 | import countdown from './countdown' 4 | import dialog from './dialog' 5 | import input from './input' 6 | import space from './space' 7 | 8 | export const library = 'Varlet' 9 | 10 | export const packageName = '@varlet/ui' 11 | 12 | export const packageVersion = 'latest' 13 | 14 | export const isVuePlugin = true 15 | 16 | export const materials = [button, card, countdown, dialog, input, space] 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/input.ts: -------------------------------------------------------------------------------- 1 | import { AssetProfileMaterial } from '@varlet/lowcode-core' 2 | 3 | export default { 4 | name: 'Input', 5 | slots: [ 6 | { 7 | name: 'prepend-icon', 8 | }, 9 | { 10 | name: 'append-icon', 11 | }, 12 | ], 13 | codegen: { 14 | name: 'var-input', 15 | }, 16 | } as AssetProfileMaterial 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/src/space.ts: -------------------------------------------------------------------------------- 1 | import { AssetProfileMaterial } from '@varlet/lowcode-core' 2 | 3 | export default { 4 | name: 'Space', 5 | slots: [ 6 | { 7 | name: 'default', 8 | }, 9 | ], 10 | codegen: { 11 | name: 'var-space', 12 | }, 13 | } as AssetProfileMaterial 14 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "declarationDir": "./types", 10 | "jsx": "preserve", 11 | "lib": ["esnext", "dom"] 12 | }, 13 | "include": ["src/**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-profile/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-profile', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-renderer", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-renderer.umd.js", 5 | "module": "lib/varlet-lowcode-renderer.umd.js", 6 | "types": "./types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "dependencies": { 20 | "@varlet/shared": "latest", 21 | "@varlet/axle": "latest", 22 | "@varlet/lowcode-exec": "workspace: *", 23 | "lodash-es": "^4.17.21", 24 | "uuid": "^8.3.2" 25 | }, 26 | "devDependencies": { 27 | "@varlet/lowcode-core": "workspace: *", 28 | "@varlet/lowcode-profile": "workspace: *", 29 | "@varlet/lowcode-dnd": "workspace: *", 30 | "@varlet/lowcode-cli": "workspace: *", 31 | "@varlet/lowcode-selector": "workspace: *", 32 | "@varlet/ui": "^1.27.17", 33 | "@types/lodash-es": "^4.17.6", 34 | "@types/uuid": "^8.3.4", 35 | "live-server": "^1.2.1", 36 | "typescript": "^4.4.4", 37 | "vue": "3.2.25", 38 | "vue-tsc": "^0.37.3" 39 | }, 40 | "peerDependencies": { 41 | "@varlet/lowcode-core": "workspace: *", 42 | "@varlet/lowcode-exec": "workspace: *", 43 | "@varlet/ui": "^1.27.17" 44 | }, 45 | "browserslist": [ 46 | "Chrome >= 55", 47 | "iOS >= 10.4" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/src/exec.ts: -------------------------------------------------------------------------------- 1 | export function exec(code: string) { 2 | return window.eval(`(${code})`) 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/src/index.ts: -------------------------------------------------------------------------------- 1 | import RendererComponent from './Renderer' 2 | import SelectorComponent from '@varlet/lowcode-selector' 3 | import { createApp, h, ShallowRef, shallowRef } from 'vue' 4 | import { BuiltInSchemaNodeNames, schemaManager } from '@varlet/lowcode-core' 5 | import type { App } from 'vue' 6 | import type { Assets, SchemaPageNode, SchemaNode, EventsManager, PluginsManager } from '@varlet/lowcode-core' 7 | import type { DragOverHTMLElement, DropHTMLElement } from '@varlet/lowcode-dnd' 8 | 9 | type InitOptions = { 10 | mountRoot: string 11 | designerEventsManager: EventsManager 12 | pluginsManager: PluginsManager 13 | } 14 | 15 | type Renderer = typeof RendererComponent & { 16 | app?: App 17 | mountRoot?: string 18 | designerEventsManager?: EventsManager 19 | pluginsManager?: PluginsManager 20 | 21 | schema: ShallowRef 22 | assets: ShallowRef 23 | 24 | init(this: Renderer, options: InitOptions): void 25 | mount(this: Renderer): void 26 | unmount(this: Renderer): void 27 | rerender(this: Renderer): void 28 | } 29 | 30 | const schema = shallowRef({ 31 | id: schemaManager.generateId(), 32 | name: BuiltInSchemaNodeNames.PAGE, 33 | }) 34 | 35 | const assets = shallowRef([]) 36 | 37 | function init(this: Renderer, { mountRoot, designerEventsManager, pluginsManager }: InitOptions) { 38 | this.mountRoot = mountRoot 39 | this.designerEventsManager = designerEventsManager 40 | this.pluginsManager = pluginsManager 41 | } 42 | 43 | function mount(this: Renderer) { 44 | this.app = createApp({ 45 | setup: () => { 46 | return () => { 47 | return [ 48 | h(RendererComponent, { 49 | schema: schema.value, 50 | assets: assets.value, 51 | mode: 'designer', 52 | designerEventsManager: this.designerEventsManager, 53 | }), 54 | h(SelectorComponent, { 55 | schema: schema.value, 56 | designerEventsManager: this.designerEventsManager, 57 | assets: assets.value, 58 | pluginsManager: this.pluginsManager, 59 | }), 60 | ] 61 | } 62 | }, 63 | }) 64 | 65 | this.designerEventsManager?.on('drop', onDropSchameChange) 66 | 67 | this.app.mount(this.mountRoot) 68 | } 69 | 70 | function unmount(this: Renderer) { 71 | this.designerEventsManager?.off('drop', onDropSchameChange) 72 | 73 | this.app!.unmount() 74 | } 75 | 76 | function rerender(this: Renderer) { 77 | this.unmount() 78 | this.mount() 79 | } 80 | 81 | function onDropSchameChange(dragData: { el: DropHTMLElement; data: SchemaNode }) { 82 | const rendererDom: DragOverHTMLElement | null = document.querySelector('.varlet-low-code-renderer__designer') 83 | 84 | if (rendererDom) { 85 | const { _dragover } = rendererDom 86 | if (_dragover?.nearestInfo) { 87 | const startSchame = dragData.data 88 | const targetId = _dragover?.nearestInfo.id 89 | 90 | // TODO: if this action is a move, we should remove Schema By id and append Schema thought id and direction 91 | // if (startSchame.id) { 92 | // } 93 | 94 | // TODO: just append Schema thought id and direction 95 | } 96 | } 97 | } 98 | 99 | const Renderer = Object.assign(RendererComponent, { 100 | app: undefined, 101 | mountRoot: undefined, 102 | schema, 103 | assets, 104 | init, 105 | mount, 106 | unmount, 107 | rerender, 108 | }) 109 | 110 | export default Renderer 111 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/src/renderer.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-renderer__designer { 2 | width: 100%; 3 | min-height: 100vh; 4 | } 5 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "declarationDir": "./types", 10 | "jsx": "preserve", 11 | "lib": ["esnext", "dom"] 12 | }, 13 | "include": ["src/**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-renderer/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-renderer', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['umd'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-resizer", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-resizer.es.js", 5 | "module": "lib/varlet-lowcode-resizer.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "devDependencies": { 17 | "@varlet/lowcode-core": "workspace: *", 18 | "@varlet/lowcode-cli": "workspace: *", 19 | "@varlet/ui": "1.27.17", 20 | "live-server": "^1.2.1", 21 | "typescript": "^4.4.4", 22 | "vite": "^2.9.12", 23 | "vue": "3.2.25", 24 | "vue-tsc": "^0.37.3" 25 | }, 26 | "peerDependencies": { 27 | "@varlet/lowcode-core": "workspace: *", 28 | "@varlet/ui": "1.27.17" 29 | }, 30 | "browserslist": [ 31 | "Chrome >= 55", 32 | "iOS >= 10.4" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/src/Resizer.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 61 | 62 | 86 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/src/index.ts: -------------------------------------------------------------------------------- 1 | import Resizer from './Resizer.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | export * from './types' 6 | 7 | const ResizerPlugin: SkeletonPlugin = { 8 | name: 'resizer', 9 | component: Resizer, 10 | layout: SkeletonLayouts.HEADER_CENTER, 11 | } 12 | 13 | export default ResizerPlugin 14 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/src/types.ts: -------------------------------------------------------------------------------- 1 | export enum ResizerEvents { 2 | RESIZER_CHANGE = 'resizer-change', 3 | } 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-resizer/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-resizer', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-editor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-schema-editor", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-schema-editor.es.js", 5 | "module": "lib/varlet-lowcode-schema-editor.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "lib/assets", 10 | "types", 11 | "tsconfig.json" 12 | ], 13 | "scripts": { 14 | "dev": "varlet-lowcode-cli dev", 15 | "build": "varlet-lowcode-cli build", 16 | "compile": "varlet-lowcode-cli compile", 17 | "compile:watch": "varlet-lowcode-cli compile -w", 18 | "preview": "varlet-lowcode-cli preview" 19 | }, 20 | "devDependencies": { 21 | "@varlet/lowcode-core": "workspace: *", 22 | "@varlet/lowcode-cli": "workspace: *", 23 | "@varlet/lowcode-monaco": "workspace: *", 24 | "@varlet/ui": "latest", 25 | "@types/node": "*", 26 | "live-server": "^1.2.1", 27 | "typescript": "^4.4.4", 28 | "vite": "^2.9.12", 29 | "vue": "3.2.25", 30 | "vue-tsc": "^0.37.3" 31 | }, 32 | "peerDependencies": { 33 | "@varlet/lowcode-core": "workspace: *", 34 | "@varlet/lowcode-monaco": "workspace: *", 35 | "@varlet/ui": "latest" 36 | }, 37 | "browserslist": [ 38 | "Chrome >= 55", 39 | "iOS >= 10.4" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-editor/src/SchemaEditor.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 50 | 51 | 56 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-editor/src/index.ts: -------------------------------------------------------------------------------- 1 | import SchemaEditor from './SchemaEditor.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const SchemaEditorPlugin: SkeletonPlugin = { 6 | name: 'schema-editor', 7 | component: SchemaEditor, 8 | layout: SkeletonLayouts.SIDEBAR_BOTTOM, 9 | layoutProps: { 10 | icon: 'code-json', 11 | label: 'SCHEMA 面板', 12 | }, 13 | } 14 | 15 | export default SchemaEditorPlugin 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-editor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | "types": ["vite/client"] 15 | }, 16 | "include": ["src/**/*"] 17 | } 18 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-editor/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-schema-editor', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-jsx-vite-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-schema-jsx-vite-plugin", 3 | "version": "0.0.0", 4 | "main": "lib/index.js", 5 | "module": "lib/index.js", 6 | "files": [ 7 | "lib", 8 | "types", 9 | "tsconfig.json" 10 | ], 11 | "scripts": { 12 | "dev": "tsc --watch", 13 | "build": "tsc" 14 | }, 15 | "dependencies": { 16 | "@babel/generator": "^7.18.7", 17 | "@babel/parser": "^7.18.6", 18 | "@babel/traverse": "^7.18.6", 19 | "@babel/types": "^7.18.7" 20 | }, 21 | "devDependencies": { 22 | "@types/babel__generator": "^7.6.4", 23 | "@types/babel__traverse": "^7.18.0", 24 | "@types/node": "*", 25 | "vite": "^2.9.12" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-jsx-vite-plugin/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from 'vite' 2 | import { transform } from './transform' 3 | 4 | function createVarletLowCodeJsxVitePlugin(): Plugin { 5 | return { 6 | name: 'varlet-lowcode-jsx-vite-plugin', 7 | enforce: 'pre', 8 | transform(source, id) { 9 | if (!/\.schema\.(t|j)sx$/.test(id)) { 10 | return 11 | } 12 | 13 | try { 14 | return transform(source) 15 | } catch (e: any) { 16 | this.error(e) 17 | return '' 18 | } 19 | }, 20 | } 21 | } 22 | 23 | export default createVarletLowCodeJsxVitePlugin 24 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-jsx-vite-plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./lib", 4 | "target": "es6", 5 | "module": "CommonJS", 6 | "strict": true, 7 | "downlevelIteration": true, 8 | "declaration": true, 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-schema-tree", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-schema-tree.es.js", 5 | "module": "lib/varlet-lowcode-schema-tree.es.js", 6 | "types": "./types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "compile": "varlet-lowcode-cli compile", 15 | "compile:watch": "varlet-lowcode-cli compile -w" 16 | }, 17 | "dependencies": { 18 | "@varlet/shared": "latest", 19 | "@varlet/touch-emulator": "^1.27.20", 20 | "@varlet/ui": "^1.27.20" 21 | }, 22 | "devDependencies": { 23 | "@varlet/lowcode-cli": "workspace: *", 24 | "@varlet/lowcode-core": "workspace: *", 25 | "typescript": "^4.4.4", 26 | "vue": "3.2.25", 27 | "vue-tsc": "^0.37.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/DraggableTree/DraggableTree.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 40 | 41 | 52 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/DraggableTree/index.ts: -------------------------------------------------------------------------------- 1 | import DraggableTree from './DraggableTree.vue' 2 | 3 | export default DraggableTree 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/DraggableTree/provider.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | import type { Ref } from 'vue' 3 | import type { Tree } from '../shared' 4 | 5 | export const dndTree: Ref = ref() 6 | export const dragData: Ref = ref() 7 | export const onSubmit = ref() 8 | 9 | export const onChangeNodeTree = ({ start, end }: { start: Tree; end: Tree }, direction: 'up' | 'down') => { 10 | if ((findIndexById(start.children || [], end?.id) ?? -1) !== -1) { 11 | return 12 | } 13 | deleteById(dndTree.value?.children || [], start.id) 14 | 15 | const endIndex = findIndexById(dndTree.value?.children || [], end?.id) ?? -1 16 | 17 | addInId(dndTree.value?.children || [], start, { id: end.id, endIndex }, direction) 18 | } 19 | 20 | export const onEnterNodeTree = ({ start, end }: { start: Tree; end: Tree }) => { 21 | if ((findIndexById(start.children || [], end?.id) ?? -1) !== -1) { 22 | return 23 | } 24 | 25 | deleteById(dndTree.value?.children || [], start.id) 26 | 27 | const endIndex = findIndexById(dndTree.value?.children || [], end?.id) ?? -1 28 | 29 | addInId(dndTree.value?.children || [], start, { id: end.id, endIndex }, 'insert') 30 | } 31 | 32 | const deleteById = (tree: Tree[], id: string) => { 33 | for (const [i, treeNode] of tree.entries()) { 34 | if (treeNode.id === id) { 35 | tree.splice(i, 1) 36 | break 37 | } else if (treeNode.children && treeNode.children.length) { 38 | deleteById(treeNode.children, id) 39 | } 40 | } 41 | } 42 | 43 | const addInId = (tree: Tree[], node: Tree, { id, endIndex }: any, direction: 'up' | 'down' | 'insert' = 'up') => { 44 | for (const [i, treeNode] of tree.entries()) { 45 | if (treeNode.id === id) { 46 | if (direction === 'insert') { 47 | treeNode.children!.push(node) 48 | } 49 | if (direction === 'up') { 50 | tree.splice(i, 0, node) 51 | } 52 | if (direction === 'down') { 53 | tree.splice(i + 1, 0, node) 54 | } 55 | break 56 | } else if (treeNode.children && treeNode.children.length) { 57 | addInId(treeNode.children, node, { id, endIndex }, direction) 58 | } 59 | } 60 | } 61 | 62 | const findIndexById = (tree: Tree[], id: string): number | undefined => { 63 | for (const [i, treeNode] of tree.entries()) { 64 | if (treeNode.id === id) { 65 | return i 66 | } 67 | if (treeNode.children && treeNode.children.length) { 68 | return findIndexById(treeNode.children, id) 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/index.ts: -------------------------------------------------------------------------------- 1 | import { SkeletonLayouts, SkeletonPlugin } from '@varlet/lowcode-core' 2 | 3 | import SchemaTree from './index.vue' 4 | 5 | const SchemaTreePlugin: SkeletonPlugin = { 6 | name: 'schema-tree', 7 | component: SchemaTree, 8 | layout: SkeletonLayouts.SIDEBAR_TOP, 9 | layoutProps: { 10 | icon: 'format-list-checkbox', 11 | label: '大纲树', 12 | }, 13 | } 14 | 15 | export default SchemaTreePlugin 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/src/shared.ts: -------------------------------------------------------------------------------- 1 | import { SchemaNode, SchemaNodeProps, SchemaNodeSlots, SchemaTextNode } from '@varlet/lowcode-core' 2 | import { isArray, isPlainObject } from '@varlet/shared' 3 | 4 | export interface Tree { 5 | renderType: string 6 | type: string 7 | id: string 8 | tag: string 9 | children?: Array 10 | } 11 | 12 | export type Data = (SchemaNode & SchemaNodeProps & SchemaNodeSlots & SchemaTextNode) | SchemaNodeProps | SchemaNodeSlots 13 | 14 | const transformSlots = (slots: SchemaNode['slots']) => { 15 | if (!slots) return [] 16 | 17 | return Object.entries(slots) 18 | .map((slot) => slot[1].children.map((slotChild) => transform(slotChild, `Slot-${slot[0]}`))) 19 | .reduce((pre, cur) => pre.concat(cur), []) 20 | } 21 | 22 | const transformProps = (props: SchemaNode['props'], children: Array = []) => { 23 | if (!isArray(props) && !isPlainObject(props)) return 24 | 25 | if (isArray(props)) { 26 | props.forEach((value) => transformProps(value, children)) 27 | } 28 | 29 | if (isPlainObject(props)) { 30 | if (props.type === 'Render') { 31 | children.push(transform(props, 'Render-props')) 32 | } else { 33 | Object.keys(props).forEach((key) => { 34 | transformProps(props[key], children) 35 | }) 36 | } 37 | } 38 | 39 | return children.reduce((pre, cur) => pre.concat(cur), [] as Array) 40 | } 41 | 42 | export const transform = ( 43 | data: Data, 44 | renderType = 'root', 45 | tree: Tree = { renderType, type: 'Node', id: data.id, tag: data.name } 46 | ): Tree => { 47 | if (!isPlainObject(data)) { 48 | throw Error('[varlet-lowcode-schema-tree]: data is not object') 49 | } 50 | 51 | const isRender = data.type && data.value 52 | const isSlots = !!data.slots 53 | const isProps = !!data.props 54 | const isText = data.name === 'Text' && data.textContent !== undefined && data.textContent !== null 55 | 56 | if (isRender) { 57 | return data.value.map((node: Data) => transform(node, renderType)) 58 | } 59 | 60 | if (isSlots) { 61 | tree.children = transformSlots(data.slots) 62 | } 63 | 64 | if (isProps) { 65 | const renderPropsNodes = transformProps(data.props) 66 | 67 | if (renderPropsNodes?.length) { 68 | tree.children = tree.children ? [...tree.children, ...renderPropsNodes] : renderPropsNodes 69 | } 70 | } 71 | 72 | if (isText) { 73 | tree.type = 'TextNode' 74 | tree.tag = 'Text' 75 | } 76 | 77 | return tree 78 | } 79 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-schema-tree/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-schema-tree', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-selector", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-selector.es.js", 5 | "module": "lib/varlet-lowcode-selector.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "devDependencies": { 20 | "@varlet/lowcode-core": "workspace: *", 21 | "@varlet/lowcode-cli": "workspace: *", 22 | "@varlet/ui": "^1.27.17", 23 | "live-server": "^1.2.1", 24 | "typescript": "^4.4.4", 25 | "vue": "3.2.25", 26 | "vue-tsc": "^0.37.3" 27 | }, 28 | "peerDependencies": { 29 | "@varlet/lowcode-core": "workspace: *", 30 | "@varlet/ui": "^1.27.17" 31 | }, 32 | "browserslist": [ 33 | "Chrome >= 55", 34 | "iOS >= 10.4" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/PluginRender.tsx: -------------------------------------------------------------------------------- 1 | import type { DefineComponent } from 'vue' 2 | import { defineComponent } from 'vue' 3 | import type { SelectorPlugin } from '@varlet/lowcode-core' 4 | import Copy from './selectorPlugins/copy.vue' 5 | import Remove from './selectorPlugins/remove.vue' 6 | import OpenSlots from './selectorPlugins/openSlots.vue' 7 | import props from './props' 8 | import './plugin.less' 9 | 10 | const builtInPlugins: SelectorPlugin[] = [ 11 | { 12 | name: 'copy', 13 | component: Copy, 14 | }, 15 | { 16 | name: 'remove', 17 | component: Remove, 18 | }, 19 | { 20 | name: 'openSlots', 21 | component: OpenSlots, 22 | }, 23 | ] 24 | 25 | export default defineComponent({ 26 | name: 'VarletLowCodeSelectorPluginRender', 27 | props, 28 | setup(props) { 29 | const plugins: SelectorPlugin[] = props.pluginsManager?.exportSelectorPlugins() ?? [] 30 | 31 | plugins.unshift(...builtInPlugins) 32 | 33 | return () => { 34 | return ( 35 |
36 | {plugins.map((plugin: SelectorPlugin) => { 37 | const PluginComponent = plugin.component as DefineComponent 38 | return 39 | })} 40 |
41 | ) 42 | } 43 | }, 44 | }) 45 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/Selector.tsx: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, Ref } from 'vue' 2 | import { onMounted, onUnmounted, defineComponent, ref, watch } from 'vue' 3 | import PluginRender from './PluginRender' 4 | import props from './props' 5 | 6 | export default defineComponent({ 7 | name: 'VarletLowCodeSelector', 8 | props, 9 | setup(props) { 10 | const initStyle: CSSProperties = { 11 | border: '2px solid red', 12 | boxSizing: 'border-box', 13 | position: 'absolute', 14 | zIndex: 1000, 15 | pointerEvents: 'none', 16 | } 17 | const selectorStyles: Ref = ref([]) 18 | const selectorId: Ref = ref() 19 | 20 | function computedSelectorStyles(id: string) { 21 | selectorId.value = id.split('dragItem')[1] 22 | 23 | const nodes = document.querySelectorAll(`#${id}`) 24 | 25 | if (nodes && nodes.length > 0) { 26 | const _nodes = Array.from(nodes) 27 | selectorStyles.value = _nodes.map((node: Element) => { 28 | const { top, left, width, height } = node.getBoundingClientRect() 29 | const _style: CSSProperties = { 30 | top: `${top}px`, 31 | left: `${left}px`, 32 | width: `${width}px`, 33 | height: `${height}px`, 34 | } 35 | return { ..._style, ...initStyle } 36 | }) 37 | } 38 | } 39 | 40 | function clickFn(event: Event) { 41 | const { id } = event.target as HTMLElement 42 | 43 | props.designerEventsManager!.emit('selector', `${id}` || '') 44 | 45 | computedSelectorStyles(id) 46 | } 47 | 48 | function init() { 49 | const list = Array.from(document.querySelectorAll('.varlet-low-code--disable-events')) 50 | 51 | list.forEach((itemDom: Element) => { 52 | itemDom.removeEventListener('click', clickFn) 53 | itemDom.addEventListener('click', clickFn, { passive: false }) 54 | }) 55 | } 56 | 57 | function dispose() { 58 | const list = Array.from(document.querySelectorAll('.varlet-low-code--disable-events')) 59 | 60 | list.forEach((itemDom: Element) => { 61 | itemDom.removeEventListener('click', clickFn) 62 | }) 63 | } 64 | 65 | watch( 66 | () => props.schema, 67 | (newSchemaNode) => { 68 | if (newSchemaNode) { 69 | init() 70 | } 71 | }, 72 | { deep: true } 73 | ) 74 | 75 | onMounted(init) 76 | 77 | onUnmounted(dispose) 78 | 79 | return () => { 80 | return ( 81 | selectorId.value && 82 | selectorStyles.value && 83 | selectorStyles.value.map((style: CSSProperties, i: number) => { 84 | return ( 85 |
86 | {style && i === selectorStyles.value!.length - 1 && ( 87 | 88 | )} 89 |
90 | ) 91 | }) 92 | ) 93 | } 94 | }, 95 | }) 96 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/index.ts: -------------------------------------------------------------------------------- 1 | import VarletLowCodeSelector from './Selector' 2 | 3 | export default VarletLowCodeSelector 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/plugin.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-selector__plugins { 2 | position: absolute; 3 | top: 100%; 4 | width: 100vw; 5 | pointer-events: all; 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/props.ts: -------------------------------------------------------------------------------- 1 | import type { EventsManager, Assets, PluginsManager, SchemaPageNode } from '@varlet/lowcode-core' 2 | import { PropType } from 'vue' 3 | 4 | export default { 5 | schemaId: { 6 | type: String, 7 | }, 8 | designerEventsManager: { 9 | type: Object as PropType, 10 | }, 11 | assets: { 12 | type: Object as PropType, 13 | }, 14 | pluginsManager: { 15 | type: Object as PropType, 16 | }, 17 | schema: { 18 | type: Object as PropType, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/selectorPlugins/copy.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 60 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/selectorPlugins/openSlots.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 69 | 70 | 75 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/selectorPlugins/remove.vue: -------------------------------------------------------------------------------- 1 | 19 | 24 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/src/shared.ts: -------------------------------------------------------------------------------- 1 | export const isPlainObject = (val: unknown): val is Record => 2 | Object.prototype.toString.call(val) === '[object Object]' 3 | 4 | export const isArray = (val: unknown): val is Array => Array.isArray(val) 5 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-selector/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-selector', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/assets/accessory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-lowcode/4454b00e36e532346a83f7af5cfcefef41a202cb/packages/varlet-lowcode-setters/assets/accessory.png -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/assets/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-lowcode/4454b00e36e532346a83f7af5cfcefef41a202cb/packages/varlet-lowcode-setters/assets/edit.png -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/assets/move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/varletjs/varlet-lowcode/4454b00e36e532346a83f7af5cfcefef41a202cb/packages/varlet-lowcode-setters/assets/move.png -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-setters", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-setters.es.js", 5 | "module": "lib/varlet-lowcode-setters.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "devDependencies": { 20 | "@varlet/lowcode-cli": "workspace: *", 21 | "@varlet/lowcode-core": "workspace: *", 22 | "@varlet/lowcode-parser": "workspace: *", 23 | "@varlet/lowcode-monaco": "workspace: *", 24 | "@varlet/ui": "^1.27.17", 25 | "monaco-editor": "^0.33.0", 26 | "vue3-colorpicker": "^2.0.4", 27 | "live-server": "^1.2.1", 28 | "typescript": "^4.4.4", 29 | "vue": "3.2.25", 30 | "vue-tsc": "^0.37.3" 31 | }, 32 | "peerDependencies": { 33 | "@varlet/lowcode-core": "workspace: *", 34 | "@varlet/lowcode-parser": "workspace: *", 35 | "@varlet/lowcode-monaco": "workspace: *", 36 | "@varlet/ui": "^1.27.17" 37 | }, 38 | "browserslist": [ 39 | "Chrome >= 55", 40 | "iOS >= 10.4" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/counter-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { eventsManager } from '@varlet/lowcode-core' 3 | import { Counter as VarCounter } from '@varlet/ui' 4 | 5 | import '@varlet/ui/es/counter/style/index.js' 6 | 7 | export default defineComponent({ 8 | name: 'COUNTERSETTER', 9 | props: { 10 | setter: { 11 | type: Object, 12 | }, 13 | }, 14 | setup(props) { 15 | const setter: Ref = ref() 16 | setter.value = { ...props.setter } 17 | watch( 18 | setter.value, 19 | (newValue) => { 20 | eventsManager.emit('setter-value-change', newValue) 21 | }, 22 | { deep: true } 23 | ) 24 | 25 | return () => { 26 | return 27 | } 28 | }, 29 | }) 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/draggable-setter/index.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-setter { 2 | &__table--row { 3 | display: flex; 4 | align-items: center; 5 | justify-content: space-between; 6 | } 7 | 8 | &__add-button { 9 | color: var(--color-primary); 10 | cursor: pointer; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/draggable-setter/index.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 87 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/index.ts: -------------------------------------------------------------------------------- 1 | import InputSetter from './input-setter/index' 2 | import RadioSetter from './radio-setter/index' 3 | import SwitchSetter from './switch-setter/index' 4 | import SelectSetter from './select-setter/index' 5 | import TextSetter from './text-setter/index' 6 | import SliderSetter from './slider-setter/index' 7 | import CounterSetter from './counter-setter/index' 8 | import MarginSetter from './margin-setter/index' 9 | import DraggableSetter from './draggable-setter/index.vue' 10 | 11 | const Component = [ 12 | { 13 | component: InputSetter, 14 | name: 'InputSetter', 15 | value: '', 16 | }, 17 | { 18 | component: RadioSetter, 19 | name: 'RadioSetter', 20 | value: '', 21 | }, 22 | { 23 | component: SwitchSetter, 24 | name: 'SwitchSetter', 25 | value: '', 26 | }, 27 | { 28 | component: SelectSetter, 29 | name: 'SelectSetter', 30 | value: '', 31 | }, 32 | { 33 | component: CounterSetter, 34 | name: 'CounterSetter', 35 | value: 0, 36 | }, 37 | { 38 | component: DraggableSetter, 39 | name: 'DraggableSetter', 40 | value: 0, 41 | }, 42 | { 43 | component: TextSetter, 44 | name: 'TextSetter', 45 | value: 0, 46 | }, 47 | { 48 | component: MarginSetter, 49 | name: 'MarginSetter', 50 | value: 0, 51 | }, 52 | ] 53 | export default Component 54 | export { 55 | SwitchSetter, 56 | InputSetter, 57 | RadioSetter, 58 | SelectSetter, 59 | SliderSetter, 60 | CounterSetter, 61 | DraggableSetter, 62 | TextSetter, 63 | MarginSetter, 64 | } 65 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/input-setter/index.less: -------------------------------------------------------------------------------- 1 | .var-input__input { 2 | font-size: 12px; 3 | } 4 | 5 | .var-input__wrap { 6 | padding-top: 0; 7 | } 8 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/input-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, watch, Ref, ref } from 'vue' 2 | import { Input } from '@varlet/ui' 3 | import '@varlet/ui/es/input/style/index.js' 4 | import { eventsManager } from '@varlet/lowcode-core' 5 | import './index.less' 6 | 7 | export default defineComponent({ 8 | name: 'INPUTSETTER', 9 | props: { 10 | setter: { 11 | type: Object, 12 | }, 13 | }, 14 | setup(props) { 15 | const setter: Ref = ref() 16 | setter.value = { ...props.setter } 17 | watch( 18 | setter.value, 19 | (newValue) => { 20 | eventsManager.emit('setter-value-change', newValue) 21 | }, 22 | { deep: true } 23 | ) 24 | 25 | return () => { 26 | return 27 | } 28 | }, 29 | }) 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/margin-setter/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --position-theme-right-width: 30px; 3 | --position-theme-left-width: 30px; 4 | } 5 | 6 | .position-value { 7 | &__title { 8 | display: inline-block; 9 | width: 70px; 10 | font-size: 14px; 11 | margin-right: 10px; 12 | margin-bottom: 10px; 13 | } 14 | } 15 | 16 | .position-box { 17 | position: relative; 18 | width: 100%; 19 | height: 150px; 20 | float: left; 21 | 22 | &__next-input { 23 | input { 24 | text-align: center; 25 | line-height: 20px; 26 | height: 20px; 27 | padding: 0; 28 | width: 100%; 29 | border: none; 30 | outline: none; 31 | margin: 0; 32 | vertical-align: middle; 33 | background-color: transparent; 34 | color: #333; 35 | } 36 | } 37 | } 38 | 39 | .position-right-div { 40 | position: absolute; 41 | top: 5px; 42 | bottom: 5px; 43 | right: 0; 44 | width: 0; 45 | border-top: 30px solid transparent; 46 | border-bottom: 30px solid transparent; 47 | border-right: var(--position-theme-right-width) solid #d6e4ff; 48 | 49 | &__next-input { 50 | position: absolute; 51 | top: 0; 52 | bottom: 0; 53 | left: 0; 54 | min-width: var(--position-theme-right-width); 55 | margin: auto; 56 | background: transparent; 57 | 58 | input { 59 | position: absolute; 60 | top: 0; 61 | bottom: 0; 62 | right: 0; 63 | margin: auto; 64 | min-width: var(--position-theme-right-width); 65 | height: 30px; 66 | line-height: 30px; 67 | text-align: center; 68 | } 69 | } 70 | } 71 | 72 | .position-bottom-div { 73 | position: absolute; 74 | left: 0; 75 | right: 0; 76 | bottom: 0; 77 | height: 0; 78 | border-left: var(--position-theme-left-width) solid transparent; 79 | border-right: var(--position-theme-right-width) solid transparent; 80 | border-bottom: 30px solid #d6e4ff; 81 | transition: all 0.3s ease; 82 | 83 | &__next-input { 84 | position: absolute; 85 | left: 0; 86 | right: 0; 87 | bottom: -30px; 88 | height: 30px !important; 89 | background: transparent; 90 | width: 100%; 91 | 92 | input { 93 | height: 30px; 94 | } 95 | } 96 | } 97 | 98 | .position-left-div { 99 | position: absolute; 100 | top: 5px; 101 | bottom: 5px; 102 | left: 0; 103 | width: 0; 104 | border-top: 30px solid transparent; 105 | border-bottom: 30px solid transparent; 106 | border-left: var(--position-theme-left-width) solid #d6e4ff; 107 | 108 | &__next-input { 109 | position: absolute; 110 | top: 0; 111 | bottom: 0; 112 | right: 0; 113 | width: var(--position-theme-left-width); 114 | margin: auto; 115 | background: transparent; 116 | 117 | input { 118 | position: absolute; 119 | top: 0; 120 | bottom: 0; 121 | left: 0; 122 | margin: auto; 123 | width: var(--position-theme-left-width); 124 | height: 30px; 125 | line-height: 30px; 126 | text-align: center; 127 | } 128 | } 129 | } 130 | 131 | .position-top-div { 132 | position: absolute; 133 | top: 0; 134 | left: 0; 135 | right: 0; 136 | height: 0; 137 | border-left: var(--position-theme-left-width) solid transparent; 138 | border-right: var(--position-theme-right-width) solid transparent; 139 | border-top: 30px solid #d6e4ff; 140 | 141 | &__next-input { 142 | position: absolute; 143 | left: 0; 144 | right: 0; 145 | top: -30px; 146 | height: 30px !important; 147 | background: transparent; 148 | width: 100%; 149 | 150 | input { 151 | height: 30px; 152 | } 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/margin-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { eventsManager } from '@varlet/lowcode-core' 3 | import { Input as VarInput } from '@varlet/ui' 4 | import '@varlet/ui/es/input/style/index.js' 5 | 6 | export default defineComponent({ 7 | name: 'COUNTERSETTER', 8 | props: { 9 | setter: { 10 | type: Object, 11 | }, 12 | }, 13 | setup(props) { 14 | const setter: Ref = ref() 15 | setter.value = { ...props.setter } 16 | let marginString: any = ref() 17 | marginString = setter.value.defaultValue.split(' ') 18 | const obj = ref({ 19 | top: '1px', 20 | right: '3px', 21 | bottom: '4px', 22 | left: '2px', 23 | }) 24 | watch( 25 | obj.value, 26 | (newValue) => { 27 | console.log(newValue, 'newValue') 28 | // eventsManager.emit('setter-value-change', newValue) 29 | }, 30 | { deep: true } 31 | ) 32 | 33 | return () => { 34 | return ( 35 |
36 |
37 |
上间距
38 |
39 | 40 |
41 |
42 |
43 |
右间距
44 |
45 | 46 |
47 |
48 |
49 |
下间距
50 |
51 | 52 |
53 |
54 |
55 |
左间距
56 |
57 | 58 |
59 |
60 |
61 | ) 62 | } 63 | }, 64 | }) 65 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/radio-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { Radio as VarRadio, RadioGroup as VarRadioGroup } from '@varlet/ui' 3 | import { eventsManager } from '@varlet/lowcode-core' 4 | import '@varlet/ui/es/radio/style/index.js' 5 | import '@varlet/ui/es/radio-group/style/index.js' 6 | 7 | export default defineComponent({ 8 | name: 'SetterRadio', 9 | props: { 10 | setter: { 11 | type: Object, 12 | }, 13 | options: { 14 | type: Array, 15 | default: () => { 16 | return [] 17 | }, 18 | }, 19 | }, 20 | setup(props) { 21 | const setter: Ref = ref() 22 | setter.value = { ...props.setter } 23 | watch( 24 | setter.value, 25 | (newValue) => { 26 | eventsManager.emit('setter-value-change', newValue) 27 | }, 28 | { deep: true } 29 | ) 30 | return () => { 31 | return ( 32 | 33 | {props.options.length 34 | ? props.options.map((item: any) => { 35 | return {item.value} 36 | }) 37 | : null} 38 | 39 | ) 40 | } 41 | }, 42 | }) 43 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/select-setter/index.less: -------------------------------------------------------------------------------- 1 | .var-option__text { 2 | font-size: 12px; 3 | } 4 | .var-select__wrap { 5 | padding: 0; 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/select-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { Select as VarSelect, Option as VarOption } from '@varlet/ui' 3 | import '@varlet/ui/es/select/style/index.js' 4 | import '@varlet/ui/es/option/style/index.js' 5 | import { eventsManager } from '@varlet/lowcode-core' 6 | import './index.less' 7 | 8 | export default defineComponent({ 9 | name: 'SetterSetter', 10 | props: { 11 | setter: { 12 | type: Object, 13 | }, 14 | options: { 15 | type: Array, 16 | default: () => { 17 | return [] 18 | }, 19 | }, 20 | }, 21 | setup(props) { 22 | const setter: Ref = ref() 23 | setter.value = { ...props.setter } 24 | watch( 25 | setter.value, 26 | (newValue) => { 27 | eventsManager.emit('setter-value-change', newValue) 28 | }, 29 | { deep: true } 30 | ) 31 | 32 | return () => { 33 | return ( 34 | 35 | {props.options.map((item: any) => { 36 | return {item.value} 37 | })} 38 | 39 | ) 40 | } 41 | }, 42 | }) 43 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/slider-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { Slider as VarSlider } from '@varlet/ui' 3 | import { eventsManager } from '@varlet/lowcode-core' 4 | import '@varlet/ui/es/slider/style/index.js' 5 | 6 | export default defineComponent({ 7 | name: 'SLIDERSETTER', 8 | props: { 9 | setter: { 10 | type: Object, 11 | }, 12 | }, 13 | setup(props, { slots }) { 14 | const setter: Ref = ref() 15 | setter.value = { ...props.setter } 16 | watch( 17 | setter.value, 18 | (newValue) => { 19 | eventsManager.emit('setter-value-change', newValue) 20 | }, 21 | { deep: true } 22 | ) 23 | 24 | const childrenSlot = { 25 | button: (props: any) => { 26 | return slots.default ? slots.default(props.currentValue) : null 27 | }, 28 | } 29 | return () => { 30 | return 31 | } 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/switch-setter/index.less: -------------------------------------------------------------------------------- 1 | // .var-switch__ripple { 2 | // height:initial; 3 | // } 4 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/switch-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, Ref, ref, watch } from 'vue' 2 | import { Switch } from '@varlet/ui' 3 | import '@varlet/ui/es/switch/style/index.js' 4 | import { eventsManager } from '@varlet/lowcode-core' 5 | import './index.less' 6 | 7 | export default defineComponent({ 8 | name: 'SWITCHSETTER', 9 | props: { 10 | setter: { 11 | type: Object, 12 | }, 13 | }, 14 | setup(props) { 15 | const setter: Ref = ref() 16 | setter.value = { ...props.setter } 17 | watch( 18 | setter.value, 19 | (newValue) => { 20 | eventsManager.emit('setter-value-change', newValue) 21 | }, 22 | { deep: true } 23 | ) 24 | return () => { 25 | return 26 | } 27 | }, 28 | }) 29 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/text-setter/index.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-setters { 2 | &__text-content { 3 | box-sizing: border-box; 4 | cursor: pointer; 5 | width: 100%; 6 | word-wrap: break-word; 7 | font-size: 12px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/built-in-setters/text-setter/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | import './index.less' 3 | 4 | export default defineComponent({ 5 | name: 'TEXTSETTER', 6 | props: { 7 | modelValue: { 8 | type: Boolean, 9 | default: false, 10 | }, 11 | }, 12 | emits: ['update:modelValue', 'ClickText'], 13 | setup(props, { emit }) { 14 | const openBindDialog = () => { 15 | emit('ClickText') 16 | } 17 | return () => { 18 | return ( 19 |
openBindDialog()} class="varlet-low-code-setters__text-content"> 20 | 已绑定: 21 |
22 | {props.modelValue} 23 |
24 | ) 25 | } 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/back-gauge/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'StyleInput', 5 | props: { 6 | modelValue: { 7 | type: Object, 8 | default: () => { 9 | return { 10 | margin: {}, 11 | padding: {}, 12 | } 13 | }, 14 | }, 15 | positionValue: { 16 | type: String, 17 | default: '', 18 | }, 19 | }, 20 | setup(props, { emit }) { 21 | return () => { 22 | return ( 23 |
24 |
123456
25 |
26 | ) 27 | } 28 | }, 29 | }) 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/bind-type/index.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code { 2 | &__popover--select-bind { 3 | width: 150px; 4 | font-size: 14px; 5 | 6 | i { 7 | margin-right: 10px; 8 | } 9 | } 10 | 11 | &__select--item { 12 | padding: 10px 12px; 13 | font-size: 12px; 14 | box-sizing: border-box; 15 | cursor: pointer; 16 | display: flex; 17 | align-items: center; 18 | color: var(--color-text); 19 | } 20 | 21 | &__opacity { 22 | opacity: 0; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/bind-type/index.tsx: -------------------------------------------------------------------------------- 1 | import Popover from '../popover/popover' 2 | import { Icon } from '@varlet/ui' 3 | import { computed, defineComponent } from 'vue' 4 | import './index.less' 5 | 6 | export default defineComponent({ 7 | name: 'BINDTYPE', 8 | emits: ['update:modelValue', 'SelectVariable'], 9 | props: { 10 | modelValue: { 11 | type: String, 12 | default: 'Setter', 13 | }, 14 | options: { 15 | type: Array as any, 16 | default: () => { 17 | return [ 18 | { 19 | value: 'Setter', 20 | label: 'Setter', 21 | fn: () => {}, 22 | }, 23 | { 24 | value: '变量输入', 25 | label: '变量输入', 26 | fn: () => {}, 27 | }, 28 | ] 29 | }, 30 | }, 31 | }, 32 | setup(props, { emit }) { 33 | const bindType = computed({ 34 | get: () => props.modelValue, 35 | set: (val) => { 36 | emit('update:modelValue', val) 37 | }, 38 | }) 39 | const changeBindType = (val: string, fn: Function) => { 40 | bindType.value = val 41 | if (!fn() && val === '变量输入') { 42 | emit('SelectVariable') 43 | } else { 44 | fn() 45 | } 46 | } 47 | const childrenSlot = { 48 | default: () => { 49 | return ( 50 |
51 | 52 |
53 | ) 54 | }, 55 | content: () => { 56 | return ( 57 |
58 | {props.options.map((item: any) => { 59 | return ( 60 |
changeBindType(item.label, item.fn)}> 61 | 66 | {item.value} 67 |
68 | ) 69 | })} 70 |
71 | ) 72 | }, 73 | } 74 | return () => { 75 | return 76 | } 77 | }, 78 | }) 79 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/dialog-detail/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --dialog-width: 80vw; 3 | } 4 | 5 | .var-dialog { 6 | overflow: hidden; 7 | } 8 | 9 | .min-dialog { 10 | .var-dialog { 11 | width: 300px; 12 | } 13 | } 14 | 15 | .varlet-low-code-field { 16 | &__body { 17 | display: flex; 18 | align-items: center; 19 | margin: 20px 0; 20 | flex-wrap: wrap; 21 | } 22 | 23 | &__body-title { 24 | width: 70px; 25 | font-size: 12px; 26 | } 27 | 28 | &__body-content { 29 | position: relative; 30 | flex: 1; 31 | display: flex; 32 | justify-content: end; 33 | align-items: center; 34 | margin-right: 20px; 35 | width: 100%; 36 | } 37 | 38 | &__body-setter-icon { 39 | cursor: pointer; 40 | position: absolute; 41 | right: -4px; 42 | top: 50%; 43 | transform: translate(100%, -50%); 44 | } 45 | } 46 | 47 | .varlet-low-code-variable-bind { 48 | &__content-props { 49 | min-width: 240px; 50 | margin-right: 10px; 51 | } 52 | 53 | &__content-variable { 54 | display: flex; 55 | flex: 1; 56 | position: relative; 57 | } 58 | 59 | &__show { 60 | position: absolute; 61 | top: 0; 62 | right: 0; 63 | width: 100%; 64 | height: 100%; 65 | background-color: rgba(239, 239, 239, 0.576); 66 | } 67 | 68 | &__right { 69 | flex: 1; 70 | } 71 | 72 | &__left { 73 | width: 40%; 74 | min-width: 320px; 75 | } 76 | 77 | &__title { 78 | font-weight: 700; 79 | margin-bottom: 8px; 80 | color: #000; 81 | } 82 | 83 | &__select { 84 | display: flex; 85 | border: 1px solid rgba(31, 56, 88, 0.3); 86 | height: calc(100% - 32px); 87 | border-radius: 3px; 88 | } 89 | 90 | &__category { 91 | width: 160px; 92 | border-right: 1px solid rgba(31, 56, 88, 0.3); 93 | height: 100%; 94 | overflow: auto; 95 | 96 | .active { 97 | background: rgba(31, 56, 88, 0.06); 98 | } 99 | } 100 | 101 | &__category > div, 102 | &__select-items > div { 103 | height: 28px; 104 | line-height: 28px; 105 | padding: 0 12px; 106 | cursor: pointer; 107 | position: relative; 108 | white-space: nowrap; 109 | } 110 | 111 | &__select-items { 112 | flex: 1; 113 | overflow: auto; 114 | height: 100%; 115 | .disable { 116 | cursor: not-allowed !important; 117 | color: #ccc; 118 | } 119 | .disable:hover { 120 | background: #fff; 121 | } 122 | } 123 | 124 | &__category > div:hover, 125 | &__select-items > div:hover { 126 | background: rgba(31, 56, 88, 0.06); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/dialog-event/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --dialog-width: 80vw; 3 | } 4 | 5 | .varlet-low-code-variable-bind { 6 | &__content { 7 | display: flex; 8 | height: 60vh; 9 | } 10 | 11 | &__right { 12 | flex: 1; 13 | } 14 | 15 | &__left { 16 | width: 40%; 17 | min-width: 320px; 18 | } 19 | 20 | &__title { 21 | font-weight: 700; 22 | margin-bottom: 8px; 23 | color: #000; 24 | } 25 | 26 | &__select { 27 | display: flex; 28 | border: 1px solid rgba(31, 56, 88, 0.3); 29 | height: calc(100% - 24px); 30 | border-radius: 3px; 31 | } 32 | 33 | &__category { 34 | width: 160px; 35 | border-right: 1px solid rgba(31, 56, 88, 0.3); 36 | height: 100%; 37 | overflow: auto; 38 | 39 | .active { 40 | background: rgba(31, 56, 88, 0.06); 41 | } 42 | } 43 | 44 | &__category > div, 45 | &__select-items > div { 46 | height: 28px; 47 | line-height: 28px; 48 | padding: 0 12px; 49 | cursor: pointer; 50 | position: relative; 51 | white-space: nowrap; 52 | } 53 | 54 | &__category > div:hover, 55 | &__select-items > div:hover { 56 | background: rgba(31, 56, 88, 0.06); 57 | } 58 | 59 | &__select-items { 60 | flex: 1; 61 | overflow: auto; 62 | height: 100%; 63 | } 64 | } 65 | 66 | .var-dialog { 67 | overflow: hidden; 68 | } 69 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/dialog-event/index.tsx: -------------------------------------------------------------------------------- 1 | import { Dialog as VarDialog, Snackbar } from '@varlet/ui' 2 | import Monaco from '@varlet/lowcode-monaco' 3 | import { defineComponent, Teleport, computed, ref, Ref, reactive, watchEffect } from 'vue' 4 | // import { schemaManager } from '@varlet/lowcode-core' 5 | // import { createParser } from '@varlet/lowcode-parser' 6 | import '@varlet/ui/es/dialog/style/index.js' 7 | import '@varlet/ui/es/snackbar/style/index.js' 8 | import './index.less' 9 | 10 | const testProps = { 11 | onClick: () => {}, 12 | onChange: () => {}, 13 | onMove: () => {}, 14 | delete: '', 15 | } 16 | 17 | export default defineComponent({ 18 | name: 'DIALOGSETTER', 19 | props: { 20 | modelValue: { 21 | type: Boolean, 22 | default: true, 23 | }, 24 | code: { 25 | type: String, 26 | default: '', 27 | }, 28 | attr: { 29 | type: Object, 30 | default: () => { 31 | return {} 32 | }, 33 | }, 34 | }, 35 | emits: ['update:modelValue', 'update:code', 'Confirm'], 36 | setup(props, { emit }) { 37 | const code: Ref = ref('') 38 | const show = computed({ 39 | get: () => props.modelValue, 40 | set: (val) => { 41 | emit('update:modelValue', val) 42 | }, 43 | }) 44 | watchEffect(() => { 45 | if (show.value) { 46 | code.value = props.code 47 | } 48 | }) 49 | const selectIndex = ref('') 50 | const selectItemData: string[] = reactive([]) 51 | const saveCode = () => { 52 | try { 53 | emit('update:code', code.value) 54 | emit('Confirm', code.value) 55 | } catch (e: any) { 56 | Snackbar.error(e.toString()) 57 | } 58 | } 59 | const saveItems = (val: string) => { 60 | if (selectIndex.value === 'ref' || selectIndex.value === 'computed') { 61 | val += '.value' 62 | } 63 | code.value += val 64 | } 65 | const dialogContent = () => { 66 | return ( 67 |
68 |
69 |
变量列表
70 |
71 |
72 |
组件事件
73 |
74 |
75 | {selectItemData.map((item) => { 76 | return
saveItems(item)}>{item}
77 | })} 78 |
79 |
80 |
81 |
82 |
绑定
83 | 84 |
85 |
86 | ) 87 | } 88 | const childrenSlot = { 89 | default: () => { 90 | return dialogContent() 91 | }, 92 | title: () => { 93 | return
变量绑定
94 | }, 95 | } 96 | return () => { 97 | return ( 98 | 99 | 104 | 105 | ) 106 | } 107 | }, 108 | }) 109 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/dialog-setter/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --dialog-width: 80vw; 3 | } 4 | 5 | .varlet-low-code-variable-bind { 6 | &__content { 7 | display: flex; 8 | height: 60vh; 9 | } 10 | 11 | &__right { 12 | flex: 1; 13 | } 14 | 15 | &__left { 16 | width: 40%; 17 | min-width: 320px; 18 | } 19 | 20 | &__title { 21 | font-weight: 700; 22 | margin-bottom: 8px; 23 | color: #000; 24 | } 25 | 26 | &__select { 27 | display: flex; 28 | border: 1px solid rgba(31, 56, 88, 0.3); 29 | height: calc(100% - 24px); 30 | border-radius: 3px; 31 | } 32 | 33 | &__category { 34 | width: 160px; 35 | border-right: 1px solid rgba(31, 56, 88, 0.3); 36 | height: 100%; 37 | overflow: auto; 38 | 39 | .active { 40 | background: rgba(31, 56, 88, 0.06); 41 | } 42 | } 43 | 44 | &__category > div, 45 | &__select-items > div { 46 | height: 28px; 47 | line-height: 28px; 48 | padding: 0 12px; 49 | cursor: pointer; 50 | position: relative; 51 | white-space: nowrap; 52 | } 53 | 54 | &__category > div:hover, 55 | &__select-items > div:hover { 56 | background: rgba(31, 56, 88, 0.06); 57 | } 58 | 59 | &__select-items { 60 | flex: 1; 61 | overflow: auto; 62 | height: 100%; 63 | } 64 | } 65 | 66 | .var-dialog { 67 | overflow: hidden; 68 | } 69 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/popover/popover.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-popover { 2 | &__content::after { 3 | position: absolute; 4 | width: 12px; 5 | height: 12px; 6 | content: ''; 7 | transform: rotate(45deg); 8 | border: 1px solid #dcdee3; 9 | background-color: #fff; 10 | box-sizing: content-box; 11 | z-index: -1; 12 | } 13 | 14 | &__content { 15 | background-color: #fff; 16 | border: 1px solid #dcdee3; 17 | border-radius: 5px; 18 | transition: opacity 0.7s; 19 | } 20 | } 21 | 22 | .varlet-low-code-popover-bottom-right::after { 23 | position: absolute; 24 | bottom: -7px; 25 | right: 12px; 26 | border-top: none; 27 | border-left: none; 28 | } 29 | 30 | .varlet-low-code-popover-top-right::after { 31 | position: absolute; 32 | top: -7px; 33 | right: 12px; 34 | border-bottom: none; 35 | border-right: none; 36 | } 37 | 38 | .varlet-low-code-popover-top-left::after { 39 | position: absolute; 40 | top: -7px; 41 | left: 12px; 42 | border-bottom: none; 43 | border-right: none; 44 | } 45 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/component/popover/popover.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, reactive, Teleport, ref, nextTick } from 'vue' 2 | import { eventsManager } from '@varlet/lowcode-core' 3 | import './popover.less' 4 | 5 | interface styleType { 6 | position: any 7 | zIndex: any 8 | top: any 9 | left: any 10 | padding: any 11 | maxWidth: any 12 | maxHeight: any 13 | opacity: any 14 | } 15 | export default defineComponent({ 16 | setup(props, { slots }) { 17 | const isShow = ref(false) 18 | const classNameAfter = ref('') 19 | const popoverStyle: styleType = reactive({ 20 | position: 'absolute', 21 | zIndex: '9999', 22 | top: '0', 23 | left: '0', 24 | padding: '0', 25 | maxWidth: '400px', 26 | maxHeight: '400px', 27 | opacity: 0, 28 | }) 29 | 30 | const getDomLocation = async (e: any) => { 31 | e.stopPropagation() 32 | isShow.value = !isShow.value 33 | await nextTick() 34 | if (isShow.value) { 35 | const { x, y, width, height } = e.target.getBoundingClientRect() 36 | const domWidth = document.getElementById('low-code-popover')?.offsetWidth || 0 37 | const domHeight = document.getElementById('low-code-popover')?.offsetHeight || 0 38 | 39 | popoverStyle.left = x - domWidth + width / 2 + 'px' 40 | popoverStyle.top = y + 12 + height + 'px' 41 | classNameAfter.value = 'varlet-low-code-popover-top-right' 42 | 43 | await nextTick() 44 | const { top, bottom, left, right } = document.getElementById('low-code-popover')?.getBoundingClientRect() || { 45 | top: 0, 46 | bottom: 0, 47 | left: 0, 48 | right: 0, 49 | } 50 | const bodyHeight = document.body.clientHeight 51 | const bodyWidth = document.body.clientWidth 52 | if (bottom > bodyHeight) { 53 | popoverStyle.top = y - domHeight - 12 + 'px' 54 | classNameAfter.value = 'varlet-low-code-popover-bottom-right' 55 | } 56 | if (left < 0) { 57 | popoverStyle.left = x + width / 2 + 'px' 58 | classNameAfter.value = 'varlet-low-code-popover-top-left' 59 | } 60 | if (right < bodyWidth) { 61 | // alert() 62 | } 63 | 64 | popoverStyle.opacity = 100 65 | document.body?.addEventListener('click', clickFn) 66 | eventsManager.once('designer-iframe-click', clickFn) 67 | } else { 68 | clickFn() 69 | } 70 | } 71 | 72 | const clickFn = () => { 73 | popoverStyle.opacity = 0 74 | isShow.value = false 75 | document.body?.removeEventListener('click', clickFn) 76 | } 77 | 78 | return () => { 79 | return ( 80 |
81 |
{slots.default ? slots.default() :
点击
}
82 | 83 | {/* 这是具名插槽 */} 84 | 85 |
86 | {isShow.value ? ( 87 |
92 | {slots.content ? slots.content() : null} 93 |
94 | ) : null} 95 |
96 | 97 |
98 | ) 99 | } 100 | }, 101 | }) 102 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/empty.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | export default defineComponent({ 4 | name: 'SettersEmpty', 5 | setup() { 6 | return () => { 7 | return
请在左侧画布选中节点
8 | } 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' 2 | declare module '*.png' 3 | declare module '*.jpg' 4 | declare module '*.jpeg' 5 | declare module '*.gif' 6 | declare module '*.bmp' 7 | declare module '*.tiff' 8 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --right-varlet-width: 300px; 3 | --color-line-normal: rgba(31, 56, 88, 0.1); 4 | --color-text: #333; 5 | --setter-font-size-sm: 12px; 6 | --setter-font-size-md: 14px; 7 | } 8 | 9 | // @media (min-width: 1860px) { 10 | // :root { 11 | // --right-varlet-width: 400px; 12 | // } 13 | // } 14 | 15 | .hover:hover { 16 | cursor: pointer; 17 | } 18 | 19 | .f-a-c { 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .varlet-lowcode-setters { 25 | height: calc(100% - 58px); 26 | background: #fff; 27 | font-size: var(--font-size-md); 28 | 29 | .varlet-lowcode-setters-content { 30 | height: 100%; 31 | width: var(--right-varlet-width); 32 | 33 | .setters-empty { 34 | text-align: center; 35 | font-size: 12px; 36 | color: rgba(0, 0, 0, 0.6); 37 | padding: 50px 15px 0; 38 | } 39 | } 40 | } 41 | 42 | .varlet-low-code-setters { 43 | &__tabs-content { 44 | height: 100%; 45 | } 46 | } 47 | .var-collapse-item::before { 48 | box-shadow: none; 49 | } 50 | .var-collapse-item { 51 | .var-collapse-item__header { 52 | background: rgba(31, 56, 88, 0.06); 53 | } 54 | } 55 | 56 | .var-app-bar { 57 | box-shadow: none; 58 | height: 40px; 59 | } 60 | 61 | .varlet-low-code-field-body { 62 | &__title { 63 | width: 70px; 64 | font-size: 12px; 65 | } 66 | } 67 | 68 | .varlet-low-code-event { 69 | &__content { 70 | width: 100%; 71 | 72 | .var-select__wrap { 73 | padding-top: 0; 74 | } 75 | } 76 | } 77 | 78 | .var-tabs { 79 | box-shadow: none; 80 | } 81 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/index.ts: -------------------------------------------------------------------------------- 1 | import VarletLowCodeSetters from './Setters' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const SettersPlugin: SkeletonPlugin = { 6 | name: 'Setters', 7 | component: VarletLowCodeSetters, 8 | layout: SkeletonLayouts.SETTERS, 9 | } 10 | 11 | export default SettersPlugin 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-advanced-setting/index.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-setters-advanced-settings { 2 | &__content { 3 | padding: 0 12px; 4 | } 5 | 6 | &__attr { 7 | display: flex; 8 | justify-content: end; 9 | align-items: center; 10 | margin: 10px 0; 11 | } 12 | 13 | &__bind-content { 14 | box-sizing: border-box; 15 | cursor: pointer; 16 | width: 100%; 17 | word-wrap: break-word; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-attribute/index.less: -------------------------------------------------------------------------------- 1 | .setters-attribute-field { 2 | font-size: 12px; 3 | box-sizing: border-box; 4 | height: calc(100vh - var(--tabs-item-horizontal-height) - var(--app-bar-height)); 5 | overflow-y: auto; 6 | } 7 | 8 | .varlet-low-code-field-head { 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-between; 12 | cursor: pointer; 13 | height: 32px; 14 | padding: 0 12px; 15 | background: rgba(31, 56, 88, 0.06); 16 | } 17 | 18 | .varlet-low-code-field-body { 19 | display: flex; 20 | align-items: center; 21 | margin: 20px 0; 22 | flex-wrap: wrap; 23 | 24 | &__block { 25 | display: block; 26 | } 27 | 28 | .varlet-low-code-field-body-title { 29 | width: 70px; 30 | font-size: 12px; 31 | } 32 | 33 | .varlet-low-code-field-body-content { 34 | flex: 1; 35 | display: flex; 36 | justify-content: end; 37 | align-items: center; 38 | margin-right: 20px; 39 | position: relative; 40 | width: 100%; 41 | 42 | > i { 43 | cursor: pointer; 44 | position: absolute; 45 | right: -4px; 46 | top: 50%; 47 | transform: translate(100%, -50%); 48 | } 49 | 50 | &__sing-row { 51 | width: 100%; 52 | position: relative; 53 | 54 | > :first-child { 55 | margin-bottom: 10px; 56 | } 57 | } 58 | } 59 | 60 | &__setter-icon { 61 | cursor: pointer; 62 | position: absolute; 63 | right: 20px; 64 | top: 50%; 65 | transform: translate(100%, -50%); 66 | } 67 | 68 | &__content-style { 69 | margin-right: 0 !important; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-attribute/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, ref, Ref } from 'vue' 2 | import { Collapse as VarCollapse, CollapseItem as VarCollapseItem, Icon } from '@varlet/ui' 3 | import { AssetProfileMaterialProp } from '@varlet/lowcode-core' 4 | import Component from '../../built-in-setters/index' 5 | import '@varlet/ui/es/collapse/style/index.js' 6 | import '@varlet/ui/es/collapse-item/style/index.js' 7 | import BindTypePopover from '../../component/bind-type/index' 8 | import BindDialog from '../../component/dialog-setter/index' 9 | import './index.less' 10 | 11 | export default defineComponent({ 12 | name: 'SettersAttribute', 13 | props: { 14 | schemaId: { 15 | type: String, 16 | }, 17 | materialsData: { 18 | type: Object, 19 | }, 20 | }, 21 | setup(props) { 22 | const values = ref(['1']) 23 | const openBindDialog = (val: string) => { 24 | showDialog.value = true 25 | return val 26 | } 27 | const showDialog = ref(false) 28 | const dialogCode: Ref = ref() 29 | const saveCode = () => { 30 | showDialog.value = false 31 | } 32 | const layoutContent = (item: any) => { 33 | let content 34 | if (item.layout === 'singRow') { 35 | content = ( 36 |
37 |
38 |
{item.description}
39 | 40 |
41 |
42 | {item.setters.map((itemSetter: any, index: number) => { 43 | const setterTypeComponents = Component.filter((itemComponent) => itemComponent.name === itemSetter.type) 44 | const SetterComponent = setterTypeComponents[setterTypeComponents.length - 1]!.component 45 | return ( 46 | 0 ? '10px' : 0 }} 50 | /> 51 | ) 52 | })} 53 |
54 |
55 | ) 56 | } else { 57 | content = ( 58 |
59 |
{item.label}
60 |
61 | {item.setters.map((itemSetter: any, index: number) => { 62 | const setterTypeComponents = Component.filter( 63 | (itemComponent) => itemComponent.name === itemSetter.setter 64 | ) 65 | const SetterComponent = setterTypeComponents[setterTypeComponents.length - 1]!.component 66 | return ( 67 | 0 ? '10px' : 0 }} 71 | /> 72 | ) 73 | })} 74 | openBindDialog('showCode')} 79 | /> 80 |
81 |
82 | ) 83 | } 84 | return content 85 | } 86 | 87 | return () => { 88 | return ( 89 |
90 | 91 | 92 | {props.materialsData?.attrs.map((item: AssetProfileMaterialProp) => { 93 | if (item.visible && !item.visible(props.materialsData?.materialsProps)) { 94 | return null 95 | } 96 | return layoutContent(item) 97 | })} 98 | 99 | 100 | 101 |
102 | ) 103 | } 104 | }, 105 | }) 106 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-event/index.less: -------------------------------------------------------------------------------- 1 | .varlet-low-code-event { 2 | &__collapse { 3 | .var-collapse { 4 | .var-collapse-item__content-wrap { 5 | padding: 0; 6 | } 7 | } 8 | } 9 | 10 | &__table { 11 | flex: 1; 12 | border: 1px solid rgba(0, 0, 0, 0.2); 13 | border-radius: 5px; 14 | } 15 | 16 | &__table-header { 17 | font-size: var(--setter-font-size-sm); 18 | } 19 | 20 | &__table-row { 21 | display: flex; 22 | align-items: center; 23 | border-bottom: thin solid rgba(0, 0, 0, 0.12); 24 | 25 | > div { 26 | word-wrap: break-word; 27 | padding: 8px 10px; 28 | box-sizing: border-box; 29 | } 30 | 31 | > :first-child { 32 | flex: 1; 33 | } 34 | 35 | > :last-child { 36 | width: 100px !important; 37 | } 38 | } 39 | 40 | &__empty { 41 | color: #a0a2ad; 42 | height: 80px; 43 | line-height: 80px; 44 | text-align: center; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-style/index.less: -------------------------------------------------------------------------------- 1 | :root { 2 | --collapse-header-font-size: 14px; 3 | --input-placeholder-size: 14px; 4 | --select-placeholder-size: 14px; 5 | --popper-theme-background-color: #fff; 6 | --popper-theme-background-color-hover: #fff; 7 | --popper-theme-text-color: inherit; 8 | --popper-theme-border-width: 1px; 9 | --popper-theme-border-style: solid; 10 | --popper-theme-border-color: #eee; 11 | --popper-theme-border-radius: 6px; 12 | --popper-theme-padding: 16px; 13 | --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25); 14 | } 15 | 16 | .varlet-low-code-field-body { 17 | &__custom { 18 | margin: 20px 0; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/src/tabs-content/setters-style/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, ref } from 'vue' 2 | import { Collapse as VarCollapse, CollapseItem as VarCollapseItem, Icon } from '@varlet/ui' 3 | import Component from '../../built-in-setters/index' 4 | // import Popover from '../../component/popover/popover' 5 | import { AssetProfileMaterialProp } from '@varlet/lowcode-core' 6 | // import { ColorPicker } from 'vue3-colorpicker' 7 | import 'vue3-colorpicker/style.css' 8 | import '@varlet/ui/es/collapse/style/index.js' 9 | import '@varlet/ui/es/collapse-item/style/index.js' 10 | import './index.less' 11 | 12 | export default defineComponent({ 13 | name: 'SettersStyle', 14 | props: { 15 | schemaId: { 16 | type: String, 17 | }, 18 | materialsData: { 19 | type: Object, 20 | }, 21 | }, 22 | setup(props) { 23 | const pureColor = ref('#71afe5') 24 | const values = ref(['1']) 25 | const isReady = ref(false) 26 | // const childrenSlot = reactive({ 27 | // default: () => { 28 | // return ( 29 | //
{ 32 | // isReady.value = !isReady.value 33 | // }} 34 | // /> 35 | // ) 36 | // }, 37 | // content: () => ( 38 | //
e.stopPropagation()}> 39 | // 40 | //
41 | // ), 42 | // }) 43 | 44 | const layoutContent = (item: any) => { 45 | let content 46 | if (item.custom) { 47 | content = ( 48 |
49 | 50 | 51 | {item.setters.map((itemSetter: any, index: number) => { 52 | const setterTypeComponents = Component.filter( 53 | (itemComponent) => itemComponent.name === itemSetter.setter 54 | ) 55 | const SetterComponent = setterTypeComponents[setterTypeComponents.length - 1]!.component 56 | return ( 57 | 0 ? '10px' : 0 }} 61 | /> 62 | ) 63 | })} 64 | 65 | 66 |
67 | ) 68 | return content 69 | } 70 | content = ( 71 |
72 |
{item.label}
73 |
74 | {item.setters.map((itemSetter: any, index: number) => { 75 | const setterTypeComponents = Component.filter((itemComponent) => itemComponent.name === itemSetter.setter) 76 | const SetterComponent = setterTypeComponents[setterTypeComponents.length - 1]!.component 77 | return ( 78 | 0 ? '10px' : 0 }} 82 | /> 83 | ) 84 | })} 85 |
86 |
87 | ) 88 | return content 89 | } 90 | 91 | const RenderContent = () => { 92 | return ( 93 |
94 | 95 | 96 | {props?.materialsData?.style.map((item: AssetProfileMaterialProp) => { 97 | if (item.visible && !item.visible(props.materialsData?.materialsProps.style ?? {})) { 98 | return null 99 | } 100 | return layoutContent(item) 101 | })} 102 | 103 | {/* */} 104 | 105 |
106 | ) 107 | } 108 | return () => { 109 | return RenderContent() 110 | } 111 | }, 112 | }) 113 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-setters/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-setters', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-skeleton", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-skeleton.es.js", 5 | "module": "lib/varlet-lowcode-skeleton.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "dev": "varlet-lowcode-cli dev", 14 | "build": "varlet-lowcode-cli build", 15 | "compile": "varlet-lowcode-cli compile", 16 | "compile:watch": "varlet-lowcode-cli compile -w", 17 | "preview": "varlet-lowcode-cli preview" 18 | }, 19 | "devDependencies": { 20 | "@varlet/lowcode-cli": "workspace: *", 21 | "@varlet/lowcode-code-editor": "workspace: *", 22 | "@varlet/lowcode-codegen": "workspace: *", 23 | "@varlet/lowcode-core": "workspace: *", 24 | "@varlet/lowcode-data-source-panel": "workspace: *", 25 | "@varlet/lowcode-designer": "workspace: *", 26 | "@varlet/lowcode-locale-switcher": "workspace: *", 27 | "@varlet/lowcode-materials-panel": "workspace: *", 28 | "@varlet/lowcode-monaco": "workspace: *", 29 | "@varlet/lowcode-parser": "workspace: *", 30 | "@varlet/lowcode-resizer": "workspace: *", 31 | "@varlet/lowcode-schema-editor": "workspace: *", 32 | "@varlet/lowcode-schema-tree": "workspace:^0.0.0", 33 | "@varlet/lowcode-setters": "workspace: *", 34 | "@varlet/lowcode-undo-redo": "workspace: *", 35 | "@varlet/lowcode-renderer": "workspace: *", 36 | "@varlet/touch-emulator": "^1.27.19", 37 | "@varlet/ui": "^1.27.19", 38 | "live-server": "^1.2.1", 39 | "typescript": "^4.4.4", 40 | "vue": "3.2.25", 41 | "vue-tsc": "^0.37.3" 42 | }, 43 | "peerDependencies": { 44 | "@varlet/lowcode-core": "workspace: *", 45 | "@varlet/ui": "^1.27.19" 46 | }, 47 | "browserslist": [ 48 | "Chrome >= 55", 49 | "iOS >= 10.4" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= title %> 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/main.ts: -------------------------------------------------------------------------------- 1 | import schema from './mock.schema' 2 | import App from './App.vue' 3 | import { usePlugins } from './plugins' 4 | import { createApp } from 'vue' 5 | import { schemaManager, assetsManager } from '@varlet/lowcode-core' 6 | import '@varlet/touch-emulator' 7 | 8 | usePlugins() 9 | 10 | schemaManager.importSchema(schema) 11 | assetsManager.importAssets([ 12 | { 13 | profileLibrary: 'VarletLowcodeProfile', 14 | profileResource: '/varlet-lowcode-profile.umd.js', 15 | additionResources: [ 16 | 'https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js', 17 | 'https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js', 18 | ], 19 | }, 20 | { 21 | additionResources: ['https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css'], 22 | }, 23 | { 24 | profileLibrary: 'VueUseLowcodeProfile', 25 | profileResource: '/vue-use-lowcode-profile.js', 26 | additionResources: ['https://unpkg.com/@vueuse/shared', 'https://unpkg.com/@vueuse/core'], 27 | }, 28 | { 29 | profileLibrary: 'NaiveLowcodeProfile', 30 | profileResource: '/naive-lowcode-profile.js', 31 | additionResources: ['https://unpkg.com/naive-ui'], 32 | }, 33 | ]) 34 | 35 | const app = createApp(App) 36 | 37 | app.mount('#app') 38 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/mock.schema.tsx: -------------------------------------------------------------------------------- 1 | import { schemaManager } from '@varlet/lowcode-core' 2 | 3 | const { id } = schemaManager 4 | 5 | const code = `\ 6 | function setup() { 7 | const count = ref(1) 8 | const doubleCount = computed(() => count.value * 2) 9 | 10 | const handleClick = () => { 11 | count.value++ 12 | } 13 | 14 | return { 15 | count, 16 | doubleCount, 17 | handleClick, 18 | } 19 | } 20 | ` 21 | const css = 'body {\n padding: 20px\n}' 22 | 23 | const schema = ( 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ) 33 | 34 | export default schema 35 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/plugins/index.ts: -------------------------------------------------------------------------------- 1 | import DesignerPlugin from '@varlet/lowcode-designer' 2 | import CodeEditorPlugin from '@varlet/lowcode-code-editor' 3 | import MaterialsPanelPlugin from '@varlet/lowcode-materials-panel' 4 | import SchemaEditorPlugin from '@varlet/lowcode-schema-editor' 5 | import UndoRedoPlugin from '@varlet/lowcode-undo-redo' 6 | import ResizerPlugin from '@varlet/lowcode-resizer' 7 | import CodegenPlugin from '@varlet/lowcode-codegen' 8 | import LocaleSwitcherPlugin from '@varlet/lowcode-locale-switcher' 9 | import SettersPlugin from '@varlet/lowcode-setters/src' 10 | import DataSourcePlugin from '@varlet/lowcode-data-source-panel/src' 11 | import SchemaTreePlugin from '@varlet/lowcode-schema-tree' 12 | 13 | // custom plugin 14 | import PreviewPlugin from './preview' 15 | 16 | import { pluginsManager } from '@varlet/lowcode-core' 17 | 18 | PreviewPlugin.componentProps = { 19 | style: { marginLeft: '4px' }, 20 | } 21 | 22 | CodegenPlugin.componentProps = { 23 | style: { 24 | marginRight: '30px', 25 | marginLeft: '4px', 26 | }, 27 | } 28 | 29 | export function usePlugins() { 30 | pluginsManager 31 | .useSkeletonPlugin(DesignerPlugin) 32 | .useSkeletonPlugin(SettersPlugin) 33 | .useSkeletonPlugin(ResizerPlugin) 34 | .useSkeletonPlugin(SchemaTreePlugin) 35 | .useSkeletonPlugin(LocaleSwitcherPlugin) 36 | .useSkeletonPlugin(MaterialsPanelPlugin) 37 | .useSkeletonPlugin(CodeEditorPlugin) 38 | .useSkeletonPlugin(SchemaEditorPlugin) 39 | .useSkeletonPlugin(UndoRedoPlugin) 40 | .useSkeletonPlugin(PreviewPlugin) 41 | .useSkeletonPlugin(CodegenPlugin) 42 | .useSkeletonPlugin(DataSourcePlugin) 43 | } 44 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/plugins/preview/Preview.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/plugins/preview/index.ts: -------------------------------------------------------------------------------- 1 | import Preview from './Preview.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const PreviewPlugin: SkeletonPlugin = { 6 | name: 'preview', 7 | component: Preview, 8 | layout: SkeletonLayouts.HEADER_RIGHT, 9 | } 10 | 11 | export default PreviewPlugin 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/preview/App.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/preview/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= title %> 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/playground/preview/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.vue' 2 | import { createApp } from 'vue' 3 | 4 | const app = createApp(App) 5 | 6 | app.mount('#app') 7 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/public/naive-lowcode-profile.js: -------------------------------------------------------------------------------- 1 | window.NaiveLowcodeProfile = { 2 | library: 'naive', 3 | packageName: 'naive-ui', 4 | packageVersion: 'latest', 5 | isVuePlugin: true, 6 | materials: [ 7 | { 8 | name: 'NButton', 9 | codegen: { 10 | name: 'n-button' 11 | } 12 | }, 13 | { 14 | name: 'NDataTable', 15 | codegen: { 16 | name: 'n-data-table' 17 | } 18 | }, 19 | { 20 | name: 'NTabs', 21 | codegen: { 22 | name: 'n-tabs' 23 | } 24 | }, 25 | { 26 | name: 'NTabPane', 27 | codegen: { 28 | name: 'n-tab-pane' 29 | } 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/public/varlet-lowcode-exec.js: -------------------------------------------------------------------------------- 1 | ;((window) => { 2 | function exec(expression, ctx = window) { 3 | with (ctx) { 4 | return eval(`(${expression})`) 5 | } 6 | } 7 | 8 | window.VarletLowcodeExec = { 9 | default: exec, 10 | } 11 | })(window) 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/public/vue-use-lowcode-profile.js: -------------------------------------------------------------------------------- 1 | window.VueUseLowcodeProfile = { 2 | library: 'VueUse', 3 | packageName: '@vueuse/core', 4 | packageVersion: 'latest', 5 | isVuePlugin: false 6 | } 7 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/src/global.d.ts: -------------------------------------------------------------------------------- 1 | import type { SchemaNode, SchemaPageNode, SchemaTextNode } from '@varlet/lowcode-core' 2 | 3 | declare global { 4 | namespace JSX { 5 | interface IntrinsicElements { 6 | page: Exclude 7 | slot: { 8 | name?: string 9 | } 10 | node: Exclude 11 | t: Exclude 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/src/index.ts: -------------------------------------------------------------------------------- 1 | import Skeleton from './Skeleton' 2 | 3 | export * from './types' 4 | 5 | export default Skeleton 6 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/src/shared.ts: -------------------------------------------------------------------------------- 1 | export function getLeft(element: HTMLElement): number { 2 | const { left } = element.getBoundingClientRect() 3 | 4 | return left + (document.body.scrollLeft || document.documentElement.scrollLeft) 5 | } 6 | 7 | export function getTop(element: HTMLElement): number { 8 | const { top } = element.getBoundingClientRect() 9 | 10 | return top + (document.body.scrollTop || document.documentElement.scrollTop) 11 | } 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/src/types.ts: -------------------------------------------------------------------------------- 1 | export enum SkeletonLoaders { 2 | HEADER_LEFT = 'header-left', 3 | HEADER_CENTER = 'header-center', 4 | HEADER_RIGHT = 'header-right', 5 | SIDEBAR_TOP = 'sidebar-top', 6 | SIDEBAR_BOTTOM = 'sidebar-bottom', 7 | DESIGNER = 'designer', 8 | SETTERS = 'setters', 9 | FULLSCREEN = 'fullscreen', 10 | } 11 | 12 | export enum SkeletonEvents { 13 | LOADING = 'skeleton-loading', 14 | LOADED = 'skeleton-loaded', 15 | SIDEBAR_TOGGLE = 'skeleton-sidebar-toggle', 16 | SIDEBAR_OPEN = 'skeleton-sidebar-open', 17 | SIDEBAR_CLOSE = 'skeleton-sidebar-close', 18 | } 19 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/src/useLoading.ts: -------------------------------------------------------------------------------- 1 | import { computed, onUnmounted, reactive } from 'vue' 2 | import { eventsManager } from '@varlet/lowcode-core' 3 | import { SkeletonEvents, SkeletonLoaders } from './types' 4 | 5 | const LOADING_DELAY = 300 6 | const LOADED_DELAY = 600 7 | 8 | export function useLoading() { 9 | const layoutLoadings: Record = reactive({ 10 | 'header-left': 0, 11 | 'header-center': 0, 12 | 'header-right': 0, 13 | 'sidebar-top': 0, 14 | 'sidebar-bottom': 0, 15 | designer: 0, 16 | setters: 0, 17 | fullscreen: 0, 18 | }) 19 | 20 | const layoutPendingLoadings: Record = reactive({ 21 | 'header-left': 0, 22 | 'header-center': 0, 23 | 'header-right': 0, 24 | 'sidebar-top': 0, 25 | 'sidebar-bottom': 0, 26 | designer: 0, 27 | setters: 0, 28 | fullscreen: 0, 29 | }) 30 | 31 | const handleLoading = (loader: SkeletonLoaders, delay?: number) => { 32 | layoutPendingLoadings[loader]++ 33 | 34 | setTimeout(() => { 35 | if (layoutPendingLoadings[loader] > 0) { 36 | layoutLoadings[loader]++ 37 | layoutPendingLoadings[loader]-- 38 | } 39 | }, delay ?? LOADING_DELAY) 40 | } 41 | 42 | const handleLoaded = (layout: SkeletonLoaders) => { 43 | if (layoutPendingLoadings[layout] > 0) { 44 | layoutPendingLoadings[layout]-- 45 | return 46 | } 47 | 48 | setTimeout(() => { 49 | layoutLoadings[layout]-- 50 | }, LOADED_DELAY) 51 | } 52 | 53 | eventsManager.on(SkeletonEvents.LOADING, handleLoading) 54 | eventsManager.on(SkeletonEvents.LOADED, handleLoaded) 55 | 56 | onUnmounted(() => { 57 | eventsManager.off(SkeletonEvents.LOADING, handleLoading) 58 | eventsManager.off(SkeletonEvents.LOADED, handleLoaded) 59 | }) 60 | 61 | const layoutLoadingsComputed = computed(() => { 62 | return { 63 | enableHeaderLeftLayout: layoutLoadings['header-left'] > 0 || layoutLoadings.fullscreen > 0, 64 | enableHeaderCenterLayout: layoutLoadings['header-center'] > 0 || layoutLoadings.fullscreen > 0, 65 | enableHeaderRightLayout: layoutLoadings['header-right'] > 0 || layoutLoadings.fullscreen > 0, 66 | enableSidebarTopLayout: layoutLoadings['sidebar-top'] > 0 || layoutLoadings.fullscreen > 0, 67 | enableSidebarPluginLayout: 68 | layoutLoadings['sidebar-top'] > 0 || layoutLoadings['sidebar-bottom'] > 0 || layoutLoadings.fullscreen > 0, 69 | enableSidebarBottomLayout: layoutLoadings['sidebar-bottom'] > 0 || layoutLoadings.fullscreen > 0, 70 | enableDesignerLayout: layoutLoadings.designer > 0 || layoutLoadings.fullscreen > 0, 71 | enableSettersLayout: layoutLoadings.setters > 0 || layoutLoadings.fullscreen > 0, 72 | enableFullscreenLayout: layoutLoadings.fullscreen > 0, 73 | } 74 | }) 75 | 76 | return { 77 | layoutLoadings, 78 | layoutLoadingsComputed, 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "strict": true, 5 | "downlevelIteration": true, 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "declarationDir": "./types", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "jsx": "preserve", 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*"] 15 | } 16 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-skeleton/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | module.exports = { 4 | name: 'varlet-lowcode-skeleton', 5 | 6 | configureVite(config, command) { 7 | if (command === 'compile') { 8 | config.build.lib.formats = ['es'] 9 | } 10 | 11 | if (command === 'build') { 12 | config.build.outDir.input = { 13 | ...config.build.outDir.input, 14 | preview: './playground/preview.html', 15 | } 16 | } 17 | 18 | if (['dev', 'build'].includes(command)) { 19 | config.plugins.push({ 20 | name: 'copy-dep-plugin', 21 | buildStart() { 22 | fs.copyFileSync('../varlet-lowcode-exec/index.js', './public/varlet-lowcode-exec.js') 23 | fs.copyFileSync( 24 | '../varlet-lowcode-core/lib/varlet-lowcode-core.umd.js', 25 | './public/varlet-lowcode-core.umd.js' 26 | ) 27 | fs.copyFileSync( 28 | '../varlet-lowcode-renderer/lib/varlet-lowcode-renderer.umd.js', 29 | './public/varlet-lowcode-renderer.umd.js' 30 | ) 31 | fs.copyFileSync( 32 | '../varlet-lowcode-profile/lib/varlet-lowcode-profile.umd.js', 33 | './public/varlet-lowcode-profile.umd.js' 34 | ) 35 | }, 36 | }) 37 | } 38 | }, 39 | } 40 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-undo-redo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@varlet/lowcode-undo-redo", 3 | "version": "0.0.0", 4 | "main": "lib/varlet-lowcode-undo-redo.es.js", 5 | "module": "lib/varlet-lowcode-undo-redo.es.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "lib", 9 | "types", 10 | "tsconfig.json" 11 | ], 12 | "scripts": { 13 | "compile": "varlet-lowcode-cli compile", 14 | "compile:watch": "varlet-lowcode-cli compile -w" 15 | }, 16 | "devDependencies": { 17 | "@varlet/lowcode-core": "workspace: *", 18 | "@varlet/lowcode-cli": "workspace: *", 19 | "@varlet/lowcode-designer": "workspace: *", 20 | "@varlet/ui": "1.27.17", 21 | "live-server": "^1.2.1", 22 | "typescript": "^4.4.4", 23 | "vite": "^2.9.12", 24 | "vue": "3.2.25", 25 | "vue-tsc": "^0.37.3" 26 | }, 27 | "peerDependencies": { 28 | "@varlet/lowcode-core": "workspace: *", 29 | "@varlet/lowcode-designer": "workspace: *", 30 | "@varlet/ui": "1.27.17" 31 | }, 32 | "browserslist": [ 33 | "Chrome >= 55", 34 | "iOS >= 10.4" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-undo-redo/src/UndoRedo.vue: -------------------------------------------------------------------------------- 1 | 96 | 97 | 109 | 110 | 117 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-undo-redo/src/index.ts: -------------------------------------------------------------------------------- 1 | import UndoRedo from './UndoRedo.vue' 2 | import { SkeletonLayouts } from '@varlet/lowcode-core' 3 | import type { SkeletonPlugin } from '@varlet/lowcode-core' 4 | 5 | const UndoRedoPlugin: SkeletonPlugin = { 6 | name: 'undo-repo', 7 | component: UndoRedo, 8 | layout: SkeletonLayouts.HEADER_RIGHT, 9 | } 10 | 11 | export default UndoRedoPlugin 12 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-undo-redo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es6", 5 | "strict": true, 6 | "downlevelIteration": true, 7 | "declaration": true, 8 | "moduleResolution": "node", 9 | "declarationDir": "./types", 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "lib": ["esnext", "dom"], 14 | }, 15 | "include": ["src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/varlet-lowcode-undo-redo/varlet.lowcode.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | name: 'varlet-lowcode-undo-redo', 3 | 4 | configureVite(config, command) { 5 | if (command === 'compile') { 6 | config.build.lib.formats = ['es'] 7 | } 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | -------------------------------------------------------------------------------- /scripts/bootstrap.mjs: -------------------------------------------------------------------------------- 1 | import { 2 | buildCli, 3 | buildCore, 4 | buildDataSourcePanel, 5 | buildDnd, 6 | buildDesigner, 7 | buildProfile, 8 | buildRenderer, 9 | runTask, 10 | buildParser, 11 | buildCodegen, 12 | buildMonaco, 13 | buildCodeEditor, 14 | buildSchemaEditor, 15 | buildSelector, 16 | buildUndoRedo, 17 | buildResizer, 18 | buildMaterialsPanel, 19 | buildSkeleton, buildLocaleSwitcher, 20 | buildSchemaJsxVitePlugin, 21 | buildSchemaTree 22 | } from './build.mjs' 23 | 24 | await runTask('schema jsx vite plugin', buildSchemaJsxVitePlugin) 25 | await runTask('cli', buildCli) 26 | await runTask('core', buildCore) 27 | await runTask('data-source-panel', buildDataSourcePanel) 28 | await runTask('skeleton', buildSkeleton) 29 | await runTask('schema-tree', buildSchemaTree) 30 | await runTask('dnd', buildDnd) 31 | await runTask('selector', buildSelector) 32 | await runTask('renderer', buildRenderer) 33 | await runTask('designer', buildDesigner) 34 | await runTask('parser and monaco', () => Promise.all([buildParser(), buildMonaco()])) 35 | await runTask('plugins and more', () => Promise.all([ 36 | buildCodeEditor(), 37 | buildSchemaEditor(), 38 | buildCodegen(), 39 | buildUndoRedo(), 40 | buildResizer(), 41 | buildMaterialsPanel(), 42 | buildProfile(), 43 | buildLocaleSwitcher() 44 | ])) 45 | 46 | -------------------------------------------------------------------------------- /scripts/build.mjs: -------------------------------------------------------------------------------- 1 | import execa from 'execa' 2 | import ora from 'ora' 3 | import { resolve } from 'path' 4 | 5 | const CWD = process.cwd() 6 | const PKG_CLI = resolve(CWD, './packages/varlet-lowcode-cli') 7 | const PKG_SCHEMA_JSX_VITE_PLUGIN = resolve(CWD, './packages/varlet-lowcode-schema-jsx-vite-plugin') 8 | const PKG_CORE = resolve(CWD, './packages/varlet-lowcode-core') 9 | const PKG_DATA_SOURCE_PANEL = resolve(CWD, './packages/varlet-lowcode-data-source-panel') 10 | const PKG_DESIGNER = resolve(CWD, './packages/varlet-lowcode-designer') 11 | const PKG_DND = resolve(CWD, './packages/varlet-lowcode-dnd') 12 | const PKG_PROFILE = resolve(CWD, './packages/varlet-lowcode-profile') 13 | const PKG_RENDERER = resolve(CWD, './packages/varlet-lowcode-renderer') 14 | const PKG_PARSER = resolve(CWD, './packages/varlet-lowcode-parser') 15 | const PKG_CODEGEN = resolve(CWD, './packages/varlet-lowcode-codegen') 16 | const PKG_MONACO = resolve(CWD, './packages/varlet-lowcode-monaco') 17 | const PKG_CODE_EDITOR = resolve(CWD, './packages/varlet-lowcode-code-editor') 18 | const PKG_SCHEMA_EDITOR = resolve(CWD, './packages/varlet-lowcode-schema-editor') 19 | const PKG_SELECTOR = resolve(CWD, './packages/varlet-lowcode-selector') 20 | const PKG_UNDO_REDO = resolve(CWD, './packages/varlet-lowcode-undo-redo') 21 | const PKG_RESIZER = resolve(CWD, './packages/varlet-lowcode-resizer') 22 | const PKG_MATERIALS_PANEL = resolve(CWD, './packages/varlet-lowcode-materials-panel') 23 | const PKG_SKELETON = resolve(CWD,'./packages/varlet-lowcode-skeleton') 24 | const PKG_LOCALE_SWITCHER = resolve(CWD, './packages/varlet-lowcode-locale-switcher') 25 | const PKG_SCHEMA_TREE = resolve(CWD, './packages/varlet-lowcode-schema-tree') 26 | 27 | export const buildSchemaJsxVitePlugin = () => execa('pnpm', ['build'], { cwd: PKG_SCHEMA_JSX_VITE_PLUGIN }) 28 | 29 | export const buildCli = () => execa('pnpm', ['build'], { cwd: PKG_CLI }) 30 | 31 | export const buildCore = () => execa('pnpm', ['compile'], { cwd: PKG_CORE }) 32 | 33 | export const buildDataSourcePanel = () => execa('pnpm', ['compile'], { cwd: PKG_DATA_SOURCE_PANEL }) 34 | 35 | export const buildDnd = () => execa('pnpm', ['compile'], { cwd: PKG_DND }) 36 | 37 | export const buildDesigner = () => execa('pnpm', ['compile'], { cwd: PKG_DESIGNER }) 38 | 39 | export const buildProfile = () => execa('pnpm', ['compile'], { cwd: PKG_PROFILE }) 40 | 41 | export const buildRenderer = () => execa('pnpm', ['compile'], { cwd: PKG_RENDERER }) 42 | 43 | export const buildParser = () => execa('pnpm', ['compile'], { cwd: PKG_PARSER }) 44 | 45 | export const buildCodegen = () => execa('pnpm', ['compile'], { cwd: PKG_CODEGEN }) 46 | 47 | export const buildMonaco = () => execa('pnpm', ['compile'], { cwd: PKG_MONACO }) 48 | 49 | export const buildCodeEditor = () => execa('pnpm', ['compile'], { cwd: PKG_CODE_EDITOR }) 50 | 51 | export const buildSchemaEditor = () => execa('pnpm', ['compile'], { cwd: PKG_SCHEMA_EDITOR }) 52 | 53 | export const buildSelector = () => execa('pnpm', ['compile'], { cwd: PKG_SELECTOR }) 54 | 55 | export const buildUndoRedo = () => execa('pnpm', ['compile'], {cwd: PKG_UNDO_REDO}) 56 | 57 | export const buildResizer = () => execa('pnpm', ['compile'], {cwd: PKG_RESIZER}) 58 | 59 | export const buildMaterialsPanel = () => execa('pnpm', ['compile'], {cwd: PKG_MATERIALS_PANEL}) 60 | 61 | export const buildSkeleton = () => execa('pnpm', ['compile'], {cwd: PKG_SKELETON}) 62 | 63 | export const buildLocaleSwitcher = () => execa('pnpm', ['compile'], {cwd: PKG_LOCALE_SWITCHER}) 64 | 65 | export const buildSchemaTree = () => execa('pnpm', ['compile'], {cwd: PKG_SCHEMA_TREE}) 66 | 67 | 68 | export async function runTask(taskName, task) { 69 | const s = ora().start(`Building ${taskName}`) 70 | try { 71 | await task() 72 | s.succeed(`Build ${taskName} completed!`) 73 | } catch (e) { 74 | s.fail(`Build ${taskName} failed!`) 75 | console.error(e.toString()) 76 | } 77 | } 78 | --------------------------------------------------------------------------------