@10yun/cv-mobile-ui 0.4.2 → 0.4.4

package/ui-cv/cv-search-bar/cv-search-bar.vue

@@ -1,280 +0,0 @@
-<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">
-          <cv-icon2 color="#999999" size="18" type="search" />
-        </slot>
-      </view>
-      <input
-        v-if="show || searchVal"
-        :focus="showSync"
-        :placeholder="placeholder"
-        :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 !== ''))"
-        class="uni-searchbar__box-icon-clear"
-        @click="clear"
-      >
-        <slot name="clearIcon">
-          <cv-icon2 color="#c0c4cc" size="15" type="clear" />
-        </slot>
-      </view>
-    </view>
-    <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">
-      {{ cancelText }}
-    </text>
-  </view>
-</template>
-
-<script>
-/**
- * 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 是否自动聚焦
- * @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: 'cvSearchBar',
-  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
-    }
-  },
-  data() {
-    return {
-      show: false,
-      showSync: false,
-      searchVal: ''
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(newVal) {
-        this.searchVal = newVal;
-        if (newVal) {
-          this.show = true;
-        }
-      }
-    },
-    modelValue: {
-      immediate: true,
-      handler(newVal) {
-        this.searchVal = newVal;
-        if (newVal) {
-          this.show = true;
-        }
-      }
-    },
-    focus: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.show = true;
-          this.$nextTick(() => {
-            this.showSync = true;
-          });
-        }
-      }
-    },
-    searchVal(newVal, oldVal) {
-      this.$emit('input', newVal);
-      this.$emit('update:modelValue', newVal);
-    }
-  },
-  methods: {
-    searchClick() {
-      if (this.show) {
-        return;
-      }
-      this.show = true;
-      this.$nextTick(() => {
-        this.showSync = true;
-      });
-    },
-    clear() {
-      this.$emit('clear', {
-        value: this.searchVal
-      });
-      this.searchVal = '';
-    },
-    cancel() {
-      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 scoped>
-.uni-searchbar {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  position: relative;
-  padding: 8px;
-}
-
-.uni-searchbar__box {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  box-sizing: border-box;
-  /* #endif */
-  overflow: hidden;
-  position: relative;
-  flex: 1;
-  justify-content: center;
-  flex-direction: row;
-  align-items: center;
-  height: 36px;
-  padding: 5px 8px 5px 0px;
-  border-width: 0.5px;
-  border-style: solid;
-  border-color: #e5e5e5;
-}
-
-.uni-searchbar__box-icon-search {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  padding: 0 8px;
-  justify-content: center;
-  align-items: center;
-  color: #808080;
-}
-
-.uni-searchbar__box-search-input {
-  flex: 1;
-  font-size: 14px;
-  color: #333;
-}
-
-.uni-searchbar__box-icon-clear {
-  align-items: center;
-  line-height: 24px;
-  padding-left: 8px;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-searchbar__text-placeholder {
-  font-size: 14px;
-  color: #808080;
-  margin-left: 5px;
-}
-
-.uni-searchbar__cancel {
-  padding-left: 10px;
-  line-height: 36px;
-  font-size: 14px;
-  color: #333;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-</style>

package/ui-cv/cv-steps/cv-steps.vue

@@ -1,293 +0,0 @@
-<template>
-  <view class="uni-steps">
-    <view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']">
-      <view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']">
-        <view
-          v-for="(item, index) in options"
-          :key="index"
-          :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']"
-        >
-          <text
-            :style="{ color: index <= active ? activeColor : deactiveColor }"
-            :class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']"
-          >
-            {{ item.title }}
-          </text>
-          <text
-            :style="{ color: index <= active ? activeColor : deactiveColor }"
-            :class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']"
-          >
-            {{ item.desc }}
-          </text>
-        </view>
-      </view>
-      <view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']">
-        <view
-          :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']"
-          v-for="(item, index) in options"
-          :key="index"
-        >
-          <view
-            :class="[
-              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
-              direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before'
-            ]"
-            :style="{
-              backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor
-            }"
-          ></view>
-          <view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active">
-            <cv-icon2 :color="activeColor" type="checkbox-filled" size="14"></cv-icon2>
-          </view>
-          <view
-            :class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']"
-            v-else
-            :style="{ backgroundColor: index < active ? activeColor : deactiveColor }"
-          ></view>
-          <view
-            :class="[
-              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
-              direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after'
-            ]"
-            :style="{
-              backgroundColor:
-                index < active && index !== options.length - 1
-                  ? activeColor
-                  : index === options.length - 1
-                  ? 'transparent'
-                  : deactiveColor
-            }"
-          ></view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-/**
- * Steps 步骤条
- * @description 评分组件
- * @tutorial https://ext.dcloud.net.cn/plugin?id=34
- * @property {Number} active 当前步骤
- * @property {String} direction = [row|column] 当前步骤
- * 	@value row 横向
- * 	@value column 纵向
- * @property {String} activeColor 选中状态的颜色
- * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
- */
-
-export default {
-  name: 'UniSteps',
-  props: {
-    direction: {
-      // 排列方向 row column
-      type: String,
-      default: 'row'
-    },
-    activeColor: {
-      // 激活状态颜色
-      type: String,
-      default: '#1aad19'
-    },
-    deactiveColor: {
-      // 未激活状态颜色
-      type: String,
-      default: '#999999'
-    },
-    active: {
-      // 当前步骤
-      type: Number,
-      default: 0
-    },
-    options: {
-      type: Array,
-      default() {
-        return [];
-      }
-    } // 数据
-  },
-  data() {
-    return {};
-  }
-};
-</script>
-
-<style scoped>
-.uni-steps {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  width: 100%;
-  /* #endif */
-  /* #ifdef APP-NVUE */
-  flex: 1;
-  /* #endif */
-  flex-direction: column;
-}
-
-.uni-steps__row {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-}
-
-.uni-steps__column {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row-reverse;
-}
-
-.uni-steps__row-text-container {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: flex-end;
-  margin-bottom: 8px;
-}
-
-.uni-steps__column-text-container {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  flex: 1;
-}
-
-.uni-steps__row-text {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  /* #endif */
-  flex: 1;
-  flex-direction: column;
-}
-
-.uni-steps__column-text {
-  padding: 6px 0px;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e5e5;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-}
-
-.uni-steps__row-title {
-  font-size: 14px;
-  line-height: 16px;
-  text-align: center;
-}
-
-.uni-steps__column-title {
-  font-size: 14px;
-  text-align: left;
-  line-height: 18px;
-}
-
-.uni-steps__row-desc {
-  font-size: 12px;
-  line-height: 14px;
-  text-align: center;
-}
-
-.uni-steps__column-desc {
-  font-size: 12px;
-  text-align: left;
-  line-height: 18px;
-}
-
-.uni-steps__row-container {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-
-.uni-steps__column-container {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  /* #endif */
-  width: 30px;
-  flex-direction: column;
-}
-
-.uni-steps__row-line-item {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  /* #endif */
-  flex-direction: row;
-  flex: 1;
-  height: 14px;
-  line-height: 14px;
-  align-items: center;
-  justify-content: center;
-}
-
-.uni-steps__column-line-item {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-}
-
-.uni-steps__row-line {
-  flex: 1;
-  height: 1px;
-  background-color: #999;
-}
-
-.uni-steps__column-line {
-  width: 1px;
-  background-color: #999;
-}
-
-.uni-steps__row-line--after {
-  transform: translateX(1px);
-}
-
-.uni-steps__column-line--after {
-  flex: 1;
-  transform: translate(0px, 1px);
-}
-
-.uni-steps__row-line--before {
-  transform: translateX(-1px);
-}
-
-.uni-steps__column-line--before {
-  height: 6px;
-  transform: translate(0px, -1px);
-}
-
-.uni-steps__row-circle {
-  width: 5px;
-  height: 5px;
-  border-radius: 100px;
-  background-color: #999;
-  margin: 0px 3px;
-}
-
-.uni-steps__column-circle {
-  width: 5px;
-  height: 5px;
-  border-radius: 100px;
-  background-color: #999;
-  margin: 4px 0px 5px 0px;
-}
-
-.uni-steps__row-check {
-  margin: 0px 6px;
-}
-
-.uni-steps__column-check {
-  height: 14px;
-  line-height: 14px;
-  margin: 2px 0px;
-}
-</style>