vdesign-ui 0.2.20 → 0.3.0

package/dist/components/icon/index.vue

@@ -1,96 +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>
+<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 +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);
-}
+.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 +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,
-    };
-}
+// 定义全局的环境检查
+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 +1,8 @@
-import HInput from './index.vue';
-import './style.less';
-
-HInput.install = function (Vue) {
-  Vue.component(HInput.name, HInput);
-};
-
-export default HInput;
+import HInput from './index.vue';
+import './style.less';
+
+HInput.install = function (Vue) {
+  Vue.component(HInput.name, HInput);
+};
+
+export default HInput;