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

package/ui-cv/cv-fab/cv-fab.vue

@@ -1,465 +0,0 @@
-<template>
-  <view class="uni-cursor-point">
-    <view
-      v-if="popMenu && (leftBottom || rightBottom || leftTop || rightTop) && content.length > 0"
-      :class="{
-        'uni-fab--leftBottom': leftBottom,
-        'uni-fab--rightBottom': rightBottom,
-        'uni-fab--leftTop': leftTop,
-        'uni-fab--rightTop': rightTop
-      }"
-      class="uni-fab"
-    >
-      <view
-        :class="{
-          'uni-fab__content--left': horizontal === 'left',
-          'uni-fab__content--right': horizontal === 'right',
-          'uni-fab__content--flexDirection': direction === 'vertical',
-          'uni-fab__content--flexDirectionStart': flexDirectionStart,
-          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
-          'uni-fab__content--other-platform': !isAndroidNvue
-        }"
-        :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
-        class="uni-fab__content"
-        elevation="5"
-      >
-        <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
-        <view
-          v-for="(item, index) in content"
-          :key="index"
-          :class="{ 'uni-fab__item--active': isShow }"
-          class="uni-fab__item"
-          @click="_onItemClick(index, item)"
-        >
-          <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
-          <text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">
-            {{ item.text }}
-          </text>
-        </view>
-        <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
-      </view>
-    </view>
-    <view
-      :class="{
-        'uni-fab__circle--leftBottom': leftBottom,
-        'uni-fab__circle--rightBottom': rightBottom,
-        'uni-fab__circle--leftTop': leftTop,
-        'uni-fab__circle--rightTop': rightTop,
-        'uni-fab__content--other-platform': !isAndroidNvue
-      }"
-      class="uni-fab__circle uni-fab__plus"
-      :style="{ 'background-color': styles.buttonColor }"
-      @click="_onClick"
-    >
-      <view class="fab-circle-v" :class="{ 'uni-fab__plus--active': isShow && content.length > 0 }"></view>
-      <view class="fab-circle-h" :class="{ 'uni-fab__plus--active': isShow && content.length > 0 }"></view>
-    </view>
-  </view>
-</template>
-
-<script>
-let platform = 'other';
-// #ifdef APP-NVUE
-platform = uni.getSystemInfoSync().platform;
-// #endif
-
-/**
- * Fab 悬浮按钮
- * @description 点击可展开一个图形按钮菜单
- * @tutorial https://ext.dcloud.net.cn/plugin?id=144
- * @property {Object} pattern 可选样式配置项
- * @property {Object} horizontal = [left | right] 水平对齐方式
- * 	@value left 左对齐
- * 	@value right 右对齐
- * @property {Object} vertical = [bottom | top] 垂直对齐方式
- * 	@value bottom 下对齐
- * 	@value top 上对齐
- * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
- * 	@value horizontal 水平显示
- * 	@value vertical 垂直显示
- * @property {Array} content 展开菜单内容配置项
- * @property {Boolean} popMenu 是否使用弹出菜单
- * @event {Function} trigger 展开菜单点击事件，返回点击信息
- * @event {Function} fabClick 悬浮按钮点击事件
- */
-export default {
-  name: 'cvFab',
-  emits: ['fabClick', 'trigger'],
-  props: {
-    pattern: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    horizontal: {
-      type: String,
-      default: 'left'
-    },
-    vertical: {
-      type: String,
-      default: 'bottom'
-    },
-    direction: {
-      type: String,
-      default: 'horizontal'
-    },
-    content: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    show: {
-      type: Boolean,
-      default: false
-    },
-    popMenu: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      fabShow: false,
-      isShow: false,
-      isAndroidNvue: platform === 'android',
-      styles: {
-        color: '#3c3e49',
-        selectedColor: '#007AFF',
-        backgroundColor: '#fff',
-        buttonColor: '#007AFF'
-      }
-    };
-  },
-  computed: {
-    contentWidth(e) {
-      return (this.content.length + 1) * 55 + 10 + 'px';
-    },
-    contentWidthMin() {
-      return 55 + 'px';
-    },
-    // 动态计算宽度
-    boxWidth() {
-      return this.getPosition(3, 'horizontal');
-    },
-    // 动态计算高度
-    boxHeight() {
-      return this.getPosition(3, 'vertical');
-    },
-    // 计算左下位置
-    leftBottom() {
-      return this.getPosition(0, 'left', 'bottom');
-    },
-    // 计算右下位置
-    rightBottom() {
-      return this.getPosition(0, 'right', 'bottom');
-    },
-    // 计算左上位置
-    leftTop() {
-      return this.getPosition(0, 'left', 'top');
-    },
-    rightTop() {
-      return this.getPosition(0, 'right', 'top');
-    },
-    flexDirectionStart() {
-      return this.getPosition(1, 'vertical', 'top');
-    },
-    flexDirectionEnd() {
-      return this.getPosition(1, 'vertical', 'bottom');
-    },
-    horizontalLeft() {
-      return this.getPosition(2, 'horizontal', 'left');
-    },
-    horizontalRight() {
-      return this.getPosition(2, 'horizontal', 'right');
-    }
-  },
-  watch: {
-    pattern(newValue, oldValue) {
-      //console.log(JSON.stringify(newValue))
-      this.styles = Object.assign({}, this.styles, newValue);
-    }
-  },
-  created() {
-    this.isShow = this.show;
-    if (this.top === 0) {
-      this.fabShow = true;
-    }
-    // 初始化样式
-    this.styles = Object.assign({}, this.styles, this.pattern);
-  },
-  methods: {
-    _onClick() {
-      this.$emit('fabClick');
-      if (!this.popMenu) {
-        return;
-      }
-      this.isShow = !this.isShow;
-    },
-    open() {
-      this.isShow = true;
-    },
-    close() {
-      this.isShow = false;
-    },
-    /**
-     * 按钮点击事件
-     */
-    _onItemClick(index, item) {
-      this.$emit('trigger', {
-        index,
-        item
-      });
-    },
-    /**
-     * 获取 位置信息
-     */
-    getPosition(types, paramA, paramB) {
-      if (types === 0) {
-        return this.horizontal === paramA && this.vertical === paramB;
-      } else if (types === 1) {
-        return this.direction === paramA && this.vertical === paramB;
-      } else if (types === 2) {
-        return this.direction === paramA && this.horizontal === paramB;
-      } else {
-        return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-fab {
-  position: fixed;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-}
-
-.uni-cursor-point {
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-fab--active {
-  opacity: 1;
-}
-
-.uni-fab--leftBottom {
-  left: 5px;
-  bottom: 20px;
-  /* #ifdef H5 */
-  left: calc(5px + var(--window-left));
-  bottom: calc(20px + var(--window-bottom));
-  /* #endif */
-  padding: 10px;
-}
-
-.uni-fab--leftTop {
-  left: 5px;
-  top: 30px;
-  /* #ifdef H5 */
-  left: calc(5px + var(--window-left));
-  top: calc(30px + var(--window-top));
-  /* #endif */
-  padding: 10px;
-}
-
-.uni-fab--rightBottom {
-  right: 5px;
-  bottom: 20px;
-  /* #ifdef H5 */
-  right: calc(5px + var(--window-right));
-  bottom: calc(20px + var(--window-bottom));
-  /* #endif */
-  padding: 10px;
-}
-
-.uni-fab--rightTop {
-  right: 5px;
-  top: 30px;
-  /* #ifdef H5 */
-  right: calc(5px + var(--window-right));
-  top: calc(30px + var(--window-top));
-  /* #endif */
-  padding: 10px;
-}
-
-.uni-fab__circle {
-  position: fixed;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  align-items: center;
-  width: 55px;
-  height: 55px;
-  background-color: #3c3e49;
-  border-radius: 55px;
-  z-index: 11;
-}
-
-.uni-fab__circle--leftBottom {
-  left: 15px;
-  bottom: 30px;
-  /* #ifdef H5 */
-  left: calc(15px + var(--window-left));
-  bottom: calc(30px + var(--window-bottom));
-  /* #endif */
-}
-
-.uni-fab__circle--leftTop {
-  left: 15px;
-  top: 40px;
-  /* #ifdef H5 */
-  left: calc(15px + var(--window-left));
-  top: calc(40px + var(--window-top));
-  /* #endif */
-}
-
-.uni-fab__circle--rightBottom {
-  right: 15px;
-  bottom: 30px;
-  /* #ifdef H5 */
-  right: calc(15px + var(--window-right));
-  bottom: calc(30px + var(--window-bottom));
-  /* #endif */
-}
-
-.uni-fab__circle--rightTop {
-  right: 15px;
-  top: 40px;
-  /* #ifdef H5 */
-  right: calc(15px + var(--window-right));
-  top: calc(40px + var(--window-top));
-  /* #endif */
-}
-
-.uni-fab__circle--left {
-  left: 0;
-}
-
-.uni-fab__circle--right {
-  right: 0;
-}
-
-.uni-fab__circle--top {
-  top: 0;
-}
-
-.uni-fab__circle--bottom {
-  bottom: 0;
-}
-
-.uni-fab__plus {
-  font-weight: bold;
-}
-
-.fab-circle-v {
-  position: absolute;
-  width: 3px;
-  height: 31px;
-  left: 26px;
-  top: 12px;
-  background-color: white;
-  transform: rotate(0deg);
-  transition: transform 0.3s;
-}
-
-.fab-circle-h {
-  position: absolute;
-  width: 31px;
-  height: 3px;
-  left: 12px;
-  top: 26px;
-  background-color: white;
-  transform: rotate(0deg);
-  transition: transform 0.3s;
-}
-
-.uni-fab__plus--active {
-  transform: rotate(135deg);
-}
-
-.uni-fab__content {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  border-radius: 55px;
-  overflow: hidden;
-  transition-property: width, height;
-  transition-duration: 0.2s;
-  width: 55px;
-  border-color: #dddddd;
-  border-width: 1rpx;
-  border-style: solid;
-}
-
-.uni-fab__content--other-platform {
-  border-width: 0px;
-  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
-}
-
-.uni-fab__content--left {
-  justify-content: flex-start;
-}
-
-.uni-fab__content--right {
-  justify-content: flex-end;
-}
-
-.uni-fab__content--flexDirection {
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.uni-fab__content--flexDirectionStart {
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.uni-fab__content--flexDirectionEnd {
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.uni-fab__item {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 55px;
-  height: 55px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.uni-fab__item--active {
-  opacity: 1;
-}
-
-.uni-fab__item-image {
-  width: 25px;
-  height: 25px;
-  margin-bottom: 3px;
-}
-
-.uni-fab__item-text {
-  color: #ffffff;
-  font-size: 12px;
-}
-
-.uni-fab__item--first {
-  width: 55px;
-}
-</style>

package/ui-cv/cv-fav/cv-fav.vue

@@ -1,150 +0,0 @@
-<template>
-  <view
-    :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']"
-    :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
-    @click="onClick"
-    class="uni-fav"
-  >
-    <!-- #ifdef MP-ALIPAY -->
-    <view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
-      <cv-icon2 :color="fgColor" :style="{ color: checked ? fgColorChecked : fgColor }" size="14" type="star-filled" />
-    </view>
-    <!-- #endif -->
-    <!-- #ifndef MP-ALIPAY -->
-    <cv-icon2
-      :color="fgColor"
-      :style="{ color: checked ? fgColorChecked : fgColor }"
-      class="uni-fav-star"
-      size="14"
-      type="star-filled"
-      v-if="!checked && (star === true || star === 'true')"
-    />
-    <!-- #endif -->
-    <text :style="{ color: checked ? fgColorChecked : fgColor }" class="uni-fav-text">
-      {{ checked ? contentText.contentFav : contentText.contentDefault }}
-    </text>
-  </view>
-</template>
-
-<script>
-/**
- * Fav 收藏按钮
- * @description 用于收藏功能，可点击切换选中、不选中的状态
- * @tutorial https://ext.dcloud.net.cn/plugin?id=864
- * @property {Boolean} star = [true|false] 按钮是否带星星
- * @property {String} bgColor 未收藏时的背景色
- * @property {String} bgColorChecked 已收藏时的背景色
- * @property {String} fgColor 未收藏时的文字颜色
- * @property {String} fgColorChecked 已收藏时的文字颜色
- * @property {Boolean} circle = [true|false] 是否为圆角
- * @property {Boolean} checked = [true|false] 是否为已收藏
- * @property {Object} contentText = [true|false] 收藏按钮文字
- * @event {Function} click 点击 fav按钮触发事件
- * @example <uni-fav :checked="true"/>
- */
-export default {
-  name: 'cvFav',
-  // TODO 兼容 vue3，需要注册事件
-  emits: ['click'],
-  props: {
-    star: {
-      type: [Boolean, String],
-      default: true
-    },
-    bgColor: {
-      type: String,
-      default: '#eeeeee'
-    },
-    fgColor: {
-      type: String,
-      default: '#666666'
-    },
-    bgColorChecked: {
-      type: String,
-      default: '#007aff'
-    },
-    fgColorChecked: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    circle: {
-      type: [Boolean, String],
-      default: false
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    contentText: {
-      type: Object,
-      default() {
-        return {
-          contentDefault: '收藏',
-          contentFav: '已收藏'
-        };
-      }
-    }
-  },
-  watch: {
-    checked() {
-      if (uni.report) {
-        if (this.checked) {
-          uni.report('收藏', '收藏');
-        } else {
-          uni.report('取消收藏', '取消收藏');
-        }
-      }
-    }
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-fav {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 25px;
-  line-height: 25px;
-  text-align: center;
-  border-radius: 3px;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-fav--circle {
-  border-radius: 30px;
-}
-
-.uni-fav-star {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  height: 25px;
-  line-height: 24px;
-  margin-right: 3px;
-  align-items: center;
-  justify-content: center;
-}
-
-.uni-fav-text {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  height: 25px;
-  line-height: 25px;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-</style>