+
- {{item.i}}
-
- -
- - -
-
[x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- [x, y, w, h]:
- , 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 = 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, - 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)) { - removeVnodes([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; - dir.oldArg = oldDir.arg; - 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) }} @@ -130,4 +144,74 @@ export default { } +.docsfold-features { + width: 90%; + margin-left: auto; + margin-right: auto; + /*margin-top: 5px;*/ + height: 90%; + /*text-align: center!important;*/ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.docsfold-features img { + width: 30%; + height: auto; + object-fit: contain; +} + +.docsfold-features .content { + width: 50%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + align-items: center; + padding: 10px; +} + +.docsfold-features h2 { + font-size: 18px; + margin-bottom: 10px; + border:0; +} + +.docsfold-features .btn-read-more:hover { + background: #4104f1; +} + +.docsfold-features .btn-read-more { + line-height: 0; + /*padding: 15px 40px;*/ + padding: 10px 20px; + border-radius: 4px; + transition: 0.5s; + color: #fff; + background: #4154f1; + box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3); + /*cursor: pointer;*/ +} + +.docsfold-features .btn-read-more span { + font-family: "Nunito", sans-serif; + font-weight: 600; + font-size: 16px; + letter-spacing: 1px; +} + +.docsfold-features .btn-read-more i { + margin-left: 5px; + font-size: 18px !important; + transition: 0.3s; + color: #fff !important; +} + +.docsfold-features .btn-read-more:hover i { + transform: translateX(5px); +} + + diff --git a/website/docs/.vuepress/config.js b/website/docs/.vuepress/config.js index 91530efd..96243a04 100644 --- a/website/docs/.vuepress/config.js +++ b/website/docs/.vuepress/config.js @@ -3,69 +3,147 @@ const title = 'Vue Grid Layout - ️A grid layout system for Vue.js' module.exports = { base: "/vue-grid-layout/", - title, - description, + 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: { - sidebar: { - '/guide/': [ - { - title: "Guide", - collapsable: false, - children: [ - '', - 'usage', - 'properties', - 'events', - ] - }, - { - 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', - ] - } - ] - }, - nav: [ - {text: 'Home', link: '/'}, - {text: 'Guide', link: '/guide/'}, - {text: 'Changelog', link: '/changelog/'} - ], - searchPlaceholder: 'Search...', smoothScroll: true, logo: '/assets/img/logo.png', repo: 'jbaysolutions/vue-grid-layout', docsDir: 'website/docs', editLinks: true, - editLinkText: 'Help improve this page!', - lastUpdated: 'Last Updated', - /*algolia: { - apiKey: 'XXX', - indexName: 'vuegridlayout' - }*/ + 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', { + /*['@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', 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/examples/06-responsive.html b/website/docs/.vuepress/public/examples/06-responsive.html index a199dac9..6bf12792 100644 --- a/website/docs/.vuepress/public/examples/06-responsive.html +++ b/website/docs/.vuepress/public/examples/06-responsive.html @@ -52,7 +52,7 @@ - +