t20-common-lib 0.9.14 → 0.10.1

package/packages/form-page/src/main.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="t20-form flex-column">
-    <div class="m-b-s" v-if="$slots.header">
-      <slot name="header"></slot>
-    </div>
-    <div class="n20-page-content flex-item">
-      <!--
-        锚点 + 表单
-        <N20-anchor v-model="action" position="right">
-          <el-form
-            class="label-width-16em"
-            :model="formData"
-            :rules="rules"
-            label-width="16em"
-          >
-            <N20-anchor-item :title="$l('基本信息')" id="1">
-              <el-form-item :label="$l('支付工具')" prop="settlementTools"></el-form-item>
-            </N20-anchor-item>
-          </el-form>
-        </N20-anchor>
-       -->
-      <slot></slot>
-    </div>
-    <div class="t20-page-button-shadow flex-box flex-c flex-v" v-if="$slots.footer">
-      <slot name="footer"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FormPage'
-}
-</script>
-
-<style lang="scss" scoped>
-.t20-form {
-  padding: 8px 8px 0 !important;
-  background-color: #ffffff !important;
-}
-
-.t20-page-button-shadow {
-  position: relative;
-  height: 44px;
-  &::before {
-    content: "";
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: -8px;
-    right: -8px;
-    box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, .08);
-  }
-}
+<template>
+  <div class="t20-form flex-column">
+    <div class="m-b-s" v-if="$slots.header">
+      <slot name="header"></slot>
+    </div>
+    <div class="n20-page-content flex-item">
+      <!--
+        锚点 + 表单
+        <N20-anchor v-model="action" position="right">
+          <el-form
+            class="label-width-16em"
+            :model="formData"
+            :rules="rules"
+            label-width="16em"
+          >
+            <N20-anchor-item :title="$l('基本信息')" id="1">
+              <el-form-item :label="$l('支付工具')" prop="settlementTools"></el-form-item>
+            </N20-anchor-item>
+          </el-form>
+        </N20-anchor>
+       -->
+      <slot></slot>
+    </div>
+    <div class="t20-page-button-shadow flex-box flex-c flex-v" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormPage'
+}
+</script>
+
+<style lang="scss" scoped>
+.t20-form {
+  padding: 8px 8px 0 !important;
+  background-color: #ffffff !important;
+}
+
+.t20-page-button-shadow {
+  position: relative;
+  height: 44px;
+  &::before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: -8px;
+    right: -8px;
+    box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, .08);
+  }
+}
 </style>

package/packages/input-number/index.js

@@ -0,0 +1,8 @@
+import InputNumber from './src/main';
+
+/* istanbul ignore next */
+InputNumber.install = function(Vue) {
+  Vue.component(InputNumber.name, InputNumber);
+};
+
+export default InputNumber;

package/packages/input-number/src/main.vue

@@ -0,0 +1,184 @@
+<template>
+  <el-input v-bind="$attrs" :value="innerValue" v-on="listeners" @keydown.native="handleKeydown">
+    <slot></slot>
+    <template slot="prepend">
+      <slot name="prepend"></slot>
+    </template>
+    <template slot="append">
+      <slot name="append"></slot>
+    </template>
+    <template slot="prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template slot="suffix">
+      <slot name="suffix"></slot>
+    </template>
+  </el-input>
+</template>
+
+<script>
+export default {
+  name: 'InputNumber',
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    allowNegative: {
+      type: Boolean,
+      default: false
+    },
+    allowZero: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      innerValue: ''
+    }
+  },
+  computed: {
+    listeners() {
+      return Object.assign({}, this.$listeners, {
+        input: this.handleInput,
+        change: this.handleChange,
+        blur: this.handleBlur
+      })
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        const sanitized = this.sanitize(newVal, { allowPartial: false })
+        if (sanitized === '' && this.innerValue === '-' && this.allowNegative) {
+          return
+        }
+        if (sanitized !== this.innerValue) {
+          this.innerValue = sanitized
+        }
+        const normalizedSanitized = this.normalizeForEmit(sanitized)
+        const normalizedIncoming = this.normalizeIncoming(newVal)
+        if (normalizedSanitized !== normalizedIncoming) {
+          this.emitValue(sanitized)
+        }
+      }
+    },
+    allowNegative() {
+      this.revalidateCurrent()
+    },
+    allowZero() {
+      this.revalidateCurrent()
+    }
+  },
+  methods: {
+    handleInput(value) {
+      const sanitized = this.sanitize(value, { allowPartial: true })
+      this.innerValue = sanitized
+      this.emitValue(sanitized)
+    },
+    handleBlur(event) {
+      const sanitized = this.sanitize(this.innerValue, { allowPartial: false })
+      if (sanitized !== this.innerValue) {
+        this.innerValue = sanitized
+      }
+      this.emitValue(sanitized)
+      this.$emit('blur', event)
+    },
+    handleChange(value) {
+      const sanitized = this.sanitize(value, { allowPartial: false })
+      if (sanitized !== this.innerValue) {
+        this.innerValue = sanitized
+      }
+      this.emitValue(sanitized)
+      this.$emit('change', sanitized)
+    },
+    handleKeydown(event) {
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        return
+      }
+      const allowed = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Enter']
+      if (allowed.indexOf(event.key) !== -1) {
+        return
+      }
+      if (event.key === '-') {
+        if (!this.allowNegative) {
+          event.preventDefault()
+          return
+        }
+        const { value, selectionStart } = event.target
+        if (selectionStart !== 0 || value.includes('-')) {
+          event.preventDefault()
+        }
+        return
+      }
+      if (!/^\d$/.test(event.key)) {
+        event.preventDefault()
+      }
+    },
+    normalizeForEmit(value) {
+      return value === '-' ? '' : value
+    },
+    normalizeIncoming(value) {
+      if (value === null || value === undefined) {
+        return ''
+      }
+      return String(value).trim()
+    },
+    sanitize(value, { allowPartial = false } = {}) {
+      if (value === null || value === undefined) {
+        return ''
+      }
+      let input = String(value).trim()
+      let sign = ''
+
+      if (input.startsWith('-')) {
+        sign = '-'
+        input = input.slice(1)
+      }
+
+      input = input.replace(/\D+/g, '')
+
+      if (!this.allowNegative) {
+        sign = ''
+      }
+
+      let sanitized = sign + input
+
+      if (!input && sign) {
+        sanitized = allowPartial && this.allowNegative ? '-' : ''
+      }
+
+      if (sanitized && sanitized !== '-') {
+        sanitized = sanitized.replace(/^(-?)0+(?=\d)/, '$1')
+      }
+
+      if (!this.allowZero && sanitized && sanitized !== '-') {
+        const numeric = Number(sanitized)
+        if (!Number.isNaN(numeric) && numeric === 0) {
+          sanitized = ''
+        }
+      }
+
+      return sanitized
+    },
+    emitValue(value) {
+      const normalized = this.normalizeForEmit(value)
+      this.$emit('input', normalized)
+    },
+    revalidateCurrent() {
+      const sanitized = this.sanitize(this.innerValue, { allowPartial: false })
+      if (sanitized !== this.innerValue) {
+        this.innerValue = sanitized
+      }
+      this.emitValue(sanitized)
+    }
+  }
+}
+</script>

package/packages/main-page/index.js

@@ -1,8 +1,8 @@
-import MainPage from './src/main';
-
-/* istanbul ignore next */
-MainPage.install = function(Vue) {
-  Vue.component(MainPage.name, MainPage);
-};
-
-export default MainPage;
+import MainPage from './src/main';
+
+/* istanbul ignore next */
+MainPage.install = function(Vue) {
+  Vue.component(MainPage.name, MainPage);
+};
+
+export default MainPage;

package/packages/main-page/src/main.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="flex-column main-page">
-    <div v-if="$slots.header" class="header">
-      <slot name="header"></slot>
-    </div>
-    <div v-if="$slots.card || $slots.tab" style="position: relative;">
-      <slot name="card"></slot>
-      <div class="tab" v-if="$slots.tab">
-        <slot name="tab"></slot>
-      </div>
-    </div>
-    <div class="bg-white flex-1 overflow">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MainPage'
-}
-</script>
-
-<style lang="scss" scoped>
-.tab {
-  position: absolute;
-  bottom: -40px;
-  left: 8px;
-}
-
-.bg-white {
-  background-color: #fff !important;
-}
-
-.header {
-  height: 32px; 
-  line-height: 32px;
-}
-
-.main-page {
-  padding: 0 !important;
-  background: #f0f2f5;
-}
+<template>
+  <div class="flex-column main-page">
+    <div v-if="$slots.header" class="header">
+      <slot name="header"></slot>
+    </div>
+    <div v-if="$slots.card || $slots.tab" style="position: relative;">
+      <slot name="card"></slot>
+      <div class="tab" v-if="$slots.tab">
+        <slot name="tab"></slot>
+      </div>
+    </div>
+    <div class="bg-white flex-1 overflow">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainPage'
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  position: absolute;
+  bottom: -40px;
+  left: 8px;
+}
+
+.bg-white {
+  background-color: #fff !important;
+}
+
+.header {
+  height: 32px; 
+  line-height: 32px;
+}
+
+.main-page {
+  padding: 0 !important;
+  background: #f0f2f5;
+}
 </style>

package/packages/multi-currency-statistics/index.js

@@ -1,8 +1,8 @@
-import MultiCurrencyStatistics from './src/main';
-
-/* istanbul ignore next */
-MultiCurrencyStatistics.install = function(Vue) {
-  Vue.component(MultiCurrencyStatistics.name, MultiCurrencyStatistics);
-};
-
-export default MultiCurrencyStatistics;
+import MultiCurrencyStatistics from './src/main';
+
+/* istanbul ignore next */
+MultiCurrencyStatistics.install = function(Vue) {
+  Vue.component(MultiCurrencyStatistics.name, MultiCurrencyStatistics);
+};
+
+export default MultiCurrencyStatistics;