xt-element-ui 1.3.3 → 1.4.0

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
+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,97 @@
-<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"
-    @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>
-</template>
-
-<script>
-export default {
-  name: 'XtButton',
-  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
-    },
-    circle: {
-      type: Boolean,
-      default: false
-    },
-    dashed: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: Boolean,
-      default: false
-    },
-    link: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    iconClass() {
-      if (!this.icon) return ''
-      if (this.icon.indexOf('el-icon') === 0) {
-        return this.icon
-      }
-      return 'el-icon-' + this.icon
-    }
-  },
-  methods: {
-    handleClick() {
-      if (!this.disabled && !this.loading) {
-        this.$emit('click')
-      }
-    }
-  }
-}
-</script>
+<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"
+    @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>
+</template>
+
+<script>
+export default {
+  name: 'XtButton',
+  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
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconClass() {
+      if (!this.icon) return ''
+      if (this.icon.indexOf('el-icon') === 0) {
+        return this.icon
+      }
+      return 'el-icon-' + this.icon
+    }
+  },
+  methods: {
+    handleClick() {
+      if (!this.disabled && !this.loading) {
+        this.$emit('click')
+      }
+    }
+  }
+}
+</script>

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

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

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

@@ -1,49 +1,49 @@
-@import '../../../styles/variables.scss';
-
-.xt-card {
-  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
-  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
-  --xt-card-text-color: var(--xt-color-text-primary, #303133);
-  
-  border-radius: var(--xt-card-border-radius, 4px);
-  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
-  background-color: var(--xt-card-bg-color);
-  overflow: hidden;
-  color: var(--xt-card-text-color);
-  transition: var(--xt-transition-duration, 0.3s);
-}
-
-.xt-card .card__header {
-  padding: var(--xt-card-header-padding, 18px 20px);
-  box-sizing: border-box;
-  font-weight: 600;
-  font-size: var(--xt-font-size-medium, 16px);
-}
-
-.xt-card .card__body {
-  padding: var(--xt-card-padding, 20px);
-}
-
-.xt-card .card__body .value {
-  font-size: var(--xt-font-size-large, 18px);
-  font-weight: 600;
-  color: var(--xt-color-primary, #1890ff);
-}
-
-.xt-card .card__body .unit {
-  font-size: var(--xt-font-size-base, 14px);
-  color: var(--xt-color-text-secondary, #909399);
-  margin-left: 4px;
-}
-
-.xt-card .value {
-  font-weight: 600;
-}
-
-.xt-card .card__header + .card__body {
-  padding-top: 0;
-}
-
-.xt-card.noPadding .card__body {
-  padding: 0;
+@import '../../../styles/variables.scss';
+
+.xt-card {
+  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
+  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
+  --xt-card-text-color: var(--xt-color-text-primary, #303133);
+  
+  border-radius: var(--xt-card-border-radius, 4px);
+  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
+  background-color: var(--xt-card-bg-color);
+  overflow: hidden;
+  color: var(--xt-card-text-color);
+  transition: var(--xt-transition-duration, 0.3s);
+}
+
+.xt-card .card__header {
+  padding: var(--xt-card-header-padding, 18px 20px);
+  box-sizing: border-box;
+  font-weight: 600;
+  font-size: var(--xt-font-size-medium, 16px);
+}
+
+.xt-card .card__body {
+  padding: var(--xt-card-padding, 20px);
+}
+
+.xt-card .card__body .value {
+  font-size: var(--xt-font-size-large, 18px);
+  font-weight: 600;
+  color: var(--xt-color-primary, #1890ff);
+}
+
+.xt-card .card__body .unit {
+  font-size: var(--xt-font-size-base, 14px);
+  color: var(--xt-color-text-secondary, #909399);
+  margin-left: 4px;
+}
+
+.xt-card .value {
+  font-weight: 600;
+}
+
+.xt-card .card__header + .card__body {
+  padding-top: 0;
+}
+
+.xt-card.noPadding .card__body {
+  padding: 0;
 }

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

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

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-card-item/style/index copy.scss

@@ -1,72 +1,72 @@
-@import '../../../styles/variables.scss';
-
-.xt-card-item {
-  --xt-card-item-color: var(--xt-color-primary, #1890ff);
-  
-  min-height: var(--xt-card-item-min-height, 40px);
-}
-
-.xt-card-item + .xt-card-item {
-  margin-top: var(--xt-card-item-gap, 10px);
-}
-
-.xt-card-item.is-border {
-  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
-  background-color: var(--xt-color-bg-secondary, #f5f7fa);
-}
-
-.xt-card-item.is-border.is-primary {
-  border-right-color: var(--xt-card-item-color);
-}
-
-.xt-card-item.is-border.is-primary .item__value .value {
-  color: var(--xt-card-item-color);
-}
-
-.xt-card-item.is-border.is-success {
-  border-right-color: var(--xt-color-success, #67C23A);
-}
-
-.xt-card-item.is-border.is-success .item__value .value {
-  color: var(--xt-color-success, #67C23A);
-}
-
-.xt-card-item.is-border.is-warning {
-  border-right-color: var(--xt-color-warning, #E6A23C);
-}
-
-.xt-card-item.is-border.is-warning .item__value .value {
-  color: var(--xt-color-warning, #E6A23C);
-}
-
-.xt-card-item.is-border.is-danger {
-  border-right-color: var(--xt-color-danger, #F56C6C);
-}
-
-.xt-card-item.is-border.is-danger .item__value .value {
-  color: var(--xt-color-danger, #F56C6C);
-}
-
-.xt-card-item .item__value {
-  padding-right: 10px;
-}
-
-.xt-card-item .item__value .value {
-  font-weight: 600;
-  font-size: var(--xt-font-size-base, 14px);
-}
-
-.xt-card-item .item__value .unit {
-  font-size: var(--xt-font-size-small, 13px);
-  color: var(--xt-color-text-secondary, #909399);
-}
-
-.xt-card-item .item__label {
-  padding-left: 10px;
-  color: var(--xt-color-text-secondary, #909399);
-}
-
-.xt-card-item .item__unit {
-  padding-left: 5px;
-  color: var(--xt-color-text-secondary, #909399);
+@import '../../../styles/variables.scss';
+
+.xt-card-item {
+  --xt-card-item-color: var(--xt-color-primary, #1890ff);
+  
+  min-height: var(--xt-card-item-min-height, 40px);
+}
+
+.xt-card-item + .xt-card-item {
+  margin-top: var(--xt-card-item-gap, 10px);
+}
+
+.xt-card-item.is-border {
+  border-right: var(--xt-card-item-border-width, 3px) solid transparent;
+  background-color: var(--xt-color-bg-secondary, #f5f7fa);
+}
+
+.xt-card-item.is-border.is-primary {
+  border-right-color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-primary .item__value .value {
+  color: var(--xt-card-item-color);
+}
+
+.xt-card-item.is-border.is-success {
+  border-right-color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-success .item__value .value {
+  color: var(--xt-color-success, #67C23A);
+}
+
+.xt-card-item.is-border.is-warning {
+  border-right-color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-warning .item__value .value {
+  color: var(--xt-color-warning, #E6A23C);
+}
+
+.xt-card-item.is-border.is-danger {
+  border-right-color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item.is-border.is-danger .item__value .value {
+  color: var(--xt-color-danger, #F56C6C);
+}
+
+.xt-card-item .item__value {
+  padding-right: 10px;
+}
+
+.xt-card-item .item__value .value {
+  font-weight: 600;
+  font-size: var(--xt-font-size-base, 14px);
+}
+
+.xt-card-item .item__value .unit {
+  font-size: var(--xt-font-size-small, 13px);
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__label {
+  padding-left: 10px;
+  color: var(--xt-color-text-secondary, #909399);
+}
+
+.xt-card-item .item__unit {
+  padding-left: 5px;
+  color: var(--xt-color-text-secondary, #909399);
 }