vue-element-ui-x 1.0.42-beta → 1.0.43-beta

package/src/components/Thinking/index.js

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

package/src/components/Thinking/src/main.vue

@@ -1,199 +0,0 @@
-<template>
-  <div
-    class="el-x-thinking"
-    :style="{
-      '--el-x-thinking-button-width': buttonWidth,
-      '--el-x-thinking-animation-duration': duration,
-      '--el-x-thinking-content-wrapper-width': maxWidth,
-      '--el-x-thinking-content-wrapper-background-color': backgroundColor,
-      '--el-x-thinking-content-wrapper-color': color,
-    }"
-  >
-    <button
-      class="trigger"
-      :class="[localStatus, { disabled: !disabled }]"
-      :disabled="disabled"
-      @click="changeExpand"
-    >
-      <span class="status-icon">
-        <slot
-          name="status-icon"
-          :status="localStatus"
-        >
-          <i
-            v-if="localStatus === 'thinking'"
-            class="is-loading el-icon-center el-icon-loading"
-          ></i>
-          <i
-            v-if="localStatus === 'start'"
-            class="el-icon-center start-color el-icon-opportunity"
-          ></i>
-          <i
-            v-if="localStatus === 'end'"
-            class="el-icon-center end-color el-icon-success"
-          ></i>
-          <i
-            v-if="localStatus === 'error'"
-            class="el-icon-center error-color el-icon-circle-close"
-          ></i>
-        </slot>
-      </span>
-
-      <span class="label">
-        <slot
-          name="label"
-          :status="localStatus"
-        >
-          {{
-            localStatus === 'thinking'
-              ? elXt('el_x.thinking.processing')
-              : localStatus === 'error'
-              ? elXt('el_x.thinking.error')
-              : localStatus === 'end'
-              ? elXt('el_x.thinking.completed')
-              : elXt('el_x.thinking.start')
-          }}
-        </slot>
-      </span>
-
-      <transition name="rotate">
-        <span
-          v-if="!disabled"
-          class="thinking-arrow el-icon-center"
-          :class="{ expanded: isExpanded }"
-        >
-          <slot name="arrow">
-            <i class="el-icon-center el-icon-arrow-up"></i>
-          </slot>
-        </span>
-      </transition>
-    </button>
-
-    <transition name="slide">
-      <div
-        v-if="isExpanded && displayedContent"
-        class="content-wrapper"
-        :class="{ 'error-state': localStatus === 'error' }"
-      >
-        <div class="content">
-          <slot
-            v-if="localStatus !== 'error'"
-            name="content"
-            :content="displayedContent"
-          >
-            <pre>{{ displayedContent }}</pre>
-          </slot>
-
-          <slot
-            v-else
-            name="error"
-            :error-content="displayedContent"
-          >
-            <div class="error-message">{{ displayedContent }}</div>
-          </slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-  import Locale from '../../../locale/mixin';
-
-  export default {
-    name: 'ElXThinking',
-    mixins: [Locale],
-    props: {
-      content: {
-        type: String,
-        default: '',
-      },
-      modelValue: {
-        type: Boolean,
-        default: true,
-      },
-      status: {
-        type: String,
-        default: 'start',
-        validator: function (value) {
-          return ['start', 'thinking', 'end', 'error'].indexOf(value) !== -1;
-        },
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      autoCollapse: {
-        type: Boolean,
-        default: false,
-      },
-      buttonWidth: {
-        type: String,
-        default: '160px',
-      },
-      duration: {
-        type: String,
-        default: '0.2s',
-      },
-      maxWidth: {
-        type: String,
-        default: '500px',
-      },
-      backgroundColor: {
-        type: String,
-        default: '#fcfcfc',
-      },
-      color: {
-        type: String,
-        default: '#909399',
-      },
-    },
-    data() {
-      return {
-        isExpanded: this.modelValue,
-        localStatus: this.status,
-      };
-    },
-    computed: {
-      displayedContent() {
-        return this.localStatus === 'error'
-          ? this.elXt('el_x.thinking.errorContent')
-          : this.content;
-      },
-    },
-    watch: {
-      modelValue(newVal) {
-        this.isExpanded = newVal;
-      },
-      status(newVal) {
-        this.localStatus = newVal;
-        if (newVal === 'end' && this.autoCollapse) {
-          this.isExpanded = false;
-        }
-      },
-      $attrs: {
-        handler(newVal) {
-          if (newVal['onUpdate:status']) {
-            this.$emit('update:status', this.localStatus);
-          }
-        },
-        immediate: true,
-      },
-    },
-    methods: {
-      changeExpand() {
-        if (this.disabled) return;
-        this.isExpanded = !this.isExpanded;
-        this.$emit('change', {
-          value: this.isExpanded,
-          status: this.localStatus,
-        });
-        this.$emit('update:expanded', this.isExpanded);
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../styles/Thinking.scss';
-</style>

package/src/components/ThoughtChain/index.js

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

package/src/components/ThoughtChain/src/main.vue

@@ -1,291 +0,0 @@
-<template>
-  <div class="el-x-thoughtchain">
-    <el-timeline
-      ref="timelineRef"
-      :style="{
-        maxWidth: maxWidth,
-      }"
-    >
-      <transition-group
-        name="thought-chain"
-        tag="div"
-      >
-        <el-timeline-item
-          v-for="item in thinkingItems"
-          :key="getId(item)"
-          :type="getType(item)"
-          :icon="dotIsIcon ? item.icon : 'el-icon-more'"
-          :color="dotIsIcon ? item.iconColor : null"
-          :size="dotIsIcon ? item.iconSize || dotSize : 'normal'"
-          :timestamp="getTitle(item)"
-          :hide-timestamp="item.hideTitle"
-          :placement="item.placement || 'top'"
-        >
-          <div v-if="!item.isCanExpand">
-            <el-x-typewriter
-              :content="getThinkTitle(item)"
-              :is-markdown="item.isMarkdown"
-              :typing="item.typing"
-            />
-          </div>
-          <el-collapse
-            v-else-if="!item.isDefaultExpand"
-            @change="() => onExpand(item)"
-          >
-            <el-collapse-item :title="getThinkTitle(item)">
-              <el-x-typewriter
-                :content="getThinkContent(item)"
-                :is-markdown="item.isMarkdown"
-                :typing="item.typing"
-              />
-            </el-collapse-item>
-          </el-collapse>
-          <el-collapse
-            v-else
-            v-model="defaultActiveNodes"
-            @change="() => onExpand(item)"
-          >
-            <el-collapse-item
-              :title="getThinkTitle(item)"
-              :name="String(getId(item))"
-            >
-              <el-x-typewriter
-                :content="getThinkContent(item)"
-                :is-markdown="item.isMarkdown"
-                :typing="item.typing"
-              />
-            </el-collapse-item>
-          </el-collapse>
-
-          <template
-            v-if="!dotIsIcon"
-            slot="dot"
-          >
-            <div
-              class="el-x-thoughtchain-item-dot"
-              :style="{ margin: dotMargin }"
-            >
-              <slot
-                name="icon"
-                :item="item"
-              >
-                <el-button
-                  circle
-                  :type="getType(item)"
-                  :loading="isLoading(item)"
-                  :size="dotSize"
-                >
-                  <template slot="loading">
-                    <i class="el-icon-loading el-x-thoughtchain-loading"></i>
-                  </template>
-
-                  <i
-                    v-if="!isLoading(item) && !isError(item)"
-                    class="el-icon-check"
-                  ></i>
-                  <i
-                    v-if="!isLoading(item) && isError(item)"
-                    class="el-icon-close"
-                  ></i>
-                </el-button>
-              </slot>
-            </div>
-          </template>
-        </el-timeline-item>
-      </transition-group>
-    </el-timeline>
-  </div>
-</template>
-
-<script>
-  import { get } from 'lodash';
-  import ElXTypewriter from '../../Typewriter/index.js';
-  export default {
-    name: 'ElXThoughtChain',
-    components: { ElXTypewriter },
-    props: {
-      thinkingItems: {
-        type: Array,
-        default: () => [],
-      },
-      dotIsIcon: {
-        type: Boolean,
-        default: false,
-      },
-      dotSize: {
-        type: String,
-        default: 'small',
-      },
-      maxWidth: {
-        type: String,
-        default: '600px',
-      },
-      lineGradient: {
-        type: Boolean,
-        default: false,
-      },
-      rowKey: {
-        type: String,
-        default: 'id',
-      },
-      statusKey: {
-        type: String,
-        default: 'status',
-      },
-      statusEnum: {
-        type: Object,
-        default: () => ({
-          loading: {
-            value: 'loading',
-            type: 'warning',
-          },
-          error: {
-            value: 'error',
-            type: 'danger',
-          },
-          success: {
-            value: 'success',
-            type: 'success',
-          },
-        }),
-      },
-      titleKey: {
-        type: String,
-        default: 'title',
-      },
-      thinkTitleKey: {
-        type: String,
-        default: 'thinkTitle',
-      },
-      thinkContentKey: {
-        type: String,
-        default: 'thinkContent',
-      },
-    },
-    data() {
-      return {
-        colorArr: {
-          // 使用与SCSS变量对应的字符串表示
-          info: 'var(--color-info, #909399)',
-          success: 'var(--color-success, #67C23A)',
-          warning: 'var(--color-warning, #E6A23C)',
-          danger: 'var(--color-danger, #F56C6C)',
-          primary: 'var(--color-primary, #409EFF)',
-        },
-        defaultActiveNodes: [],
-      };
-    },
-    computed: {
-      dotMargin() {
-        switch (this.dotSize) {
-          case 'mini':
-            return '-8px 0 0 -9px';
-          case 'small':
-            return '-8px 0 0 -11px';
-          case 'medium':
-            return '-8px 0 0 -13px';
-          default:
-            return '-8px 0 0 -16px';
-        }
-      },
-      getLineColor() {
-        if (this.thinkingItems.length) {
-          const arr = this.thinkingItems.map(item => {
-            const _type_ = this.getType(item);
-            if (_type_) {
-              return this.colorArr[_type_];
-            }
-            return '';
-          });
-          return arr;
-        }
-        return [];
-      },
-      activeNamesComputed() {
-        return this.thinkingItems
-          .filter(item => item.isCanExpand && item.isDefaultExpand)
-          .map(item => String(this.getId(item)));
-      },
-    },
-    watch: {
-      activeNamesComputed: {
-        handler(v) {
-          this.defaultActiveNodes = [...v];
-        },
-        immediate: true,
-      },
-      getLineColor() {
-        this.$nextTick(() => {
-          this.getEle();
-        });
-      },
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.getEle();
-      });
-    },
-    methods: {
-      onExpand(item) {
-        this.$emit('handle-expand', item);
-      },
-      setRadialGradient(colors, ele) {
-        const length = ele.length;
-        Array.from(ele).forEach((item, index) => {
-          const line = item.children[0];
-          if (line) {
-            line.setAttribute(
-              'style',
-              `
-            border: none;
-            width:2px;
-            background: linear-gradient(to bottom, ${colors[index]} 0% , ${
-                colors[index < length ? index + 1 : index]
-              } 100%);
-          `,
-            );
-          }
-        });
-      },
-      getEle() {
-        if (this.getLineColor && this.$refs.timelineRef && this.lineGradient) {
-          const ele = this.$refs.timelineRef.$el.children[0].children;
-          this.setRadialGradient(this.getLineColor, ele);
-        }
-      },
-      isLoading(item) {
-        const status = this.getStatus(item);
-        return status === this.statusEnum.loading.value;
-      },
-      isError(item) {
-        const status = this.getStatus(item);
-        return status === this.statusEnum.error.value;
-      },
-      getId(item) {
-        return get(item, this.rowKey);
-      },
-      getType(item) {
-        const status = this.getStatus(item);
-        // 优先查找statusEnum中value匹配的项
-        const matchedStatus = Object.values(this.statusEnum).find(s => s.value === status);
-        return matchedStatus ? matchedStatus.type : 'success';
-      },
-
-      getTitle(item) {
-        return get(item, this.titleKey) || '';
-      },
-      getThinkTitle(item) {
-        return get(item, this.thinkTitleKey) || '';
-      },
-      getThinkContent(item) {
-        return get(item, this.thinkContentKey) || '';
-      },
-      getStatus(item) {
-        return get(item, this.statusKey);
-      },
-    },
-  };
-</script>
-<style lang="scss" scoped>
-  @import '../../../styles/ThoughtChain.scss';
-</style>

package/src/components/Typewriter/index.js

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