@10yun/cv-mobile-ui 0.4.1 → 0.4.3

package/ui-cv/cv-badge/uni-badge.vue

@@ -1,249 +0,0 @@
-<template>
-  <view class="uni-badge--x">
-    <slot />
-    <text
-      v-if="text"
-      :class="classNames"
-      :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
-      class="uni-badge"
-      @click="onClick()"
-    >
-      {{ displayValue }}
-    </text>
-  </view>
-</template>
-
-<script>
-/**
- * Badge 数字角标
- * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
- * @tutorial https://ext.dcloud.net.cn/plugin?id=21
- * @property {String} text 角标内容
- * @property {String} type = [default|primary|success|warning|error] 颜色类型
- * 	@value default 灰色
- * 	@value primary 蓝色
- * 	@value success 绿色
- * 	@value warning 黄色
- * 	@value error 红色
- * @property {String} size = [normal|small] Badge 大小
- * 	@value normal 一般尺寸
- * 	@value small 小尺寸
- * @property {String} inverted = [true|false] 是否无需背景颜色
- * @event {Function} click 点击 Badge 触发事件
- * @example <uni-badge text="1"></uni-badge>
- */
-export default {
-  name: 'UniBadge',
-  emits: ['click'],
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    },
-    inverted: {
-      type: Boolean,
-      default: false
-    },
-    isDot: {
-      type: Boolean,
-      default: false
-    },
-    maxNum: {
-      type: Number,
-      default: 99
-    },
-    absolute: {
-      type: String,
-      default: ''
-    },
-    offset: {
-      type: Array,
-      default() {
-        return [0, 0];
-      }
-    },
-    text: {
-      type: [String, Number],
-      default: ''
-    },
-    size: {
-      type: String,
-      default: 'normal'
-    },
-    customStyle: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    width() {
-      return String(this.text).length * 8 + 12;
-    },
-    classNames() {
-      const { inverted, type, size, absolute } = this;
-      return [
-        inverted ? 'uni-badge--' + type + '-inverted' : '',
-        'uni-badge--' + type,
-        'uni-badge--' + size,
-        absolute ? 'uni-badge--absolute' : ''
-      ];
-    },
-    positionStyle() {
-      if (!this.absolute) return {};
-      let w = this.width / 2,
-        h = 10;
-      if (this.isDot) {
-        w = 5;
-        h = 5;
-      }
-      const x = `${-w + this.offset[0]}px`;
-      const y = `${-h + this.offset[1]}px`;
-
-      const whiteList = {
-        rightTop: {
-          right: x,
-          top: y
-        },
-        rightBottom: {
-          right: x,
-          bottom: y
-        },
-        leftBottom: {
-          left: x,
-          bottom: y
-        },
-        leftTop: {
-          left: x,
-          top: y
-        }
-      };
-      const match = whiteList[this.absolute];
-      return match ? match : whiteList['rightTop'];
-    },
-    badgeWidth() {
-      return {
-        width: `${this.width}px`
-      };
-    },
-    dotStyle() {
-      if (!this.isDot) return {};
-      return {
-        width: '10px',
-        height: '10px',
-        borderRadius: '10px'
-      };
-    },
-    displayValue() {
-      const { isDot, text, maxNum } = this;
-      return isDot ? '' : Number(text) > maxNum ? `${maxNum}+` : text;
-    }
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-badge--x {
-  /* #ifdef APP-NVUE */
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  display: inline-block;
-  /* #endif */
-  position: relative;
-}
-
-.uni-badge--absolute {
-  position: absolute;
-}
-
-.uni-badge {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  /* #endif */
-  justify-content: center;
-  flex-direction: row;
-  height: 20px;
-  line-height: 20px;
-  color: #333;
-  border-radius: 100px;
-  background-color: #f1f1f1;
-  background-color: transparent;
-  text-align: center;
-  font-family: 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 12px;
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-badge--inverted {
-  padding: 0 5px 0 0;
-  color: #f1f1f1;
-}
-
-.uni-badge--default {
-  color: #333;
-  background-color: #f1f1f1;
-}
-
-.uni-badge--default-inverted {
-  color: #999;
-  background-color: transparent;
-}
-
-.uni-badge--primary {
-  color: #fff;
-  background-color: #007aff;
-}
-
-.uni-badge--primary-inverted {
-  color: #007aff;
-  background-color: transparent;
-}
-
-.uni-badge--success {
-  color: #fff;
-  background-color: #4cd964;
-}
-
-.uni-badge--success-inverted {
-  color: #4cd964;
-  background-color: transparent;
-}
-
-.uni-badge--warning {
-  color: #fff;
-  background-color: #f0ad4e;
-}
-
-.uni-badge--warning-inverted {
-  color: #f0ad4e;
-  background-color: transparent;
-}
-
-.uni-badge--error {
-  color: #fff;
-  background-color: #dd524d;
-}
-
-.uni-badge--error-inverted {
-  color: #dd524d;
-  background-color: transparent;
-}
-
-.uni-badge--small {
-  transform: scale(0.8);
-  transform-origin: center center;
-}
-</style>

package/ui-cv/cv-drawer/cv-drawer.vue

@@ -1,185 +0,0 @@
-<template>
-  <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
-    <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
-    <view
-      class="uni-drawer__content"
-      :class="{ 'uni-drawer--right': rightMode, 'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer }"
-      :style="{ width: drawerWidth + 'px' }"
-    >
-      <slot />
-    </view>
-    <!-- #ifdef H5 -->
-    <keypress @esc="close('mask')" />
-    <!-- #endif -->
-  </view>
-</template>
-
-<script>
-// #ifdef H5
-import keypress from './keypress.js';
-// #endif
-/**
- * Drawer 抽屉
- * @description 抽屉侧滑菜单
- * @tutorial https://ext.dcloud.net.cn/plugin?id=26
- * @property {Boolean} mask = [true | false] 是否显示遮罩
- * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
- * @property {Boolean} mode = [left | right] Drawer 滑出位置
- * 	@value left 从左侧滑出
- * 	@value right 从右侧侧滑出
- * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
- * @event {Function} close 组件关闭时触发事件
- */
-export default {
-  name: 'cvDrawer',
-  components: {
-    // #ifdef H5
-    keypress
-    // #endif
-  },
-  emits: ['change'],
-  props: {
-    /**
-     * 显示模式（左、右），只在初始化生效
-     */
-    mode: {
-      type: String,
-      default: ''
-    },
-    /**
-     * 蒙层显示状态
-     */
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 遮罩是否可点击关闭
-     */
-    maskClick: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 抽屉宽度
-     */
-    width: {
-      type: Number,
-      default: 220
-    }
-  },
-  data() {
-    return {
-      visibleSync: false,
-      showDrawer: false,
-      rightMode: false,
-      watchTimer: null,
-      drawerWidth: 220
-    };
-  },
-  created() {
-    // #ifndef APP-NVUE
-    this.drawerWidth = this.width;
-    // #endif
-    this.rightMode = this.mode === 'right';
-  },
-  methods: {
-    clear() {},
-    close(type) {
-      // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
-      if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return;
-      this._change('showDrawer', 'visibleSync', false);
-    },
-    open() {
-      // fixed by mehaotian 处理重复点击打开的事件
-      if (this.visibleSync) return;
-      this._change('visibleSync', 'showDrawer', true);
-    },
-    _change(param1, param2, status) {
-      this[param1] = status;
-      if (this.watchTimer) {
-        clearTimeout(this.watchTimer);
-      }
-      this.watchTimer = setTimeout(
-        () => {
-          this[param2] = status;
-          this.$emit('change', status);
-        },
-        status ? 50 : 300
-      );
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-drawer {
-  /* #ifndef APP-NVUE */
-  display: block;
-  /* #endif */
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  z-index: 999;
-}
-
-.uni-drawer__content {
-  /* #ifndef APP-NVUE */
-  display: block;
-  /* #endif */
-  position: absolute;
-  top: 0;
-  width: 220px;
-  bottom: 0;
-  background-color: #ffffff;
-  transition: transform 0.3s ease;
-}
-
-.uni-drawer--left {
-  left: 0;
-  /* #ifdef APP-NVUE */
-  transform: translateX(-220px);
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  transform: translateX(-100%);
-  /* #endif */
-}
-
-.uni-drawer--right {
-  right: 0;
-  /* #ifdef APP-NVUE */
-  transform: translateX(220px);
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  transform: translateX(100%);
-  /* #endif */
-}
-
-.uni-drawer__content--visible {
-  transform: translateX(0px);
-}
-
-.uni-drawer__mask {
-  /* #ifndef APP-NVUE */
-  display: block;
-  /* #endif */
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  transition: opacity 0.3s;
-}
-
-.uni-drawer__mask--visible {
-  /* #ifndef APP-NVUE */
-  display: block;
-  /* #endif */
-  opacity: 1;
-}
-</style>

package/ui-cv/cv-drawer/keypress.js

@@ -1,45 +0,0 @@
-// #ifdef H5
-export default {
-  name: 'Keypress',
-  props: {
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted() {
-    const keyNames = {
-      esc: ['Esc', 'Escape'],
-      tab: 'Tab',
-      enter: 'Enter',
-      space: [' ', 'Spacebar'],
-      up: ['Up', 'ArrowUp'],
-      left: ['Left', 'ArrowLeft'],
-      right: ['Right', 'ArrowRight'],
-      down: ['Down', 'ArrowDown'],
-      delete: ['Backspace', 'Delete', 'Del']
-    };
-    const listener = ($event) => {
-      if (this.disable) {
-        return;
-      }
-      const keyName = Object.keys(keyNames).find((key) => {
-        const keyName = $event.key;
-        const value = keyNames[key];
-        return value === keyName || (Array.isArray(value) && value.includes(keyName));
-      });
-      if (keyName) {
-        // 避免和其他按键事件冲突
-        setTimeout(() => {
-          this.$emit(keyName, {});
-        }, 0);
-      }
-    };
-    document.addEventListener('keyup', listener);
-    // this.$once('hook:beforeDestroy', () => {
-    //   document.removeEventListener('keyup', listener)
-    // })
-  },
-  render: () => {}
-};
-// #endif