xt-element-ui 2.1.6 → 2.1.7

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

@@ -1,34 +1,42 @@
 <template>
-  <div class="xt-tabs" :class="[
-    `xt-tabs--${position}`,
-    { 'xt-tabs--card': type === 'card' }
+  <div ref="tabsWrap" class="xt-tabs" :class="[
+    `xt-tabs--${actualPosition}`,
+    { 'xt-tabs--card': type === 'card' },
+    { 'xt-tabs--border-card': type === 'border-card' },
+    { 'xt-tabs--editable': editable }
   ]">
-    <div class="xt-tabs__header">
-      <div class="xt-tabs__nav">
+    <div class="xt-tabs__header" ref="tabsHeader">
+      <div class="xt-tabs__nav" ref="tabsNav">
         <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)"
+          :class="{ 
+            'xt-tabs__nav-item--active': activeName === pane.name,
+            'xt-tabs__nav-item--disabled': pane.disabled
+          }"
+          @click="handleTabClick(pane)"
         >
           <span class="xt-tabs__nav-link">{{ pane.label }}</span>
+          <span 
+            v-if="(closable || pane.closable) && !editable" 
+            class="xt-tabs__close" 
+            @click.stop="handleTabRemove(pane.name)"
+          >×</span>
+        </div>
+        <div 
+          v-if="addable || editable" 
+          class="xt-tabs__nav-item xt-tabs__nav-item--add" 
+          @click="handleTabAdd"
+        >
+          <span>+</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>
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -43,13 +51,29 @@ export default {
     },
     type: {
       type: String,
-      default: 'default',
-      validator: (val) => ['default', 'card'].includes(val)
+      default: 'card',
+      validator: (val) => ['default', 'card', 'border-card'].includes(val)
     },
     position: {
       type: String,
       default: 'top',
       validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    tabPosition: {
+      type: String,
+      default: ''
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -58,56 +82,291 @@ export default {
       activeName: this.value
     }
   },
-  watch: {
-    value(val) {
-      this.activeName = val
-    },
-    activeName(val) {
-      this.$emit('input', val)
-      this.$emit('change', val)
-    }
-  },
   computed: {
+    actualPosition() {
+      return this.tabPosition || this.position
+    },
     indicatorStyle() {
       const activeIndex = this.panes.findIndex(p => p.name === this.activeName)
-      if (activeIndex === -1) return { display: 'none' }
+      if (activeIndex === -1 || !this.$refs.tabsNav) return { display: 'none' }
       
-      const navItems = this.$el && this.$el.querySelectorAll('.xt-tabs__nav-item')
+      const navItems = this.$refs.tabsNav.querySelectorAll('.xt-tabs__nav-item:not(.xt-tabs__nav-item--add)')
       if (!navItems || navItems.length === 0) return { display: 'none' }
       
       const activeItem = navItems[activeIndex]
-      return {
-        left: `${activeItem.offsetLeft}px`,
-        width: `${activeItem.offsetWidth}px`,
-        display: 'block'
+      if (!activeItem) return { display: 'none' }
+
+      const pos = this.actualPosition
+      const base = { transition: 'all 0.3s ease' }
+      if (pos === 'top' || pos === 'bottom') {
+        return {
+          ...base,
+          left: `${activeItem.offsetLeft}px`,
+          width: `${activeItem.offsetWidth}px`,
+          height: '2px',
+          bottom: pos === 'top' ? 0 : 'auto',
+          top: pos === 'bottom' ? 0 : 'auto',
+          display: 'block'
+        }
+      } else {
+        return {
+          ...base,
+          top: `${activeItem.offsetTop}px`,
+          height: `${activeItem.offsetHeight}px`,
+          width: '2px',
+          left: pos === 'left' ? 'auto' : 0,
+          right: pos === 'right' ? 0 : 'auto',
+          display: 'block'
+        }
       }
     }
   },
+  watch: {
+    value(val) {
+      this.activeName = val
+    },
+    activeName(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+      this.$nextTick(() => this.$forceUpdate())
+    },
+    panes: {
+      handler() {
+        this.$nextTick(() => this.$forceUpdate())
+      },
+      deep: true
+    }
+  },
   methods: {
-    handleTabClick(name) {
-      this.activeName = name
+    handleTabClick(pane) {
+      if (pane.disabled) return
+      this.activeName = pane.name
+      this.$emit('tab-click', pane)
+    },
+    handleTabRemove(name) {
+      this.$emit('tab-remove', name)
+      this.$emit('edit', name, 'remove')
+      const index = this.panes.findIndex(p => p.name === name)
+      if (index > -1) {
+        this.panes.splice(index, 1)
+        if (this.activeName === name && this.panes.length > 0) {
+          this.activeName = this.panes[0].name
+        }
+      }
+    },
+    handleTabAdd() {
+      this.$emit('tab-add')
+      this.$emit('edit', null, 'add')
     },
     addPane(pane) {
-      if (!this.panes.find(p => p.name === pane.name)) {
+      const exist = this.panes.some(p => p.name === pane.name)
+      if (!exist) {
         this.panes.push(pane)
         if (!this.activeName && this.panes.length === 1) {
           this.activeName = pane.name
         }
+        this.$nextTick(() => this.$forceUpdate())
       }
     },
     removePane(name) {
-      const index = this.panes.findIndex(p => p.name === name)
-      if (index > -1) {
-        this.panes.splice(index, 1)
+      const idx = this.panes.findIndex(p => p.name === name)
+      if (idx > -1) {
+        this.panes.splice(idx, 1)
+        this.$nextTick(() => this.$forceUpdate())
       }
+    },
+    collectPanes() {
+      this.panes = []
+      this.$children.forEach(child => {
+        if (child.$options.name === 'XtTabPane') {
+          this.addPane({
+            name: child.name,
+            label: child.label,
+            disabled: child.disabled,
+            closable: child.closable
+          })
+        }
+      })
     }
   },
   mounted() {
-    this.$children.forEach(child => {
-      if (child.$options.name === 'XtTabPane') {
-        this.addPane({ name: child.name, label: child.label })
-      }
+    this.$nextTick(() => {
+      this.collectPanes()
+      this.$watch(() => this.$children, () => {
+        this.collectPanes()
+      }, { flush: 'post' })
     })
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.xt-tabs {
+  display: flex;
+  flex-direction: column;
+  
+  &--top, &--bottom {
+    flex-direction: column;
+    .xt-tabs__header {
+      width: 100%;
+    }
+  }
+  
+  &--left, &--right {
+    flex-direction: row;
+    .xt-tabs__header {
+      flex-direction: column;
+      width: auto;
+    }
+    .xt-tabs__nav {
+      flex-direction: column;
+    }
+    .xt-tabs__nav-indicator {
+      width: 2px;
+      height: auto;
+    }
+    .xt-tabs__content {
+      border-left: 1px solid #dcdfe6;
+      border-top: none;
+    }
+    &--right .xt-tabs__content {
+      border-left: none;
+      border-right: 1px solid #dcdfe6;
+    }
+  }
+  
+  &--top .xt-tabs__nav-indicator {
+    bottom: 0;
+  }
+  &--bottom .xt-tabs__nav-indicator {
+    top: 0;
+  }
+  &--left .xt-tabs__nav-indicator {
+    right: 0;
+  }
+  &--right .xt-tabs__nav-indicator {
+    left: 0;
+  }
+  
+  &--card {
+    .xt-tabs__header {
+      margin-bottom: -1px;
+    }
+    
+    .xt-tabs__nav-item {
+      border: 1px solid transparent;
+      border-bottom: none;
+      background: #f5f7fa;
+      
+      &--active {
+        background: #fff;
+        border-color: #dcdfe6;
+        border-bottom-color: #fff;
+      }
+    }
+    &--left, &--right {
+      .xt-tabs__nav-item {
+        border-bottom: 1px solid transparent;
+        border-right: none;
+      }
+      .xt-tabs__nav-item--active {
+        border-right-color: #fff;
+        border-bottom-color: #dcdfe6;
+      }
+    }
+  }
+  
+  &--border-card {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+    
+    .xt-tabs__nav-item--active {
+      background: #ecf5ff;
+      color: #409eff;
+    }
+  }
+  
+  &--editable {
+    .xt-tabs__close {
+      display: inline-block;
+    }
+  }
+}
+
+.xt-tabs__header {
+  position: relative;
+  display: flex;
+}
+
+.xt-tabs__nav {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.xt-tabs__nav-item {
+  position: relative;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.3s;
+  white-space: nowrap;
+  
+  &--active {
+    color: #409eff;
+  }
+  
+  &--disabled {
+    cursor: not-allowed;
+    color: #c0c4cc;
+  }
+  
+  &--add {
+    color: #909399;
+    font-size: 20px;
+  }
+  
+  &:hover:not(.xt-tabs__nav-item--disabled) {
+    color: #409eff;
+    background-color: #ecf5ff;
+  }
+}
+
+.xt-tabs__nav-link {
+  display: inline-block;
+}
+
+.xt-tabs__close {
+  display: none;
+  margin-left: 8px;
+  font-size: 16px;
+  line-height: 1;
+  color: #909399;
+  vertical-align: middle;
+  
+  &:hover {
+    color: #f56c6c;
+  }
+}
+
+.xt-tabs__nav-indicator {
+  position: absolute;
+  height: 2px;
+  background-color: #409eff;
+}
+
+.xt-tabs__content {
+  flex: 1;
+  padding: 16px;
+  border-top: 1px solid #dcdfe6;
+}
+
+.xt-tabs--border-card .xt-tabs__content {
+  border-top: none;
+}
+
+.xt-tabs__pane {
+  min-height: 40px;
+}
+</style>

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

@@ -155,43 +155,3 @@
   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/style/index.scss

@@ -93,18 +93,3 @@
   }
 }
 
-// 暗色主题
-[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-upload/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseFlexBox type="inline-flex" gap="5px">
+  <XtFlexBox type="inline-flex" gap="5px">
     <el-upload
       v-if="action"
       ref="uploadFile"
@@ -13,11 +13,13 @@
       :show-file-list="false"
       :auto-upload="autoUpload"
       :before-upload="uploadBefore"
-      accept=".jpg,.jpeg,.png"
+      :accept="accept"
     >
-      <i class="el-icon-camera" style="font-size: 20px;padding: 20px;background:#f0f0f1;color:#409EFF" :style="{padding: plusPx / 2 + 'px',cursor:disabled ? 'not-allowed':'pointer'}"></i>
+      <span style="font-size: 20px;padding: 20px;background:#f0f0f1;color:#409EFF" :style="{padding: plusPx / 2 + 'px',cursor:disabled ? 'not-allowed':'pointer'}">
+        <slot><i :class="icon"></i></slot>
+      </span>
     </el-upload>
-    <BaseFlexBox class="el-upload-list el-upload-list--picture-card" gap="5px" wrap="wrap" style="flex: 1" v-if="fileList!==null&&fileList.length>0">
+    <XtFlexBox class="el-upload-list el-upload-list--picture-card" gap="5px" wrap="wrap" style="flex: 1" v-if="fileList!==null&&fileList.length>0">
       <li v-for="(ite,index) in fileList" :key="index" class="el-upload-list__item is-ready" style="margin: 0;width:62px;height: 62px;" :style="{ width: (plusPx + 22)+ 'px',height: (plusPx + 22)+ 'px'}">
         <el-image class="el-upload-list__item-thumbnail" :src="YSSQP+'/'+ite" alt="" @click="clickHandler" />
         <span class="el-upload-list__item-actions" @click="preShowPicture(ite, index)">
@@ -29,11 +31,11 @@
           </span>
         </span>
       </li>
-    </BaseFlexBox>
+    </XtFlexBox>
     <template v-if="preview">
       <ImageViewer v-if="previewVisible" :z-index="3000" :base-url="baseUrl + '/'" :infiniteLoop="false" :initial-index="imageIndex" :url-list="allFileList || fileList" :on-close="closeViewer" />
     </template>
-  </BaseFlexBox>
+  </XtFlexBox>
 </template>
 <script>
 import ImageViewer from "./preview.vue";
@@ -111,6 +113,10 @@ export default {
     // 当前图片在图片库中预览
     allFileList: {
       type: Array
+    },
+    icon: {
+      type: String,
+      default: "el-icon-camera"
     }
   },
   data() {

package/src/enhance/index.scss

@@ -0,0 +1,13 @@
+/* 覆盖 vuepress-theme-reco 主题的 table 样式 */
+
+table:not(.el-date-table),
+table:not(.el-year-table),
+table:not(.el-month-table) {
+  border-collapse: unset;
+  width: unset;
+  margin: unset;
+}
+
+.demo-container {
+  height: 400px;
+}

package/src/index.js

@@ -31,6 +31,7 @@ import XtMapProvider from './components/xt-map-provider'
 import XtGridBox from './components/xt-grid-box'
 import XtGridItem from './components/xt-grid-item'
 import XtProgress from './components/xt-progress'
+import XtTabPane from './components/xt-tab-pane'
 import XtTabs from './components/xt-tabs'
 import XtBadge from './components/xt-badge'
 import XtDatePicker from './components/xt-date-picker'
@@ -66,6 +67,7 @@ const components = [
   XtGridBox,
   XtGridItem,
   XtProgress,
+  XtTabPane,
   XtTabs,
   XtBadge,
   XtDatePicker,

package/src/styles/theme/colors.scss

@@ -55,47 +55,3 @@ $xt-color-info-light-8: #e0e1e2;      // 信息色浅色 80%
 $xt-color-info-light-9: #f0f0f0;      // 信息色浅色 90%
 $xt-color-info-dark-2: #7a7c80;       // 信息色深色 20%
 
-// ============================
-// 暗色主题渐变色系（参考 Element Plus）
-// ============================
-
-// Primary 暗色主题渐变色系
-$xt-dark-color-primary-light-3: #336eb9;   // 主色暗色 30%
-$xt-dark-color-primary-light-5: #2a598a;   // 主色暗色 50%
-$xt-dark-color-primary-light-7: #213d5b;   // 主色暗色 70%
-$xt-dark-color-primary-light-8: #1d3043;   // 主色暗色 80%
-$xt-dark-color-primary-light-9: #18222b;   // 主色暗色 90%
-$xt-dark-color-primary-dark-2: #66b1ff;    // 主色亮色 20%
-
-// Success 暗色主题渐变色系
-$xt-dark-color-success-light-3: #4e8e2f;   // 成功色暗色 30%
-$xt-dark-color-success-light-5: #3e6b27;   // 成功色暗色 50%
-$xt-dark-color-success-light-7: #2d481f;   // 成功色暗色 70%
-$xt-dark-color-success-light-8: #25371c;   // 成功色暗色 80%
-$xt-dark-color-success-light-9: #1c2518;   // 成功色暗色 90%
-$xt-dark-color-success-dark-2: #85ce61;    // 成功色亮色 20%
-
-// Warning 暗色主题渐变色系
-$xt-dark-color-warning-light-3: #a77730;   // 警告色暗色 30%
-$xt-dark-color-warning-light-5: #7d5b28;   // 警告色暗色 50%
-$xt-dark-color-warning-light-7: #533f20;   // 警告色暗色 70%
-$xt-dark-color-warning-light-8: #3e301c;   // 警告色暗色 80%
-$xt-dark-color-warning-light-9: #292218;   // 警告色暗色 90%
-$xt-dark-color-warning-dark-2: #ebb563;    // 警告色亮色 20%
-
-// Danger 暗色主题渐变色系
-$xt-dark-color-danger-light-3: #b25252;    // 危险色暗色 30%
-$xt-dark-color-danger-light-5: #854040;    // 危险色暗色 50%
-$xt-dark-color-danger-light-7: #582e2e;    // 危险色暗色 70%
-$xt-dark-color-danger-light-8: #412626;    // 危险色暗色 80%
-$xt-dark-color-danger-light-9: #2a1d1d;    // 危险色暗色 90%
-$xt-dark-color-danger-dark-2: #f78989;     // 危险色亮色 20%
-
-// Info 暗色主题渐变色系
-$xt-dark-color-info-light-3: #6b6d71;      // 信息色暗色 30%
-$xt-dark-color-info-light-5: #525457;      // 信息色暗色 50%
-$xt-dark-color-info-light-7: #393a3c;      // 信息色暗色 70%
-$xt-dark-color-info-light-8: #2d2d2f;      // 信息色暗色 80%
-$xt-dark-color-info-light-9: #202121;      // 信息色暗色 90%
-$xt-dark-color-info-dark-2: #a6a9ad;       // 信息色亮色 20%
-

package/src/styles/theme/dark-variables.scss

@@ -1,29 +0,0 @@
-$xt-dark-color-primary: #0a7be0;            // 暗色主题主色调
-$xt-dark-color-success: #4BC376;             // 暗色主题成功颜色
-$xt-dark-color-warning: #E6B61e;             // 暗色主题警告颜色
-$xt-dark-color-danger: #c13737;              // 暗色主题危险颜色
-$xt-dark-color-info: #3f4249;                // 暗色主题信息文字颜色
-
-$xt-dark-color-text-primary: rgba(255, 255, 255, 0.95);      // 暗色主题主要文字颜色
-$xt-dark-color-text-regular: rgba(255, 255, 255, 0.8);       // 暗色主题常规文字颜色
-$xt-dark-color-text-secondary: rgba(255, 255, 255, 0.6);     // 暗色主题次要文字颜色
-$xt-dark-color-text-placeholder: rgba(255, 255, 255, 0.4);   // 暗色主题占位符文字颜色
-$xt-dark-color-text-disabled: rgba(255, 255, 255, 0.3);      // 暗色主题禁用状态文字颜色
-
-$xt-dark-color-bg-primary: #1f1f1f;                           // 暗色主题主背景色
-$xt-dark-color-bg-secondary: #2d2d2d;                         // 暗色主题次要背景色
-$xt-dark-color-bg-hover: #3d3d3d;                             // 暗色主题悬停背景色
-$xt-dark-color-bg-container: #1f1f1f;                         // 暗色主题容器背景色
-$xt-dark-color-bg-overlay: #2d2d2d;                           // 暗色主题浮层背景色
-
-$xt-dark-color-border: #434343;                               // 暗色主题边框颜色
-$xt-dark-color-border-light: #3d3d3d;                         // 暗色主题边框浅色
-$xt-dark-color-border-lighter: #3d3d3d;                       // 暗色主题边框更浅色
-$xt-dark-color-border-extra-light: #434343;                   // 暗色主题边框极浅色
-
-// 暗色主题按钮颜色
-$xt-dark-button-primary-bg: #1e40af;          // 暗色主题主按钮背景色
-$xt-dark-button-success-bg: #166534;          // 暗色主题成功按钮背景色
-$xt-dark-button-warning-bg: #78350f;          // 暗色主题警告按钮背景色
-$xt-dark-button-danger-bg: #991b1b;           // 暗色主题危险按钮背景色
-$xt-dark-button-info-bg: #374151;            // 暗色主题信息按钮背景色

package/lib/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>index demo</title>
-<script src="./index.umd.js"></script>
-
-<link rel="stylesheet" href="./index.css">
-
-
-<script>
-console.log(index)
-</script>