xt-element-ui 1.3.3 → 1.4.0

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>

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

@@ -0,0 +1,197 @@
+@import '../../../styles/variables.scss';
+
+.xt-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.xt-tabs--left,
+.xt-tabs--right {
+  flex-direction: row;
+}
+
+.xt-tabs__header {
+  position: relative;
+  border-bottom: 1px solid $xt-color-border-light;
+  padding-bottom: 0;
+}
+
+.xt-tabs--card .xt-tabs__header {
+  border-bottom: none;
+  background: $xt-color-bg-secondary;
+  padding: 4px 4px 0;
+  border-radius: 4px 4px 0 0;
+}
+
+.xt-tabs--left .xt-tabs__header {
+  border-right: 1px solid $xt-color-border-light;
+  border-bottom: none;
+  padding-right: 0;
+}
+
+.xt-tabs--right .xt-tabs__header {
+  border-left: 1px solid $xt-color-border-light;
+  border-bottom: none;
+  padding-left: 0;
+}
+
+.xt-tabs__nav {
+  display: flex;
+}
+
+.xt-tabs--left .xt-tabs__nav,
+.xt-tabs--right .xt-tabs__nav {
+  flex-direction: column;
+}
+
+.xt-tabs__nav-item {
+  position: relative;
+  padding: 12px 20px;
+  font-size: 14px;
+  color: $xt-color-text-secondary;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.xt-tabs--card .xt-tabs__nav-item {
+  margin-bottom: -1px;
+  border-radius: 4px 4px 0 0;
+  background: transparent;
+  border: 1px solid transparent;
+}
+
+.xt-tabs--card .xt-tabs__nav-item--active {
+  background: $xt-color-bg-primary;
+  border-color: $xt-color-border-light;
+  border-bottom-color: $xt-color-bg-primary;
+}
+
+.xt-tabs__nav-item:hover {
+  color: $xt-color-primary;
+}
+
+.xt-tabs__nav-item--active {
+  color: $xt-color-primary;
+  font-weight: 500;
+}
+
+.xt-tabs__nav-link {
+  display: inline-block;
+}
+
+.xt-tabs__nav-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: $xt-color-primary;
+  transition: left 0.3s ease, width 0.3s ease;
+}
+
+.xt-tabs--left .xt-tabs__nav-indicator {
+  bottom: auto;
+  left: auto;
+  right: 0;
+  width: 2px;
+  height: auto;
+  top: 0;
+}
+
+.xt-tabs--right .xt-tabs__nav-indicator {
+  bottom: auto;
+  right: auto;
+  left: 0;
+  width: 2px;
+  height: auto;
+  top: 0;
+}
+
+.xt-tabs--card .xt-tabs__nav-indicator {
+  display: none;
+}
+
+.xt-tabs__content {
+  flex: 1;
+  padding: 20px 0;
+}
+
+.xt-tabs--card .xt-tabs__content {
+  border: 1px solid $xt-color-border-light;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  padding: 20px;
+}
+
+.xt-tabs--left .xt-tabs__content,
+.xt-tabs--right .xt-tabs__content {
+  padding: 0 20px;
+}
+
+.xt-tabs__pane {
+  animation: xt-tabs-fade-in 0.3s ease;
+}
+
+@keyframes xt-tabs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.xt-tabs-fade-enter-active,
+.xt-tabs-fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.xt-tabs-fade-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.xt-tabs-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+[data-theme='dark'], html.dark {
+  .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs--card .xt-tabs__header {
+    background: $xt-dark-color-bg-secondary;
+  }
+  
+  .xt-tabs--card .xt-tabs__nav-item--active {
+    background: $xt-dark-color-bg-primary;
+    border-color: $xt-dark-color-border;
+    border-bottom-color: $xt-dark-color-bg-primary;
+  }
+  
+  .xt-tabs--left .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs--right .xt-tabs__header {
+    border-color: $xt-dark-color-border;
+  }
+  
+  .xt-tabs__nav-item {
+    color: $xt-dark-color-text-secondary;
+  }
+  
+  .xt-tabs__nav-item:hover {
+    color: $xt-dark-color-primary;
+  }
+  
+  .xt-tabs__nav-item--active {
+    color: $xt-dark-color-primary;
+  }
+  
+  .xt-tabs--card .xt-tabs__content {
+    border-color: $xt-dark-color-border;
+  }
+}

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

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

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

@@ -5,7 +5,9 @@
       type ? 'xt-text--' + type : '',
       'xt-text--' + size,
       { 'xt-text--bold': bold },
-      { 'xt-text--money': format === 'money' }
+      { 'xt-text--money': format === 'money' },
+      { 'xt-text--ellipsis': ellipsis },
+      { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
     ]"
     :style="customStyle"
   >
@@ -43,6 +45,15 @@ export default {
       type: [String, Number],
       default: ''
     },
+    ellipsis: {
+      type: Boolean,
+      default: false
+    },
+    ellipsisRows: {
+      type: Number,
+      default: 1,
+      validator: (val) => val >= 1 && val <= 10
+    },
 
     // 格式化模式：normal 普通 | thousand 千分位 | money 金额
     format: {
@@ -98,6 +109,9 @@ export default {
       if (this.letterSpacing) {
         style.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing
       }
+      if (this.ellipsis && this.ellipsisRows > 1) {
+        style.WebkitLineClamp = this.ellipsisRows
+      }
       return style
     },
 
@@ -151,4 +165,4 @@ export default {
     }
   }
 }
-</script>ss
+</script>

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

@@ -1,92 +1,110 @@
-@import '../../../styles/variables.scss';
-
-// 文字组件
-.xt-text {
-  letter-spacing: normal;
-}
-
-// 字体大小 - 使用增量方式
-.xt-text--extra-large {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-large);
-}
-
-.xt-text--large {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
-}
-
-.xt-text--medium {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
-}
-
-.xt-text--base {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
-}
-
-.xt-text--small {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-small);
-}
-
-.xt-text--extra-small {
-  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
-}
-
-// 不同类型文字颜色
-.xt-text--primary {
-  color: var(--xt-color-primary, #1890ff);
-}
-
-.xt-text--success {
-  color: $xt-color-success;
-}
-
-.xt-text--warning {
-  color: $xt-color-warning;
-}
-
-.xt-text--danger {
-  color: $xt-color-danger;
-}
-
-// 粗体
-.xt-text--bold {
-  font-weight: bold;
-}
-
-// 金额样式
-.xt-text--money {
-  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 500;
-  letter-spacing: 0;
-  
-  &.xt-text--primary {
-    color: var(--xt-color-primary, #1890ff);
-  }
-  
-  &.xt-text--success {
-    color: $xt-color-success;
-  }
-  
-  &.xt-text--warning {
-    color: $xt-color-warning;
-  }
-  
-  &.xt-text--danger {
-    color: $xt-color-danger;
-  }
-}
-
-// 暗色主题
-[data-theme='dark'], html.dark {
-  .xt-text--primary {
-    color: $xt-dark-color-primary;
-  }
-  .xt-text--success {
-    color: $xt-dark-color-success;
-  }
-  .xt-text--warning {
-    color: $xt-dark-color-warning;
-  }
-  .xt-text--danger {
-    color: $xt-dark-color-danger;
-  }
-}
+@import '../../../styles/variables.scss';
+
+// 文字组件
+.xt-text {
+  letter-spacing: normal;
+}
+
+// 字体大小 - 使用增量方式
+.xt-text--extra-large {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-large);
+}
+
+.xt-text--large {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-large);
+}
+
+.xt-text--medium {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-medium);
+}
+
+.xt-text--base {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-base);
+}
+
+.xt-text--small {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-small);
+}
+
+.xt-text--extra-small {
+  font-size: calc(var(--xt-font-size-base) + $xt-font-size-increment-extra-small);
+}
+
+// 不同类型文字颜色
+.xt-text--primary {
+  color: var(--xt-color-primary, #1890ff);
+}
+
+.xt-text--success {
+  color: $xt-color-success;
+}
+
+.xt-text--warning {
+  color: $xt-color-warning;
+}
+
+.xt-text--danger {
+  color: $xt-color-danger;
+}
+
+// 粗体
+.xt-text--bold {
+  font-weight: bold;
+}
+
+// 单行省略
+.xt-text--ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+// 多行省略
+.xt-text--ellipsis-multiline {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+// 金额样式
+.xt-text--money {
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  
+  &.xt-text--primary {
+    color: var(--xt-color-primary, #1890ff);
+  }
+  
+  &.xt-text--success {
+    color: $xt-color-success;
+  }
+  
+  &.xt-text--warning {
+    color: $xt-color-warning;
+  }
+  
+  &.xt-text--danger {
+    color: $xt-color-danger;
+  }
+}
+
+// 暗色主题
+[data-theme='dark'], html.dark {
+  .xt-text--primary {
+    color: $xt-dark-color-primary;
+  }
+  .xt-text--success {
+    color: $xt-dark-color-success;
+  }
+  .xt-text--warning {
+    color: $xt-dark-color-warning;
+  }
+  .xt-text--danger {
+    color: $xt-dark-color-danger;
+  }
+}

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

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