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

package/uni-ui/lib/uni-data-select/uni-data-select.vue

@@ -1 +1,289 @@
-<template>
  <view class="uni-stat__select">
    <span v-if="label" class="uni-label-text hide-on-phone">{{ label + '：' }}</span>
    <view class="uni-stat-box" :class="{ 'uni-stat__actived': current }">
      <view class="uni-select" :class="{ 'uni-select--disabled': disabled }">
        <view class="uni-select__input-box" @click="toggleSelector">
          <view v-if="current" class="uni-select__input-text">{{ current }}</view>
          <view v-else class="uni-select__input-text uni-select__input-placeholder">{{ typePlaceholder }}</view>
          <view v-if="current && clear && !disabled" @click.stop="clearVal">
            <uni-icons type="clear" color="#c0c4cc" size="24" />
          </view>
          <view v-else>
            <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" />
          </view>
        </view>
        <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
        <view class="uni-select__selector" v-if="showSelector">
          <view class="uni-popper__arrow"></view>
          <scroll-view scroll-y="true" class="uni-select__selector-scroll">
            <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
              <text>{{ emptyTips }}</text>
            </view>
            <view
              v-else
              class="uni-select__selector-item"
              v-for="(item, index) in mixinDatacomResData"
              :key="index"
              @click="change(item)"
            >
              <text :class="{ 'uni-select__selector__disabled': item.disable }">{{ formatItemName(item) }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
 * DataChecklist 数据选择器
 * @description 通过数据渲染的下拉框组件
 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
 * @property {String} value 默认值
 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
 * @property {Boolean} clear 是否可以清空已选项
 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
 * @property {String} label 左侧标题
 * @property {String} placeholder 输入框的提示文字
 * @property {Boolean} disabled 是否禁用
 * @event {Function} change  选中发生变化触发
 */
  name: 'uni-data-select',
  mixins: [uniCloud.mixinDatacom || {}],
  props: {
    localdata: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: [String, Number],
      default: ''
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    emptyTips: {
      type: String,
      default: '无选项'
    },
    clear: {
      type: Boolean,
      default: true
    },
    defItem: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
    format: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSelector: false,
      current: '',
      mixinDatacomResData: [],
      apps: [],
      channels: [],
      cacheKey: 'uni-data-select-lastSelectedValue'
    };
  },
  created() {
    this.debounceGet = this.debounce(() => {
      this.query();
    }, 300);
    if (this.collection && !this.localdata.length) {
      this.debounceGet();
    }
  },
  computed: {
    typePlaceholder() {
      const text = {
        'opendb-stat-app-versions': '版本',
        'opendb-app-channels': '渠道',
        'opendb-app-list': '应用'
      };
      const common = this.placeholder;
      const placeholder = text[this.collection];
      return placeholder ? common + placeholder : common;
    },
    valueCom() {
      // #ifdef VUE3
      return this.modelValue;
      // #endif
      // #ifndef VUE3
      return this.value;
      // #endif
    }
  },
  watch: {
    localdata: {
      immediate: true,
      handler(val, old) {
        if (Array.isArray(val) && old !== val) {
          this.mixinDatacomResData = val;
        }
      }
    },
    valueCom(val, old) {
      this.initDefVal();
    },
    mixinDatacomResData: {
      immediate: true,
      handler(val) {
        if (val.length) {
          this.initDefVal();
        }
      }
    }
  },
  methods: {
    debounce(fn, time = 100) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, time);
      };
    },
    // 执行数据库查询
    query() {
      this.mixinDatacomEasyGet();
    },
    // 监听查询条件变更事件
    onMixinDatacomPropsChange() {
      if (this.collection) {
        this.debounceGet();
      }
    },
    initDefVal() {
      let defValue = '';
      if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
        defValue = this.valueCom;
      } else {
        let strogeValue;
        if (this.collection) {
          strogeValue = this.getCache();
        }
        if (strogeValue || strogeValue === 0) {
          defValue = strogeValue;
        } else {
          let defItem = '';
          if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
            defItem = this.mixinDatacomResData[this.defItem - 1].value;
          }
          defValue = defItem;
        }
        if (defValue || defValue === 0) {
          this.emit(defValue);
        }
      }
      const def = this.mixinDatacomResData.find((item) => item.value === defValue);
      this.current = def ? this.formatItemName(def) : '';
    },
    /**
     * @param {[String, Number]} value
     * 判断用户给的 value 是否同时为禁用状态
     */
    isDisabled(value) {
      let isDisabled = false;
      this.mixinDatacomResData.forEach((item) => {
        if (item.value === value) {
          isDisabled = item.disable;
        }
      });
      return isDisabled;
    },
    clearVal() {
      this.emit('');
      if (this.collection) {
        this.removeCache();
      }
    },
    change(item) {
      if (!item.disable) {
        this.showSelector = false;
        this.current = this.formatItemName(item);
        this.emit(item.value);
      }
    },
    emit(val) {
      this.$emit('input', val);
      this.$emit('update:modelValue', val);
      this.$emit('change', val);
      if (this.collection) {
        this.setCache(val);
      }
    },
    toggleSelector() {
      if (this.disabled) {
        return;
      }
      this.showSelector = !this.showSelector;
    },
    formatItemName(item) {
      let { text, value, channel_code } = item;
      channel_code = channel_code ? `(${channel_code})` : '';
      if (this.format) {
        // 格式化输出
        let str = '';
        str = this.format;
        for (let key in item) {
          str = str.replace(new RegExp(`{${key}}`, 'g'), item[key]);
        }
        return str;
      } else {
        return this.collection.indexOf('app-list') > 0 ? `${text}(${value})` : text ? text : `未命名${channel_code}`;
      }
    },
    // 获取当前加载的数据
    getLoadData() {
      return this.mixinDatacomResData;
    },
    // 获取当前缓存key
    getCurrentCacheKey() {
      return this.collection;
    },
    // 获取缓存
    getCache(name = this.getCurrentCacheKey()) {
      let cacheData = uni.getStorageSync(this.cacheKey) || {};
      return cacheData[name];
    },
    // 设置缓存
    setCache(value, name = this.getCurrentCacheKey()) {
      let cacheData = uni.getStorageSync(this.cacheKey) || {};
      cacheData[name] = value;
      uni.setStorageSync(this.cacheKey, cacheData);
    },
    // 删除缓存
    removeCache(name = this.getCurrentCacheKey()) {
      let cacheData = uni.getStorageSync(this.cacheKey) || {};
      delete cacheData[name];
      uni.setStorageSync(this.cacheKey, cacheData);
    }
  }
+<template>
+  <view class="uni-stat__select">
+    <span v-if="label" class="uni-label-text hide-on-phone">{{ label + '：' }}</span>
+    <view class="uni-stat-box" :class="{ 'uni-stat__actived': current }">
+      <view class="uni-select" :class="{ 'uni-select--disabled': disabled }">
+        <view class="uni-select__input-box" @click="toggleSelector">
+          <view v-if="current" class="uni-select__input-text">{{ current }}</view>
+          <view v-else class="uni-select__input-text uni-select__input-placeholder">{{ typePlaceholder }}</view>
+          <view v-if="current && clear && !disabled" @click.stop="clearVal">
+            <uni-icons type="clear" color="#c0c4cc" size="24" />
+          </view>
+          <view v-else>
+            <uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" />
+          </view>
+        </view>
+        <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
+        <view class="uni-select__selector" v-if="showSelector">
+          <view class="uni-popper__arrow"></view>
+          <scroll-view scroll-y="true" class="uni-select__selector-scroll">
+            <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
+              <text>{{ emptyTips }}</text>
+            </view>
+            <view
+              v-else
+              class="uni-select__selector-item"
+              v-for="(item, index) in mixinDatacomResData"
+              :key="index"
+              @click="change(item)"
+            >
+              <text :class="{ 'uni-select__selector__disabled': item.disable }">{{ formatItemName(item) }}</text>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * DataChecklist 数据选择器
+ * @description 通过数据渲染的下拉框组件
+ * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
+ * @property {String} value 默认值
+ * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+ * @property {Boolean} clear 是否可以清空已选项
+ * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+ * @property {String} label 左侧标题
+ * @property {String} placeholder 输入框的提示文字
+ * @property {Boolean} disabled 是否禁用
+ * @event {Function} change  选中发生变化触发
+ */
+export default {
+  name: 'uni-data-select',
+  mixins: [uniCloud.mixinDatacom || {}],
+  props: {
+    localdata: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    emptyTips: {
+      type: String,
+      default: '无选项'
+    },
+    clear: {
+      type: Boolean,
+      default: true
+    },
+    defItem: {
+      type: Number,
+      default: 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
+    format: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showSelector: false,
+      current: '',
+      mixinDatacomResData: [],
+      apps: [],
+      channels: [],
+      cacheKey: 'uni-data-select-lastSelectedValue'
+    };
+  },
+  created() {
+    this.debounceGet = this.debounce(() => {
+      this.query();
+    }, 300);
+    if (this.collection && !this.localdata.length) {
+      this.debounceGet();
+    }
+  },
+  computed: {
+    typePlaceholder() {
+      const text = {
+        'opendb-stat-app-versions': '版本',
+        'opendb-app-channels': '渠道',
+        'opendb-app-list': '应用'
+      };
+      const common = this.placeholder;
+      const placeholder = text[this.collection];
+      return placeholder ? common + placeholder : common;
+    },
+    valueCom() {
+      // #ifdef VUE3
+      return this.modelValue;
+      // #endif
+      // #ifndef VUE3
+      return this.value;
+      // #endif
+    }
+  },
+  watch: {
+    localdata: {
+      immediate: true,
+      handler(val, old) {
+        if (Array.isArray(val) && old !== val) {
+          this.mixinDatacomResData = val;
+        }
+      }
+    },
+    valueCom(val, old) {
+      this.initDefVal();
+    },
+    mixinDatacomResData: {
+      immediate: true,
+      handler(val) {
+        if (val.length) {
+          this.initDefVal();
+        }
+      }
+    }
+  },
+  methods: {
+    debounce(fn, time = 100) {
+      let timer = null;
+      return function (...args) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          fn.apply(this, args);
+        }, time);
+      };
+    },
+    // 执行数据库查询
+    query() {
+      this.mixinDatacomEasyGet();
+    },
+    // 监听查询条件变更事件
+    onMixinDatacomPropsChange() {
+      if (this.collection) {
+        this.debounceGet();
+      }
+    },
+    initDefVal() {
+      let defValue = '';
+      if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
+        defValue = this.valueCom;
+      } else {
+        let strogeValue;
+        if (this.collection) {
+          strogeValue = this.getCache();
+        }
+        if (strogeValue || strogeValue === 0) {
+          defValue = strogeValue;
+        } else {
+          let defItem = '';
+          if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
+            defItem = this.mixinDatacomResData[this.defItem - 1].value;
+          }
+          defValue = defItem;
+        }
+        if (defValue || defValue === 0) {
+          this.emit(defValue);
+        }
+      }
+      const def = this.mixinDatacomResData.find((item) => item.value === defValue);
+      this.current = def ? this.formatItemName(def) : '';
+    },
+    /**
+     * @param {[String, Number]} value
+     * 判断用户给的 value 是否同时为禁用状态
+     */
+    isDisabled(value) {
+      let isDisabled = false;
+      this.mixinDatacomResData.forEach((item) => {
+        if (item.value === value) {
+          isDisabled = item.disable;
+        }
+      });
+      return isDisabled;
+    },
+    clearVal() {
+      this.emit('');
+      if (this.collection) {
+        this.removeCache();
+      }
+    },
+    change(item) {
+      if (!item.disable) {
+        this.showSelector = false;
+        this.current = this.formatItemName(item);
+        this.emit(item.value);
+      }
+    },
+    emit(val) {
+      this.$emit('input', val);
+      this.$emit('update:modelValue', val);
+      this.$emit('change', val);
+      if (this.collection) {
+        this.setCache(val);
+      }
+    },
+    toggleSelector() {
+      if (this.disabled) {
+        return;
+      }
+      this.showSelector = !this.showSelector;
+    },
+    formatItemName(item) {
+      let { text, value, channel_code } = item;
+      channel_code = channel_code ? `(${channel_code})` : '';
+      if (this.format) {
+        // 格式化输出
+        let str = '';
+        str = this.format;
+        for (let key in item) {
+          str = str.replace(new RegExp(`{${key}}`, 'g'), item[key]);
+        }
+        return str;
+      } else {
+        return this.collection.indexOf('app-list') > 0 ? `${text}(${value})` : text ? text : `未命名${channel_code}`;
+      }
+    },
+    // 获取当前加载的数据
+    getLoadData() {
+      return this.mixinDatacomResData;
+    },
+    // 获取当前缓存key
+    getCurrentCacheKey() {
+      return this.collection;
+    },
+    // 获取缓存
+    getCache(name = this.getCurrentCacheKey()) {
+      let cacheData = uni.getStorageSync(this.cacheKey) || {};
+      return cacheData[name];
+    },
+    // 设置缓存
+    setCache(value, name = this.getCurrentCacheKey()) {
+      let cacheData = uni.getStorageSync(this.cacheKey) || {};
+      cacheData[name] = value;
+      uni.setStorageSync(this.cacheKey, cacheData);
+    },
+    // 删除缓存
+    removeCache(name = this.getCurrentCacheKey()) {
+      let cacheData = uni.getStorageSync(this.cacheKey) || {};
+      delete cacheData[name];
+      uni.setStorageSync(this.cacheKey, cacheData);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-datetime-picker/calendar-item.vue

@@ -1 +1,70 @@
-<template>
  <view
    class="uni-calendar-item__weeks-box"
    :class="{
      'uni-calendar-item--disable': weeks.disable,
      'uni-calendar-item--before-checked-x': weeks.beforeMultiple,
      'uni-calendar-item--multiple': weeks.multiple,
      'uni-calendar-item--after-checked-x': weeks.afterMultiple
    }"
    @click="choiceDate(weeks)"
    @mouseenter="handleMousemove(weeks)"
  >
    <view
      class="uni-calendar-item__weeks-box-item"
      :class="{
        'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
        'uni-calendar-item--checked-range-text': checkHover,
        'uni-calendar-item--before-checked': weeks.beforeMultiple,
        'uni-calendar-item--multiple': weeks.multiple,
        'uni-calendar-item--after-checked': weeks.afterMultiple,
        'uni-calendar-item--disable': weeks.disable
      }"
    >
      <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
      <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">
        {{ weeks.date }}
      </text>
    </view>
    <view :class="{ 'uni-calendar-item--today': weeks.isToday }"></view>
  </view>
  props: {
    weeks: {
      type: Object,
      default() {
        return {};
      }
    },
    calendar: {
      type: Object,
      default: () => {
        return {};
      }
    },
    selected: {
      type: Array,
      default: () => {
        return [];
      }
    },
    checkHover: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    choiceDate(weeks) {
      this.$emit('change', weeks);
    },
    handleMousemove(weeks) {
      this.$emit('handleMouse', weeks);
    }
  }
+<template>
+  <view
+    class="uni-calendar-item__weeks-box"
+    :class="{
+      'uni-calendar-item--disable': weeks.disable,
+      'uni-calendar-item--before-checked-x': weeks.beforeMultiple,
+      'uni-calendar-item--multiple': weeks.multiple,
+      'uni-calendar-item--after-checked-x': weeks.afterMultiple
+    }"
+    @click="choiceDate(weeks)"
+    @mouseenter="handleMousemove(weeks)"
+  >
+    <view
+      class="uni-calendar-item__weeks-box-item"
+      :class="{
+        'uni-calendar-item--checked': calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
+        'uni-calendar-item--checked-range-text': checkHover,
+        'uni-calendar-item--before-checked': weeks.beforeMultiple,
+        'uni-calendar-item--multiple': weeks.multiple,
+        'uni-calendar-item--after-checked': weeks.afterMultiple,
+        'uni-calendar-item--disable': weeks.disable
+      }"
+    >
+      <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
+      <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">
+        {{ weeks.date }}
+      </text>
+    </view>
+    <view :class="{ 'uni-calendar-item--today': weeks.isToday }"></view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    weeks: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    calendar: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    selected: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    checkHover: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    choiceDate(weeks) {
+      this.$emit('change', weeks);
+    },
+    handleMousemove(weeks) {
+      this.$emit('handleMouse', weeks);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>