feat: add play in codesandbox

components/OneDemo.vue

@@ -20,6 +20,25 @@
   >
     <slot name="desc"/>
   </section>
+  <section class="actions">
+    <veui-button
+      v-tooltip="t('playInCsb')"
+      ui="icon"
+      @click="play"
+    >
+      <veui-icon
+        scale="0.8"
+        name="csb"
+      />
+    </veui-button>
+    <veui-button
+      v-tooltip="t(localExpanded ? 'hideCode' : 'showCode')"
+      ui="icon"
+      @click="localExpanded = !localExpanded"
+    >
+      <veui-icon :name="localExpanded ? 'code-off' : 'code'"/>
+    </veui-button>
+  </section>
   <section
     v-if="$slots.source"
     ref="source"
@@ -28,27 +47,23 @@
   >
     <slot name="source"/>
   </section>
-  <button
-    class="toggle"
-    @click="localExpanded = !localExpanded"
-  >
-    <veui-icon
-      class="arrow"
-      name="chevron-down"
-    /> {{ t(localExpanded ? 'hideCode' : 'showCode') }}
-  </button>
 </article>
 </template>
 
 <script>
-import { Icon } from 'veui'
+import { Button, Icon } from 'veui'
+import tooltip from 'veui/directives/tooltip'
 import i18n from 'veui/mixins/i18n'
 import { BrowserWindow } from 'vue-windows'
-import 'veui-theme-dls-icons/chevron-down'
+import { createCodeSandbox } from './play'
 
 export default {
   name: 'one-demo',
+  directives: {
+    tooltip
+  },
   components: {
+    'veui-button': Button,
     'veui-icon': Icon,
     BrowserWindow
   },
@@ -78,8 +93,31 @@ export default {
     style.height = source.offsetHeight
     this.sourceHeight = source.offsetHeight
     style.height = '0'
+  },
+  methods: {
+    play () {
+      createCodeSandbox(this.$refs.source.textContent.replace(/from 'veui'/g, 'from \'veui/dist/veui.esm\''))
+    }
   }
 }
+
+Icon.register({
+  'code': {
+    width: 24,
+    height: 24,
+    d: 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z'
+  },
+  'code-off': {
+    width: 24,
+    height: 24,
+    d: 'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
+  },
+  'csb': {
+    width: 32,
+    height: 32,
+    d: 'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
+  }
+})
 </script>
 
 <style src="vue-windows/dist/vue-windows.css"></style>
@@ -88,14 +126,6 @@ export default {
 .one-demo
   overflow hidden
 
-.arrow
-  transition transform 0.3s
-  height 1.2em
-  margin-right 4px
-
-  .one-demo.expanded &
-    transform rotateZ(180deg)
-
 .demo
   border 1px solid #eee
   border-top-left-radius 4px
@@ -120,26 +150,27 @@ export default {
 
 .desc
 .source >>> pre
-.toggle
+.actions
   margin-top -1px
 
-.toggle
+.actions
   position relative
   display flex
   justify-content center
   align-items center
   line-height 2
   width 100%
-  height 40px
+  height 48px
   border 1px solid #eee
   border-bottom-left-radius 4px
   border-bottom-right-radius 4px
   background-color #fff
   transition background-color 0.3s
   outline none
-  cursor pointer
 
-  &:hover
+  .veui-button
-  &.focus-visible
+    font-size 18px
-    background-color #fafafa
+
+  .veui-button + .veui-button
+    margin-left 8px
 </style>

components/play.js

@@ -0,0 +1,161 @@
+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.1",
+    "veui-theme-dls": "2.1.1",
+    "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 = `<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
+`
+
+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 = `<template>
+<main>
+  <demo/>
+</main>
+</template>
+
+<script>
+import Demo from './Demo'
+
+export default {
+  components: {
+    Demo
+  }
+}
+</script>
+
+<style scoped>
+main {
+  padding: 24px;
+}
+</style>
+`
+
+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 = `<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      background-color: #040404;
+    }
+    .loading {
+      position: absolute;
+      top: 38.4%;
+      left: 50%;
+      transform: translate(-50%, -38.4%);
+      height: 48px;
+      font-weight: 400;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  ${genLoading()}
+</body>
+</html>
+`
+
+function genLoading () {
+  const { contents, attrs } = loading
+  const attrsStr = Object.entries({
+    ...attrs,
+    class: `loading ${attrs.class}`
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ')
+  return `<svg ${attrsStr}>${contents}</svg>`
+}

one/docs/components/number-input.md

@@ -34,7 +34,7 @@
 | `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
 | `max` | `number` | - | 允许的最大值。 |
 | `min` | `number` | - | 允许的最小值。 |
-| `decimalPlace` | `number` | 0 | 数值的小数精度位数，默认精确到整数位，`-1` 表示不处理精度。 |
+| `decimal-place` | `number` | 0 | 数值的小数精度位数，默认精确到整数位，`-1` 表示不处理精度。 |
 
 ^^^ui
 预设样式。

one/docs/components/slider.md

@@ -16,7 +16,7 @@
 
 ### 步进
 
-使用 `step` 属性来指定步进值，使点击调节按钮或按下 <kbd>▴</kbd>、<kbd>▾</kbd> 键时根据指定步进值来调整输入值。
+使用 `step` 属性来指定步进值，使点击调节按钮或按下 <kbd>←</kbd>、<kbd>→</kbd> 键时根据指定步进值来调整输入值。
 
 [[ demo src="/demo/slider/steps.vue" ]]
 

one/docs/components/tree.md

@@ -98,8 +98,8 @@
 | -- | -- |
 | `item` | [^item] |
 | `item-label` | 每个节点的文本区域。作用域参数与 `item` 插槽一致。 |
-| `item-prepend` | 每个节点的文本之前的区域。作用域参数与 `item` 插槽一致。 |
+| `item-before` | 每个节点的文本之前的区域。作用域参数与 `item` 插槽一致。 |
-| `item-append` | 每个节点的文本之后的区域。作用域参数与 `item` 插槽一致。 |
+| `item-after` | 每个节点的文本之后的区域。作用域参数与 `item` 插槽一致。 |
 
 ^^^item
 每个节点的整个内容区域。

one/docs/demo/carousel/indicator.vue

@@ -22,7 +22,7 @@
       :datasource="items"
       :indicator="indicator"
       :indicator-position="indicatorPosition"
-      :indicator-alignment="align"
+      :indicator-align="align"
     />
   </section>
 </article>

one/docs/demo/carousel/slides.vue

@@ -8,7 +8,7 @@
       :slides-per-view="2"
       effect="slide"
       indicator-position="outside"
-      indicator-alignment="end"
+      indicator-align="end"
       wrap
     />
     <h4>2 view, 1 group</h4>
@@ -18,7 +18,7 @@
       :slides-per-view="2"
       effect="slide"
       indicator-position="outside"
-      indicator-alignment="end"
+      indicator-align="end"
       wrap
     />
   </section>

one/docs/en-US/components/tree.md

@@ -97,6 +97,8 @@ Merge strategy for selected values. When all child nodes under a node are select
 | -- | -- |
 | `item` | [^item] |
 | `item-label` | The label of each node. Shares the same scope properties with the `item` slot. |
+| `item-before` | The area before the label of each node. Shares the same scope properties with the `item` slot. |
+| `item-after` | The area after the label of each node. Shares the same scope properties with the `item` slot. |
 
 ^^^item
 The content of each entire node.

package.json

@@ -24,6 +24,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-veui": "^2.1.0",
+    "dls-graphics": "^1.0.0-alpha.3",
     "dls-icons-vue": "^0.14.0",
     "eslint": "^5.15.1",
     "eslint-config-prettier": "^4.1.0",
@@ -71,10 +72,10 @@
     "stylus-loader": "^3.0.2",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0",
-    "veui": "^2.1.0",
+    "veui": "^2.1.1",
-    "veui-loader": "^2.1.0",
+    "veui-loader": "^2.1.1",
-    "veui-theme-dls": "^2.1.0",
+    "veui-theme-dls": "^2.1.1",
-    "veui-theme-dls-icons": "^2.1.0",
+    "veui-theme-dls-icons": "^2.1.1",
     "vue-awesome": "^4.1.0",
     "vue-i18n": "^8.16.0",
     "vue-windows": "^0.2.4"

plugins/l10n.js

@@ -4,7 +4,8 @@ i18n.register(
   'zh-Hans',
   {
     showCode: '显示代码',
-    hideCode: '隐藏代码'
+    hideCode: '隐藏代码',
+    playInCsb: '在 CodeSandbox 中打开'
   },
   {
     ns: 'onedemo'
@@ -15,7 +16,8 @@ i18n.register(
   'en-US',
   {
     showCode: 'Show code',
-    hideCode: 'Hide code'
+    hideCode: 'Hide code',
+    playInCsb: 'Open in CodeSandbox'
   },
   {
     ns: 'onedemo'