xt-element-ui 2.2.0 → 2.2.2

package/src/components/xt-date-picker/index.vue

@@ -31,6 +31,7 @@
         ref="singlePicker"
         v-model="singleValue"
         size="small"
+        class="xt-date"
         :disabled="disabled"
         append-to-body
         :format="format"
@@ -45,6 +46,7 @@
         v-else-if="!useRangeMode && realDateType === 'quarter'"
         v-model="singleValue"
         type="quarter"
+        class="xt-date"
         size="small"
         :disabled="disabled"
         :placeholder="innerPlaceholder"
@@ -89,12 +91,9 @@ const NORMAL_TO_RANGE_TYPE = {
   week: 'week'
 };
 
-import RangeDate from './component/RangeDate.vue';
-import Picker from './component/Picker.vue';
-
 export default {
   name: 'XtDatePicker',
-  components: { RangeDate, Picker },
+  components: { RangeDate: () => import( './component/RangeDate.vue'), Picker: () => import( './component/Picker.vue') },
   // 标准v-model：父组件 v-model="xxx"
   model: {
     prop: 'value',
@@ -250,22 +249,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.xt-date-picker-container {
-  display: inline-block;
-  width: 100%;
-}
-
-.xt-date-dimension {
-  margin-bottom: 8px;
-}
-
-.xt-date-picker-wrapper {
-  display: inline-block;
-}
-
-.xt-date {
-  width: 100%;
-}
-</style>

package/src/components/xt-date-picker/style/index.scss

@@ -0,0 +1,64 @@
+
+@import '../../../styles/variables.scss';
+.xt-date-picker-container {
+    display: inline-block;
+    width: 100%;
+    
+  }
+  .xt-date .el-date-editor .el-input__inner {
+    background-color: var(--xt-fill-color-blank);
+    border-color: var(--xt-border-color);
+    color: var(--xt-text-color-regular);
+    font-size: var(--xt-font-size-base, 14px);
+    border-radius: var(--xt-border-radius-small, 4px);
+    height: var(--xt-input-height);
+    line-height: var(--xt-input-height);
+    padding: 0 15px;
+}
+  .xt-date-dimension {
+    margin-bottom: 8px;
+  }
+  
+  .xt-date-picker-wrapper {
+    display: inline-block;
+  }
+  
+
+
+
+.date-picker {
+    .quarter-panel {
+      padding: 10px;
+    }
+  
+    .quarter-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+  
+    .quarter-list {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+    }
+  
+    .quarter-item {
+      text-align: center;
+      padding: 8px 0;
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  
+    .quarter-item.active {
+      background: #409eff;
+      color: #fff;
+      border-color: #409eff;
+    }
+  
+    ::v-deep .base-date-popper {
+      border-radius: 4px;
+    }
+  }

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

@@ -44,7 +44,7 @@
   height: var(--xt-input-height);
 }
 
-.xt-input .el-input__inner {
+.xt-input  .el-input__inner {
   background-color: var(--xt-input-bg-color);
   border-color: var(--xt-input-border-color);
   color: var(--xt-input-text-color);

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

@@ -51,8 +51,8 @@ export default {
     },
     type: {
       type: String,
-      default: 'card',
-      validator: (val) => ['default', 'card', 'border-card'].includes(val)
+      default: '',
+      validator: (val) => ['', 'card', 'border-card'].includes(val)
     },
     position: {
       type: String,
@@ -198,175 +198,4 @@ export default {
     })
   }
 }
-</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>
+</script>

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

@@ -3,155 +3,165 @@
 .xt-tabs {
   display: flex;
   flex-direction: column;
-}
-
-.xt-tabs--left,
-.xt-tabs--right {
-  flex-direction: row;
+  
+  &--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;
-  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;
+  display: flex;
 }
 
 .xt-tabs__nav {
   display: flex;
-}
-
-.xt-tabs--left .xt-tabs__nav,
-.xt-tabs--right .xt-tabs__nav {
-  flex-direction: column;
+  flex-wrap: nowrap;
 }
 
 .xt-tabs__nav-item {
   position: relative;
   padding: 12px 20px;
-  font-size: 14px;
-  color: $xt-color-text-secondary;
+  margin-right: 10px;
   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;
+  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;
-  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;
+  background-color: #409eff;
 }
 
 .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;
+  padding: 16px;
+  border-top: 1px solid #dcdfe6;
 }
 
 .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);
+  min-height: 40px;
 }

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

@@ -14,7 +14,7 @@
         'xt-text--' + size,
         { 'xt-text--bold': bold },
         { 'xt-text--money': format === 'money' },
-        { 'xt-text--ellipsis': ellipsis },
+        { 'xt-text--ellipsis': ellipsis && ellipsisRows == 1 },
         { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
       ]"
       :style="customStyle"
@@ -42,7 +42,7 @@
       'xt-text--' + size,
       { 'xt-text--bold': bold },
       { 'xt-text--money': format === 'money' },
-      { 'xt-text--ellipsis': ellipsis },
+      { 'xt-text--ellipsis': ellipsis && ellipsisRows == 1 },
       { 'xt-text--ellipsis-multiline': ellipsis && ellipsisRows > 1 }
     ]"
     :style="customStyle"
@@ -155,6 +155,7 @@ export default {
   },
   data() {
     return {
+      ellipsisWidth: undefined,
       isOverflow: false
     }
   },
@@ -171,6 +172,7 @@ export default {
       }
       if (this.ellipsis && this.ellipsisRows > 1) {
         style.WebkitLineClamp = this.ellipsisRows
+        style.width = `${this.ellipsisWidth}px`
       }
       return style
     },
@@ -250,6 +252,7 @@ export default {
 
       if (this.ellipsisRows > 1) {
         this.isOverflow = el.scrollHeight > el.clientHeight
+        this.ellipsisWidth =  el.clientWidth;
       } else {
         this.isOverflow = el.scrollWidth > el.clientWidth
       }

package/src/styles/theme/index.scss

@@ -7,5 +7,4 @@
 @import './border-radius.scss';
 @import './shadows.scss';
 @import './transitions.scss';
-@import './dark-variables.scss';
 @import './component-variables.scss';