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

package/ui-cv/cv-checkbox-opt-tag/cv-checkbox-opt-tag.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="cv-checkbox-opt-tag">
+    <label class="cv-checkbox-opt__label" :class="localChecked ? 'checkbox-checked' : ''">
+      <checkbox class="cv-checkbox-opt__checkbox" :value="localVal" :checked="localChecked" />
+      <view>
+        <slot>{{ label }}</slot>
+      </view>
+    </label>
+  </view>
+</template>
+<script>
+export default {
+  name: 'cvCheckboxOptTag',
+  props: {
+    label: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      localVal: '',
+      localChecked: false,
+      parentObj: null
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localVal = String(newVal);
+    },
+    checked(newVal) {
+      this.localChecked = newVal;
+    },
+    'parentObj.value'(newVal) {
+      if (Object.prototype.toString.call(newVal) == '[object Array]') {
+        this.localChecked = newVal.includes(this.localVal) ? true : false;
+      }
+    }
+  },
+  created() {
+    this.localVal = String(this.value);
+    this.localChecked = this.checked;
+  },
+  mounted() {
+    this.parentObj = this.getParent();
+  },
+  methods: {
+    funcOnClick() {
+      // let parentObj = this.getParent();
+      // console.log(parentObj.$children);
+      // let { value } = parentObj;
+      // console.log(value, this.localVal);
+      // this.localChecked = newVal == this.value ? true : false;
+    },
+    /**
+     * 获取父元素实例
+     */
+    getParent(name = 'cvCheckboxGroup') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    }
+  }
+};
+</script>
+<style>
+.cv-checkbox-opt-tag {
+  display: inline-flex;
+  min-height: 25px;
+}
+.cv-checkbox-opt__label {
+  margin: 5px 0;
+  height: 25px;
+  line-height: 25px;
+  float: left;
+  display: flex;
+  margin-right: 10px;
+  border: solid 0.5px #f0f4f7;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 10px;
+  border-radius: 3px;
+  background-color: #f0f4f7;
+  font-size: 14px;
+}
+.cv-checkbox-opt__label.checkbox-checked {
+  color: #4292cc;
+  border-color: #4292cc;
+  background-color: #ddeffd;
+}
+.cv-checkbox-opt__checkbox {
+  display: none;
+  transform: scale(0.7);
+}
+</style>

package/ui-cv/cv-code-sms/cv-code-sms.vue

@@ -1,41 +1,30 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-  >
-    <view class="cv-code-area">
-      <view class="cv-code-input-area">
-        <input
-          class="cv-code-input-item"
-          placeholder-class="cv-code-input-item-placeholder"
-          v-model="localVal"
-          type="number"
-          :maxlength="maxlength"
-          :placeholder="diyPlaceholder"
-          @input="updateInput"
-        />
-      </view>
-      <view class="cv-code-button-area">
-        <button
-          class="cv-code-button-item"
-          :class="btnDisabled ? 'cv-code-button-wait' : ''"
-          :disabled="btnDisabled"
-          @tap="getSmsCode"
-        >
-          {{ btnText }}
-        </button>
-      </view>
+  <view class="cv-code-area">
+    <view class="cv-code-input-area">
+      <input
+        class="cv-code-input-item"
+        placeholder-class="cv-code-input-item-placeholder"
+        v-model="localVal"
+        type="number"
+        :maxlength="maxlength"
+        :placeholder="diyPlaceholder"
+        @input="funcOnInput"
+      />
     </view>
-  </cv-form-item>
+    <view class="cv-code-button-area">
+      <button
+        class="cv-code-button-item"
+        :class="btnDisabled ? 'cv-code-button-wait' : ''"
+        :disabled="btnDisabled"
+        @tap="getSmsCode"
+      >
+        {{ btnText }}
+      </button>
+    </view>
+  </view>
 </template>
 <script>
-import MixinsCommon from '../mixins/mixins-common.js';
 export default {
-  mixins: [MixinsCommon],
   name: 'cvCodeSms',
   inject: {
     cvFormGroup: {
@@ -57,14 +46,6 @@ export default {
       type: [Number, String],
       default: ''
     },
-    message: {
-      type: String,
-      default: ''
-    },
-    messageDisplay: {
-      type: Boolean,
-      default: false
-    },
     mobile: {
       type: [Number, String],
       default: ''
@@ -202,7 +183,7 @@ export default {
         }
       }, 100);
     },
-    updateInput(e) {
+    funcOnInput(e) {
       this.$emit('input', this.localVal);
     }
   }

package/ui-cv/cv-dialog-bottom/cv-dialog-bottom.vue

@@ -30,7 +30,7 @@ export default {
   data() {
     return {};
   },
-  created: function () {},
+  created() {},
   methods: {
     confirm() {
       this.onConfirm(true);

package/ui-cv/cv-dialog-full/cv-dialog-full.vue

@@ -28,7 +28,7 @@ export default {
   data() {
     return {};
   },
-  created: function () {},
+  created() {},
   methods: {
     confirm() {
       this.onConfirm(true);

package/ui-cv/cv-dialog-loading/cv-dialog-loading.vue

@@ -19,11 +19,11 @@ export default {
       default: false
     },
     img: {
-      type: String,
+      type: [String],
       default: '/static/logo.png'
     },
     content: {
-      type: String,
+      type: [String],
       default: '加载中...'
     }
   },
@@ -31,7 +31,7 @@ export default {
   data() {
     return {};
   },
-  created: function () {},
+  created() {},
   methods: {}
 };
 </script>

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

@@ -0,0 +1,185 @@
+<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-uni/uni-drawer → ui-cv/cv-drawer}/keypress.js

@@ -7,7 +7,7 @@ export default {
       default: false
     }
   },
-  mounted () {
+  mounted() {
     const keyNames = {
       esc: ['Esc', 'Escape'],
       tab: 'Tab',
@@ -18,28 +18,28 @@ export default {
       right: ['Right', 'ArrowRight'],
       down: ['Down', 'ArrowDown'],
       delete: ['Backspace', 'Delete', 'Del']
-    }
+    };
     const listener = ($event) => {
       if (this.disable) {
-        return
+        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))
-      })
+      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)
+          this.$emit(keyName, {});
+        }, 0);
       }
-    }
-    document.addEventListener('keyup', listener)
+    };
+    document.addEventListener('keyup', listener);
     // this.$once('hook:beforeDestroy', () => {
     //   document.removeEventListener('keyup', listener)
     // })
   },
-	render: () => {}
-}
+  render: () => {}
+};
 // #endif

package/ui-cv/cv-editor-parse/readme.md

@@ -64,9 +64,8 @@ export default {
   }
 }
 </script>
-
 <style>
-@import url("@/components/u-parse/u-parse.css");
+@import url("@/components/cv-editor-parse/cv-editor-parse.css");
 </style>
 ```
 
@@ -81,7 +80,7 @@ npm install marked
 
 ``` js
 import marked from 'marked'
-import uParse from '@/components/u-parse/u-parse.vue'
+import uParse from '@/components/cv-editor-parse/cv-editor-parse.vue'
 
 export default {
   components: {

package/ui-cv/{cv-editor/cv-editor.vue → cv-editor-quill/cv-editor-quill.vue}

@@ -1,14 +1,5 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :label="label"
-    :must="must"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    layout="col"
-    :input-value="localVal"
-  >
+  <view>
     <view class="cv-editor">
       <view class="toolbar" @tap="format">
         <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
@@ -149,14 +140,12 @@
       ></editor>
     </view>
     <helang-compress ref="helangCompress"></helang-compress>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
-import MixinsCommon from '../mixins/mixins-common.js';
 import helangCompress from './compressImage';
 export default {
-  mixins: [MixinsCommon],
   components: {
     helangCompress
   },
@@ -177,15 +166,6 @@ export default {
       type: String,
       default: ''
     },
-
-    message: {
-      type: String,
-      default: ''
-    },
-    messageDisplay: {
-      type: Boolean,
-      default: false
-    },
     placeholder: {
       type: String,
       default() {
@@ -218,7 +198,7 @@ export default {
       this.setContents();
     }
   },
-  created: function () {
+  created() {
     this.localVal = this.value;
     /* uni.loadFontFace({
       family: 'Pacifico',