@10yun/cv-mobile-ui 0.5.20 → 0.5.22

package/uni-ui/lib/uni-search-bar/uni-search-bar.vue

@@ -1 +1,236 @@
-<template>
  <view class="uni-searchbar">
    <view :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }" class="uni-searchbar__box" @click="searchClick">
      <view class="uni-searchbar__box-icon-search">
        <slot name="searchIcon">
          <uni-icons color="#c0c4cc" size="18" type="search" />
        </slot>
      </view>
      <input
        v-if="show || searchVal"
        :focus="showSync"
        :disabled="readonly"
        :placeholder="placeholderText"
        :maxlength="maxlength"
        class="uni-searchbar__box-search-input"
        confirm-type="search"
        type="text"
        v-model="searchVal"
        @confirm="confirm"
        @blur="blur"
        @focus="emitFocus"
      />
      <text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
      <view
        v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== '')) && !readonly"
        class="uni-searchbar__box-icon-clear"
        @click="clear"
      >
        <slot name="clearIcon">
          <uni-icons color="#c0c4cc" size="20" type="clear" />
        </slot>
      </view>
    </view>
    <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">
      {{ cancelTextI18n }}
    </text>
  </view>
 * SearchBar 搜索栏
 * @description 搜索栏组件，通常用于搜索商品、文章等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
 * @property {Number} radius 搜索栏圆角
 * @property {Number} maxlength 输入最大长度
 * @property {String} placeholder 搜索栏Placeholder
 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
 * 	@value always 一直显示
 * 	@value auto 输入框不为空时显示
 * 	@value none 一直不显示
 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
 * 	@value always 一直显示
 * 	@value auto 输入框不为空时显示
 * 	@value none 一直不显示
 * @property {String} cancelText 取消按钮的文字
 * @property {String} bgColor 输入框背景颜色
 * @property {Boolean} focus 是否自动聚焦
 * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
 */
  name: 'UniSearchBar',
  emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    radius: {
      type: [Number, String],
      default: 5
    },
    clearButton: {
      type: String,
      default: 'auto'
    },
    cancelButton: {
      type: String,
      default: 'auto'
    },
    cancelText: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#F8F8F8'
    },
    maxlength: {
      type: [Number, String],
      default: 100
    },
    value: {
      type: [Number, String],
      default: ''
    },
    modelValue: {
      type: [Number, String],
      default: ''
    },
    focus: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      showSync: false,
      searchVal: ''
    };
  },
  computed: {
    cancelTextI18n() {
      return this.cancelText || t('uni-search-bar.cancel');
    },
    placeholderText() {
      return this.placeholder || t('uni-search-bar.placeholder');
    }
  },
  watch: {
    // #ifndef VUE3
    value: {
      immediate: true,
      handler(newVal) {
        this.searchVal = newVal;
        if (newVal) {
          this.show = true;
        }
      }
    },
    // #endif
    // #ifdef VUE3
    modelValue: {
      immediate: true,
      handler(newVal) {
        this.searchVal = newVal;
        if (newVal) {
          this.show = true;
        }
      }
    },
    // #endif
    focus: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          if (this.readonly) return;
          this.show = true;
          this.$nextTick(() => {
            this.showSync = true;
          });
        }
      }
    },
    searchVal(newVal, oldVal) {
      this.$emit('input', newVal);
      // #ifdef VUE3
      this.$emit('update:modelValue', newVal);
      // #endif
    }
  },
  methods: {
    searchClick() {
      if (this.readonly) return;
      if (this.show) {
        return;
      }
      this.show = true;
      this.$nextTick(() => {
        this.showSync = true;
      });
    },
    clear() {
      this.$emit('clear', {
        value: this.searchVal
      });
      this.searchVal = '';
    },
    cancel() {
      if (this.readonly) return;
      this.$emit('cancel', {
        value: this.searchVal
      });
      this.searchVal = '';
      this.show = false;
      this.showSync = false;
      // #ifndef APP-PLUS
      uni.hideKeyboard();
      // #endif
      // #ifdef APP-PLUS
      plus.key.hideSoftKeybord();
      // #endif
    },
    confirm() {
      // #ifndef APP-PLUS
      uni.hideKeyboard();
      // #endif
      // #ifdef APP-PLUS
      plus.key.hideSoftKeybord();
      // #endif
      this.$emit('confirm', {
        value: this.searchVal
      });
    },
    blur() {
      // #ifndef APP-PLUS
      uni.hideKeyboard();
      // #endif
      // #ifdef APP-PLUS
      plus.key.hideSoftKeybord();
      // #endif
      this.$emit('blur', {
        value: this.searchVal
      });
    },
    emitFocus(e) {
      this.$emit('focus', e.detail);
    }
  }
+<template>
+  <view class="uni-searchbar">
+    <view :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }" class="uni-searchbar__box" @click="searchClick">
+      <view class="uni-searchbar__box-icon-search">
+        <slot name="searchIcon">
+          <uni-icons color="#c0c4cc" size="18" type="search" />
+        </slot>
+      </view>
+      <input
+        v-if="show || searchVal"
+        :focus="showSync"
+        :disabled="readonly"
+        :placeholder="placeholderText"
+        :maxlength="maxlength"
+        class="uni-searchbar__box-search-input"
+        confirm-type="search"
+        type="text"
+        v-model="searchVal"
+        @confirm="confirm"
+        @blur="blur"
+        @focus="emitFocus"
+      />
+      <text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
+      <view
+        v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== '')) && !readonly"
+        class="uni-searchbar__box-icon-clear"
+        @click="clear"
+      >
+        <slot name="clearIcon">
+          <uni-icons color="#c0c4cc" size="20" type="clear" />
+        </slot>
+      </view>
+    </view>
+    <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">
+      {{ cancelTextI18n }}
+    </text>
+  </view>
+</template>
+<script>
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import messages from './i18n/index.js';
+const { t } = initVueI18n(messages);
+/**
+ * SearchBar 搜索栏
+ * @description 搜索栏组件，通常用于搜索商品、文章等
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+ * @property {Number} radius 搜索栏圆角
+ * @property {Number} maxlength 输入最大长度
+ * @property {String} placeholder 搜索栏Placeholder
+ * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+ * 	@value always 一直显示
+ * 	@value auto 输入框不为空时显示
+ * 	@value none 一直不显示
+ * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+ * 	@value always 一直显示
+ * 	@value auto 输入框不为空时显示
+ * 	@value none 一直不显示
+ * @property {String} cancelText 取消按钮的文字
+ * @property {String} bgColor 输入框背景颜色
+ * @property {Boolean} focus 是否自动聚焦
+ * @property {Boolean} readonly 组件只读，不能有任何操作，只做展示
+ * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+ * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ */
+export default {
+  name: 'UniSearchBar',
+  emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    radius: {
+      type: [Number, String],
+      default: 5
+    },
+    clearButton: {
+      type: String,
+      default: 'auto'
+    },
+    cancelButton: {
+      type: String,
+      default: 'auto'
+    },
+    cancelText: {
+      type: String,
+      default: ''
+    },
+    bgColor: {
+      type: String,
+      default: '#F8F8F8'
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 100
+    },
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
+    focus: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+      showSync: false,
+      searchVal: ''
+    };
+  },
+  computed: {
+    cancelTextI18n() {
+      return this.cancelText || t('uni-search-bar.cancel');
+    },
+    placeholderText() {
+      return this.placeholder || t('uni-search-bar.placeholder');
+    }
+  },
+  watch: {
+    // #ifndef VUE3
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.searchVal = newVal;
+        if (newVal) {
+          this.show = true;
+        }
+      }
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      immediate: true,
+      handler(newVal) {
+        this.searchVal = newVal;
+        if (newVal) {
+          this.show = true;
+        }
+      }
+    },
+    // #endif
+    focus: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          if (this.readonly) return;
+          this.show = true;
+          this.$nextTick(() => {
+            this.showSync = true;
+          });
+        }
+      }
+    },
+    searchVal(newVal, oldVal) {
+      this.$emit('input', newVal);
+      // #ifdef VUE3
+      this.$emit('update:modelValue', newVal);
+      // #endif
+    }
+  },
+  methods: {
+    searchClick() {
+      if (this.readonly) return;
+      if (this.show) {
+        return;
+      }
+      this.show = true;
+      this.$nextTick(() => {
+        this.showSync = true;
+      });
+    },
+    clear() {
+      this.$emit('clear', {
+        value: this.searchVal
+      });
+      this.searchVal = '';
+    },
+    cancel() {
+      if (this.readonly) return;
+      this.$emit('cancel', {
+        value: this.searchVal
+      });
+      this.searchVal = '';
+      this.show = false;
+      this.showSync = false;
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+    },
+    confirm() {
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+      this.$emit('confirm', {
+        value: this.searchVal
+      });
+    },
+    blur() {
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+      this.$emit('blur', {
+        value: this.searchVal
+      });
+    },
+    emitFocus(e) {
+      this.$emit('focus', e.detail);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-section/uni-section.vue

@@ -1 +1,109 @@
-<template>
  <view class="uni-section">
    <view class="uni-section-header" @click="onClick">
      <view class="uni-section-header__decoration" v-if="type" :class="type" />
      <slot v-else name="decoration"></slot>
      <view class="uni-section-header__content">
        <text
          :style="{ 'font-size': titleFontSize, color: titleColor }"
          class="uni-section__content-title"
          :class="{ distraction: !subTitle }"
        >
          {{ title }}
        </text>
        <text
          v-if="subTitle"
          :style="{ 'font-size': subTitleFontSize, color: subTitleColor }"
          class="uni-section-header__content-sub"
        >
          {{ subTitle }}
        </text>
      </view>
      <view class="uni-section-header__slot-right">
        <slot name="right"></slot>
      </view>
    </view>
    <view class="uni-section-content" :style="{ padding: _padding }">
      <slot />
    </view>
  </view>
 * Section 标题栏
 * @description 标题栏
 * @property {String} type = [line|circle|square] 标题装饰类型
 * 	@value line 竖线
 * 	@value circle 圆形
 * 	@value square 正方形
 * @property {String} title 主标题
 * @property {String} titleFontSize 主标题字体大小
 * @property {String} titleColor 主标题字体颜色
 * @property {String} subTitle 副标题
 * @property {String} subTitleFontSize 副标题字体大小
 * @property {String} subTitleColor 副标题字体颜色
 * @property {String} padding 默认插槽 padding
 */
  name: 'UniSection',
  emits: ['click'],
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    titleFontSize: {
      type: String,
      default: '14px'
    },
    titleColor: {
      type: String,
      default: '#333'
    },
    subTitle: {
      type: String,
      default: ''
    },
    subTitleFontSize: {
      type: String,
      default: '12px'
    },
    subTitleColor: {
      type: String,
      default: '#999'
    },
    padding: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    _padding() {
      if (typeof this.padding === 'string') {
        return this.padding;
      }
      return this.padding ? '10px' : '';
    }
  },
  watch: {
    title(newVal) {
      if (uni.report && newVal !== '') {
        uni.report('title', newVal);
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
+<template>
+  <view class="uni-section">
+    <view class="uni-section-header" @click="onClick">
+      <view class="uni-section-header__decoration" v-if="type" :class="type" />
+      <slot v-else name="decoration"></slot>
+      <view class="uni-section-header__content">
+        <text
+          :style="{ 'font-size': titleFontSize, color: titleColor }"
+          class="uni-section__content-title"
+          :class="{ distraction: !subTitle }"
+        >
+          {{ title }}
+        </text>
+        <text
+          v-if="subTitle"
+          :style="{ 'font-size': subTitleFontSize, color: subTitleColor }"
+          class="uni-section-header__content-sub"
+        >
+          {{ subTitle }}
+        </text>
+      </view>
+      <view class="uni-section-header__slot-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+    <view class="uni-section-content" :style="{ padding: _padding }">
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * Section 标题栏
+ * @description 标题栏
+ * @property {String} type = [line|circle|square] 标题装饰类型
+ * 	@value line 竖线
+ * 	@value circle 圆形
+ * 	@value square 正方形
+ * @property {String} title 主标题
+ * @property {String} titleFontSize 主标题字体大小
+ * @property {String} titleColor 主标题字体颜色
+ * @property {String} subTitle 副标题
+ * @property {String} subTitleFontSize 副标题字体大小
+ * @property {String} subTitleColor 副标题字体颜色
+ * @property {String} padding 默认插槽 padding
+ */
+export default {
+  name: 'UniSection',
+  emits: ['click'],
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    titleFontSize: {
+      type: String,
+      default: '14px'
+    },
+    titleColor: {
+      type: String,
+      default: '#333'
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    subTitleFontSize: {
+      type: String,
+      default: '12px'
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999'
+    },
+    padding: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  computed: {
+    _padding() {
+      if (typeof this.padding === 'string') {
+        return this.padding;
+      }
+      return this.padding ? '10px' : '';
+    }
+  },
+  watch: {
+    title(newVal) {
+      if (uni.report && newVal !== '') {
+        uni.report('title', newVal);
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>