vue-element-ui-x 1.0.2 → 1.0.4

package/src/components/FilesCard/src/main.vue

@@ -50,9 +50,9 @@
             ref="imgRef"
             class="el-x-filescard-img"
             :src="_previewImgUrl"
-            :preview-src-list="_previewImgUrl ? [_previewImgUrl] : []"
+            :preview-src-list="imgPreview && _previewImgUrl ? [_previewImgUrl] : []"
             fit="cover"
-            @click="handlePreviewAction('self')"
+            @click="imgPreview ? handlePreviewAction('self') : null"
           />
 
           <!-- 无预览地址时显示默认图标 -->
@@ -338,6 +338,12 @@
       },
     },
     watch: {
+      name: {
+        handler() {
+          this.parseFileName();
+        },
+        immediate: true,
+      },
       imgFile: {
         handler: async function (newFile) {
           if (newFile) {
@@ -358,23 +364,19 @@
         immediate: true,
       },
     },
-    mounted() {
-      this.parseFileName();
-    },
+    mounted() {},
     methods: {
       handleDelete() {
-        this.$emit('delete', {
-          ...this.propsData,
-        });
+        this.$emit('delete', { ...this.propsData });
       },
       handlePreviewAction(type) {
-        if (this.imgPreview && this.$refs.imgRef && this._previewImgUrl && type === 'mask') {
+        if (!this.imgPreview) return;
+
+        if (this.$refs.imgRef && this._previewImgUrl && type === 'mask') {
           this.$refs.imgRef.clickHandler();
         }
         if (type === 'self') {
-          this.$emit('image-preview', {
-            ...this.propsData,
-          });
+          this.$emit('image-preview', { ...this.propsData });
         }
       },
       parseFileName() {

package/src/components/FilesCard/src/options.js

@@ -1,18 +1,18 @@
-export const colorMap = {
-  word: '#0078D4',
-  excel: '#00C851',
-  ppt: '#FF5722',
-  pdf: '#E53935',
-  txt: '#424242',
-  mark: '#6C6C6C',
-  image: '#FF80AB',
-  audio: '#FF7878',
-  video: '#8B72F7',
-  three: '#29B6F6',
-  code: '#00008B',
-  database: '#FF9800',
-  link: '#2962FF',
-  zip: '#673AB7',
-  file: '#FFC757',
-  unknown: '#6E9DA4',
-};
+export const colorMap = {
+  word: '#0078D4',
+  excel: '#00C851',
+  ppt: '#FF5722',
+  pdf: '#E53935',
+  txt: '#424242',
+  mark: '#6C6C6C',
+  image: '#FF80AB',
+  audio: '#FF7878',
+  video: '#8B72F7',
+  three: '#29B6F6',
+  code: '#00008B',
+  database: '#FF9800',
+  link: '#2962FF',
+  zip: '#673AB7',
+  file: '#FFC757',
+  unknown: '#6E9DA4',
+};

package/src/components/Prompts/index.js

@@ -1,8 +1,8 @@
-import ElXPrompts from './src/main.vue';
-
-/* istanbul ignore next */
-ElXPrompts.install = function (Vue) {
-  Vue.component(ElXPrompts.name, ElXPrompts);
-};
-
-export default ElXPrompts;
+import ElXPrompts from './src/main.vue';
+
+/* istanbul ignore next */
+ElXPrompts.install = function (Vue) {
+  Vue.component(ElXPrompts.name, ElXPrompts);
+};
+
+export default ElXPrompts;

package/src/components/Sender/index.js

@@ -1,8 +1,8 @@
-import ElXSender from './src/main.vue';
-
-/* istanbul ignore next */
-ElXSender.install = function (Vue) {
-  Vue.component(ElXSender.name, ElXSender);
-};
-
-export default ElXSender;
+import ElXSender from './src/main.vue';
+
+/* istanbul ignore next */
+ElXSender.install = function (Vue) {
+  Vue.component(ElXSender.name, ElXSender);
+};
+
+export default ElXSender;

package/src/components/Sender/src/components/ClearButton.vue

@@ -1,28 +1,28 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      @click="$emit('clear')"
-      size="small"
-    >
-      <i class="el-icon-brush"></i>
-    </el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'ClearButton',
-  };
-</script>
-
-<style scoped lang="scss">
-  .el-x-send-button {
-    .el-button {
-      .el-icon-brush {
-        // 旋转180
-        transform: rotate(180deg);
-      }
-    }
-  }
-</style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      @click="$emit('clear')"
+      size="small"
+    >
+      <i class="el-icon-brush"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ClearButton',
+  };
+</script>
+
+<style scoped lang="scss">
+  .el-x-send-button {
+    .el-button {
+      .el-icon-brush {
+        // 旋转180
+        transform: rotate(180deg);
+      }
+    }
+  }
+</style>

package/src/components/Sender/src/components/Loading.vue

@@ -1,53 +1,53 @@
-<template>
-  <svg
-    viewBox="0 0 1000 1000"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <title>Loading</title>
-    <rect
-      fill="currentColor"
-      height="250"
-      rx="24"
-      ry="24"
-      width="250"
-      x="375"
-      y="375"
-    />
-    <circle
-      cx="500"
-      cy="500"
-      fill="none"
-      r="450"
-      stroke="currentColor"
-      stroke-width="100"
-      opacity="0.45"
-    />
-    <circle
-      cx="500"
-      cy="500"
-      fill="none"
-      r="450"
-      stroke="currentColor"
-      stroke-width="100"
-      stroke-dasharray="600 9999999"
-    >
-      <animateTransform
-        attributeName="transform"
-        dur="1s"
-        from="0 500 500"
-        repeatCount="indefinite"
-        to="360 500 500"
-        type="rotate"
-      />
-    </circle>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'Loading',
-  };
-</script>
-
-<style scoped></style>
+<template>
+  <svg
+    viewBox="0 0 1000 1000"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Loading</title>
+    <rect
+      fill="currentColor"
+      height="250"
+      rx="24"
+      ry="24"
+      width="250"
+      x="375"
+      y="375"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      opacity="0.45"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      stroke-dasharray="600 9999999"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="1s"
+        from="0 500 500"
+        repeatCount="indefinite"
+        to="360 500 500"
+        type="rotate"
+      />
+    </circle>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'Loading',
+  };
+</script>
+
+<style scoped></style>

package/src/components/Sender/src/components/SendButton.vue

@@ -1,26 +1,26 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      :disabled="disabled"
-      @click="$emit('submit')"
-      size="small"
-    >
-      <i class="el-icon-top"></i>
-    </el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'SendButton',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      :disabled="disabled"
+      @click="$emit('submit')"
+      size="small"
+    >
+      <i class="el-icon-top"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SendButton',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechButton.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      size="small"
-      @click="onClick"
-    >
-      <i class="el-icon-microphone"></i>
-    </el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'SpeechButton',
-    methods: {
-      onClick() {
-        this.$emit('click');
-      },
-    },
-  };
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      size="small"
+      @click="onClick"
+    >
+      <i class="el-icon-microphone"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechButton',
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechLoading.vue

@@ -1,87 +1,87 @@
-<template>
-  <svg
-    :class="className"
-    color="currentColor"
-    :viewBox="`0 0 ${SIZE} ${SIZE}`"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <title>Speech Recording</title>
-
-    <rect
-      v-for="(item, index) in rects"
-      :key="index"
-      fill="currentColor"
-      :rx="RECT_RADIUS"
-      :ry="RECT_RADIUS"
-      :height="RECT_HEIGHT_MIN"
-      :width="RECT_WIDTH"
-      :x="item.x"
-      :y="item.yMin"
-    >
-      <animate
-        attributeName="height"
-        :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
-        keyTimes="0; 0.5; 1"
-        :dur="`${DURATION}s`"
-        :begin="`${(DURATION / COUNT) * index}s`"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
-        keyTimes="0; 0.5; 1"
-        :dur="`${DURATION}s`"
-        :begin="`${(DURATION / COUNT) * index}s`"
-        repeatCount="indefinite"
-      />
-    </rect>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'SpeechLoading',
-
-    props: {
-      className: {
-        type: String,
-        default: '',
-      },
-    },
-
-    data() {
-      return {
-        // 定义常量
-        SIZE: 1000,
-        COUNT: 4,
-        RECT_WIDTH: 140,
-        RECT_RADIUS: 70, // RECT_WIDTH / 2
-        RECT_HEIGHT_MIN: 250,
-        RECT_HEIGHT_MAX: 500,
-        DURATION: 0.8,
-      };
-    },
-
-    computed: {
-      // 计算矩形的位置和高度范围
-      rects() {
-        const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
-        return Array.from({
-          length: this.COUNT,
-        }).map((_, index) => {
-          const x = index * (dest + this.RECT_WIDTH);
-          const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
-          const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
-          return {
-            x,
-            yMin,
-            yMax,
-          };
-        });
-      },
-    },
-  };
-</script>
-
-<style scoped></style>
+<template>
+  <svg
+    :class="className"
+    color="currentColor"
+    :viewBox="`0 0 ${SIZE} ${SIZE}`"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Speech Recording</title>
+
+    <rect
+      v-for="(item, index) in rects"
+      :key="index"
+      fill="currentColor"
+      :rx="RECT_RADIUS"
+      :ry="RECT_RADIUS"
+      :height="RECT_HEIGHT_MIN"
+      :width="RECT_WIDTH"
+      :x="item.x"
+      :y="item.yMin"
+    >
+      <animate
+        attributeName="height"
+        :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechLoading',
+
+    props: {
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+
+    data() {
+      return {
+        // 定义常量
+        SIZE: 1000,
+        COUNT: 4,
+        RECT_WIDTH: 140,
+        RECT_RADIUS: 70, // RECT_WIDTH / 2
+        RECT_HEIGHT_MIN: 250,
+        RECT_HEIGHT_MAX: 500,
+        DURATION: 0.8,
+      };
+    },
+
+    computed: {
+      // 计算矩形的位置和高度范围
+      rects() {
+        const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
+        return Array.from({
+          length: this.COUNT,
+        }).map((_, index) => {
+          const x = index * (dest + this.RECT_WIDTH);
+          const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
+          const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
+          return {
+            x,
+            yMin,
+            yMax,
+          };
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped></style>