vdesign-ui 0.1.17 → 0.1.19

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: calc(var(--icon-medium) * 1px);
-  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: calc(var(--icon-small) * 1px);
-}
-
-.vd-icon-medium {
-  font-size: calc(var(--icon-medium) * 1px);
-}
-
-.vd-icon-large {
-  font-size: calc(var(--icon-large) * 1px);
-}

package/dist/components/input/calcTextareaHeight.js

@@ -1,266 +0,0 @@
-// 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 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;
-
-function calculateNodeStyling(node, useCache = false) {
-    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;
-}
-
-export default function calcTextareaHeight(uiTextNode, minRows = null, maxRows = null, useCache = false) {
-    if (!hiddenTextarea) {
-        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);
-
-    // 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 || '';
-
-    let minHeight = Number.MIN_SAFE_INTEGER;
-    let maxHeight = Number.MAX_SAFE_INTEGER;
-    let height = hiddenTextarea.scrollHeight;
-    let overflowY;
-
-    if (boxSizing === 'border-box') {
-        // border-box: add border, since height = content + padding + border
-        height = height + borderSize;
-    } else if (boxSizing === 'content-box') {
-        // remove padding, since height = content
-        height = height - paddingSize;
-    }
-
-    if (minRows !== null || maxRows !== null) {
-        // measure height of a textarea with a single row
-        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);
-        }
-    }
-    // Remove scroll bar flash when autosize without maxRows
-    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,343 +0,0 @@
-<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">
-        <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
-        ref="textarea"
-        v-bind="$attrs"
-        :id="elementId"
-        :wrap="wrap"
-        :type="type"
-        :rows="rows"
-        :class="inputClasses"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :value="currentValue"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @input="handleInput"
-        :style="textareaStyles"
-      >
-      </textarea>
-      <div
-        v-if="suffix || $slots.suffix || append || $slots.append || isWordLimitVisible"
-        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>
-        <span v-if="append || $slots.append" 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 },
-          ]"
-        >
-          <span>{{ textLength }}</span
-          >/<span>{{ upperLimit }}</span>
-        </div>
-      </div>
-      <span
-        v-if="passwordClose || passwordIcon"
-        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>
-        <span v-if="passwordIcon" 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>
-
-<script>
-import calcTextareaHeight from "./calcTextareaHeight";
-const prefixCls = "vd-input";
-
-export default {
-  name: "vd-input",
-  props: {
-    type: {
-      type: String,
-      default: "text",
-    },
-    prefix: {
-      type: Boolean,
-    },
-    borderRight: {
-      type: Boolean,
-      default: true
-    },
-    suffix: {
-      type: Boolean,
-    },
-    // 设计如此,单独的文字
-    append: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    error: {
-      type: Boolean,
-    },
-    bigSize: {
-      type: Boolean,
-    },
-    passwordIcon: {
-      type: Boolean,
-    },
-    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,
-    },
-    warning: {
-      type: Boolean,
-    },
-    hairline: {
-      type: Boolean,
-      default: true,
-    },
-    autosize: {
-      type: [Boolean, Object],
-      default: false,
-    },
-    elementId: {
-      type: String,
-    },
-    wrap: {
-      type: String,
-      default: "soft",
-    },
-    // 新增0118
-    showWordLimit: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      focusClass: false,
-      currentValue: this.value,
-      isOnComposition: false,
-      textareaStyles: {},
-      passwordVisible: false,
-    };
-  },
-  computed: {
-    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.focusClass,
-          [`${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) {
-      if (this.form) {
-        this.focusClass = true;
-      }
-      this.$emit("focus", event);
-    },
-    handleBlur(event) {
-      if (this.form) {
-        this.focusClass = false;
-      }
-      this.$emit("blur", event);
-    },
-    focus() {
-      if (this.type === "textarea") {
-        this.$refs.textarea.focus();
-      } else {
-        this.$refs.input.focus();
-      }
-    },
-    blur() {
-      if (this.type === "textarea") {
-        this.$refs.textarea.blur();
-      } else {
-        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);
-    },
-
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.$nextTick(() => {
-        this.resizeTextarea();
-      });
-      this.currentValue = value;
-    },
-    resizeTextarea() {
-      const autosize = this.autosize;
-      if (!autosize || this.type !== "textarea") {
-        return false;
-      }
-      const minRows = autosize.minRows;
-      const maxRows = autosize.maxRows;
-      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");
-    },
-    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>

package/dist/components/input/password/index.js

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