xianniu-ui 0.3.33 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.3.33",
+  "version": "0.4.0",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {

package/packages/dialog/main.vue

@@ -13,7 +13,7 @@
     <slot />
     <span slot="footer">
       <slot name="footer">
-        <el-button @click="onClose">取消</el-button>
+        <el-button @click="onClose" v-if="$attrs['show-cancel'] !== false">取消</el-button>
         <el-button
           v-if="$attrs['show-confirm'] !== false"
           type="primary"

package/packages/style/src/basic.scss

@@ -4,6 +4,14 @@
 .text-danger{color: $--color-danger!important;}
 .text-warning{color: $--color-warning!important;}
 
+.text-blue{color: $blue !important;}
+.text-red{color: $red !important;}
+.text-yellow{color: $yellow !important;}
+.text-green{color: $green !important;}
+.text-grey{color: $grey !important;}
+.text-orange{color: $orange !important;}
+
+
 .fw-1{font-weight: 100 !important;}
 .fw-2{font-weight: 200 !important;}
 .fw-3{font-weight: 300 !important;}

package/packages/style/src/index.scss

@@ -10,6 +10,7 @@
 @import './basic.scss';
 @import './flex.scss';
 @import './footer.scss';
+@import './tag.scss';
 
 
 

package/packages/style/src/tag.scss

@@ -0,0 +1,35 @@
+@import "xn-ui/packages/style/src/theme/element-variables.scss";
+.xn-tag {
+  &--color {
+    &__blue {
+      color: $blue;
+      border: 1px solid $blue;
+      background-color: rgba($color: $blue, $alpha: 0.2);
+    }
+    &__grey {
+      color: $grey;
+      border: 1px solid $grey;
+      background-color: rgba($color: $grey, $alpha: 0.2);
+    }
+    &__green {
+      color: $green;
+      border: 1px solid $green;
+      background-color: rgba($color: $green, $alpha: 0.2);
+    }
+    &__red {
+      color: $red;
+      border: 1px solid $red;
+      background-color: rgba($color: $red, $alpha: 0.2);
+    }
+    &__orange {
+      color: $orange;
+      border: 1px solid $orange;
+      background-color: rgba($color: $orange, $alpha: 0.2);
+    }
+    &__yellow {
+      color: $yellow;
+      border: 1px solid $yellow;
+      background-color: rgba($color: $yellow, $alpha: 0.2);
+    }
+  }
+}

package/packages/style/src/theme/theme.scss

@@ -1,4 +1,11 @@
-$--color-primary: #FF745C;
-$--color-success: #52C41A;
-$--color-warning: #FAAD14;
-$--color-danger: #FF4D4F;
+$--color-primary: #ff745c;
+$--color-success: #52c41a;
+$--color-warning: #faad14;
+$--color-danger: #ff4d4f;
+
+$grey: #c1c1c9;
+$blue: #5e9dff;
+$red: #ff4d4f;
+$green: #52c41a;
+$yellow: #ffb500;
+$orange: #ff8c00;

package/packages/style/src/theme/variables.scss

@@ -1,11 +1,8 @@
 // base color
 $blue:#324157;
 $light-blue:#3A71A8;
-$red:#C03639;
+
 $pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
 $panGreen: #30B08F;
 
 // sidebar

package/packages/tag/index.js

@@ -0,0 +1,7 @@
+import XnTag from './main.vue'
+
+XnTag.install = function (Vue) {
+  Vue.component(XnTag.name, XnTag)
+}
+
+export default XnTag

package/packages/tag/main.vue

@@ -0,0 +1,102 @@
+<script>
+import { Tag } from "element-ui";
+export default {
+  name: "XnTag",
+  extends: Tag,
+  props: {
+    ...Tag.props,
+    icon: { type: String },
+    className: { type: String },
+    defaultColor: {
+      type: String,
+      validator: (val) => {
+        return (
+          ["grey", "blue", "green", "red", "yellow", "orange"].indexOf(val) !==
+          -1
+        );
+      },
+    },
+  },
+  computed: {
+    getColor() {
+      return function (hex, opacity) {
+        if (!hex) hex = "#ededed";
+
+        if (hex.length === 4) {
+          var sColorNew = "#";
+          for (var i = 1; i < 4; i += 1) {
+            sColorNew += hex.slice(i, i + 1).concat(hex.slice(i, i + 1));
+          }
+          hex = sColorNew;
+        }
+        let rgba =
+          "rgba(" +
+          parseInt("0x" + hex.slice(1, 3)) +
+          "," +
+          parseInt("0x" + hex.slice(3, 5)) +
+          "," +
+          parseInt("0x" + hex.slice(5, 7)) +
+          "," +
+          (opacity || "1") +
+          ")";
+        return rgba;
+      };
+    },
+  },
+  render() {
+    const { tagSize, hit, effect, icon, className, color, type, defaultColor } =
+      this;
+    const classes = [
+      "el-tag",
+      "xn-tag",
+      defaultColor ? `xn-tag--color__${defaultColor}` : "",
+      type && !color ? `el-tag--${type}` : "",
+      tagSize ? `el-tag--${tagSize}` : "",
+      effect ? `el-tag--${effect}` : "",
+      hit && "is-hit",
+      className,
+    ];
+
+    const _color = (color, effect) => {
+      let c = {};
+      if (!color) return null;
+      switch (effect) {
+        case "dark":
+          c = {
+            border: `1px solid ${color}`,
+            backgroundColor: `${color}`,
+          };
+          break;
+        case "light":
+          c = {
+            border: `1px solid ${color}`,
+            color,
+            backgroundColor: `${this.getColor(color, 0.2)}`,
+          };
+          break;
+        case "plain":
+          c = {
+            border: `1px solid ${color}`,
+            color,
+            backgroundColor: `none`,
+          };
+          break;
+      }
+      return c;
+    };
+
+    const isIcon = this.$slots.icon || (icon && <i class={icon}></i>);
+    const tagEl = (
+      <span style={{ ..._color(color, effect) }} class={classes}>
+        {isIcon} {this.$slots.default}
+      </span>
+    );
+
+    return tagEl;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/index.js

@@ -13,6 +13,7 @@ import XnImport from '../packages/import/index'
 import XnExport from '../packages/export/index'
 import XnFooter from '../packages/footer/index'
 import XnEmpty from '../packages/empty/index'
+import XnTag from '../packages/tag/index'
 
 import Utils from 'xn-ui/src/utils/index'
 const doc = 'http://lzwr.gitee.io/xn-ui/#/'
@@ -30,7 +31,8 @@ const components = [
     XnImport,
     XnExport,
     XnFooter,
-    XnEmpty
+    XnEmpty,
+    XnTag
 ]
 const version = require('../package.json').version
 const install = function (Vue) {