@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-tag/u-tag.vue

@@ -9,16 +9,31 @@
       getClassName(shape, plain),
       getTypeClass(type, plain)
     ]"
-    :style="{ transform: `scale(${scaleMultiple})`, padding: padding, margin: margin, fontSize: size, lineHeight: size }"
+    :style="{
+      transform: `scale(${scaleMultiple})`,
+      padding: padding,
+      margin: margin,
+      fontSize: size,
+      lineHeight: size,
+      background: getBgColor(type, plain),
+      color: getColor(type, plain)
+    }"
     @tap="handleClick"
   >
     <slot></slot>
+    <view
+      class="up-tag__border"
+      :class="[getClassName(shape, plain)]"
+      :style="{ borderColor: getBgColor(type) }"
+      v-if="plain"
+    ></view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiTag',
+  name: 'tuiTag',
+  emits: ['click'],
   props: {
     type: {
       type: String,
@@ -73,12 +88,87 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('click', { index: this.index });
+      this.$emit('click', {
+        index: this.index
+      });
     },
-    getTypeClass(type, plain) {
+    hexToRGB(hex) {
+      if (hex.length === 4) {
+        let text = hex.substring(1, 4);
+        hex = '#' + text + text;
+      }
+      let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+      return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+          }
+        : {};
+    },
+    getColorByType(type, isText, plain) {
+      //primary， white， danger， warning， green， gray，black，light-blue，light-brownish，light-orange，light-green
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = '';
+      const _primary = this.hexToRGB((global && global.primary) || '#5677fc');
+      const _blue = this.hexToRGB((global && global.blue) || '#007aff');
+      const _warning = this.hexToRGB((global && global.warning) || '#ff7900');
+      const _danger = this.hexToRGB((global && global.danger) || '#EB0909');
+      const _green = this.hexToRGB((global && global.success) || '#07c160');
+      const colors = {
+        primary: (global && global.primary) || '#5677fc',
+        white: '#fff',
+        danger: (global && global.danger) || '#EB0909',
+        red: (global && global.pink) || '#f74d54',
+        pink: (global && global.pink) || '#f74d54',
+        warning: (global && global.warning) || '#ff7900',
+        orange: (global && global.warning) || '#ff7900',
+        green: (global && global.success) || '#07c160',
+        blue: (global && global.blue) || '#007aff',
+        gray: '#ededed',
+        'btn-gray': '#ededed',
+        black: '#000',
+        'light-primary': `rgba(${_primary.r}, ${_primary.g}, ${_primary.b}, 0.08)`,
+        'light-blue': `rgba(${_blue.r}, ${_blue.g}, ${_blue.b}, 0.08)`,
+        brownish: '#8a5966',
+        'light-brownish': '#fcebef',
+        'light-danger': `rgba(${_danger.r}, ${_danger.g}, ${_danger.b}, 0.08)`,
+        'light-orange': `rgba(${_warning.r}, ${_warning.g}, ${_warning.b}, 0.08)`,
+        'light-warning': `rgba(${_warning.r}, ${_warning.g}, ${_warning.b}, 0.08)`,
+        'light-green': `rgba(${_green.r}, ${_green.g}, ${_green.b}, 0.08)`,
+        'light-black': '#333',
+        translucent: 'rgba(0, 0, 0, 0.7)'
+      };
+      if (isText) {
+        if (type && ~type.indexOf('light-') && type !== 'light-black') {
+          const tp = type.replace('light-', '');
+          color = colors[tp];
+        } else if (type === 'white') {
+          color = plain ? '#fff' : '#333';
+        } else if (type === 'btn-gray' || type === 'gray') {
+          color = '#999';
+        } else {
+          if (plain) {
+            color = colors[type];
+          } else {
+            color = '#fff';
+          }
+        }
+      } else {
+        color = colors[type] || colors.primary;
+      }
+      return color;
+    },
+    getBgColor(type, plain) {
+      return plain ? 'transparent' : this.getColorByType(type);
+    },
+    getColor(type, plain) {
+      return this.getColorByType(type, true, plain);
+    },
+    getTypeClass: function (type, plain) {
       return plain ? 'up-' + type + '-outline' : 'up-' + type;
     },
-    getClassName(shape, plain) {
+    getClassName: function (shape, plain) {
       //circle, square，circleLeft，circleRight
       var className = plain ? 'up-tag-outline ' : '';
       if (shape != 'square') {
@@ -97,255 +187,46 @@ export default {
 </script>
 
 <style scoped>
-/* color start*/
-
-.up-primary {
-  background-color: #5677fc !important;
-  color: #fff;
-}
-
-.up-light-primary {
-  background-color: #5c8dff !important;
-  color: #fff;
-}
-
-.up-dark-primary {
-  background-color: #4a67d6 !important;
-  color: #fff;
-}
-
-.up-dLight-primary {
-  background-color: #4e77d9 !important;
-  color: #fff;
-}
-
-.up-danger {
-  background-color: #ed3f14 !important;
-  color: #fff;
-}
-
-.up-red {
-  background-color: #ff201f !important;
-  color: #fff;
-}
-
-.up-warning {
-  background-color: #ff7900 !important;
-  color: #fff;
-}
-
-.up-green {
-  background-color: #19be6b !important;
-  color: #fff;
-}
-
-.up-high-green {
-  background-color: #52dcae !important;
-  color: #52dcae;
-}
-
-.up-black {
-  background-color: #000 !important;
-  color: #fff;
-}
-
-.up-white {
-  background-color: #fff !important;
-  color: #333 !important;
-}
-
-.up-translucent {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.up-light-black {
-  background-color: #333 !important;
-}
-
-.up-gray {
-  background-color: #ededed !important;
-}
-
-.up-phcolor-gray {
-  background-color: #ccc !important;
-}
-
-.up-divider-gray {
-  background-color: #eaeef1 !important;
-}
-
-.up-btn-gray {
-  background-color: #ededed !important;
-  color: #999 !important;
-}
-
-.up-hover-gray {
-  background-color: #f7f7f9 !important;
-}
-
-.up-bg-gray {
-  background-color: #fafafa !important;
-}
-
-.up-light-blue {
-  background-color: #ecf6fd;
-  color: #4dabeb !important;
-}
-
-.up-light-brownish {
-  background-color: #fcebef;
-  color: #8a5966 !important;
-}
-
-.up-light-orange {
-  background-color: #fef5eb;
-  color: #faa851 !important;
-}
-
-.up-light-green {
-  background-color: #e8f6e8;
-  color: #44cf85 !important;
-}
-
-.up-primary-outline::after {
-  border: 1px solid #5677fc !important;
-}
-
-.up-primary-outline {
-  color: #5677fc !important;
-  background-color: none;
-}
-
-.up-danger-outline {
-  color: #ed3f14 !important;
-  background-color: none;
-}
-
-.up-danger-outline::after {
-  border: 1px solid #ed3f14 !important;
-}
-
-.up-red-outline {
-  color: #ff201f !important;
-  background-color: none;
-}
-
-.up-red-outline::after {
-  border: 1px solid #ff201f !important;
-}
-
-.up-warning-outline {
-  color: #ff7900 !important;
-  background-color: none;
-}
-
-.up-warning-outline::after {
-  border: 1px solid #ff7900 !important;
-}
-
-.up-green-outline {
-  color: #44cf85 !important;
-  background-color: none;
-}
-
-.up-green-outline::after {
-  border: 1px solid #44cf85 !important;
-}
-
-.up-high-green-outline {
-  color: #52dcae !important;
-  background-color: none;
-}
-
-.up-high-green-outline::after {
-  border: 1px solid #52dcae !important;
-}
-
-.up-gray-outline {
-  color: #999 !important;
-  background-color: none;
-}
-
-.up-gray-outline::after {
-  border: 1px solid #ccc !important;
-}
-
-.up-black-outline {
-  color: #333 !important;
-  background-color: none;
-}
-
-.up-black-outline::after {
-  border: 1px solid #333 !important;
-}
-
-.up-white-outline {
-  color: #fff !important;
-  background-color: none;
-}
-
-.up-white-outline::after {
-  border: 1px solid #fff !important;
-}
-
-/* color end*/
-
-/* tag start*/
-
 .up-tag {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 6rpx;
-}
-
-.up-tag-outline {
+  flex-shrink: 0;
   position: relative;
-  background-color: none;
-  color: #5677fc;
 }
 
-.up-tag-outline::after {
-  content: '';
+.up-tag__border {
   position: absolute;
   width: 200%;
   height: 200%;
-  -webkit-transform-origin: 0 0;
+  transform: scale(0.5) translateZ(0);
   transform-origin: 0 0;
-  -webkit-transform: scale(0.5, 0.5);
-  transform: scale(0.5, 0.5);
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   left: 0;
   top: 0;
   border-radius: 12rpx;
+  border: 1px solid;
+  pointer-events: none;
 }
 
 .up-tag-fillet {
-  border-radius: 50rpx;
+  border-radius: 100rpx;
 }
 
-.up-white.up-tag-fillet::after {
-  border-radius: 80rpx;
+.up-white.up-tag-fillet {
+  border-radius: 160rpx;
 }
 
-.up-tag-outline-fillet::after {
-  border-radius: 80rpx;
+.up-tag-outline-fillet {
+  border-radius: 160rpx;
 }
 
 .up-tag-fillet-left {
-  border-radius: 50rpx 0 0 50rpx;
-}
-
-.up-tag-fillet-right {
-  border-radius: 0 50rpx 50rpx 0;
-}
-
-.up-tag-fillet-left.up-tag-outline::after {
   border-radius: 100rpx 0 0 100rpx;
 }
 
-.up-tag-fillet-right.up-tag-outline::after {
+.up-tag-fillet-right {
   border-radius: 0 100rpx 100rpx 0;
 }
 
@@ -353,9 +234,11 @@ export default {
 .up-origin-left {
   transform-origin: 0 center;
 }
+
 .up-origin-right {
   transform-origin: 100% center;
 }
+
 .up-tag-opcity {
   opacity: 0.5;
 }

package/ui-fireui/components/u-time-axis/u-time-axis.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'fuiTimeAxis',
+  name: 'tuiTimeAxis',
   data() {
     return {};
   }

package/ui-fireui/components/u-timeaxis-item/u-timeaxis-item.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  name: 'fuiTimeaxisItem',
+  name: 'tuiTimeaxisItem',
   props: {
     //节点背景色
     backgroundColor: {

package/ui-fireui/components/u-tips/u-tips.vue

@@ -1,27 +1,49 @@
 <template>
-  <template v-if="position == 'top'">
-    <view class="up-tips-class up-toptips" :class="['up-' + type, show ? 'up-top-show' : '']">{{ msg }}</view>
-  </template>
-  <template v-else>
+  <block v-if="position == 'top'">
+    <view
+      class="up-tips-class up-toptips"
+      :class="['up-' + type, show ? 'up-top-show' : '']"
+      :style="{ backgroundColor: backgroundColor, color: color, fontSize: size + 'rpx' }"
+    >
+      {{ msg }}
+    </view>
+  </block>
+  <block v-else>
     <view
       class="up-tips-class up-toast"
       :class="[position == 'center' ? 'up-centertips' : 'up-bottomtips', show ? 'up-toast-show' : '']"
     >
-      <view class="up-tips-content" :class="['up-' + type]">
+      <view
+        class="up-tips-content"
+        :class="['up-' + type]"
+        :style="{ backgroundColor: backgroundColor, color: color, fontSize: size + 'rpx' }"
+      >
         {{ msg }}
       </view>
     </view>
-  </template>
+  </block>
 </template>
 
 <script>
 export default {
-  name: 'fuiTips',
+  name: 'tuiTips',
   props: {
     //top bottom center
     position: {
       type: String,
       default: 'top'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.7)'
+    },
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    size: {
+      type: Number,
+      default: 30
     }
   },
   data() {
@@ -34,7 +56,7 @@ export default {
     };
   },
   methods: {
-    showTips(options) {
+    showTips: function (options) {
       const { type = 'translucent', duration = 2000 } = options;
       clearTimeout(this.timer);
       this.show = true;
@@ -59,8 +81,6 @@ export default {
   box-sizing: border-box;
   position: fixed;
   z-index: 9999;
-  color: #fff;
-  font-size: 30rpx;
   left: 0;
   top: 0;
   display: flex;
@@ -136,23 +156,23 @@ export default {
 /*背景颜色 start*/
 
 .up-primary {
-  background-color: #5677fc;
+  background: #5677fc;
 }
 
 .up-green {
-  background-color: #19be6b;
+  background: #19be6b;
 }
 
 .up-warning {
-  background-color: #ff7900;
+  background: #ff7900;
 }
 
 .up-danger {
-  background-color: #ed3f14;
+  background: #ed3f14;
 }
 
 .up-translucent {
-  background-color: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.7);
 }
 
 /*背景颜色 end*/

package/ui-fireui/components/u-toast/u-toast.vue

@@ -2,7 +2,7 @@
   <view
     class="up-toast"
     :class="[visible ? 'up-toast-show' : '', content ? 'up-toast-padding' : '', icon ? '' : 'up-unicon-padding']"
-    :style="{ width: getWidth(icon, content) }"
+    :style="{ width: getWidth(icon, content), zIndex: zIndex }"
   >
     <image :src="imgUrl" class="up-toast-img" v-if="icon"></image>
     <view class="up-toast-text" :class="[icon ? '' : 'up-unicon']">{{ title }}</view>
@@ -12,8 +12,13 @@
 
 <script>
 export default {
-  name: 'fuiToast',
-  props: {},
+  name: 'tuiToast',
+  props: {
+    zIndex: {
+      type: Number,
+      default: 99999
+    }
+  },
   data() {
     return {
       timer: null,
@@ -29,7 +34,7 @@ export default {
     };
   },
   methods: {
-    show(options) {
+    show: function (options) {
       let { duration = 2000, icon = false } = options;
       clearTimeout(this.timer);
       this.visible = true;
@@ -69,7 +74,6 @@ export default {
   transform: translate(-50%, -50%);
   transition: 0.3s ease-in-out;
   transition-property: opacity, visibility;
-  z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;

package/ui-fireui/components/u-top-dropdown/u-top-dropdown.vue

@@ -27,12 +27,8 @@
 
 <script>
 export default {
-  name: 'fuiTopDropdown',
-  data() {
-    return {
-      left: 0
-    };
-  },
+  name: 'tuiTopDropdown',
+  emits: ['close'],
   props: {
     //是否需要mask
     mask: {
@@ -74,6 +70,11 @@ export default {
       default: 0
     }
   },
+  data() {
+    return {
+      left: 0
+    };
+  },
   created() {
     this.left = (100 - this.width) / 2;
   },
@@ -93,6 +94,7 @@ export default {
 
 <style scoped>
 .up-dropdown-box {
+  width: 100%;
   position: fixed;
   box-sizing: border-box;
   border-bottom-right-radius: 24rpx;