feat: update vc-notification vc-pagination

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 }

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}

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'

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

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,

components/vc-notification/demo/simple.jsx

@@ -35,6 +35,9 @@ function closableFn () {
     onClose () {
       console.log('closable close')
     },
+    onClick () {
+      console.log('clicked!!!')
+    },
     closable: true,
   })
 }

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

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}

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) {
+    getJumpPrevPage () {
-      return isInteger(page) && page >= 1 && page !== this.stateCurrent
+      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) {
+    isValid (page) {
-      let pageSize = p
+      return isInteger(page) && page >= 1 && page !== this.stateCurrent
-      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()
     },
+    // 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()
+        const currentPage = calculatePage(undefined, this.$data, this.$props)
-        if (page > allTotal) {
+        if (page > currentPage) {
-          page = allTotal
+          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 () {
+    handleGoTO (event) {
-      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
+      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
-    },
+        this.handleChange(this.stateCurrentInputValue)
-    getJumpNextPage () {
+      }
-      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
-    },
-    jumpPrev () {
-      this.handleChange(this.getJumpPrevPage())
-    },
-    jumpNext () {
-      this.handleChange(this.getJumpNextPage())
     },
   },
   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}
+            {...pagerProps}
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
             key={i}
             page={i}
             active={active}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
           />
         )
       }
@@ -530,8 +558,8 @@ export default {
         </li>
       )
     }
-    const prevDisabled = !this.hasPrev()
+    const prevDisabled = !this.hasPrev() || !allPages
-    const nextDisabled = !this.hasNext()
+    const nextDisabled = !this.hasNext() || !allPages
     const buildOptionText = this.buildOptionText || this.$scopedSlots.buildOptionText
     return (
       <ul

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;
     }
   }
-}
+}

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'

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 पेज',
+}

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 ಪುಟಗಳು',
+}

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',
+}