xianniu-ui 0.8.59 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.8.59",
+  "version": "0.9.1",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {

package/packages/amount/animate.js

@@ -0,0 +1,222 @@
+
+const root = typeof window !== 'undefined' ? window : global
+
+/* istanbul ignore file */
+const Animate = (global => {
+  /* istanbul ignore next */
+  const time =
+    Date.now ||
+    (() => {
+      return +new Date()
+    })
+  const desiredFrames = 60
+  const millisecondsPerSecond = 1000
+
+  let running = {}
+  let counter = 1
+
+  return {
+    /**
+     * A requestAnimationFrame wrapper / polyfill.
+     *
+     * @param callback {Function} The callback to be invoked before the next repaint.
+     * @param root {HTMLElement} The root element for the repaint
+     */
+    requestAnimationFrame: (() => {
+      // Check for request animation Frame support
+      const requestFrame =
+        global.requestAnimationFrame ||
+        global.webkitRequestAnimationFrame ||
+        global.mozRequestAnimationFrame ||
+        global.oRequestAnimationFrame
+      let isNative = !!requestFrame
+
+      if (requestFrame && !/requestAnimationFrame\(\)\s*\{\s*\[native code\]\s*\}/i.test(requestFrame.toString())) {
+        isNative = false
+      }
+
+      if (isNative) {
+        return (callback, root) => {
+          requestFrame(callback, root)
+        }
+      }
+
+      const TARGET_FPS = 60
+      let requests = {}
+      // eslint-disable-next-line no-unused-vars
+      let requestCount = 0
+      let rafHandle = 1
+      let intervalHandle = null
+      let lastActive = +new Date()
+
+      return callback => {
+        const callbackHandle = rafHandle++
+
+        // Store callback
+        requests[callbackHandle] = callback
+        requestCount++
+
+        // Create timeout at first request
+        if (intervalHandle === null) {
+          intervalHandle = setInterval(() => {
+            const time = +new Date()
+            const currentRequests = requests
+
+            // Reset data structure before executing callbacks
+            requests = {}
+            requestCount = 0
+
+            for (const key in currentRequests) {
+              if (Object.prototype.hasOwnProperty.call(currentRequests, key)) {
+                currentRequests[key](time)
+                lastActive = time
+              }
+            }
+
+            // Disable the timeout when nothing happens for a certain
+            // period of time
+            if (time - lastActive > 2500) {
+              clearInterval(intervalHandle)
+              intervalHandle = null
+            }
+          }, 1000 / TARGET_FPS)
+        }
+
+        return callbackHandle
+      }
+    })(),
+
+    /**
+     * Stops the given animation.
+     *
+     * @param id {Integer} Unique animation ID
+     * @return {Boolean} Whether the animation was stopped (aka, was running before)
+     */
+    stop(id) {
+      const cleared = running[id] != null
+      cleared && (running[id] = null)
+      return cleared
+    },
+
+    /**
+     * Whether the given animation is still running.
+     *
+     * @param id {Integer} Unique animation ID
+     * @return {Boolean} Whether the animation is still running
+     */
+    isRunning(id) {
+      return running[id] != null
+    },
+
+    /**
+     * Start the animation.
+     *
+     * @param stepCallback {Function} Pointer to function which is executed on every step.
+     *   Signature of the method should be `function(percent, now, virtual) { return continueWithAnimation; }`
+     * @param verifyCallback {Function} Executed before every animation step.
+     *   Signature of the method should be `function() { return continueWithAnimation; }`
+     * @param completedCallback {Function}
+     *   Signature of the method should be `function(droppedFrames, finishedAnimation) {}`
+     * @param duration {Integer} Milliseconds to run the animation
+     * @param easingMethod {Function} Pointer to easing function
+     *   Signature of the method should be `function(percent) { return modifiedValue; }`
+     * @param root {Element ? document.body} Render root, when available. Used for internal
+     *   usage of requestAnimationFrame.
+     * @return {Integer} Identifier of animation. Can be used to stop it any time.
+     */
+    start(stepCallback, verifyCallback, completedCallback, duration, easingMethod, root) {
+      const start = time()
+      let lastFrame = start
+      let percent = 0
+      let dropCounter = 0
+      const id = counter++
+
+      if (!root) {
+        root = document.body
+      }
+
+      // Compacting running db automatically every few new animations
+      if (id % 20 === 0) {
+        const newRunning = {}
+        for (const usedId in running) {
+          newRunning[usedId] = true
+        }
+        running = newRunning
+      }
+
+      // This is the internal step method which is called every few milliseconds
+      const step = virtual => {
+        // Normalize virtual value
+        const render = virtual !== true
+
+        // Get current time
+        const now = time()
+
+        // Verification is executed before next animation step
+        if (!running[id] || (verifyCallback && !verifyCallback(id))) {
+          running[id] = null
+          completedCallback &&
+            completedCallback(desiredFrames - dropCounter / ((now - start) / millisecondsPerSecond), id, false)
+          return
+        }
+
+        // For the current rendering to apply let's update omitted steps in memory.
+        // This is important to bring internal state variables up-to-date with progress in time.
+        if (render) {
+          const droppedFrames = Math.round((now - lastFrame) / (millisecondsPerSecond / desiredFrames)) - 1
+          for (let j = 0; j < Math.min(droppedFrames, 4); j++) {
+            step(true)
+            dropCounter++
+          }
+        }
+
+        // Compute percent value
+        if (duration) {
+          percent = (now - start) / duration
+          if (percent > 1) {
+            percent = 1
+          }
+        }
+
+        // Execute step callback, then...
+        let value = easingMethod ? easingMethod(percent) : percent
+        value = isNaN(value) ? 0 : value
+        if ((stepCallback(value, now, render) === false || percent === 1) && render) {
+          running[id] = null
+          completedCallback &&
+            completedCallback(
+              desiredFrames - dropCounter / ((now - start) / millisecondsPerSecond),
+              id,
+              percent === 1 || duration == null,
+            )
+        } else if (render) {
+          lastFrame = now
+          this.requestAnimationFrame(step, root)
+        }
+      }
+
+      // Mark as running
+      running[id] = true
+
+      // Init first step
+      this.requestAnimationFrame(step, root)
+
+      // Return unique animation ID
+      return id
+    },
+  }
+})(root)
+
+export const easeOutCubic = pos => {
+  return Math.pow(pos - 1, 3) + 1
+}
+
+export const easeInOutCubic = pos => {
+  if ((pos /= 0.5) < 1) {
+    return 0.5 * Math.pow(pos, 3)
+  }
+
+  return 0.5 * (Math.pow(pos - 2, 3) + 2)
+}
+
+export default Animate

package/packages/amount/formate-value.js

@@ -0,0 +1,79 @@
+// 根据间隔规则格式化值
+export function formatValueByGapRule(gapRule, value, gap = ' ', range, isAdd = 1) {
+    const arr = value ? value.split('') : [] // 将值转换为字符数组
+    let showValue = '' // 格式化后的值
+    const rule = [] // 间隔规则数组
+    gapRule.split('|').some((n, j) => {
+        rule[j] = +n + (rule[j - 1] ? +rule[j - 1] : 0) // 计算间隔位置
+    })
+    let j = 0
+    arr.some((n, i) => {
+        // 移除多余部分
+        if (i > rule[rule.length - 1] - 1) {
+            return
+        }
+        if (i > 0 && i === rule[j]) {
+            showValue = showValue + gap + n // 添加间隔符
+            j++
+        } else {
+            showValue = showValue + '' + n
+        }
+    })
+    let adapt = 0
+    rule.some((n, j) => {
+        if (range === +n + 1 + j) {
+            adapt = 1 * isAdd // 调整光标位置
+        }
+    })
+    range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length
+    return { value: showValue, range: range } // 返回格式化后的值和光标位置
+}
+
+// 根据步长格式化值
+export function formatValueByGapStep(step, value, gap = ' ', direction = 'right', range, isAdd = 1, oldValue = '') {
+    if (value.length === 0) {
+        return { value, range }
+    }
+
+    const arr = value && value.split('')
+    let _range = range
+    let showValue = ''
+
+    if (direction === 'right') {
+        for (let j = arr.length - 1, k = 0; j >= 0; j--, k++) {
+            const m = arr[j]
+            showValue = k > 0 && k % step === 0 ? m + gap + showValue : m + '' + showValue // 从右向左添加间隔符
+        }
+        if (isAdd === 1) {
+            // 在添加的情况下，如果添加前字符串的长度减去新的字符串的长度为2，说明多了一个间隔符，需要调整range
+            if (oldValue.length - showValue.length === -2) {
+                _range = range + 1
+            }
+        } else {
+            // 在删除情况下，如果删除前字符串的长度减去新的字符串的长度为2，说明少了一个间隔符，需要调整range
+            if (oldValue.length - showValue.length === 2) {
+                _range = range - 1
+            }
+            // 删除到最开始，range 保持 0
+            if (_range <= 0) {
+                _range = 0
+            }
+        }
+    } else {
+        arr.some((n, i) => {
+            showValue = i > 0 && i % step === 0 ? showValue + gap + n : showValue + '' + n // 从左向右添加间隔符
+        })
+        const adapt = range % (step + 1) === 0 ? 1 * isAdd : 0
+        _range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length
+    }
+
+    return { value: showValue, range: _range } // 返回格式化后的值和光标位置
+}
+
+// 去除值中的间隔符
+export function trimValue(value, gap = ' ') {
+    value = typeof value === 'undefined' ? '' : value
+    const reg = new RegExp(gap, 'g')
+    value = value.toString().replace(reg, '') // 去除所有间隔符
+    return value
+}

package/packages/amount/index.js

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

package/packages/amount/main.vue

@@ -0,0 +1,168 @@
+<template>
+  <span class="xn-amount" :class="{ numerical: !isCapital }">
+    <template v-if="!isCapital">
+      <i class="xn-amount-prefix" :style="prefixStyle">{{ prefix }}</i>{{ formatValue | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) }}
+    </template>
+    <template v-else>
+      {{ formatValue | doPrecision(4, isRoundUp) | doCapital }}
+    </template>
+  </span>
+</template>
+
+<script>
+import { formatValueByGapStep } from "./formate-value.js";
+import numberCapital from "./number-capital.js";
+import { noop } from "./noop.js";
+import Animate from "./animate.js";
+
+export default {
+  name: "XnAmount",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    precision: {
+      type: Number,
+      default: 2,
+    },
+    isRoundUp: {
+      type: Boolean,
+      default: true,
+    },
+    hasSeparator: {
+      type: Boolean,
+      default: true,
+    },
+    separator: {
+      type: String,
+      default: ",",
+    },
+    isAnimated: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: Boolean,
+      default: false,
+    },
+    isCapital: {
+      type: Boolean,
+      default: false,
+    },
+    duration: {
+      type: Number,
+      default: 1000,
+    },
+    prefix: {
+      type: String,
+      default: "￥",
+    },
+    prefixStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  filters: {
+    // 处理精度
+    doPrecision(value, precision, isRoundUp) {
+      const exponentialForm = Number(`${value}e${precision}`);
+      const rounded = isRoundUp
+        ? Math.round(exponentialForm)
+        : Math.floor(exponentialForm);
+      return Number(`${rounded}e-${precision}`).toFixed(precision);
+    },
+    // 处理格式
+    doFormat(value, hasSeparator, separator) {
+      if (!hasSeparator) {
+        return value;
+      }
+
+      const numberParts = value.split(".");
+      let integerValue = numberParts[0];
+      const decimalValue = numberParts[1] || "";
+
+      let sign = "";
+      if (integerValue.startsWith("-")) {
+        integerValue = integerValue.substring(1);
+        sign = "-";
+      }
+
+      const formateValue = formatValueByGapStep(
+        3,
+        integerValue,
+        separator,
+        "right",
+        0,
+        1
+      );
+      return decimalValue
+        ? `${sign}${formateValue.value}.${decimalValue}`
+        : `${sign}${formateValue.value}`;
+    },
+    // 转换为大写
+    doCapital(value) {
+      return numberCapital(value);
+    },
+  },
+  watch: {
+    value: {
+      handler(val, oldVal) {
+        /* istanbul ignore if  */
+        if (!this.isMounted) {
+          this.formatValue = val;
+          return;
+        }
+        if (this.isAnimated || this.transition) {
+          this.$_doAnimateDisplay(oldVal, val);
+        } else {
+          this.formatValue = val;
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    // 计算合法精度
+    legalPrecision() {
+      return this.precision > 0 ? this.precision : 0;
+    },
+  },
+  data() {
+    return {
+      formatValue: 0,
+      isMounted: false,
+    };
+  },
+  mounted() {
+    this.isMounted = true;
+  },
+  methods: {
+    // 动画显示数值变化
+    $_doAnimateDisplay(fromValue = 0, toValue = 0) {
+      /* istanbul ignore next  */
+      const step = (percent) => {
+        if (percent === 1) {
+          this.formatValue = toValue;
+          return;
+        }
+        this.formatValue = fromValue + (toValue - fromValue) * percent;
+      };
+
+      /* istanbul ignore next  */
+      const verify = (id) => id;
+      Animate.start(step, verify, noop, this.duration);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.xn-amount{
+    &-prefix{
+        font-style: normal;
+        font-size: inherit;
+    }
+}
+</style>

package/packages/amount/noop.js

@@ -0,0 +1 @@
+export function noop() {}

package/packages/amount/number-capital.js

@@ -0,0 +1,114 @@
+// 中文数字
+const cnNums = ['\u96f6', '\u58f9', '\u8d30', '\u53c1', '\u8086', '\u4f0d', '\u9646', '\u67d2', '\u634c', '\u7396']
+
+// 整数部分的单位
+const cnIntRadice = ['', '\u62fe', '\u4f70', '\u4edf']
+
+// 整数部分的进位单位
+const cnIntUnits = ['', '\u4e07', '\u4ebf', '兆']
+
+// 小数部分的单位
+const cnDecUnits = ['\u89d2', '\u5206', '\u5398', '\u6beb']
+
+// 整数部分的结尾字符
+const cnInteger = '\u6574' // 整
+
+// 整数部分的货币单位
+const cnIntLast = '\u5143' // 元
+
+// 负数的符号
+const cnNegative = '\u8d1f' // 负
+
+// 最大处理的数字
+const maxNum = 999999999999999.9999
+
+// 将数字转换为中文大写金额的函数
+export default function(number) {
+  let negative // 负数标志
+  let integerNum // 整数部分
+  let decimalNum // 小数部分
+  let capitalStr = '' // 中文大写金额字符串
+
+  let parts // 数字的整数和小数部分
+
+  /* istanbul ignore if  */
+  if (number === '') {
+    return ''
+  }
+
+  number = parseFloat(number) // 将输入转换为浮点数
+
+  if (number < 0) {
+    negative = true // 如果是负数，设置负数标志
+    number = Math.abs(number) // 取绝对值
+  }
+
+  /* istanbul ignore if  */
+  if (number >= maxNum) {
+    return ''
+  }
+
+  /* istanbul ignore if  */
+  if (number === 0) {
+    capitalStr = cnNums[0] + cnIntLast + cnInteger // 如果数字为0，直接返回“零元整”
+    return capitalStr
+  }
+
+  // 将数字转换为字符串
+  number += ''
+
+  if (number.indexOf('.') === -1) {
+    integerNum = number // 如果没有小数点，整数部分为整个数字
+    decimalNum = '' // 小数部分为空
+  } else {
+    parts = number.split('.') // 分割整数和小数部分
+    integerNum = parts[0]
+    decimalNum = parts[1].substr(0, 4) // 取小数部分的前四位
+  }
+
+  // 转换整数部分
+  if (parseInt(integerNum, 10) > 0) {
+    let zeroCount = 0 // 连续零的计数器
+    for (let i = 0, IntLen = integerNum.length; i < IntLen; i++) {
+      const n = integerNum.substr(i, 1) // 当前位的数字
+      const p = IntLen - i - 1 // 当前位的权重
+      const q = p / 4 // 当前位的进位单位
+      const m = p % 4 // 当前位的单位
+      if (n === '0') {
+        zeroCount++ // 如果当前位是零，增加零计数器
+      } else {
+        if (zeroCount > 0) {
+          capitalStr += cnNums[0] // 如果有连续的零，添加一个零
+        }
+        zeroCount = 0 // 重置零计数器
+        capitalStr += cnNums[parseInt(n)] + cnIntRadice[m] // 添加当前位的中文数字和单位
+      }
+      if (m === 0 && zeroCount < 4) {
+        capitalStr += cnIntUnits[q] // 添加进位单位
+      }
+    }
+    capitalStr += cnIntLast // 添加货币单位
+  }
+
+  // 转换小数部分
+  if (decimalNum !== '') {
+    for (let i = 0, decLen = decimalNum.length; i < decLen; i++) {
+      const n = decimalNum.substr(i, 1) // 当前位的小数
+      if (n !== '0') {
+        capitalStr += cnNums[Number(n)] + cnDecUnits[i] // 添加当前位的小数的中文数字和单位
+      }
+    }
+  }
+
+  /* istanbul ignore if  */
+  if (capitalStr === '') {
+    capitalStr += cnNums[0] + cnIntLast + cnInteger // 如果没有任何转换结果，返回“零元整”
+  } else if (decimalNum === '') {
+    capitalStr += cnInteger // 如果没有小数部分，添加“整”
+  }
+
+  if (negative) {
+    capitalStr = `${cnNegative}${capitalStr}` // 如果是负数，添加负号
+  }
+  return capitalStr // 返回中文大写金额字符串
+}

package/public/index.html

@@ -1,18 +1,18 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="appDoc"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="appDoc"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/index.js

@@ -18,6 +18,7 @@ import XnText from '../packages/ellipsis/index'
 import XnCard from '../packages/card/index'
 import XnDescription from '../packages/description/index'
 import XnDescriptionItem from '../packages/descriptionItem/index'
+import XnAmount from '../packages/amount/index'
 
 import Utils from 'xn-ui/src/utils/index'
 const doc = 'http://lzwr.gitee.io/xn-ui/#/'
@@ -40,7 +41,8 @@ const components = [
     XnText,
     XnCard,
     XnDescription,
-    XnDescriptionItem
+    XnDescriptionItem,
+    XnAmount
 ]
 const version = require('../package.json').version
 const install = function (Vue) {
@@ -87,5 +89,6 @@ export default {
     XnEmpty,
     XnTag,
     XnText,
-    XnCard
+    XnCard,
+    XnAmount
 }

package/src/utils/package.json

@@ -1,14 +1,14 @@
-{
-  "name": "xianniu-utils",
-  "version": "0.1.3",
-  "description": "一些工具",
-  "main": "index.js",
-  "author": "liuzengwei",
-  "license": "MIT",
-  "dependencies": {
-    "dayjs": "^1.10.7",
-    "decimal.js": "^10.4.2",
-    "good-storage": "^1.1.1",
-    "lodash": "^4.17.21"
-  }
-}
+{
+  "name": "xianniu-utils",
+  "version": "0.1.3",
+  "description": "一些工具",
+  "main": "index.js",
+  "author": "liuzengwei",
+  "license": "MIT",
+  "dependencies": {
+    "dayjs": "^1.10.7",
+    "decimal.js": "^10.4.2",
+    "good-storage": "^1.1.1",
+    "lodash": "^4.17.21"
+  }
+}