ct-component-plus 2.0.2 → 2.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.1.3",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -16,8 +16,7 @@
   },
   "dependencies": {
     "cingta-icon": "^2.1.6",
-    "element-plus": "~2.12.0",
-    "publish": "^0.6.0",
+    "element-plus": "2.10.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
@@ -34,4 +33,4 @@
     "vuepress": "^2.0.0-beta.63",
     "vuepress-plugin-demo-container": "^0.2.0"
   }
-}
+}

package/packages/components/input/src/input.vue

@@ -62,7 +62,7 @@ defineExpose({
   ref: inputRef,
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-input {
   @R: .ct-input;
   --ct-input-focus-color: var(--ct-color-primary);
@@ -104,4 +104,4 @@ defineExpose({
     }
   }
 }
-</style>
+</style>

package/packages/components/select/src/select.vue

@@ -155,9 +155,9 @@ const selectText = computed(() => {
       result = selectObj.value.map((item) => item.label).join(cnt);
     }
   }
-  nextTick(() => {
-    selectRef.value.$refs.reference.input.value = result;
-  });
+  // nextTick(() => {
+  //   selectRef.value.$refs.reference.input.value = result;
+  // });
   return result;
 });
 const emptyText = computed(() => {
@@ -358,7 +358,21 @@ defineExpose({
 </script>
 <style lang="less">
 .ct-select {
-  width: 214px;
+  &.el-select {
+    position: relative;
+    width: 214px;
+    &__selected-item {
+      &:nth-child(1) {
+        display: none;
+      }
+      &:nth-child(2) {
+        display: none;
+      }
+      &:nth-child(3) {
+        display: flex;
+      }
+    }
+  }
   &__top {
     padding: 0 16px;
     font-size: var(--ct-font-size);
@@ -407,7 +421,7 @@ defineExpose({
     z-index: 3;
     right: var(--ct-component-inner-padding);
     top: 50%;
-    height: calc(var(--ct-component-size) - 2px);
+    height: calc(var(--ct-component-size) - 8px);
     transform: translateY(-50%);
     background-color: #fff;
   }
@@ -419,18 +433,25 @@ defineExpose({
     color: var(--ct-color-grey-sub);
   }
   &.is-multiple {
-    // &::after {
-    //   content: attr(select-text);
-    //   position: absolute;
-    //   left: var(--ct-component-inner-padding);
-    //   right: calc(var(--ct-component-inner-padding) * 2);
-    //   top: 50%;
-    //   transform: translateY(-50%);
-    //   text-overflow: ellipsis;
-    //   overflow: hidden;
-    //   white-space: nowrap;
-    //   cursor: pointer;
-    // }
+    &::after {
+      content: attr(select-text);
+      position: absolute;
+      left: var(--ct-component-inner-padding);
+      right: calc(var(--ct-component-inner-padding) * 2);
+      top: 50%;
+      transform: translateY(-50%);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      cursor: pointer;
+      pointer-events: none;
+    }
+    .el-select__placeholder.is-transparent {
+      display: block;
+    }
+    .el-select__selected-item {
+      display: none;
+    }
   }
 }
 </style>

package/packages/components/year-select/src/year-select.vue

@@ -135,9 +135,12 @@ const getYearList = () => {
   }
   yearList.value = yearArr;
 };
-watch(() => props.range, () => {
-  getYearList();
-})
+watch(
+  () => props.range,
+  () => {
+    getYearList();
+  }
+);
 const filterHandleE = (str) => {
   //处理结束年
   if (judgeYear(str) && judgeRange(str)) {
@@ -207,7 +210,7 @@ onMounted(() => {
   getYearList();
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-year-select {
   --el-select-input-focus-border-color: transparent;
   --ct-year-select-select-inner-box-shadow: none;
@@ -273,5 +276,15 @@ onMounted(() => {
       }
     }
   }
+  .el-select__wrapper {
+    padding: 1px 12px;
+    min-height: 30px;
+    box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    &.is-focused,
+    &.is-hovering:not(.is-focused),
+    &.is-disabled {
+      box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    }
+  }
 }
-</style>
+</style>

package/packages/style/element.less

@@ -93,7 +93,6 @@
       padding: 1px var(--ct-component-inner-padding);
 
       &:focus-within {
-
         .ct-icon,
         .el-icon {
           color: var(--ct-color-primary);
@@ -178,7 +177,6 @@
     .el-input {
       &.is-focus {
         .el-input__suffix {
-
           .el-icon,
           .ct-icon {
             color: var(--ct-select-focus-icon-color);
@@ -192,7 +190,6 @@
     .el-input {
       &.is-focus {
         .el-input__wrapper {
-
           .el-icon,
           .ct-icon {
             color: var(--ct-color-primary);
@@ -201,7 +198,8 @@
       }
     }
 
-    &__dropdown {}
+    &__dropdown {
+    }
 
     &-menu {
       &__list {
@@ -210,7 +208,7 @@
     }
 
     &-panel {
-      --el-cascader-menu-border: 1px solid #F0F3F9;
+      --el-cascader-menu-border: 1px solid #f0f3f9;
     }
 
     &-node {
@@ -245,8 +243,8 @@
         }
       }
 
-      >.el-radio,
-      >.el-checkbox {
+      > .el-radio,
+      > .el-checkbox {
         margin-left: 10px;
         margin-right: -2px;
       }
@@ -276,7 +274,6 @@
   &-date-editor {
     &.el-range-editor {
       &:not(.is-active):focus-within {
-
         .ct-icon,
         .el-icon {
           color: var(--el-input-icon-color);
@@ -285,7 +282,6 @@
     }
 
     &.is-active {
-
       .ct-icon,
       .el-icon {
         color: var(--ct-color-primary);
@@ -325,7 +321,7 @@
 
   &-date-picker {
     --el-datepicker-header-text-color: var(--ct-color-grey-transition);
-    --ct-datepicker-border-color: #F0F3F9;
+    --ct-datepicker-border-color: #f0f3f9;
     width: 304px;
     @R: .el-picker-panel;
 
@@ -367,7 +363,7 @@
     td {
       padding: 9px;
 
-      >div {
+      > div {
         height: 26px;
         padding: 0;
       }
@@ -397,8 +393,8 @@
   }
 
   &-date-range-picker {
-    --ct-datepicker-border-color: #F0F3F9;
-    --el-datepicker-inrange-bg-color: #F5F7FC;
+    --ct-datepicker-border-color: #f0f3f9;
+    --el-datepicker-inrange-bg-color: #f5f7fc;
     --el-datepicker-inner-border-color: var(--ct-datepicker-border-color);
     --el-datepicker-header-text-color: var(--ct-color-grey-transition);
     width: 608px;
@@ -444,7 +440,6 @@
         &:first-of-type {
           .el-date-table-cell {
             border-radius: 4px 0 0 4px;
-
           }
         }
 
@@ -568,7 +563,6 @@
           box-shadow: none;
         }
       }
-
     }
 
     &__jump {
@@ -588,11 +582,12 @@
     @R: .el-table;
     font-size: 15px;
     --el-table-header-text-color: var(--ct-font-color);
-    --el-table-header-bg-color: #F0F3F9;
+    --el-table-header-bg-color: #f0f3f9;
     // --el-table-row-hover-bg-color: #F7F9FD;
-    --el-table-row-hover-bg-color: #FAFAFC;
+    --el-table-row-hover-bg-color: #fafafc;
 
-    .cell {}
+    .cell {
+    }
 
     & @{R}__cell {
       padding: 16px 0;
@@ -702,6 +697,12 @@
       right: 16px;
       color: var(--ct-border-color);
     }
+    // 消息关闭按钮位置展示
+    .el-icon.el-message__closeBtn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
   &-message.ct-message--success {
@@ -723,4 +724,4 @@
     background-color: var(--ct-color-danger-bg);
     border: var(--ct-color-danger-border) 1px solid;
   }
-}
+}