vdesign-ui 0.1.22 → 0.1.23

package/dist/components/radio/index.vue

@@ -5,15 +5,14 @@
             <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
         </span>
         <div class="vd-radio__label" v-if="$slots.default">
-            <p class="vd-radio__text">
+            <div class="vd-radio__text">
                 <slot></slot>
-            </p>
-            <p class="vd-radio__description" v-if="extra">{{ extra }}</p>
+            </div>
+            <!-- <p class="vd-radio__description" v-if="extra">{{ extra }}</p> -->
         </div>
     </label>
 
 
-    <!-- 传入文字小icon 不传文字大icon -->
     <label class="vd-radio vd-radio-button" :class="radioButtonClasses" v-else>
         <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
         <span class="vd-radio-button-text">
@@ -36,9 +35,9 @@ export default {
             type: Boolean,
             default: false
         },
-        extra: {
-            type: [String, Number, Boolean],
-        },
+        // extra: {
+        //     type: [String, Number, Boolean],
+        // },
         value: {
             type: [String, Number, Boolean],
             default: false

package/dist/components/radio/style.css

@@ -0,0 +1,213 @@
+.vd-radio {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.vd-radio__input {
+  position: relative;
+  margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+}
+.vd-radio__label {
+  flex: 1;
+}
+.vd-radio__text {
+  color: var(--color-check_radio-text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio__description {
+  line-height: 1;
+  margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
+  color: var(--color-check_radio-text_describe-default);
+  font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-b-r-fontWeight);
+}
+.vd-radio .vd-radio__icon {
+  display: block;
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+  position: relative;
+}
+.vd-radio .vd-radio__icon::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 3px;
+  border-radius: 50%;
+}
+.vd-radio__original {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  opacity: 0;
+}
+.vd-radio--checked .vd-radio__text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio--checked .vd-radio__icon::before {
+  border: 0 solid var(--color-check_radio-active);
+  border-width: 3px;
+}
+.vd-radio--checked .vd-radio__icon::after {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: " ";
+  background-color: var(--color-check_radio-active);
+}
+.vd-radio--disabled {
+  cursor: not-allowed;
+}
+.vd-radio--disabled .vd-radio__text {
+  color: var(--color-check_radio-text-disable);
+}
+.vd-radio--disabled .vd-radio__description {
+  color: var(--color-check_radio-text_describe-disable);
+}
+.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-active-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::after {
+  background-color: var(--color-check_radio-active-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group-card {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 12px;
+}
+.vd-radio-group-card .vd-radio-button-cell {
+  flex: 1;
+}
+.vd-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1;
+  width: 100%;
+}
+.vd-radio-button::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-radio_border-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 1px;
+}
+.vd-radio-button--large {
+  height: calc(var(--height-check_radio-radio_button_l) * 1px);
+}
+.vd-radio-button--large .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio-button--large::after {
+  border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
+}
+.vd-radio-button--medium {
+  height: calc(var(--height-check_radio-radio_button_m) * 1px);
+}
+.vd-radio-button--medium .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--medium::after {
+  border-radius: calc(var(--radius-check_radio-m) * 2px);
+}
+.vd-radio-button--small {
+  height: calc(var(--height-check_radio-radio_button_s) * 1px);
+}
+.vd-radio-button--small .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--small::after {
+  border-radius: calc(var(--radius-check_radio-s) * 2px);
+}
+.vd-radio-button--checked {
+  background-color: var(--color-check_radio-radio_button_bg-active);
+}
+.vd-radio-button--checked::after {
+  border-color: var(--color-check_radio-radio_border-active);
+  border-width: 2px;
+}
+.vd-radio-button--checked .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-active);
+}
+.vd-radio-button--checked.vd-radio-button--large .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--medium .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--small .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--disabled {
+  cursor: not-allowed;
+}
+.vd-radio-button--disabled .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group__card {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.vd-radio-group .vd-radio-button {
+  flex: 1;
+}

package/dist/components/radio/style.less

@@ -19,6 +19,11 @@
             width: calc(var(--icon-check_radio-sizing) * 1px);
             height: calc(var(--icon-check_radio-sizing) * 1px);
         }
+
+        &__label{
+            flex: 1;
+        }
+
         &__text {
             color: var(--color-check_radio-text-default);
             font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);

package/dist/components/upload/index.vue

@@ -1,220 +1,99 @@
 <template>
-  <div class="vd-upload" :class="{ 'vd-upload--block': (block && listData.length === 0) }">
+  <div class="vd-upload" :class="{ 'vd-upload--block': block }">
     <div class="vd-upload__wrapper">
       <div class="vd-upload__uploader" :class="{ 'vd-upload__uploader--text': text }">
-        <vd-icon name="icon_btn_photo" class="vd-upload__icon"></vd-icon>
+        <vd-icon :name="photo" class="vd-upload__icon"></vd-icon>
         <p class="vd-upload__text" v-if="text">{{ text }}</p>
-        <input type="file" class="vd-upload__input" accept="image/*,.pdf" :multiple="multiple" @change="onChange"
+        <input type="file" ref="input" class="vd-upload__input" :accept="accept" @change="onChange"
           :disabled="disabled">
       </div>
-      <div class="vd-upload__preview" v-for="item in listData" :key="item.id" :class="fileCls(item.type)">
-        <div class="vd-upload__preview-img" v-if="item.type.startsWith('image')" @click="onPreview(item)">
-          <img :src="item.url" />
-        </div>
-        <div class="vd-upload__preview-word" v-if="item.type === 'application/pdf'">PDF</div>
-        <div class="vd-upload__preview-delete" @click="onDelete($event, item)" v-if="deletable">
-          <vd-icon name="icon_btn_close" class="vd-upload__preview-delete-icon"></vd-icon>
-        </div>
-      </div>
-    </div>
-    <div class="vd-image-preview" v-if="isPreview" @click="closePreview">
-      <div class="vd-image-preview__item" v-for="item in listData" :key="item.id" v-show="curNum === item.id"><img
-          :src="item.url" /></div>
     </div>
   </div>
 </template>
 
 <script>
-const prefixCls = 'vd-upload';
 export default {
   name: 'vd-upload',
-  model: {
-    prop: 'fileList'
-  },
+  inheritAttrs: false,
+
   props: {
-    uploaded: {
-      type: Boolean,
-      default: false
-    },
-    preview: {
-      type: Boolean,
-      default: true
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    text: {
+    photo: {
       type: String,
-      default: ''
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    deletable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 文件读取前钩子函数
-     */
-    beforeRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件读取完钩子函数
-     */
-    afterRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件删除前钩子函数
-     */
-    beforeDelete: {
-      type: Function,
-      default: () => () => true
-    },
-    maxCount: {
-      type: Number,
-      default: 1000
+      default: 'icon_btn_photo'
+    },
+    text: String,
+    block: Boolean,
+    disabled: Boolean,
+    beforeRead: Function,
+    afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
     },
     maxSize: {
       type: Number,
-      default: 6 * 1024 * 1024
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      listData: this.fileList,
-      curNum: 1,
-      isPreview: false
-    }
-  },
-  watch: {
-    /**
-     * 监听列表数据
-     */
-    fileList: {
-      handler(value) {
-        this.listData = value
-      },
-      deep: true
+      default: Number.MAX_VALUE
     }
   },
+
   methods: {
-    fileCls(file) {
-      if (file === 'application/pdf') {
-        return [`${prefixCls}__preview--pdf`];
-      } else {
-        return [];
+    onChange(event) {
+      let { files } = event.target;
+      if (this.disabled || !files.length) {
+        return;
       }
-    },
-    onDelete(e, item) {
-      e.stopPropagation()
-      const { disabled, beforeDelete, listData } = this
-      /**
-       * 判断是否允许删除文件
-       */
-      if (!disabled && beforeDelete(item) !== false) {
-        /**
-         * 索引
-         */
-        let i = 0
-        /**
-         * 循环遍历数组定位下标位置
-         */
-        for (; i < listData.length; i++) {
-          /**
-           * 判断 id 是否相等
-           */
-          if (listData[i].id === item.id) break
-        }
-        /**
-         * 删除
-         */
-        listData.splice(i, 1)
-        this.$emit('input', listData)
-        this.$emit('on-change', listData)
+
+      files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+        return;
       }
-    },
-    onChange(e) {
-      const { beforeRead, afterRead, maxSize, maxCount, listData } = this
-      /**
-       * 获取不超过 maxCount 文件
-       */
-      const files = Object.values(e.target.files).slice(0, maxCount)
 
-      /**
-       * 判断是否允许读取文件
-       */
-      if (beforeRead(files) !== false) {
-        /**
-         * 循环遍历添加数据
-         */
-        const arr = []
-        files.forEach(elem => {
-          /**
-           * 判断大小是否小于或等于 maxSize
-           */
-          if (elem.size <= maxSize) {
-            /**
-             * 数组长度
-             */
-            const len = listData.length
-            /**
-             * 获取 id
-             */
-            const id = len === 0 ? 1 : listData[len - 1].id + 1
-            /**
-             * 创建 blob 预览图片地址
-             */
-            const url = window.URL.createObjectURL(elem)
+      if (Array.isArray(files)) {
+        Promise.all(files.map(this.readFile)).then(contents => {
+          let oversize = false;
+          const payload = files.map((file, index) => {
+            if (file.size > this.maxSize) {
+              oversize = true;
+            }
 
-            const type = e.target.files[0].type;
-            /**
-             * 添加进数组
-             */
-            listData.push({ id, url, type })
-            arr.push(elem)
-          }
-        })
-        /**
-         * 符合规则的图片数组
-         */
-        if (arr.length > 0) {
-          afterRead(arr)
-          this.$emit('change', listData)
-          this.$emit('num-changed', this.curNum);
-        }
-      }
-    },
-    onPreview({ id }) {
-      const { disabled, preview } = this
-      /**
-       * 判断是否允许预览
-       */
-      if (!disabled && preview) {
-        this.curNum = id
-        /**
-         * 打开图片预览
-         */
-        this.isPreview = true
+            return {
+              file: files[index],
+              content: contents[index]
+            };
+          });
+
+          this.onAfterRead(payload, oversize);
+        });
+      } else {
+        this.readFile(files).then(content => {
+          this.onAfterRead(
+            { file: files, content },
+            files.size > this.maxSize
+          );
+        });
       }
     },
-    closePreview() {
-      this.isPreview = false
+
+    readFile(file) {
+      return new Promise(resolve => {
+        const reader = new FileReader();
+
+        reader.onload = event => {
+          resolve(event.target.result);
+        };
+        reader.readAsDataURL(file);
+
+      });
     },
+
+    onAfterRead(files, oversize) {
+      if (oversize) {
+        this.$emit('oversize', files);
+      } else {
+        this.afterRead && this.afterRead(files);
+        this.$refs.input && (this.$refs.input.value = '');
+      }
+    }
   }
 }
 </script>