vdesign-ui 0.1.24 → 0.2.0-beta

package/dist/components/icon/index.vue

@@ -1,18 +1,23 @@
 <template>
-  <svg v-if="svg" class="vd-iconfont vd-svg-icon" :class="[`vd-icon-${name}`, size ? `vd-icon-${size}` : '']"
-    :style="{ fill: color }" @click="$emit('click', $event)">
-    <use :xlink:href="`#vd-icon-${name}`" />
-  </svg>
-  <i v-else-if="name" class="vd-iconfont"
-    :class="[isImage(name) ? '' : `vd-icon-${name}`, size ? `vd-icon-${size}` : '']" :style="{ color }"
-    @click="$emit('click', $event)">
-    <img class="vd-img-icon" v-if="isImage(name)" :src="name" />
-  </i>
+  <span>
+    <template v-if="name">
+      <svg v-if="isSvg" class="vd-iconfont vd-svg-icon" :class="[`vd-icon-${name}`, sizeClass]" :style="{ fill: color }"
+        @click="$emit('click', $event)">
+        <use :xlink:href="`#vd-icon-${name}`" />
+      </svg>
+      <i v-else class="vd-iconfont" :class="[isImage ? '' : `vd-icon-${name}`, sizeClass]" :style="{ color }"
+        @click="$emit('click', $event)">
+        <img class="vd-img-icon" v-if="isImage" :src="name" />
+      </i>
+    </template>
+    <slot v-else></slot>
+  </span>
 </template>
 
 <script>
-import './font/iconfont.js'
 import "./font/iconfont.css";
+import "./font/iconfont.js";
+
 export default {
   name: 'vd-icon',
   props: {
@@ -28,16 +33,19 @@ export default {
       type: String,
       default: '',
     },
-    svg: {
-      type: Boolean,
-      default: false,
-    }
   },
-  methods: {
-    isImage(name) {
-      return name ? name.indexOf('/') !== -1 : false;
+  computed: {
+    isImage() {
+      return this.name.includes('/');
+    },
+    isSvg() {
+      // 判断是否为 SVG 图标，依据 name 是否以 '.svg' 结尾
+      return this.name.endsWith('_svg');
+    },
+    sizeClass() {
+      return this.size ? `vd-icon-${this.size}` : '';
     }
-  },
+  }
 }
 </script>
 

package/dist/components/input/index.vue

@@ -1,34 +1,17 @@
 <template>
   <div :class="wrapClasses" class="vd-input">
-    <template v-if="inputTextArea || type !== 'textarea'">
-      <span v-if="prefix || $slots.prefix" class="vd-input-form__prefix" :class="borderRightClasses">
+      <!-- 前缀，还有前缀右边框 -->
+      <span v-if="hasPrefix" class="vd-input-form__prefix" :class="borderRightClasses">
         <slot name="prefix">{{ prefix }}</slot>
       </span>
-      <input
-        v-if="!inputTextArea"
-        ref="input"
-        v-bind="$attrs"
-        :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
-        :class="inputClasses"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :value="currentValue"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      />
-
       <textarea
-        v-else
+        v-if="type === 'textarea'"
         ref="textarea"
         v-bind="$attrs"
-        :id="elementId"
-        :wrap="wrap"
-        :type="type"
         :rows="rows"
         :class="inputClasses"
         :disabled="disabled"
-        :placeholder="placeholder"
+        :readonly="readonly"
         :value="currentValue"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -36,71 +19,58 @@
         :style="textareaStyles"
       >
       </textarea>
+      <input
+        v-else
+        ref="input"
+        v-bind="$attrs"
+        :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
+        :class="inputClasses"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="currentValue"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+          <!-- 右侧功能区域 -->
+
       <div
-        v-if="suffix || $slots.suffix || append || $slots.append || isWordLimitVisible"
+        v-if="showRightSection"
         class="vd-input-form__right"
       >
-        <span v-if="suffix || $slots.suffix" class="vd-input-form__suffix">
-          <slot name="suffix">
-            <vd-icon name="icon_btn_clean" @click="handleClear"></vd-icon>
-          </slot>
+        <!-- 清除按钮 -->
+        <span v-if="showClear" class="vd-input-form__suffix">
+          <vd-icon name="icon_btn_clean" @mousedown.prevent.native="handleClear"></vd-icon>
         </span>
-        <span v-if="append || $slots.append" class="vd-input-form__append">
+        <!-- (大数字的时候)设计要求的自定义文字 -->
+        <span v-if="hasAppend" class="vd-input-form__append">
           <slot name="append">{{ append }}</slot>
         </span>
+        <!-- 字数限制 -->
         <div
           v-if="isWordLimitVisible"
-          :class="[
-            'vd-input__word-limit',
-            { 'vd-input__word-limit--error': isOverLimit },
-          ]"
+          :class="wordLimitClasses"
         >
           <span>{{ textLength }}</span
           >/<span>{{ upperLimit }}</span>
         </div>
       </div>
+      <!-- 密码的时候,单独的清空按钮 -->
       <span
-        v-if="passwordClose || passwordIcon"
+        v-if="showPasswordControls"
         class="vd-input-form__password"
       >
-        <span v-if="passwordClose" class="vd-input-form__password--close">
-            <vd-icon name="icon_btn_close" @click="handleClear"></vd-icon>
+        <span v-if="showPasswordClear" class="vd-input-form__password--close">
+            <vd-icon name="icon_btn_close" @mousedown.prevent.native="handleClear"></vd-icon>
         </span>
-        <span v-if="passwordIcon" class="vd-input-form__password--password">
+        <span v-if="showPasswordIcon" class="vd-input-form__password--password">
             <vd-icon
               :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
               @click="handlePasswordVisible"
             ></vd-icon>
         </span>
       </span>
-    </template>
-    <template v-else>
-      <textarea
-        ref="textarea"
-        :type="type"
-        v-bind="$attrs"
-        :wrap="wrap"
-        :class="inputClasses"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :value="currentValue"
-        :rows="rows"
-        :name="name"
-        @input="handleInput"
-        :style="textareaStyles"
-      >
-      </textarea>
-      <div
-        v-if="isWordLimitVisible"
-        :class="[
-          'vd-input__word-limit',
-          { 'vd-input__word-limit--error': isOverLimit },
-        ]"
-      >
-        <span>{{ textLength }}</span
-        >/<span>{{ upperLimit }}</span>
-      </div>
-    </template>
   </div>
 </template>
 
@@ -111,26 +81,26 @@ const prefixCls = "vd-input";
 export default {
   name: "vd-input",
   props: {
+    value: {
+      type: [String, Number],
+      default: "",
+    },
     type: {
       type: String,
       default: "text",
     },
     prefix: {
       type: [Boolean, String],
+      default: ''
     },
     borderRight: {
       type: Boolean,
       default: true
     },
-    suffix: {
-      type: Boolean,
-    },
     // 设计如此,单独的文字
     append: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
+      type: [Boolean, String],
+      default: ''
     },
     error: {
       type: Boolean,
@@ -144,27 +114,17 @@ export default {
     passwordClose: {
       type: Boolean,
     },
-    passwordType: {
-      type: String,
-      default: "icon_btn_eye_close",
-    },
+    // 输入框类型	 表单类型,常规输入库,搜索框
     form: {
       type: String,
     },
     disabled: {
       type: Boolean,
     },
-    value: {
-      type: [String, Number],
-      default: "",
-    },
     rows: {
       type: Number,
       default: 2,
     },
-    name: {
-      type: String,
-    },
     // 设计如此多行textarea,跟input属性一样
     inputTextArea: {
       type: Boolean,
@@ -180,29 +140,66 @@ export default {
       type: [Boolean, Object],
       default: false,
     },
-    elementId: {
-      type: String,
-    },
-    wrap: {
-      type: String,
-      default: "soft",
-    },
     // 新增0118
     showWordLimit: {
       type: Boolean,
       default: false,
     },
+    clearable:Boolean,
+    readonly:Boolean
   },
   data() {
     return {
       focusClass: false,
       currentValue: this.value,
-      isOnComposition: false,
       textareaStyles: {},
       passwordVisible: false,
+      focused: false,
     };
   },
   computed: {
+    hasPrefix() {
+      return (this.prefix !== undefined && this.prefix !== '') || this.$slots.prefix;
+    },
+    // 是否显示右侧区域
+    showRightSection() {
+      return this.showClear || this.hasAppend || this.isWordLimitVisible;
+    },
+    // 是否有附加内容
+    hasAppend() {
+      return (this.append !== undefined && this.append !== '') || this.$slots.append;
+    },
+    // 是否显示清除按钮（假设已经在 computed 中定义）
+    showClear() {
+      return (
+        this.clearable &&
+        this.focused &&
+        this.currentValue !== '' &&
+        !this.disabled &&
+        !this.readonly
+      );
+    },
+    wordLimitClasses() {
+      return [
+        'vd-input__word-limit',
+        { 'vd-input__word-limit--error': this.isOverLimit },
+      ];
+    },
+    showPasswordClear() {
+      return (
+        this.passwordClose &&
+        this.focused &&
+        this.currentValue !== '' &&
+        !this.disabled &&
+        !this.readonly
+      );
+    },
+    showPasswordIcon() {
+      return this.passwordIcon && this.type === 'password';
+    },
+    showPasswordControls() {
+      return this.showPasswordClear || this.showPasswordIcon;
+    },
     wrapClasses() {
       return [
         {
@@ -212,7 +209,7 @@ export default {
           [`${prefixCls}-${this.type}--warning`]: this.warning,
           [`${prefixCls}--bigsize`]: this.bigSize,
           [`${prefixCls}--error`]: this.error,
-          [`${prefixCls}--active`]: this.focusClass,
+          [`${prefixCls}--active`]: this.focused,
           [`${prefixCls}-inputarea`]: this.inputTextArea,
           "vd-hairline--bottom": this.hairline,
           "vd-textarea-auto": this.inputTextArea,
@@ -235,6 +232,7 @@ export default {
         },
       ];
     },
+    // 当前输入的文本长度
     textLength() {
       if (typeof this.value === "number") {
         return String(this.value).length;
@@ -257,37 +255,34 @@ export default {
   },
   methods: {
     handleFocus(event) {
-      if (this.form) {
-        this.focusClass = true;
-      }
+      this.focused = true;
       this.$emit("focus", event);
+
+      if (this.readonly) {
+        this.blur();
+      }
     },
     handleBlur(event) {
-      if (this.form) {
-        this.focusClass = false;
-      }
+      this.focused = false;
       this.$emit("blur", event);
     },
     focus() {
       if (this.type === "textarea") {
-        this.$refs.textarea.focus();
+        this.$refs.textarea && this.$refs.textarea.focus();
       } else {
-        this.$refs.input.focus();
+        this.$refs.input && this.$refs.input.focus();
       }
     },
     blur() {
       if (this.type === "textarea") {
-        this.$refs.textarea.blur();
+        this.$refs.textarea && this.$refs.textarea.blur();
       } else {
-        this.$refs.input.blur();
+        this.$refs.input && this.$refs.input.blur();
       }
     },
 
     handleInput(event) {
-      if (this.isOnComposition) return;
       let value = event.target.value;
-      if (this.number && value !== "")
-        value = Number.isNaN(Number(value)) ? value : Number(value);
       this.$emit("input", value);
       this.setCurrentValue(value);
       this.$emit("change", event);
@@ -295,18 +290,16 @@ export default {
 
     setCurrentValue(value) {
       if (value === this.currentValue) return;
+      this.currentValue = value;
       this.$nextTick(() => {
         this.resizeTextarea();
       });
-      this.currentValue = value;
     },
     resizeTextarea() {
-      const autosize = this.autosize;
-      if (!autosize || this.type !== "textarea") {
-        return false;
+      if (!this.autosize || this.type !== "textarea") {
+        return;
       }
-      const minRows = autosize.minRows;
-      const maxRows = autosize.maxRows;
+      const { minRows, maxRows } = this.autosize;
       this.textareaStyles = calcTextareaHeight(
         this.$refs.textarea,
         minRows,
@@ -319,7 +312,12 @@ export default {
       this.setCurrentValue("");
       this.$emit("change", e);
       this.$emit("clear");
+      this.$nextTick(() => {
+        this.focus();
+      });
     },
+
+    // 切换密码显示状态
     handlePasswordVisible() {
       this.passwordVisible = !this.passwordVisible;
       this.$nextTick(() => {

package/dist/components/input/search/index.vue

@@ -6,19 +6,15 @@
                     <vd-icon name="icon_nav_search"></vd-icon>
                 </slot>
             </span>
-            <!-- <input :type="type" :class="inputClasses" :placeholder="placeholder"> -->
             <vd-input
-                v-bind="$attrs"
-                v-on="listeners"
-                form="search"
-                :hairline = "false"
+            v-bind="$attrs"
+            v-on="inputListeners"
+            :value="value"
+            :type="type"
+            :clearable="clearable"
+            form="search"
+            :hairline="false"
             ></vd-input>
-            <span v-if="suffix || $slots.suffix" class="vd-search__suffix">
-                <slot name="suffix">
-                    <vd-icon v-if="suffix" name="icon_btn_clean"></vd-icon>
-                </slot>
-            </span>
-
         </div>
         <span class="vd-search__action" v-if="$slots.default">
             <slot></slot>
@@ -27,20 +23,22 @@
 </template>
 
 <script>
-const prefixCls = 'vd-search';
 export default {
     name: 'vd-search',
     inheritAttrs: false,
     props: {
+        value: [String, Number],
         type: {
             type: String,
             default: 'text'
         },
-        prefix: {
+        clearable: {
             type: Boolean,
+            default: false,
         },
-        suffix: {
+        prefix: {
             type: Boolean,
+            default: true, // 默认显示前缀图标
         },
     },
     data() {
@@ -48,19 +46,17 @@ export default {
         }
     },
     computed: {
-        inputClasses() {
-            return [
-                `${prefixCls}__control`
-            ]
-        },
-        listeners() {
+        inputListeners() {
             return {
                 ...this.$listeners,
+                input: this.onInput,
             };
-        }
+        },
     },
     methods: {
-
+        onInput(value) {
+            this.$emit('input', value);
+        },
     }
 }
 </script>

package/dist/components/input/stepper/index.vue

@@ -2,8 +2,15 @@
     <div class="vd-stepper" :class="wrapClasses">
         <vd-button v-if="!position" :class="minusButtonClass" icon="icon_btn_reduce" size="small"
             @click="onChange('minus')"></vd-button>
-        <input type="number" :class="inputClasses" :disabled="disabled" :value="currentValue" :placeholder="placeholder" @input="onInput"
-            @blur="onBlur">
+        <input
+            type="number"
+            :class="inputClasses"
+            :disabled="disabled"
+            :value="currentValue"
+            :placeholder="placeholder"
+            @input="onInput"
+            @blur="onBlur"
+        >
         <vd-button v-if="position === 'right'" class="vd-stepper__minus" icon="icon_btn_reduce" size="small"
             @click="onChange('minus')"></vd-button>
         <vd-button :class="plusButtonClass" icon="icon_btn_add" size="small"
@@ -21,7 +28,7 @@ export default {
     props: {
         value: null,
         integer: Boolean,
-        position:  String,
+        position: String,
         inputCenter: Boolean,
         disabled: Boolean,
         theme: String,
@@ -37,16 +44,21 @@ export default {
             type: [String, Number],
             default: 1
         },
-        placeholder:String
+        placeholder: String
     },
     data() {
-        const value = this.range(this.isDef(this.value) ? this.value : this.defaultValue);
-        if (value !== +this.value) {
-            this.$emit('input', value);
+        let value;
+        if (this.isDef(this.value)) {
+            value = this.range(this.value);
+            if (value !== this.value) {
+                this.$emit('input', value);
+            }
+        } else {
+            value = '';
         }
         return {
             currentValue: value,
-        }
+        };
     },
     computed: {
         inputClasses() {
@@ -60,7 +72,6 @@ export default {
                     [`${prefixCls}--disabled`]: this.disabled,
                     [`${prefixCls}--${this.theme}`]: this.theme,
                     [`${prefixCls}--center`]: this.inputCenter
-
                 }
             ]
         },
@@ -72,13 +83,6 @@ export default {
             const hairlineClass = this.language === 'ar' ? 'vd-hairline--right' : 'vd-hairline--left';
             return `vd-stepper__plus ${hairlineClass}`;
         }
-        // minusDisabled() {
-        //     return this.disabled || this.currentValue <= this.min;
-        // },
-
-        // plusDisabled() {
-        //     return this.disabled || this.currentValue >= this.max;
-        // }
     },
     watch: {
         value(val) {
@@ -86,7 +90,6 @@ export default {
                 this.currentValue = this.format(val);
             }
         },
-
         currentValue(val) {
             this.$emit('input', val);
             this.$emit('change', val);
@@ -94,36 +97,39 @@ export default {
     },
     methods: {
         format(value) {
+            if (value === '' || value === null || value === undefined) {
+                return '';
+            }
             value = String(value).replace(/[^0-9.-]/g, '');
-            return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
+            return this.integer ? Math.floor(value) : +value;
         },
-
         // limit value range
         range(value) {
-            return Math.max(Math.min(this.max, this.format(value)), this.min);
+            value = this.format(value);
+            if (value === '') {
+                return value;
+            }
+            return Math.max(Math.min(this.max, value), this.min);
         },
-
         onInput(event) {
             const { value } = event.target;
             const formatted = this.format(value);
-            if (+value !== formatted) {
+            if (value !== String(formatted)) {
                 event.target.value = formatted;
             }
             this.currentValue = formatted;
         },
-
         onChange(type) {
             if (this[`${type}Disabled`]) {
                 this.$emit('overlimit', type);
                 return;
             }
             const diff = type === 'minus' ? -this.step : +this.step;
-            const value = Math.round((this.currentValue + diff) * 100) / 100;
+            let value = this.currentValue === '' ? 0 : this.currentValue;
+            value = Math.round((value + diff) * 100) / 100;
             this.currentValue = this.range(value);
-
             this.$emit(type);
         },
-
         onBlur(event) {
             this.currentValue = this.range(this.currentValue);
             this.$emit('blur', event);