vdesign-ui 0.1.24 → 0.2.0

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/calcTextareaHeight.js

@@ -1,117 +1,5 @@
-// Thanks to
-// https://github.com/andreypopp/react-textarea-autosize/
-
-// let hiddenTextarea;
-//
-// const HIDDEN_STYLE = `
-//     height:0 !important;
-//     min-height:0 !important;
-//     max-height:none !important;
-//     visibility:hidden !important;
-//     overflow:hidden !important;
-//     position:absolute !important;
-//     z-index:-1000 !important;
-//     top:0 !important;
-//     right:0 !important
-// `;
-//
-// const CONTEXT_STYLE = [
-//     'letter-spacing',
-//     'line-height',
-//     'padding-top',
-//     'padding-bottom',
-//     'font-family',
-//     'font-weight',
-//     'font-size',
-//     'text-rendering',
-//     'text-transform',
-//     'width',
-//     'text-indent',
-//     'padding-left',
-//     'padding-right',
-//     'border-width',
-//     'box-sizing'
-// ];
-//
-// function calculateNodeStyling(node) {
-//     const style = window.getComputedStyle(node);
-//
-//     const boxSizing = style.getPropertyValue('box-sizing');
-//
-//     const paddingSize = (
-//         parseFloat(style.getPropertyValue('padding-bottom')) +
-//         parseFloat(style.getPropertyValue('padding-top'))
-//     );
-//
-//     const borderSize = (
-//         parseFloat(style.getPropertyValue('border-bottom-width')) +
-//         parseFloat(style.getPropertyValue('border-top-width'))
-//     );
-//
-//     const contextStyle = CONTEXT_STYLE
-//         .map(name => `${name}:${style.getPropertyValue(name)}`)
-//         .join(';');
-//
-//     return {contextStyle, paddingSize, borderSize, boxSizing};
-// }
-//
-// export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
-//     if (!hiddenTextarea) {
-//         hiddenTextarea = document.createElement('textarea');
-//         document.body.appendChild(hiddenTextarea);
-//     }
-//
-//     let {
-//         paddingSize,
-//         borderSize,
-//         boxSizing,
-//         contextStyle
-//     } = calculateNodeStyling(targetNode);
-//
-//     hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-//     hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
-//
-//     let height = hiddenTextarea.scrollHeight;
-//     let minHeight = -Infinity;
-//     let maxHeight = Infinity;
-//     let overflowY;
-//
-//     if (boxSizing === 'border-box') {
-//         height = height + borderSize;
-//     } else if (boxSizing === 'content-box') {
-//         height = height - paddingSize;
-//     }
-//
-//     hiddenTextarea.value = '';
-//     let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-//
-//     if (minRows !== null) {
-//         minHeight = singleRowHeight * minRows;
-//         if (boxSizing === 'border-box') {
-//             minHeight = minHeight + paddingSize + borderSize;
-//         }
-//         height = Math.max(minHeight, height);
-//     }
-//     if (maxRows !== null) {
-//         maxHeight = singleRowHeight * maxRows;
-//         if (boxSizing === 'border-box') {
-//             maxHeight = maxHeight + paddingSize + borderSize;
-//         }
-//         overflowY = height > maxHeight ? '' : 'hidden';
-//         height = Math.min(maxHeight, height);
-//     }
-//
-//     if (!maxRows) {
-//         overflowY = 'hidden';
-//     }
-//
-//     return {
-//         height: `${height}px`,
-//         minHeight: `${minHeight}px`,
-//         maxHeight: `${maxHeight}px`,
-//         overflowY
-//     };
-// }
+// 定义全局的环境检查
+const inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
 
 const HIDDEN_TEXTAREA_STYLE = `
   min-height:0 !important;
@@ -122,7 +10,7 @@ const HIDDEN_TEXTAREA_STYLE = `
   position:absolute !important;
   z-index:-1000 !important;
   top:0 !important;
-  right:0 !important
+  right:0 !important;
 `;
 
 const SIZING_STYLE = [
@@ -144,13 +32,25 @@ const SIZING_STYLE = [
 ];
 
 let computedStyleCache = {};
-let hiddenTextarea;
+let hiddenTextarea = null;
 
+// 计算节点的样式信息
 function calculateNodeStyling(node, useCache = false) {
+    if (!inBrowser || !node) {
+        // 如果不在浏览器环境中，返回默认的样式对象，防止报错
+        return {
+            sizingStyle: '',
+            paddingSize: 0,
+            borderSize: 0,
+            boxSizing: 'content-box',
+        };
+    }
+
     const nodeRef = (
-            node.getAttribute('id') ||
-            node.getAttribute('data-reactid') ||
-            node.getAttribute('name'));
+        node.getAttribute('id') ||
+        node.getAttribute('data-reactid') ||
+        node.getAttribute('name')
+    );
 
     if (useCache && computedStyleCache[nodeRef]) {
         return computedStyleCache[nodeRef];
@@ -192,30 +92,27 @@ function calculateNodeStyling(node, useCache = false) {
     return nodeInfo;
 }
 
+// 计算 textarea 的高度
 export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows = null, useCache = false) {
+    if (!inBrowser || !uiTextNode) {
+        // 如果不在浏览器环境中，返回默认的高度，避免 SSR 中出错
+        return { height: '0px', minHeight: '0px', maxHeight: '0px', overflowY: 'hidden' };
+    }
+
     if (!hiddenTextarea) {
+        // 创建一个隐藏的 textarea 元素来测量高度
         hiddenTextarea = document.createElement('textarea');
         document.body.appendChild(hiddenTextarea);
     }
 
-    // Fix wrap="off" issue
-    // https://github.com/ant-design/ant-design/issues/6577
     if (uiTextNode.getAttribute('wrap')) {
         hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
     } else {
         hiddenTextarea.removeAttribute('wrap');
     }
 
-    // Copy all CSS properties that have an impact on the height of the content in
-    // the textbox
-    let {
-        paddingSize, borderSize,
-        boxSizing, sizingStyle,
-    } = calculateNodeStyling(uiTextNode, useCache);
+    const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(uiTextNode, useCache);
 
-    // Need to have the overflow attribute to hide the scrollbar otherwise
-    // text-lines will not calculated properly as the shadow will technically be
-    // narrower for content
     hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
     hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
 
@@ -225,34 +122,33 @@ export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows =
     let overflowY;
 
     if (boxSizing === 'border-box') {
-        // border-box: add border, since height = content + padding + border
-        height = height + borderSize;
+        height += borderSize;
     } else if (boxSizing === 'content-box') {
-        // remove padding, since height = content
-        height = height - paddingSize;
+        height -= paddingSize;
     }
 
     if (minRows !== null || maxRows !== null) {
-        // measure height of a textarea with a single row
         hiddenTextarea.value = ' ';
-        let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+        const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
         if (minRows !== null) {
             minHeight = singleRowHeight * minRows;
             if (boxSizing === 'border-box') {
-                minHeight = minHeight + paddingSize + borderSize;
+                minHeight += paddingSize + borderSize;
             }
             height = Math.max(minHeight, height);
         }
+
         if (maxRows !== null) {
             maxHeight = singleRowHeight * maxRows;
             if (boxSizing === 'border-box') {
-                maxHeight = maxHeight + paddingSize + borderSize;
+                maxHeight += paddingSize + borderSize;
             }
             overflowY = height > maxHeight ? '' : 'hidden';
             height = Math.min(maxHeight, height);
         }
     }
-    // Remove scroll bar flash when autosize without maxRows
+
     if (!maxRows) {
         overflowY = 'hidden';
     }
@@ -261,6 +157,6 @@ export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows =
         height: `${height}px`,
         minHeight: `${minHeight}px`,
         maxHeight: `${maxHeight}px`,
-        overflowY
+        overflowY,
     };
 }

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(() => {