Merge branch 'master' of ***REMOVED*** into develop

2024-12-09 04:31:35 +08:00 · 2019-06-26 20:16:16 +08:00 · 2019-06-26 20:16:16 +08:00 · 23e8e64cf3
commit 23e8e64cf3
parent 9182289256 01c01ce27d
15 changed files with 215 additions and 152 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,7 @@
 # naive-ui
 TuSimple Vue-Based Frontend Component Library
+# Documentation
+http://***REMOVED***/#/start
 # Start Develop / 开始开发
 - packages
 - packages/commons
@ -9,7 +11,7 @@ TuSimple Vue-Based Frontend Component Library
 - demo
 - build
 # Want to see how component works / 想看看组件效果？
-`npm run dev` @ port 8086
+Run `npm run build`, then open `http://localhost:8086/` at browser.
 # Want to add your own component?
 1. add some thing in packages
 2. add some thing in demo/index.js demo/components
--- a/demo/components/ColumnGroup.vue
+++ b/demo/components/ColumnGroup.vue
@ -1,4 +1,4 @@
-u<template>
+<template>
  <div class="doc">
    <h1>一堆列 / n-column-group</h1>
    <hr>
--- a/demo/components/buttonDemo.vue
+++ b/demo/components/buttonDemo.vue
@ -65,9 +65,9 @@
        <div class="n-doc-section__source">
          <textarea>
 /**
- * 注意 auto-text-color 会将 type="primary" 的按钮的文字颜色设定为背景色
- * 如果不设定 将使用黑色作为文字颜色
- * 请注意设计稿还原
+ * Note: auto-text-color will set button of type="primary"'s color as its first
+ * background-colored parent's background-color
+ * If auto-text-color is not set, its color will be black
 */
 <n-button
  size="small"
--- a/demo/components/nimbusServiceLayoutDemo.vue
+++ b/demo/components/nimbusServiceLayoutDemo.vue
@ -16,93 +16,95 @@
        <div class="n-doc-section__view">
          <n-nimbus-service-layout
            icon="md-musical-notes"
-            name="My Generation"
+            name="Oasis"
            :items="[
              {
-                name: '第一个服务',
+                name: 'Definitely Maybe',
                path: '/n-nimbus-service-layout?param=666'
              },
              {
-                name: '第二个服务',
+                name: `Morning Glory`,
                childItems: [
                  {
-                    name: '二级菜单１',
+                    name: 'Hello',
                    path: '/n-nimbus-service-layout?param=777'
                  },
                  {
-                    name: '二级菜单2',
+                    name: 'Roll with It',
                    path: '/n-nimbus-service-layout?param=888'
                  },
                  {
-                    name: '二级菜单3',
+                    name: 'Wonderwall',
                    path: '/n-nimbus-service-layout?param=999'
                  },
                  {
-                    name: '二级菜单4',
+                    name: `Don't Look Back in Anger`,
                    path: '/n-nimbus-service-layout?param=000'
                  },
                  {
-                    name: '二级菜单5',
+                    name: 'Some Might Say',
                    path: '/n-nimbus-service-layout?param=111'
                  }
                ]
              },
              {
-                name: '第三个服务',
+                name: 'Be Here Now',
                path: '/n-nimbus-service-layout?param=222'
              }
            ]"
          >
-            Well people try to pug us down<br>
-            Talkin' bout my generation.<br>
-            Just because we get around.<br>
-            Talkin' bout my generation.
+            Take me to the place where you go<br>
+            Where nobody knows if it's night or day<br>
+            But please don't put your life in the hands<br>
+            Of a Rock n Roll band<br>
+            Who'll throw it all away
          </n-nimbus-service-layout>
        </div>
        <div class="n-doc-section__source">
          <textarea><n-nimbus-service-layout
  icon="md-musical-notes"
-  name="My Generation"
+  name="Oasis"
  :items="[
    {
-      name: '第一个服务',
+      name: 'Definitely Maybe',
      path: '/n-nimbus-service-layout?param=666'
    },
    {
-      name: '第二个服务',
+      name: `What's the Story(Morning Glory)`,
      childItems: [
        {
-          name: '二级菜单１',
+          name: 'Hello',
          path: '/n-nimbus-service-layout?param=777'
        },
        {
-          name: '二级菜单2',
+          name: 'Roll with It',
          path: '/n-nimbus-service-layout?param=888'
        },
        {
-          name: '二级菜单3',
+          name: 'Wonderwall',
          path: '/n-nimbus-service-layout?param=999'
        },
        {
-          name: '二级菜单4',
+          name: `Don't Look Back in Anger`,
          path: '/n-nimbus-service-layout?param=000'
        },
        {
-          name: '二级菜单5',
+          name: 'Some Might Say',
          path: '/n-nimbus-service-layout?param=111'
        }
      ]
    },
    {
-      name: '第三个服务',
+      name: 'Be Here Now',
      path: '/n-nimbus-service-layout?param=222'
    }
  ]"
 >
-  Well people try to pug us down<br>
-  Talkin' bout my generation.<br>
-  Just because we get around.<br>
-  Talkin' bout my generation.
+  Take me to the place where you go<br>
+  Where nobody knows if it's night or day<br>
+  But please don't put your life in the hands<br>
+  Of a Rock n Roll band<br>
+  Who'll throw it all away
 </n-nimbus-service-layout></textarea>
        </div>
      </div>
--- a/demo/components/notificationDemo.vue
+++ b/demo/components/notificationDemo.vue
@ -43,9 +43,13 @@ In the kind of world where we belong`,
        meta: '2019-5-27 15:11',
        action: 'Mark as read',
        avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        duration: 3000,
+        afterCloseCallback: (notificationVueInstance) => {
+          const notification = notificationVueInstance.notification
+          this.$NMessage.success(notification.title)
+        },
+        actionCallback: (notificationVueInstance) => {
+          notificationVueInstance.close()
        }
      })
    },
@ -59,9 +63,10 @@ I cant get no, I cant get no`,
        meta: '2019-5-27 15:11',
        action: 'Mark as read',
        avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        actionCallback: (notificationVueInstance) => {
+          const notification = notificationVueInstance.notification
+          this.$NMessage.success(notification.title)
+          notificationVueInstance.close()
        }
      })
    }
@ -91,9 +96,13 @@ In the kind of world where we belong`,
        meta: '2019-5-27 15:11',
        action: 'Mark as read',
        avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        duration: 3000,
+        afterCloseCallback: (notificationVueInstance) => {
+          const notification = notificationVueInstance.notification
+          this.$NMessage.success(notification.title)
+        },
+        actionCallback: (notificationVueInstance) => {
+          notificationVueInstance.close()
        }
      })
    },
@ -107,9 +116,10 @@ I cant get no, I cant get no`,
        meta: '2019-5-27 15:11',
        action: 'Mark as read',
        avator: null,
-        actionCallback: (notification) => {
-          console.log('mark read!')
-          notification.close()
+        actionCallback: (notificationVueInstance) => {
+          const notification = notificationVueInstance.notification
+          this.$NMessage.success(notification.title)
+          notificationVueInstance.close()
        }
      })
    }
--- a/demo/components/startPage.vue
+++ b/demo/components/startPage.vue
@ -13,6 +13,9 @@
        <div class="n-doc-section__header">
          TuSimple Vue-Based Frontend Component Library
        </div>
+        <div class="n-doc-section__text-content">
+          <a href="https://***REMOVED***/naive-ui">GitHub</a>
+        </div>
      </div>
    </div>
  </div>
--- a/demo/demo.vue
+++ b/demo/demo.vue
@ -2,7 +2,7 @@
  <div class="demo">
    <n-nimbus-service-layout
      icon="md-contacts"
-      name="NAIVE UI (0.1.59)"
+      name="NAIVE UI (0.1.64)"
      :padding-body="false"
      :items="items"
    >
@ -160,6 +160,9 @@ export default {
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
+    .n-doc-section__text-content {
+      font-size: 16px;
+    }
    .n-doc-section__source {
    }
  }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "naive-ui",
-  "version": "0.1.61",
+  "version": "0.1.64",
  "description": "",
  "main": "index.js",
  "scripts": {
--- a/packages/common/Notification/src/MessageCell.vue
+++ b/packages/common/Notification/src/MessageCell.vue
@ -1,49 +0,0 @@
-<template>
-  <div
-    class="n-notification__cell"
-    :class="{
-      [`n-notification__cell--${type}`]: true
-    }"
-  >
-    <div class="n-notification-cell__avator" />
-    <div class="n-notification-cell__body">
-      <div class="n-notification-cell__header">
-        {{ notification.title }}
-      </div>
-      <div class="n-notification-cell__title-meta">
-        {{ notification.titleMeta }}
-      </div>
-      <div class="n-notification-cell__content">
-        {{ notification.content }}
-      </div>
-      <div class="n-notification-cell__footer">
-        <div class="n-notification-cell__meta">
-          {{ notification.meta }}
-        </div>
-        <div class="n-notification-cell__action">
-          {{ notification.action }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'success'
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    notification: {
-      type: Object,
-      default: null
-    }
-  }
-}
-</script>
--- a/packages/common/Notification/src/main.js
+++ b/packages/common/Notification/src/main.js
@ -2,9 +2,8 @@
 import Vue from 'vue'
 import NNotificationCell from './NotificationCell'

-function attachMessageContainer () {
+function attachNotificationContainer () {
  let notificationContainer = document.querySelector('.n-notification.n-notification__container')
-  console.log(notificationContainer)
  if (!notificationContainer) {
    notificationContainer = document.createElement('div')
    notificationContainer.classList.add('n-notification', 'n-notification__container')
@ -26,17 +25,17 @@ function attachMessageContainer () {
 }

 const defaultOptions = {
-  timeout: 50000,
  emergeTransitionTimeout: 300,
  vanishTransitionTimeout: 300
 }

 const defaultNotification = {
+  duration: null,
  avator: null,
  actionCallback: () => {}
 }

-function mountMessageEl (container, vm, option) {
+function mountNotificationEl (container, vm, option) {
  const el = vm.$el
  el.classList.add('is-going-to-emerge')
  container.appendChild(el)
@ -45,9 +44,15 @@ function mountMessageEl (container, vm, option) {
  el.style['max-height'] = `${30 + vm.$refs.body.getBoundingClientRect().height}px`
 }

-function removeMessageEl (container, el, option) {
+function removeNotificationEl (container, el, option, notificationVueInstance) {
  setTimeout(function () {
-    container.removeChild(el)
+    if (container.contains(el)) {
+      container.removeChild(el)
+      const notification = notificationVueInstance.notification
+      if (notification.afterCloseCallback) {
+        notification.afterCloseCallback(notificationVueInstance)
+      }
+    }
  }, option.vanishTransitionTimeout)
  el.classList.add('is-vanishing')
  el.style['max-height'] = '0'
@ -56,19 +61,24 @@ function removeMessageEl (container, el, option) {
 const NMessage = {
  notify (notification, type = 'success', option = defaultOptions) {
    notification = { ...defaultNotification, ...notification }
-    const notificationContainer = attachMessageContainer()
+    const notificationContainer = attachNotificationContainer()
    const notificationCell = (new Vue({ ...NNotificationCell,
      propsData: { type, notification: notification },
+      mounted () {
+        if (notification.duration) {
+          setTimeout(this.close, notification.duration)
+        }
+      },
      methods: {
        close () {
-          removeMessageEl(notificationContainer, this.$el, option)
+          removeNotificationEl(notificationContainer, this.$el, option, this)
        },
        handleActionClick () {
          notification.actionCallback(this)
        }
      }
    })).$mount()
-    mountMessageEl(notificationContainer, notificationCell, option)
+    mountNotificationEl(notificationContainer, notificationCell, option)
  }
 }

--- a/packages/common/Select/src/main.vue
+++ b/packages/common/Select/src/main.vue
@ -15,9 +15,14 @@
      }"
    >
      <div
-        v-if="selected"
        class="n-select-link__tags"
+        :class="{
+          'n-select-link__tags--selected': selected
+        }"
      >
+        <!-- <transition-group
+          name="n-select-menu__tags--transition"
+        > -->
        <div
          v-for="item in selectedItems"
          :key="item.value"
@ -32,17 +37,27 @@
            @click.stop="toggle(item)"
          />
        </div>
-      </div><div
-        v-else
-        class="n-select-link__tags n-select-link__placeholder"
-      >
-        {{ placeholder }}
+        <!-- </transition-group> -->
+        <div
+          v-if="!selected"
+          class="n-select-link__placeholder"
+        >
+          {{ placeholder }}
+        </div>
      </div>
      <transition name="n-select-menu--transition">
        <div
          v-if="active"
          class="n-select-menu n-select-menu--multiple"
+          @mouseleave="removeLightBar"
        >
+          <transition name="n-select-menu__light-bar--transition">
+            <div
+              v-if="showLightBar"
+              class="n-select-menu__light-bar"
+              :style="{ top: `${lightBarTop}px` }"
+            />
+          </transition>
          <div
            v-for="item in items"
            :key="item.value"
@ -52,6 +67,7 @@
                isSelected(item)
            }"
            @click.stop="toggle(item)"
+            @mouseenter="showLightBarTop"
          >
            {{ item.label }}
          </div>
@ -81,10 +97,17 @@
        <div
          v-if="active"
          class="n-select-menu"
+          @mouseleave="removeLightBar"
        >
+          <transition name="n-select-menu__light-bar--transition">
+            <div
+              v-if="showLightBar"
+              class="n-select-menu__light-bar"
+              :style="{ top: `${lightBarTop}px` }"
+            />
+          </transition>
          <div
            v-for="item in items"
-
            :key="item.value"
            class="n-select-menu__item"
            :class="{
@ -93,6 +116,7 @@
                item.value
            }"
            @click.stop="select(item)"
+            @mouseenter="showLightBarTop"
          >
            {{ item.label }}
          </div>
@ -138,7 +162,9 @@ export default {
  },
  data () {
    return {
-      active: false
+      active: false,
+      lightBarTop: null,
+      showLightBar: false
    }
  },
  computed: {
@ -182,6 +208,13 @@ export default {
    //   console.log('click')
    //   this.closeSelect(e)
    // },
+    showLightBarTop (e) {
+      this.showLightBar = true
+      this.lightBarTop = e.target.offsetTop
+    },
+    removeLightBar (e) {
+      this.showLightBar = false
+    },
    isSelected (item) {
      if (this.multiple) {
        return 1 + this.selectedValue.findIndex(value => value === item.value)
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@ -195,6 +195,9 @@ export default {
        &::-webkit-scrollbar {
          width: 5px;
        }
+        &::-moz-scrollbar {
+          width: 5px;
+        }

        /* Track */
        &::-webkit-scrollbar-track {
--- a/styles/Button.scss
+++ b/styles/Button.scss
@ -28,9 +28,7 @@
      height: 18px;
      width: 18px;
      .n-icon {
-        &::before {
-          font-size: 18px;
-        }
+        font-size: 18px;
      }
    }
  }
@ -48,9 +46,7 @@
      height: 20px;
      width: 20px;
      .n-icon {
-        &::before {
-          font-size: 20px;
-        }
+        font-size: 20px;
      }
    }
  }
@ -68,9 +64,7 @@
      height: 20px;
      width: 20px;
      .n-icon {
-        &::before {
-          font-size: 20px;
-        }
+        font-size: 20px;
      }
    }
  }
--- a/styles/Icon.scss
+++ b/styles/Icon.scss
@ -3,11 +3,14 @@
 .n-icon {
  height: 1em;
  width: 1em;
+  line-height: 1em;
  text-align: center;
  display: inline-block;
  position: relative;
  &::before {
+    line-height: 1em;
    width: 1em;
+    height: 1em;
    position: absolute;
    top: 0;
    left: 0;
--- a/styles/Select.scss
+++ b/styles/Select.scss
@ -31,16 +31,21 @@
      border-radius: $select-border-radius;
      background-color: $select-background-color;
      padding: 0 14px;
-      &.n-select-link__placeholder {
+      .n-select-link__placeholder {
+        position: absolute;
+        left: 14px;
+        top: 0;
        color: $select-placeholder-color;
      }
    }
    .n-select-link__tags {
-      padding: 0 14px;
+      padding: 0 20px 0 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
-      padding-top: 4px;
+      &.n-select-link__tags--selected {
+        padding-top: 4px;
+      }
      .n-select-link__tag {
        box-sizing: border-box;
        position: relative;
@ -51,6 +56,7 @@
        margin-right: 7px;
        margin-bottom: 4px;
        font-size: 14px;
+        transition: opacity .2s $default-cubic-bezier, transform .2s $default-cubic-bezier;
        .n-select-link-tag__content  {
          transform: translateY(-1px);
        }
@ -75,31 +81,41 @@
      border-radius: 9px;
      background-color: rgba(75, 81, 106, 1);
      box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
+      .n-select-menu__light-bar {
+        position: absolute;
+        width:100%;
+        background-color: rgba(96, 220, 178, 0.3);
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transition: top .2s $default-cubic-bezier;
+      }
      &.n-select-menu--multiple {
        .n-select-menu__item {
+          position: relative;
+          transition: color .3s $default-cubic-bezier;
+          &::after {
+            content: '';
+            height: 6px;
+            width: 3px;
+            border-right: 1px solid #63E2B7FF;
+            border-bottom: 1px solid #63E2B7FF;
+            position: absolute;
+            right: 14px;
+            transform: rotate(45deg) scale(.5);
+            top: calc(50% - 4px);
+            opacity: 0;
+            transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
+          }
          &.is-selected, &:active {
-            position: relative;
            background: none;
            &::after {
-              content: '';
-              height: 6px;
-              width: 3px;
-              border-right: 1px solid #63E2B7FF;
-              border-bottom: 1px solid #63E2B7FF;
-              position: absolute;
-              right: 14px;
-              transform: rotate(45deg);
-              top: calc(50% - 4px);
+              opacity: 1;
+              transform: rotate(45deg) scale(1);
            }
          }
          &:active {
            color: #63E2B7FF;
-            background-color: rgba(96, 220, 178, 0.3);
-          }
-          &.is-selected {
-            &:hover {
-              background-color: rgba(96, 220, 178, 0.3);
-            }
          }
        }
      }
@ -108,9 +124,6 @@
        &.is-selected {
          color: #63E2B7FF;
        }
-        &:hover {
-          background-color: rgba(96, 220, 178, 0.3);
-        }
      }
    }
    &:hover {
@ -134,14 +147,15 @@
  &.n-select--small-size {
    .n-select-link {
      .n-select-link__tags {
+        min-height: $small-height;
        .n-select-link__tag {
          padding: 0px 20px 0 7px;
          height: 20px;
          line-height: 20px;
        }
-        &.n-select-link__placeholder {
-          padding: 0 14px;
+        .n-select-link__placeholder {
          height: $small-height;
+          line-height: $small-height;
        }
      }
      .n-select-link__label {
@ -149,24 +163,26 @@
        line-height: $small-height;
      }
      .n-select-menu {
-        .n-select-menu__item {
+        .n-select-menu__item, .n-select-menu__light-bar {
          height: $small-height;
          line-height: $small-height;
        }
+        
      }
    }
  }
  &.n-select--default-size, &.n-select--medium-size {
    .n-select-link {
      .n-select-link__tags {
+        min-height: $default-height;
        .n-select-link__tag {
          padding: 0px 20px 0 7px;
          height: 26px;
          line-height: 26px;
        }
-        &.n-select-link__placeholder {
-          padding: 0 14px;
+        .n-select-link__placeholder {
          height: $default-height;
+          line-height: $default-height;
        }
      }
      .n-select-link__label {
@ -174,7 +190,7 @@
        line-height: $default-height;
      }
      .n-select-menu {
-        .n-select-menu__item {
+        .n-select-menu__item, .n-select-menu__light-bar {
          height: $default-height;
          line-height: $default-height;
        }
@ -183,14 +199,15 @@
  }
  &.n-select--large-size {
    .n-select-link__tags {
+      min-height: 32px;
      .n-select-link__tag {
        padding: 0px 20px 0 7px;
        height: 32px;
        line-height: 32px;
      }
-      &.n-select-link__placeholder {
-        padding: 0 14px;
+      .n-select-link__placeholder {
        height: $large-height;
+        line-height: $large-height;
      }
    }
    .n-select-link {
@ -200,7 +217,7 @@
      }
    }
    .n-select-menu {
-      .n-select-menu__item {
+      .n-select-menu__item, .n-select-menu__light-bar {
        height: $large-height;
        line-height: $large-height;
      }
@ -214,8 +231,40 @@
  .n-select-menu--transition-leave-active {
    transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
  }
-  .n-select-menu--transition-enter, .n-select-menu--transition-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  .n-select-menu--transition-enter, .n-select-menu--transition-leave-to {
    opacity: 0;
    transform: translateY(4px);
  }
+  .n-select-menu__light-bar--transition-enter-active {
+    transition: opacity .15s $fast-in-cubic-bezier, top .2s $default-cubic-bezier!important;
+  }
+  .n-select-menu__light-bar--transition-leave-active {
+    transition: opacity .15s $slow-out-cubic-bezier, top .2s $default-cubic-bezier!important;
+  }
+  .n-select-menu__light-bar--transition-enter, .n-select-menu__light-bar--transition-leave-to {
+    opacity: 0;
+  }
+
+  .n-select-menu__tags--transition-enter, .n-select-menu__tags--transition-leave-to {
+    transition: opacity .2s $fast-in-cubic-bezier;
+    opacity: 0;
+  }
+  .n-select-menu__tags--transition-enter-active {
+    transition: opacity .2s $slow-out-cubic-bezier;
+  }
+  .n-select-menu__tags--transition-leave-active {
+    transition: opacity .2s $slow-out-cubic-bezier;
+    /**
+     * Don't delete the following line. I don't know how it work. However it works!
+     */
+    transform: translateY(0)!important;
+    position: absolute!important;
+    /**
+     * Don't delete the following line. I don't know how it work. However it works!
+     */
+    top: 4px;
+  }
+  .n-select-menu__tags--transition-move {
+    transition: transform .2s $default-cubic-bezier;
+  }
 }