vdesign-ui 0.2.5 → 0.2.6

package/dist/components/icon/index.vue

@@ -1,96 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-.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

@@ -1,162 +0,0 @@
-// 定义全局的环境检查
-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

@@ -1,8 +0,0 @@
-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

@@ -1,345 +0,0 @@
-<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>