feat: update vc-notification vc-pagination

6 years ago · 639547953c
14 changed files with 221 additions and 71 deletions
--- a/components/vc-form/index.js
+++ b/components/vc-form/index.js
@ -1,3 +1,3 @@
-// based on rc-form 2.2.6
+// based on rc-form 2.4.0
 import { createForm, createFormField } from './src/'
 export { createForm, createFormField }
--- a/components/vc-input-number/src/index.js
+++ b/components/vc-input-number/src/index.js
@ -1,4 +1,4 @@
-// based on rc-input-number 4.3.1
+// based on rc-input-number 4.3.7
 import PropTypes from '../../_util/vue-types'
 import BaseMixin from '../../_util/BaseMixin'
 import { initDefaultProps, hasProp, getOptionProps } from '../../_util/props-util'
@ -73,6 +73,8 @@ const inputNumberProps = {
  required: PropTypes.bool,
  pattern: PropTypes.string,
  decimalSeparator: PropTypes.string,
+  autoComplete: PropTypes.string,
+  title: PropTypes.string,
 }

 export default {
@ -90,6 +92,7 @@ export default {
    step: 1,
    parser: defaultParser,
    required: false,
+    autoComplete: 'off',
  }),
  data () {
    let value
@ -274,7 +277,7 @@ export default {
      let val = value
      if (val === '') {
        val = ''
-      } else if (!this.isNotCompleteNumber(val)) {
+      } else if (!this.isNotCompleteNumber(parseFloat(val, 10))) {
        val = this.getValidValue(val)
      } else {
        val = this.sValue
@ -583,7 +586,8 @@ export default {
    },
  },
  render () {
-    const { prefixCls, disabled, readOnly, useTouch } = this.$props
+    const { prefixCls, disabled, readOnly, useTouch, autoComplete,
+      upHandler, downHandler } = this.$props
    const classes = classNames({
      [prefixCls]: true,
      [`${prefixCls}-disabled`]: disabled,
@ -657,6 +661,7 @@ export default {
    const contentProps = {
      on: { mouseenter, mouseleave, mouseover, mouseout },
      class: classes,
+      attrs: { title: this.$props.title },
    }
    const upHandlerProps = {
      props: {
@ -697,7 +702,7 @@ export default {
          <InputHandler
            {...upHandlerProps}
          >
-            {this.upHandler || <span
+            {upHandler || <span
              unselectable='unselectable'
              class={`${prefixCls}-handler-up-inner`}
              onClick={preventDefault}
@ -706,7 +711,7 @@ export default {
          <InputHandler
            {...downHandlerProps}
          >
-            {this.downHandler || <span
+            {downHandler || <span
              unselectable='unselectable'
              class={`${prefixCls}-handler-down-inner`}
              onClick={preventDefault}
@ -727,7 +732,7 @@ export default {
            onClick={this.handleInputClick}
            class={`${prefixCls}-input`}
            tabIndex={this.tabIndex}
-            autoComplete='off'
+            autoComplete={autoComplete}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            onKeydown={editable ? this.onKeyDown : noop}
--- a/components/vc-menu/index.js
+++ b/components/vc-menu/index.js
@ -1,4 +1,4 @@
-// based on rc-menu 7.4.19
+// based on rc-menu 7.4.20
 import Menu from './Menu'
 import SubMenu from './SubMenu'
 import MenuItem, { menuItemProps } from './MenuItem'
--- a/components/vc-notification/Notice.jsx
+++ b/components/vc-notification/Notice.jsx
@ -3,6 +3,9 @@ import PropTypes from '../_util/vue-types'
 import { getStyle, getComponentFromProp } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'

+function noop () {
+}
+
 export default {
  mixins: [BaseMixin],
  props: {
@ -59,7 +62,7 @@ export default {
  },

  render () {
-    const { prefixCls, closable, clearCloseTimer, startCloseTimer, $slots, close } = this
+    const { prefixCls, closable, clearCloseTimer, startCloseTimer, $slots, close, $listeners } = this
    const componentClass = `${prefixCls}-notice`
    const className = {
      [`${componentClass}`]: 1,
@ -68,8 +71,12 @@ export default {
    const style = getStyle(this)
    const closeIcon = getComponentFromProp(this, 'closeIcon')
    return (
-      <div class={className} style={style || { right: '50%' } } onMouseenter={clearCloseTimer}
+      <div
+        class={className}
+        style={style || { right: '50%' } }
+        onMouseenter={clearCloseTimer}
        onMouseleave={startCloseTimer}
+        onClick={$listeners.click || noop}
      >
        <div class={`${componentClass}-content`}>{$slots.default}</div>
        {closable
--- a/components/vc-notification/Notification.jsx
+++ b/components/vc-notification/Notification.jsx
@ -7,6 +7,9 @@ import createChainedFunction from '../_util/createChainedFunction'
 import getTransitionProps from '../_util/getTransitionProps'
 import Notice from './Notice'

+function noop () {
+}
+
 let seed = 0
 const now = Date.now()

@ -91,6 +94,7 @@ const Notification = {
        },
        on: {
          close,
+          click: notice.onClick || noop,
        },
        style,
        class: className,
--- a/components/vc-notification/demo/simple.jsx
+++ b/components/vc-notification/demo/simple.jsx
@ -35,6 +35,9 @@ function closableFn () {
    onClose () {
      console.log('closable close')
    },
+    onClick () {
+      console.log('clicked!!!')
+    },
    closable: true,
  })
 }
--- a/components/vc-notification/index.js
+++ b/components/vc-notification/index.js
@ -1,3 +1,3 @@
-// based on rc-notification 3.2.0
+// based on rc-notification 3.3.0
 import Notification from './Notification'
 export default Notification
--- a/components/vc-pagination/Pager.jsx
+++ b/components/vc-pagination/Pager.jsx
@ -42,6 +42,10 @@ export default {
      cls = `${cls} ${prefixCls}-active`
    }

+    if (!page) {
+      cls = `${cls} ${prefixCls}-disabled`
+    }
+
    return (
      <li
        class={cls}
--- a/components/vc-pagination/Pagination.jsx
+++ b/components/vc-pagination/Pagination.jsx
@ -21,6 +21,14 @@ function defaultItemRender (page, type, element) {
  return element
 }

+function calculatePage (p, state, props) {
+  let pageSize = p
+  if (typeof pageSize === 'undefined') {
+    pageSize = state.statePageSize
+  }
+  return Math.floor((props.total - 1) / pageSize) + 1
+}
+
 export default {
  name: 'Pagination',
  mixins: [BaseMixin],
@ -87,7 +95,7 @@ export default {
    pageSize (val) {
      const newState = {}
      let current = this.stateCurrent
-      const newCurrent = this.calculatePage(val)
+      const newCurrent = calculatePage(val, this.$data, this.$props)
      current = current > newCurrent ? newCurrent : current
      if (!hasProp(this, 'current')) {
        newState.stateCurrent = current
@ -112,42 +120,30 @@ export default {
    },
  },
  methods: {
-    isValid (page) {
-      return isInteger(page) && page >= 1 && page !== this.stateCurrent
+    getJumpPrevPage () {
+      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
+    },
+    getJumpNextPage () {
+      return Math.min(
+        calculatePage(undefined, this.$data, this.$props),
+        this.stateCurrent + (this.showLessItems ? 3 : 5)
+      )
    },
    getItemIcon (icon) {
      const { prefixCls } = this.$props
      const iconNode = getComponentFromProp(this, icon, this.$props) || <a class={`${prefixCls}-item-link`} />
      return iconNode
    },
-    calculatePage (p) {
-      let pageSize = p
-      if (typeof pageSize === 'undefined') {
-        pageSize = this.statePageSize
-      }
-      return Math.floor((this.total - 1) / pageSize) + 1
-    },
-    handleGoTO (event) {
-      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
-        this.handleChange(this.stateCurrentInputValue)
-      }
-    },
-    prev () {
-      if (this.hasPrev()) {
-        this.handleChange(this.stateCurrent - 1)
-      }
-    },
-    next () {
-      if (this.hasNext()) {
-        this.handleChange(this.stateCurrent + 1)
-      }
-    },
-    hasPrev () {
-      return this.stateCurrent > 1
-    },
-    hasNext () {
-      return this.stateCurrent < this.calculatePage()
+    isValid (page) {
+      return isInteger(page) && page >= 1 && page !== this.stateCurrent
    },
+    // calculatePage (p) {
+    //   let pageSize = p
+    //   if (typeof pageSize === 'undefined') {
+    //     pageSize = this.statePageSize
+    //   }
+    //   return Math.floor((this.total - 1) / pageSize) + 1
+    // },
    handleKeyDown (event) {
      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
        event.preventDefault()
@ -183,7 +179,7 @@ export default {
    changePageSize (size) {
      let current = this.stateCurrent
      const preCurrent = current
-      const newCurrent = this.calculatePage(size)
+      const newCurrent = calculatePage(size, this.$data, this.$props)
      current = current > newCurrent ? newCurrent : current
      // fix the issue:
      // Once 'total' is 0, 'current' in 'onShowSizeChange' is 0, which is not correct.
@ -212,9 +208,9 @@ export default {
    handleChange (p) {
      let page = p
      if (this.isValid(page)) {
-        const allTotal = this.calculatePage()
-        if (page > allTotal) {
-          page = allTotal
+        const currentPage = calculatePage(undefined, this.$data, this.$props)
+        if (page > currentPage) {
+          page = currentPage
        }
        if (!hasProp(this, 'current')) {
          this.setState({
@ -229,6 +225,28 @@ export default {
      }
      return this.stateCurrent
    },
+    prev () {
+      if (this.hasPrev()) {
+        this.handleChange(this.stateCurrent - 1)
+      }
+    },
+    next () {
+      if (this.hasNext()) {
+        this.handleChange(this.stateCurrent + 1)
+      }
+    },
+    jumpPrev () {
+      this.handleChange(this.getJumpPrevPage())
+    },
+    jumpNext () {
+      this.handleChange(this.getJumpNextPage())
+    },
+    hasPrev () {
+      return this.stateCurrent > 1
+    },
+    hasNext () {
+      return this.stateCurrent < calculatePage(undefined, this.$data, this.$props)
+    },
    runIfEnter (event, callback, ...restParams) {
      if (event.key === 'Enter' || event.charCode === 13) {
        callback(...restParams)
@ -246,17 +264,10 @@ export default {
    runIfEnterJumpNext (event) {
      this.runIfEnter(event, this.jumpNext)
    },
-    getJumpPrevPage () {
-      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
-    },
-    getJumpNextPage () {
-      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
-    },
-    jumpPrev () {
-      this.handleChange(this.getJumpPrevPage())
-    },
-    jumpNext () {
-      this.handleChange(this.getJumpNextPage())
+    handleGoTO (event) {
+      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
+        this.handleChange(this.stateCurrentInputValue)
+      }
    },
  },
  render () {
@ -268,7 +279,7 @@ export default {
    const locale = this.locale

    const prefixCls = this.prefixCls
-    const allPages = this.calculatePage()
+    const allPages = calculatePage(undefined, this.$data, this.$props)
    const pagerList = []
    let jumpPrev = null
    let jumpNext = null
@ -354,19 +365,36 @@ export default {
      )
    }
    if (allPages <= 5 + pageBufferSize * 2) {
+      const pagerProps = {
+        props: {
+          locale,
+          rootPrefixCls: prefixCls,
+          showTitle: props.showTitle,
+          itemRender: props.itemRender,
+        },
+        on: {
+          click: this.handleChange,
+          keypress: this.runIfEnter,
+        },
+      }
+      if (!allPages) {
+        pagerList.push(
+          <Pager
+            {...pagerProps}
+            key='noPager'
+            page={allPages}
+            class={`${prefixCls}-disabled`}
+          />
+        )
+      }
      for (let i = 1; i <= allPages; i++) {
        const active = stateCurrent === i
        pagerList.push(
          <Pager
-            locale={locale}
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
+            {...pagerProps}
            key={i}
            page={i}
            active={active}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
          />
        )
      }
@ -530,8 +558,8 @@ export default {
        </li>
      )
    }
-    const prevDisabled = !this.hasPrev()
-    const nextDisabled = !this.hasNext()
+    const prevDisabled = !this.hasPrev() || !allPages
+    const nextDisabled = !this.hasNext() || !allPages
    const buildOptionText = this.buildOptionText || this.$scopedSlots.buildOptionText
    return (
      <ul
--- a/components/vc-pagination/assets/index.less
+++ b/components/vc-pagination/assets/index.less
@ -53,6 +53,16 @@
      }
    }

+    &-disabled {
+      cursor: not-allowed;
+      &:hover {
+        border-color: #d9d9d9;
+        a {
+          color: #d9d9d9;
+        }
+      }
+    }
+
    &-active {
      background-color: #2db7f5;
      border-color: #2db7f5;
@ -84,6 +94,7 @@
        color: #2db7f5;
      }
    }
+
  }

  &-jump-prev {
@ -101,6 +112,48 @@
      }
    }
  }
+  
+  &-jump-prev-custom-icon,
+  &-jump-next-custom-icon {
+    position: relative;
+
+    &:after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      transition: all .2s;
+
+      content: "•••";
+      opacity: 1;
+      display: block;
+      letter-spacing: 2px;
+      color: #ccc;
+      font-size: 12px;
+      margin-top: 1px;
+    }
+
+    .custom-icon-jump-prev,
+    .custom-icon-jump-next {
+      opacity: 0;
+      transition: all .2s;
+    }
+
+    &:hover {
+      &:after {
+        opacity: 0;
+        color: #ccc;
+      }
+
+      .custom-icon-jump-prev,
+      .custom-icon-jump-next {
+        opacity: 1;
+        color: #2db7f5;
+      }
+    }
+  }

  &-prev, &-jump-prev, &-jump-next {
    margin-right: 8px;
@ -199,9 +252,9 @@
        border-radius: 6px;
        height: 28px;
        user-select: none;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
        position: relative;
-        color: rgba(0, 0, 0, .65);
+        color: rgba(0,0,0,.65);
        background-color: #fff;
        border-color: #d9d9d9;

@ -262,9 +315,9 @@
        border-radius: 6px;
        height: 26px;
        user-select: none;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
        position: relative;
-        color: rgba(0, 0, 0, .65);
+        color: rgba(0,0,0,.65);
        background-color: #fff;
        border-color: #d9d9d9;

@ -274,6 +327,7 @@
          border-color: #2db7f5;
        }
      }
+
    }
  }
 }
@ -285,4 +339,4 @@
      display: none;
    }
  }
-}
+}
--- a/components/vc-pagination/index.js
+++ b/components/vc-pagination/index.js
@ -1,2 +1,2 @@
-// based on rc-pagination 1.17.3
+// based on rc-pagination 1.17.8
 export { default } from './Pagination'
--- a/components/vc-pagination/locale/hi_IN.js
+++ b/components/vc-pagination/locale/hi_IN.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ पृष्ठ',
+  jump_to: 'इस पर चलें',
+  jump_to_confirm: 'पुष्टि करें',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'पिछला पृष्ठ',
+  next_page: 'अगला पृष्ठ',
+  prev_5: 'पिछले 5 पृष्ठ',
+  next_5: 'अगले 5 पृष्ठ',
+  prev_3: 'पिछले 3 पृष्ठ',
+  next_3: 'अगले 3 पेज',
+}
--- a/components/vc-pagination/locale/kn_IN.js
+++ b/components/vc-pagination/locale/kn_IN.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ ಪುಟ',
+  jump_to: 'ಜಿಗಿತವನ್ನು',
+  jump_to_confirm: 'ಖಚಿತಪಡಿಸಲು ಜಿಗಿತವನ್ನು',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'ಹಿಂದಿನ ಪುಟ',
+  next_page: 'ಮುಂದಿನ ಪುಟ',
+  prev_5: 'ಹಿಂದಿನ 5 ಪುಟಗಳು',
+  next_5: 'ಮುಂದಿನ 5 ಪುಟಗಳು',
+  prev_3: 'ಹಿಂದಿನ 3 ಪುಟಗಳು',
+  next_3: 'ಮುಂದಿನ 3 ಪುಟಗಳು',
+}
--- a/components/vc-pagination/locale/ro_RO.js
+++ b/components/vc-pagination/locale/ro_RO.js
@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagină',
+  jump_to: 'Mergi la',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Pagina Anterioară',
+  next_page: 'Pagina Următoare',
+  prev_5: '5 Pagini Anterioare',
+  next_5: '5 Pagini Următoare',
+  prev_3: '3 Pagini Anterioare',
+  next_3: '3 Pagini Următoare',
+}