vue-element-ui-x 0.2.2 → 1.0.2

package/src/components/Conversations/src/main.vue

@@ -583,46 +583,5 @@
 </script>
 
 <style lang="scss">
-  // 引入外部样式文件
   @import '../../../styles/Conversations.scss';
-
-  /* 自定义滚动条样式 */
-  .el-x-conversations-scrollbar {
-    height: 100%;
-    overflow-y: auto;
-
-    /* 隐藏默认滚动条 */
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: transparent;
-      border-radius: 3px;
-      transition: background-color 0.3s ease;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    /* 鼠标悬停时显示滚动条 */
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        background-color: #e0e0e0;
-      }
-    }
-  }
-
-  /* 为Firefox添加滚动条样式 */
-  @supports (scrollbar-width: thin) {
-    .el-x-conversations-scrollbar {
-      scrollbar-width: thin;
-      scrollbar-color: transparent transparent;
-
-      &:hover {
-        scrollbar-color: #e0e0e0 transparent;
-      }
-    }
-  }
 </style>

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/src/components/LoadingButton.vue

@@ -1,39 +1,37 @@
-<template>
-  <div class="el-x-send-button">
-    <el-button
-      circle
-      @click="$emit('cancel')"
-      size="small"
-    >
-      <loading class="loading-svg" />
-    </el-button>
-  </div>
-</template>
-
-<script>
-  import Loading from './Loading.vue';
-
-  export default {
-    name: 'LoadingButton',
-    components: {
-      Loading,
-    },
-  };
-</script>
-
-<style scoped lang="scss">
-  @import '~element-ui/packages/theme-chalk/src/common/var';
-
-  .el-x-send-button {
-    height: 32px;
-    .el-button {
-      padding: 0;
-      width: 32px;
-      height: 32px;
-    }
-    .loading-svg {
-      color: $--color-primary;
-      width: 100%;
-    }
-  }
-</style>
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      @click="$emit('cancel')"
+      size="small"
+    >
+      <loading class="loading-svg" />
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import Loading from './Loading.vue';
+
+  export default {
+    name: 'LoadingButton',
+    components: { Loading },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '../../../../theme/var.scss';
+
+  .el-x-send-button {
+    height: 32px;
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 100%;
+    }
+  }
+</style>