iov-design 2.15.55 → 2.15.57

package/packages/switch/src/component.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="el-switch"
-    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+    :class="[ size ? 'el-switch--' + size : '', type ? 'el-switch--' + type : '', {'is-disabled': switchDisabled}, {'is-checked': checked}  ]"
     role="switch"
     :aria-checked="checked"
     :aria-disabled="switchDisabled"
@@ -20,15 +20,15 @@
       @keydown.enter="switchValue"
     >
     <span
-      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
+      :class="['el-switch__label', 'el-switch__label--left', inactiveIconClass ? 'el-switch__label--left-icon' : '', inactiveText ? 'el-switch__label--left-text' : '', !checked ? 'is-active' : '']"
       v-if="inactiveIconClass || inactiveText">
       <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
       <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
     </span>
-    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
+    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth > 0 ? coreWidth + 'px' : '' }">
     </span>
     <span
-      :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
+      :class="['el-switch__label', 'el-switch__label--right', activeIconClass ? 'el-switch__label--right-icon' : '', activeText ? 'el-switch__label--right-text' : '', checked ? 'is-active' : '']"
       v-if="activeIconClass || activeText">
       <i :class="[activeIconClass]" v-if="activeIconClass"></i>
       <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
@@ -59,7 +59,7 @@
       },
       width: {
         type: Number,
-        default: 40
+        default: 0
       },
       activeIconClass: {
         type: String,
@@ -95,6 +95,14 @@
         type: Boolean,
         default: true
       },
+      size: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'circle'
+      },
       id: String
     },
     data() {
@@ -164,7 +172,7 @@
     },
     mounted() {
       /* istanbul ignore if */
-      this.coreWidth = this.width || 40;
+      this.coreWidth = this.width;
       if (this.activeColor || this.inactiveColor) {
         this.setBackgroundColor();
       }

package/packages/tabs/src/tabs.vue

@@ -21,7 +21,11 @@
         default: 'top'
       },
       beforeLeave: Function,
-      stretch: Boolean
+      stretch: Boolean,
+      primary: {
+        type: Boolean,
+        default: false
+      }
     },
 
     provide() {
@@ -167,6 +171,7 @@
           'el-tabs': true,
           'el-tabs--normal': !type,
           'el-tabs--card': type === 'card',
+          'el-tabs--card-primary': type === 'card' && this.primary,
           'el-tabs--capsule': type === 'capsule',
           [`el-tabs--${size}`]: size,
           [`el-tabs--${tabPosition}`]: true,

package/packages/theme-chalk/src/cascader.scss

@@ -1,213 +1,213 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "./input";
-@import "./popper";
-@import "./tag";
-@import "./cascader-panel";
-
-@include b(cascader) {
-  display: block;
-  position: relative;
-  font-size: $--input-font-size;
-  line-height: $--input-height;
-
-  &:not(.is-disabled):hover {
-    .el-input__inner {
-      cursor: pointer;
-      border-color: $--input-hover-border;
-    }
-  }
-
-  .el-input {
-    cursor: pointer;
-
-    .el-input__suffix {
-      right: 8px;
-    }
-    .el-input__inner {
-      text-overflow: ellipsis;
-
-      &:focus {
-        border-color: $--input-focus-border;
-      }
-    }
-
-    .iov-icon-arrow-up {
-      padding-right: 0;
-      color: $--select-input-color;
-      font-size: $--select-icon-size;
-      transition: transform .3s;
-      transform: rotateZ(180deg);
-
-      @include when(reverse) {
-        transform: rotateZ(0deg);
-      }
-    }
-
-    .el-icon-circle-close:hover {
-      color: $--input-clear-hover-color;
-    }
-
-    @include when(focus) {
-      .el-input__inner {
-        border-color: $--input-focus-border;
-      }
-    }
-  }
-
-  .el-tag {
-    height: $--input-height - 8px;
-    line-height: $--input-height - 8px;
-  }
-
-  @include m(medium) {
-    font-size: $--input-medium-font-size;
-    line-height: $--input-medium-height;
-    .el-tag--medium {
-      height: $--input-medium-height - 8px;
-      line-height: $--input-medium-height - 8px;
-    }
-  }
-
-  @include m(small) {
-    font-size: $--input-small-font-size;
-    line-height: $--input-small-height;
-    .el-tag--small {
-      height: $--input-small-height - 8px;
-      line-height: $--input-small-height - 8px;
-    }
-  }
-
-  @include m(mini) {
-    font-size: $--input-mini-font-size;
-    line-height: $--input-mini-height;
-    .el-tag--mini {
-      height: $--input-mini-height - 8px;
-      line-height: $--input-mini-height - 8px;
-    }
-  }
-
-  @include when(disabled) {
-    .el-cascader__label {
-      z-index: #{$--index-normal + 1};
-      color: $--disabled-color-base;
-    }
-  }
-
-  @include e(dropdown) {
-    margin: 4px 0;
-    font-size: $--cascader-menu-font-size;
-    background: $--cascader-menu-fill;
-    border: $--cascader-menu-border;
-    border-radius: $--cascader-menu-radius;
-    box-shadow: $--cascader-menu-shadow;
-    .popper__arrow {
-      display: none;
-    }
-  }
-
-  @include e(tags) {
-    position: absolute;
-    left: 0;
-    right: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    line-height: normal;
-    text-align: left;
-    box-sizing: border-box;
-    z-index: 3;
-    align-items: center;
-    // pointer-events: none;
-
-    .el-tag {
-      display: inline-flex;
-      align-items: center;
-      max-width: 100%;
-      margin: 2px 6px 2px 0;
-      text-overflow: ellipsis;
-      color: $--color-text-6;
-      pointer-events: auto;
-
-      &.is-disabled {
-        color: $--color-text-3;
-        background: $--color-fill-3;
-      }
-
-      &:not(.is-hit) {
-        border-color: transparent;
-      }
-
-      > span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .iov-icon-close {
-        flex: none;
-      }
-    }
-  }
-
-  @include e(suggestion-panel) {
-    border-radius: $--cascader-menu-radius;
-  }
-
-  @include e(suggestion-list) {
-    max-height: 204px;
-    margin: 0;
-    padding: 4px;
-    font-size: $--font-size-base;
-    color: $--cascader-menu-font-color;
-    text-align: center;
-  }
-
-  @include e(suggestion-item) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 32px;
-    padding: 0 12px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-    border-radius: 2px;
-
-    &:hover, &:focus {
-      background: $--cascader-node-background-hover;
-    }
-
-    &.is-checked {
-      color: $--cascader-menu-selected-font-color;
-      font-weight: 500;
-      background: $--color-primary-1;
-    }
-
-    > span {
-      margin-right: 10px;
-    }
-  }
-
-  @include e(empty-text) {
-    margin: 8px 0;
-    color: $--cascader-color-empty;
-  }
-
-  @include e(search-input) {
-    flex: 1;
-    height: 24px;
-    min-width: 10px;
-    margin: 2px 0;
-    padding: 0;
-    color: $--cascader-menu-font-color;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-
-    &::placeholder {
-      color: $--color-text-placeholder;
-    }
-  }
-}
+@import "mixins/mixins";
+@import "common/var";
+@import "./input";
+@import "./popper";
+@import "./tag";
+@import "./cascader-panel";
+
+@include b(cascader) {
+  display: block;
+  position: relative;
+  font-size: $--input-font-size;
+  line-height: $--input-height;
+
+  &:not(.is-disabled):hover {
+    .el-input__inner {
+      cursor: pointer;
+      border-color: $--input-hover-border;
+    }
+  }
+
+  .el-input {
+    cursor: pointer;
+
+    .el-input__suffix {
+      right: 8px;
+    }
+    .el-input__inner {
+      text-overflow: ellipsis;
+
+      &:focus {
+        border-color: $--input-focus-border;
+      }
+    }
+
+    .iov-icon-arrow-up {
+      padding-right: 0;
+      color: $--color-fill-5;
+      font-size: $--select-icon-size;
+      transition: transform .3s;
+      transform: rotateZ(180deg);
+
+      @include when(reverse) {
+        transform: rotateZ(0deg);
+      }
+    }
+
+    .el-icon-circle-close:hover {
+      color: $--input-clear-hover-color;
+    }
+
+    @include when(focus) {
+      .el-input__inner {
+        border-color: $--input-focus-border;
+      }
+    }
+  }
+
+  .el-tag {
+    height: $--input-height - 8px;
+    line-height: $--input-height - 8px;
+  }
+
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
+    line-height: $--input-medium-height;
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+    }
+  }
+
+  @include m(small) {
+    font-size: $--input-small-font-size;
+    line-height: $--input-small-height;
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+    }
+  }
+
+  @include m(mini) {
+    font-size: $--input-mini-font-size;
+    line-height: $--input-mini-height;
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
+    }
+  }
+
+  @include when(disabled) {
+    .el-cascader__label {
+      z-index: #{$--index-normal + 1};
+      color: $--disabled-color-base;
+    }
+  }
+
+  @include e(dropdown) {
+    margin: 4px 0;
+    font-size: $--cascader-menu-font-size;
+    background: $--cascader-menu-fill;
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+    box-shadow: $--cascader-menu-shadow;
+    .popper__arrow {
+      display: none;
+    }
+  }
+
+  @include e(tags) {
+    position: absolute;
+    left: 0;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    line-height: normal;
+    text-align: left;
+    box-sizing: border-box;
+    z-index: 3;
+    align-items: center;
+    // pointer-events: none;
+
+    .el-tag {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      margin: 2px 6px 2px 0;
+      text-overflow: ellipsis;
+      color: $--color-text-6;
+      pointer-events: auto;
+
+      &.is-disabled {
+        color: $--color-text-3;
+        background: $--color-fill-3;
+      }
+
+      &:not(.is-hit) {
+        border-color: transparent;
+      }
+
+      > span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .iov-icon-close {
+        flex: none;
+      }
+    }
+  }
+
+  @include e(suggestion-panel) {
+    border-radius: $--cascader-menu-radius;
+  }
+
+  @include e(suggestion-list) {
+    max-height: 204px;
+    margin: 0;
+    padding: 4px;
+    font-size: $--font-size-base;
+    color: $--cascader-menu-font-color;
+    text-align: center;
+  }
+
+  @include e(suggestion-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 32px;
+    padding: 0 12px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+    border-radius: 2px;
+
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
+    }
+
+    &.is-checked {
+      color: $--cascader-menu-selected-font-color;
+      font-weight: 500;
+      background: $--color-primary-1;
+    }
+
+    > span {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(empty-text) {
+    margin: 8px 0;
+    color: $--cascader-color-empty;
+  }
+
+  @include e(search-input) {
+    flex: 1;
+    height: 24px;
+    min-width: 10px;
+    margin: 2px 0;
+    padding: 0;
+    color: $--cascader-menu-font-color;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+  }
+}

package/packages/theme-chalk/src/input.scss

@@ -244,6 +244,7 @@
 
     .el-input__icon {
       cursor: not-allowed;
+      color: $--color-fill-4;
     }
     .el-input__prefix,
     .el-input__suffix,

package/packages/theme-chalk/src/iovfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iovfont';  /* Project id 4466910 */
-  src: url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff2?t=1750820266142') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff?t=1750820266142') format('woff'),
-       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.ttf?t=1750820266142') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff2?t=1753354243540') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff?t=1753354243540') format('woff'),
+       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.ttf?t=1753354243540') format('truetype');
 }
 
 [class^="iov-icon-"], [class*=" iov-icon-"] {
@@ -36,6 +36,39 @@
   }
 }
 
+.iov-icon-bottle:before {
+  content: "\e6fe";
+}
+
+.iov-icon-line-github:before {
+  content: "\e6f8";
+}
+
+
+.iov-icon-sun:before {
+  content: "\e6f9";
+}
+
+.iov-icon-panel:before {
+  content: "\e6fa";
+}
+
+.iov-icon-cube:before {
+  content: "\e6fb";
+}
+
+.iov-icon-github:before {
+  content: "\e6fc";
+}
+
+.iov-icon-menu-fold-right:before {
+  content: "\e6fd";
+}
+
+.iov-icon-cdkey:before {
+  content: "\e6f7";
+}
+
 .iov-icon-circle-minus:before {
   content: "\e6f6";
 }
@@ -632,7 +665,7 @@
   content: "\e66a";
 }
 
-.iov-icon-menu-fold:before {
+.iov-icon-menu-fold-left:before {
   content: "\e66b";
 }