vdesign-ui 0.1.9 → 0.1.10

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: 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

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

@@ -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,338 @@
+<template>
+  <div :class="wrapClasses" class="vd-input">
+    <template v-if="inputTextArea || type !== 'textarea'">
+      <span v-if="prefix" class="vd-input-form__prefix vd-hairline--right">
+        <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 || append || isWordLimitVisible"
+        class="vd-input-form__right"
+      >
+        <span v-if="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" class="vd-input-form__append">
+          <slot name="appends">{{ 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">
+          <slot name="passwordClose">
+            <vd-icon name="icon_btn_close" @click="handleClear"></vd-icon>
+          </slot>
+        </span>
+        <span v-if="passwordIcon" class="vd-input-form__password--password">
+          <slot name="passwordIcon">
+            <vd-icon
+              :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
+              @click="handlePasswordVisible"
+            ></vd-icon>
+          </slot>
+        </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, String],
+      default: false,
+    },
+    suffix: {
+      type: [Boolean, String],
+      default: false,
+    },
+    // 设计如此,单独的文字
+    append: {
+      type: [Boolean, String],
+      default: false,
+    },
+    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,
+        },
+      ];
+    },
+    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

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