xt-element-ui 1.3.4 → 2.0.0

package/package.json

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

package/src/components/index.scss

@@ -27,14 +27,17 @@
 // Time 组件样式
 @import './xt-time/style/index.scss';
 
-// ExButton 组件样式
-@import './ex-button/style/index.scss';
-
-// ExCard 组件样式
-@import './ex-card/style/index.scss';
-
 // GridBox 组件样式
 @import './xt-grid-box/style/index.scss';
 
-// ExIcon 组件样式
-@import './ex-icon/style/index.scss';
+// Icon 组件样式
+@import './xt-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-button/index.js

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

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

@@ -1,97 +1,67 @@
 <template>
-  <button
-    class="xt-button"
-    :class="[
-      type ? 'xt-button--' + type : '',
-      size ? 'xt-button--' + size : '',
-      {
-        'is-plain': plain,
-        'is-disabled': disabled,
-        'is-round': round,
-        'is-circle': circle,
-        'is-dashed': dashed,
-        'is-text': text,
-        'is-link': link,
-        'is-loading': loading
-      }
-    ]"
-    :disabled="disabled || loading"
+  <el-button 
+    class="ex-button" 
+    :class="buttonClasses"
+    v-bind="$attrs" 
     @click="handleClick"
   >
-    <i v-if="loading" class="el-icon-loading"></i>
-    <i v-else-if="icon" :class="iconClass"></i>
-    <span v-if="$slots.default" class="xt-button__inner">
-      <slot></slot>
-    </span>
-  </button>
+    <slot></slot>
+  </el-button>
 </template>
-
 <script>
 export default {
   name: 'XtButton',
+  inheritAttrs: false,
+  inject: {
+    xtConfig: {
+      default: () => ({
+        theme: 'light',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    }
+  },
   props: {
     type: {
       type: String,
-      default: '',
-      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
-    },
-    size: {
-      type: String,
-      default: '',
-      validator: (val) => ['', 'large', 'medium', 'small'].includes(val)
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    round: {
-      type: Boolean,
-      default: false
+      default: 'default',
+      validator: (val) => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
     },
-    circle: {
-      type: Boolean,
-      default: false
+    throttle: {
+      type: Number,
+      default: 0
     },
-    dashed: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
+    size: {
       type: String,
-      default: ''
-    },
-    loading: {
-      type: Boolean,
-      default: false
+      default: null,
+      validator: (val) => !val || ['mini', 'small', 'medium', 'large'].includes(val)
+    }
+  },
+  data() {
+    return {
+      lastClickTime: 0
     }
   },
   computed: {
-    iconClass() {
-      if (!this.icon) return ''
-      if (this.icon.indexOf('el-icon') === 0) {
-        return this.icon
-      }
-      return 'el-icon-' + this.icon
+    finalSize() {
+      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
+      return this.size || this.xtConfig.size || 'medium'
+    },
+    buttonClasses() {
+      return [
+        `ex-button-${this.finalSize}`,
+        `ex-button-${this.type}`
+      ]
     }
   },
   methods: {
     handleClick() {
-      if (!this.disabled && !this.loading) {
-        this.$emit('click')
+      if (this.throttle > 0 && Date.now() - this.lastClickTime < this.throttle) {
+        return
       }
+      this.lastClickTime = Date.now()
+      this.$emit('click')
     }
   }
 }
-</script>
+</script>