t20-common-lib 0.9.13 → 0.10.0

package/packages/common-collapse/src/main.vue

@@ -1,148 +1,148 @@
-<template>
-  <div class="collapse" :class="{ 'm-b-s': !_isCollapse }">
-    <el-collapse-transition v-if="$slots.default && showCard">
-      <div class="collapse-content" v-show="!_isCollapse">
-        <slot />
-      </div>
-    </el-collapse-transition>
-    <div class="collapse-slot">
-      <el-button v-if="showCard" class="rotate90" :icon="_isCollapse? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left'" plain onlyicon size="mini"  @click="handleToggle"/>
-      <el-button icon="el-icon-setting" plain onlyicon size="mini"  @click="toSettings" />
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CommonCollapse',
-  props: {
-    permission: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    showCard: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      isCollapse: false
-    }
-  },
-  computed: {
-    hasUsedVModel() {
-      return 'value' in this.$options.propsData
-    },
-    _isCollapse: {
-      get() {
-        return this.hasUsedVModel ? this.value : this.isCollapse
-      },
-      set(val) {
-        if (this.hasUsedVModel) {
-          this.$emit('input', val)
-        } else {
-          this.isCollapse = val
-        }
-      }
-    }
-  },
-  methods: {
-    toSettings() {
-      this.$emit('toSettings')
-    },
-    // 切换 显示/隐藏
-    handleToggle() {
-      this._isCollapse = !this._isCollapse
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.collapse {
-  position: relative;
-  &-slot {
-    z-index: 99999;
-    position: absolute;
-    top: -28px;
-    right: 0;
-    height: 24px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .el-icon {
-      color: var(--color-text-regular);
-      cursor: pointer;
-      font-weight: bold;
-      font-size: 18px;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-$--button-margin-left: 6px;
-
-.el-button--primary,
-.el-button--default,
-.el-button--default.is-plain,
-.el-button--warning.is-plain,
-.el-button--danger.is-plain {
-  min-width: 72px;
-}
-
-.el-dropdown__caret-button,
-.el-button[onlyicon] {
-  min-width: auto;
-}
-
-.el-button.button-4em {
-  min-width: 72px;
-}
-
-.el-button+.el-button {
-  margin-left: $--button-margin-left;
-}
-
-.el-button+.el-dropdown {
-  margin-left: $--button-margin-left;
-}
-
-.el-button--mini+.el-button--mini {
-  margin-left: $--button-margin-left;
-}
-
-.el-button[onlyicon] {
-
-  &.el-button--default,
-  &.el-button--medium,
-  &.el-button--small {
-    padding: 8px;
-  }
-
-  &.el-button--mini {
-    padding: 5px;
-  }
-}
-
-.el-button--info {
-
-  &,
-  &:focus {
-    background-color: var(--color-info);
-    border-color: var(--color-info);
-  }
-
-  &:hover {
-    background: var(--color-info-hover);
-    border-color: var(--color-info-hover);
-  }
-}
-
+<template>
+  <div class="collapse" :class="{ 'm-b-s': !_isCollapse }">
+    <el-collapse-transition v-if="$slots.default && showCard">
+      <div class="collapse-content" v-show="!_isCollapse">
+        <slot />
+      </div>
+    </el-collapse-transition>
+    <div class="collapse-slot">
+      <el-button v-if="showCard" class="rotate90" :icon="_isCollapse? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left'" plain onlyicon size="mini"  @click="handleToggle"/>
+      <el-button icon="el-icon-setting" plain onlyicon size="mini"  @click="toSettings" />
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CommonCollapse',
+  props: {
+    permission: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    showCard: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isCollapse: false
+    }
+  },
+  computed: {
+    hasUsedVModel() {
+      return 'value' in this.$options.propsData
+    },
+    _isCollapse: {
+      get() {
+        return this.hasUsedVModel ? this.value : this.isCollapse
+      },
+      set(val) {
+        if (this.hasUsedVModel) {
+          this.$emit('input', val)
+        } else {
+          this.isCollapse = val
+        }
+      }
+    }
+  },
+  methods: {
+    toSettings() {
+      this.$emit('toSettings')
+    },
+    // 切换 显示/隐藏
+    handleToggle() {
+      this._isCollapse = !this._isCollapse
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  position: relative;
+  &-slot {
+    z-index: 99999;
+    position: absolute;
+    top: -28px;
+    right: 0;
+    height: 24px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .el-icon {
+      color: var(--color-text-regular);
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+$--button-margin-left: 6px;
+
+.el-button--primary,
+.el-button--default,
+.el-button--default.is-plain,
+.el-button--warning.is-plain,
+.el-button--danger.is-plain {
+  min-width: 72px;
+}
+
+.el-dropdown__caret-button,
+.el-button[onlyicon] {
+  min-width: auto;
+}
+
+.el-button.button-4em {
+  min-width: 72px;
+}
+
+.el-button+.el-button {
+  margin-left: $--button-margin-left;
+}
+
+.el-button+.el-dropdown {
+  margin-left: $--button-margin-left;
+}
+
+.el-button--mini+.el-button--mini {
+  margin-left: $--button-margin-left;
+}
+
+.el-button[onlyicon] {
+
+  &.el-button--default,
+  &.el-button--medium,
+  &.el-button--small {
+    padding: 8px;
+  }
+
+  &.el-button--mini {
+    padding: 5px;
+  }
+}
+
+.el-button--info {
+
+  &,
+  &:focus {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+  }
+
+  &:hover {
+    background: var(--color-info-hover);
+    border-color: var(--color-info-hover);
+  }
+}
+
 </style>

package/packages/form-page/index.js

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

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;