vdesign-ui 0.2.6 → 0.2.8

package/dist/components/icon/index.vue

@@ -0,0 +1,96 @@
+<script>
+import "./font/iconfont.css";
+import "./font/iconfont.js";
+
+export default {
+  name: 'vd-icon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isImage() {
+      return this.name.includes('/');
+    },
+    isSvg() {
+      // 判断是否为 SVG 图标，依据 name 是否以 '_svg' 结尾
+      return this.name.endsWith('_svg');
+    },
+    sizeClass() {
+      return this.size ? `vd-icon-${this.size}` : '';
+    },
+  },
+  render(createElement) {
+    if (this.name) {
+      if (this.isSvg) {
+        // Render SVG icon
+        return createElement(
+          'svg',
+          {
+            class: [
+              'vd-iconfont',
+              'vd-svg-icon',
+              `vd-icon-${this.name}`,
+              this.sizeClass,
+            ],
+            style: { fill: this.color },
+            on: {
+              click: (event) => this.$emit('click', event),
+            },
+          },
+          [
+            createElement('use', {
+              attrs: {
+                'xlink:href': `#vd-icon-${this.name}`,
+              },
+            }),
+          ]
+        );
+      } else {
+        // Render icon with possible image
+        const children = this.isImage
+          ? [
+              createElement('img', {
+                class: 'vd-img-icon',
+                attrs: { src: this.name },
+              }),
+            ]
+          : [];
+
+        return createElement(
+          'i',
+          {
+            class: [
+              'vd-iconfont',
+              this.isImage ? '' : `vd-icon-${this.name}`,
+              this.sizeClass,
+            ],
+            style: { color: this.color },
+            on: {
+              click: (event) => this.$emit('click', event),
+            },
+          },
+          children
+        );
+      }
+    } else {
+      // Render slot content
+      return this.$slots.default;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>

package/dist/components/icon/style.less

@@ -0,0 +1,44 @@
+.vd-iconfont {
+  display: inline-block;
+  background-size: contain;
+  fill: currentColor;
+  backface-visibility: hidden;
+  transform: translateZ(0) scale(1, 1);
+  // font-family: "Icon" !important;
+  font-size: var(--icon-medium);
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  letter-spacing: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.vd-svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.vd-img-icon {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
+
+.vd-icon-small {
+  font-size: var(--icon-small);
+}
+
+.vd-icon-medium {
+  font-size: var(--icon-medium);
+}
+
+.vd-icon-large {
+  font-size: var(--icon-large);
+}

package/dist/components/input/calcTextareaHeight.js

@@ -0,0 +1,162 @@
+// 定义全局的环境检查
+const inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+const HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
+`;
+
+const SIZING_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',
+];
+
+let computedStyleCache = {};
+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')
+    );
+
+    if (useCache && computedStyleCache[nodeRef]) {
+        return computedStyleCache[nodeRef];
+    }
+
+    const style = window.getComputedStyle(node);
+
+    const boxSizing = (
+        style.getPropertyValue('box-sizing') ||
+        style.getPropertyValue('-moz-box-sizing') ||
+        style.getPropertyValue('-webkit-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 sizingStyle = SIZING_STYLE
+        .map(name => `${name}:${style.getPropertyValue(name)}`)
+        .join(';');
+
+    const nodeInfo = {
+        sizingStyle,
+        paddingSize,
+        borderSize,
+        boxSizing,
+    };
+
+    if (useCache && nodeRef) {
+        computedStyleCache[nodeRef] = nodeInfo;
+    }
+
+    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);
+    }
+
+    if (uiTextNode.getAttribute('wrap')) {
+        hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
+    } else {
+        hiddenTextarea.removeAttribute('wrap');
+    }
+
+    const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(uiTextNode, useCache);
+
+    hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
+    hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
+
+    let minHeight = Number.MIN_SAFE_INTEGER;
+    let maxHeight = Number.MAX_SAFE_INTEGER;
+    let height = hiddenTextarea.scrollHeight;
+    let overflowY;
+
+    if (boxSizing === 'border-box') {
+        height += borderSize;
+    } else if (boxSizing === 'content-box') {
+        height -= paddingSize;
+    }
+
+    if (minRows !== null || maxRows !== null) {
+        hiddenTextarea.value = ' ';
+        const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
+        if (minRows !== null) {
+            minHeight = singleRowHeight * minRows;
+            if (boxSizing === 'border-box') {
+                minHeight += paddingSize + borderSize;
+            }
+            height = Math.max(minHeight, height);
+        }
+
+        if (maxRows !== null) {
+            maxHeight = singleRowHeight * maxRows;
+            if (boxSizing === 'border-box') {
+                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,
+    };
+}

package/dist/components/input/index.js

@@ -0,0 +1,8 @@
+import HInput from './index.vue';
+import './style.less';
+
+HInput.install = function (Vue) {
+  Vue.component(HInput.name, HInput);
+};
+
+export default HInput;

package/dist/components/input/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div :class="wrapClasses" class="vd-input">
+      <!-- 前缀，还有前缀右边框 -->
+      <span v-if="hasPrefix" class="vd-input-form__prefix" :class="borderRightClasses">
+        <slot name="prefix">{{ prefix }}</slot>
+      </span>
+      <textarea
+        v-if="type === 'textarea'"
+        ref="textarea"
+        v-bind="$attrs"
+        :rows="rows"
+        :class="inputClasses"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="currentValue"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="handleInput"
+        :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="showRightSection"
+        class="vd-input-form__right"
+      >
+        <!-- 清除按钮 -->
+        <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="hasAppend" class="vd-input-form__append">
+          <slot name="append">{{ append }}</slot>
+        </span>
+        <!-- 字数限制 -->
+        <div
+          v-if="isWordLimitVisible"
+          :class="wordLimitClasses"
+        >
+          <span>{{ textLength }}</span
+          >/<span>{{ upperLimit }}</span>
+        </div>
+      </div>
+      <!-- 密码的时候,单独的清空按钮 -->
+      <span
+        v-if="showPasswordControls"
+        class="vd-input-form__password"
+      >
+        <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="showPasswordIcon" class="vd-input-form__password--password">
+            <vd-icon
+              :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
+              @click="handlePasswordVisible"
+            ></vd-icon>
+        </span>
+      </span>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+import calcTextareaHeight from "./calcTextareaHeight";
+const prefixCls = "vd-input";
+
+export default {
+  name: "vd-input",
+  components: {
+    VdIcon,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    prefix: {
+      type: [Boolean, String],
+      default: ''
+    },
+    borderRight: {
+      type: Boolean,
+      default: true
+    },
+    // 设计如此,单独的文字
+    append: {
+      type: [Boolean, String],
+      default: ''
+    },
+    error: {
+      type: Boolean,
+    },
+    bigSize: {
+      type: Boolean,
+    },
+    passwordIcon: {
+      type: Boolean,
+    },
+    passwordClose: {
+      type: Boolean,
+    },
+    // 输入框类型	 表单类型,常规输入库,搜索框
+    form: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    rows: {
+      type: Number,
+      default: 2,
+    },
+    // 设计如此多行textarea,跟input属性一样
+    inputTextArea: {
+      type: Boolean,
+    },
+    warning: {
+      type: Boolean,
+    },
+    hairline: {
+      type: Boolean,
+      default: true,
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: false,
+    },
+    // 新增0118
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+    clearable:Boolean,
+    readonly:Boolean
+  },
+  data() {
+    return {
+      focusClass: false,
+      currentValue: this.value,
+      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 [
+        {
+          [`${prefixCls}-${this.form}`]: this.form,
+          [`${prefixCls}--disabled`]: this.disabled,
+          [`${prefixCls}-${this.type}`]: this.type,
+          [`${prefixCls}-${this.type}--warning`]: this.warning,
+          [`${prefixCls}--bigsize`]: this.bigSize,
+          [`${prefixCls}--error`]: this.error,
+          [`${prefixCls}--active`]: this.focused,
+          [`${prefixCls}-inputarea`]: this.inputTextArea,
+          "vd-hairline--bottom": this.hairline,
+          "vd-textarea-auto": this.inputTextArea,
+        },
+      ];
+    },
+    borderRightClasses(){
+      return [
+        "vd-hairline--right",
+        {
+          [`${prefixCls}--border`]: this.borderRight,
+        }
+      ]
+    },
+    inputClasses() {
+      return [
+        `${prefixCls}__control`,
+        {
+          [`${prefixCls}-${this.type}__control`]: this.type,
+        },
+      ];
+    },
+    // 当前输入的文本长度
+    textLength() {
+      if (typeof this.value === "number") {
+        return String(this.value).length;
+      }
+      return (this.value || "").length;
+    },
+    upperLimit() {
+      return this.$attrs.maxlength;
+    },
+    isWordLimitVisible() {
+      return (
+        this.showWordLimit &&
+        this.$attrs.maxlength &&
+        (this.type === "text" || this.type === "textarea")
+      );
+    },
+    isOverLimit() {
+      return this.textLength >= this.upperLimit;
+    },
+  },
+  methods: {
+    handleFocus(event) {
+      this.focused = true;
+      this.$emit("focus", event);
+
+      if (this.readonly) {
+        this.blur();
+      }
+    },
+    handleBlur(event) {
+      this.focused = false;
+      this.$emit("blur", event);
+    },
+    focus() {
+      if (this.type === "textarea") {
+        this.$refs.textarea && this.$refs.textarea.focus();
+      } else {
+        this.$refs.input && this.$refs.input.focus();
+      }
+    },
+    blur() {
+      if (this.type === "textarea") {
+        this.$refs.textarea && this.$refs.textarea.blur();
+      } else {
+        this.$refs.input && this.$refs.input.blur();
+      }
+    },
+
+    handleInput(event) {
+      let value = event.target.value;
+      this.$emit("input", value);
+      this.setCurrentValue(value);
+      this.$emit("change", event);
+    },
+
+    setCurrentValue(value) {
+      if (value === this.currentValue) return;
+      this.currentValue = value;
+      this.$nextTick(() => {
+        this.resizeTextarea();
+      });
+    },
+    resizeTextarea() {
+      if (!this.autosize || this.type !== "textarea") {
+        return;
+      }
+      const { minRows, maxRows } = this.autosize;
+      this.textareaStyles = calcTextareaHeight(
+        this.$refs.textarea,
+        minRows,
+        maxRows
+      );
+    },
+    handleClear() {
+      const e = { target: { value: "" } };
+      this.$emit("input", "");
+      this.setCurrentValue("");
+      this.$emit("change", e);
+      this.$emit("clear");
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+
+    // 切换密码显示状态
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible;
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    },
+  },
+  mounted() {
+    this.resizeTextarea();
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>