vue-element-ui-x 0.2.0 → 0.2.2

package/src/components/Prompts/src/main.vue

@@ -1,248 +1,248 @@
-<template>
-  <div
-    :class="['el-x-prompts', { 'el-x-prompts-rtl': direction === 'rtl' }, rootClassName]"
-    :style="customStyle"
-  >
-    <!-- 标题 -->
-    <h5
-      v-if="title"
-      class="el-x-prompts-title"
-      :class="[classNames.title]"
-      :style="titleStyle"
-    >
-      {{ title }}
-    </h5>
-
-    <!-- 提示列表 -->
-    <div
-      :class="[
-        'el-x-prompts-list',
-        {
-          'el-x-prompts-list-wrap': wrap,
-          'el-x-prompts-list-vertical': vertical,
-        },
-        classNames.list,
-      ]"
-      :style="listStyle"
-    >
-      <div
-        v-for="(info, index) in items"
-        :key="info.key || `key_${index}`"
-        :class="[
-          'el-x-prompts-item',
-          {
-            'el-x-prompts-item-disabled': info.disabled,
-            'el-x-prompts-item-has-nest': hasChildren(info),
-          },
-          classNames.item,
-        ]"
-        :style="itemStyle"
-        @click="handleItemClick(info)"
-      >
-        <!-- 图标 -->
-        <div
-          v-if="info.icon"
-          class="el-x-prompts-icon"
-        >
-          <slot
-            name="icon"
-            :item="info"
-          >
-            <i :class="info.icon"></i>
-          </slot>
-        </div>
-
-        <!-- 内容 -->
-        <div
-          :class="['el-x-prompts-content', classNames.itemContent]"
-          :style="itemContentStyle"
-        >
-          <!-- 标签 -->
-          <h6
-            v-if="info.label"
-            class="el-x-prompts-label"
-          >
-            <slot
-              name="label"
-              :item="info"
-              >{{ info.label }}</slot
-            >
-          </h6>
-
-          <!-- 描述 -->
-          <p
-            v-if="info.description"
-            class="el-x-prompts-desc"
-          >
-            <slot
-              name="description"
-              :item="info"
-              >{{ info.description }}</slot
-            >
-          </p>
-
-          <!-- 子项 -->
-          <component
-            :is="$options.name"
-            v-if="hasChildren(info)"
-            class="el-x-prompts-nested"
-            :items="info.children"
-            :vertical="true"
-            @on-item-click="$emit('on-item-click', $event)"
-            :class-names="{
-              list: classNames.subList,
-              item: classNames.subItem,
-            }"
-            :styles="{
-              list: styles.subList,
-              item: styles.subItem,
-            }"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'ElXPrompts',
-
-    props: {
-      /**
-       * 包含多个提示项的列表
-       */
-      items: {
-        type: Array,
-        default: () => [],
-      },
-
-      /**
-       * 显示在提示列表顶部的标题
-       */
-      title: {
-        type: String,
-        default: '',
-      },
-
-      /**
-       * Item 提示项被点击时的回调函数
-       */
-      onItemClick: {
-        type: Function,
-        default: null,
-      },
-
-      /**
-       * 提示列表是否垂直排列
-       */
-      vertical: {
-        type: Boolean,
-        default: false,
-      },
-
-      /**
-       * 提示列表是否换行
-       */
-      wrap: {
-        type: Boolean,
-        default: false,
-      },
-
-      /**
-       * 自定义样式，用于各个提示项的不同部分
-       */
-      styles: {
-        type: Object,
-        default: () => ({}),
-      },
-
-      /**
-       * 自定义样式类名，用于各个提示项的不同部分
-       */
-      classNames: {
-        type: Object,
-        default: () => ({}),
-      },
-
-      /**
-       * 根节点的样式类名
-       */
-      rootClassName: {
-        type: String,
-        default: '',
-      },
-
-      /**
-       * 自定义样式
-       */
-      customStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-
-      /**
-       * 方向
-       */
-      direction: {
-        type: String,
-        default: 'ltr',
-      },
-    },
-
-    computed: {
-      titleStyle() {
-        return {
-          ...this.styles.title,
-        };
-      },
-
-      listStyle() {
-        return {
-          ...this.styles.list,
-        };
-      },
-
-      itemStyle() {
-        return {
-          ...this.styles.item,
-        };
-      },
-
-      itemContentStyle() {
-        return {
-          ...this.styles.itemContent,
-        };
-      },
-    },
-
-    methods: {
-      hasChildren(item) {
-        return item.children && item.children.length > 0;
-      },
-
-      handleItemClick(info) {
-        if (info.disabled) {
-          return;
-        }
-        // 如果有子项，不触发点击事件
-        if (this.hasChildren(info)) {
-          return;
-        }
-        this.$emit('on-item-click', {
-          data: info,
-        });
-        // 向后兼容性
-        if (this.onItemClick) {
-          this.onItemClick({
-            data: info,
-          });
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../styles/Prompts.scss';
-</style>
+<template>
+  <div
+    :class="['el-x-prompts', { 'el-x-prompts-rtl': direction === 'rtl' }, rootClassName]"
+    :style="customStyle"
+  >
+    <!-- 标题 -->
+    <h5
+      v-if="title"
+      class="el-x-prompts-title"
+      :class="[classNames.title]"
+      :style="titleStyle"
+    >
+      {{ title }}
+    </h5>
+
+    <!-- 提示列表 -->
+    <div
+      :class="[
+        'el-x-prompts-list',
+        {
+          'el-x-prompts-list-wrap': wrap,
+          'el-x-prompts-list-vertical': vertical,
+        },
+        classNames.list,
+      ]"
+      :style="listStyle"
+    >
+      <div
+        v-for="(info, index) in items"
+        :key="info.key || `key_${index}`"
+        :class="[
+          'el-x-prompts-item',
+          {
+            'el-x-prompts-item-disabled': info.disabled,
+            'el-x-prompts-item-has-nest': hasChildren(info),
+          },
+          classNames.item,
+        ]"
+        :style="itemStyle"
+        @click="handleItemClick(info)"
+      >
+        <!-- 图标 -->
+        <div
+          v-if="info.icon"
+          class="el-x-prompts-icon"
+        >
+          <slot
+            name="icon"
+            :item="info"
+          >
+            <i :class="info.icon"></i>
+          </slot>
+        </div>
+
+        <!-- 内容 -->
+        <div
+          :class="['el-x-prompts-content', classNames.itemContent]"
+          :style="itemContentStyle"
+        >
+          <!-- 标签 -->
+          <h6
+            v-if="info.label"
+            class="el-x-prompts-label"
+          >
+            <slot
+              name="label"
+              :item="info"
+              >{{ info.label }}</slot
+            >
+          </h6>
+
+          <!-- 描述 -->
+          <p
+            v-if="info.description"
+            class="el-x-prompts-desc"
+          >
+            <slot
+              name="description"
+              :item="info"
+              >{{ info.description }}</slot
+            >
+          </p>
+
+          <!-- 子项 -->
+          <component
+            :is="$options.name"
+            v-if="hasChildren(info)"
+            class="el-x-prompts-nested"
+            :items="info.children"
+            :vertical="true"
+            @on-item-click="$emit('on-item-click', $event)"
+            :class-names="{
+              list: classNames.subList,
+              item: classNames.subItem,
+            }"
+            :styles="{
+              list: styles.subList,
+              item: styles.subItem,
+            }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElXPrompts',
+
+    props: {
+      /**
+       * 包含多个提示项的列表
+       */
+      items: {
+        type: Array,
+        default: () => [],
+      },
+
+      /**
+       * 显示在提示列表顶部的标题
+       */
+      title: {
+        type: String,
+        default: '',
+      },
+
+      /**
+       * Item 提示项被点击时的回调函数
+       */
+      onItemClick: {
+        type: Function,
+        default: null,
+      },
+
+      /**
+       * 提示列表是否垂直排列
+       */
+      vertical: {
+        type: Boolean,
+        default: false,
+      },
+
+      /**
+       * 提示列表是否换行
+       */
+      wrap: {
+        type: Boolean,
+        default: false,
+      },
+
+      /**
+       * 自定义样式，用于各个提示项的不同部分
+       */
+      styles: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 自定义样式类名，用于各个提示项的不同部分
+       */
+      classNames: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 根节点的样式类名
+       */
+      rootClassName: {
+        type: String,
+        default: '',
+      },
+
+      /**
+       * 自定义样式
+       */
+      customStyle: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 方向
+       */
+      direction: {
+        type: String,
+        default: 'ltr',
+      },
+    },
+
+    computed: {
+      titleStyle() {
+        return {
+          ...this.styles.title,
+        };
+      },
+
+      listStyle() {
+        return {
+          ...this.styles.list,
+        };
+      },
+
+      itemStyle() {
+        return {
+          ...this.styles.item,
+        };
+      },
+
+      itemContentStyle() {
+        return {
+          ...this.styles.itemContent,
+        };
+      },
+    },
+
+    methods: {
+      hasChildren(item) {
+        return item.children && item.children.length > 0;
+      },
+
+      handleItemClick(info) {
+        if (info.disabled) {
+          return;
+        }
+        // 如果有子项，不触发点击事件
+        if (this.hasChildren(info)) {
+          return;
+        }
+        this.$emit('on-item-click', {
+          data: info,
+        });
+        // 向后兼容性
+        if (this.onItemClick) {
+          this.onItemClick({
+            data: info,
+          });
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../styles/Prompts.scss';
+</style>

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>