zydx-plus 1.17.75 → 1.17.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.17.75",
+  "version": "1.17.77",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/input/index.js

@@ -0,0 +1,6 @@
+import main from './src/input';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/input/src/input.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="input_wrapper"
+       :class="{ 'border': border }">
+    <slot name="prefix"></slot>
+    <template v-if="['input', 'text', 'password', 'email', 'number'].includes(type)">
+      <input :value="value"
+             class="input"
+             :type="type"
+             :maxlength="maxlength"
+             :min="min"
+             :max="max"
+             :minlength="minLength"
+             :placeholder="readonly ? '' : placeholder"
+             :readonly="readonly"
+             @input="onInput"
+             @blur="onBlur" />
+      <template v-if="hasSuffixSlot">
+        <div class="suffix_container">
+          <slot name="suffix"></slot>
+        </div>
+      </template>
+    </template>
+    <template v-if="type === 'textarea'">
+      <textarea :value="value"
+                class="textarea"
+                ref="target"
+                :type="type"
+                :maxlength="maxlength"
+                :minlength="minLength"
+                :placeholder="placeholder"
+                :readonly="readonly"
+                @input="onInput" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'zydx-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    maxlength: {
+      type: Number,
+      default: null
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    minLength: {
+      type: Number,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => null
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.setDefaultHeight()
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('update:value', this.sanitize(e.target.value))
+      if (this.type === 'textarea') {
+        this.triggerResize()
+      }
+    },
+    onBlur: function (e) {
+      if (this.type === 'number') {
+        let value = Number(e.target.value)
+        value > this.max && (value = this.max)
+        value < this.min && (value = this.min)
+        if (String(value).indexOf('.') !== -1) {
+          let digits = Math.log10((1 / this.step))
+          value = value.toFixed(digits)
+        }
+        e.target.value = String(value)
+        this.$emit('update:value', String(value))
+        return
+      }
+    },
+    setDefaultHeight: function () {
+      if (this.type !== 'textarea') return
+      if (!this.row) return
+      const { min } = this.row
+      this.$refs.target.style.height = `${min * 30}px`
+    },
+    sanitize: function (input) {
+      return input.replace(/<\/?[^>]+>/ig, "");
+    },
+    triggerResize: function () {
+      let element = this.$refs.target
+      if (!element) return
+      if (!element.scrollHeight) {
+        element.style.height = '30px'
+      } else {
+        if (!this.row) {
+          element.style.height = `${element.scrollHeight}px`
+        } else {
+          const { min, max } = this.row
+          if (element.scrollHeight < min * 30) {
+            element.style.height = `${min * 30}px`
+          } else if (element.scrollHeight > max * 30) {
+            element.style.height = `${max * 30}px`
+          } else {
+            element.style.height = `${element.scrollHeight}px`
+          }
+        }
+      }
+    },
+  },
+  computed: {
+    hasSuffixSlot() {
+      return !!this.$slots.suffix;
+    },
+    hasPreffixSlot() {
+      return !!this.$slots.prefix;
+    }
+  }
+}) 
+</script>
+
+<style scoped>
+.input_wrapper {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 3px;
+}
+
+.input_wrapper.border {
+  border: 1px solid #ccc
+}
+
+.input_wrapper .input {
+  width: 100%;
+  height: 30px;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.input_wrapper .textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 14px;
+  line-height: 30px;
+}
+
+.prefix_container {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.suffix_container {
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px
+}
+
+.suffix_container:deep(*) {
+  width: auto;
+  height: 16px;
+  font-size: 14px;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.textarea::-webkit-scrollbar {
+  display: none;
+}
+</style>

package/src/index.js

@@ -53,7 +53,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.17.75',
+    version: '1.17.77',
     install,
     Calendar,
     Message,