@10yun/cv-mobile-ui 0.5.17 → 0.5.19

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

@@ -0,0 +1 @@
+<template>
  <uvForm
    ref="uForm"
    :model="model"
    :rules="rules"
    :errorType="errorType"
    :borderBottom="borderBottom"
    :labelPosition="labelPosition"
    :labelWidth="labelWidth"
    :labelAlign="labelAlign"
    :labelStyle="labelStyle"
    :customStyle="customStyle"
  >
    <slot />
  </uvForm>
 * 此组件存在的理由是，在nvue下，u-form被uni-app官方占用了，u-form在nvue中相当于form组件
 * 所以在nvue下，取名为u--form，内部其实还是u-form.vue，只不过做一层中转
 */
  // #ifdef MP-WEIXIN
  name: 'u-form',
  // #endif
  // #ifndef MP-WEIXIN
  name: 'u--form',
  // #endif
  mixins: [mpMixin, props, mixin],
  components: {
    uvForm
  },
  created() {
    this.children = [];
  },
  methods: {
    // 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
    setRules(rules) {
      this.$refs.uForm.setRules(rules);
    },
    validate() {
      /**
       * 在微信小程序中，通过this.$parent拿到的父组件是u--form，而不是其内嵌的u-form
       * 导致在u-form组件中，拿不到对应的children数组，从而校验无效，所以这里每次调用u-form组件中的
       * 对应方法的时候，在小程序中都先将u--form的children赋值给u-form中的children
       */
      // #ifdef MP-WEIXIN
      this.setMpData();
      // #endif
      return this.$refs.uForm.validate();
    },
    validateField(value, callback) {
      // #ifdef MP-WEIXIN
      this.setMpData();
      // #endif
      return this.$refs.uForm.validateField(value, callback);
    },
    resetFields() {
      // #ifdef MP-WEIXIN
      this.setMpData();
      // #endif
      return this.$refs.uForm.resetFields();
    },
    clearValidate(props) {
      // #ifdef MP-WEIXIN
      this.setMpData();
      // #endif
      return this.$refs.uForm.clearValidate(props);
    },
    setMpData() {
      this.$refs.uForm.children = this.children;
    }
  }

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

@@ -0,0 +1 @@
+<template>
  <uvImage
    :src="src"
    :mode="mode"
    :width="width"
    :height="height"
    :shape="shape"
    :radius="radius"
    :lazyLoad="lazyLoad"
    :showMenuByLongpress="showMenuByLongpress"
    :loadingIcon="loadingIcon"
    :errorIcon="errorIcon"
    :showLoading="showLoading"
    :showError="showError"
    :fade="fade"
    :webp="webp"
    :duration="duration"
    :bgColor="bgColor"
    :customStyle="customStyle"
    @click="$emit('click')"
    @error="$emit('error')"
    @load="$emit('load')"
  >
    <template v-slot:loading>
      <slot name="loading"></slot>
    </template>
    <template v-slot:error>
      <slot name="error"></slot>
    </template>
  </uvImage>
 * 此组件存在的理由是，在nvue下，u-image被uni-app官方占用了，u-image在nvue中相当于image组件
 * 所以在nvue下，取名为u--image，内部其实还是u-iamge.vue，只不过做一层中转
 */
  name: 'u--image',
  mixins: [mpMixin, props, mixin],
  components: {
    uvImage
  },
  emits: ['click', 'error', 'load']

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

@@ -0,0 +1,9 @@
+<template>
+		<!-- #ifdef VUE2 -->
+		@input="e => $emit('input', e)"
+		<!-- #endif -->
+		<!-- #ifdef VUE3 -->
+		@update:modelValue="e => $emit('update:modelValue', e)"
+		<!-- #endif -->
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';

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

@@ -0,0 +1 @@
+<template>
  <uvText
    :type="type"
    :show="show"
    :text="text"
    :prefixIcon="prefixIcon"
    :suffixIcon="suffixIcon"
    :mode="mode"
    :href="href"
    :format="format"
    :call="call"
    :openType="openType"
    :bold="bold"
    :block="block"
    :lines="lines"
    :color="color"
    :decoration="decoration"
    :size="size"
    :iconStyle="iconStyle"
    :margin="margin"
    :lineHeight="lineHeight"
    :align="align"
    :wordWrap="wordWrap"
    :customStyle="customStyle"
  ></uvText>
 * 此组件存在的理由是，在nvue下，u-text被uni-app官方占用了，u-text在nvue中相当于input组件
 * 所以在nvue下，取名为u--input，内部其实还是u-text.vue，只不过做一层中转
 * 不使用v-bind="$attrs"，而是分开独立写传参，是因为微信小程序不支持此写法
 */
  name: 'u--text',
  mixins: [mpMixin, mixin, props],
  components: {
    uvText
  }

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

@@ -0,0 +1 @@
+<template>
  <uvTextarea
    :value="value"
    :modelValue="modelValue"
    :placeholder="placeholder"
    :height="height"
    :confirmType="confirmType"
    :disabled="disabled"
    :count="count"
    :focus="focus"
    :autoHeight="autoHeight"
    :fixed="fixed"
    :cursorSpacing="cursorSpacing"
    :cursor="cursor"
    :showConfirmBar="showConfirmBar"
    :selectionStart="selectionStart"
    :selectionEnd="selectionEnd"
    :adjustPosition="adjustPosition"
    :disableDefaultPadding="disableDefaultPadding"
    :holdKeyboard="holdKeyboard"
    :maxlength="maxlength"
    :border="border"
    :customStyle="customStyle"
    :formatter="formatter"
    :ignoreCompositionEvent="ignoreCompositionEvent"
    @input="(e) => $emit('input', e)"
    @update:modelValue="(e) => $emit('update:modelValue', e)"
  ></uvTextarea>
 * 此组件存在的理由是，在nvue下，u--textarea被uni-app官方占用了，u-textarea在nvue中相当于textarea组件
 * 所以在nvue下，取名为u--textarea，内部其实还是u-textarea.vue，只不过做一层中转
 */
  name: 'u--textarea',
  mixins: [mpMixin, props, mixin],
  components: {
    uvTextarea
  }

package/uview-plus/components/u-action-sheet/props.js

@@ -0,0 +1,55 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 操作菜单是否展示 （默认false）
+    show: {
+      type: Boolean,
+      default: defprops.actionSheet.show
+    },
+    // 标题
+    title: {
+      type: String,
+      default: defprops.actionSheet.title
+    },
+    // 选项上方的描述信息
+    description: {
+      type: String,
+      default: defprops.actionSheet.description
+    },
+    // 数据
+    actions: {
+      type: Array,
+      default: defprops.actionSheet.actions
+    },
+    // 取消按钮的文字，不为空时显示按钮
+    cancelText: {
+      type: String,
+      default: defprops.actionSheet.cancelText
+    },
+    // 点击某个菜单项时是否关闭弹窗
+    closeOnClickAction: {
+      type: Boolean,
+      default: defprops.actionSheet.closeOnClickAction
+    },
+    // 处理底部安全区（默认true）
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: defprops.actionSheet.safeAreaInsetBottom
+    },
+    // 小程序的打开方式
+    openType: {
+      type: String,
+      default: defprops.actionSheet.openType
+    },
+    // 点击遮罩是否允许关闭 (默认true)
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: defprops.actionSheet.closeOnClickOverlay
+    },
+    // 圆角值
+    round: {
+      type: [Boolean, String, Number],
+      default: defprops.actionSheet.round
+    }
+  }
+};

package/uview-plus/components/u-action-sheet/style.css

@@ -0,0 +1,68 @@
+/* #ifndef APP-NVUE */
+view, scroll-view, swiper-item {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-reset-button {
+  width: 100%;
+}
+.u-action-sheet {
+  text-align: center;
+}
+.u-action-sheet__header {
+  position: relative;
+  padding: 12px 30px;
+}
+.u-action-sheet__header__title {
+  font-size: 16px;
+  color: var(--u-main-color);
+  font-weight: bold;
+  text-align: center;
+}
+.u-action-sheet__header__icon-wrap {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+}
+.u-action-sheet__description {
+  font-size: 13px;
+  color: var(--u-tips-color);
+  margin: 18px 15px;
+  text-align: center;
+}
+.u-action-sheet__item-wrap__item {
+  padding: 15px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.u-action-sheet__item-wrap__item__name {
+  font-size: 16px;
+  color: var(--u-main-color);
+  text-align: center;
+}
+.u-action-sheet__item-wrap__item__subname {
+  font-size: 13px;
+  color: #c0c4cc;
+  margin-top: 10px;
+  text-align: center;
+}
+.u-action-sheet__cancel-text {
+  font-size: 16px;
+  color: var(--u-content-color);
+  text-align: center;
+  padding: 16px;
+}
+.u-action-sheet--hover {
+  background-color: #f2f3f5;
+}

package/uview-plus/components/u-action-sheet/style.scss

@@ -0,0 +1,84 @@
+@import '../../libs/css/components.scss';
+$u-action-sheet-reset-button-width: 100% !default;
+$u-action-sheet-title-font-size: 16px !default;
+$u-action-sheet-title-padding: 12px 30px !default;
+$u-action-sheet-title-color: $u-main-color !default;
+$u-action-sheet-header-icon-wrap-right: 15px !default;
+$u-action-sheet-header-icon-wrap-top: 15px !default;
+$u-action-sheet-description-font-size: 13px !default;
+$u-action-sheet-description-color: 14px !default;
+$u-action-sheet-description-margin: 18px 15px !default;
+$u-action-sheet-item-wrap-item-padding: 15px !default;
+$u-action-sheet-item-wrap-name-font-size: 16px !default;
+$u-action-sheet-item-wrap-subname-font-size: 13px !default;
+$u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
+$u-action-sheet-item-wrap-subname-margin-top: 10px !default;
+$u-action-sheet-cancel-text-font-size: 16px !default;
+$u-action-sheet-cancel-text-color: $u-content-color !default;
+$u-action-sheet-cancel-text-font-size: 15px !default;
+$u-action-sheet-cancel-text-hover-background-color: rgb(242, 243, 245) !default;
+
+.u-reset-button {
+  width: $u-action-sheet-reset-button-width;
+}
+
+.u-action-sheet {
+  text-align: center;
+  &__header {
+    position: relative;
+    padding: $u-action-sheet-title-padding;
+    &__title {
+      font-size: $u-action-sheet-title-font-size;
+      color: $u-action-sheet-title-color;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    &__icon-wrap {
+      position: absolute;
+      right: $u-action-sheet-header-icon-wrap-right;
+      top: $u-action-sheet-header-icon-wrap-top;
+    }
+  }
+
+  &__description {
+    font-size: $u-action-sheet-description-font-size;
+    color: $u-tips-color;
+    margin: $u-action-sheet-description-margin;
+    text-align: center;
+  }
+
+  &__item-wrap {
+    &__item {
+      padding: $u-action-sheet-item-wrap-item-padding;
+      @include flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      &__name {
+        font-size: $u-action-sheet-item-wrap-name-font-size;
+        color: $u-main-color;
+        text-align: center;
+      }
+
+      &__subname {
+        font-size: $u-action-sheet-item-wrap-subname-font-size;
+        color: $u-action-sheet-item-wrap-subname-color;
+        margin-top: $u-action-sheet-item-wrap-subname-margin-top;
+        text-align: center;
+      }
+    }
+  }
+
+  &__cancel-text {
+    font-size: $u-action-sheet-cancel-text-font-size;
+    color: $u-action-sheet-cancel-text-color;
+    text-align: center;
+    padding: $u-action-sheet-cancel-text-font-size;
+  }
+
+  &--hover {
+    background-color: $u-action-sheet-cancel-text-hover-background-color;
+  }
+}

package/uview-plus/components/u-action-sheet/u-action-sheet.vue

@@ -0,0 +1,158 @@
+<template>
+  <u-popup :show="show" mode="bottom" @close="closeHandler" :safeAreaInsetBottom="safeAreaInsetBottom" :round="round">
+    <view class="u-action-sheet">
+      <view class="u-action-sheet__header" v-if="title">
+        <text class="u-action-sheet__header__title u-line-1">{{ title }}</text>
+        <view class="u-action-sheet__header__icon-wrap" @tap.stop="cancel">
+          <u-icon name="close" size="17" color="#c8c9cc" bold></u-icon>
+        </view>
+      </view>
+      <text
+        class="u-action-sheet__description"
+        :style="[
+          {
+            marginTop: `${title && description ? 0 : '18px'}`
+          }
+        ]"
+        v-if="description"
+      >
+        {{ description }}
+      </text>
+      <slot>
+        <u-line v-if="description"></u-line>
+        <view class="u-action-sheet__item-wrap">
+          <view :key="index" v-for="(item, index) in actions">
+            <!-- #ifdef MP -->
+            <button
+              class="u-reset-button"
+              :openType="item.openType"
+              @getuserinfo="onGetUserInfo"
+              @contact="onContact"
+              @getphonenumber="onGetPhoneNumber"
+              @error="onError"
+              @launchapp="onLaunchApp"
+              @opensetting="onOpenSetting"
+              :lang="lang"
+              :session-from="sessionFrom"
+              :send-message-title="sendMessageTitle"
+              :send-message-path="sendMessagePath"
+              :send-message-img="sendMessageImg"
+              :show-message-card="showMessageCard"
+              :app-parameter="appParameter"
+              @tap="selectHandler(index)"
+              :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
+            >
+              <!-- #endif -->
+              <view
+                class="u-action-sheet__item-wrap__item"
+                @tap.stop="selectHandler(index)"
+                :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
+                :hover-stay-time="150"
+              >
+                <template v-if="!item.loading">
+                  <text class="u-action-sheet__item-wrap__item__name" :style="[itemStyle(index)]">{{ item.name }}</text>
+                  <text v-if="item.subname" class="u-action-sheet__item-wrap__item__subname">{{ item.subname }}</text>
+                </template>
+                <u-loading-icon v-else custom-class="van-action-sheet__loading" size="18" mode="circle" />
+              </view>
+              <!-- #ifdef MP -->
+            </button>
+            <!-- #endif -->
+            <u-line v-if="index !== actions.length - 1"></u-line>
+          </view>
+        </view>
+      </slot>
+      <u-gap bgColor="#eaeaec" height="6" v-if="cancelText"></u-gap>
+      <view hover-class="u-action-sheet--hover">
+        <text @touchmove.stop.prevent :hover-stay-time="150" v-if="cancelText" class="u-action-sheet__cancel-text" @tap="cancel">
+          {{ cancelText }}
+        </text>
+      </view>
+    </view>
+  </u-popup>
+</template>
+<script>
+import openType from '../../libs/mixin/openType';
+import button from '../../libs/mixin/button';
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * ActionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @tutorial https://ijry.github.io/uview-plus/components/actionSheet.html
+ *
+ * @property {Boolean}			show				操作菜单是否展示 （默认 false ）
+ * @property {String}			title				操作菜单标题
+ * @property {String}			description			选项上方的描述信息
+ * @property {Array<Object>}	actions				按钮的文字数组，见官方文档示例
+ * @property {String}			cancelText			取消按钮的提示文字,不为空时显示按钮
+ * @property {Boolean}			closeOnClickAction	点击某个菜单项时是否关闭弹窗 （默认 true ）
+ * @property {Boolean}			safeAreaInsetBottom	处理底部安全区 （默认 true ）
+ * @property {String}			openType			小程序的打开方式 (contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error )
+ * @property {Boolean}			closeOnClickOverlay	点击遮罩是否允许关闭  (默认 true )
+ * @property {Number|String}	round				圆角值，默认无圆角  (默认 0 )
+ * @property {String}			lang				指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
+ * @property {String}			sessionFrom			会话来源，openType="contact"时有效
+ * @property {String}			sendMessageTitle	会话内消息卡片标题，openType="contact"时有效
+ * @property {String}			sendMessagePath		会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+ * @property {String}			sendMessageImg		会话内消息卡片图片，openType="contact"时有效
+ * @property {Boolean}			showMessageCard		是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 （默认 false ）
+ * @property {String}			appParameter		打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效
+ *
+ * @event {Function} select			点击ActionSheet列表项时触发
+ * @event {Function} close			点击取消按钮时触发
+ * @event {Function} getuserinfo	用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效
+ * @event {Function} contact		客服消息回调，openType="contact"时有效
+ * @event {Function} getphonenumber	获取用户手机号回调，openType="getPhoneNumber"时有效
+ * @event {Function} error			当使用开放能力时，发生错误的回调，openType="error"时有效
+ * @event {Function} launchapp		打开 APP 成功的回调，openType="launchApp"时有效
+ * @event {Function} opensetting	在打开授权设置页后回调，openType="openSetting"时有效
+ * @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
+ */
+export default {
+  name: 'u-action-sheet',
+  // 一些props参数和methods方法，通过mixin混入，因为其他文件也会用到
+  mixins: [openType, button, mixin, props],
+  data() {
+    return {};
+  },
+  computed: {
+    // 操作项目的样式
+    itemStyle() {
+      return (index) => {
+        let style = {};
+        if (this.actions[index].color) style.color = this.actions[index].color;
+        if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize);
+        // 选项被禁用的样式
+        if (this.actions[index].disabled) style.color = '#c0c4cc';
+        return style;
+      };
+    }
+  },
+  methods: {
+    closeHandler() {
+      // 允许点击遮罩关闭时，才发出close事件
+      if (this.closeOnClickOverlay) {
+        this.$emit('close');
+      }
+    },
+    // 点击取消按钮
+    cancel() {
+      this.$emit('close');
+    },
+    selectHandler(index) {
+      const item = this.actions[index];
+      if (item && !item.disabled && !item.loading) {
+        this.$emit('select', item);
+        if (this.closeOnClickAction) {
+          this.$emit('close');
+        }
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,60 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 图片地址，Array<String>|Array<Object>形式
+    urls: {
+      type: Array,
+      default: defprops.album.urls
+    },
+    // 指定从数组的对象元素中读取哪个属性作为图片地址
+    keyName: {
+      type: String,
+      default: defprops.album.keyName
+    },
+    // 单图时，图片长边的长度
+    singleSize: {
+      type: [String, Number],
+      default: defprops.album.singleSize
+    },
+    // 多图时，图片边长
+    multipleSize: {
+      type: [String, Number],
+      default: defprops.album.multipleSize
+    },
+    // 多图时，图片水平和垂直之间的间隔
+    space: {
+      type: [String, Number],
+      default: defprops.album.space
+    },
+    // 单图时，图片缩放裁剪的模式
+    singleMode: {
+      type: String,
+      default: defprops.album.singleMode
+    },
+    // 多图时，图片缩放裁剪的模式
+    multipleMode: {
+      type: String,
+      default: defprops.album.multipleMode
+    },
+    // 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
+    maxCount: {
+      type: [String, Number],
+      default: defprops.album.maxCount
+    },
+    // 是否可以预览图片
+    previewFullImage: {
+      type: Boolean,
+      default: defprops.album.previewFullImage
+    },
+    // 每行展示图片数量，如设置，singleSize和multipleSize将会无效
+    rowCount: {
+      type: [String, Number],
+      default: defprops.album.rowCount
+    },
+    // 超出maxCount时是否显示查看更多的提示
+    showMore: {
+      type: Boolean,
+      default: defprops.album.showMore
+    }
+  }
+};

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

@@ -0,0 +1,41 @@
+/* #ifndef APP-NVUE */
+view, scroll-view, swiper-item {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-album {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+.u-album__row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.u-album__row__wrapper {
+  position: relative;
+}
+.u-album__row__wrapper__text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}

package/uview-plus/components/u-album/style.scss

@@ -0,0 +1,26 @@
+@import '../../libs/css/components.scss';
+
+.u-album {
+  @include flex(column);
+
+  &__row {
+    @include flex(row);
+    flex-wrap: wrap;
+
+    &__wrapper {
+      position: relative;
+
+      &__text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        @include flex(row);
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}