vdesign-ui 0.3.0 → 0.3.1

package/dist/components/tag/index.js

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

package/dist/components/tag/index.vue

@@ -1,64 +1,64 @@
-<template>
-  <div class="vd-tag" :class="classes"  @click="handleClick">
-    <slot>{{ text }}</slot>
-  </div>
-</template>
-
-<script>
-const prefixCls = 'vd-tag'
-export default {
-  name: 'vd-tag',
-  props: {
-    text: String,
-    type: {
-      type: String,
-      // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
-      default: '',
-      validator(value) {
-        return [
-          'white', 'dark', 'blue', 'cyan', 'green',
-          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
-        ].includes(value);
-      },
-    },
-    size: {
-      type: String,
-      required: true,
-      validator(value) {
-      return ['s', 'l'].includes(value);
-    },
-    },
-    borders: {
-      type: Boolean,
-    },
-    plain: {
-      type: Boolean,
-    }
-
-  },
-  computed: {
-    classes() {
-      const classes = {
-        [`${prefixCls}--${this.size}`]: this.size,
-        [`${prefixCls}--${this.type}`]: this.type,
-        [`${prefixCls}--${this.type}__border`]: this.borders,
-        [`${prefixCls}--plain`]: this.plain
-      };
-      if (this.borders) {
-        classes['vd-hairline--surround'] = true;
-      }
-      return classes
-
-    },
-  },
-  methods: {
-    handleClick(event) {
-      this.$emit('click', event);
-    },
-  },
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <div class="vd-tag" :class="classes"  @click="handleClick">
+    <slot>{{ text }}</slot>
+  </div>
+</template>
+
+<script>
+const prefixCls = 'vd-tag'
+export default {
+  name: 'vd-tag',
+  props: {
+    text: String,
+    type: {
+      type: String,
+      // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
+      default: '',
+      validator(value) {
+        return [
+          'white', 'dark', 'blue', 'cyan', 'green',
+          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
+        ].includes(value);
+      },
+    },
+    size: {
+      type: String,
+      required: true,
+      validator(value) {
+      return ['s', 'l'].includes(value);
+    },
+    },
+    borders: {
+      type: Boolean,
+    },
+    plain: {
+      type: Boolean,
+    }
+
+  },
+  computed: {
+    classes() {
+      const classes = {
+        [`${prefixCls}--${this.size}`]: this.size,
+        [`${prefixCls}--${this.type}`]: this.type,
+        [`${prefixCls}--${this.type}__border`]: this.borders,
+        [`${prefixCls}--plain`]: this.plain
+      };
+      if (this.borders) {
+        classes['vd-hairline--surround'] = true;
+      }
+      return classes
+
+    },
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/tag/style.less

@@ -1,211 +1,211 @@
-@tag-prefix-cls: vd-tag;
-
-.@{tag-prefix-cls}{
-    display: inline-flex;
-    align-items: center;
-    border-radius: var(--radius-tag-bg);
-    padding: 0 var(--spacing-tag-padding_y);
-    
-    &--s {
-      font-size: var(--en-single-f-b-s-fontSize);
-      font-weight: var(--en-single-f-b-s-fontWeight);
-      height: var(--height-tag-s);
-    }
-    
-    &--l {
-      font-size: var(--en-single-f-b-r-fontSize);
-      font-weight: var(--en-single-f-b-r-fontWeight);
-      height: var(--height-tag-m);
-    }
-    
-
-
-    &--white{
-        color: var(--color-tag-default-text);
-        background-color: var(--color-tag-default-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-tag-default_border-text);
-            &::after{
-                border-color: var(--color-tag-default-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-            }
-        }
-    }
-    
-    &--dark{
-        color: var(--color-tag-dark-text);
-        background-color: var(--color-tag-dark-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-tag-dark_border-text);
-            &::after{
-                border-color: var(--color-tag-dark-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--blue{
-        color: var(--color-tag-blue-text);
-        background-color: var(--color-tag-blue-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-blue-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--cyan{
-        color: var(--color-tag-cyan-text);
-        background-color: var(--color-tag-cyan-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-cyan-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-
-    &--green{
-        color: var(--color-tag-green-text);
-        background-color: var(--color-tag-green-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-green-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    &--olive{
-        color: var(--color-tag-olive-text);
-        background-color: var(--color-tag-olive-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-olive-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    
-    &--yellow{
-        color: var(--color-tag-yellow-text);
-        background-color: var(--color-tag-yellow-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-yellow-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-
-    }
-
-    &--orange{
-        color: var(--color-tag-orange-text);
-        background-color: var(--color-tag-orange-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-orange-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--red{
-        color: var(--color-tag-red-text);
-        background-color: var(--color-tag-red-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-red-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--pink{
-        color: var(--color-tag-pink-text);
-        background-color: var(--color-tag-pink-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-pink-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-
-    &--purple{
-        color: var(--color-tag-purple-text);
-        background-color: var(--color-tag-purple-bg);
-
-        &__border{
-            background-color:transparent;
-            font-size: var(--en-single-f-b-r-fontSize);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            &::after{
-                border-color: var(--color-tag-purple-border);
-                border-radius: calc(var(--radius-tag-bg) * 2);
-
-            }
-        }
-    }
-
-    &--plain {
-        background-color:transparent;
-        padding: 0;
-    }
+@tag-prefix-cls: vd-tag;
+
+.@{tag-prefix-cls}{
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-tag-bg);
+    padding: 0 var(--spacing-tag-padding_y);
+    
+    &--s {
+      font-size: var(--en-single-f-b-s-fontSize);
+      font-weight: var(--en-single-f-b-s-fontWeight);
+      height: var(--height-tag-s);
+    }
+    
+    &--l {
+      font-size: var(--en-single-f-b-r-fontSize);
+      font-weight: var(--en-single-f-b-r-fontWeight);
+      height: var(--height-tag-m);
+    }
+    
+
+
+    &--white{
+        color: var(--color-tag-default-text);
+        background-color: var(--color-tag-default-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-tag-default_border-text);
+            &::after{
+                border-color: var(--color-tag-default-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+            }
+        }
+    }
+    
+    &--dark{
+        color: var(--color-tag-dark-text);
+        background-color: var(--color-tag-dark-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-tag-dark_border-text);
+            &::after{
+                border-color: var(--color-tag-dark-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--blue{
+        color: var(--color-tag-blue-text);
+        background-color: var(--color-tag-blue-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-blue-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--cyan{
+        color: var(--color-tag-cyan-text);
+        background-color: var(--color-tag-cyan-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-cyan-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+
+    &--green{
+        color: var(--color-tag-green-text);
+        background-color: var(--color-tag-green-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-green-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    &--olive{
+        color: var(--color-tag-olive-text);
+        background-color: var(--color-tag-olive-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-olive-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    
+    &--yellow{
+        color: var(--color-tag-yellow-text);
+        background-color: var(--color-tag-yellow-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-yellow-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    &--orange{
+        color: var(--color-tag-orange-text);
+        background-color: var(--color-tag-orange-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-orange-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--red{
+        color: var(--color-tag-red-text);
+        background-color: var(--color-tag-red-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-red-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--pink{
+        color: var(--color-tag-pink-text);
+        background-color: var(--color-tag-pink-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-pink-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+
+    &--purple{
+        color: var(--color-tag-purple-text);
+        background-color: var(--color-tag-purple-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-purple-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--plain {
+        background-color:transparent;
+        padding: 0;
+    }
 }

package/dist/components/title/index.js

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