ct-component-plus 0.0.7 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

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

@@ -49,6 +49,7 @@
           :key="item.value"
           :label="item.label"
           :value="item.value"
+          :disabled="item.disabled"
         >
           <slot name="option" :item="item" :index="index">
             <span>{{ item.label }}</span>

package/packages/components/table/src/table.vue

@@ -27,6 +27,8 @@
           :sortable="column.sortable ? 'custom' : false"
           :align="column.align || 'center'"
           :fixed="column.fixed || false"
+          show-overflow-tooltip
+          v-bind="column.rawAttr || {}"
         >
           <template #header="scope" v-if="column.slotHeader">
             <slot
@@ -58,6 +60,7 @@
               :align="column1.align || 'center'"
               :fixed="column1.fixed || false"
               show-overflow-tooltip
+              v-bind="column1.rawAttr || {}"
             >
               <template #default="scope">
                 <slot

package/packages/style/element.less

@@ -1,8 +1,7 @@
-
 :root {
   --el-color-primary: var(--ct-color-primary);
-  --el-color-danger:var(--ct-color-danger);
-  --el-color-warning:var(--ct-color-warning);
+  --el-color-danger: var(--ct-color-danger);
+  --el-color-warning: var(--ct-color-warning);
   --el-border-color: var(--ct-border-color);
   --el-component-size: var(--ct-component-size);
   --el-border-color-hover: var(--ct-color-grey-sub);
@@ -11,17 +10,20 @@
   --el-disabled-bg-color: var(--ct-component-disabled-bg-color);
   --el-disabled-border-color: var(--ct-border-color);
   --el-font-size-base: var(--ct-font-size);
-  --el-box-shadow-light: 0px 4px 14px 0px rgba(102,114,144,0.1);
+  --el-box-shadow-light: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
   --el-fill-color-light: var(--ct-component-hover-color);
 
   --ct-cascader-node-height: 30px;
 }
+
 .el {
   @R: .el;
+
   &-popper {
     &.is-light {
       border: var(--ct-popper-light-border);
-      box-shadow: 0px 4px 14px 0px rgba(102,114,144,0.1);
+      box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+
       .el-popper__arrow {
         &::before {
           border: var(--ct-popper-light-border);
@@ -29,29 +31,36 @@
       }
     }
   }
+
   &-radio {
     margin-right: 34px;
     @R: .el-radio;
+
     &:not(.is-disabled):hover {
       color: var(--ct-color-primary);
+
       @{R}__inner {
         border-color: var(--ct-color-primary);
       }
     }
+
     &__label {
       padding-left: 6px;
       font-weight: 400;
     }
+
     &__inner {
       &::after {
         width: 8px;
         height: 8px;
       }
     }
+
     &__input {
       &.is-checked {
         @{R}__inner {
           background: #fff;
+
           &::after {
             background-color: var(--ct-color-primary);
           }
@@ -59,44 +68,56 @@
       }
     }
   }
+
   &-checkbox {
     margin-right: 34px;
     @R: .el-checkbox;
+
     &:not(.is-disabled):hover {
       color: var(--ct-color-primary);
+
       @{R}__inner {
         border-color: var(--ct-color-primary);
       }
     }
+
     &__label {
       padding-left: 6px;
       font-weight: 400;
     }
   }
+
   &-input {
     &__wrapper {
       padding: 1px var(--ct-component-inner-padding);
+
       &:focus-within {
+
         .ct-icon,
         .el-icon {
           color: var(--ct-color-primary);
         }
       }
     }
+
     &__suffix {
       &-inner {
         line-height: calc(var(--el-input-height) - 2px);
       }
     }
   }
+
   &-select {
     --ct-select-poper-border: none;
     --ct-select-focus-icon-color: var(--ct-color-primary);
+
     &__popper {
       font-size: var(--ct-font-size);
-      &.el-popper{
+
+      &.el-popper {
         &.is-light {
           border: var(--ct-select-poper-border);
+
           .el-popper__arrow {
             &::before {
               border: var(--ct-select-poper-border);
@@ -105,32 +126,38 @@
         }
       }
     }
+
     &-dropdown {
       --ct-select-item-height: calc(var(--ct-component-size, 30px) - 2px);
       @R: .el-select-dropdown;
-      .el-scrollbar.is-empty{
+
+      .el-scrollbar.is-empty {
         @{R}__wrap {
-            display: none;
+          display: none;
         }
       }
+
       &__wrap {
         padding: 10px 0 4px;
       }
+
       &__item {
         height: var(--ct-select-item-height);
         line-height: var(--ct-select-item-height);
         margin: 0 6px 6px;
         padding: 0 10px;
         border-radius: var(--ct-border-radius);
+
         &:hover,
-        &.hover
-         {
+        &.hover {
           background-color: var(--ct-component-hover-color);
         }
+
         &.selected {
           font-weight: 400;
         }
       }
+
       &.is-multiple {
         @{R}__item {
           &.selected {
@@ -141,9 +168,11 @@
         }
       }
     }
+
     .el-input {
       &.is-focus {
         .el-input__suffix {
+
           .el-icon,
           .ct-icon {
             color: var(--ct-select-focus-icon-color);
@@ -152,10 +181,12 @@
       }
     }
   }
+
   &-cascader {
     .el-input {
       &.is-focus {
         .el-input__wrapper {
+
           .el-icon,
           .ct-icon {
             color: var(--ct-color-primary);
@@ -163,86 +194,106 @@
         }
       }
     }
-    &__dropdown {
 
-    }
+    &__dropdown {}
+
     &-menu {
       &__list {
         padding: 10px 6px;
       }
     }
+
     &-panel {
       --el-cascader-menu-border: 1px solid #F0F3F9;
     }
+
     &-node {
       height: var(--ct-cascader-node-height);
       padding: 0;
       line-height: var(--ct-cascader-node-height);
       border-radius: var(--ct-border-radius);
+
       &:not(:first-child) {
         margin-top: 6px;
       }
+
       &__label {
         padding: 0 10px;
       }
+
       &__prefix {
         display: none;
       }
+
       .arrow-right {
         color: var(--ct-color-grey-tip);
       }
+
       &.in-active-path,
       &.is-active,
       &.is-selectable.in-checked-path {
         font-weight: 400;
+
         .arrow-right {
           color: var(--ct-color-primary);
         }
       }
-      >.el-radio, 
+
+      >.el-radio,
       >.el-checkbox {
         margin-left: 10px;
         margin-right: -2px;
       }
     }
+
     &__suggestion {
       &-list {
         padding: 10px 6px;
       }
+
       &-item {
         height: 30px;
         padding: 0 10px;
         border-radius: var(--ct-border-radius);
+
         &:not(:first-child) {
           margin-top: 6px;
         }
+
         &.is-checked {
           font-weight: 400;
         }
       }
     }
   }
+
   &-date-editor {
     &.el-range-editor {
       &:not(.is-active):focus-within {
+
         .ct-icon,
         .el-icon {
           color: var(--el-input-icon-color);
         }
       }
     }
+
     &.is-active {
+
       .ct-icon,
       .el-icon {
         color: var(--ct-color-primary);
       }
     }
+
     .el-range-separator {
       color: var(--ct-color-grey-sub);
     }
+
     &.el-input__wrapper {
       padding: 1px var(--ct-component-inner-padding);
     }
+
     .el-input__prefix,
     .el-range__icon {
       position: absolute;
@@ -250,11 +301,13 @@
       top: 50%;
       transform: translateY(-50%);
       font-size: 16px;
+
       .el-input__icon {
         margin-right: 0;
-        background-color: #fff;
+        background-color: inherit;
       }
     }
+
     .el-range__close-icon i,
     .clear-icon {
       position: relative;
@@ -263,57 +316,70 @@
       background-color: #fff;
     }
   }
+
   &-date-picker {
     --el-datepicker-header-text-color: var(--ct-color-grey-transition);
     --ct-datepicker-border-color: #F0F3F9;
     width: 304px;
     @R: .el-picker-panel;
+
     @{R}__content {
       margin: 0 auto;
     }
+
     &__header {
       height: 44px;
       margin: 0;
       padding: 0 22px;
       line-height: 44px;
       border-bottom: 1px solid var(--ct-datepicker-border-color);
+
       .el-picker-panel__icon-btn {
         color: var(--ct-color-grey-transition);
+
         &:hover {
           color: var(--ct-color-primary);
         }
       }
+
       &-label {
         font-size: 14px;
         font-weight: 600;
       }
     }
+
     .el-picker-panel__content {
       width: 304px;
     }
   }
+
   &-month-table,
   &-year-table {
     padding: 9px 12px;
     font-size: 14px;
+
     td {
       padding: 9px;
-      > div {
+
+      >div {
         height: 26px;
         padding: 0;
       }
+
       .cell {
         width: 50px;
         height: 26px;
         line-height: 26px;
         border-radius: 4px;
       }
+
       &.today {
         .cell {
           font-weight: 400;
           border: 1px solid var(--ct-color-primary);
         }
       }
+
       &.current {
         .cell {
           background-color: var(--ct-color-primary);
@@ -323,49 +389,59 @@
       }
     }
   }
+
   &-date-range-picker {
     --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;
+
     &__content {
       padding: 0;
     }
+
     &__header {
       height: 44px;
       padding: 0 24px;
       line-height: 44px;
       border-bottom: 1px solid var(--ct-datepicker-border-color);
+
       div {
         font-size: 14px;
         font-weight: 600;
       }
     }
+
     .el-picker-panel__icon-btn {
       color: var(--ct-color-grey-transition);
       margin-top: 14px;
+
       &:hover {
         color: var(--ct-color-primary);
       }
     }
   }
+
   &-date-table {
     padding: 0 14px;
     margin: 0;
     margin-bottom: 14px;
     font-size: 14px;
+
     th {
       padding: 9px 12.5px;
     }
+
     tr {
       .in-range {
-        &:first-of-type{
+        &:first-of-type {
           .el-date-table-cell {
             border-radius: 4px 0 0 4px;
-  
+
           }
         }
+
         &:last-of-type {
           .el-date-table-cell {
             border-radius: 0 4px 4px 0;
@@ -373,6 +449,7 @@
         }
       }
     }
+
     td {
       &.today {
         .el-date-table-cell {
@@ -382,20 +459,24 @@
           }
         }
       }
+
       .el-date-table-cell {
         height: 26px;
         padding: 0;
+
         .el-date-table-cell__text {
           border-radius: 4px;
         }
       }
     }
   }
+
   &-picker {
     &__popper {
       &.is-light {
         border: none;
-        box-shadow: 0px 4px 14px 0px rgba(102,114,144,0.1);
+        box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+
         .el-popper__arrow {
           &::before {
             border: none;
@@ -404,6 +485,7 @@
       }
     }
   }
+
   &-pagination {
     @R: .el-pagination;
     --el-pagination-border-radius: 4px;
@@ -414,27 +496,34 @@
     --el-component-size: 28px;
     --el-border-color: var(--ct-border-color-light);
     --el-text-color-regular: var(--ct-color-black);
+
     .el-pager {
       li {
         margin: 0 var(--pagination-item-margin);
       }
     }
+
     .btn-prev {
       margin-right: var(--pagination-item-margin);
     }
+
     .btn-next {
       margin-left: var(--pagination-item-margin);
     }
+
     &.have-border {
       .pagination-border-item-style {
         border: 1px solid var(--ct-border-color-light);
+
         &:not([disabled]):hover {
           border-color: var(--ct-color-primary);
         }
       }
+
       .el-pager {
         li {
           .pagination-border-item-style;
+
           &.is-active {
             background-color: var(--ct-color-primary);
             border-color: var(--ct-color-primary);
@@ -442,25 +531,31 @@
           }
         }
       }
+
       .btn-prev,
       .btn-next {
         .pagination-border-item-style;
       }
     }
+
     &.is-background {
       --el-pagination-bg-color: var(--ct-color-bg);
+
       .el-pager {
         li {
           margin: 0 var(--pagination-item-margin);
         }
       }
+
       .btn-prev {
         margin-right: var(--pagination-item-margin);
       }
+
       .btn-next {
         margin-left: var(--pagination-item-margin);
         margin-right: 0;
       }
+
       @{R}__jump {
         .el-input__wrapper {
           background-color: var(--ct-color-bg);
@@ -469,55 +564,66 @@
       }
 
     }
+
     &__jump {
       margin-left: 34px;
+
       .el-input {
         width: 36px;
+
         &__wrapper {
           padding: 1px 5px;
         }
       }
     }
   }
+
   &-table {
     @R: .el-table;
     font-size: 15px;
     --el-table-header-text-color: var(--ct-font-color);
     --el-table-header-bg-color: #F0F3F9;
     --el-table-row-hover-bg-color: #F7F9FD;
-    .cell {
-      
-    }
+
+    .cell {}
+
     & @{R}__cell {
       padding: 16px 0;
     }
+
     thead {
       @{R}__cell {
         padding: 15px 0;
       }
     }
+
     th {
       &@{R}__cell {
         background-color: var(--el-table-header-bg-color);
+
         &.is-leaf {
           border-bottom-color: transparent;
         }
-        &.is-sortable{
-          .caret-wrapper{
+
+        &.is-sortable {
+          .caret-wrapper {
             display: none;
           }
         }
       }
+
       &:first-of-type {
         border-radius: 4px 0 0 4px;
       }
+
       &:last-of-type {
         border-radius: 0 4px 4px 0;
       }
     }
-    @{R}-column{
-      &--selection{
-        .cell{
+
+    @{R}-column {
+      &--selection {
+        .cell {
           width: 100%;
           justify-content: center;
         }
@@ -525,17 +631,19 @@
     }
   }
 
-  &-notification{
+  &-notification {
     border-radius: var(--ct-border-radius-l);
     box-shadow: 0px 4px 40px 0px rgba(52, 63, 77, 0.1);
     padding: 16px 24px 30px;
     border: none;
-    @R:.el-notification;
-    @{R}__group{
+    @R: .el-notification;
+
+    @{R}__group {
       margin-right: 0;
       margin-left: 0;
     }
-    @{R}__title{
+
+    @{R}__title {
       border-bottom: none;
       padding-bottom: 0;
       font-weight: 600;
@@ -543,56 +651,67 @@
       line-height: 24px;
       font-size: var(--ct-font-title-s);
     }
-    @{R}__content{
-      margin-top:16px;
+
+    @{R}__content {
+      margin-top: 16px;
       line-height: 26px;
     }
-    @{R}__closeBtn{
+
+    @{R}__closeBtn {
       top: 16px;
       right: 16px;
-      color:#d9dee7;
+      color: #d9dee7;
     }
   }
-  &-button{
+
+  &-button {
     border-radius: 3px;
     min-width: 80px;
   }
 
-  &-message{
+  &-message {
     height: 40px;
     padding: 11px 16px;
-    min-width:540px;
-    .el-icon.el-message__icon{
+    min-width: 540px;
+
+    .el-icon.el-message__icon {
       width: 18px;
       height: 18px;
       margin-right: 8px;
-      svg{
+
+      svg {
         width: unset;
         height: unset;
       }
     }
-    &__content{
+
+    &__content {
       line-height: 18px;
     }
-    .el-icon.el-message__closeBtn{
+
+    .el-icon.el-message__closeBtn {
       width: 14px;
       height: 14px;
       right: 16px;
       color: var(--ct-border-color);
     }
   }
-  &-message.ct-message--success{
+
+  &-message.ct-message--success {
     background-color: var(--ct-color-success-bg);
-    border:var(--ct-color-success-border) 1px solid;
+    border: var(--ct-color-success-border) 1px solid;
   }
+
   &-message.ct-message--info {
     background-color: var(--ct-color-primary-bg);
     border: var(--ct-color-primary-border) 1px solid;
   }
+
   &-message.ct-message--warning {
     background-color: var(--ct-color-warning-bg);
     border: var(--ct-color-warning-border) 1px solid;
   }
+
   &-message.ct-message--error {
     background-color: var(--ct-color-danger-bg);
     border: var(--ct-color-danger-border) 1px solid;