xt-element-ui 1.3.4 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",

package/src/components/ex-chart/theme/dark.js

@@ -14,6 +14,9 @@ export default {
       color: "#ffffff"
     }
   },
+  axisLabel: {
+    color: "#ffffff"
+  },
   line: {
     itemStyle: {
     },
@@ -24,7 +27,7 @@ export default {
   bar: {
     itemStyle: {
       borderRadius: 4
-    }
+    },
   },
   pie: {
     roseType: "radius",

package/src/components/index.scss

@@ -37,4 +37,13 @@
 @import './xt-grid-box/style/index.scss';
 
 // ExIcon 组件样式
-@import './ex-icon/style/index.scss';
+@import './ex-icon/style/index.scss';
+
+// Progress 组件样式
+@import './xt-progress/style/index.scss';
+
+// Tabs 组件样式
+@import './xt-tabs/style/index.scss';
+
+// Badge 组件样式
+@import './xt-badge/style/index.scss';

package/src/components/xt-badge/index.js

@@ -0,0 +1,7 @@
+import XtBadge from './index.vue'
+
+XtBadge.install = function(Vue) {
+  Vue.component(XtBadge.name, XtBadge)
+}
+
+export default XtBadge

package/src/components/xt-badge/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <span class="xt-badge" :class="[
+    `xt-badge--${type}`,
+    { 'xt-badge--dot': isDot },
+    { 'xt-badge--hidden': hidden },
+    { 'xt-badge--fixed': fixed }
+  ]">
+    <span class="xt-badge__content">
+      <slot></slot>
+    </span>
+    <span 
+      v-if="!hidden && (value || isDot)" 
+      class="xt-badge__badge"
+      :style="badgeStyle"
+    >
+      <template v-if="isDot"></template>
+      <template v-else-if="showOverflow && value > max">{{ max }}+</template>
+      <template v-else>{{ value }}</template>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'XtBadge',
+  props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: (val) => ['primary', 'success', 'warning', 'danger', 'info'].includes(val)
+    },
+    max: {
+      type: Number,
+      default: 99
+    },
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    badgeStyle() {
+      const style = {}
+      if (this.color) {
+        style.backgroundColor = this.color
+      }
+      return style
+    }
+  }
+}
+</script>

package/src/components/xt-badge/style/index.scss

@@ -0,0 +1,88 @@
+@import '../../../styles/variables.scss';
+
+.xt-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.xt-badge__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.xt-badge__badge {
+  position: absolute;
+  top: -6px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: #ffffff;
+  text-align: center;
+  white-space: nowrap;
+  background: $xt-color-danger;
+}
+
+.xt-badge--dot .xt-badge__badge {
+  min-width: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.xt-badge--fixed .xt-badge__badge {
+  top: -4px;
+  right: -4px;
+}
+
+.xt-badge--primary .xt-badge__badge {
+  background: $xt-color-primary;
+}
+
+.xt-badge--success .xt-badge__badge {
+  background: $xt-color-success;
+}
+
+.xt-badge--warning .xt-badge__badge {
+  background: $xt-color-warning;
+}
+
+.xt-badge--danger .xt-badge__badge {
+  background: $xt-color-danger;
+}
+
+.xt-badge--info .xt-badge__badge {
+  background: $xt-color-info;
+}
+
+.xt-badge--hidden {
+  display: none;
+}
+
+[data-theme='dark'], html.dark {
+  .xt-badge--primary .xt-badge__badge {
+    background: $xt-dark-color-primary;
+  }
+  
+  .xt-badge--success .xt-badge__badge {
+    background: $xt-dark-color-success;
+  }
+  
+  .xt-badge--warning .xt-badge__badge {
+    background: $xt-dark-color-warning;
+  }
+  
+  .xt-badge--danger .xt-badge__badge {
+    background: $xt-dark-color-danger;
+  }
+  
+  .xt-badge--info .xt-badge__badge {
+    background: $xt-dark-color-info;
+  }
+}

package/src/components/xt-card-item/index.vue

@@ -1,17 +1,17 @@
 <template>
     <ex-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
-        <xt-text bold size="medium">{{ title }}</xt-text>
-        <xt-flex-box>
-          <div style="width: 50%;margin-bottom: 5px;">
+        <xt-flex-box content="between">
+          <div >
+            <div><xt-text bold size="extra-large">{{ title }}</xt-text></div>
             <xt-text bold size="large" v-model="value" format="thousand" :type="type" :decimals="0"></xt-text>
             <div style="margin: 5px 0;">
               <xt-text size="small">较昨日</xt-text>
               <xt-text v-model="change" format="normal" :type="diff > 0 ? 'success' : 'danger'" :suffix="diff > 0 ? '↑' : '↓'"></xt-text> 
             </div>
           </div>
-          <div style="flex: 1; height: 100%;">
+          <div style="height: 100%;">
             <slot name="icon">
-              <xt-text size="extra-large" :type="type"><i class="el-icon-user"></i></xt-text>
+              <xt-text size="extra-large" :type="type"><ex-icon name="el-icon-user" :size="48" ></ex-icon></xt-text>
             </slot>
           </div>
         </xt-flex-box>

package/src/components/xt-progress/index.js

@@ -0,0 +1,7 @@
+import XtProgress from './index.vue'
+
+XtProgress.install = function(Vue) {
+  Vue.component(XtProgress.name, XtProgress)
+}
+
+export default XtProgress

package/src/components/xt-progress/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="xt-progress" :class="[
+    `xt-progress--${type}`,
+    `xt-progress--${size}`
+  ]">
+    <div v-if="type === 'line'" class="xt-progress__bar">
+      <div 
+        class="xt-progress__bar-inner" 
+        :style="{ width: `${percentage}%`, backgroundColor: color }"
+      >
+        <transition name="xt-progress-fade">
+          <div v-if="showText" class="xt-progress__bar-text">{{ percentage }}%</div>
+        </transition>
+      </div>
+    </div>
+    
+    <div v-else-if="type === 'circle'" class="xt-progress__circle">
+      <svg :width="circleSize" :height="circleSize" class="xt-progress__circle-svg">
+        <circle
+          class="xt-progress__circle-bg"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          fill="none"
+          :stroke="bgColor"
+          :stroke-width="strokeWidth"
+        />
+        <circle
+          class="xt-progress__circle-bar"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          fill="none"
+          :stroke="color"
+          :stroke-width="strokeWidth"
+          :stroke-dasharray="circleLength"
+          :stroke-dashoffset="circleOffset"
+          stroke-linecap="round"
+          transform="rotate(-90 ${circleSize / 2} ${circleSize / 2})"
+        />
+      </svg>
+      <div v-if="showText" class="xt-progress__circle-text">
+        <span class="xt-progress__circle-percent">{{ percentage }}%</span>
+      </div>
+    </div>
+    
+    <div v-if="showText && type === 'line'" class="xt-progress__text">{{ percentage }}%</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtProgress',
+  props: {
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0 && val <= 100
+    },
+    type: {
+      type: String,
+      default: 'line',
+      validator: (val) => ['line', 'circle'].includes(val)
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    color: {
+      type: String,
+      default: '#1890ff'
+    },
+    bgColor: {
+      type: String,
+      default: '#ebeef5'
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6
+    },
+    circleSize: {
+      type: Number,
+      default: 120
+    }
+  },
+  computed: {
+    circleRadius() {
+      return (this.circleSize - this.strokeWidth) / 2
+    },
+    circleLength() {
+      return 2 * Math.PI * this.circleRadius
+    },
+    circleOffset() {
+      return this.circleLength * (1 - this.percentage / 100)
+    }
+  }
+}
+</script>

package/src/components/xt-progress/style/index.scss

@@ -0,0 +1,119 @@
+@import '../../../styles/variables.scss';
+
+.xt-progress {
+  display: inline-flex;
+  align-items: center;
+}
+
+.xt-progress__bar {
+  flex: 1;
+  height: 6px;
+  background: $xt-color-border-light;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+
+.xt-progress--small .xt-progress__bar {
+  height: 4px;
+}
+
+.xt-progress--large .xt-progress__bar {
+  height: 8px;
+}
+
+.xt-progress__bar-inner {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.xt-progress__bar-text {
+  position: absolute;
+  right: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  color: $xt-color-text-secondary;
+}
+
+.xt-progress__text {
+  margin-left: 10px;
+  font-size: 14px;
+  color: $xt-color-text-secondary;
+}
+
+.xt-progress--small .xt-progress__text {
+  font-size: 12px;
+}
+
+.xt-progress--large .xt-progress__text {
+  font-size: 16px;
+}
+
+.xt-progress__circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-progress__circle-svg {
+  transform: rotate(-90deg);
+}
+
+.xt-progress__circle-bg {
+  transition: stroke 0.3s ease;
+}
+
+.xt-progress__circle-bar {
+  transition: stroke-dashoffset 0.6s ease;
+}
+
+.xt-progress__circle-text {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-progress__circle-percent {
+  font-size: 16px;
+  font-weight: 500;
+  color: $xt-color-text-primary;
+}
+
+.xt-progress--small .xt-progress__circle-percent {
+  font-size: 12px;
+}
+
+.xt-progress--large .xt-progress__circle-percent {
+  font-size: 20px;
+}
+
+.xt-progress-fade-enter-active,
+.xt-progress-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.xt-progress-fade-enter,
+.xt-progress-fade-leave-to {
+  opacity: 0;
+}
+
+[data-theme='dark'], html.dark {
+  .xt-progress__bar {
+    background: $xt-dark-color-border;
+  }
+  
+  .xt-progress__bar-text,
+  .xt-progress__text {
+    color: $xt-dark-color-text-secondary;
+  }
+  
+  .xt-progress__circle-percent {
+    color: $xt-dark-color-text-primary;
+  }
+}

package/src/components/xt-tabs/TabPane.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-show="isActive" class="xt-tab-pane">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtTabPane',
+  props: {
+    name: {
+      type: [String, Number],
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isActive() {
+      return this.$parent && this.$parent.activeName === this.name
+    }
+  },
+  mounted() {
+    if (this.$parent && typeof this.$parent.addPane === 'function') {
+      this.$parent.addPane({ name: this.name, label: this.label })
+    }
+  },
+  beforeDestroy() {
+    if (this.$parent && typeof this.$parent.removePane === 'function') {
+      this.$parent.removePane(this.name)
+    }
+  }
+}
+</script>

package/src/components/xt-tabs/index.js

@@ -0,0 +1,10 @@
+import XtTabs from './index.vue'
+import XtTabPane from './TabPane.vue'
+
+XtTabs.install = function(Vue) {
+  Vue.component(XtTabs.name, XtTabs)
+  Vue.component(XtTabPane.name, XtTabPane)
+}
+
+export default XtTabs
+export { XtTabPane }

package/src/components/xt-tabs/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="xt-tabs" :class="[
+    `xt-tabs--${position}`,
+    { 'xt-tabs--card': type === 'card' }
+  ]">
+    <div class="xt-tabs__header">
+      <div class="xt-tabs__nav">
+        <div
+          v-for="(pane, index) in panes"
+          :key="pane.name"
+          class="xt-tabs__nav-item"
+          :class="{ 'xt-tabs__nav-item--active': activeName === pane.name }"
+          @click="handleTabClick(pane.name)"
+        >
+          <span class="xt-tabs__nav-link">{{ pane.label }}</span>
+        </div>
+      </div>
+      <div class="xt-tabs__nav-indicator" :style="indicatorStyle"></div>
+    </div>
+    
+    <div class="xt-tabs__content">
+      <transition name="xt-tabs-fade" mode="out-in">
+        <div
+          v-for="(pane, index) in panes"
+          :key="pane.name"
+          class="xt-tabs__pane"
+          v-show="activeName === pane.name"
+        >
+          <slot :name="pane.name"></slot>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtTabs',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator: (val) => ['default', 'card'].includes(val)
+    },
+    position: {
+      type: String,
+      default: 'top',
+      validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    }
+  },
+  data() {
+    return {
+      panes: [],
+      activeName: this.value
+    }
+  },
+  watch: {
+    value(val) {
+      this.activeName = val
+    },
+    activeName(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  },
+  computed: {
+    indicatorStyle() {
+      const activeIndex = this.panes.findIndex(p => p.name === this.activeName)
+      if (activeIndex === -1) return { display: 'none' }
+      
+      const navItems = this.$el && this.$el.querySelectorAll('.xt-tabs__nav-item')
+      if (!navItems || navItems.length === 0) return { display: 'none' }
+      
+      const activeItem = navItems[activeIndex]
+      return {
+        left: `${activeItem.offsetLeft}px`,
+        width: `${activeItem.offsetWidth}px`,
+        display: 'block'
+      }
+    }
+  },
+  methods: {
+    handleTabClick(name) {
+      this.activeName = name
+    },
+    addPane(pane) {
+      if (!this.panes.find(p => p.name === pane.name)) {
+        this.panes.push(pane)
+        if (!this.activeName && this.panes.length === 1) {
+          this.activeName = pane.name
+        }
+      }
+    },
+    removePane(name) {
+      const index = this.panes.findIndex(p => p.name === name)
+      if (index > -1) {
+        this.panes.splice(index, 1)
+      }
+    }
+  },
+  mounted() {
+    this.$children.forEach(child => {
+      if (child.$options.name === 'XtTabPane') {
+        this.addPane({ name: child.name, label: child.label })
+      }
+    })
+  }
+}
+</script>