- Row Height: Col nums: -
-
- -
-
-
-
-
-
-
diff --git a/OLD/src/app.js b/OLD/src/app.js
deleted file mode 100644
index cd8e6f49..00000000
--- a/OLD/src/app.js
+++ /dev/null
@@ -1,94 +0,0 @@
-var testLayout = [
- {"x":0,"y":0,"w":2,"h":2,"i":"0"},
- {"x":2,"y":0,"w":2,"h":4,"i":"1"},
- {"x":4,"y":0,"w":2,"h":5,"i":"2"},
- {"x":6,"y":0,"w":2,"h":3,"i":"3"},
- {"x":8,"y":0,"w":2,"h":3,"i":"4"},
- {"x":10,"y":0,"w":2,"h":3,"i":"5"},
- {"x":0,"y":5,"w":2,"h":5,"i":"6"},
- {"x":2,"y":5,"w":2,"h":5,"i":"7"},
- {"x":4,"y":5,"w":2,"h":5,"i":"8"},
- {"x":6,"y":4,"w":2,"h":4,"i":"9"},
- {"x":8,"y":4,"w":2,"h":4,"i":"10"},
- {"x":10,"y":4,"w":2,"h":4,"i":"11"},
- {"x":0,"y":10,"w":2,"h":5,"i":"12"},
- {"x":2,"y":10,"w":2,"h":5,"i":"13"},
- {"x":4,"y":8,"w":2,"h":4,"i":"14"},
- {"x":6,"y":8,"w":2,"h":4,"i":"15"},
- {"x":8,"y":10,"w":2,"h":5,"i":"16"},
- {"x":10,"y":4,"w":2,"h":2,"i":"17"},
- {"x":0,"y":9,"w":2,"h":3,"i":"18"},
- {"x":2,"y":6,"w":2,"h":2,"i":"19"}
-];
-
-
-//Vue.config.devtools = true;
-
-import GridItem from './GridItem.vue';
-import GridLayout from './GridLayout.vue';
-//import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
-import TestElement from './TestElement.vue';
-import CustomDragElement from './CustomDragElement.vue';
-
-new Vue({
- el: '#app',
- components: {
- //ResponsiveGridLayout,
- GridLayout,
- GridItem,
- TestElement,
- CustomDragElement,
- },
- data: {
- layout: JSON.parse(JSON.stringify(testLayout)),
- colNum: 0,
- index: 0
- },
- mounted: function () {
- this.index = this.layout.length;
- },
- watch: {
- },
- methods: {
- increaseWidth: function(item) {
- var width = document.getElementById("content").offsetWidth;
- width += 20;
- document.getElementById("content").style.width = width+"px";
- },
- decreaseWidth: function(item) {
-
- var width = document.getElementById("content").offsetWidth;
- width -= 20;
- document.getElementById("content").style.width = width+"px";
- },
- removeItem: function(item) {
- //console.log("### REMOVE " + item.i);
- this.layout.splice(this.layout.indexOf(item), 1);
- },
- addItem: function() {
- var self = this;
- //console.log("### LENGTH: " + this.layout.length);
- var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
- this.index++;
- this.layout.push(item);
- }
- },
-});
-
-
-/*function generateLayout() {
- return _.map(_.range(0, 25), function (item, i) {
- var y = Math.ceil(Math.random() * 4) + 1;
- return {
- x: _.random(0, 5) * 2 % 12,
- y: Math.floor(i / 6) * y,
- w: 2,
- h: y,
- i: i.toString(),
- static: Math.random() < 0.05
- };
- });
-}*/
-
-
-
diff --git a/OLD/src/index.js b/OLD/src/index.js
deleted file mode 100644
index 3c950324..00000000
--- a/OLD/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import GridItem from './GridItem.vue';
-import GridLayout from './GridLayout.vue';
-import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
-
-const VueGridLayout = {
- ResponsiveGridLayout,
- GridLayout,
- GridItem
-}
-
-module.exports = VueGridLayout;
diff --git a/OLD/src/main.js b/OLD/src/main.js
deleted file mode 100644
index 385fcfe8..00000000
--- a/OLD/src/main.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-new Vue({
- el: '#app',
- render: h => h(App)
-})
diff --git a/OLD/webpack.build.js b/OLD/webpack.build.js
deleted file mode 100644
index 6706acc8..00000000
--- a/OLD/webpack.build.js
+++ /dev/null
@@ -1,14 +0,0 @@
-var config = require('./webpack.config.js')
-
-config.entry = {
- 'vue-grid-layout': './src/index.js',
-}
-
-config.output = {
- filename: './dist/[name].js',
- library: 'VueGridLayout',
- libraryTarget: 'umd'
-}
-
-
-module.exports = config
diff --git a/OLD/webpack.build.min.js b/OLD/webpack.build.min.js
deleted file mode 100644
index f3a2a371..00000000
--- a/OLD/webpack.build.min.js
+++ /dev/null
@@ -1,46 +0,0 @@
-var config = require('./webpack.build.js')
-var webpack = require('webpack')
-
-
-config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
-
-delete config.devtool
-
-/*
-config.plugins = [
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"'
- }
- }),
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: false,
- compress: {
- warnings: false
- }
- }),
- new webpack.optimize.OccurenceOrderPlugin()
-]
- */
-module.exports = config
-
-
-
-module.exports.devtool = '#source-map'
-// http://vue-loader.vuejs.org/en/workflow/production.html
-module.exports.plugins = (module.exports.plugins || []).concat([
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"'
- }
- }),
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: true,
- compress: {
- warnings: false
- }
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- }),
-])
\ No newline at end of file
diff --git a/OLD/webpack.config.js b/OLD/webpack.config.js
deleted file mode 100644
index 5cdaae0a..00000000
--- a/OLD/webpack.config.js
+++ /dev/null
@@ -1,84 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, './dist'),
- publicPath: '/dist/',
- filename: 'build.js'
- },
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: {
- loaders: {
- // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
- // the "scss" and "sass" values for the lang attribute to the right configs here.
- // other preprocessors should work out of the box, no loader config like this nessessary.
- 'scss': 'vue-style-loader!css-loader!sass-loader',
- 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
- }
- // other vue-loader options go here
- }
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- query: {
- presets: ['es2015']
- },
- exclude: /node_modules/
- },
- {
- test: /\.(png|jpg|gif|svg)$/,
- loader: 'file-loader',
- options: {
- name: '[name].[ext]?[hash]'
- }
- }
- ]
- },
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.common.js'
- }
- },
- devServer: {
- historyApiFallback: true,
- noInfo: true
- },
- performance: {
- hints: false
- },
- devtool: '#eval-source-map',
- plugins: [
- new webpack.HotModuleReplacementPlugin()
- ]
-}
-
-
-/*
-if (process.env.NODE_ENV === 'production') {
- module.exports.devtool = '#source-map'
- // http://vue-loader.vuejs.org/en/workflow/production.html
- module.exports.plugins = (module.exports.plugins || []).concat([
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"'
- }
- }),
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: true,
- compress: {
- warnings: false
- }
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- ])
-}
-*/
diff --git a/README-zh_CN.md b/README-zh_CN.md
new file mode 100644
index 00000000..e940b464
--- /dev/null
+++ b/README-zh_CN.md
@@ -0,0 +1,592 @@
+Vue Grid Layout
- -
-
-
- Displayed as
- [x, y, w, h]:
-
-
-
- {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
-
-
- Displayed as
- [x, y, w, h]:
-
-
-
- {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
-
-
-
-
-
-
-
- Draggable
- Resizable
- Mirrored
-
- Row Height: Col nums: -
-
-
-
-
-
-
- -
- - Row Height: Col nums: -
-
- -
vue-grid-layout
+ +
+
+
+ +[**[在线演示](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [更新日志](/CHANGELOG.md)**] + +[English](./README.md) | 简体中文 + + + +#### 成功案例 + +- [DocsFold](https://www.docsfold.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout) +- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout) +- [Data Providers](https://www.dataproviders.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout) +- [Cataholic](https://cataholic.glitch.me/) + +*您还知悉其他项目? 请创建一个PR，谢谢!* + +## 特性 + +* 可拖拽 +* 可调整大小 +* 静态部件（不可拖拽、调整大小） +* 拖拽和调整大小时进行边界检查 +* 增减部件时避免重建栅格 +* 可序列化和还原的布局 +* 自动化 RTL 支持 +* 响应式 + + +## 入门指南 + +### 安装 + +#### npm + + # 使用 npm + npm install vue-grid-layout --save + + # 使用 yarn + yarn add vue-grid-layout + + +引入 + +```javascript + import VueGridLayout from 'vue-grid-layout'; +``` + +加入到 Vue 组件 + + ```javascript + export default { + components: { + GridLayout: VueGridLayout.GridLayout, + GridItem: VueGridLayout.GridItem + }, + // ... data, methods, mounted (), etc. + } + +``` + +#### 浏览器 + +在页面中使用已打包好的 [文件](https://github.com/jbaysolutions/vue-grid-layout/releases)。 此时组件已为可用状态。 + +```html + +``` + +### 使用 + +```javascript + var testLayout = [ + {"x":0,"y":0,"w":2,"h":2,"i":"0"}, + {"x":2,"y":0,"w":2,"h":4,"i":"1"}, + {"x":4,"y":0,"w":2,"h":5,"i":"2"}, + {"x":6,"y":0,"w":2,"h":3,"i":"3"}, + {"x":8,"y":0,"w":2,"h":3,"i":"4"}, + {"x":10,"y":0,"w":2,"h":3,"i":"5"}, + {"x":0,"y":5,"w":2,"h":5,"i":"6"}, + {"x":2,"y":5,"w":2,"h":5,"i":"7"}, + {"x":4,"y":5,"w":2,"h":5,"i":"8"}, + {"x":6,"y":3,"w":2,"h":4,"i":"9"}, + {"x":8,"y":4,"w":2,"h":4,"i":"10"}, + {"x":10,"y":4,"w":2,"h":4,"i":"11"}, + {"x":0,"y":10,"w":2,"h":5,"i":"12"}, + {"x":2,"y":10,"w":2,"h":5,"i":"13"}, + {"x":4,"y":8,"w":2,"h":4,"i":"14"}, + {"x":6,"y":8,"w":2,"h":4,"i":"15"}, + {"x":8,"y":10,"w":2,"h":5,"i":"16"}, + {"x":10,"y":4,"w":2,"h":2,"i":"17"}, + {"x":0,"y":9,"w":2,"h":3,"i":"18"}, + {"x":2,"y":6,"w":2,"h":2,"i":"19"} + ]; + + new Vue({ + el: '#app', + data: { + layout: testLayout, + }, + }); +``` + + +```html + +
vue-grid-layout
+
++Documentation Website +
-vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)** - -### **Current version:** 2.3.3 (Supports Vue 2.2+) - -### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)** -### **For Vue 1 use version [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)** - -- -[**[Demo](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [Changelog](/CHANGELOG.md)**] - - - -#### Projects using vue-grid-layout - -- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout) - -*Know of others? Create a PR to let me know!* +vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired by [React-Grid-Layout](https://github.com/STRML/react-grid-layout)** ## Features * Draggable widgets * Resizable widgets +* Static widgets * Bounds checking for dragging and resizing * Widgets may be added or removed without rebuilding grid * Layout can be serialized and restored * Automatic RTL support (resizing not working with RTL on 2.2.0) * Responsive +## **Current version:** 2.4.0 (Supports Vue 2.2+) -## Getting Started - -### Installation - -#### npm - - # install with npm - npm install vue-grid-layout --save - - # install with yarn - yarn add vue-grid-layout - - -Import the library - -```javascript - import VueGridLayout from 'vue-grid-layout'; -``` - -Add to other Vue components - - ```javascript - export default { - components: { - GridLayout: VueGridLayout.GridLayout, - GridItem: VueGridLayout.GridItem - }, - // ... data, methods, mounted (), etc. - } - -``` - -#### browser - -Include the browser-ready bundle (download from [releases](https://github.com/jbaysolutions/vue-grid-layout/releases)) in your page. The components will be automatically available. - -```html - -``` - -### Usage - -```javascript - var testLayout = [ - {"x":0,"y":0,"w":2,"h":2,"i":"0"}, - {"x":2,"y":0,"w":2,"h":4,"i":"1"}, - {"x":4,"y":0,"w":2,"h":5,"i":"2"}, - {"x":6,"y":0,"w":2,"h":3,"i":"3"}, - {"x":8,"y":0,"w":2,"h":3,"i":"4"}, - {"x":10,"y":0,"w":2,"h":3,"i":"5"}, - {"x":0,"y":5,"w":2,"h":5,"i":"6"}, - {"x":2,"y":5,"w":2,"h":5,"i":"7"}, - {"x":4,"y":5,"w":2,"h":5,"i":"8"}, - {"x":6,"y":4,"w":2,"h":4,"i":"9"}, - {"x":8,"y":4,"w":2,"h":4,"i":"10"}, - {"x":10,"y":4,"w":2,"h":4,"i":"11"}, - {"x":0,"y":10,"w":2,"h":5,"i":"12"}, - {"x":2,"y":10,"w":2,"h":5,"i":"13"}, - {"x":4,"y":8,"w":2,"h":4,"i":"14"}, - {"x":6,"y":8,"w":2,"h":4,"i":"15"}, - {"x":8,"y":10,"w":2,"h":5,"i":"16"}, - {"x":10,"y":4,"w":2,"h":2,"i":"17"}, - {"x":0,"y":9,"w":2,"h":3,"i":"18"}, - {"x":2,"y":6,"w":2,"h":2,"i":"19"} - ]; - - new Vue({ - el: '#app', - data: { - layout: testLayout, - }, - }); -``` - - -```html - -
\r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GridLayout.vue?vue&type=template&id=672425fa&\"\nimport script from \"./GridLayout.vue?vue&type=script&lang=js&\"\nexport * from \"./GridLayout.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GridLayout.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\ncomponent.options.__file = \"GridLayout.vue\"\nexport default component.exports","import Vue from \"vue\";\r\nimport GridItem from './GridItem.vue';\r\nimport GridLayout from './GridLayout.vue';\r\n// import ResponsiveGridLayout from './ResponsiveGridLayout.vue';\r\n\r\n\r\nconst VueGridLayout = {\r\n // ResponsiveGridLayout,\r\n GridLayout,\r\n GridItem\r\n}\r\n\r\n// module.exports = VueGridLayout;\r\n\r\nObject.keys(VueGridLayout).forEach(name => {\r\n Vue.component(name, VueGridLayout[name]);\r\n});\r\n\r\nexport default VueGridLayout;\r\nexport { GridLayout, GridItem };","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","/**\n * interact.js v1.3.4\n *\n * Copyright (c) 2012-2018 Taye Adeyemi \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GridLayout.vue?vue&type=template&id=672425fa&\"\nimport script from \"./GridLayout.vue?vue&type=script&lang=js&\"\nexport * from \"./GridLayout.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GridLayout.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\ncomponent.options.__file = \"GridLayout.vue\"\nexport default component.exports","import Vue from \"vue\";\r\nimport GridItem from './GridItem.vue';\r\nimport GridLayout from './GridLayout.vue';\r\n// import ResponsiveGridLayout from './ResponsiveGridLayout.vue';\r\n\r\n\r\nconst VueGridLayout = {\r\n // ResponsiveGridLayout,\r\n GridLayout,\r\n GridItem\r\n}\r\n\r\n// module.exports = VueGridLayout;\r\n\r\nObject.keys(VueGridLayout).forEach(name => {\r\n Vue.component(name, VueGridLayout[name]);\r\n});\r\n\r\nexport default VueGridLayout;\r\nexport { GridLayout, GridItem };","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","/**\n * interact.js v1.3.4\n *\n * Copyright (c) 2012-2018 Taye Adeyemi \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridLayout.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GridLayout.vue?vue&type=template&id=672425fa&\"\nimport script from \"./GridLayout.vue?vue&type=script&lang=js&\"\nexport * from \"./GridLayout.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GridLayout.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\ncomponent.options.__file = \"GridLayout.vue\"\nexport default component.exports","import Vue from \"vue\";\r\nimport GridItem from './GridItem.vue';\r\nimport GridLayout from './GridLayout.vue';\r\n// import ResponsiveGridLayout from './ResponsiveGridLayout.vue';\r\n\r\n\r\nconst VueGridLayout = {\r\n // ResponsiveGridLayout,\r\n GridLayout,\r\n GridItem\r\n}\r\n\r\n// module.exports = VueGridLayout;\r\n\r\nObject.keys(VueGridLayout).forEach(name => {\r\n Vue.component(name, VueGridLayout[name]);\r\n});\r\n\r\nexport default VueGridLayout;\r\nexport { GridLayout, GridItem };","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n","/**\n * interact.js v1.3.4\n *\n * Copyright (c) 2012-2018 Taye Adeyemi , or missing
. Bailing hydration and performing ' + - 'full client-side render.' - ); - } - } - // either not server-rendered, or hydration failed. - // create an empty node and replace it - oldVnode = emptyNodeAt(oldVnode); - } - - // replacing existing element - var oldElm = oldVnode.elm; - var parentElm$1 = nodeOps.parentNode(oldElm); - - // create new node - createElm( - vnode, - insertedVnodeQueue, - // extremely rare edge case: do not insert if old element is in a - // leaving transition. Only happens when combining transition + - // keep-alive + HOCs. (#4590) - oldElm._leaveCb ? null : parentElm$1, - nodeOps.nextSibling(oldElm) - ); - - // update parent placeholder node element, recursively - if (isDef(vnode.parent)) { - var ancestor = vnode.parent; - var patchable = isPatchable(vnode); - while (ancestor) { - for (var i = 0; i < cbs.destroy.length; ++i) { - cbs.destroy[i](ancestor); - } - ancestor.elm = vnode.elm; - if (patchable) { - for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) { - cbs.create[i$1](emptyNode, ancestor); - } - // #6513 - // invoke insert hooks that may have been merged by create hooks. - // e.g. for directives that uses the "inserted" hook. - var insert = ancestor.data.hook.insert; - if (insert.merged) { - // start at index 1 to avoid re-invoking component mounted hook - for (var i$2 = 1; i$2 < insert.fns.length; i$2++) { - insert.fns[i$2](); - } - } - } else { - registerRef(ancestor); - } - ancestor = ancestor.parent; - } - } - - // destroy old node - if (isDef(parentElm$1)) { - removeVnodes(parentElm$1, [oldVnode], 0, 0); - } else if (isDef(oldVnode.tag)) { - invokeDestroyHook(oldVnode); - } - } - } - - invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch); - return vnode.elm - } -} - -/* */ - -var directives = { - create: updateDirectives, - update: updateDirectives, - destroy: function unbindDirectives (vnode) { - updateDirectives(vnode, emptyNode); - } -} - -function updateDirectives (oldVnode, vnode) { - if (oldVnode.data.directives || vnode.data.directives) { - _update(oldVnode, vnode); - } -} - -function _update (oldVnode, vnode) { - var isCreate = oldVnode === emptyNode; - var isDestroy = vnode === emptyNode; - var oldDirs = normalizeDirectives$1(oldVnode.data.directives, oldVnode.context); - var newDirs = normalizeDirectives$1(vnode.data.directives, vnode.context); - - var dirsWithInsert = []; - var dirsWithPostpatch = []; - - var key, oldDir, dir; - for (key in newDirs) { - oldDir = oldDirs[key]; - dir = newDirs[key]; - if (!oldDir) { - // new directive, bind - callHook$1(dir, 'bind', vnode, oldVnode); - if (dir.def && dir.def.inserted) { - dirsWithInsert.push(dir); - } - } else { - // existing directive, update - dir.oldValue = oldDir.value; - callHook$1(dir, 'update', vnode, oldVnode); - if (dir.def && dir.def.componentUpdated) { - dirsWithPostpatch.push(dir); - } - } - } - - if (dirsWithInsert.length) { - var callInsert = function () { - for (var i = 0; i < dirsWithInsert.length; i++) { - callHook$1(dirsWithInsert[i], 'inserted', vnode, oldVnode); - } - }; - if (isCreate) { - mergeVNodeHook(vnode, 'insert', callInsert); - } else { - callInsert(); - } - } - - if (dirsWithPostpatch.length) { - mergeVNodeHook(vnode, 'postpatch', function () { - for (var i = 0; i < dirsWithPostpatch.length; i++) { - callHook$1(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode); - } - }); - } - - if (!isCreate) { - for (key in oldDirs) { - if (!newDirs[key]) { - // no longer present, unbind - callHook$1(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy); - } - } - } -} - -var emptyModifiers = Object.create(null); - -function normalizeDirectives$1 ( - dirs, - vm -) { - var res = Object.create(null); - if (!dirs) { - // $flow-disable-line - return res - } - var i, dir; - for (i = 0; i < dirs.length; i++) { - dir = dirs[i]; - if (!dir.modifiers) { - // $flow-disable-line - dir.modifiers = emptyModifiers; - } - res[getRawDirName(dir)] = dir; - dir.def = resolveAsset(vm.$options, 'directives', dir.name, true); - } - // $flow-disable-line - return res -} - -function getRawDirName (dir) { - return dir.rawName || ((dir.name) + "." + (Object.keys(dir.modifiers || {}).join('.'))) -} - -function callHook$1 (dir, hook, vnode, oldVnode, isDestroy) { - var fn = dir.def && dir.def[hook]; - if (fn) { - try { - fn(vnode.elm, dir, vnode, oldVnode, isDestroy); - } catch (e) { - handleError(e, vnode.context, ("directive " + (dir.name) + " " + hook + " hook")); - } - } -} - -var baseModules = [ - ref, - directives -] - -/* */ - -function updateAttrs (oldVnode, vnode) { - var opts = vnode.componentOptions; - if (isDef(opts) && opts.Ctor.options.inheritAttrs === false) { - return - } - if (isUndef(oldVnode.data.attrs) && isUndef(vnode.data.attrs)) { - return - } - var key, cur, old; - var elm = vnode.elm; - var oldAttrs = oldVnode.data.attrs || {}; - var attrs = vnode.data.attrs || {}; - // clone observed objects, as the user probably wants to mutate it - if (isDef(attrs.__ob__)) { - attrs = vnode.data.attrs = extend({}, attrs); - } - - for (key in attrs) { - cur = attrs[key]; - old = oldAttrs[key]; - if (old !== cur) { - setAttr(elm, key, cur); - } - } - // #4391: in IE9, setting type can reset value for input[type=radio] - // #6666: IE/Edge forces progress value down to 1 before setting a max - /* istanbul ignore if */ - if ((isIE || isEdge) && attrs.value !== oldAttrs.value) { - setAttr(elm, 'value', attrs.value); - } - for (key in oldAttrs) { - if (isUndef(attrs[key])) { - if (isXlink(key)) { - elm.removeAttributeNS(xlinkNS, getXlinkProp(key)); - } else if (!isEnumeratedAttr(key)) { - elm.removeAttribute(key); - } - } - } -} - -function setAttr (el, key, value) { - if (el.tagName.indexOf('-') > -1) { - baseSetAttr(el, key, value); - } else if (isBooleanAttr(key)) { - // set attribute for blank value - // e.g. - if (isFalsyAttrValue(value)) { - el.removeAttribute(key); - } else { - // technically allowfullscreen is a boolean attribute for + <!– –> + --> + {{ itemTitle(item) }} + + + + + + + diff --git a/website/docs/.vuepress/config.js b/website/docs/.vuepress/config.js new file mode 100644 index 00000000..96243a04 --- /dev/null +++ b/website/docs/.vuepress/config.js @@ -0,0 +1,173 @@ +const description = 'A draggable and resizable grid layout, as a Vue component.' +const title = 'Vue Grid Layout - ️A grid layout system for Vue.js' + +module.exports = { + base: "/vue-grid-layout/", + locales: { + '/': { + lang: 'en-US', + title: 'Vue Grid Layout - ️A grid layout system for Vue.js', + description: 'A draggable and resizable grid layout, as a Vue component.' + }, + '/zh/': { + lang: 'zh-CN', + title: 'Vue Grid Layout -️ 适用Vue.js的栅格布局系统', + description: '可拖动和可调整大小栅格布局的Vue组件。' + } + }, + head: [ + ['link', { rel: 'icon', href: `/favicon.ico` }], + ['link', { rel: "apple-touch-icon", sizes: "180x180", href: "https://jbaysolutions.github.io/vue-grid-layout/assets/favicon/apple-touch-icon.png"}], + // ['script', { src: 'https://cdn.jsdelivr.net/npm/vue-grid-layout@2.3.9/dist/vue-grid-layout.umd.min.js' }] + [ + 'script', + { + async: true, + src: 'https://www.googletagmanager.com/gtag/js?id=G-9JZJJHRV8R', + }, + ], + [ + 'script', + {}, + [ + "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-9JZJJHRV8R');", + ], + ], + ], + port: 8081, + theme: '@vuepress/vue', + themeConfig: { + smoothScroll: true, + logo: '/assets/img/logo.png', + repo: 'jbaysolutions/vue-grid-layout', + docsDir: 'website/docs', + editLinks: true, + algolia: { + apiKey: '2f143d1edd24605564065dd02bf0a22b', + indexName: 'vue_grid_layout' + }, + locales: { + '/': { + selectText: 'Languages', + label: 'English', + ariaLabel: 'Select language', + sidebar: { + '/guide/': [ + { + title: "Guide", + collapsable: false, + children: [ + '', + 'usage', + 'properties', + 'events', + 'styling', + ] + }, + { + title: "Examples", + collapsable: false, + children: [ + '01-basic', + '02-events', + '03-multiple-grids', + '04-allow-ignore', + '05-mirrored', + '06-responsive', + '07-prevent-collision', + '08-responsive-predefined-layouts', + '09-dynamic-add-remove', + '10-drag-from-outside', + '11-bounded', + ] + } + ] + }, + nav: [ + {text: 'Home', link: '/'}, + {text: 'Guide', link: '/guide/'}, + {text: 'Changelog', link: '/changelog/'} + ], + searchPlaceholder: 'Search...', + editLinkText: 'Help improve this page!', + lastUpdated: 'Last Updated' + }, + '/zh/': { + selectText: '选择语言', + label: '简体中文', + ariaLabel: '选择语言', + sidebar: { + '/zh/guide/': [ + { + title: "首页", + collapsable: false, + children: [ + '', + 'usage', + 'properties', + 'events', + 'styling', + ] + }, + { + title: "例子", + collapsable: false, + children: [ + '01-basic', + '02-events', + '03-multiple-grids', + '04-allow-ignore', + '05-mirrored', + '06-responsive', + '07-prevent-collision', + '08-responsive-predefined-layouts', + '09-dynamic-add-remove', + '10-drag-from-outside', + '11-bounded', + ] + } + ] + }, + nav: [ + {text: '首页', link: '/zh/'}, + {text: '指南', link: '/zh/guide/'}, + {text: '更新日志', link: '/zh/changelog/'} + ], + searchPlaceholder: '搜索...', + editLinkText: '帮助改善此页面！', + lastUpdated: '最后更新时间' + } + } + }, + plugins: [ + '@vuepress/back-to-top', + /*['@vuepress/google-analytics', { + ga: 'UA-37288388-24' // UA-00000000-0 + }],*/ + ['seo', { + title: $page => `${$page.title} — Vue Grid Layout`, + // image: () => 'https://jbaysolutions.github.io/vue-grid-layout/assets/img/og.jpg', + siteTitle: (_, $site) => $site.title, + description: $page => $page.frontmatter.description || description, + author: (_, $site) => $site.themeConfig.author, + tags: $page => $page.frontmatter.tags, + twitterCard: _ => 'summary_large_image', + type: () => 'article', + url: (_, $site, path) => ($site.themeConfig.domain || '') + path, + publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date), + modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated), + }], + ['vuepress-plugin-serve', { + port: 8080, + staticOptions: { + dotfiles: 'allow', + }, + /*beforeServer(app, server) { + app.get('/path/to/my/custom', function(req, res) { + res.json({ custom: 'response' }) + }) + },*/ + }], + ], + dest: 'public', +} diff --git a/website/docs/.vuepress/enhanceApp.js b/website/docs/.vuepress/enhanceApp.js new file mode 100644 index 00000000..5d373fd5 --- /dev/null +++ b/website/docs/.vuepress/enhanceApp.js @@ -0,0 +1,31 @@ +/** + * App level enhancements. Read more here: + * https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements + */ +// import pageComponents from '@internal/page-components' +import Autocomplete from './Autocomplete' +// import ArticleCard from './components/ArticleCard' +// import GithubButton from 'vue-github-button' +// import VTooltip from 'v-tooltip' + +// import '../../node_modules/@braid/vue-formulate/themes/snow/snow.scss' + +export default ({ Vue }) => { + /*Vue.prototype.$gridlayout = { + async load () { + await import('vue-grid-layout'); + console.log("LOADED!") + }, + };*/ + /*Vue.use(VueFormulate, { + plugins: [ Autocomplete ] + })*/ + + // Vue.use(VTooltip) + + // for (const [name, component] of Object.entries(pageComponents)) { + // Vue.component(name, component) + // } + // Vue.component('github-button', GithubButton) + // Vue.component('ArticleCard', ArticleCard) +} diff --git a/website/docs/.vuepress/public/assets/favicon/apple-touch-icon.png b/website/docs/.vuepress/public/assets/favicon/apple-touch-icon.png new file mode 100644 index 00000000..95100f18 Binary files /dev/null and b/website/docs/.vuepress/public/assets/favicon/apple-touch-icon.png differ diff --git a/website/docs/.vuepress/public/assets/img/docsfold-logo-sm.png b/website/docs/.vuepress/public/assets/img/docsfold-logo-sm.png new file mode 100644 index 00000000..de1e938c Binary files /dev/null and b/website/docs/.vuepress/public/assets/img/docsfold-logo-sm.png differ diff --git a/website/docs/.vuepress/public/assets/img/logo-jbay.png b/website/docs/.vuepress/public/assets/img/logo-jbay.png new file mode 100644 index 00000000..a78f9140 Binary files /dev/null and b/website/docs/.vuepress/public/assets/img/logo-jbay.png differ diff --git a/website/docs/.vuepress/public/assets/img/logo.png b/website/docs/.vuepress/public/assets/img/logo.png new file mode 100644 index 00000000..159fda76 Binary files /dev/null and b/website/docs/.vuepress/public/assets/img/logo.png differ diff --git a/examples/01-basic.html b/website/docs/.vuepress/public/examples/01-basic.html similarity index 94% rename from examples/01-basic.html rename to website/docs/.vuepress/public/examples/01-basic.html index 718a0de4..0aa58aa7 100644 --- a/examples/01-basic.html +++ b/website/docs/.vuepress/public/examples/01-basic.html @@ -42,13 +42,14 @@