oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-select/index.scss

@@ -11,19 +11,19 @@
   text-align: left;
   .oxy-select__label {
     margin: auto 0;
-    color: $-cell-title-color;
-    margin-right: $-cell-padding;
+    color: $-select-label-color;
+    margin-right: $-select-label-gap;
     box-sizing: border-box;
-    font-size: $-input-fs;
+    font-size: $-select-fs;
   }
   .oxy-select__icon {
     position: absolute;
     right: 0;
-    font-size: $-input-icon-size;
-    color: $-input-icon-color;
+    font-size: $-select-icon-size;
+    color: $-select-icon-color;
   }
   .oxy-select__icon-clear {
-    color: $-input-clear-color;
+    color: $-select-clear-icon-color;
   }
   .oxy-select__icon-arrow {
     transition: transform .2s;
@@ -36,12 +36,12 @@
     flex: 1;
   }
   .oxy-select__wrapper {
-    font-size: $-input-fs;
-    color: $-input-color;
+    font-size: $-select-fs;
+    color: $-select-text-color;
     border: 1px solid $-color-border;
     box-sizing: border-box;
-    border-radius: 8rpx;
-    padding: 0 $-input-cell-padding;
+    border-radius: $-select-wrapper-radius;
+    padding: 0 $-select-wrapper-padding-x;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
@@ -50,7 +50,7 @@
     flex-direction: row;
     width: 100%;
     flex: 1;
-    min-height: $-input-inner-height;
+    min-height: $-select-wrapper-min-height;
     transition: all 0.2s;
 
     &:hover:not(.is-disabled):not(.is-readonly) {
@@ -59,7 +59,7 @@
 
     &.is-focus:not(.is-disabled):not(.is-readonly) {
       border-color: $-color-theme;
-      box-shadow: 0 0 0 4rpx rgba($-color-theme, 0.1);
+      box-shadow: $-select-focus-shadow;
     }
 
     &.is-disabled {
@@ -91,55 +91,71 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
+    min-width: 0;
     padding: 8rpx 0;
+  }
 
-    &-item {
-      font-size: 24rpx;
-      border-radius: 8rpx;
-      white-space: nowrap;
-      height: 48rpx;
-      padding: 0 16rpx;
-      line-height: 44rpx;
-      box-sizing: border-box;
-      margin: 4rpx 8rpx 4rpx 0;
-      display: flex;
-      max-width: 100%;
-      align-items: center;
-      background-color: $-color-bg;
-      border: 1px solid $-color-border-light;
-      color: $-color-secondary;
-      transition: all 0.2s;
+  .oxy-select__tags-item {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    margin: 8rpx 8rpx 8rpx 0;
+  }
 
-      &:hover {
-        border-color: $-color-theme;
-        color: $-color-theme;
-      }
+  :deep(.oxy-select__tags-item-tag.oxy-tag.is-round) {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 56rpx;
+    max-width: 100%;
+    height: 56rpx;
+    padding: 0 20rpx;
+    background-color: $-color-bg;
+    border-color: $-color-border-light;
+    border-radius: $-select-tag-radius;
+    color: $-color-secondary;
+    font-size: $-select-tag-font-size;
+    line-height: 52rpx;
+    transition: all 0.2s;
 
-      &-text {
-        font-size: 24rpx;
-        white-space: nowrap;
-        line-height: 44rpx;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .oxy-select__icon-error{
-      margin-left: 8rpx;
-      font-size: 28rpx;
-      color: $-color-aid;
-      cursor: pointer;
-
-      &:hover {
-        color: $-color-danger;
-      }
+    &:hover {
+      border-color: $-color-theme;
+      color: $-color-theme;
     }
   }
 
+  :deep(.oxy-select__tags-item-tag .oxy-tag__text) {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+    vertical-align: middle;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close) {
+    margin-left: 12rpx;
+    margin-right: 0;
+    height: auto;
+    line-height: 1;
+    color: $-color-aid;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close:active) {
+    color: $-color-danger;
+  }
+
+  .oxy-select__tags-item-text {
+    font-size: $-select-tag-font-size;
+  }
+
   .oxy-select__input {
     flex: 1;
     font-size: $-fs-content;
-    height: 44rpx;
-    line-height: 44rpx;
+    height: 52rpx;
+    line-height: 52rpx;
   }
 
   .oxy-select__input-plac {
@@ -173,16 +189,48 @@
     width: 100%;
     background-color: $-color-white;
     border: 1px solid $-color-border-light;
-    border-radius: 16rpx;
-    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+    border-radius: $-select-dropdown-radius;
+    box-shadow: $-select-dropdown-shadow;
     z-index: 100;
-    padding: 12rpx 0;
+    padding: 16rpx 0;
     overflow: hidden;
   }
 
+  .oxy-select__dropdown-transition {
+    .oxy-select__selector {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      will-change: transform, opacity;
+      transition-property: opacity, transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .oxy-select__selector__down {
+      transform-origin: center top;
+    }
+
+    .oxy-select__selector__upwards {
+      transform-origin: center bottom;
+    }
+
+    &.oxy-fade-enter,
+    &.oxy-fade-leave-to {
+      .oxy-select__selector.oxy-select__selector__down {
+        opacity: 0;
+        transform: translateY(-12rpx) scale(0.98);
+      }
+
+      .oxy-select__selector.oxy-select__selector__upwards {
+        opacity: 0;
+        transform: translateY(12rpx) scale(0.98);
+      }
+    }
+  }
+
   .oxy-select__selector-scroll {
     /* #ifndef APP-NVUE */
-    max-height: 480rpx;
+    max-height: 400rpx;
     box-sizing: border-box;
     /* #endif */
   }
@@ -192,10 +240,10 @@
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
-    min-height: 80rpx;
+    min-height: 72rpx;
     line-height: 1.4;
     font-size: $-fs-content;
-    padding: 16rpx 32rpx;
+    padding: 16rpx 24rpx;
     box-sizing: border-box;
     transition: background-color 0.2s;
   }
@@ -213,8 +261,8 @@
 
     &.oxy-select_selector-item_active {
       color: $-color-theme;
-      background-color: rgba($-color-theme, 0.05);
-      font-weight: 500;
+      background-color: $-select-active-bg;
+      font-weight: $-fw-medium;
     }
   }
 
@@ -233,7 +281,7 @@
     font-size: $-fs-secondary;
 
     &-icon {
-      margin-right: 16rpx;
+      margin-right: $-spacing-16;
       animation: rotate 1s linear infinite;
     }
   }
@@ -256,10 +304,10 @@
   }
 
   .oxy-select__selector-arrow {
-    filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
+    filter: $-select-dropdown-filter-shadow;
 
     left: 10%;
-    margin-right: 6rpx;
+    margin-right: 8rpx;
     border-top-width: 0;
     border-bottom-color: $-color-border-light;
   }
@@ -274,8 +322,8 @@
 
   .oxy-select__input-text {
     width: 100%;
-    font-size: $-input-fs;
-    color: $-input-color;
+    font-size: $-select-fs;
+    color: $-select-text-color;
     outline: none;
     border: none;
     background: none;
@@ -287,11 +335,11 @@
   .oxy-select__input-selector {
     position: absolute;
     z-index: 1;
-    left: 20rpx;
+    left: 0;
     right: 60rpx;
     width: auto;
     &::-webkit-input-placeholder {
-      color: $-input-placeholder-color;
+      color: $-select-placeholder-color;
     }
   }
 
@@ -301,12 +349,12 @@
     margin-left: 8rpx;
     flex: 1;
     &::-webkit-input-placeholder {
-      color: $-input-placeholder-color;
+      color: $-select-placeholder-color;
     }
   }
 
   .oxy-select__input-placeholder {
-    color: $-input-placeholder-color;
+    color: $-select-placeholder-color;
   }
 
   .oxy-select--mask {
@@ -322,7 +370,7 @@
     .oxy-select__wrapper {
       border: 0;
       padding: 0;
-      min-height: $-input-cell-height;
+      min-height: $-select-no-border-min-height;
       &.is-focus:not(.is-disabled):not(.is-readonly) {
         box-shadow: none;
       }

package/components/oxy-select/oxy-select.vue

@@ -7,15 +7,27 @@
       <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly, 'is-focus': showSelector }]">
         <view class="oxy-select__input-box" @click="toggleSelector">
           <view class="oxy-select__tags" v-if="multiple && currentList.length > 0">
-            <view class="oxy-select__tags-item" v-for="item in displayTags" :key="item[valueKey]">
-              <span class="oxy-select__tags-item-text">{{ formatItemName(item) }}</span>
-              <view v-if="!disabled && !readonly" @click.stop="delItem(item)">
-                <oxy-icon custom-class="oxy-select__icon-error" name="close" />
-              </view>
-            </view>
-            <view v-if="currentList.length > collapseTagsNum && collapseTags" class="oxy-select__tags-item">
-              <span class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</span>
-            </view>
+            <oxy-tag
+              v-for="item in displayTags"
+              :key="item[valueKey]"
+              custom-class="oxy-select__tags-item-tag"
+              class="oxy-select__tags-item"
+              plain
+              round
+              :closable="!disabled && !readonly"
+              @close="delItem(item)"
+            >
+              <text class="oxy-select__tags-item-text">{{ formatItemName(item) }}</text>
+            </oxy-tag>
+            <oxy-tag
+              v-if="currentList.length > collapseTagsNum && collapseTags"
+              custom-class="oxy-select__tags-item-tag"
+              class="oxy-select__tags-item"
+              plain
+              round
+            >
+              <text class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</text>
+            </oxy-tag>
             <input
               v-if="filterable && !disabled && !readonly"
               @input="inputChange"
@@ -25,7 +37,7 @@
               v-model="filterInput"
             />
           </view>
-          <view v-else-if="current && current.length > 0 && !showSelector" class="oxy-select__input-text">
+          <view v-else-if="current && current.length > 0 && (!showSelector || !filterable)" class="oxy-select__input-text">
             {{ current }}
           </view>
           <input
@@ -52,7 +64,7 @@
             name="arrow-down"
           />
         </view>
-        <oxy-transition :show="showSelector" name="fade" :duration="duration" :lazy-render="false">
+        <oxy-transition custom-class="oxy-select__dropdown-transition" :show="showSelector" name="fade" :duration="duration" :lazy-render="false">
           <view class="oxy-select--mask" @click="toggleSelector" />
           <view class="oxy-select__selector" :class="isDown ? 'oxy-select__selector__down' : 'oxy-select__selector__upwards'">
             <view class="oxy-select__selector-arrow"></view>
@@ -103,6 +115,7 @@ import { objToStyle } from '../common/util'
 import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 import { selectProps, type SelectProps } from './types'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
+import OxyTag from '../oxy-tag/oxy-tag.vue'
 
 type SelectOption = Record<string, any>
 type SelectModelValue = SelectProps['modelValue']

package/components/oxy-select-picker/index.scss

@@ -77,7 +77,7 @@
     line-height: 144rpx;
   }
   @include e(wrapper) {
-    padding: 0 20rpx;
+    padding: 0 24rpx;
     position: relative;
     max-height: 712rpx;
     box-sizing: border-box;
@@ -97,6 +97,6 @@
   }
 
   @include e(footer) {
-    padding: 48rpx 30rpx;
+    padding: 52rpx 32rpx;
   }
 }

package/components/oxy-sidebar-item/index.scss

@@ -17,7 +17,7 @@
 
     @include m(disabled) {
       color: $-dark-color-gray;
-  
+
       &:active {
         background-color: $-dark-background2;
       }
@@ -39,26 +39,35 @@
   box-sizing: border-box;
   white-space: wrap;
   line-height: $-sidebar-item-line-height;
+  transition: background-color $-sidebar-transition-duration $-sidebar-transition-timing-function,
+    border-radius $-sidebar-transition-duration $-sidebar-transition-timing-function;
 
   &:active {
     background-color: $-sidebar-hover-bg;
   }
 
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: $-sidebar-active-border-width;
+    height: $-sidebar-active-border-height;
+    background: $-sidebar-active-color;
+    transform: translateY(-50%) scaleY(0.5);
+    transform-origin: center;
+    opacity: 0;
+    content: '';
+    border-radius: $-sidebar-active-border-width;
+    transition: all $-sidebar-transition-duration $-sidebar-transition-timing-function;
+  }
+
   @include m(active) {
-    font-weight: 600;
     background: $-sidebar-active-bg;
     color: $-sidebar-active-color;
 
     &::before {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: $-sidebar-active-border-width;
-      height: $-sidebar-active-border-height;
-      background: $-sidebar-active-color;
-      transform: translateY(-50%);
-      content: '';
-      border-radius: $-sidebar-active-border-width;
+      transform: translateY(-50%) scaleY(1);
+      opacity: 1;
     }
 
     &:active {
@@ -91,7 +100,7 @@
 
   @include edeep(icon) {
     font-size: $-sidebar-icon-size;
-    margin-right: 4rpx;
+    margin-right: 8rpx;
   }
 
-}
+}

package/components/oxy-skeleton/index.scss

@@ -63,7 +63,7 @@
         content: ' ';
         position: absolute;
         animation: oxy-skeleton-gradient 1.5s linear 2s infinite;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $-skeleton-animation-gradient, rgba(255, 255, 255, 0));
+        background: linear-gradient(90deg, transparent, $-skeleton-animation-gradient, transparent);
         inset: 0;
       }
     }

package/components/oxy-slider/index.scss

@@ -9,7 +9,7 @@
 
     @include e(label) {
       color: $-dark-color;
-      background-color: rgba($color: $-dark-background2, $alpha: 0.5);
+      background-color: $-slider-dark-label-bg;
     }
 
     @include m(disabled) {
@@ -34,12 +34,11 @@
   @include e(label) {
     text-align: center;
     width: calc($-slider-handle-radius * 2);
-    line-height: calc($-slider-handle-radius * 2);
     font-size: $-slider-fs;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     color: $-slider-color;
-    background-color: rgba($color: #fff, $alpha: 0.5);
-    border-radius: 100%;
+    background-color: $-slider-label-bg;
+    border-radius: $-radius-circle;
     position: absolute;
     bottom: calc($-slider-handle-radius * 2 + 16rpx);
   }
@@ -47,7 +46,7 @@
     flex: 1;
     position: relative;
     border-radius: calc($-slider-axie-height / 2);
-    background-color: #e5e5e5;
+    background-color: $-slider-axie-bg;
     margin: calc($-slider-handle-radius - $-slider-axie-height / 2) 0;
   }
   @include e(bar) {
@@ -76,10 +75,10 @@
     height: calc($-slider-handle-radius * 2);
     width: calc($-slider-handle-radius * 2);
     background: $-slider-handle-bg;
-    border-radius: 100%;
-    border: 1px solid $-slider-axie-bg;
+    border-radius: $-radius-circle;
+    border: #{$-border-width-base} solid $-slider-axie-bg;
     box-sizing: border-box;
-    box-shadow: 0 4rpx 8rpx 0 rgba($color: #9b9b9b, $alpha: 0.5);
+    box-shadow: 0 4rpx 8rpx 0 $-slider-button-shadow-color;
   }
   @include e(label-min) {
     margin-right: calc($-slider-handle-radius * 2);

package/components/oxy-sort-button/index.scss

@@ -64,9 +64,7 @@
     min-width: 28rpx;
     margin-left: 4rpx;
     vertical-align: middle;
-    line-height: 1.1;
-
-    @include when(active) {
+    line-height: $-line-height-tight;
 
       :deep(.oxy-sort-button__icon-up),
       :deep(.oxy-sort-button__icon-down) {
@@ -77,13 +75,13 @@
 
   @include edeep(icon-up) {
     display: block !important;
-    line-height: 1.1;
+    line-height: $-line-height-tight;
     transform: scale(calc((10 / 14))) translate(0, 14rpx);
   }
 
   @include edeep(icon-down) {
     display: block !important;
-    line-height: 1.1;
+    line-height: $-line-height-tight;
     transform: scale(calc((10 / 14))) translate(0, -14rpx);
   }
 }

package/components/oxy-splitter/index.scss

@@ -0,0 +1,19 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(splitter) {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  @include m(horizontal) {
+    flex-direction: row;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}