feat(upload): create a scaffold for upload, wip

demo/documentation/components/upload/enUS/index.md

@@ -0,0 +1 @@
+# Upload

demo/documentation/components/upload/zhCN/basic.md

@@ -0,0 +1,4 @@
+# 基础用法
+```html
+<n-upload />
+```

demo/documentation/components/upload/zhCN/index.md

@@ -0,0 +1,5 @@
+# 上传 Upload
+## 演示
+```demo
+basic
+```

demo/init.js

@@ -72,6 +72,7 @@ import theme from './documentation/theme'
 import element from './documentation/components/element'
 import log from './documentation/components/log'
 import code from './documentation/components/code'
+import upload from './documentation/components/upload'
 
 import demo from './demo'
 import ComponentDemo from './utils/ComponentDemo'
@@ -221,9 +222,8 @@ const routes = [
       { path: '/n-element', component: element },
       { path: '/n-log', component: log },
       { path: '/n-code', component: code },
-      {
-        path: '/n-typography', component: typography
-      },
+      { path: '/n-typography', component: typography },
+      { path: '/n-upload', component: upload },
       {
         path: '/n-icon-transition-debug',
         component: iconTransitionDebug

demo/menuOptions.js

@@ -273,6 +273,12 @@ export default function (locale, instance) {
             title: '穿梭框',
             titleExtra: 'Transfer',
             path: `/${instance.lang}/${instance.theme}` + '/n-transfer'
+          },
+          {
+            name: 'Upload',
+            title: '上传',
+            titleExtra: 'Upload',
+            path: `/${instance.lang}/${instance.theme}` + '/n-upload'
           }
         ]
       }),
@@ -717,6 +723,10 @@ export default function (locale, instance) {
           {
             name: 'Transfer',
             path: `/${instance.lang}/${instance.theme}` + '/n-transfer'
+          },
+          {
+            name: 'Upload',
+            path: `/${instance.lang}/${instance.theme}` + '/n-upload'
           }
         ]
       }),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

src/Upload/index.js

@@ -0,0 +1,7 @@
+import Upload from './src/Upload.vue'
+
+Upload.install = function (Vue) {
+  Vue.component(Upload.name, Upload)
+}
+
+export default Upload

src/Upload/src/Upload.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="n-upload"
+    @click="handleClick"
+  >
+    <input
+      ref="input"
+      type="file"
+      class="~n-upload__file-input"
+      :accept="accept"
+      :multiple="multiple"
+      @change="handleFileInputChange"
+    >
+    <div>
+      <div v-for="(file, index) in fileList" :key="index">
+        {{ file.name }} <n-progress type="line" :show-indicator="false" :percentage="50" style="width: 50%;" /></n-progress>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NProgress from '../../Progress'
+
+export default {
+  name: 'NUpload',
+  components: {
+    NProgress
+  },
+  props: {
+    accept: {
+      type: [String, Array],
+      default: null
+    },
+    action: {
+      type: String,
+      default: null
+    },
+    method: {
+      type: String,
+      default: 'POST'
+    },
+    onUpload: {
+      type: Function,
+      default: next => next
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    headers: {
+      type: Object,
+      default: null
+    },
+    withCredentials: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      formData: new FormData()
+    }
+  },
+  methods: {
+    handleClick () {
+      // this.$refs.input.click()
+    },
+    handleFileInputChange (e) {
+      const currentFileList = this.fileList
+      this.fileList = currentFileList.concat(e.target.files)
+    },
+    submit () {
+      // clear the queue of current form data
+    }
+  }
+}
+</script>

src/index.js

@@ -63,6 +63,7 @@ import Element from './Element'
 import Log from './Log'
 import Code from './Code'
 import Typography from './Typography'
+import Upload from './Upload'
 
 import zhCN from './locale/zhCN'
 import enUS from './locale/enUS'
@@ -144,6 +145,7 @@ export default create({
     Log,
     Code,
     Typography,
+    Upload,
     /**
      * Deprecated
      */

styles/Upload.scss

@@ -0,0 +1,11 @@
+@import 'mixins/mixins.scss';
+
+@include themes-mixin {
+  @include b(upload) {
+    @include e(file-input) {
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+  }
+}

styles/index.scss

@@ -70,4 +70,5 @@
 @import "./AutoComplete.scss";
 @import "./Empty.scss";
 @import "./Log.scss";
-@import "./Typography.scss";
+@import "./Typography.scss";
+@import "./Upload.scss";

styles/themes/dark/components/Progress.scss

@@ -1,5 +1,5 @@
 @mixin setup-dark-progress {
-  $--progress-rail-color: rgba(255, 255, 255, .1) !global;
+  $--progress-rail-color: $--n-alpha-action-panel-color !global;
   $--progress-fill-color: (
     'default': $--info-6,
     'info': $--info-6,

think.md

@@ -146,6 +146,7 @@ Previously, it would not work with single quotes:
 33. Anchor 的另一种模式，追踪内容按照的是中间范围而不是自身大小
 34. <del>bug md-loader alert 内的 code 不显示</del> 不是 bug，md 就这么渲染
 35. backtop mounted blink
+36. Tab keep alive
 
 
 ```