@10yun/cv-mobile-ui 0.5.30 → 0.5.32

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

@@ -7,14 +7,14 @@
           ref="u-rate__content__item__icon-wrap"
           @tap.stop="clickHandler($event, index + 1)"
         >
-          <u-icon
+          <up-icon
             :name="Math.floor(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor"
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`
             }"
             :size="size"
-          ></u-icon>
+          ></up-icon>
         </view>
         <view
           v-if="allowHalf"
@@ -27,14 +27,14 @@
           ]"
           ref="u-rate__content__item__icon-wrap"
         >
-          <u-icon
+          <up-icon
             :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor"
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`
             }"
             :size="size"
-          ></u-icon>
+          ></up-icon>
         </view>
       </view>
     </view>
@@ -67,7 +67,7 @@ const dom = weex.requireModule('dom');
  * @property {Boolean}			touchable		是否可以通过滑动手势选择评分 （默认 'true' ）
  * @property {Object}			customStyle		组件的样式，对象形式
  * @event {Function} change 选中的星星发生变化时触发
- * @example <u-rate :count="count" :value="2"></u-rate>
+ * @example <up-rate :count="count" :value="2"></up-rate>
  */
 export default {
   name: 'u-rate',

package/uview-plus/components/u-read-more/u-read-more.vue

@@ -1,3 +1,126 @@
-<template>
  <view class="u-read-more">
    <view
      class="u-read-more__content"
      :style="{
        height: isLongContent && status === 'close' ? addUnit(showHeight) : addUnit(contentHeight),
        textIndent: textIndent
      }"
    >
      <view class="u-read-more__content__inner" ref="u-read-more__content__inner" :class="[elId]">
        <slot></slot>
      </view>
    </view>
    <view class="u-read-more__toggle" :style="[innerShadowStyle]" v-if="isLongContent">
      <slot name="toggle">
        <view class="u-read-more__toggle__text" @tap="toggleReadMore">
          <up-text
            :text="status === 'close' ? closeText : openText"
            :color="color"
            :size="fontSize"
            :lineHeight="fontSize"
            margin="0 5px 0 0"
          ></up-text>
          <view class="u-read-more__toggle__icon">
            <u-icon :color="color" :size="fontSize + 2" :name="status === 'close' ? 'arrow-down' : 'arrow-up'"></u-icon>
          </view>
        </view>
      </slot>
    </view>
  </view>
 * readMore 阅读更多
 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
 * @tutorial https://ijry.github.io/uview-plus/components/readMore.html
 * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
 * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
 * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
 * @property {String}			openText	展开时的提示文字（默认 '收起' ）
 * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
 * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
 * @property {Object}			shadowStyle	显示阴影的样式
 * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
 * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
 * @event {Function} open 内容被展开时触发
 * @event {Function} close 内容被收起时触发
 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
 */
  name: 'u-read-more',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      isLongContent: false, // 是否需要隐藏一部分内容
      status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
      elId: guid(), // 生成唯一class
      contentHeight: 100 // 内容高度
    };
  },
  computed: {
    // 展开后无需阴影，收起时才需要阴影样式
    innerShadowStyle() {
      if (this.status === 'open') return {};
      else return this.shadowStyle;
    }
  },
  mounted() {
    this.init();
  },
  emits: ['open', 'close'],
  methods: {
    addUnit,
    async init() {
      this.getContentHeight().then((height) => {
        this.contentHeight = height;
        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
        if (height > getPx(this.showHeight)) {
          this.isLongContent = true;
          this.status = 'close';
        } else {
          // https://github.com/ijry/uview-plus/issues/270
          this.isLongContent = false;
          this.status = 'close';
        }
      });
    },
    // 获取内容的高度
    async getContentHeight() {
      // 延时一定时间再获取节点
      await sleep(30);
      return new Promise((resolve) => {
        // #ifndef APP-NVUE
        this.$uGetRect('.' + this.elId).then((res) => {
          resolve(res.height);
        });
        // #endif
        // #ifdef APP-NVUE
        const ref = this.$refs['u-read-more__content__inner'];
        dom.getComponentRect(ref, (res) => {
          resolve(res.size.height);
        });
        // #endif
      });
    },
    // 展开或者收起
    toggleReadMore() {
      this.status = this.status === 'close' ? 'open' : 'close';
      // 如果toggle为false，隐藏"收起"部分的内容
      if (this.toggle == false) this.isLongContent = false;
      // 发出打开或者收齐的事件
      this.$emit(this.status, this.name);
    }
  }
-@import './style.css';
-</style>
+<template>
+  <view class="u-read-more">
+    <view
+      class="u-read-more__content"
+      :style="{
+        height: isLongContent && status === 'close' ? addUnit(showHeight) : addUnit(contentHeight),
+        textIndent: textIndent
+      }"
+    >
+      <view class="u-read-more__content__inner" ref="u-read-more__content__inner" :class="[elId]">
+        <slot></slot>
+      </view>
+    </view>
+    <view class="u-read-more__toggle" :style="[innerShadowStyle]" v-if="isLongContent">
+      <slot name="toggle">
+        <view class="u-read-more__toggle__text" @tap="toggleReadMore">
+          <up-text
+            :text="status === 'close' ? closeText : openText"
+            :color="color"
+            :size="fontSize"
+            :lineHeight="fontSize"
+            margin="0 5px 0 0"
+          ></up-text>
+          <view class="u-read-more__toggle__icon">
+            <up-icon :color="color" :size="fontSize + 2" :name="status === 'close' ? 'arrow-down' : 'arrow-up'"></up-icon>
+          </view>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, guid, getPx, sleep } from '../../libs/function/index';
+/**
+ * readMore 阅读更多
+ * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/readMore.html
+ * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+ * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
+ * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
+ * @property {String}			openText	展开时的提示文字（默认 '收起' ）
+ * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
+ * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
+ * @property {Object}			shadowStyle	显示阴影的样式
+ * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
+ * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
+ * @event {Function} open 内容被展开时触发
+ * @event {Function} close 内容被收起时触发
+ * @example <up-read-more><rich-text :nodes="content"></rich-text></up-read-more>
+ */
+export default {
+  name: 'u-read-more',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      isLongContent: false, // 是否需要隐藏一部分内容
+      status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+      elId: guid(), // 生成唯一class
+      contentHeight: 100 // 内容高度
+    };
+  },
+  computed: {
+    // 展开后无需阴影，收起时才需要阴影样式
+    innerShadowStyle() {
+      if (this.status === 'open') return {};
+      else return this.shadowStyle;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  emits: ['open', 'close'],
+  methods: {
+    addUnit,
+    async init() {
+      this.getContentHeight().then((height) => {
+        this.contentHeight = height;
+        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+        if (height > getPx(this.showHeight)) {
+          this.isLongContent = true;
+          this.status = 'close';
+        } else {
+          // https://github.com/ijry/uview-plus/issues/270
+          this.isLongContent = false;
+          this.status = 'close';
+        }
+      });
+    },
+    // 获取内容的高度
+    async getContentHeight() {
+      // 延时一定时间再获取节点
+      await sleep(30);
+      return new Promise((resolve) => {
+        // #ifndef APP-NVUE
+        this.$uGetRect('.' + this.elId).then((res) => {
+          resolve(res.height);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-read-more__content__inner'];
+        dom.getComponentRect(ref, (res) => {
+          resolve(res.size.height);
+        });
+        // #endif
+      });
+    },
+    // 展开或者收起
+    toggleReadMore() {
+      this.status = this.status === 'close' ? 'open' : 'close';
+      // 如果toggle为false，隐藏"收起"部分的内容
+      if (this.toggle == false) this.isLongContent = false;
+      // 发出打开或者收齐的事件
+      this.$emit(this.status, this.name);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -21,7 +21,7 @@ import { addUnit, addStyle, deepMerge, sleep } from '../../libs/function/index';
  * @property {Object}			customStyle	定义需要用到的外部样式
  *
  * @event {Function} click row被点击
- * @example <u-row justify="space-between" customStyle="margin-bottom: 10px"></u-row>
+ * @example <up-row justify="space-between" customStyle="margin-bottom: 10px"></up-row>
  */
 export default {
   name: 'u-row',

package/uview-plus/components/u-row-notice/u-row-notice.vue

@@ -2,7 +2,7 @@
   <view class="u-notice" @tap="clickHandler">
     <slot name="icon">
       <view class="u-notice__left-icon" v-if="icon">
-        <u-icon :name="icon" :color="color" size="19"></u-icon>
+        <up-icon :name="icon" :color="color" size="19"></up-icon>
       </view>
     </slot>
     <view class="u-notice__content" ref="u-notice__content">
@@ -11,8 +11,8 @@
       </view>
     </view>
     <view class="u-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
-      <u-icon v-if="mode === 'link'" name="arrow-right" :size="17" :color="color"></u-icon>
-      <u-icon v-if="mode === 'closable'" @click="close" name="close" :size="16" :color="color"></u-icon>
+      <up-icon v-if="mode === 'link'" name="arrow-right" :size="17" :color="color"></up-icon>
+      <up-icon v-if="mode === 'closable'" @click="close" name="close" :size="16" :color="color"></up-icon>
     </view>
   </view>
 </template>

package/uview-plus/components/u-safe-bottom/u-safe-bottom.vue

@@ -1,3 +1,48 @@
-<template>
  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
  name: 'u-safe-bottom',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE || MP-TOUTIAO
      // nvue下，高度使用js计算填充
      style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
      // #endif
      return deepMerge(style, addStyle(this.customStyle));
    }
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  }
-@import './style.css';
-</style>
+<template>
+  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
+</template>
+<script>
+import { props } from './props.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, deepMerge, addUnit, getWindowInfo } from '../../libs/function/index';
+/**
+ * SafeBottom 底部安全区
+ * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+ * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+ * @property {type}		prop_name
+ * @property {Object}	customStyle	定义需要用到的外部样式
+ *
+ * @event {Function()}
+ * @example <up-status-bar></up-status-bar>
+ */
+export default {
+  name: 'u-safe-bottom',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      safeAreaBottomHeight: 0,
+      isNvue: false
+    };
+  },
+  computed: {
+    style() {
+      const style = {};
+      // #ifdef APP-NVUE || MP-TOUTIAO
+      // nvue下，高度使用js计算填充
+      style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
+      // #endif
+      return deepMerge(style, addStyle(this.customStyle));
+    }
+  },
+  mounted() {
+    // #ifdef APP-NVUE
+    // 标识为是否nvue
+    this.isNvue = true;
+    // #endif
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -24,12 +24,12 @@
         </slot>
       </template>
       <view class="u-search__content__icon">
-        <u-icon
+        <up-icon
           @tap="clickIcon"
           :size="searchIconSize"
           :name="searchIcon"
           :color="searchIconColor ? searchIconColor : color"
-        ></u-icon>
+        ></up-icon>
       </view>
       <input
         confirm-type="search"
@@ -60,7 +60,7 @@
         ]"
       />
       <view class="u-search__content__icon u-search__content__close" v-if="keyword && clearabled && focused" @click="clear">
-        <u-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></u-icon>
+        <up-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></up-icon>
       </view>
     </view>
     <text
@@ -114,7 +114,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
  * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
  * @event {Function} custom 用户点击右侧控件时触发
  * @event {Function} clear 用户点击清除按钮时触发
- * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+ * @example <up-search placeholder="日照香炉生紫烟" v-model="keyword"></up-search>
  */
 export default {
   name: 'u-search',