diff --git a/common/play/index.js b/common/play/index.js new file mode 100644 index 0000000..a536ea3 --- /dev/null +++ b/common/play/index.js @@ -0,0 +1,66 @@ +import { loading } from 'dls-graphics' +/* eslint-disable import/no-webpack-loader-syntax */ +import meta from '!!raw-loader!./templates/package.raw' +import prettier from '!!raw-loader!./templates/.prettierrc.raw' +import index from '!!raw-loader!./templates/index.raw.html' +import landing from '!!raw-loader!./templates/landing.raw.html' +import main from '!!raw-loader!./templates/main.raw.js' +import app from '!!raw-loader!./templates/App.raw.vue' +/* eslint-enable import/no-webpack-loader-syntax */ + +const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define' + +export function createCodeSandbox (sfc, { locale }) { + const win = window.open() + win.document.write(landing.replace('{{loading}}', genLoading())) + fetch(`${API_CSB}?json=1`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json' + }, + body: JSON.stringify({ + files: { + ...getTemplateFiles({ locale }), + 'src/Demo.vue': { + content: sfc + } + } + }) + }) + .then(res => res.json()) + .then(data => { + win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue` + }) +} + +function getTemplateFiles ({ locale }) { + return { + 'package.json': { + content: meta + }, + '.prettierrc': { + content: prettier + }, + 'public/index.html': { + content: index + }, + 'src/main.js': { + content: main.replace('{{locale}}', locale) + }, + 'src/App.vue': { + content: app + } + } +} + +function genLoading () { + const { contents, attrs } = loading + const attrsStr = Object.entries({ + ...attrs, + class: `loading ${attrs.class}` + }) + .map(([key, value]) => `${key}="${value}"`) + .join(' ') + return `${contents}` +} diff --git a/common/play/templates/.prettierrc.raw b/common/play/templates/.prettierrc.raw new file mode 100644 index 0000000..e2142eb --- /dev/null +++ b/common/play/templates/.prettierrc.raw @@ -0,0 +1,11 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} diff --git a/common/play/templates/App.raw.vue b/common/play/templates/App.raw.vue new file mode 100644 index 0000000..70b71d5 --- /dev/null +++ b/common/play/templates/App.raw.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/common/play/templates/index.raw.html b/common/play/templates/index.raw.html new file mode 100644 index 0000000..65413b2 --- /dev/null +++ b/common/play/templates/index.raw.html @@ -0,0 +1,12 @@ + + + + + + + VEUI Playground + + +
+ + diff --git a/common/play/templates/landing.raw.html b/common/play/templates/landing.raw.html new file mode 100644 index 0000000..f491baf --- /dev/null +++ b/common/play/templates/landing.raw.html @@ -0,0 +1,33 @@ + + + + + + + VEUI Playground + + + + {{loading}} + + diff --git a/common/play/templates/main.raw.js b/common/play/templates/main.raw.js new file mode 100644 index 0000000..11f2ffb --- /dev/null +++ b/common/play/templates/main.raw.js @@ -0,0 +1,11 @@ +import Vue from 'vue' +import App from './App.vue' +import 'veui-theme-dls/dist/dls.esm' +import 'veui-theme-dls-icons/dist/icons.esm' +import 'veui/dist/locale.{{locale}}.esm' + +Vue.config.productionTip = false + +new Vue({ + render: (h) => h(App) +}).$mount('#app') diff --git a/common/play/templates/package.raw b/common/play/templates/package.raw new file mode 100644 index 0000000..0200c61 --- /dev/null +++ b/common/play/templates/package.raw @@ -0,0 +1,7 @@ +{ + "dependencies": { + "veui": "2.1.2", + "veui-theme-dls": "2.1.2", + "vue": "2.6.14" + } +} diff --git a/components/OneDemo.vue b/components/OneDemo.vue index 9b059d9..27fa578 100644 --- a/components/OneDemo.vue +++ b/components/OneDemo.vue @@ -57,7 +57,8 @@ import { Button, Icon } from 'veui' import tooltip from 'veui/directives/tooltip' import i18n from 'veui/mixins/i18n' import { BrowserWindow } from 'vue-windows' -import { createCodeSandbox } from './play' +import { getLocale } from '../common/i18n' +import { createCodeSandbox } from '../common/play' export default { name: 'one-demo', @@ -98,14 +99,14 @@ export default { }, methods: { play () { - createCodeSandbox(preprocess(this.$refs.source.textContent)) + let locale = getLocale(this.$route.path) + createCodeSandbox(preprocess(this.$refs.source.textContent), { locale }) } } } function preprocess (code) { return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`) - .replace(/(?:import 'veui-theme-dls-icons[^']+'\n)+/g, `import 'veui-theme-dls-icons/dist/icons.esm'\n`) } Icon.register({ diff --git a/components/play.js b/components/play.js deleted file mode 100644 index 7fe9d7e..0000000 --- a/components/play.js +++ /dev/null @@ -1,161 +0,0 @@ -import { loading } from 'dls-graphics' - -const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define' - -export function createCodeSandbox (sfc) { - const win = window.open() - win.document.write(landing) - fetch(`${API_CSB}?json=1`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Accept: 'application/json' - }, - body: JSON.stringify({ - files: { - ...templateFiles, - 'src/Demo.vue': { - content: sfc - } - } - }) - }) - .then(res => res.json()) - .then(data => { - win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue` - }) -} - -const meta = `{ - "dependencies": { - "veui": "2.1.2", - "veui-theme-dls": "2.1.2", - "vue": "2.6.14" - } -} -` - -const prettier = `{ - "printWidth": 80, - "tabWidth": 2, - "useTabs": false, - "semi": false, - "singleQuote": true, - "trailingComma": "none", - "bracketSpacing": true, - "jsxBracketSameLine": false, - "fluid": false -} -` - -const index = ` - - - - - - VEUI Playground - - -
- - -` - -const main = `import Vue from 'vue' -import App from './App.vue' -import 'veui-theme-dls/dist/dls.esm' - -Vue.config.productionTip = false - -new Vue({ - render: (h) => h(App) -}).$mount('#app') -` - -const app = ` - - - - -` - -const templateFiles = { - 'package.json': { - content: meta - }, - '.prettierrc': { - content: prettier - }, - 'public/index.html': { - content: index - }, - 'src/main.js': { - content: main - }, - 'src/App.vue': { - content: app - } -} - -const landing = ` - - - - - - VEUI Playground - - - - ${genLoading()} - - -` - -function genLoading () { - const { contents, attrs } = loading - const attrsStr = Object.entries({ - ...attrs, - class: `loading ${attrs.class}` - }) - .map(([key, value]) => `${key}="${value}"`) - .join(' ') - return `${contents}` -} diff --git a/nuxt.config.js b/nuxt.config.js index ae0db48..96bc12b 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -39,7 +39,7 @@ module.exports = { css: false }, - css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'], + css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', 'veui-theme-dls/'], plugins: [ { src: '~plugins/i18n.js' }, @@ -82,10 +82,6 @@ module.exports = { options: { locale: ['zh-Hans', 'en-US'], modules: [ - { - package: 'veui-theme-dls', - fileName: '{module}.less' - }, { package: 'veui-theme-dls', fileName: '{module}.js', diff --git a/one/docs/demo/directives/drag/axis.vue b/one/docs/demo/directives/drag/axis.vue index cbfc170..a0ed43d 100644 --- a/one/docs/demo/directives/drag/axis.vue +++ b/one/docs/demo/directives/drag/axis.vue @@ -18,7 +18,7 @@