From 6fd9a5a4f4923effe82fdd4750d5cdbfcd98f8e0 Mon Sep 17 00:00:00 2001 From: Justineo Date: Sat, 20 Nov 2021 13:22:48 +0800 Subject: [PATCH] feat: use live editor on desktop --- common/transform.js | 26 + components/OneDemo.vue | 101 +- components/OneLive.vue | 262 +++++ components/OneRepl.vue | 104 ++ nuxt.config.js | 30 +- one/docs/components/cascader.md | 2 +- one/docs/components/dropdown.md | 2 +- one/docs/components/search-box.md | 2 +- one/docs/demo/alert/extra.vue | 8 +- one/docs/demo/alert/title.vue | 4 +- one/docs/demo/anchor/normal.vue | 1 - one/docs/demo/anchor/offset.vue | 1 - one/docs/demo/anchor/sticky.vue | 1 - one/docs/demo/carousel/ratio.vue | 2 +- one/docs/demo/pagination/size.vue | 40 +- one/docs/demo/table/loading.vue | 2 +- one/docs/demo/table/order.vue | 4 +- package-lock.json | 1642 ++++++++++++----------------- package.json | 8 +- plugins/l10n.js | 52 + 20 files changed, 1257 insertions(+), 1037 deletions(-) create mode 100644 common/transform.js create mode 100644 components/OneLive.vue create mode 100644 components/OneRepl.vue diff --git a/common/transform.js b/common/transform.js new file mode 100644 index 0000000..5f5d10e --- /dev/null +++ b/common/transform.js @@ -0,0 +1,26 @@ +import less from 'less/dist/less' + +const lessRE = /]* lang="less")?[^>]*>([\s\S]*?)<\/style>/gi + +export function transformLessCode (sfcCode) { + return sfcCode.replace(lessRE, (_, p1, p2) => { + const lessCode = p2.trim() + const cssCode = render(lessCode) + return `${cssCode}` + }) +} + +function render (code) { + let css = null + + less.render(code, { + syncImport: true + }, (err, output) => { + if (err) { + throw err + } + css = output.css + }) + + return css +} diff --git a/components/OneDemo.vue b/components/OneDemo.vue index 477c8a8..9708e44 100644 --- a/components/OneDemo.vue +++ b/components/OneDemo.vue @@ -1,7 +1,7 @@ @@ -208,4 +234,33 @@ Icon.register({ top 50% transform translateY(-50%) font-size 12px + +.one-demo-editor + position fixed + top 0 + left 0 + right 0 + bottom 0 + z-index 10 + background-color #fff + +.editor-enter-active +.editor-leave-active + transform-origin 50% 50% + transition all 0.3s + +.editor-enter +.editor-leave-to + opacity 0 + transform scale(0.99) translateY(3px) + +.toggle-source + display none + +@media (max-width 480px) + .toggle-source + display inline-block + + .toggle-editor + display none diff --git a/components/OneLive.vue b/components/OneLive.vue new file mode 100644 index 0000000..0d5b4ef --- /dev/null +++ b/components/OneLive.vue @@ -0,0 +1,262 @@ + + + + + diff --git a/components/OneRepl.vue b/components/OneRepl.vue new file mode 100644 index 0000000..946092f --- /dev/null +++ b/components/OneRepl.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/nuxt.config.js b/nuxt.config.js index 205fde0..6c49a18 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -58,7 +58,7 @@ module.exports = { transpile: ['veui', 'vue-awesome', 'resize-detector', 'less-plugin-dls', 'dls-graphics'], babel: { - plugins: ['veui', 'lodash'] + plugins: ['veui'] }, loaders: { @@ -104,6 +104,34 @@ module.exports = { expr: "process.env.VUE_ENV === 'server'" } }) + + config.resolve.alias.vue$ = 'vue/dist/vue.esm.js' + config.resolve.alias['vue-inbrowser-compiler-utils'] = '@justfork/vue-inbrowser-compiler-utils' + }, + + optimization: { + splitChunks: { + cacheGroups: { + veui: { + test: /node_modules[\\/]veui/, + chunks: 'all', + priority: 20, + name: true + }, + 'veui-theme-dls-icons': { + test: /node_modules[\\/]veui-theme-dls-icons/, + chunks: 'all', + priority: 20, + name: true + }, + 'vue-live': { + test: /node_modules[\\/]vue-live/, + chunks: 'all', + priority: 20, + name: true + } + } + } } } } diff --git a/one/docs/components/cascader.md b/one/docs/components/cascader.md index 737cf31..c4e05d6 100644 --- a/one/docs/components/cascader.md +++ b/one/docs/components/cascader.md @@ -70,7 +70,7 @@ | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | | ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 | | ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 | -| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | | ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui diff --git a/one/docs/components/dropdown.md b/one/docs/components/dropdown.md index 45215b7..4acb2e2 100644 --- a/one/docs/components/dropdown.md +++ b/one/docs/components/dropdown.md @@ -57,7 +57,7 @@ | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 | | ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 | -| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | | ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui diff --git a/one/docs/components/search-box.md b/one/docs/components/search-box.md index 9683d51..dbc7b31 100644 --- a/one/docs/components/search-box.md +++ b/one/docs/components/search-box.md @@ -41,7 +41,7 @@ | ``expanded`` | `boolean=` | `false` | [^expanded] | | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | -| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | | ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui diff --git a/one/docs/demo/alert/extra.vue b/one/docs/demo/alert/extra.vue index 3938a86..fdee57f 100644 --- a/one/docs/demo/alert/extra.vue +++ b/one/docs/demo/alert/extra.vue @@ -6,9 +6,13 @@ message="恭喜你,你的请求已成功处理" closable > - + 恭喜你,你的请求已成功处理 diff --git a/one/docs/demo/alert/title.vue b/one/docs/demo/alert/title.vue index 3ab5239..2ae4858 100644 --- a/one/docs/demo/alert/title.vue +++ b/one/docs/demo/alert/title.vue @@ -10,7 +10,9 @@ type="success" > Your profile has been updated. - + diff --git a/one/docs/demo/anchor/normal.vue b/one/docs/demo/anchor/normal.vue index 1a83306..f64c00d 100644 --- a/one/docs/demo/anchor/normal.vue +++ b/one/docs/demo/anchor/normal.vue @@ -101,7 +101,6 @@ export default { top: 10px; } } - diff --git a/one/docs/demo/anchor/offset.vue b/one/docs/demo/anchor/offset.vue index a1493df..60fb8c2 100644 --- a/one/docs/demo/anchor/offset.vue +++ b/one/docs/demo/anchor/offset.vue @@ -132,7 +132,6 @@ export default { top: 50px; } } - diff --git a/one/docs/demo/anchor/sticky.vue b/one/docs/demo/anchor/sticky.vue index 7ad02c0..1489c62 100644 --- a/one/docs/demo/anchor/sticky.vue +++ b/one/docs/demo/anchor/sticky.vue @@ -108,7 +108,6 @@ export default { top: 50px; } } - diff --git a/one/docs/demo/carousel/ratio.vue b/one/docs/demo/carousel/ratio.vue index c471295..08387bc 100644 --- a/one/docs/demo/carousel/ratio.vue +++ b/one/docs/demo/carousel/ratio.vue @@ -46,7 +46,7 @@ export default { } -