├── .gitattributes
├── jsconfig.json
├── screen.png
├── src
    ├── mixins
    │   ├── vpd.js
    │   └── index.js
    ├── _variables.scss
    ├── plugins
    │   ├── i18n.js
    │   ├── inter
    │   │   ├── template.js
    │   │   ├── get-prop.js
    │   │   └── index.js
    │   ├── widget.js
    │   ├── messages.js
    │   └── store.js
    ├── store
    │   ├── index.js
    │   ├── actions.js
    │   ├── state.js
    │   └── mutation.js
    ├── index.js
    ├── utils
    │   ├── offset.js
    │   ├── load-sprite.js
    │   └── css-generate.js
    ├── components
    │   ├── panel
    │   │   ├── event.vue
    │   │   ├── page.vue
    │   │   ├── index.vue
    │   │   ├── style.vue
    │   │   └── animation.vue
    │   ├── icon.vue
    │   ├── toast.vue
    │   ├── popbox.vue
    │   ├── viewport
    │   │   ├── size-control.vue
    │   │   ├── ref-lines.vue
    │   │   └── index.vue
    │   ├── navbar.vue
    │   ├── toolbar.vue
    │   ├── uploader.vue
    │   └── slider.vue
    ├── app.scss
    └── App.vue
├── example
    ├── widgets
    │   ├── index.js
    │   └── button
    │   │   ├── style.vue
    │   │   └── index.vue
    ├── index.js
    ├── index.html
    ├── App.vue
    └── webpack.config.js
├── .editorconfig
├── .babelrc
├── .gitignore
├── .eslintrc.js
├── scripts
    ├── icon.js
    ├── build.js
    └── config.js
├── circle.yml
├── .github
    └── workflows
    │   └── build.yml
├── package.json
├── README.md
├── CHANGELOG.md
└── LICENSE


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "include": [
3 |     "./src/**/*"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fireyy/vue-page-designer/HEAD/screen.png


--------------------------------------------------------------------------------
/src/mixins/vpd.js:
--------------------------------------------------------------------------------
1 | import vpd from '../store'
2 | 
3 | export default {
4 |   beforeCreate () {
5 |     this.$vpd = vpd
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/example/widgets/index.js:
--------------------------------------------------------------------------------
1 | import braidButton from './button/index.vue'
2 | 
3 | export default {
4 |   [braidButton.name]: braidButton
5 | }
6 | 


--------------------------------------------------------------------------------
/src/_variables.scss:
--------------------------------------------------------------------------------
1 | // Define variables to override default ones
2 | $primary-color: #000;
3 | 
4 | @import "../node_modules/spectre.css/src/variables";
5 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/src/plugins/i18n.js:
--------------------------------------------------------------------------------
 1 | import messages from './messages'
 2 | import Inter from './inter'
 3 | import Vue from 'vue'
 4 | 
 5 | Vue.use(Inter)
 6 | 
 7 | export default new Inter({
 8 |   locale: 'cn', // setup locale
 9 |   messages: messages
10 | })
11 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuePageDesigner from '../src'
 4 | 
 5 | Vue.use(vuePageDesigner)
 6 | 
 7 | new Vue({ // eslint-disable-line no-new
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["@babel/preset-env", { "modules": false }]
 4 |   ],
 5 |   "env": {
 6 |     "test": {
 7 |       "presets": [
 8 |         ["@babel/preset-env", { "targets": { "node": "current" }}]
 9 |       ]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | /example/dist/
 5 | npm-debug.log*
 6 | yarn-debug.log*
 7 | yarn-error.log*
 8 | /test/unit/coverage/
 9 | 
10 | # Editor directories and files
11 | .idea
12 | .vscode
13 | *.suo
14 | *.ntvs*
15 | *.njsproj
16 | *.sln
17 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue'
 2 | import Store from '../plugins/store'
 3 | 
 4 | import state from './state'
 5 | import actions from './actions'
 6 | import mutations from './mutation'
 7 | 
 8 | // Vue.use(Store)
 9 | 
10 | export default new Store({
11 |   state,
12 |   actions,
13 |   mutations
14 | })
15 | 


--------------------------------------------------------------------------------
/src/plugins/inter/template.js:
--------------------------------------------------------------------------------
 1 | export default (tpl, data) => {
 2 |   if (!data) return tpl
 3 | 
 4 |   const re = /{(.*?)}/g
 5 | 
 6 |   return tpl.replace(re, (_, key) => {
 7 |     let ret = data
 8 | 
 9 |     key.split('.').forEach((prop) => {
10 |       ret = ret ? ret[prop] : ''
11 |     })
12 | 
13 |     return ret || ''
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>Vue page designer demo</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   "extends": [
 5 |     "standard",
 6 |     "plugin:vue/recommended"
 7 |   ],
 8 | 
 9 |   "rules": {
10 |     "semi": "off",
11 |     "no-new": "off",
12 |     "vue/valid-template-root": "off",
13 |     "vue/require-default-prop": "off",
14 |     "vue/require-prop-types": "off"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   addWidget ({ state, commit, store }, item) {
 3 |     if (item.setting.isUpload) {
 4 |       store.$emit('upload', (payload) => {
 5 |         commit('addWidget', { data: payload, item })
 6 |       }, true)
 7 |     } else {
 8 |       commit('addWidget', { item })
 9 |       // 设置选中
10 |       commit('select', {
11 |         uuid: state.widgets[state.widgets.length - 1].uuid
12 |       })
13 |     }
14 |   },
15 |   save ({ state, store }) {
16 |     store.$emit('save', state)
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import VuePageDesigner from './App.vue'
 2 | 
 3 | import slider from './components/slider.vue'
 4 | import icon from './components/icon.vue'
 5 | 
 6 | import './app.scss'
 7 | 
 8 | const install = function (Vue, opts = {}) {
 9 |   Vue.component('VpdSlider', slider)
10 |   Vue.component('VpdIcon', icon)
11 | 
12 |   Vue.component('VuePageDesigner', VuePageDesigner)
13 | };
14 | 
15 | if (typeof window !== 'undefined' && window.Vue) {
16 |   install(window.Vue);
17 | }
18 | 
19 | export default {
20 |   install,
21 |   VuePageDesigner
22 | }
23 | 


--------------------------------------------------------------------------------
/src/plugins/inter/get-prop.js:
--------------------------------------------------------------------------------
 1 | function getPathSegments (path) {
 2 |   const pathArr = path.split('.')
 3 |   const parts = []
 4 | 
 5 |   for (let i = 0; i < pathArr.length; i++) {
 6 |     let p = pathArr[i]
 7 | 
 8 |     while (p[p.length - 1] === '\\' && pathArr[i + 1] !== undefined) {
 9 |       p = p.slice(0, -1) + '.'
10 |       p += pathArr[++i]
11 |     }
12 | 
13 |     parts.push(p)
14 |   }
15 | 
16 |   return parts
17 | }
18 | 
19 | export default function (data, path) {
20 |   return getPathSegments(path).reduce((obj, k) => obj && obj[k], data)
21 | }
22 | 


--------------------------------------------------------------------------------
/src/utils/offset.js:
--------------------------------------------------------------------------------
 1 | export function cumulativeOffset (element) {
 2 |   let top = 0
 3 |   let left = 0
 4 | 
 5 |   do {
 6 |     top += element.offsetTop || 0
 7 |     left += element.offsetLeft || 0
 8 |     element = element.offsetParent
 9 |   } while (element)
10 | 
11 |   return {
12 |     top: top,
13 |     left: left
14 |   }
15 | }
16 | 
17 | export function checkInView (el) {
18 |   let rect = el.getBoundingClientRect()
19 |   return (
20 |     rect.top < window.innerHeight &&
21 |     (rect.left < window.innerWidth &&
22 |       rect.right > 0)
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/scripts/icon.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs')
 2 | var path = require('path')
 3 | var feather = require('feather-icons')
 4 | 
 5 | var icons = Object.keys(feather.icons)
 6 |   .map(key => `<symbol viewBox="${feather.icons[key].attrs.viewBox}" width="${feather.icons[key].attrs.width}" height="${feather.icons[key].attrs.height}" id="${key}">${feather.icons[key].toString()}</symbol>`);
 7 | 
 8 | fs.writeFileSync(path.resolve(__dirname, '../static/icons.svg'), `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>${icons.join('')}</defs></svg>`);
 9 | 
10 | console.log(Object.keys(feather.icons).length + ' icon generated.')
11 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node:latest
 6 |     branches:
 7 |       ignore:
 8 |         - gh-pages # list of branches to ignore
 9 |         - /release\/.*/ # or ignore regexes
10 |     steps:
11 |       - checkout
12 |       - restore_cache:
13 |           key: dependency-cache-{{ checksum "yarn.lock" }}
14 |       - run:
15 |           name: install dependences
16 |           command: yarn
17 |       - save_cache:
18 |           key: dependency-cache-{{ checksum "yarn.lock" }}
19 |           paths:
20 |             - ./node_modules
21 |       - run:
22 |           name: test
23 |           command: yarn test
24 | 


--------------------------------------------------------------------------------
/src/store/state.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   top: 0, // 添加元件的初始纵坐标
 3 |   zoom: 64, // 画布缩放百分比
 4 |   type: 'page', // 选中元素类型
 5 |   index: -1, // 选中元素索引
 6 |   uuid: null, // 选中元素uuid
 7 |   counter: 0, // 容器副本命名时避免重名所用的计数器
 8 | 
 9 |   originX: 0, // 选中元件的横向初始值
10 |   originY: 0, // 选中元件的纵向初始值
11 |   startX: 0, // 鼠标摁下时的横坐标
12 |   startY: 0, // 鼠标摁下时的纵坐标
13 |   moving: false, // 是否正在移动元件（参考线仅在移动元件时显示）
14 | 
15 |   animation: [], // 动画库
16 |   playState: false, // 动画播放状态
17 | 
18 |   activeElement: {}, // 选中对象，要么是元件，要么是页面
19 |   page: {
20 |     page: true,
21 |     title: '测试页面', // 页面 title
22 |     height: 1500, // 画布高度
23 |     endTime: new Date(), // 截止日期
24 |     backgroundColor: '#fff'
25 |   },
26 |   widgets: [] // 元件
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/panel/event.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-if="tab === 2"
 4 |     class="panel-wrap">
 5 |     <div class="panel-row">
 6 |       <vpd-icon name="link" />
 7 |       <div class="panel-label">{{ $t('data.events.onclick') }}</div>
 8 |     </div>
 9 | 
10 |     <div
11 |       v-if="activeElement.href !== undefined"
12 |       class="panel-row">
13 |       <div class="panel-label">{{ $t('data.events.linkTo') }}</div>
14 |       <div class="panel-value">
15 |         <input
16 |           v-model="activeElement.href"
17 |           type="text"
18 |           placeholder="绝对路径，以https://开头">
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: ['activeElement', 'tab']
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/utils/load-sprite.js:
--------------------------------------------------------------------------------
 1 | // Load a sprite
 2 | export default function (url, id) {
 3 |   var x = new XMLHttpRequest()
 4 | 
 5 |   // If the id is set and sprite exists, bail
 6 |   if (document.querySelector('#' + id)) {
 7 |     return
 8 |   }
 9 | 
10 |   // Create placeholder (to prevent loading twice)
11 |   var container = document.createElement('div')
12 |   container.setAttribute('hidden', '')
13 |   container.setAttribute('id', id)
14 |   document.body.insertBefore(container, document.body.childNodes[0])
15 | 
16 |   // Check for CORS support
17 |   if ('withCredentials' in x) {
18 |     x.open('GET', url, true)
19 |   } else {
20 |     return
21 |   }
22 | 
23 |   // Inject hidden div with sprite on load
24 |   x.onload = function () {
25 |     container.innerHTML = x.responseText
26 |   }
27 | 
28 |   x.send()
29 | }
30 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | const chalk = require('chalk');
 2 | const mkdirpNode = require('mkdirp');
 3 | const { promisify } = require('util');
 4 | const { rollup } = require('rollup');
 5 | const { paths, configs, utils } = require('./config');
 6 | const mkdirp = promisify(mkdirpNode);
 7 | 
 8 | async function buildConfig (build) {
 9 |   await mkdirp(paths.dist);
10 |   const bundleName = build.output.file.replace(paths.dist, '');
11 |   console.log(chalk.cyan(`📦  Generating ${bundleName}...`));
12 | 
13 |   const bundle = await rollup(build.input);
14 |   await bundle.write(build.output);
15 | 
16 |   console.log(chalk.green(`👍  ${bundleName} ${utils.stats({ path: build.output.file })}`));
17 | }
18 | 
19 | async function build () {
20 |   await Promise.all(Object.keys(configs).map(key => {
21 |     return buildConfig(configs[key]).catch(err => {
22 |       console.log(err);
23 |     });
24 |   }));
25 |   process.exit(0);
26 | }
27 | 
28 | build();
29 | 


--------------------------------------------------------------------------------
/src/components/icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <i
 3 |     :title="title"
 4 |     class="icon svg-icon"
 5 |     @click="handleClick"
 6 |     v-html="icon"/>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   name: 'VpdIcon',
11 |   props: {
12 |     svg: String,
13 |     title: String,
14 |     name: String,
15 |     options: Object
16 |   },
17 |   computed: {
18 |     icon () {
19 |       return this.svg || `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#${this.name}"></svg>`
20 |     }
21 |   },
22 |   methods: {
23 |     handleClick () {
24 |       this.$emit('click')
25 |     }
26 |   }
27 | }
28 | </script>
29 | <style>
30 | .svg-icon svg {
31 |   box-sizing: border-box;
32 |   display: inline-block;
33 |   font-size: inherit;
34 |   font-style: normal;
35 |   height: 1em;
36 |   position: relative;
37 |   vertical-align: middle;
38 |   width: auto;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/plugins/widget.js:
--------------------------------------------------------------------------------
 1 | // 默认 widgets
 2 | import defaultWidgets from 'vue-page-designer-widgets'
 3 | import vpd from '../mixins/vpd'
 4 | 
 5 | var widgets
 6 | var widgetStyle = {}
 7 | 
 8 | const install = (Vue, config = {}) => {
 9 |   if (install.installed) return
10 | 
11 |   widgets = Object.assign({}, defaultWidgets, config.widgets)
12 | 
13 |   Object.keys(widgets).forEach(key => {
14 |     Vue.component(key, widgets[key])
15 |     Vue.component(key, Vue.extend(widgets[key]).extend(vpd))
16 |     // style panel
17 |     if (widgets[key]['panel']) {
18 |       let panel = Object.assign({}, widgets[key]['panel'], {
19 |         type: key
20 |       })
21 |       Vue.component(panel.name, Vue.extend(panel).extend(vpd))
22 |       widgetStyle[panel.name] = panel
23 |       // remove panel from object
24 |       delete widgets[key]['panel']
25 |     }
26 |   })
27 | }
28 | 
29 | export default {
30 |   install,
31 |   getWidgets () {
32 |     return widgets
33 |   },
34 |   getWidgetStyle () {
35 |     return widgetStyle
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/mixins/index.js:
--------------------------------------------------------------------------------
 1 | var move = {
 2 |   methods: {
 3 |     initmovement (e) {
 4 |       var target = this.$vpd.state.activeElement
 5 | 
 6 |       // 设置移动状态初始值
 7 |       this.$vpd.commit('initmove', {
 8 |         startX: e.pageX,
 9 |         startY: e.pageY,
10 |         originX: target.left,
11 |         originY: target.top
12 |       })
13 | 
14 |       // 绑定鼠标移动事件
15 |       document.addEventListener('mousemove', this.handlemousemove, true)
16 | 
17 |       // 取消鼠标移动事件
18 |       document.addEventListener('mouseup', this.handlemouseup, true)
19 |     },
20 | 
21 |     handlemousemove (e) {
22 |       e.stopPropagation()
23 |       e.preventDefault()
24 | 
25 |       this.$vpd.commit('move', {
26 |         x: e.pageX,
27 |         y: e.pageY
28 |       })
29 |     },
30 | 
31 |     handlemouseup () {
32 |       document.removeEventListener('mousemove', this.handlemousemove, true)
33 |       document.removeEventListener('mouseup', this.handlemouseup, true)
34 |       this.$vpd.commit('stopmove')
35 |     }
36 |   }
37 | }
38 | 
39 | export { move }
40 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the action will run. Triggers the workflow on push or pull request
 6 | # events but only for the master branch
 7 | on:
 8 |   push:
 9 |     branches: [ master ]
10 |   pull_request:
11 |     branches: [ master ]
12 | 
13 | env:
14 |   NODE_VERSION: '10.x'
15 | 
16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
17 | jobs:
18 |   # This workflow contains a single job called "build"
19 |   build:
20 |     # The type of runner that the job will run on
21 |     runs-on: ubuntu-latest
22 | 
23 |     # Steps represent a sequence of tasks that will be executed as part of the job
24 |     steps:
25 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
26 |       - uses: actions/checkout@v2
27 |       - name: Use Node.js ${{ env.NODE_VERSION }}
28 |         uses: actions/setup-node@v1
29 |         with:
30 |           node-version: ${{ env.NODE_VERSION }}
31 |       - name: 'Build'
32 |         run: |
33 |           npm install
34 |           npm run build
35 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <vue-page-designer
 4 |       :value="value"
 5 |       :widgets="widgets"
 6 |       :upload="handleUpload"
 7 |       :upload-option="uploadOption"
 8 |       locale="cn"
 9 |       @save="handleSave" />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import widgets from './widgets'
15 | 
16 | export default {
17 |   data () {
18 |     return {
19 |       value: null,
20 |       widgets,
21 |       uploadOption: {
22 |         url: 'https://jsonplaceholder.typicode.com/photos'
23 |       }
24 |     }
25 |   },
26 | 
27 |   created () {
28 |     let data = window.localStorage.getItem('vpd-data')
29 |     if (data) {
30 |       this.value = JSON.parse(data)
31 |     }
32 |   },
33 | 
34 |   methods: {
35 |     handleSave (data) {
36 |       console.log('saving:', data)
37 |       window.localStorage.setItem('vpd-data', JSON.stringify(data))
38 |     },
39 |     handleUpload (files) {
40 |       console.log('uploading:', files)
41 |       return new Promise(resolve => {
42 |         resolve({
43 |           files: files,
44 |           status: 200
45 |         })
46 |       })
47 |     }
48 |   }
49 | }
50 | </script>
51 | 
52 | <style>
53 | #app {
54 |   height: 100%;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/components/toast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="drop">
 3 |     <div
 4 |       v-show="show"
 5 |       :class="klass"
 6 |       class="toast">{{ info }}</div>
 7 |   </transition>
 8 | </template>
 9 | 
10 | <script>
11 | import vpd from '../mixins/vpd'
12 | export default {
13 |   name: 'VpdToast',
14 |   mixins: [vpd],
15 |   data () {
16 |     return {
17 |       info: '',
18 |       type: 'warning',
19 |       show: false
20 |     }
21 |   },
22 |   computed: {
23 |     klass () {
24 |       return {
25 |         'toast-success': this.type === 'success',
26 |         'toast-warning': this.type === 'warning',
27 |         'toast-error': this.type === 'error'
28 |       }
29 |     }
30 |   },
31 |   mounted () {
32 |     this.$vpd.$on('notify', (option) => {
33 |       this.notify(option.info, option.type)
34 |     })
35 |   },
36 |   methods: {
37 |     notify (info, type) {
38 |       if (this.show) return
39 |       this.info = info || 'Success!'
40 |       if (type) this.type = type
41 |       this.show = true
42 |       setTimeout(() => {
43 |         this.show = false
44 |       }, 2000)
45 |     }
46 |   }
47 | }
48 | </script>
49 | 
50 | <style lang="scss">
51 | .toast {
52 |   position: absolute;
53 |   left: 50%;
54 |   transform: translateX(-50%);
55 |   top: 70px;
56 |   width: auto;
57 |   transition: all .3s;
58 | }
59 | .drop-enter, .drop-leave-active {
60 |   opacity: 0;
61 |   top: 60px;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/example/widgets/button/style.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hr>
 4 |     <div class="panel-row">
 5 |       <vpd-icon name="target" />
 6 |       <div class="panel-label">背景色</div>
 7 |       <div class="panel-value">{{ activeElement.bgColor }}</div>
 8 |       <div class="panel-value">
 9 |         <input
10 |           v-model="activeElement.bgColor"
11 |           type="color">
12 |       </div>
13 |     </div>
14 | 
15 |     <div class="panel-row">
16 |       <vpd-icon name="image" />
17 |       <div class="panel-label">背景图</div>
18 |       <div class="panel-value">
19 |         <div
20 |           :style="{ backgroundImage: 'url(' + activeElement.backPic + ')' }"
21 |           class="panel-preview"
22 |           @click="addPic">
23 |           <vpd-icon
24 |             v-show="!activeElement.backPic"
25 |             name="plus" />
26 |         </div>
27 |       </div>
28 |     </div>
29 | 
30 |     <div class="panel-row">
31 |       <vpd-icon name="edit-3" />
32 |       <div class="panel-label">文字颜色</div>
33 |       <div class="panel-value">{{ activeElement.color }}</div>
34 |       <div>
35 |         <input
36 |           v-model="activeElement.color"
37 |           type="color">
38 |       </div>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | export default {
45 |   name: 'BraidButtonStyle',
46 |   props: ['activeElement'],
47 |   methods: {
48 |     addPic () {
49 |       this.$vpd.$emit('upload', (payload) => {
50 |         this.$vpd.commit('addBackPic', payload)
51 |       })
52 |     }
53 |   }
54 | }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/utils/css-generate.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 用于生成动画 keyframes 字符串
 3 |  *
 4 |  * @name { String } animation-name
 5 |  * @animation { Object } animation's properties
 6 |  * @stops { Array } key frames
 7 |  * @needFormat { Boolean } default is true
 8 |  *
 9 |  * @return { String }
10 |  */
11 | export function getAnimateCss (name, animation, stops, needFormat = true) {
12 |   var properties = ['duration', 'timing', 'delay', 'iteration', 'direction', 'fill']
13 |   var values = [name]
14 | 
15 |   properties.map(val => {
16 |     if (animation[val] === undefined) return
17 |     if (val === 'duration' || val === 'delay') {
18 |       values.push(animation[val] + 's')
19 |     } else if (val === 'iteration') {
20 |       values.push(animation[val] === 0 ? 'infinite' : animation[val])
21 |     } else {
22 |       values.push(animation[val])
23 |     }
24 |   })
25 | 
26 |   var animateCss = 'animation: ' + values.join(' ') + ';'
27 | 
28 |   // 生成 keyframes 代码
29 |   var keyframes = []
30 |   if (needFormat) {
31 |     stops.map(val => {
32 |       keyframes.push('\t' + val.stop + '% {\n')
33 |       keyframes.push('\t\t' + val.css + '\n\t}\n')
34 |     })
35 |   } else {
36 |     stops.map(val => {
37 |       keyframes.push(val.stop + '% {')
38 |       keyframes.push(val.css + '}')
39 |     })
40 |   }
41 |   var keyframeCss = keyframes.join('')
42 | 
43 |   var output =
44 | `
45 | .anm-${name} {
46 |   -webkit-${animateCss}
47 |   ${animateCss}
48 | }
49 | @keyframes ${name} {
50 | ${keyframeCss}}
51 | @-webkit-keyframes ${name} {
52 | ${keyframeCss}}
53 | `
54 |   return output
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/panel/page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-if="activeElement.page && tab === 1"
 4 |     class="panel-wrap">
 5 |     <div
 6 |       class="panel-row"
 7 |       flex>
 8 |       <vpd-icon name="type" />
 9 |       <div class="panel-label">{{ $t('messages.page.name') }}</div>
10 |       <div class="panel-value">
11 |         <input
12 |           v-model="activeElement.title"
13 |           type="text">
14 |       </div>
15 |     </div>
16 | 
17 |     <div
18 |       class="panel-row"
19 |       flex>
20 |       <vpd-icon name="smartphone" />
21 |       <div class="panel-label">{{ $t('messages.page.height') }}</div>
22 |       <div class="panel-value">
23 |         <input
24 |           v-model="activeElement.height"
25 |           type="text">
26 |       </div>
27 |     </div>
28 | 
29 |     <div
30 |       class="panel-row"
31 |       flex>
32 |       <vpd-icon name="droplet" />
33 |       <div class="panel-label">{{ $t('messages.page.background') }}</div>
34 |       <div class="panel-value">
35 |         <input
36 |           v-model="activeElement.backgroundColor"
37 |           type="color">
38 |       </div>
39 |     </div>
40 | 
41 |     <div
42 |       class="panel-row"
43 |       flex>
44 |       <vpd-icon name="clock" />
45 |       <div class="panel-label">{{ $t('messages.page.endTime') }}</div>
46 |       <div class="panel-value">
47 |         <input
48 |           v-model="activeElement.endTime"
49 |           type="date">
50 |       </div>
51 |     </div>
52 |   </div>
53 | </template>
54 | 
55 | <script>
56 | export default {
57 |   props: ['activeElement', 'tab']
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/app.scss:
--------------------------------------------------------------------------------
 1 | // Define variables to override default ones
 2 | @import "variables";
 3 | 
 4 | @import "node_modules/spectre.css/src/mixins";
 5 | @import "node_modules/spectre.css/src/base";
 6 | @import "node_modules/spectre.css/src/utilities";
 7 | 
 8 | // Layout
 9 | @import "node_modules/spectre.css/src/layout";
10 | @import "node_modules/spectre.css/src/navbar";
11 | 
12 | // Import only the needed components
13 | @import "node_modules/spectre.css/src/buttons";
14 | @import "node_modules/spectre.css/src/forms";
15 | @import "node_modules/spectre.css/src/tabs";
16 | @import "node_modules/spectre.css/src/tooltips";
17 | @import "node_modules/spectre.css/src/toasts";
18 | 
19 | html,
20 | body,
21 | .app {
22 |   height: 100%;
23 | }
24 | html {
25 |   font-size: 18px;
26 | }
27 | body {
28 |   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
29 |   padding: 0;
30 |   margin: 0;
31 | }
32 | 
33 | input[type="text"],
34 | input[type="date"],
35 | textarea {
36 |   @extend .form-input;
37 |   @extend .input-sm;
38 | }
39 | input[type="color"] {
40 |   cursor: pointer;
41 |   width: 24px;
42 |   vertical-align: middle;
43 |   border: none;
44 |   &::-webkit-color-swatch {
45 |     border: none;
46 |     border-radius: 4px;
47 |   }
48 |   &::-webkit-color-swatch-wrapper {
49 |     padding: 1px;
50 |     border-radius: 4px;
51 |     border: 1px solid $primary-color;
52 |   }
53 | }
54 | select {
55 |   @extend .form-select;
56 |   @extend .select-sm;
57 | }
58 | .layer {
59 |   &:hover {
60 |     outline: 1px solid #ddd !important;
61 |   }
62 | }
63 | .g-active {
64 |   outline: 1px solid #2196f3 !important;
65 |   &:hover {
66 |     outline: 1px solid #2196f3 !important;
67 |   }
68 |   &::after {
69 |     content: attr(data-title);
70 |     background: #2196f3;
71 |     color: #fff;
72 |     position: absolute;
73 |     top: 0;
74 |     right: 0;
75 |     padding: 0 5px;
76 |     font-size: 12px;
77 |     border-radius: 0 0 0 4px;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/example/widgets/button/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     :class="[playState ? 'anm-' + val.animationName : '']"
 4 |     :style="{
 5 |       position: 'absolute',
 6 |       width: val.width / 7.5 + '%',
 7 |       height: val.height / h * 100 + '%',
 8 |       left: val.left / 7.5 + '%',
 9 |       top: val.top / h * 100 + '%',
10 |       zIndex: val.z,
11 |       backgroundColor: val.bgColor,
12 |       backgroundImage: 'url(' + val.backPic + ')',
13 |       color: val.color
14 |     }"
15 |     contenteditable="true"
16 |     @blur="(e) => updateText(e, val.uuid)"
17 |     v-html="val.text"/>
18 | </template>
19 | 
20 | <script>
21 | import stylec from './style.vue'
22 | const WIDGET_NAME = 'braid-button'
23 | 
24 | export default {
25 |   name: WIDGET_NAME,
26 |   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>',
27 |   title: '按钮',
28 |   panel: stylec,
29 |   setting: {
30 |     type: WIDGET_NAME,
31 |     isContainer: false,
32 |     isUpload: false,
33 |     hasGuide: true,
34 |     isChild: true,
35 |     dragable: true,
36 |     resizable: true,
37 |     name: '',
38 |     width: 250,
39 |     height: 60,
40 |     left: 50,
41 |     top: 0,
42 |     z: 0,
43 |     bgColor: '#000000',
44 |     backPic: '',
45 |     backPicUrl: '',
46 |     color: '#ffffff',
47 |     text: '按钮',
48 |     belong: 'page',
49 |     animationName: ''
50 |   },
51 |   props: ['h', 'val', 'playState'],
52 | 
53 |   methods: {
54 |     updateText (e, uuid) {
55 |       let text = e.target.innerHTML
56 |       this.$vpd.commit('updateData', {
57 |         uuid: uuid,
58 |         key: 'text',
59 |         value: text
60 |       })
61 |     }
62 |   }
63 | }
64 | </script>
65 | 
66 | <style scoped>
67 | .lz-container {
68 |   background-repeat: no-repeat;
69 |   background-position: center;
70 |   background-size: 100%;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/plugins/inter/index.js:
--------------------------------------------------------------------------------
 1 | import defaultTemplate from './template'
 2 | import getProp from './get-prop'
 3 | 
 4 | let Vue
 5 | 
 6 | export default class Inter {
 7 |   static install (_Vue) {
 8 |     Vue = _Vue
 9 |     Vue.mixin({
10 |       beforeCreate () {
11 |         this.$inter =
12 |           this.$options.inter || (this.$parent && this.$parent.$inter)
13 |       }
14 |     })
15 |     Vue.prototype.$t = function (key) {
16 |       const inter = this.$inter
17 |       return inter.formatMessage(
18 |         {
19 |           path: key
20 |         }
21 |       )
22 |     }
23 |   }
24 | 
25 |   constructor ({ locale, messages = {}, template = defaultTemplate }) {
26 |     if (process.env.NODE_ENV === 'development' && !Vue) {
27 |       throw new Error('You have to install `vue-inter` first: Vue.use(Inter)')
28 |     }
29 | 
30 |     this.template = template
31 |     this.messages = messages
32 | 
33 |     Vue.util.defineReactive(this, '__locale', locale)
34 |   }
35 | 
36 |   formatMessage (messageDescriptor, ...data) {
37 |     if (typeof messageDescriptor !== 'object') {
38 |       throw new TypeError(
39 |         'messageDescriptor in .formatMessage must be an object.'
40 |       )
41 |     }
42 | 
43 |     const { path, defaultMessage } = messageDescriptor
44 |     const localeData = this.messages[this.currentLocale]
45 |     // Get message from path
46 |     let message = path && getProp(localeData, path)
47 |     if (typeof message === 'function') {
48 |       return message(...data)
49 |     }
50 |     if (typeof message === 'undefined') {
51 |       // Fallback to defaultMessage
52 |       // Fallback to path literal
53 |       message = typeof defaultMessage === 'undefined' ? path : defaultMessage
54 |     }
55 |     return this.template(message, ...data)
56 |   }
57 | 
58 |   get currentLocale () {
59 |     return this.__locale
60 |   }
61 | 
62 |   setCurrentLocale (locale) {
63 |     this.__locale = locale
64 |     return this
65 |   }
66 | 
67 |   setLocaleData (locale, localData) {
68 |     this.messages[locale] = localData
69 |     return this
70 |   }
71 | 
72 |   get availableLocales () {
73 |     return Object.keys(this.messages)
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/components/popbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="show"
  4 |     class="mask">
  5 |     <div class="box">
  6 |       <div class="top">
  7 |         <span>{{ title }}</span>
  8 |         <vpd-icon
  9 |           class="close"
 10 |           name="x"
 11 |           @click="close" />
 12 |       </div>
 13 |       <div class="body">
 14 |         <slot>{{ content }}</slot>
 15 |       </div>
 16 |       <div class="footer">
 17 |         <button
 18 |           class="btn"
 19 |           @click="confirm">{{ $t('data.actions.determine') }}</button>
 20 |         <button
 21 |           class="btn"
 22 |           @click="close">{{ $t('data.actions.cancel') }}</button>
 23 |       </div>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | <script>
 28 | export default {
 29 |   name: 'VpdPopbox',
 30 |   props: ['title', 'id', 'content'],
 31 |   data () {
 32 |     return {
 33 |       show: false
 34 |     }
 35 |   },
 36 |   methods: {
 37 |     close () {
 38 |       this.show = false
 39 |     },
 40 |     confirm () {
 41 |       this.$emit('confirm', this.id)
 42 |     }
 43 |   }
 44 | }
 45 | </script>
 46 | <style scoped>
 47 |   .mask {
 48 |     width: 100%;
 49 |     height: 100%;
 50 |     position: fixed;
 51 |     z-index: 999;
 52 |     top: 0;
 53 |     left: 0;
 54 |     background-color: rgba(0, 0, 0, .3);
 55 |     display: flex;
 56 |     justify-content: center;
 57 |     align-items: center;
 58 |   }
 59 |   .box {
 60 |     width: 520px;
 61 |     background-color: #fff;
 62 |     border-radius: 4px;
 63 |   }
 64 |   .top {
 65 |     height: 50px;
 66 |     line-height: 50px;
 67 |     border-bottom: 1px solid #f2f2f2;
 68 |     padding: 0 20px;
 69 |   }
 70 |   .body {
 71 |     padding: 20px;
 72 |     font-size: 14px;
 73 |     color: #999;
 74 |   }
 75 |   .footer {
 76 |     height: 50px;
 77 |     line-height: 50px;
 78 |     border-top: 1px solid #f2f2f2;
 79 |     padding-top: 9px;
 80 |     padding-right: 20px;
 81 |   }
 82 |   i.close {
 83 |     color: #ccc;
 84 |     cursor: pointer;
 85 |     transition: all .3s;
 86 |     float: right;
 87 |     font-size: 24px;
 88 |   }
 89 |   i.close:hover {
 90 |     color: #a5a5a5;
 91 |   }
 92 |   .btn {
 93 |     display: inline-block;
 94 |     border: none;
 95 |     outline: none;
 96 |     text-align: center;
 97 |     height: 32px;
 98 |     line-height: 32px;
 99 |     cursor: pointer;
100 |     border-radius: 3px;
101 |     font-size: 14px;
102 |     transition: all .2s;
103 |     padding: 0 20px;
104 |     background-color: #fff;
105 |     color: #666;
106 |     font-size: 12px;
107 |     float: right;
108 |   }
109 |   .btn:hover {
110 |     background-color: #f2f2f2;
111 |   }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const webpack = require('webpack')
  3 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
  4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  5 | const CleanWebpackPlugin = require('clean-webpack-plugin')
  6 | const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
  7 | const ProgressBarPlugin = require('progress-bar-webpack-plugin')
  8 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  9 | 
 10 | const env = process.env.NODE_ENV
 11 | const production = env === 'production'
 12 | 
 13 | // render page
 14 | const page = (name) => {
 15 |   return new HtmlWebpackPlugin({
 16 |     inject: true,
 17 |     template: path.join(__dirname, `./${name}.html`),
 18 |     filename: path.join(__dirname, `./dist/${name}.html`)
 19 |   })
 20 | }
 21 | 
 22 | const config = {
 23 |   mode: production ? 'production' : 'development',
 24 |   devtool: production ? 'source-map' : 'cheap-source-map',
 25 |   entry: {
 26 |     app: path.join(__dirname, './index.js')
 27 |   },
 28 |   output: {
 29 |     path: path.join(__dirname, 'dist'),
 30 |     filename: 'js/[name].js'
 31 |   },
 32 |   plugins: [
 33 |     new MiniCssExtractPlugin({
 34 |       filename: 'css/style.css'
 35 |     }),
 36 |     new CleanWebpackPlugin(['./dist']),
 37 |     new VueLoaderPlugin(),
 38 |     new webpack.LoaderOptionsPlugin({ options: {} }),
 39 |     new FriendlyErrorsWebpackPlugin(),
 40 |     new ProgressBarPlugin(),
 41 |     page('index')
 42 |   ],
 43 |   watchOptions: {
 44 |     aggregateTimeout: 300,
 45 |     poll: 1000
 46 |   },
 47 |   devServer: {
 48 |     historyApiFallback: true,
 49 |     hot: true,
 50 |     inline: true,
 51 |     stats: 'errors-only',
 52 |     host: '0.0.0.0',
 53 |     port: 8080
 54 |   },
 55 |   module: {
 56 |     rules: [
 57 |       {
 58 |         test: /.js$/,
 59 |         exclude: /node_modules/,
 60 |         loader: 'eslint-loader',
 61 |         enforce: 'pre'
 62 |       },
 63 |       {
 64 |         test: /.js$/,
 65 |         exclude: /node_modules/,
 66 |         use: {
 67 |           loader: 'babel-loader',
 68 |           options: { babelrc: true }
 69 |         }
 70 |       },
 71 |       {
 72 |         test: /\.vue$/,
 73 |         loader: 'eslint-loader',
 74 |         enforce: 'pre'
 75 |       },
 76 |       {
 77 |         test: /\.vue$/,
 78 |         loader: 'vue-loader'
 79 |       },
 80 |       {
 81 |         test: /\.css$/,
 82 |         loader: ['style-loader', 'css-loader']
 83 |       },
 84 |       {
 85 |         test: /\.scss?$/,
 86 |         use: [
 87 |           MiniCssExtractPlugin.loader,
 88 |           'css-loader',
 89 |           'sass-loader'
 90 |         ]
 91 |       },
 92 |       {
 93 |         test: /\.(ttf|eot|svg)(\?.*)?$/,
 94 |         loader: 'file-loader',
 95 |         options: {
 96 |           name: 'font/[name].[ext]'
 97 |         }
 98 |       }
 99 |     ]
100 |   },
101 |   resolve: {
102 |     extensions: ['.js', '.vue', '.json']
103 |   }
104 | }
105 | 
106 | module.exports = config
107 | 


--------------------------------------------------------------------------------
/scripts/config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const fs = require('fs');
  3 | const replace = require('rollup-plugin-replace');
  4 | const vue = require('rollup-plugin-vue');
  5 | const resolve = require('rollup-plugin-node-resolve');
  6 | const postcss = require('rollup-plugin-postcss');
  7 | const buble = require('rollup-plugin-buble');
  8 | const commonjs = require('rollup-plugin-commonjs');
  9 | const filesize = require('filesize');
 10 | const gzipSize = require('gzip-size');
 11 | const { uglify } = require('rollup-plugin-uglify');
 12 | const { minify } = require('terser');
 13 | 
 14 | const version = process.env.VERSION || require('../package.json').version;
 15 | 
 16 | const common = {
 17 |   banner:
 18 |     `/**
 19 |     * Vue-page-designer v${version}
 20 |     * (c) ${new Date().getFullYear()} fireyy
 21 |     * @license WTFPL
 22 |     */`,
 23 |   paths: {
 24 |     input: path.join(__dirname, '../src/index.js'),
 25 |     src: path.join(__dirname, '../src/'),
 26 |     dist: path.join(__dirname, '../dist/')
 27 |   },
 28 |   builds: {
 29 |     umd: {
 30 |       file: 'vue-page-designer.js',
 31 |       format: 'umd',
 32 |       name: 'vuePageDesigner',
 33 |       env: 'development'
 34 |     },
 35 |     umdMin: {
 36 |       file: 'vue-page-designer.min.js',
 37 |       format: 'umd',
 38 |       name: 'vuePageDesigner',
 39 |       env: 'production'
 40 |     },
 41 |     esm: {
 42 |       file: 'vue-page-designer.esm.js',
 43 |       format: 'es'
 44 |     }
 45 |   }
 46 | };
 47 | 
 48 | function genConfig (options) {
 49 |   const config = {
 50 |     description: '',
 51 |     input: {
 52 |       external: ['vue'],
 53 |       input: options.input || common.paths.input,
 54 |       plugins: [
 55 |         commonjs(),
 56 |         replace({ __VERSION__: version }),
 57 |         postcss({
 58 |           extract: true
 59 |         }),
 60 |         vue({ css: false }),
 61 |         resolve(),
 62 |         buble({ exclude: 'node_modules/**' })
 63 |       ]
 64 |     },
 65 |     output: {
 66 |       globals: {
 67 |         'vue': 'Vue'
 68 |       },
 69 |       banner: common.banner,
 70 |       name: options.name,
 71 |       format: options.format,
 72 |       file: path.join(common.paths.dist, options.file)
 73 |     }
 74 |   };
 75 | 
 76 |   if (options.env) {
 77 |     config.input.plugins.unshift(replace({
 78 |       'process.env.NODE_ENV': JSON.stringify(options.env)
 79 |     }));
 80 |   }
 81 | 
 82 |   if (options.env === 'production') {
 83 |     config.input.plugins.push(uglify({}, minify));
 84 |   }
 85 | 
 86 |   return config;
 87 | };
 88 | 
 89 | const configs = Object.keys(common.builds).reduce((prev, key) => {
 90 |   prev[key] = genConfig(common.builds[key]);
 91 | 
 92 |   return prev;
 93 | }, {});
 94 | 
 95 | module.exports = {
 96 |   configs,
 97 |   uglifyOptions: common.uglifyOptions,
 98 |   paths: common.paths,
 99 |   utils: {
100 |     stats ({ path }) {
101 |       const code = fs.readFileSync(path);
102 |       const { size } = fs.statSync(path);
103 |       const gzipped = gzipSize.sync(code);
104 | 
105 |       return `| Size: ${filesize(size)} | Gzip: ${filesize(gzipped)}`;
106 |     }
107 |   }
108 | };
109 | 


--------------------------------------------------------------------------------
/src/plugins/messages.js:
--------------------------------------------------------------------------------
  1 | const messages = {
  2 |   en: {
  3 |     data: {
  4 |       no: 'no',
  5 |       name: 'Name',
  6 |       duration: 'Duration',
  7 |       delay: 'Delay',
  8 |       iteration: 'Iteration',
  9 |       timing: 'Timing',
 10 |       direction: 'Direction',
 11 |       levels: 'Z index',
 12 |       components: 'Components',
 13 |       added_components: 'Structure',
 14 | 
 15 |       actions: {
 16 |         add: 'Add',
 17 |         determine: 'Determine',
 18 |         cancel: 'Cancel',
 19 |         copy: 'Copy',
 20 |         save: 'Save',
 21 |         delete: 'Delete'
 22 |       },
 23 | 
 24 |       names: {
 25 |         params: 'Params',
 26 |         event: 'Events',
 27 |         animation: 'Animation',
 28 | 
 29 |         width: 'Width',
 30 |         height: 'Height',
 31 |         left: 'Left',
 32 |         top: 'Top',
 33 | 
 34 |         belonging: 'Belonging container'
 35 |       },
 36 | 
 37 |       events: {
 38 |         onclick: 'On click',
 39 |         linkTo: 'Link to'
 40 |       }
 41 |     },
 42 |     messages: {
 43 |       panel: {
 44 |         animation: {
 45 |           select: 'Select animation'
 46 |         },
 47 | 
 48 |         alerts: {
 49 |           imageUploadApiConfigurator: 'Please configure the picture upload api address',
 50 |           unnamed_animations: 'There are unnamed animations, please name them first',
 51 |           animation_name_required: 'Please name the animation first',
 52 |           animation_name_validate: 'Do not use characters other than English and numbers'
 53 |         }
 54 |       },
 55 | 
 56 |       page: {
 57 |         name: 'Page name',
 58 |         height: 'Page height',
 59 |         background: 'Background',
 60 |         endTime: 'End time'
 61 |       }
 62 |     }
 63 |   },
 64 |   cn: {
 65 |     data: {
 66 |       no: '无',
 67 |       name: '名称',
 68 |       duration: '时长',
 69 |       delay: '延迟',
 70 |       iteration: '循环',
 71 |       timing: '缓动函数',
 72 |       direction: '方向',
 73 |       levels: '层级',
 74 |       components: '组件',
 75 |       added_components: '结构',
 76 | 
 77 |       actions: {
 78 |         add: '添加',
 79 |         determine: '确定',
 80 |         cancel: '取消',
 81 |         copy: '复制',
 82 |         save: '保存',
 83 |         delete: '删除'
 84 |       },
 85 | 
 86 |       names: {
 87 |         params: '参数',
 88 |         event: '交互',
 89 |         animation: '动画',
 90 | 
 91 |         width: '宽度',
 92 |         height: '高度',
 93 |         left: '横坐标',
 94 |         top: '纵坐标',
 95 | 
 96 |         belonging: '所属容器'
 97 |       },
 98 | 
 99 |       events: {
100 |         onclick: '点击时',
101 |         linkTo: '链接至'
102 |       }
103 |     },
104 |     messages: {
105 |       panel: {
106 |         animation: {
107 |           select: '选择动画'
108 |         },
109 | 
110 |         alerts: {
111 |           imageUploadApiConfigurator: '请配置图片上传api地址',
112 |           unnamed_animations: '还有未命名动画，请先命名',
113 |           animation_name_required: '请先为动画命名',
114 |           animation_name_validate: '动画名称必须以英文开头'
115 |         }
116 |       },
117 | 
118 |       page: {
119 |         name: '页面标题',
120 |         height: '页面高度',
121 |         background: '页面背景色',
122 |         endTime: '截止日期'
123 |       }
124 |     }
125 |   }
126 | }
127 | 
128 | export default messages
129 | 


--------------------------------------------------------------------------------
/src/components/panel/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <ul class="tab tab-block panel-tab">
  4 |       <li
  5 |         :class="{active: activeTab === 1}"
  6 |         class="tab-item"
  7 |         @click="activeTab = 1"><a>{{ $t('data.names.params') }}</a></li>
  8 |       <li
  9 |         :class="{active: activeTab === 2}"
 10 |         class="tab-item"
 11 |         @click="activeTab = 2"><a>{{ $t('data.names.event') }}</a></li>
 12 |       <li
 13 |         :class="{active: activeTab === 3}"
 14 |         class="tab-item"
 15 |         @click="activeTab = 3"><a>{{ $t('data.names.animation') }}</a></li>
 16 |     </ul>
 17 | 
 18 |     <page
 19 |       :active-element="activeElement"
 20 |       :tab="activeTab"/>
 21 |     <appearance
 22 |       :active-element="activeElement"
 23 |       :tab="activeTab"/>
 24 |     <event
 25 |       :active-element="activeElement"
 26 |       :tab="activeTab"/>
 27 |     <animation
 28 |       :active-element="activeElement"
 29 |       :tab="activeTab"/>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import page from './page.vue'
 35 | import style from './style.vue'
 36 | import event from './event.vue'
 37 | import animation from './animation.vue'
 38 | import vpd from '../../mixins/vpd'
 39 | 
 40 | export default {
 41 |   components: {
 42 |     page: page,
 43 |     appearance: style,
 44 |     event: event,
 45 |     animation: animation
 46 |   },
 47 |   mixins: [vpd],
 48 | 
 49 |   data () {
 50 |     return {
 51 |       activeTab: 1
 52 |     }
 53 |   },
 54 | 
 55 |   computed: {
 56 |     // 选中元素对象
 57 |     activeElement () {
 58 |       return this.$vpd.state.activeElement
 59 |     }
 60 |   }
 61 | }
 62 | </script>
 63 | 
 64 | <style lang="scss">
 65 | @import '../../_variables.scss';
 66 | .panel-tab {
 67 |   padding: 0;
 68 | }
 69 | .panel-wrap {
 70 |   height: calc(100% - 50px);
 71 |   padding: 15px 20px;
 72 |   position: relative;
 73 |   overflow-y: auto;
 74 |   .btn-action {
 75 |     background-color: none;
 76 |     border: none;
 77 |     border-radius: 50%;
 78 |   }
 79 |   .btn-action:hover {
 80 |     background-color: #f5f5f5;
 81 |   }
 82 | }
 83 | .panel-row {
 84 |   display: flex;
 85 |   font-size: 13px;
 86 |   line-height: 36px;
 87 | }
 88 | .panel-row .svg-icon {
 89 |   font-size: 16px;
 90 |   color: $gray-color;
 91 | }
 92 | .panel-label {
 93 |   display: inline-block;
 94 |   width: 80px;
 95 |   height: 36px;
 96 |   padding-left: 6px;
 97 |   color: #999;
 98 | }
 99 | .panel-value {
100 |   min-width: 80px;
101 |   display: flex;
102 |   align-items: center;
103 | }
104 | .panel-slider-wrap {
105 |   flex-grow: 1;
106 |   padding: 6px 5px;
107 |   opacity: 0;
108 |   transition: opacity 0.3s;
109 | }
110 | .panel-row:hover .panel-slider-wrap {
111 |   opacity: 1;
112 | }
113 | .panel-cell {
114 |   flex-grow: 1;
115 | }
116 | .panel-wrap input:checked ~ .svg-icon svg {
117 |   stroke: #333;
118 | }
119 | .panel-select {
120 |   width: 100%;
121 |   height: 32px;
122 |   border: 1px solid #ccc;
123 | }
124 | .panel-wrap hr {
125 |   margin: 20px 0;
126 |   border: none;
127 |   border-top: 1px solid #f5f5f5;
128 | }
129 | .panel-wrap select,
130 | .panel-wrap input[type="text"] {
131 |   width: 100%;
132 | }
133 | .panel-preview {
134 |   width: 50px;
135 |   height: 32px;
136 |   background: no-repeat center/100%;
137 |   cursor: pointer;
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/components/viewport/size-control.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-show="elm">
  3 |     <!-- 左 -->
  4 |     <div
  5 |       :style="{
  6 |         height: elm.height + 'px',
  7 |         top: elm.top + 'px',
  8 |         left: elm.left + 'px'
  9 |       }"
 10 |       class="verti"
 11 |       @mousedown="handlemousedown($event, 'left', 'left', 'width')">
 12 |       <div class="square"/>
 13 |     </div>
 14 | 
 15 |     <!-- 右 -->
 16 |     <div
 17 |       :style="{
 18 |         height: elm.height + 'px',
 19 |         top: elm.top + 'px',
 20 |         left: elm.left + elm.width + 'px'
 21 |       }"
 22 |       class="verti"
 23 |       @mousedown="handlemousedown($event, 'right', 'width')">
 24 |       <div class="square"/>
 25 |     </div>
 26 | 
 27 |     <!-- 上 -->
 28 |     <div
 29 |       :style="{
 30 |         width: elm.width + 'px',
 31 |         top: elm.top + 'px',
 32 |         left: elm.left + 'px'
 33 |       }"
 34 |       class="horiz"
 35 |       @mousedown="handlemousedown($event, 'up', 'top', 'height')">
 36 |       <div class="square"/>
 37 |     </div>
 38 | 
 39 |     <!-- 下 -->
 40 |     <div
 41 |       :style="{
 42 |         width: elm.width + 'px',
 43 |         top: elm.top + elm.height + 'px',
 44 |         left: elm.left + 'px'
 45 |       }"
 46 |       class="horiz"
 47 |       @mousedown="handlemousedown($event, 'down', 'height')">
 48 |       <div class="square"/>
 49 |     </div>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | import vpd from '../../mixins/vpd'
 55 | export default {
 56 |   mixins: [vpd],
 57 |   data () {
 58 |     return {
 59 |       type: '' // 调整方向 left | right | up | down
 60 |     }
 61 |   },
 62 |   computed: {
 63 |     elm () {
 64 |       var target = this.$vpd.state.activeElement
 65 | 
 66 |       if (!target.resizable || target.belong !== 'page') return ''
 67 | 
 68 |       return target
 69 |     }
 70 |   },
 71 | 
 72 |   methods: {
 73 |     handlemousedown (e, type, originX, originY) {
 74 |       e.stopPropagation()
 75 |       this.type = type
 76 |       this.$vpd.commit('initmove', {
 77 |         startX: e.pageX,
 78 |         startY: e.pageY,
 79 |         originX: this.elm[originX],
 80 |         originY: this.elm[originY]
 81 |       })
 82 | 
 83 |       document.addEventListener('mousemove', this.handlemousemove, true)
 84 |       document.addEventListener('mouseup', this.handlemouseup, true)
 85 |     },
 86 | 
 87 |     handlemousemove (e) {
 88 |       e.stopPropagation()
 89 |       e.preventDefault()
 90 | 
 91 |       this.$vpd.commit('resize', {
 92 |         x: e.pageX,
 93 |         y: e.pageY,
 94 |         type: this.type
 95 |       })
 96 |     },
 97 | 
 98 |     handlemouseup () {
 99 |       document.removeEventListener('mousemove', this.handlemousemove, true)
100 |       document.removeEventListener('mouseup', this.handlemouseup, true)
101 |       this.$vpd.commit('stopmove')
102 |     }
103 |   }
104 | }
105 | </script>
106 | 
107 | <style scoped>
108 | .verti,
109 | .horiz {
110 |   position: absolute;
111 |   z-index: 999;
112 |   display: flex;
113 |   justify-content: center;
114 |   align-items: center;
115 | }
116 | .verti {
117 |   width: 0;
118 |   cursor: ew-resize;
119 | }
120 | .horiz {
121 |   height: 0;
122 |   cursor: ns-resize;
123 | }
124 | .square {
125 |   width: 10px;
126 |   height: 10px;
127 |   border: 1px solid #2196f3;
128 |   background-color: #fff;
129 |   flex-shrink: 0;
130 | }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-page-designer",
 3 |   "version": "1.1.1",
 4 |   "description": "A vue component for drag-and-drop to design and build mobile website.",
 5 |   "repository": {
 6 |     "url": "fireyy/vue-page-designer",
 7 |     "type": "git"
 8 |   },
 9 |   "module": "dist/vue-page-designer.esm.js",
10 |   "unpkg": "dist/vue-page-designer.min.js",
11 |   "main": "dist/vue-page-designer.js",
12 |   "style": "dist/vue-page-designer.css",
13 |   "license": "WTFPL",
14 |   "files": [
15 |     "dist/*.js",
16 |     "dist/*.css"
17 |   ],
18 |   "scripts": {
19 |     "bump": "standard-version",
20 |     "test": "npm run unit",
21 |     "lint": "eslint --ext .js,.vue ./src ./example --fix",
22 |     "icon": "node scripts/icon.js",
23 |     "build": "cross-env NODE_ENV=production node scripts/build.js",
24 |     "dev": "webpack-dev-server --hot --inline --config ./example/webpack.config.js",
25 |     "start": "npm run dev",
26 |     "build:example": "cross-env NODE_ENV=production webpack --config ./example/webpack.config.js",
27 |     "gh": "gh-pages -d example/dist",
28 |     "deploy": "npm run build:example && npm run gh",
29 |     "release": "npm run build && npm run bump && git push --follow-tags origin master && npm publish"
30 |   },
31 |   "author": "fireyy <fireyy@gmail.com>",
32 |   "dependencies": {
33 |     "nanoid": "^1.0.1",
34 |     "spectre.css": "^0.5.0",
35 |     "vue": "^2.5.22",
36 |     "vue-page-designer-widgets": "^0.1.4",
37 |     "vue-server-renderer": "^2.5.17"
38 |   },
39 |   "devDependencies": {
40 |     "@babel/core": "^7.0.0-rc.1",
41 |     "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
42 |     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-rc.1",
43 |     "@babel/preset-env": "^7.0.0-rc.1",
44 |     "babel-loader": "^8.0.0-beta",
45 |     "chalk": "^2.0.1",
46 |     "clean-webpack-plugin": "^0.1.19",
47 |     "copy-webpack-plugin": "^4.0.1",
48 |     "cross-env": "^5.2.0",
49 |     "css-loader": "^1.0.0",
50 |     "eslint": "^5.3.0",
51 |     "eslint-config-standard": "^11.0.0",
52 |     "eslint-loader": "^2.1.0",
53 |     "eslint-plugin-import": "^2.7.0",
54 |     "eslint-plugin-node": "^7.0.1",
55 |     "eslint-plugin-promise": "^3.5.0",
56 |     "eslint-plugin-standard": "^3.0.1",
57 |     "eslint-plugin-vue": "^4.7.1",
58 |     "feather-icons": "^4.5.0",
59 |     "file-loader": "^1.1.11",
60 |     "filesize": "^3.6.1",
61 |     "friendly-errors-webpack-plugin": "^1.6.1",
62 |     "gh-pages": "^1.0.0",
63 |     "gzip-size": "^5.0.0",
64 |     "html-webpack-plugin": "^4.0.0-alpha",
65 |     "mini-css-extract-plugin": "^0.4.4",
66 |     "mkdirp": "^0.5.1",
67 |     "node-sass": "^4.12.0",
68 |     "progress-bar-webpack-plugin": "^1.10.0",
69 |     "rollup": "^0.64.1",
70 |     "rollup-plugin-buble": "^0.19.2",
71 |     "rollup-plugin-commonjs": "^9.1.5",
72 |     "rollup-plugin-node-resolve": "^3.0.0",
73 |     "rollup-plugin-postcss": "^1.6.3",
74 |     "rollup-plugin-replace": "^2.0.0",
75 |     "rollup-plugin-uglify": "^4.0.0",
76 |     "rollup-plugin-vue": "^4.3.2",
77 |     "sass-loader": "^6.0.6",
78 |     "standard-version": "^4.2.0",
79 |     "style-loader": "^0.22.1",
80 |     "terser": "^3.16.1",
81 |     "util": "^0.11.0",
82 |     "vue-loader": "^15.3.0",
83 |     "vue-template-compiler": "^2.5.17",
84 |     "webpack": "^4.29.0",
85 |     "webpack-cli": "^3.1.0",
86 |     "webpack-dev-server": "^3.1.14"
87 |   },
88 |   "engines": {
89 |     "node": ">= 4.0.0",
90 |     "npm": ">= 3.0.0"
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-page-designer
  2 | 
  3 | <p align="center">
  4 |   <a href="https://fireyy.github.io/vue-page-designer/" target="_blank">
  5 |     <img src="screen.png" width="700px">
  6 |     <br>
  7 |     Live Demo
  8 |   </a>
  9 | </p>
 10 | 
 11 | A drag-and-drop mobile website builder base on Vue.
 12 | 
 13 | ## Install
 14 | 
 15 | ```bash
 16 | yarn add vue-page-designer
 17 | ```
 18 | 
 19 | You can start it quickly, in main.js:
 20 | 
 21 | ```js
 22 | import Vue from 'vue';
 23 | import vuePageDesigner from 'vue-page-designer'
 24 | import 'vue-page-designer/dist/vue-page-designer.css'
 25 | import App from './App.vue';
 26 | 
 27 | Vue.use(vuePageDesigner);
 28 | 
 29 | new Vue({
 30 |   el: '#app',
 31 |   render: h => h(App)
 32 | });
 33 | ```
 34 | 
 35 | Next, use it:
 36 | 
 37 | ```html
 38 | <template>
 39 |   <div id="app">
 40 |     <vue-page-designer />
 41 |   </div>
 42 | </template>
 43 | 
 44 | <style>
 45 | #app {
 46 |   height: 100%;
 47 | }
 48 | </style>
 49 | ```
 50 | 
 51 | A [example](https://fireyy.github.io/vue-page-designer/) ▶️, and [source](./example/). Also a [custom widget source](./example/widgets)
 52 | 
 53 | # Options
 54 | 
 55 | You can add custom components, save callback.
 56 | 
 57 | | Props | Type | Description |
 58 | | -------- | -------- | -------- |
 59 | | value | `Object` | Editor initial value, you can pass the value of the save callback and resume the draft |
 60 | | locale | `String` | Editor default locale. Now support 'cn' and 'en', default 'cn'. |
 61 | | widgets | `Object` | Vue Components. Custom components for editor. see [Example](https://github.com/fireyy/vue-page-designer-widgets/blob/master/src/index.js) |
 62 | | save | `(data) => void` | When you click the Save button, feed back to you to save the data |
 63 | | upload | `(files) => Promise` | Editor upload function, allowing you to implement your own upload-file's request |
 64 | 
 65 | ## Parameter: `value`
 66 | 
 67 | The `value` came from `save`.
 68 | 
 69 | ```html
 70 | <template>
 71 |   <div id="app">
 72 |     <vue-page-designer :value="value" />
 73 |   </div>
 74 | </template>
 75 | ```
 76 | 
 77 | ## Parameter: `widgets`
 78 | 
 79 | You can install default widget in `vue-page-designer-widgets`
 80 | 
 81 | ```bash
 82 | yarn add vue-page-designer-widgets
 83 | ```
 84 | 
 85 | Import and use it
 86 | 
 87 | ```html
 88 | <template>
 89 |   <div id="app">
 90 |     <vue-page-designer :widgets="widgets" />
 91 |   </div>
 92 | </template>
 93 | <script>
 94 | import widgets from './widgets'
 95 | 
 96 | export default {
 97 |   data () {
 98 |     return {
 99 |       widgets
100 |     }
101 |   }
102 | }
103 | </script>
104 | ```
105 | 
106 | Set locale to EN
107 | 
108 | ```html
109 | <template>
110 |   <div id="app">
111 |     <vue-page-designer locale="en" />
112 |   </div>
113 | </template>
114 | ```
115 | 
116 | ## Parameter: `save`
117 | 
118 | ```html
119 | <template>
120 |   <div id="app">
121 |     <vue-page-designer @save="(data) => { console.log('send the value data to your server', data) }" />
122 |   </div>
123 | </template>
124 | ```
125 | 
126 | ## Parameter: `upload`
127 | 
128 | ```html
129 | <template>
130 |   <div id="app">
131 |     <vue-page-designer :upload="upload" />
132 |   </div>
133 | </template>
134 | <script>
135 | export default {
136 |   methods: {
137 |     upload (files) {
138 |       return yourApiUpload(files).then(res => {
139 |         return res.data
140 |       }).catch(err => {
141 |         console.log(err)
142 |       })
143 |     }
144 |   }
145 | }
146 | </script>
147 | ```
148 | 


--------------------------------------------------------------------------------
/src/plugins/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | 
  3 | function resolveSource (source, type) {
  4 |   return typeof type === 'function' ? type : source[type]
  5 | }
  6 | 
  7 | function normalizeMap (map) {
  8 |   return Array.isArray(map)
  9 |     ? map.map(k => ({ k, v: k }))
 10 |     : Object.keys(map).map(k => ({ k, v: map[k] }))
 11 | }
 12 | 
 13 | const createMapState = _store => states => {
 14 |   const res = {}
 15 |   const db = normalizeMap(states)
 16 |   for (const k in db) {
 17 |     let v = db[k]
 18 |     res[k] = function () {
 19 |       const store = _store || this.$vpd
 20 |       return typeof v === 'function'
 21 |         ? v.call(this, store.state)
 22 |         : store.state[v]
 23 |     }
 24 |   }
 25 |   return res
 26 | }
 27 | 
 28 | const mapToMethods = (sourceName, runnerName, _store) => map => {
 29 |   const res = {}
 30 |   const db = normalizeMap(map)
 31 |   for (const k in db) {
 32 |     let v = db[k]
 33 |     res[k] = function (payload) {
 34 |       const store = _store || this.$vpd
 35 |       const source = store[sourceName]
 36 |       const runner = store[runnerName]
 37 |       const actualSource = typeof v === 'function' ? v.call(this, source) : v
 38 |       return runner.call(store, actualSource, payload)
 39 |     }
 40 |   }
 41 |   return res
 42 | }
 43 | 
 44 | export default class Store {
 45 |   constructor (
 46 |     { state, mutations = {}, actions = {}, plugins, subscribers = [] } = {}
 47 |   ) {
 48 |     this.vm = new Vue({
 49 |       data: {
 50 |         $$state: typeof state === 'function' ? state() : state
 51 |       }
 52 |     })
 53 |     this.mutations = mutations
 54 |     this.actions = actions
 55 |     this.subscribers = subscribers
 56 | 
 57 |     if (plugins) {
 58 |       plugins.forEach(p => this.use(p))
 59 |     }
 60 | 
 61 |     this.mapState = createMapState(this)
 62 |     this.mapActions = mapToMethods('actions', 'dispatch', this)
 63 |     this.mapMutations = mapToMethods('mutations', 'commit', this)
 64 |   }
 65 | 
 66 |   get state () {
 67 |     return this.vm.$data.$$state
 68 |   }
 69 | 
 70 |   set state (v) {
 71 |     if (process.env.NODE_ENV === 'development') {
 72 |       throw new Error(
 73 |         '[puex] store.state is read-only, use store.replaceState(state) instead'
 74 |       )
 75 |     }
 76 |   }
 77 | 
 78 |   $emit (event, ...args) {
 79 |     return this.vm.$emit(event, ...args)
 80 |   }
 81 | 
 82 |   $on (event, callback) {
 83 |     return this.vm.$on(event, callback)
 84 |   }
 85 | 
 86 |   subscribe (sub) {
 87 |     this.subscribers.push(sub)
 88 |     return () => this.subscribers.splice(this.subscribers.indexOf(sub), 1)
 89 |   }
 90 | 
 91 |   commit (type, payload) {
 92 |     this.subscribers.forEach(sub => sub({ type, payload }, this.state))
 93 |     const mutation = resolveSource(this.mutations, type)
 94 |     return mutation && mutation(this.state, payload)
 95 |   }
 96 | 
 97 |   dispatch (type, payload) {
 98 |     const action = resolveSource(this.actions, type)
 99 |     const ctx = {
100 |       state: this.state,
101 |       dispatch: this.dispatch.bind(this),
102 |       commit: this.commit.bind(this),
103 |       store: this
104 |     }
105 |     return Promise.resolve(action && action(ctx, payload))
106 |   }
107 | 
108 |   use (fn) {
109 |     fn(this)
110 |     return this
111 |   }
112 | 
113 |   replaceState (state) {
114 |     this.vm.$data.$$state = state
115 |     return this
116 |   }
117 | }
118 | 
119 | export const mapState = createMapState()
120 | export const mapActions = mapToMethods('actions', 'dispatch')
121 | export const mapMutations = mapToMethods('mutations', 'commit')
122 | 


--------------------------------------------------------------------------------
/src/components/navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="header">
  3 |     <div class="navbar container grid-xl">
  4 |       <section class="logo navbar-section">
  5 |         <vpd-icon name="anchor" />
  6 |       </section>
  7 |       <section class="navbar-section">
  8 |         <a
  9 |           class="btn btn-link tooltip tooltip-bottom"
 10 |           data-tooltip="复制元件 Ctrl + C"
 11 |           @click="copyWidget">
 12 |           <vpd-icon name="copy" /> {{ $t('data.actions.copy') }}
 13 |         </a>
 14 |         <a
 15 |           class="btn btn-link tooltip tooltip-bottom"
 16 |           data-tooltip="删除元件 Delete"
 17 |           @click="dele">
 18 |           <vpd-icon name="trash-2" /> {{ $t('data.actions.delete') }}
 19 |         </a>
 20 |         <a
 21 |           class="btn btn-link tooltip tooltip-bottom"
 22 |           data-tooltip="保存 Ctrl + S"
 23 |           @click="save"><vpd-icon name="save" /> {{ $t('data.actions.save') }}</a>
 24 |         <select
 25 |           class="lang-change"
 26 |           @change="changeLang">
 27 |           <option
 28 |             v-for="(lang, i) in langs"
 29 |             :selected="lang === $inter.currentLocale ? 'selected' : ''"
 30 |             :key="`Lang${i}`"
 31 |             :value="lang">{{ lang }}</option>
 32 |         </select>
 33 |       </section>
 34 |     </div>
 35 |   </header>
 36 | </template>
 37 | 
 38 | <script>
 39 | import vpd from '../mixins/vpd'
 40 | export default {
 41 |   mixins: [vpd],
 42 |   data () {
 43 |     return {
 44 |       langs: this.$inter.availableLocales
 45 |     }
 46 |   },
 47 |   computed: {
 48 |     show () {
 49 |       return this.$vpd.state.type !== 'page'
 50 |     }
 51 |   },
 52 |   mounted () {
 53 |     // Ctrl + C 复制元件
 54 |     document.addEventListener(
 55 |       'keyup',
 56 |       e => {
 57 |         e.stopPropagation()
 58 |         if ((e.ctrlKey || e.metaKey) && e.keyCode === 67) {
 59 |           this.copyWidget()
 60 |         }
 61 |       },
 62 |       true
 63 |     )
 64 | 
 65 |     // Delete 删除选中元件
 66 |     document.addEventListener(
 67 |       'keyup',
 68 |       e => {
 69 |         e.stopPropagation()
 70 |         if (e.keyCode === 46) {
 71 |           this.dele()
 72 |         }
 73 |       },
 74 |       true
 75 |     )
 76 | 
 77 |     // Ctrl + S 保存
 78 |     document.addEventListener(
 79 |       'keyup',
 80 |       e => {
 81 |         e.stopPropagation()
 82 |         if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) {
 83 |           this.save()
 84 |         }
 85 |       },
 86 |       true
 87 |     )
 88 |   },
 89 | 
 90 |   methods: {
 91 |     // 保存
 92 |     save () {
 93 |       this.$vpd.dispatch('save')
 94 |     },
 95 | 
 96 |     // 复制元件
 97 |     copyWidget () {
 98 |       this.$vpd.commit('copy')
 99 |     },
100 | 
101 |     // 删除元件
102 |     dele () {
103 |       this.$vpd.commit('delete')
104 |     },
105 | 
106 |     // 切换语言
107 |     changeLang (e) {
108 |       this.$inter.setCurrentLocale(e.target.value)
109 |     }
110 |   }
111 | }
112 | </script>
113 | 
114 | <style lang="scss">
115 | @import '../_variables.scss';
116 | .header {
117 |   background-color: #24292e;
118 |   padding: 12px 0;
119 | }
120 | .navbar {
121 |   .svg-icon {
122 |     svg {
123 |       vertical-align: middle;
124 |     }
125 |   }
126 |   .btn.btn-link {
127 |     color: $gray-color;
128 |     margin-right: 15px;
129 |   }
130 |   .btn.btn-link:hover {
131 |     color: $light-color;
132 |   }
133 |   .logo {
134 |     font-size: 20px;
135 |     .svg-icon {
136 |       width: 30px;
137 |       text-align: center;
138 |       background-color: $light-color;
139 |       border-radius: 50%;
140 |     }
141 |   }
142 |   .lang-change {
143 |     width: 80px;
144 |   }
145 | }
146 | </style>
147 | 


--------------------------------------------------------------------------------
/src/components/panel/style.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="!activeElement.page && tab === 1"
  4 |     class="panel-wrap">
  5 |     <!-- 公共属性 -->
  6 |     <div class="panel-row">
  7 |       <vpd-icon name="layers" />
  8 |       <div class="panel-label">{{ $t('data.levels') }}</div>
  9 |       <div class="panel-value">{{ activeElement.z }}</div>
 10 |       <div class="panel-slider-wrap">
 11 |         <vpd-slider
 12 |           v-model="activeElement.z"
 13 |           :step="1"
 14 |           :max="20" />
 15 |       </div>
 16 |     </div>
 17 | 
 18 |     <div class="panel-row">
 19 |       <vpd-icon name="more-horizontal" />
 20 |       <div class="panel-label">{{ $t('data.names.width') }}</div>
 21 |       <div class="panel-value">{{ activeElement.width }}</div>
 22 |       <div class="panel-slider-wrap">
 23 |         <vpd-slider
 24 |           v-model="activeElement.width"
 25 |           :step="1"
 26 |           :max="750" />
 27 |       </div>
 28 |     </div>
 29 | 
 30 |     <div class="panel-row">
 31 |       <vpd-icon name="more-vertical" />
 32 |       <div class="panel-label">{{ $t('data.names.height') }}</div>
 33 |       <div class="panel-value">{{ activeElement.height }}</div>
 34 |       <div class="panel-slider-wrap">
 35 |         <vpd-slider
 36 |           v-model="activeElement.height"
 37 |           :step="1"
 38 |           :max="height" />
 39 |       </div>
 40 |     </div>
 41 | 
 42 |     <div class="panel-row">
 43 |       <vpd-icon name="arrow-right" />
 44 |       <div class="panel-label">{{ $t('data.names.left') }}</div>
 45 |       <div class="panel-value">{{ activeElement.left }}</div>
 46 |       <div class="panel-slider-wrap">
 47 |         <vpd-slider
 48 |           v-model="activeElement.left"
 49 |           :step="1"
 50 |           :max="750" />
 51 |       </div>
 52 |     </div>
 53 | 
 54 |     <div class="panel-row">
 55 |       <vpd-icon name="arrow-down" />
 56 |       <div class="panel-label">{{ $t('data.names.top') }}</div>
 57 |       <div class="panel-value">{{ activeElement.top }}</div>
 58 |       <div class="panel-slider-wrap">
 59 |         <vpd-slider
 60 |           v-model="activeElement.top"
 61 |           :step="1"
 62 |           :max="height" />
 63 |       </div>
 64 |     </div>
 65 | 
 66 |     <!-- 组件样式 -->
 67 |     <component
 68 |       v-for="(item, i) in widgetStyle"
 69 |       v-if="item.type === activeElement.type"
 70 |       :is="widgetStyle[i]"
 71 |       :key="i"
 72 |       :active-element="activeElement" />
 73 | 
 74 |     <!-- 添加到容器 -->
 75 |     <div v-if="activeElement.isChild">
 76 |       <hr>
 77 |       <div class="panel-row">
 78 |         <vpd-icon name="layout" />
 79 |         <div class="panel-label">{{ $t('data.names.belonging') }}</div>
 80 |         <div class="panel-value">
 81 |           <select v-model="activeElement.belong">
 82 |             <option>page</option>
 83 |             <option
 84 |               v-for="(val, index) in containerName"
 85 |               :key="index">{{ val }}</option>
 86 |           </select>
 87 |         </div>
 88 |       </div>
 89 |     </div>
 90 |   </div>
 91 | </template>
 92 | 
 93 | <script>
 94 | import widget from '../../plugins/widget'
 95 | import vpd from '../../mixins/vpd'
 96 | 
 97 | export default {
 98 |   name: 'PanelStyle',
 99 |   mixins: [vpd],
100 |   props: ['activeElement', 'tab'],
101 |   data () {
102 |     return {}
103 |   },
104 | 
105 |   computed: {
106 |     widgetStyle () {
107 |       return widget.getWidgetStyle()
108 |     },
109 |     // 页面高度
110 |     height () {
111 |       return this.$vpd.state.page.height
112 |     },
113 | 
114 |     // 容器名称
115 |     containerName () {
116 |       var arr = []
117 |       this.$vpd.state.widgets.map(
118 |         val => val.isContainer && val.name && arr.push(val.name)
119 |       )
120 | 
121 |       return arr
122 |     }
123 |   }
124 | }
125 | </script>
126 | 


--------------------------------------------------------------------------------
/src/components/toolbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="menu-bar">
  3 |     <details open>
  4 |       <summary><vpd-icon name="list" />{{ $t('data.components') }}</summary>
  5 |       <ul
  6 |         class="widget-list columns"
  7 |         @mousedown="updateSrollTop">
  8 |         <li
  9 |           v-for="item in widgets"
 10 |           :key="item.name"
 11 |           class="menu-item column col-6"
 12 |           @click="(e) => {addWidget(e, item)}">
 13 |           <vpd-icon
 14 |             :svg="item.icon"
 15 |             :title="item.title" />
 16 |           <span class="menu-caption">{{ item.title }}</span>
 17 |         </li>
 18 |       </ul>
 19 |     </details>
 20 |     <details>
 21 |       <summary><vpd-icon name="layers" />{{ $t('data.added_components') }}</summary>
 22 |       <ul class="layer-list">
 23 |         <li
 24 |           v-for="layer in layers"
 25 |           :class="{'layer-active': layer === activeElement}"
 26 |           :key="layer.uuid"
 27 |           @click="(e) => {activeLayer(e, layer)}">{{ getWidgetTitle(layer.type) }}</li>
 28 |       </ul>
 29 |     </details>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import widget from '../plugins/widget'
 35 | import { move } from '../mixins'
 36 | import { cumulativeOffset, checkInView } from '../utils/offset'
 37 | import vpd from '../mixins/vpd'
 38 | 
 39 | export default {
 40 |   mixins: [move, vpd],
 41 |   props: ['zoom'],
 42 |   data () {
 43 |     return {}
 44 |   },
 45 |   computed: {
 46 |     widgets () {
 47 |       return widget.getWidgets()
 48 |     },
 49 |     layers () {
 50 |       return this.$vpd.state.widgets
 51 |     },
 52 |     activeElement () {
 53 |       return this.$vpd.state.activeElement
 54 |     }
 55 |   },
 56 |   methods: {
 57 |     // 添加组件
 58 |     addWidget (e, item) {
 59 |       this.$vpd.dispatch('addWidget', item)
 60 |     },
 61 | 
 62 |     // 为确保添加的元件出现在可视区内，用画布向上滚动距离作为元件初始 top 值
 63 |     updateSrollTop () {
 64 |       var top = document.getElementById('viewport').scrollTop / this.zoom * 100
 65 |       this.$vpd.commit('updateSrollTop', top)
 66 |     },
 67 | 
 68 |     activeLayer (e, item) {
 69 |       this.$vpd.commit('select', {
 70 |         uuid: item.uuid
 71 |       })
 72 |       let viewport = document.querySelector('#viewport')
 73 |       let target = viewport.querySelector(`[data-uuid='${item.uuid}']`)
 74 |       if (target && !checkInView(target)) {
 75 |         viewport.scrollTop = (cumulativeOffset(target).top - 50) * this.zoom / 100
 76 |       }
 77 |     },
 78 | 
 79 |     getWidgetTitle (type) {
 80 |       return this.widgets[type].title || ''
 81 |     }
 82 |   }
 83 | }
 84 | </script>
 85 | 
 86 | <style lang="scss">
 87 | @import '../_variables.scss';
 88 | .menu-bar {
 89 |   ul {
 90 |     list-style: none;
 91 |     margin: 0;
 92 |   }
 93 |   details {
 94 |     padding: 10px;
 95 |   }
 96 |   summary {
 97 |     padding: 5px 0;
 98 |     text-overflow: ellipsis;
 99 |     white-space: nowrap;
100 |     overflow: hidden;
101 |     border-bottom: 1px solid #f5f5f5;
102 |     .svg-icon {
103 |       margin-right: 5px;
104 |     }
105 |   }
106 | }
107 | .widget-list {
108 |   padding: 0;
109 | }
110 | .menu-item {
111 |   text-align: center;
112 |   cursor: pointer;
113 |   padding: 15px 0 8px;
114 |   transition: all 0.2s;
115 |   position: relative;
116 |   &:hover {
117 |     transform: scale(1.2);
118 |   }
119 |   .svg-icon {
120 |     font-size: 24px;
121 |   }
122 |   .menu-caption {
123 |     display: block;
124 |     font-size: 12px;
125 |     width: 100%;
126 |   }
127 | }
128 | .layer-list {
129 |   padding: 10px;
130 |   li {
131 |     text-align: left;
132 |     cursor: pointer;
133 |     white-space: nowrap;
134 |     line-height: 24px;
135 |     padding-left: 5px;
136 |     &:hover {
137 |       background: #f5f5f5;
138 |     }
139 |     &::before {
140 |       content: '› ';
141 |     }
142 |     &.layer-active {
143 |       color: $light-color;
144 |       background: $primary-color;
145 |     }
146 |   }
147 | }
148 | </style>
149 | 


--------------------------------------------------------------------------------
/src/components/uploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <input
  3 |     id="uploader"
  4 |     :multiple="multiple ? 'multiple' : false"
  5 |     type="file"
  6 |     accept="image/png, image/jpeg, image/gif"
  7 |     style="display: none"
  8 |     @change="handleUpload">
  9 | </template>
 10 | 
 11 | <script>
 12 | import vpd from '../mixins/vpd'
 13 | export default {
 14 |   name: 'VpdUploader',
 15 |   mixins: [vpd],
 16 |   props: {
 17 |     upload: Function,
 18 |     uploadOption: Object
 19 |   },
 20 |   data () {
 21 |     return {
 22 |       multiple: false, // 是否允许上传多张
 23 |       uploader: null, // input file
 24 |       cb: null // 回调函数
 25 |     }
 26 |   },
 27 | 
 28 |   computed: {
 29 |     // 图片初始位置纵坐标
 30 |     top () {
 31 |       return this.$vpd.state.top
 32 |     }
 33 |   },
 34 | 
 35 |   mounted () {
 36 |     this.uploader = document.getElementById('uploader')
 37 | 
 38 |     /**
 39 |      * 在全局通信中介上注册上传图片自定义事件
 40 |      * 所有需要上传图片的地方均可调用
 41 |      *
 42 |      * 调用方法：
 43 |      * this.$vpd.$emit('upload', function (payload) {/.../})
 44 |      * @param payload { Array } 图片上传、下载完成后的一个包含所有图片对象的数组
 45 |      * @param multiple { Boolean } 是否上传多张，默认为 false
 46 |      */
 47 |     this.$vpd.$on('upload', (cb, multiple) => {
 48 |       this.multiple = !!multiple
 49 |       this.cb = cb
 50 |       setTimeout(() => {
 51 |         this.uploader.click()
 52 |       }, 0)
 53 |     })
 54 |   },
 55 | 
 56 |   methods: {
 57 |     // 处理添加图片操作，触发事件：change
 58 |     handleUpload () {
 59 |       var files = this.uploader.files
 60 | 
 61 |       if (!files || files.length === 0) return
 62 | 
 63 |       files = Array.prototype.slice.call(this.uploader.files)
 64 | 
 65 |       let uploadFn = this.upload || this.defaultUpload
 66 | 
 67 |       uploadFn(files).then(res => {
 68 |         console.log('status: ', res.status)
 69 |         // 图片下载队列完成后执行回调
 70 |         new Promise(resolve => {
 71 |           this.handleLoadQueue(resolve, res.files)()
 72 |         }).then(payload => {
 73 |           this.cb(payload)
 74 |         })
 75 |       })
 76 |     },
 77 | 
 78 |     defaultUpload (files) {
 79 |       if (this.uploadOption.url) {
 80 |         var data = new FormData()
 81 |         files.forEach(file => data.append('file[]', file))
 82 | 
 83 |         return fetch(this.uploadOption.url, {
 84 |           method: 'POST',
 85 |           body: data
 86 |         })
 87 |       } else {
 88 |         alert(this.$t('messages.alerts.imageUploadApiConfigurator'))
 89 |       }
 90 |     },
 91 | 
 92 |     /**
 93 |      * 处理下载队列
 94 |      * 图片按顺序下载完一张再下载下一张，以确保图片数组按上传的顺序排列
 95 |      */
 96 |     handleLoadQueue (resolve, files) {
 97 |       var i = 0
 98 |       var len = files.length
 99 |       var payload = []
100 | 
101 |       var download = () => {
102 |         // 接入后端后，files 应改为回调参数
103 |         // url = files[i]
104 |         var url = window.URL.createObjectURL(files[i])
105 | 
106 |         new Promise(resolve => {
107 |           this.getImageWidth(url, resolve)
108 |         }).then(size => {
109 |           payload.push({
110 |             width: size.w,
111 |             height: size.h,
112 |             top: this.top,
113 |             url: url, // 图片预览地址
114 |             src: 'images/' + files[i].name // 图片实际地址
115 |           })
116 | 
117 |           // 所有图片下载完毕，跳到下一步，否则继续下载
118 |           if (++i === len) {
119 |             resolve(payload)
120 |           } else {
121 |             download()
122 |           }
123 |         })
124 |       }
125 | 
126 |       return download
127 |     },
128 | 
129 |     /**
130 |      * 使用 new Image 预加载的方式获取图片宽高
131 |      * 这是一个异步操作，须采用 promise
132 |      *
133 |      * @param url { URL | base64 } 图片 url
134 |      * @param res { Promise resolve }
135 |      *
136 |      * @return { Object } 包含图片宽高的对象
137 |      */
138 |     getImageWidth (url, res) {
139 |       var img = new Image()
140 |       img.src = url
141 |       img.onload = function () {
142 |         res({
143 |           w: Math.round(img.width),
144 |           h: Math.round(img.height)
145 |         })
146 |       }
147 |     }
148 |   }
149 | }
150 | </script>
151 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app">
  3 |     <navbar/>
  4 |     <div class="body container grid-xl">
  5 |       <div class="columns col-gapless">
  6 |         <toolbar
  7 |           :zoom="zoom"
  8 |           class="toolbar column"/>
  9 |         <div class="viewport column">
 10 |           <viewport :zoom="zoom"/>
 11 |           <div class="zoom-wrap">
 12 |             <vpd-slider
 13 |               :value="zoom"
 14 |               :step="1"
 15 |               :tuning="false"
 16 |               @input="dozoom" />
 17 |             <div class="zoom-value">{{ zoom }}%</div>
 18 |           </div>
 19 |         </div>
 20 |         <panel class="control-panel column"/>
 21 |       </div>
 22 |     </div>
 23 |     <vpd-uploader
 24 |       :upload="upload"
 25 |       :upload-option="uploadOption"/>
 26 |     <vpd-toast/>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import Vue from 'vue'
 32 | import widget from './plugins/widget'
 33 | import navbar from './components/navbar.vue'
 34 | import toolbar from './components/toolbar.vue'
 35 | import panel from './components/panel/index.vue'
 36 | import viewport from './components/viewport/index.vue'
 37 | import loadSprite from './utils/load-sprite'
 38 | import vpd from './mixins/vpd'
 39 | import toast from './components/toast.vue'
 40 | import uploader from './components/uploader.vue'
 41 | import slider from './components/slider.vue'
 42 | import inter from './plugins/i18n'
 43 | 
 44 | export default {
 45 |   name: 'VuePageDesigner',
 46 |   inter,
 47 |   components: {
 48 |     navbar, // 顶部导航栏
 49 |     toolbar, // 左侧菜单栏
 50 |     panel, // 右侧参数面板
 51 |     viewport, // 页面画布
 52 |     [toast.name]: toast, // 提示组件
 53 |     [uploader.name]: uploader, // 上传组件
 54 |     [slider.name]: slider
 55 |   },
 56 |   mixins: [vpd],
 57 |   props: {
 58 |     value: Object,
 59 |     locale: {
 60 |       type: String,
 61 |       default: 'cn'
 62 |     },
 63 |     widgets: Object,
 64 |     upload: Function,
 65 |     uploadOption: Object
 66 |   },
 67 | 
 68 |   computed: {
 69 |     zoom () {
 70 |       return this.$vpd.state.zoom
 71 |     }
 72 |   },
 73 |   beforeCreate () {
 74 |     // TODO: custom svg path by config
 75 |     loadSprite('//unpkg.com/vue-page-designer@0.7.1/dist/icons.svg', 'svgspriteit')
 76 |   },
 77 |   created () {
 78 |     // 默认语言切换
 79 |     inter.setCurrentLocale(this.locale)
 80 |     // 注册 widgets
 81 |     Vue.use(widget, {
 82 |       widgets: this.widgets
 83 |     })
 84 |     // 初始化已有数据
 85 |     if (this.value) {
 86 |       this.$vpd.replaceState(this.value)
 87 |     }
 88 |     this.$vpd.$on('save', () => {
 89 |       this.$emit('save', this.$vpd.state)
 90 |     })
 91 |   },
 92 |   mounted () {
 93 |     // 初始化选中元件（将页面作为初始选中元件）
 94 |     this.$vpd.commit('initActive')
 95 |   },
 96 | 
 97 |   methods: {
 98 |     dozoom (val) {
 99 |       this.$vpd.commit('zoom', val)
100 |     }
101 |   }
102 | }
103 | </script>
104 | 
105 | <style lang="scss">
106 | .body {
107 |   width: 100%;
108 |   height: calc(100% - 54px);
109 |   overflow: hidden;
110 |   flex-direction: row;
111 |   &.container {
112 |     padding: 0;
113 |   }
114 | }
115 | .columns {
116 |   height: 100%;
117 | }
118 | .toolbar,
119 | .viewport,
120 | .control-panel {
121 |   height: 100%;
122 | }
123 | .toolbar {
124 |   background: #fff;
125 |   user-select: none;
126 |   box-sizing: content-box;
127 |   &.column {
128 |     flex: none;
129 |     width: 120px;
130 |   }
131 | }
132 | .viewport {
133 |   position: relative;
134 |   overflow: hidden;
135 | }
136 | .control-panel {
137 |   background: #fff;
138 |   user-select: none;
139 |   &.column {
140 |     flex: none;
141 |     width: 400px;
142 |   }
143 | }
144 | .zoom-wrap {
145 |   width: 200px;
146 |   height: 30px;
147 |   position: absolute;
148 |   bottom: 20px;
149 |   right: 20px;
150 |   opacity: 0;
151 |   transition: opacity 0.3s;
152 | }
153 | .viewport:hover .zoom-wrap {
154 |   opacity: 1;
155 | }
156 | .zoom-value {
157 |   position: absolute;
158 |   top: 4px;
159 |   left: -36px;
160 | }
161 | #svgspriteit {
162 |   position: absolute;
163 |   z-index: -1;
164 |   opacity: 0;
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/src/components/viewport/ref-lines.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-show="moving"
  4 |     class="guides">
  5 |     <!-- 横线 -->
  6 |     <div
  7 |       v-for="val in horiz"
  8 |       v-show="attachHoriz(val.val)"
  9 |       :key="val.id"
 10 |       :style="{top: val.val + 'px'}"
 11 |       class="horiz"/>
 12 | 
 13 |     <!-- 竖线 -->
 14 |     <div
 15 |       v-for="val in verti"
 16 |       v-show="attachVerti(val.val)"
 17 |       :key="val.id"
 18 |       :style="{left: val.val + 'px'}"
 19 |       class="verti"/>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import vpd from '../../mixins/vpd'
 25 | 
 26 | export default {
 27 |   name: 'RefLines',
 28 |   mixins: [vpd],
 29 |   computed: {
 30 |     moving () {
 31 |       return this.$vpd.state.moving
 32 |     },
 33 |     guides () {
 34 |       var state = this.$vpd.state
 35 |       var guides = []
 36 |       var uuid = state.uuid
 37 | 
 38 |       state.widgets.forEach(item => {
 39 |         // 排除选中元素
 40 |         if (item.hasGuide && item.uuid === uuid) return
 41 |         // 排除容器中的元件
 42 |         if (item.hasGuide && item.belong !== 'page') return
 43 | 
 44 |         guides.push({
 45 |           uuid: item.uuid,
 46 |           width: item.width,
 47 |           height: item.height,
 48 |           top: item.top,
 49 |           left: item.left
 50 |         })
 51 |       })
 52 | 
 53 |       return guides
 54 |     },
 55 |     /**
 56 |      * 获取参考线
 57 |      *
 58 |      * 取画布中线以及每个元件上下边的坐标
 59 |      * 排除正在移动的元件
 60 |      * 排除画布边缘坐标
 61 |      * 排除重复坐标
 62 |      */
 63 |     horiz () {
 64 |       var guides = this.guides
 65 |       var cor = []
 66 | 
 67 |       guides.forEach(val => {
 68 |         var top = val.top
 69 |         var bottom = top + val.height
 70 | 
 71 |         if (cor.indexOf(top) < 0 && top !== 0) {
 72 |           cor.push({
 73 |             id: `horiz-${val.uuid}-${top}`,
 74 |             val: top
 75 |           })
 76 |         }
 77 |         if (cor.indexOf(bottom) < 0) {
 78 |           cor.push({
 79 |             id: `horiz-${val.uuid}-${bottom}`,
 80 |             val: bottom
 81 |           })
 82 |         }
 83 |       })
 84 | 
 85 |       return cor
 86 |     },
 87 | 
 88 |     verti () {
 89 |       var guides = this.guides
 90 |       var cor = [375]
 91 | 
 92 |       guides.forEach(val => {
 93 |         var left = val.left
 94 |         var right = left + val.width
 95 | 
 96 |         if (cor.indexOf(left) < 0 && left !== 0) {
 97 |           cor.push({
 98 |             id: `verti-${val.uuid}-${left}`,
 99 |             val: left
100 |           })
101 |         }
102 |         if (cor.indexOf(right) < 0 && right < 750) {
103 |           cor.push({
104 |             id: `verti-${val.uuid}-${right}`,
105 |             val: right
106 |           })
107 |         }
108 |       })
109 | 
110 |       return cor
111 |     },
112 | 
113 |     // 移动元素上下边坐标
114 |     horizontal () {
115 |       var a = this.$vpd.state.activeElement
116 |       if (a) {
117 |         var h = Math.round(a.height)
118 |         return [a.top, a.top + h]
119 |       } else {
120 |         return []
121 |       }
122 |     },
123 | 
124 |     // 移动元素左中右坐标
125 |     vertical () {
126 |       var a = this.$vpd.state.activeElement
127 |       if (a) {
128 |         var w = Math.round(a.width / 2)
129 |         return [a.left, a.left + w, a.left + w * 2]
130 |       } else {
131 |         return []
132 |       }
133 |     }
134 |   },
135 |   methods: {
136 |     attachHoriz (value) {
137 |       return this.horizontal.some(val => Math.abs(val - value) <= 1)
138 |     },
139 |     attachVerti (value) {
140 |       return this.vertical.some(val => Math.abs(val - value) <= 1)
141 |     }
142 |   }
143 | }
144 | </script>
145 | 
146 | <style scoped>
147 | .guides {
148 |   width: 100%;
149 |   height: 100%;
150 |   position: fixed;
151 |   z-index: 999;
152 |   top: 0;
153 |   left: 0;
154 | }
155 | .verti {
156 |   position: absolute;
157 |   width: 1px;
158 |   height: 1000%;
159 |   top: -50px;
160 |   background: #18ffff;
161 | }
162 | .horiz {
163 |   position: absolute;
164 |   height: 0.5px;
165 |   width: 1000%;
166 |   left: -500%;
167 |   background: #18ffff;
168 | }
169 | </style>
170 | 


--------------------------------------------------------------------------------
/src/components/viewport/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     id="viewport"
  4 |     class="holder">
  5 |     <div
  6 |       :style="{
  7 |         backgroundColor: backgroundColor,
  8 |         height: height + 'px',
  9 |         transform: 'scale(' + zoom / 100 + ')'
 10 |       }"
 11 |       class="screen"
 12 |       @dblclick="replaceImage">
 13 | 
 14 |       <!-- 组件 -->
 15 |       <component
 16 |         v-for="val in widgetStore"
 17 |         :is="val.type"
 18 |         :data-title="val.type"
 19 |         :class="{'g-active': id === val.uuid}"
 20 |         :key="val.uuid"
 21 |         :val="val"
 22 |         :h="height"
 23 |         :w="750"
 24 |         :data-type="val.type"
 25 |         :data-uuid="val.uuid"
 26 |         :play-state="playState"
 27 |         class="layer">
 28 |         <component
 29 |           v-for="child in getChilds(val.name)"
 30 |           :is="child.type"
 31 |           :data-title="child.type"
 32 |           :class="{'g-active': id === child.uuid}"
 33 |           :key="child.uuid"
 34 |           :val="child"
 35 |           :h="height"
 36 |           :w="750"
 37 |           :data-type="child.type"
 38 |           :data-uuid="child.uuid"
 39 |           :play-state="playState"
 40 |           class="layer layer-child" />
 41 |       </component>
 42 | 
 43 |       <!-- 参考线 -->
 44 |       <ref/>
 45 | 
 46 |       <!-- 尺寸控制器 -->
 47 |       <control/>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import ref from './ref-lines.vue'
 54 | import control from './size-control.vue'
 55 | import { move } from '../../mixins'
 56 | import vpd from '../../mixins/vpd'
 57 | 
 58 | export default {
 59 |   name: 'Viewport',
 60 |   components: {
 61 |     ref: ref, // 参考线
 62 |     control: control // 尺寸控制
 63 |   },
 64 | 
 65 |   mixins: [move, vpd],
 66 | 
 67 |   props: ['zoom'],
 68 | 
 69 |   data () {
 70 |     return {}
 71 |   },
 72 | 
 73 |   computed: {
 74 |     // 已添加的组件
 75 |     widgetStore () {
 76 |       return this.$vpd.state.widgets.filter(item => item.belong === 'page')
 77 |     },
 78 | 
 79 |     // 画布高度
 80 |     height () {
 81 |       return this.$vpd.state.page.height
 82 |     },
 83 | 
 84 |     // 页面背景色
 85 |     backgroundColor () {
 86 |       return this.$vpd.state.page.backgroundColor
 87 |     },
 88 | 
 89 |     // 选中项id
 90 |     id () {
 91 |       // var type = this.$vpd.state.type
 92 |       // var index = this.$vpd.state.index
 93 |       // index = index >= 0 ? index : ''
 94 |       // return type + index
 95 |       return this.$vpd.state.uuid
 96 |     },
 97 | 
 98 |     // 动画播放状态
 99 |     playState () {
100 |       return this.$vpd.state.playState
101 |     }
102 |   },
103 | 
104 |   mounted () {
105 |     // 采用事件代理的方式监听元件的选中操作
106 |     document
107 |       .getElementById('viewport')
108 |       .addEventListener('mousedown', this.handleSelection, false)
109 | 
110 |     // 绑定键盘上下左右键用于元件的移动
111 |     document.addEventListener(
112 |       'keydown',
113 |       e => {
114 |         e.stopPropagation()
115 |         var target = this.$vpd.state.activeElement
116 | 
117 |         // 左
118 |         if (e.keyCode === 37 && target.left) {
119 |           target.left -= 1
120 |           return
121 |         }
122 |         // 上
123 |         if (e.keyCode === 38 && target.top) {
124 |           e.preventDefault()
125 |           target.top -= 1
126 |           return
127 |         }
128 |         // 右
129 |         if (e.keyCode === 39 && target.left) {
130 |           target.left += 1
131 |           return
132 |         }
133 | 
134 |         // 下
135 |         if (e.keyCode === 40 && target.top) {
136 |           e.preventDefault()
137 |           target.top += 1
138 |         }
139 |       },
140 |       true
141 |     )
142 |   },
143 | 
144 |   methods: {
145 |     handleSelection (e) {
146 |       var target = e.target
147 |       var type = target.getAttribute('data-type')
148 | 
149 |       if (type) {
150 |         var uuid = target.getAttribute('data-uuid')
151 | 
152 |         // 设置选中元素
153 |         this.$vpd.commit('select', {
154 |           uuid: uuid || -1
155 |         })
156 | 
157 |         // 绑定移动事件：只有从属于 page 的，除背景图以外的元件才能移动
158 |         target = this.$vpd.state.activeElement
159 |         if (target.belong === 'page' && target.dragable) {
160 |           this.initmovement(e) // 参见 mixins
161 |         }
162 |       } else {
163 |         // 取消选中元素
164 |         this.$vpd.commit('select', {
165 |           uuid: -1
166 |         })
167 |       }
168 |     },
169 | 
170 |     // 替换图片
171 |     replaceImage (e) {
172 |       if (this.$vpd.state.activeElement.isUpload) {
173 |         this.$vpd.$emit('upload', payload => {
174 |           this.$vpd.commit('replaceImage', payload)
175 |         })
176 |       }
177 |     },
178 | 
179 |     // 获取子组件
180 |     getChilds (name) {
181 |       return this.$vpd.state.widgets.filter(
182 |         item => item.belong === name
183 |       )
184 |     }
185 |   }
186 | }
187 | </script>
188 | 
189 | <style scoped>
190 | .holder {
191 |   display: flex;
192 |   justify-content: center;
193 |   height: 100%;
194 |   overflow: auto;
195 |   font-size: 0;
196 |   border: 1px solid #f5f5f5;
197 |   border-width: 0 1px;
198 |   background-image: linear-gradient(
199 |       45deg,
200 |       #f5f5f5 25%,
201 |       transparent 0,
202 |       transparent 75%,
203 |       #f5f5f5 0
204 |     ),
205 |     linear-gradient(
206 |       45deg,
207 |       #f5f5f5 25%,
208 |       transparent 0,
209 |       transparent 75%,
210 |       #f5f5f5 0
211 |     );
212 |   background-position: 0 0, 13px 13px;
213 |   background-size: 26px 26px;
214 | }
215 | .screen {
216 |   width: 750px;
217 |   margin: 25px auto;
218 |   transform-origin: center top;
219 |   position: relative;
220 | }
221 | </style>
222 | 


--------------------------------------------------------------------------------
/src/components/slider.vue:
--------------------------------------------------------------------------------
  1 | <!-- based on muse-ui -->
  2 | <!-- http://www.muse-ui.org/#/slider -->
  3 | <template>
  4 |   <div :class="{'mu-lisder-wrapper': tuning}">
  5 |     <div
  6 |       :class="sliderClass"
  7 |       class="mu-slider"
  8 |       @focus="handleFocus"
  9 |       @blur="handleBlur"
 10 |       @mousedown="handleMouseDown"
 11 |       @mouseup="handleMouseUp">
 12 |       <input
 13 |         :value="inputValue"
 14 |         type="hidden">
 15 |       <div class="mu-slider-track"/>
 16 |       <div
 17 |         :style="fillStyle"
 18 |         class="mu-slider-fill"/>
 19 |       <div
 20 |         :style="thumbStyle"
 21 |         class="mu-slider-thumb"/>
 22 |     </div>
 23 |     <div
 24 |       v-if="tuning"
 25 |       class="mu-increment"
 26 |       @mousedown.stop="increase">+</div>
 27 |     <div
 28 |       v-if="tuning"
 29 |       class="mu-decrement"
 30 |       @mousedown.stop="decrease">-</div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | export default {
 36 |   name: 'VpdSlider',
 37 |   props: {
 38 |     value: {
 39 |       type: [Number, String],
 40 |       default: 0
 41 |     },
 42 |     max: {
 43 |       type: [Number, String],
 44 |       default: 100
 45 |     },
 46 |     min: {
 47 |       type: [Number, String],
 48 |       default: 0
 49 |     },
 50 |     step: {
 51 |       type: Number,
 52 |       default: 0.1
 53 |     },
 54 |     tuning: {
 55 |       type: Boolean,
 56 |       default: true
 57 |     }
 58 |   },
 59 | 
 60 |   data () {
 61 |     return {
 62 |       inputValue: this.value,
 63 |       active: false,
 64 |       focused: false,
 65 |       dragging: false
 66 |     }
 67 |   },
 68 | 
 69 |   computed: {
 70 |     percent () {
 71 |       let percentNum = (this.inputValue - this.min) / (this.max - this.min) * 100
 72 |       return percentNum > 100 ? 100 : percentNum < 0 ? 0 : percentNum
 73 |     },
 74 |     fillStyle () {
 75 |       return {
 76 |         width: this.percent + '%'
 77 |       }
 78 |     },
 79 |     thumbStyle () {
 80 |       return {
 81 |         left: this.percent + '%'
 82 |       }
 83 |     },
 84 |     sliderClass () {
 85 |       return {
 86 |         zero: this.inputValue <= this.min,
 87 |         active: this.active
 88 |       }
 89 |     }
 90 |   },
 91 | 
 92 |   watch: {
 93 |     value (val) {
 94 |       this.inputValue = val
 95 |     },
 96 |     inputValue (val) {
 97 |       this.$emit('input', val)
 98 |     }
 99 |   },
100 | 
101 |   created () {
102 |     this.handleDragMouseMove = this.handleDragMouseMove.bind(this)
103 |     this.handleMouseEnd = this.handleMouseEnd.bind(this)
104 |   },
105 | 
106 |   methods: {
107 |     handleMouseDown (e) {
108 |       this.setValue(e)
109 |       e.preventDefault()
110 |       document.addEventListener('mousemove', this.handleDragMouseMove)
111 |       document.addEventListener('mouseup', this.handleMouseEnd)
112 |       this.$el.focus()
113 |       this.onDragStart(e)
114 |     },
115 | 
116 |     handleMouseUp () {
117 |       this.active = false
118 |     },
119 | 
120 |     handleFocus () {
121 |       this.focused = true
122 |     },
123 | 
124 |     handleBlur () {
125 |       this.focused = false
126 |     },
127 | 
128 |     // 从点击位置更新 value
129 |     setValue (e) {
130 |       const { $el, max, min, step } = this
131 |       let value = (e.clientX - $el.firstElementChild.getBoundingClientRect().left) / $el.firstElementChild.offsetWidth * (max - min)
132 |       value = Math.round(value / step) * step + min
133 |       value = parseFloat(value.toFixed(5))
134 | 
135 |       if (value > max) {
136 |         value = max
137 |       } else if (value < min) {
138 |         value = min
139 |       }
140 |       this.inputValue = value
141 |     },
142 | 
143 |     // 拖拽控制
144 |     onDragStart (e) {
145 |       this.dragging = true
146 |       this.active = true
147 |     },
148 | 
149 |     onDragUpdate (e) {
150 |       if (this.dragRunning) return
151 |       this.dragRunning = true
152 |       window.requestAnimationFrame(() => {
153 |         this.dragRunning = false
154 |         if (!this.disabled) this.setValue(e)
155 |       })
156 |     },
157 | 
158 |     onDragStop (e) {
159 |       this.dragging = false
160 |       this.active = false
161 |     },
162 | 
163 |     handleDragMouseMove (e) {
164 |       this.onDragUpdate(e)
165 |     },
166 | 
167 |     handleMouseEnd (e) {
168 |       document.removeEventListener('mousemove', this.handleDragMouseMove)
169 |       document.removeEventListener('mouseup', this.handleMouseEnd)
170 |       this.onDragStop(e)
171 |     },
172 | 
173 |     increase () {
174 |       if (this.inputValue >= this.max) return
175 |       this.inputValue += this.step
176 |     },
177 | 
178 |     decrease () {
179 |       if (this.inputValue <= this.min) return
180 |       this.inputValue -= this.step
181 |     }
182 |   }
183 | }
184 | </script>
185 | 
186 | <style lang="scss">
187 | @import '../_variables.scss';
188 | .mu-lisder-wrapper {
189 |   width: 100%;
190 |   height: 24px;
191 |   position: relative;
192 |   padding-left: 20px;
193 |   padding-right: 30px;
194 | }
195 | .mu-slider {
196 |   width: 100%;
197 |   position: relative;
198 |   height: 24px;
199 | }
200 | .mu-slider-track {
201 |   position: absolute;
202 |   height: 2px;
203 |   left: 0;
204 |   right: 0;
205 |   top: 50%;
206 |   margin-top: -1px;
207 |   background-color: #e5e5e5;
208 | }
209 | .mu-slider-fill {
210 |   position: absolute;
211 |   height: 2px;
212 |   width: 100%;
213 |   background-color: $primary-color;
214 |   left: 0;
215 |   top: 50%;
216 |   margin-top: -1px;
217 | }
218 | .mu-slider-thumb {
219 |   position: absolute;
220 |   top: 50%;
221 |   width: 12px;
222 |   height: 12px;
223 |   background-color: $primary-color;
224 |   border-radius: 50%;
225 |   transform: translate(-50%, -50%);
226 |   transition: width .3s, height .3s;
227 |   cursor: pointer;
228 | }
229 | .mu-slider.active .mu-slider-thumb {
230 |   width: 18px;
231 |   height: 18px;
232 | }
233 | .mu-increment,
234 | .mu-decrement {
235 |   width: 18px;
236 |   height: 18px;
237 |   position: absolute;
238 |   top: -7px;
239 |   cursor: pointer;
240 | }
241 | .mu-increment {
242 |   right: 0;
243 | }
244 | .mu-decrement {
245 |   left: 0;
246 | }
247 | </style>
248 | 


--------------------------------------------------------------------------------
/src/store/mutation.js:
--------------------------------------------------------------------------------
  1 | const generate = require('nanoid/generate')
  2 | 
  3 | export default {
  4 |   // 选中元件与取消选中
  5 |   select (state, payload) {
  6 |     state.uuid = payload.uuid
  7 |     if (payload.uuid === -1) {
  8 |       state.activeElement = state.page
  9 |       state.type = 'page'
 10 |     } else {
 11 |       let widget = state.widgets.find(w => w.uuid === payload.uuid)
 12 |       state.activeElement = widget
 13 |       state.type = widget.type
 14 |     }
 15 |   },
 16 | 
 17 |   // 设置 mousemove 操作的初始值
 18 |   initmove (state, payload) {
 19 |     state.startX = payload.startX
 20 |     state.startY = payload.startY
 21 |     state.originX = payload.originX
 22 |     state.originY = payload.originY
 23 |     state.moving = true
 24 |   },
 25 | 
 26 |   // 元件移动结束
 27 |   stopmove (state) {
 28 |     state.moving = false
 29 |   },
 30 | 
 31 |   // 移动元件
 32 |   move (state, payload) {
 33 |     var target = state.activeElement
 34 |     var dx = payload.x - state.startX
 35 |     var dy = payload.y - state.startY
 36 |     var left = state.originX + Math.floor(dx * 100 / state.zoom)
 37 |     var top = state.originY + Math.floor(dy * 100 / state.zoom)
 38 | 
 39 |     target.left = left > 0 ? left : 0
 40 |     target.top = top > 0 ? top : 0
 41 |   },
 42 | 
 43 |   // 调整元件尺寸
 44 |   resize (state, payload) {
 45 |     var dx = payload.x - state.startX
 46 |     var dy = payload.y - state.startY
 47 |     var value
 48 | 
 49 |     if (payload.type === 'right') {
 50 |       value = state.originX + Math.floor(dx * 100 / state.zoom)
 51 |       state.activeElement.width = value > 10 ? value : 10
 52 |       return
 53 |     }
 54 | 
 55 |     if (payload.type === 'down') {
 56 |       value = state.originX + Math.floor(dy * 100 / state.zoom)
 57 |       state.activeElement.height = value > 10 ? value : 10
 58 |       return
 59 |     }
 60 | 
 61 |     if (payload.type === 'left') {
 62 |       var left = state.originX + Math.floor(dx * 100 / state.zoom)
 63 |       var width = state.originY - Math.floor(dx * 100 / state.zoom)
 64 |       state.activeElement.left = left > 0 ? left : 0
 65 |       state.activeElement.width = width > 10 ? width : 10
 66 |       return
 67 |     }
 68 | 
 69 |     if (payload.type === 'up') {
 70 |       var top = state.originX + Math.floor(dy * 100 / state.zoom)
 71 |       var height = state.originY - Math.floor(dy * 100 / state.zoom)
 72 |       state.activeElement.top = top > 0 ? top : 0
 73 |       state.activeElement.height = height > 10 ? height : 10
 74 |     }
 75 |   },
 76 | 
 77 |   // 复制元件
 78 |   copy (state, payload) {
 79 |     if (state.type !== 'page') {
 80 |       var copy = Object.assign({}, state.activeElement, {top: state.top, uuid: generate('1234567890abcdef', 10)})
 81 | 
 82 |       // 由于容器的名称必须是唯一的，故复制容器需作处理
 83 |       if (state.activeElement.isContainer) {
 84 |         var name = state.activeElement.name
 85 |         if (name) {
 86 |           // 设置容器副本的名称
 87 |           var copyName = name.split('-')[0] + '-' + state.counter
 88 |           copy.name = copyName
 89 | 
 90 |           // 复制容器内的图片和文本
 91 |           for (var i = 0, len = state.widgets.length; i < len; i++) {
 92 |             if (state.widgets[i].belong === name) {
 93 |               state.widgets.push(
 94 |                 Object.assign({}, state.widgets[i], { belong: copyName })
 95 |               )
 96 |             }
 97 |           }
 98 | 
 99 |           state.counter += 1
100 |         }
101 |       }
102 | 
103 |       state.widgets.push(copy)
104 |     }
105 |   },
106 | 
107 |   // 更新元件初始 top 值
108 |   updateSrollTop (state, top) {
109 |     state.top = top
110 |   },
111 | 
112 |   // 页面缩放
113 |   zoom (state, val) {
114 |     state.zoom = val
115 |   },
116 | 
117 |   // 初始化选中对象
118 |   initActive (state) {
119 |     state.activeElement = state.page
120 |   },
121 | 
122 |   // 删除选中元件
123 |   delete (state) {
124 |     var type = state.type
125 |     if (type === 'page') return
126 | 
127 |     // 如果删除的是容器，须将内部元件一并删除
128 |     if (state.activeElement.isContainer) {
129 |       var name = state.activeElement.name
130 | 
131 |       for (var i = 0; i < state.widgets.length; i++) {
132 |         if (state.widgets[i].belong === name) {
133 |           state.widgets.splice(i, 1)
134 |         }
135 |       }
136 |     }
137 | 
138 |     // 删除元件
139 |     state.widgets.splice(state.index, 1)
140 | 
141 |     // 重置 activeElement
142 |     state.activeElement = state.page
143 |     // state.type = 'page'
144 |     state.uuid = -1
145 |   },
146 | 
147 |   // 添加组件
148 |   addWidget (state, { data: data = null, item }) {
149 |     let def = { top: state.top, uuid: generate('1234567890abcdef', 10) }
150 |     let setting = JSON.parse(JSON.stringify(item.setting))
151 | 
152 |     if (setting.isContainer) {
153 |       setting.name = def.uuid
154 |     }
155 | 
156 |     if (data) {
157 |       data.forEach(function (val) {
158 |         state.widgets.push(Object.assign(setting, val, def))
159 |       })
160 |     } else {
161 |       state.widgets.push(Object.assign(setting, def))
162 |     }
163 |   },
164 | 
165 |   // 替换图片
166 |   replaceImage (state, payload) {
167 |     state.activeElement.width = payload[0].width
168 |     state.activeElement.url = payload[0].url
169 |   },
170 | 
171 |   // 添加容器背景图
172 |   addContainerBackPic (state, payload) {
173 |     state.activeElement.backPic = payload[0].url
174 |     state.activeElement.backPicUrl = payload[0].src
175 |     state.activeElement.width = payload[0].width
176 |     state.activeElement.height = payload[0].height
177 |   },
178 | 
179 |   // 添加背景图
180 |   addBackPic (state, payload) {
181 |     state.activeElement.backPic = payload[0].url
182 |     state.activeElement.backPicUrl = payload[0].src
183 |   },
184 | 
185 |   // 添加动画
186 |   addAnimation (state) {
187 |     state.animation.push({
188 |       name: '',
189 |       duration: 3,
190 |       delay: 0,
191 |       iteration: 1,
192 |       timing: 'linear',
193 |       direction: 'normal',
194 |       fill: 'none',
195 |       keyframes: [
196 |         {
197 |           stop: 0,
198 |           css: ''
199 |         }
200 |       ]
201 |     })
202 |   },
203 | 
204 |   // 为动画添加 keyframe
205 |   addkeyframe (state, name) {
206 |     state.animation.map(val => {
207 |       if (val.name === name) {
208 |         val.keyframes.push({
209 |           stop: 0,
210 |           css: ''
211 |         })
212 |       }
213 |     })
214 |   },
215 | 
216 |   // 动画的播放与停止
217 |   setAnimation (state, status) {
218 |     state.playState = status
219 |   },
220 | 
221 |   // 更新数据
222 |   updateData (state, {uuid, key, value}) {
223 |     let widget = state.widgets.find(w => w.uuid === uuid)
224 |     widget[key] = value
225 |   }
226 | }
227 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Change Log
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | <a name="1.1.1"></a>
  6 | ## [1.1.1](https://github.com/fireyy/vue-page-designer/compare/v1.1.0...v1.1.1) (2021-03-22)
  7 | 
  8 | 
  9 | ### Bug Fixes
 10 | 
 11 | * [#33](https://github.com/fireyy/vue-page-designer/issues/33) remove vue-i18n, use inter plugin ([8c1e9de](https://github.com/fireyy/vue-page-designer/commit/8c1e9de))
 12 | * for of ([d19f41f](https://github.com/fireyy/vue-page-designer/commit/d19f41f))
 13 | * regx ([3cf96fe](https://github.com/fireyy/vue-page-designer/commit/3cf96fe))
 14 | 
 15 | 
 16 | 
 17 | <a name="1.1.0"></a>
 18 | # [1.1.0](https://github.com/fireyy/vue-page-designer/compare/v1.0.1...v1.1.0) (2020-09-09)
 19 | 
 20 | 
 21 | ### Bug Fixes
 22 | 
 23 | * Github Security Alerts ([6dba672](https://github.com/fireyy/vue-page-designer/commit/6dba672))
 24 | * use terser instead of uglify-es ([88b09a4](https://github.com/fireyy/vue-page-designer/commit/88b09a4))
 25 | 
 26 | 
 27 | ### Features
 28 | 
 29 | * [#17](https://github.com/fireyy/vue-page-designer/issues/17) add i18n support ([e6cda99](https://github.com/fireyy/vue-page-designer/commit/e6cda99))
 30 | * add parameter locale ([8000512](https://github.com/fireyy/vue-page-designer/commit/8000512))
 31 | 
 32 | 
 33 | 
 34 | <a name="1.0.1"></a>
 35 | ## [1.0.1](https://github.com/fireyy/vue-page-designer/compare/v1.0.0...v1.0.1) (2019-01-22)
 36 | 
 37 | 
 38 | 
 39 | <a name="1.0.0"></a>
 40 | # [1.0.0](https://github.com/fireyy/vue-page-designer/compare/v0.7.1...v1.0.0) (2019-01-22)
 41 | 
 42 | 
 43 | ### Bug Fixes
 44 | 
 45 | * container fixed-width 1280px ([4a9cd1f](https://github.com/fireyy/vue-page-designer/commit/4a9cd1f))
 46 | * ref line duplicate keys ([8339f14](https://github.com/fireyy/vue-page-designer/commit/8339f14))
 47 | * ref line duplicate keys ([5adf53b](https://github.com/fireyy/vue-page-designer/commit/5adf53b))
 48 | * rollup bundle external vue ([e06412d](https://github.com/fireyy/vue-page-designer/commit/e06412d))
 49 | * sass import path ([dad291b](https://github.com/fireyy/vue-page-designer/commit/dad291b))
 50 | * use vpd instead of store ([7e4be36](https://github.com/fireyy/vue-page-designer/commit/7e4be36))
 51 | 
 52 | 
 53 | ### Features
 54 | 
 55 | * layer-list show widget title ([4892aa0](https://github.com/fireyy/vue-page-designer/commit/4892aa0))
 56 | 
 57 | 
 58 | 
 59 | <a name="0.7.1"></a>
 60 | ## [0.7.1](https://github.com/fireyy/vue-page-designer/compare/v0.7.0...v0.7.1) (2018-01-03)
 61 | 
 62 | 
 63 | ### Bug Fixes
 64 | 
 65 | * **remove:** .cleafix hack ([84e5627](https://github.com/fireyy/vue-page-designer/commit/84e5627))
 66 | * copy widget ([876d05b](https://github.com/fireyy/vue-page-designer/commit/876d05b))
 67 | * keycode ([49ccaed](https://github.com/fireyy/vue-page-designer/commit/49ccaed))
 68 | * resize control ([d74afee](https://github.com/fireyy/vue-page-designer/commit/d74afee))
 69 | * style config ([cdc9093](https://github.com/fireyy/vue-page-designer/commit/cdc9093))
 70 | 
 71 | 
 72 | 
 73 | <a name="0.7.0"></a>
 74 | # [0.7.0](https://github.com/fireyy/vue-page-designer/compare/v0.6.0...v0.7.0) (2017-12-29)
 75 | 
 76 | 
 77 | ### Bug Fixes
 78 | 
 79 | * color picker ([c9ad358](https://github.com/fireyy/vue-page-designer/commit/c9ad358))
 80 | * depend vue-page-designer-widgets ([fa820af](https://github.com/fireyy/vue-page-designer/commit/fa820af))
 81 | 
 82 | 
 83 | ### Features
 84 | 
 85 | * demo widgets ([9acfa02](https://github.com/fireyy/vue-page-designer/commit/9acfa02))
 86 | * use store instead of window. ([f4ed3b8](https://github.com/fireyy/vue-page-designer/commit/f4ed3b8))
 87 | 
 88 | 
 89 | 
 90 | <a name="0.6.0"></a>
 91 | # [0.6.0](https://github.com/fireyy/vue-page-designer/compare/v0.5.4...v0.6.0) (2017-12-27)
 92 | 
 93 | 
 94 | ### Bug Fixes
 95 | 
 96 | * child widget data-title ([4742551](https://github.com/fireyy/vue-page-designer/commit/4742551))
 97 | 
 98 | 
 99 | ### Features
100 | 
101 | * add updateData api ([27f6c7c](https://github.com/fireyy/vue-page-designer/commit/27f6c7c))
102 | * container use slot ([b7825c9](https://github.com/fireyy/vue-page-designer/commit/b7825c9))
103 | 
104 | 
105 | 
106 | <a name="0.5.4"></a>
107 | ## [0.5.4](https://github.com/fireyy/vue-page-designer/compare/v0.5.3...v0.5.4) (2017-12-26)
108 | 
109 | 
110 | ### Bug Fixes
111 | 
112 | * svg remote path ([7e6d249](https://github.com/fireyy/vue-page-designer/commit/7e6d249))
113 | 
114 | 
115 | 
116 | <a name="0.5.3"></a>
117 | ## [0.5.3](https://github.com/fireyy/vue-page-designer/compare/v0.5.2...v0.5.3) (2017-12-26)
118 | 
119 | 
120 | ### Bug Fixes
121 | 
122 | * svg remote path ([c71d997](https://github.com/fireyy/vue-page-designer/commit/c71d997))
123 | 
124 | 
125 | 
126 | <a name="0.5.2"></a>
127 | ## [0.5.2](https://github.com/fireyy/vue-page-designer/compare/v0.5.1...v0.5.2) (2017-12-26)
128 | 
129 | 
130 | 
131 | <a name="0.5.1"></a>
132 | ## [0.5.1](https://github.com/fireyy/vue-page-designer/compare/v0.5.0...v0.5.1) (2017-12-26)
133 | 
134 | 
135 | 
136 | <a name="0.5.0"></a>
137 | # [0.5.0](https://github.com/fireyy/vue-page-designer/compare/v0.4.0...v0.5.0) (2017-12-26)
138 | 
139 | 
140 | ### Bug Fixes
141 | 
142 | * example static path ([e30f5bf](https://github.com/fireyy/vue-page-designer/commit/e30f5bf))
143 | * svg remote path ([85ffbe9](https://github.com/fireyy/vue-page-designer/commit/85ffbe9))
144 | 
145 | 
146 | ### Features
147 | 
148 | * simple defaultUpload function ([69064fa](https://github.com/fireyy/vue-page-designer/commit/69064fa))
149 | 
150 | 
151 | 
152 | <a name="0.4.0"></a>
153 | # [0.4.0](https://github.com/fireyy/vue-page-designer/compare/v0.3.0...v0.4.0) (2017-12-22)
154 | 
155 | 
156 | ### Features
157 | 
158 | * use external svg file ([a22a419](https://github.com/fireyy/vue-page-designer/commit/a22a419))
159 | 
160 | 
161 | 
162 | <a name="0.3.0"></a>
163 | # [0.3.0](https://github.com/fireyy/vue-page-designer/compare/v0.2.0...v0.3.0) (2017-12-22)
164 | 
165 | 
166 | ### Features
167 | 
168 | * add upload function for use your owner upload api ([becf9eb](https://github.com/fireyy/vue-page-designer/commit/becf9eb))
169 | * widget icon use svg string ([67e6b05](https://github.com/fireyy/vue-page-designer/commit/67e6b05))
170 | 
171 | 
172 | 
173 | <a name="0.2.0"></a>
174 | # [0.2.0](https://github.com/fireyy/vue-page-designer/compare/v0.1.0...v0.2.0) (2017-12-21)
175 | 
176 | 
177 | ### Features
178 | 
179 | * move widgetStyle to widget ([37550b6](https://github.com/fireyy/vue-page-designer/commit/37550b6))
180 | 
181 | 
182 | 
183 | <a name="0.1.0"></a>
184 | # [0.1.0](https://github.com/fireyy/vue-page-designer/compare/v0.0.1...v0.1.0) (2017-12-21)
185 | 
186 | 
187 | ### Bug Fixes
188 | 
189 | * clean ([ec7bcff](https://github.com/fireyy/vue-page-designer/commit/ec7bcff))
190 | * drag move active element ([f0f68fd](https://github.com/fireyy/vue-page-designer/commit/f0f68fd))
191 | * Icon unit test ([e608893](https://github.com/fireyy/vue-page-designer/commit/e608893))
192 | * remove ([00a1d47](https://github.com/fireyy/vue-page-designer/commit/00a1d47))
193 | * remove hoverPic ([869a7db](https://github.com/fireyy/vue-page-designer/commit/869a7db))
194 | * remove unused slider.scss ([c905a58](https://github.com/fireyy/vue-page-designer/commit/c905a58))
195 | * remove unused switcher ([581b2ed](https://github.com/fireyy/vue-page-designer/commit/581b2ed))
196 | * scroll to element when not in view ([78494de](https://github.com/fireyy/vue-page-designer/commit/78494de))
197 | * scroll to layer ([827fc3b](https://github.com/fireyy/vue-page-designer/commit/827fc3b))
198 | * use uuid to check active element ([1d45405](https://github.com/fireyy/vue-page-designer/commit/1d45405))
199 | 
200 | 
201 | ### Features
202 | 
203 | * add Icon unit test ([0e4ce11](https://github.com/fireyy/vue-page-designer/commit/0e4ce11))
204 | * add jsconfig ([5eadf69](https://github.com/fireyy/vue-page-designer/commit/5eadf69))
205 | * add release script ([aceb55c](https://github.com/fireyy/vue-page-designer/commit/aceb55c))
206 | * add toast type ([350573d](https://github.com/fireyy/vue-page-designer/commit/350573d))
207 | * export save event ([a463347](https://github.com/fireyy/vue-page-designer/commit/a463347))
208 | * pass initial value to editor ([8b72c11](https://github.com/fireyy/vue-page-designer/commit/8b72c11))
209 | 


--------------------------------------------------------------------------------
/src/components/panel/animation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-if="tab === 3"
  4 |     class="panel-wrap">
  5 |     <button class="btn btn-action float-right mx-1">
  6 |       <vpd-icon
  7 |         name="plus"
  8 |         @click="addAnimation" />
  9 |     </button>
 10 | 
 11 |     <button class="btn btn-action float-right">
 12 |       <vpd-icon
 13 |         name="play"
 14 |         @click="play" />
 15 |     </button>
 16 | 
 17 |     <div class="panel-row">
 18 |       <vpd-icon name="film" />
 19 |       <div class="panel-label">{{ $t('panel.animation.select') }}</div>
 20 |       <div class="panel-value">
 21 |         <select v-model="currentName">
 22 |           <option value="">{{ $t('data.no') }}</option>
 23 |           <option
 24 |             v-for="(val, index) in animationNames"
 25 |             :key="index"
 26 |             :value="val">{{ val }}</option>
 27 |         </select>
 28 |       </div>
 29 |     </div>
 30 | 
 31 |     <div v-if="currentAnimation">
 32 |       <hr>
 33 |       <div class="panel-row">
 34 |         <vpd-icon name="type" />
 35 |         <div class="panel-label">{{ $t('data.name') }}</div>
 36 |         <div class="panel-value">
 37 |           <input
 38 |             v-model.trim="currentAnimation.name"
 39 |             type="text"
 40 |             placeholder="动画名称，仅限英文"
 41 |             @input="validateName">
 42 |         </div>
 43 |       </div>
 44 | 
 45 |       <div class="panel-row">
 46 |         <vpd-icon name="clock" />
 47 |         <div class="panel-label">{{ $t('data.duration') }}</div>
 48 |         <div class="panel-value">
 49 |           <input
 50 |             v-model.number="currentAnimation.duration"
 51 |             type="text"
 52 |             placeholder="请输入大于0的数字">
 53 |         </div>
 54 |       </div>
 55 | 
 56 |       <div class="panel-row">
 57 |         <vpd-icon name="watch" />
 58 |         <div class="panel-label">{{ $t('data.delay') }}</div>
 59 |         <div class="panel-value">
 60 |           <input
 61 |             v-model.number="currentAnimation.delay"
 62 |             type="text"
 63 |             placeholder="请输入不小于0的数字">
 64 |         </div>
 65 |       </div>
 66 | 
 67 |       <div class="panel-row">
 68 |         <vpd-icon name="repeat" />
 69 |         <div class="panel-label">{{ $t('data.iteration') }}</div>
 70 |         <div class="panel-value">
 71 |           <input
 72 |             v-model.number="currentAnimation.iteration"
 73 |             type="text"
 74 |             placeholder="输入0表示无限循环">
 75 |         </div>
 76 |       </div>
 77 | 
 78 |       <div class="panel-row">
 79 |         <vpd-icon name="activity" />
 80 |         <div class="panel-label">{{ $t('data.timing') }}</div>
 81 |         <div class="panel-value">
 82 |           <select v-model="currentAnimation.timing">
 83 |             <option>linear</option>
 84 |             <option>ease</option>
 85 |             <option>ease-in</option>
 86 |             <option>ease-out</option>
 87 |             <option>ease-in-out</option>
 88 |           </select>
 89 |         </div>
 90 |       </div>
 91 | 
 92 |       <div class="panel-row">
 93 |         <vpd-icon name="rotate-cw" />
 94 |         <div class="panel-label">{{ $t('data.direction') }}</div>
 95 |         <div class="panel-value">
 96 |           <select v-model="currentAnimation.direction">
 97 |             <option>normal</option>
 98 |             <option>reverse</option>
 99 |             <option>alternate</option>
100 |             <option>alternate-reverse</option>
101 |           </select>
102 |         </div>
103 |       </div>
104 | 
105 |       <div class="panel-row">
106 |         <vpd-icon name="chevrons-down" />
107 |         <div class="panel-label">fill-mode</div>
108 |         <div class="panel-value">
109 |           <select v-model="currentAnimation.fill">
110 |             <option>none</option>
111 |             <option>forwards</option>
112 |             <option>backwards</option>
113 |             <option>both</option>
114 |           </select>
115 |         </div>
116 |       </div>
117 | 
118 |       <hr>
119 | 
120 |       <div
121 |         v-for="(val, i) in currentAnimation.keyframes"
122 |         :key="i">
123 |         <div class="panel-row">
124 |           <vpd-icon name="stop-circle" />
125 |           <div class="panel-label">stop - {{ i }}</div>
126 |           <div class="panel-value">{{ val.stop }}%</div>
127 |           <div class="panel-slider-wrap">
128 |             <vpd-slider
129 |               :step="1"
130 |               v-model="val.stop" />
131 |           </div>
132 |         </div>
133 |         <textarea
134 |           v-model="val.css"
135 |           placeholder="IMPORTANT: use rem, not px"/>
136 |         <div style="margin: 10px 0 0 20px;">
137 |           <button
138 |             v-if="i + 1 === currentAnimation.keyframes.length"
139 |             class="btn btn-primary"
140 |             @click="addkeyframe">
141 |             <vpd-icon name="plus" /> {{ $t('data.actions.add') }}
142 |           </button>
143 |         </div>
144 |       </div>
145 |     </div>
146 |   </div>
147 | </template>
148 | 
149 | <script>
150 | import { getAnimateCss } from '../../utils/css-generate.js'
151 | import vpd from '../../mixins/vpd'
152 | export default {
153 |   name: 'PanelAnimation',
154 |   mixins: [vpd],
155 |   props: ['activeElement', 'tab'],
156 |   data () {
157 |     return {
158 |       currentName: '',
159 |       currentAnimation: null
160 |     }
161 |   },
162 | 
163 |   computed: {
164 |     animationNames () {
165 |       var arr = []
166 |       this.$vpd.state.animation.map(val => arr.push(val.name))
167 | 
168 |       return arr
169 |     }
170 |   },
171 | 
172 |   watch: {
173 |     currentName: function (val) {
174 |       // 设置选中元件的动画名称
175 |       if (this.activeElement.animationName !== undefined) {
176 |         this.activeElement.animationName = val
177 |       }
178 |       this.getCurrentAnimation(val)
179 |     },
180 | 
181 |     activeElement: function (val) {
182 |       if (val.animationName !== undefined) {
183 |         this.currentName = val.animationName
184 |       } else {
185 |         this.currentName = ''
186 |       }
187 |     }
188 |   },
189 | 
190 |   methods: {
191 |     addAnimation () {
192 |       // 检查是否存在未命名动画，避免重复添加
193 |       if (this.$vpd.state.animation.some(val => val.name === '')) {
194 |         this.$vpd.$emit('notify', {
195 |           info: this.$t('messages.alerts.unnamedanimations')
196 |         })
197 |         return
198 |       }
199 |       this.$vpd.commit('addAnimation')
200 |       this.currentName = ''
201 |       this.getCurrentAnimation('')
202 |     },
203 | 
204 |     getCurrentAnimation (name) {
205 |       var result = this.$vpd.state.animation.filter(val => val.name === name)
206 |       this.currentAnimation = result[0]
207 |     },
208 | 
209 |     addkeyframe () {
210 |       var name = this.currentAnimation.name
211 |       if (name === '') {
212 |         this.$vpd.$emit('notify', {
213 |           info: this.$t('messages.alerts.animation_name_required')
214 |         })
215 |         return
216 |       }
217 |       this.$vpd.commit('addkeyframe', name)
218 |     },
219 | 
220 |     validateName (e) {
221 |       var value = e.target.value
222 |       if (value === '') return
223 |       if (!/^[a-zA-Z]/.test(value)) {
224 |         this.$nextTick(() => {
225 |           this.currentAnimation.name = ''
226 |         })
227 |         this.$vpd.$emit('notify', {
228 |           info: this.$t('messages.alerts.animation_name_validate')
229 |         })
230 |       }
231 | 
232 |       if (/\W/g.test(value)) {
233 |         this.$nextTick(() => {
234 |           this.currentAnimation.name = value.replace(/\W/g, '')
235 |         })
236 |         this.$vpd.$emit('notify', {
237 |           info: this.$t('messages.alerts.animation_name_validate')
238 |         })
239 |       }
240 |     },
241 | 
242 |     play () {
243 |       // stop animation if any
244 |       this.$vpd.commit('setAnimation', false)
245 | 
246 |       setTimeout(() => {
247 |         var animations = this.$vpd.state.animation
248 |         if (animations.length === 0) return
249 | 
250 |         animations.map(val => {
251 |           // build style code and insert into document
252 |           var id = 'anm-' + val.name
253 |           var styleNode = document.getElementById(id)
254 | 
255 |           if (styleNode) {
256 |             styleNode.innerHTML = getAnimateCss(
257 |               val.name,
258 |               val,
259 |               val.keyframes,
260 |               false
261 |             )
262 |           } else {
263 |             var style = document.createElement('style')
264 |             style.id = id
265 |             style.innerHTML = getAnimateCss(
266 |               val.name,
267 |               val,
268 |               val.keyframes,
269 |               false
270 |             )
271 |             document.head.append(style)
272 |           }
273 |         })
274 | 
275 |         this.$vpd.commit('setAnimation', true)
276 |       }, 200)
277 |     }
278 |   }
279 | }
280 | </script>
281 | 
282 | <style scoped>
283 | textarea {
284 |   width: 290px;
285 |   height: 100px;
286 |   resize: none;
287 |   border-radius: 4px;
288 |   padding: 4px 6px;
289 |   margin-left: 20px;
290 |   border-color: #ccc;
291 | }
292 | </style>
293 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [2025] [fireyy]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------