Merge pull request #77 from wanli-song/develop

add debug button & fix anchor

build/webpack.demo.js

@@ -6,9 +6,10 @@ const webpack = require('webpack')
 const config = require('./config')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const env = process.env.NODE_ENV
 
 const webpackConfig = {
-  mode: 'development',
+  mode: env === 'production' ? 'production' : 'development',
   entry: './demo/deploymentIndex.js',
   output: {
     path: path.resolve(process.cwd()),

build/webpack.dev.js

@@ -6,9 +6,10 @@ const webpack = require('webpack')
 const config = require('./config')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const env = process.env.NODE_ENV
 
 const webpackConfig = {
-  mode: 'development',
+  mode: env === 'production' ? 'production' : 'development',
   entry: './demo/devIndex',
   output: {
     path: path.resolve(process.cwd()),

build/webpack.doc.js

@@ -7,9 +7,10 @@ const config = require('./config')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const env = process.env.NODE_ENV
 
 const webpackConfig = {
-  mode: 'production',
+  mode: env === 'development' ? 'development' : 'production',
   entry: './demo/deploymentIndex.js',
   output: {
     path: path.resolve(__dirname, '..', 'doc', 'dist'),

build/webpack.test.js

@@ -4,9 +4,10 @@
 const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const config = require('./config')
+const env = process.env.NODE_ENV
 
 const webpackConfig = {
-  mode: 'development',
+  mode: env === 'production' ? 'production' : 'development',
   entry: {
     app: ['./src/index.js']
   },

demo/entry.vue

@@ -4,7 +4,10 @@
       <doc-header
         :lang="lang"
         :items="flattenedItems"
+        :env="env"
+        :mode="mode"
         @lang-change="handleLangChange"
+        @mode-change="handleModeChange"
       />
       <n-layout class="home-layout" style="top: 64px; overflow: hidden;" mode="absolute">
         <router-view />
@@ -17,6 +20,7 @@
 import DocHeader from './header.vue'
 import menuOptions from './menuOptions'
 import { i18n } from './init'
+import { setState } from './store'
 
 export default {
   components: {
@@ -34,8 +38,17 @@ export default {
   beforeRouteUpdate (to, from, next) {
     this.$i18n.locale = to.params.lang
     next()
+    this.mode = localStorage.getItem('mode')
+  },
+  data () {
+    return {
+      mode: localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
+    }
   },
   computed: {
+    env () {
+      return process.env.NODE_ENV
+    },
     items () {
       return menuOptions(this.lang, this)
     },
@@ -72,6 +85,11 @@ export default {
   methods: {
     handleLangChange (lang) {
       this.lang = lang
+    },
+    handleModeChange (mode) {
+      this.mode = mode
+      localStorage.setItem('mode', mode)
+      setState(mode)
     }
   }
 }

demo/header.vue

@@ -6,6 +6,8 @@
     "searchPlaceholder": "搜索组件",
     "home": "首页",
     "doc": "文档",
+    "common": "常规",
+    "debug": "调试",
     "alreadyHome": "别点了，你已经在首页了"
   },
   "en-US": {
@@ -14,6 +16,8 @@
     "searchPlaceholder": "Search Components",
     "home": "Home",
     "doc": "Documentation",
+    "common": "Common",
+    "debug": "Debug",
     "alreadyHome": "You've already been in home page. No clicking."
   }
 }
@@ -50,12 +54,19 @@
         </div>
       </div>
       <div style="display: flex;">
-        <n-tag style="cursor: pointer; margin-right: 12px;" @click.native="handleThemeChange">
+        <n-tag class="nav-picker" @click.native="handleThemeChange">
           {{ themeOptions[theme].label }}
         </n-tag>
-        <n-tag style="cursor: pointer;" @click.native="handleLanguageChange">
+        <n-tag class="nav-picker" @click.native="handleLanguageChange">
           {{ langOptions[lang].label }}
         </n-tag>
+        <n-tag
+          v-if="env==='development'"
+          class="nav-picker"
+          @click.native="handleModeChange"
+        >
+          {{ modeOptions[mode].label }}
+        </n-tag>
       </div>
     </div>
   </n-layout-header>
@@ -82,6 +93,14 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    env: {
+      type: String,
+      default: null
+    },
+    mode: {
+      type: String,
+      default: null
     }
   },
   data () {
@@ -107,6 +126,16 @@ export default {
           label: '中文',
           next: 'zh-CN'
         }
+      },
+      modeOptions: {
+        'debug': {
+          label: 'Common',
+          next: 'common'
+        },
+        'common': {
+          label: 'Debug',
+          next: 'debug'
+        }
       }
     }
   },
@@ -183,6 +212,10 @@ export default {
     handleThemeChange () {
       this.NConfigProvider.$parent.theme = this.themeOptions[this.theme].next
     },
+
+    handleModeChange () {
+      this.$emit('mode-change', this.modeOptions[this.mode].next)
+    },
     handleLanguageChange () {
       this.$emit('lang-change', this.langOptions[this.lang].next)
     }
@@ -215,4 +248,11 @@ export default {
 .nav-menu .n-menu-item {
   height: 63px !important;
 }
+.nav-picker {
+  cursor: pointer;
+  margin-right: 12px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
 </style>

demo/init.js

@@ -146,6 +146,94 @@ const withPrefix = (prefix, routes) =>
     return route
   })
 
+const children = [
+  { path: '/intro', component: intro },
+  { path: '/start', component: start },
+  { path: '/dev-guildlines', component: devGuildlines },
+  { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
+  { path: '/n-layout', component: layout },
+  { path: '/n-gradient-text', component: gradientText },
+  {
+    path: '/n-icon',
+    component: () => import('./documentation/components/icon')
+  },
+  { path: '/n-checkbox', component: checkbox },
+  { path: '/n-button', component: button },
+  { path: '/n-switch', component: nswitch },
+  // { path: '/n-table', component: tableDemo },
+  { path: '/n-data-table', component: dataTable },
+  { path: '/n-input', component: input },
+  { path: '/n-select', component: select },
+  { path: '/n-cascader', component: cascader },
+  { path: '/n-custom-input', component: customInput },
+  { path: '/n-modal', component: modal },
+  { path: '/n-message', component: message },
+  { path: '/n-tooltip', component: tooltip },
+  { path: '/n-popover', component: popover },
+  { path: '/n-notification', component: notification },
+  { path: '/n-pagination', component: pagination },
+  { path: '/n-alert', component: alert },
+  { path: '/n-date-picker', component: datePicker },
+  { path: '/n-input-number', component: inputNumber },
+  { path: '/n-radio', component: radio },
+  { path: '/n-form', component: form },
+  { path: '/n-tabs', component: tabs },
+  { path: '/n-time-picker', component: timePicker },
+  { path: '/n-confirm', component: confirm },
+  { path: '/n-router-debug', component: routerDebug },
+  { path: '/n-modal-debug', component: modalDebug },
+  { path: '/n-scrollbar-debug', component: scrollbarDebug },
+  { path: '/n-badge', component: badge },
+  { path: '/n-steps', component: steps },
+  { path: '/n-collapse', component: collapse },
+  { path: '/n-progress', component: progress },
+  { path: '/n-tag', component: tag },
+  { path: '/n-menu', component: menu },
+  { path: '/n-timeline', component: timeline },
+  { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
+  { path: '/n-back-top', component: backTop },
+  { path: '/n-date-picker-debug', component: datePickerDebug },
+  { path: '/n-divider', component: divider },
+  { path: '/n-popconfirm', component: popconfirm },
+  { path: '/n-anchor', component: anchor },
+  { path: '/n-dropdown', component: dropdown },
+  { path: '/n-popselect', component: popselect },
+  { path: '/n-config-provider', component: configProvider },
+  { path: '/n--debug', component: suffixDebug },
+  { path: '/n-transfer', component: transfer },
+  { path: '/n-spin', component: spin },
+  { path: '/n-drawer', component: drawer },
+  { path: '/n-loading-bar', component: loadingBar },
+  { path: '/n-time', component: time },
+  { path: '/n-slider', component: slider },
+  { path: '/n-tree', component: tree },
+  { path: '/n-vertical-align-debug', component: verticalAlignDebug },
+  { path: '/n-affix', component: affix },
+  { path: '/n-statistic', component: statistic },
+  { path: '/n-grid', component: grid },
+  { path: '/n-breadcrumb', component: breadcrumb },
+  { path: '/n-config-consumer', component: configConsumer },
+  { path: '/n-descriptions', component: descriptions },
+  { path: '/n-list', component: list },
+  { path: '/n-card', component: card },
+  { path: '/n-avatar', component: avatar },
+  { path: '/n-result', component: result },
+  { path: '/n-thing', component: thing },
+  { path: '/n-auto-complete', component: autoComplete },
+  { path: '/n-empty', component: empty },
+  { path: '/n-theme', component: theme },
+  { path: '/n-element', component: element },
+  { path: '/n-log', component: log },
+  { path: '/n-code', component: code },
+  { path: '/n-typography', component: typography },
+  { path: '/n-upload', component: upload },
+  { path: '/n-table', component: table },
+  {
+    path: '/n-icon-transition-debug',
+    component: iconTransitionDebug
+  },
+  { path: '/n-select-debug', component: selectDebug }
+]
 const routes = [
   {
     path: '/:lang/:theme/n-popover-debug',
@@ -171,94 +259,7 @@ const routes = [
       {
         path: '/:lang/:theme/doc',
         component: DocEntry,
-        children: withPrefix('/:lang/:theme/doc', [
-          { path: '/intro', component: intro },
-          { path: '/start', component: start },
-          { path: '/dev-guildlines', component: devGuildlines },
-          { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
-          { path: '/n-layout', component: layout },
-          { path: '/n-gradient-text', component: gradientText },
-          {
-            path: '/n-icon',
-            component: () => import('./documentation/components/icon')
-          },
-          { path: '/n-checkbox', component: checkbox },
-          { path: '/n-button', component: button },
-          { path: '/n-switch', component: nswitch },
-          // { path: '/n-table', component: tableDemo },
-          { path: '/n-data-table', component: dataTable },
-          { path: '/n-input', component: input },
-          { path: '/n-select', component: select },
-          { path: '/n-cascader', component: cascader },
-          { path: '/n-custom-input', component: customInput },
-          { path: '/n-modal', component: modal },
-          { path: '/n-message', component: message },
-          { path: '/n-tooltip', component: tooltip },
-          { path: '/n-popover', component: popover },
-          { path: '/n-notification', component: notification },
-          { path: '/n-pagination', component: pagination },
-          { path: '/n-alert', component: alert },
-          { path: '/n-date-picker', component: datePicker },
-          { path: '/n-input-number', component: inputNumber },
-          { path: '/n-radio', component: radio },
-          { path: '/n-form', component: form },
-          { path: '/n-tabs', component: tabs },
-          { path: '/n-time-picker', component: timePicker },
-          { path: '/n-confirm', component: confirm },
-          { path: '/n-router-debug', component: routerDebug },
-          { path: '/n-modal-debug', component: modalDebug },
-          { path: '/n-scrollbar-debug', component: scrollbarDebug },
-          { path: '/n-badge', component: badge },
-          { path: '/n-steps', component: steps },
-          { path: '/n-collapse', component: collapse },
-          { path: '/n-progress', component: progress },
-          { path: '/n-tag', component: tag },
-          { path: '/n-menu', component: menu },
-          { path: '/n-timeline', component: timeline },
-          { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
-          { path: '/n-back-top', component: backTop },
-          { path: '/n-date-picker-debug', component: datePickerDebug },
-          { path: '/n-divider', component: divider },
-          { path: '/n-popconfirm', component: popconfirm },
-          { path: '/n-anchor', component: anchor },
-          { path: '/n-dropdown', component: dropdown },
-          { path: '/n-popselect', component: popselect },
-          { path: '/n-config-provider', component: configProvider },
-          { path: '/n--debug', component: suffixDebug },
-          { path: '/n-transfer', component: transfer },
-          { path: '/n-spin', component: spin },
-          { path: '/n-drawer', component: drawer },
-          { path: '/n-loading-bar', component: loadingBar },
-          { path: '/n-time', component: time },
-          { path: '/n-slider', component: slider },
-          { path: '/n-tree', component: tree },
-          { path: '/n-vertical-align-debug', component: verticalAlignDebug },
-          { path: '/n-affix', component: affix },
-          { path: '/n-statistic', component: statistic },
-          { path: '/n-grid', component: grid },
-          { path: '/n-breadcrumb', component: breadcrumb },
-          { path: '/n-config-consumer', component: configConsumer },
-          { path: '/n-descriptions', component: descriptions },
-          { path: '/n-list', component: list },
-          { path: '/n-card', component: card },
-          { path: '/n-avatar', component: avatar },
-          { path: '/n-result', component: result },
-          { path: '/n-thing', component: thing },
-          { path: '/n-auto-complete', component: autoComplete },
-          { path: '/n-empty', component: empty },
-          { path: '/n-theme', component: theme },
-          { path: '/n-element', component: element },
-          { path: '/n-log', component: log },
-          { path: '/n-code', component: code },
-          { path: '/n-typography', component: typography },
-          { path: '/n-upload', component: upload },
-          { path: '/n-table', component: table },
-          {
-            path: '/n-icon-transition-debug',
-            component: iconTransitionDebug
-          },
-          { path: '/n-select-debug', component: selectDebug }
-        ])
+        children: withPrefix('/:lang/:theme/doc', children)
       }
     ]
   },

demo/menuOptions.js

@@ -1,3 +1,5 @@
+const env = process.env.NODE_ENV
+
 const appendCounts = item => {
   if (!item.childItems) {
     item.count = 1
@@ -34,8 +36,8 @@ const appendCounts = item => {
   }
 }
 
-const appendDebugDemos = (item) => {
-  if (process.env.NODE_ENV === 'development') {
+const appendDebugDemos = (item, mode) => {
+  if (env === 'development' && mode === 'debug') {
     return [item]
   } else return []
 }
@@ -940,7 +942,7 @@ export default function (locale, instance) {
               path: `/${instance.lang}/${instance.theme}/doc` + '/n-select-debug'
             }
           ]
-        })
+        }, instance.mode)
     ]
   }
 }

demo/store.js

@@ -0,0 +1,7 @@
+export const state = {
+  mode: localStorage.getItem('mode')
+}
+
+export function setState (mode) {
+  state.mode = mode
+}

demo/utils/ComponentDemo.vue

@@ -13,6 +13,7 @@
 
 <template>
   <n-card
+    v-if="isShow"
     class="demo-card"
     :segmented="{
       footer: true
@@ -56,6 +57,7 @@
 
 <script>
 import mdCode from '../../src/_icons/md-code'
+import { state } from '../store'
 
 export default {
   components: {
@@ -70,7 +72,16 @@ export default {
     return {
       showCode: false,
       contentStyle: null,
-      controller: {}
+      controller: {},
+      isShow: true,
+      name: '',
+      isDebug: false,
+      state: state
+    }
+  },
+  computed: {
+    mode () {
+      return this.state.mode
     }
   },
   watch: {
@@ -82,16 +93,35 @@ export default {
         this.controller.updatePosition()
         this.contentStyle = null
       })
+    },
+    mode () {
+      this.init()
     }
   },
   mounted () {
-    const map = this.NDocumentation.anchorLinkMap
-    map.set(this.$el.id, String(this.$scopedSlots.title()[0].text).trim())
-    this.NDocumentation.anchorLinkMap = new Map(map, this.$scopedSlots.title()[0].text.trim())
+    this.name = this.$el.id
+    this.init()
   },
   methods: {
     toggleCodeDisplay () {
       this.showCode = !this.showCode
+    },
+    init () {
+      const map = this.NDocumentation.anchorLinkMap
+      this.isDebug = this.name && (this.name.indexOf('debug') > -1 || this.name.indexOf('Debug') > -1)
+      if (this.isDebug) {
+        if (this.mode === 'debug') {
+          this.isShow = true
+          map.set(this.name, String(this.$scopedSlots.title()[0].text).trim())
+        } else {
+          this.isShow = false
+          map.delete(this.name)
+        }
+      } else {
+        map.set(this.name, String(this.$scopedSlots.title()[0].text).trim())
+      }
+
+      this.NDocumentation.anchorLinkMap = new Map(map, this.$scopedSlots.title()[0].text.trim())
     }
   }
 }

package.json

@@ -9,11 +9,11 @@
     "build:icon": "npm run clean && node build/buildIcon.js",
     "build:js": "npm run clean && rollup -c",
     "build:demo": "npm run build && npm run demo",
-    "build:doc": "npm run build && cross-env NODE_ENV=production && rm -rf doc/dist && webpack --config build/webpack.doc.js",
+    "build:doc": "npm run build  && rm -rf doc/dist && cross-env NODE_ENV=development webpack --config build/webpack.doc.js --mode=production",
     "build": "npm run clean && node build/buildStyle.js && node build/buildIcon.js && rollup -c",
     "clean": "rm -rf lib && rm -rf es && rm -rf dist",
-    "demo": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.demo.js",
-    "dev": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.dev.js",
+    "demo": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
     "lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"styles/**/*.scss\"",
     "lint:js": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\"",
     "lint:style": "stylelint \"styles/**/*.scss\"",

src/Anchor/src/BaseAnchor.vue

@@ -159,7 +159,7 @@ export default {
           this.activeHref = href
           const top = getOffset(linkEl, this.container).top + (this.container.scrollTop || 0)
           this.container.scrollTo({
-            top: top - this.bound
+            top: top
           })
           if (!transition) {
             this.disableTransitionOneTick()