@10yun/cv-mobile-ui 0.5.27 → 0.5.29

package/uview-plus/components/u-tag/props.js

@@ -1,55 +1,56 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 标签类型info、primary、success、warning、error
     type: {
       type: String,
-      default: defprops.tag.type
+      default: () => defProps.tag.type
     },
     // 不可用
     disabled: {
       type: [Boolean, String],
-      default: defprops.tag.disabled
+      default: () => defProps.tag.disabled
     },
     // 标签的大小，large，medium，mini
     size: {
       type: String,
-      default: defprops.tag.size
+      default: () => defProps.tag.size
     },
     // tag的形状，circle（两边半圆形）, square（方形，带圆角）
     shape: {
       type: String,
-      default: defprops.tag.shape
+      default: () => defProps.tag.shape
     },
     // 标签文字
     text: {
       type: [String, Number],
-      default: defprops.tag.text
+      default: () => defProps.tag.text
     },
     // 背景颜色，默认为空字符串，即不处理
     bgColor: {
       type: String,
-      default: defprops.tag.bgColor
+      default: () => defProps.tag.bgColor
     },
     // 标签字体颜色，默认为空字符串，即不处理
     color: {
       type: String,
-      default: defprops.tag.color
+      default: () => defProps.tag.color
     },
     // 标签的边框颜色
     borderColor: {
       type: String,
-      default: defprops.tag.borderColor
+      default: () => defProps.tag.borderColor
     },
     // 关闭按钮图标的颜色
     closeColor: {
       type: String,
-      default: defprops.tag.closeColor
+      default: () => defProps.tag.closeColor
     },
     // 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
     name: {
       type: [String, Number],
-      default: defprops.tag.name
+      default: () => defProps.tag.name
     },
     // // 模式选择，dark|light|plain
     // mode: {
@@ -59,27 +60,52 @@ export default {
     // 镂空时是否填充背景色
     plainFill: {
       type: Boolean,
-      default: defprops.tag.plainFill
+      default: () => defProps.tag.plainFill
     },
     // 是否镂空
     plain: {
       type: Boolean,
-      default: defprops.tag.plain
+      default: () => defProps.tag.plain
     },
     // 是否可关闭
     closable: {
       type: Boolean,
-      default: defprops.tag.closable
+      default: () => defProps.tag.closable
     },
     // 是否显示
     show: {
       type: Boolean,
-      default: defprops.tag.show
+      default: () => defProps.tag.show
     },
     // 内置图标，或绝对路径的图片
     icon: {
       type: String,
-      default: defprops.tag.icon
+      default: () => defProps.tag.icon
+    },
+    // 自定义尺寸字体大小
+    textSize: {
+      type: String,
+      default: () => defProps.tag.textSize
+    },
+    // 自定义尺寸高度
+    height: {
+      type: String,
+      default: () => defProps.tag.height
+    },
+    // 自定义尺寸padding
+    padding: {
+      type: String,
+      default: () => defProps.tag.padding
+    },
+    // 自定义尺寸
+    borderRadius: {
+      type: String,
+      default: () => defProps.tag.borderRadius
+    },
+    // 自动计算背景色
+    autoBgColor: {
+      type: Number,
+      default: () => defProps.tag.autoBgColor
     }
   }
-};
+});

package/uview-plus/components/u-tag/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -177,4 +192,4 @@ view, scroll-view, swiper-item {
 .u-tag__close--large {
   width: 25px;
   height: 25px;
-}
+}

package/uview-plus/components/u-tag/tag.js

@@ -0,0 +1,35 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:23:37
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/tag.js
+ */
+export default {
+	// tag 组件
+	tag: {
+		type: 'primary',
+		disabled: false,
+		size: 'medium',
+		shape: 'square',
+		text: '',
+		bgColor: '',
+		color: '',
+		borderColor: '',
+		closeColor: '#C6C7CB',
+		name: '',
+		plainFill: false,
+		plain: false,
+		closable: false,
+		show: true,
+		icon: '',
+		iconColor: '',
+		textSize: '',
+		height: '',
+		padding: '',
+		borderRadius: '',
+		autoBgColor: 0
+	}
+}

package/uview-plus/components/u-tag/u-tag.vue

@@ -1 +1,177 @@
-<template>
  <u-transition mode="fade" :show="show" style="display: inline-flex">
    <view class="u-tag-wrapper">
      <view
        class="u-tag"
        :class="[
          `u-tag--${shape}`,
          !plain && `u-tag--${type}`,
          plain && `u-tag--${type}--plain`,
          `u-tag--${size}`,
          plain && plainFill && `u-tag--${type}--plain--fill`
        ]"
        @tap.stop="clickHandler"
        :style="[
          {
            marginRight: closable ? '10px' : 0,
            marginTop: closable ? '10px' : 0
          },
          style
        ]"
      >
        <slot name="icon">
          <view class="u-tag__icon" v-if="icon">
            <image v-if="$u.test.image(icon)" :src="icon" :style="[imgStyle]"></image>
            <u-icon v-else :color="elIconColor" :name="icon" :size="iconSize"></u-icon>
          </view>
        </slot>
        <text
          class="u-tag__text"
          :style="[textColor]"
          :class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
        >
          {{ text }}
        </text>
      </view>
      <view
        class="u-tag__close"
        :class="[`u-tag__close--${size}`]"
        v-if="closable"
        @tap.stop="closeHandler"
        :style="{ backgroundColor: closeColor }"
      >
        <u-icon name="close" :size="closeSize" color="#ffffff"></u-icon>
      </view>
    </view>
  </u-transition>
 * Tag 标签
 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
 * @tutorial https://ijry.github.io/uview-plus/components/tag.html
 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
 * @property {Boolean | String}	disabled	不可用（默认 false ）
 * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
 * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
 * @property {String | Number}	text		标签的文字内容
 * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
 * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
 * @property {String}			borderColor	镂空形式标签的边框颜色
 * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
 * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
 * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
 * @property {Boolean}			plain		是否镂空（默认 false ）
 * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
 * @property {Boolean}			show		标签显示与否（默认 true ）
 * @property {String}			icon		内置图标，或绝对路径的图片
 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
 * @example <u-tag text="标签" type="error" plain plainFill></u-tag>
 */
  name: 'u-tag',
  mixins: [mpMixin, mixin, props],
  data() {
    return {};
  },
  computed: {
    style() {
      const style = {};
      if (this.bgColor) {
        style.backgroundColor = this.bgColor;
      }
      if (this.color) {
        style.color = this.color;
      }
      if (this.borderColor) {
        style.borderColor = this.borderColor;
      }
      return style;
    },
    // nvue下，文本颜色无法继承父元素
    textColor() {
      const style = {};
      if (this.color) {
        style.color = this.color;
      }
      return style;
    },
    imgStyle() {
      const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px';
      return {
        width,
        height: width
      };
    },
    // 文本的样式
    closeSize() {
      const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12;
      return size;
    },
    // 图标大小
    iconSize() {
      const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16;
      return size;
    },
    // 图标颜色
    elIconColor() {
      return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff';
    }
  },
  methods: {
    // 点击关闭按钮
    closeHandler() {
      this.$emit('close', this.name);
    },
    // 点击标签
    clickHandler() {
      this.$emit('click', this.name);
    }
  }
+<template>
+  <u-transition mode="fade" :show="show" style="display: inline-flex">
+    <view class="u-tag-wrapper cursor-pointer">
+      <view
+        class="u-tag"
+        :class="[
+          `u-tag--${shape}`,
+          !plain && `u-tag--${type}`,
+          plain && `u-tag--${type}--plain`,
+          `u-tag--${size}`,
+          plain && plainFill && `u-tag--${type}--plain--fill`
+        ]"
+        @tap.stop="clickHandler"
+        :style="[
+          {
+            marginRight: closable ? '10px' : 0,
+            marginTop: closable ? '10px' : 0
+          },
+          style
+        ]"
+      >
+        <slot name="icon">
+          <view class="u-tag__icon" v-if="icon">
+            <image v-if="testImage(icon)" :src="icon" :style="[imgStyle]"></image>
+            <u-icon v-else :color="elIconColor" :name="icon" :size="iconSize"></u-icon>
+          </view>
+        </slot>
+        <view class="u-tag__content">
+          <slot name="content"></slot>
+          <template v-if="!$slots.content">
+            <text
+              v-if="!$slots.default && !$slots.$default"
+              class="u-tag__text"
+              :style="[textColor]"
+              :class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
+            >
+              {{ text }}
+            </text>
+            <text
+              v-else
+              class="u-tag__text"
+              :style="[textColor]"
+              :class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
+            >
+              <slot></slot>
+            </text>
+          </template>
+        </view>
+      </view>
+      <view
+        class="u-tag__close"
+        :class="[`u-tag__close--${size}`]"
+        v-if="closable"
+        @tap.stop="closeHandler"
+        :style="{ backgroundColor: closeColor }"
+      >
+        <u-icon name="close" :size="closeSize" color="#ffffff"></u-icon>
+      </view>
+    </view>
+  </u-transition>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import test from '../../libs/function/test';
+import { addUnit, genLightColor } from '../../libs/function/index';
+/**
+ * Tag 标签
+ * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+ * @tutorial https://ijry.github.io/uview-plus/components/tag.html
+ * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
+ * @property {Boolean | String}	disabled	不可用（默认 false ）
+ * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
+ * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
+ * @property {String | Number}	text		标签的文字内容
+ * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
+ * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
+ * @property {String}			borderColor	镂空形式标签的边框颜色
+ * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
+ * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
+ * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
+ * @property {Boolean}			plain		是否镂空（默认 false ）
+ * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
+ * @property {Boolean}			show		标签显示与否（默认 true ）
+ * @property {String}			icon		内置图标，或绝对路径的图片
+ * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
+ * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值
+ * @example <u-tag text="标签" type="error" plain plainFill></u-tag>
+ */
+export default {
+  name: 'u-tag',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  computed: {
+    style() {
+      const style = {};
+      if (this.bgColor) {
+        style.backgroundColor = this.bgColor;
+      }
+      if (this.color) {
+        style.color = this.color;
+      }
+      if (this.borderColor) {
+        style.borderColor = this.borderColor;
+      }
+      if (this.height) {
+        style.height = addUnit(this.height);
+        style.lineHeight = addUnit(this.height);
+      }
+      if (this.padding) {
+        style.padding = this.padding;
+      }
+      if (this.borderRadius) {
+        style.borderRadius = addUnit(this.borderRadius);
+      }
+      if (this.autoBgColor > 0 && this.color) {
+        style.backgroundColor = this.getBagColor(this.color);
+      }
+      return style;
+    },
+    // nvue下，文本颜色无法继承父元素
+    textColor() {
+      const style = {};
+      if (this.color) {
+        style.color = this.color;
+      }
+      if (this.textSize) {
+        style.textSize = addUnit(this.textSize);
+      }
+      return style;
+    },
+    imgStyle() {
+      const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px';
+      return {
+        width,
+        height: width
+      };
+    },
+    // 文本的样式
+    closeSize() {
+      const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12;
+      return size;
+    },
+    // 图标大小
+    iconSize() {
+      const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16;
+      return size;
+    },
+    // 图标颜色
+    elIconColor() {
+      return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff';
+    }
+  },
+  emits: ['click', 'close'],
+  methods: {
+    testImage: test.image,
+    // 点击关闭按钮
+    closeHandler() {
+      this.$emit('close', this.name);
+    },
+    // 点击标签
+    clickHandler() {
+      this.$emit('click', this.name);
+    },
+    // 根据颜色计算浅色作为背景
+    getBagColor(darkColor) {
+      return genLightColor(darkColor, this.autoBgColor);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-td/props.js

@@ -1,4 +1,5 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {}
-};
+});

package/uview-plus/components/u-td/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -8,4 +23,4 @@ view, scroll-view, swiper-item {
   align-items: stretch;
   align-content: flex-start;
 }
-/* #endif */
+/* #endif */

package/uview-plus/components/u-td/u-td.vue

@@ -2,9 +2,9 @@
   <view class="u-td"></view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 /**
  * Td 表格中的单元格
  * @description

package/uview-plus/components/u-text/props.js

@@ -1,111 +1,117 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 主题颜色
     type: {
       type: String,
-      default: defprops.text.type
+      default: () => defProps.text.type
     },
     // 是否显示
     show: {
       type: Boolean,
-      default: defprops.text.show
+      default: () => defProps.text.show
     },
     // 显示的值
     text: {
       type: [String, Number],
-      default: defprops.text.text
+      default: () => defProps.text.text
     },
     // 前置图标
     prefixIcon: {
       type: String,
-      default: defprops.text.prefixIcon
+      default: () => defProps.text.prefixIcon
     },
     // 后置图标
     suffixIcon: {
       type: String,
-      default: defprops.text.suffixIcon
+      default: () => defProps.text.suffixIcon
     },
     // 文本处理的匹配模式
     // text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
     mode: {
       type: String,
-      default: defprops.text.mode
+      default: () => defProps.text.mode
     },
     // mode=link下，配置的链接
     href: {
       type: String,
-      default: defprops.text.href
+      default: () => defProps.text.href
     },
     // 格式化规则
     format: {
       type: [String, Function],
-      default: defprops.text.format
+      default: () => defProps.text.format
     },
     // mode=phone时，点击文本是否拨打电话
     call: {
       type: Boolean,
-      default: defprops.text.call
+      default: () => defProps.text.call
     },
     // 小程序的打开方式
     openType: {
       type: String,
-      default: defprops.text.openType
+      default: () => defProps.text.openType
     },
     // 是否粗体，默认normal
     bold: {
       type: Boolean,
-      default: defprops.text.bold
+      default: () => defProps.text.bold
     },
     // 是否块状
     block: {
       type: Boolean,
-      default: defprops.text.block
+      default: () => defProps.text.block
     },
     // 文本显示的行数，如果设置，超出此行数，将会显示省略号
     lines: {
       type: [String, Number],
-      default: defprops.text.lines
+      default: () => defProps.text.lines
     },
     // 文本颜色
     color: {
       type: String,
-      default: defprops.text.color
+      default: () => defProps.text.color
     },
     // 字体大小
     size: {
       type: [String, Number],
-      default: defprops.text.size
+      default: () => defProps.text.size
     },
     // 图标的样式
     iconStyle: {
       type: [Object, String],
-      default: defprops.text.iconStyle
+      default: () => defProps.text.iconStyle
     },
     // 文字装饰，下划线，中划线等，可选值 none|underline|line-through
     decoration: {
       tepe: String,
-      default: defprops.text.decoration
+      default: () => defProps.text.decoration
     },
     // 外边距，对象、字符串，数值形式均可
     margin: {
       type: [Object, String, Number],
-      default: defprops.text.margin
+      default: () => defProps.text.margin
     },
     // 文本行高
     lineHeight: {
       type: [String, Number],
-      default: defprops.text.lineHeight
+      default: () => defProps.text.lineHeight
     },
     // 文本对齐方式，可选值left|center|right
     align: {
       type: String,
-      default: defprops.text.align
+      default: () => defProps.text.align
     },
     // 文字换行，可选值break-word|normal|anywhere
     wordWrap: {
       type: String,
-      default: defprops.text.wordWrap
+      default: () => defProps.text.wordWrap
+    },
+    // 占满剩余空间
+    flex1: {
+      type: Boolean,
+      default: () => defProps.text.flex1
     }
   }
-};
+});