vdesign-ui 0.1.19 → 0.1.20

package/dist/components/icon/index.js

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

package/dist/components/icon/index.vue

@@ -0,0 +1,46 @@
+<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>
+</template>
+
+<script>
+import './font/iconfont.js'
+import "./font/iconfont.css";
+export default {
+  name: 'vd-icon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    svg: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  methods: {
+    isImage(name) {
+      return name ? name.indexOf('/') !== -1 : false;
+    }
+  },
+}
+</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: 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;