oxy-uni-ui 2.1.3 → 2.1.5

package/components/oxy-rich-text/oxy-rich-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="oxy-rich-text" :style="customStyle" :class="{ editable }">
+  <view :class="['oxy-rich-text', { editable }, customClass]" :style="customStyle">
     <view v-if="editable" class="editor_toolbox">
       <template v-for="(button, index) in toolButtons" :key="index">
         <image width="32rpx" height="32rpx" v-if="button.icon" :src="button.icon" alt="" @click="button.tap()" />
@@ -99,7 +99,7 @@ import OxyInput from '../oxy-input/oxy-input.vue'
 import OxyButton from '../oxy-button/oxy-button.vue'
 import { useMessage } from '../../index'
 import { useTranslate } from '../composables/useTranslate'
-import { type ActionSheetInfo, type RemoveEvent, richTextProps, type ToolButton } from './types'
+import { type ActionSheetInfo, type CustomNodeTapEvent, type LinkTapEvent, type RemoveEvent, richTextProps, type ToolButton } from './types'
 import emjio from './icon/emjio.svg'
 import quote from './icon/quote.svg'
 import text from './icon/text.svg'
@@ -107,23 +107,12 @@ import title from './icon/title.svg'
 
 const props = defineProps(richTextProps)
 
-type LinkTapEvent = {
-  href: string
-  innerText?: string
-  [key: string]: unknown
-}
-
-type CustomTapEvent = {
-  innerText?: string
-  [key: string]: unknown
-}
-
 const emit = defineEmits<{
   save: [value: string]
   clear: [void]
   remove: [event: RemoveEvent]
   linktap: [event: LinkTapEvent]
-  customtap: [event: CustomTapEvent]
+  customtap: [event: CustomNodeTapEvent]
 }>()
 const { translate } = useTranslate('richText')
 const templates = [
@@ -421,7 +410,7 @@ function handleLinkTap(e: LinkTapEvent): void {
   emit('linktap', e)
 }
 
-function handleCustomTap(e: CustomTapEvent): void {
+function handleCustomTap(e: CustomNodeTapEvent): void {
   emit('customtap', e)
 }
 

package/components/oxy-rich-text/types.ts

@@ -70,6 +70,17 @@ export type RichTextProps = ExtractPropTypes<typeof richTextProps>
 
 export type RichTextInstance = ComponentPublicInstance<RichTextExpose, RichTextProps>
 
+export interface LinkTapEvent {
+  href?: string
+  innerText?: string
+  [key: string]: unknown
+}
+
+export interface CustomNodeTapEvent {
+  innerText?: string
+  [key: string]: unknown
+}
+
 export interface ToolButton {
   name: string
   method?: string

package/components/oxy-search/index.scss

@@ -3,42 +3,45 @@
 
 .oxy-theme-dark {
   @include b(search) {
-    background: $-dark-background4;
+    background: $-search-bg-dark;
 
     @include e(block) {
-      background-color: $-dark-background;
+      background-color: $-search-input-bg-dark;
     }
 
     @include e(input) {
-      color: $-dark-color;
+      color: $-search-input-color-dark;
     }
 
     @include e(cover) {
-      background-color: $-dark-background;
+      background-color: $-search-input-bg-dark;
     }
 
     @include e(search-icon) {
-      color: $-dark-color;
+      color: $-search-icon-color-dark;
     }
     @include e(search-left-icon) {
-      color: $-dark-color;
+      color: $-search-icon-color-dark;
     }
     @include e(clear) {
-      color: $-dark-color;
+      color: $-search-icon-color-dark;
     }
     @include e(cancel) {
-      color: $-dark-color;
+      color: $-search-cancel-color-dark;
+    }
+    @include e(placeholder-txt) {
+      color: $-search-placeholder-color-dark;
     }
 
     @include when(light) {
-      background: $-dark-background4;
+      background: $-search-light-bg-dark;
 
       .oxy-search__block {
-        background: $-dark-background7;
+        background: $-search-light-input-bg-dark;
       }
 
       .oxy-search__cover {
-        background: $-dark-background7;
+        background: $-search-light-input-bg-dark;
       }
     }
   }

package/components/oxy-segmented/index.scss

@@ -3,25 +3,25 @@
 
 .oxy-theme-dark {
   @include b(segmented) {
-    background: $-dark-background2;
+    background: $-segmented-item-bg-color-dark;
 
     @include e(item) {
-      color: $-dark-color3;
+      color: $-segmented-item-color-dark;
 
       @include when(active) {
-        color: $-dark-color;
+        color: $-segmented-item-active-color-dark;
 
         @include when(disabled) {
-          color: $-dark-color3;
+          color: $-segmented-item-active-disabled-color-dark;
         }
       }
 
       @include when(disabled) {
-        color: $-dark-color-gray;
+        color: $-segmented-item-disabled-color-dark;
       }
 
       @include m(active) {
-        background-color: $-color-theme;
+        background-color: $-segmented-item-acitve-bg-dark;
 
         @include when(disabled) {
           opacity: $-opacity-disabled;

package/components/oxy-select/index.scss

@@ -38,7 +38,7 @@
   .oxy-select__wrapper {
     font-size: $-select-fs;
     color: $-select-text-color;
-    border: 1px solid $-color-border;
+    border: 1px solid $-select-border-color;
     box-sizing: border-box;
     border-radius: $-select-wrapper-radius;
     padding: 0 $-select-wrapper-padding-x;
@@ -54,19 +54,19 @@
     transition: all $-transition-duration-base;
 
     &:hover:not(.is-disabled):not(.is-readonly) {
-      border-color: $-color-theme;
+      border-color: $-select-focus-border-color;
     }
 
     &.is-focus:not(.is-disabled):not(.is-readonly) {
-      border-color: $-color-theme;
+      border-color: $-select-focus-border-color;
       box-shadow: $-select-focus-shadow;
     }
 
     &.is-disabled {
-      background-color: $-color-bg;
-      border-color: $-color-border-light;
+      background-color: $-select-bg;
+      border-color: $-select-disabled-border-color;
       cursor: not-allowed;
-      color: $-color-tip;
+      color: $-select-disabled-text-color;
     }
 
     &.is-readonly {
@@ -110,17 +110,17 @@
     max-width: 100%;
     height: $-select-tag-height;
     padding: $-select-tag-padding;
-    background-color: $-color-bg;
-    border-color: $-color-border-light;
+    background-color: $-select-bg;
+    border-color: $-select-tag-border-color;
     border-radius: $-select-tag-radius;
-    color: $-color-secondary;
+    color: $-select-tag-text-color;
     font-size: $-select-tag-font-size;
     line-height: $-select-tag-line-height;
     transition: all $-transition-duration-base;
 
     &:hover {
-      border-color: $-color-theme;
-      color: $-color-theme;
+      border-color: $-select-tag-hover-border-color;
+      color: $-select-tag-hover-text-color;
     }
   }
 
@@ -140,11 +140,11 @@
     margin-right: 0;
     height: auto;
     line-height: 1;
-    color: $-color-aid;
+    color: $-select-tag-close-color;
   }
 
   :deep(.oxy-select__tags-item-tag .oxy-tag__close:active) {
-    color: $-color-danger;
+    color: $-select-tag-close-active-color;
   }
 
   .oxy-select__tags-item-text {
@@ -159,7 +159,7 @@
   }
 
   .oxy-select__input-plac {
-    color: $-color-tip;
+    color: $-select-placeholder-color;
   }
 
   .oxy-select__selector__down {
@@ -187,8 +187,8 @@
     position: absolute;
     left: 0;
     width: 100%;
-    background-color: $-color-white;
-    border: 1px solid $-color-border-light;
+    background-color: $-select-dropdown-bg;
+    border: 1px solid $-select-dropdown-border-color;
     border-radius: $-select-dropdown-radius;
     box-shadow: $-select-dropdown-shadow;
     z-index: $-z-index-overlay;
@@ -252,11 +252,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: $-color-content;
+    color: $-select-option-text-color;
     cursor: pointer;
 
     &:hover:not(.oxy-select__selector__disabled) {
-      background-color: $-color-bg;
+      background-color: $-select-hover-bg;
     }
 
     &.oxy-select_selector-item_active {
@@ -267,7 +267,7 @@
   }
 
   .oxy-select__selector__disabled {
-    color: $-color-tip;
+    color: $-select-option-disabled-text-color;
     cursor: not-allowed;
     background-color: transparent !important;
   }
@@ -277,7 +277,7 @@
     align-items: center;
     justify-content: center;
     padding: $-spacing-40 0;
-    color: $-color-aid;
+    color: $-select-loading-color;
     font-size: $-fs-secondary;
 
     &-icon {
@@ -309,7 +309,7 @@
     left: 10%;
     margin-right: $-spacing-8;
     border-top-width: 0;
-    border-bottom-color: $-color-border-light;
+    border-bottom-color: $-select-dropdown-border-color;
   }
 
   .oxy-select__selector-arrow::after {
@@ -317,7 +317,7 @@
     top: 2rpx;
     margin-left: -12rpx;
     border-top-width: 0;
-    border-bottom-color: $-color-white;
+    border-bottom-color: $-select-dropdown-bg;
   }
 
   .oxy-select__input-text {

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

@@ -4,20 +4,40 @@
 .oxy-theme-dark {
   @include b(select-picker) {
     :deep(.oxy-select-picker__arrow),
-    :deep(.oxy-select-picker__close),
+    :deep(.oxy-select-picker__close) {
+      color: $-select-picker-arrow-color-dark;
+    }
+
     :deep(.oxy-select-picker__clear) {
-      color: $-dark-color;
+      color: $-select-picker-clear-color-dark;
     }
 
     :deep(.oxy-select-picker__cell--placeholder) {
       .oxy-cell__value {
-        color: $-dark-color-gray;
+        color: $-select-picker-placeholder-color-dark;
       }
     }
+
+    @include e(loading) {
+      background: $-picker-loading-bg-dark;
+    }
   }
 }
 
 @include b(select-picker) {
+  --oxy-action-sheet-bg: #{$-picker-bg};
+  --oxy-popup-bg: #{$-picker-bg};
+  --oxy-action-sheet-color: #{$-picker-toolbar-title-color};
+  --oxy-action-sheet-close-color: #{$-picker-toolbar-cancel-color};
+  --oxy-search-bg: #{$-picker-search-bg};
+  --oxy-search-input-bg: #{$-picker-column-select-bg};
+  --oxy-search-input-color: #{$-picker-search-input-color};
+  --oxy-search-placeholder-color: #{$-picker-search-placeholder-color};
+  --oxy-search-icon-color: #{$-picker-search-icon-color};
+  --oxy-search-cancel-color: #{$-picker-toolbar-cancel-color};
+  --oxy-checkbox-label-color: #{$-picker-column-color};
+  --oxy-radio-label-color: #{$-picker-column-color};
+
    @include edeep(cell) {
     @include when(disabled) {
       .oxy-cell__value {
@@ -36,7 +56,7 @@
 
     @include m(placeholder) {
       .oxy-cell__value {
-        color: $-input-placeholder-color;
+        color: $-select-picker-placeholder-color;
       }
     }
 

package/components/oxy-sidebar/index.scss

@@ -3,9 +3,9 @@
 
 .oxy-theme-dark {
   @include b(sidebar) {
-    background: $-dark-background;
+    background: $-sidebar-bg-dark;
     @include e(padding){
-      background: $-dark-background2;
+      background: $-sidebar-bg-dark;
     }
   }
 }
@@ -16,10 +16,10 @@
   overflow-y: auto;
   width: $-sidebar-width;
   height: $-sidebar-height;
-  background: $-color-white;
-  
+  background: $-sidebar-bg;
+
   @include e(padding){
     flex: 1 1 auto;
     background: $-sidebar-bg;
   }
-}
+}

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

@@ -3,23 +3,23 @@
 
 .oxy-theme-dark {
   @include b(sidebar-item) {
-    background: $-dark-background2;
-    color: $-dark-color;
+    background: $-sidebar-item-bg-dark;
+    color: $-sidebar-color-dark;
 
     &:active {
-      background-color: $-dark-background4;
+      background-color: $-sidebar-hover-bg-dark;
     }
 
     @include m(active) {
-      background: $-dark-background;
+      background: $-sidebar-active-bg-dark;
       color: $-sidebar-active-color;
     }
 
     @include m(disabled) {
-      color: $-dark-color-gray;
+      color: $-sidebar-disabled-color-dark;
 
       &:active {
-        background-color: $-dark-background2;
+        background-color: $-sidebar-item-bg-dark;
       }
     }
   }
@@ -89,7 +89,7 @@
     cursor: not-allowed;
 
     &:active {
-      background-color: $-sidebar-bg;
+      background-color: inherit;
     }
   }
 
@@ -101,6 +101,7 @@
   @include edeep(icon) {
     font-size: $-sidebar-icon-size;
     margin-right: $-spacing-8;
+    color: currentColor;
   }
 
 }

package/components/oxy-skeleton/index.scss

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(skeleton) {
     @include e(col) {
-      background-color: $-dark-background4;
+      background-color: $-skeleton-background-color-dark;
     }
   }
 }

package/components/oxy-slider/index.scss

@@ -4,17 +4,17 @@
 .oxy-theme-dark {
   @include b(slider) {
     @include e(label-min, label-max) {
-      color: $-dark-color;
+      color: $-slider-color-dark;
     }
 
     @include e(label) {
-      color: $-dark-color;
+      color: $-slider-color-dark;
       background-color: $-slider-dark-label-bg;
     }
 
     @include m(disabled) {
       @include me(label-min, label-max) {
-        color: $-dark-color-gray;
+        color: $-slider-disabled-color-dark;
       }
     }
   }

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

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(sort-button) {
     @include e(wrapper) {
-      color: $-dark-color;
+      color: $-sort-button-color-dark;
     }
   }
 

package/components/oxy-splitter-panel/index.scss

@@ -327,18 +327,18 @@
     }
 
     @include e(action) {
-      background-color: $-dark-background4;
-      border-color: $-dark-border-color;
-      color: $-dark-color3;
+      background-color: $-splitter-action-bg-dark;
+      border-color: $-splitter-action-border-dark;
+      color: $-splitter-action-color-dark;
     }
 
     @include e(action-group) {
-      background-color: $-dark-background4;
-      border-color: $-dark-border-color;
+      background-color: $-splitter-action-bg-dark;
+      border-color: $-splitter-action-border-dark;
     }
 
     @include e(action-segment) {
-      color: $-dark-color3;
+      color: $-splitter-action-color-dark;
 
       &:active {
         background-color: $-splitter-action-dark-active-bg;
@@ -346,7 +346,7 @@
     }
 
     @include e(action-separator) {
-      background-color: $-dark-border-color;
+      background-color: $-splitter-action-border-dark;
     }
 
     @include e(grip) {

package/components/oxy-status-tip/index.scss

@@ -2,10 +2,10 @@
 @import '../common/abstracts/mixin';
 
 .oxy-theme-dark {
-  background-color: $-dark-background2;
   @include b(status-tip) {
+    background-color: $-statustip-bg-dark;
     @include e(text) {
-      color: $-dark-color3;
+      color: $-statustip-color-dark;
     }
   }
 }
@@ -14,6 +14,7 @@
   padding: $-statustip-padding;
   width: 100%;
   margin: 0 auto;
+  background-color: $-statustip-bg;
   color: $-statustip-color;
   font-size: $-statustip-fs;
   box-sizing: border-box;

package/components/oxy-step/index.scss

@@ -4,34 +4,34 @@
 .oxy-theme-dark {
   @include b(step) {
     @include e(icon) {
-      background: $-dark-background2;
+      background: $-step-icon-bg-dark;
     }
 
     @include e(content){
-      color: $-dark-color3;
+      color: $-steps-inactive-color-dark;
     }
 
     @include e(line) {
-      background: $-dark-color-gray;
+      background: $-steps-line-color-dark;
     }
 
     @include e(dot) {
-      background: $-dark-color-gray;
+      background: $-steps-line-color-dark;
     }
 
     @include e(description) {
-      color: $-dark-color3;
+      color: $-steps-description-color-dark;
     }
 
     @include when(wait) {
       .oxy-step__description {
-        color: $-dark-color-gray;
+        color: $-steps-inactive-color-dark;
       }
     }
 
     :deep(.oxy-step__icon-outer),:deep(.oxy-step__icon-inner){
-      color: $-dark-color3;
-      border-color: $-dark-color-gray;
+      color: $-step-icon-text-color-dark;
+      border-color: $-step-icon-border-color-dark;
     }
   }
 }
@@ -57,7 +57,7 @@
     position: relative;
     width: $-steps-icon-size;
     height: $-steps-icon-size;
-    background: $-color-white;
+    background: $-step-icon-bg;
     z-index: $-z-index-sticky;
 
     @include when(icon) {
@@ -149,7 +149,7 @@
       }
     }
     .oxy-step__icon-outer {
-      color: $-color-white;
+      color: $-step-process-text-color;
       background: $-steps-finished-color;
       border-color: $-steps-finished-color;
     }

package/components/oxy-tabbar/index.scss

@@ -3,7 +3,7 @@
 
 .oxy-theme-dark {
   @include b(tabbar) {
-    background: $-dark-background;
+    background: $-tabbar-bg-dark;
   }
 }
 
@@ -12,7 +12,7 @@
   align-items: center;
   flex-wrap: nowrap;
   position: relative;
-  background: $-color-white;
+  background: $-tabbar-bg;
   height: $-tabbar-height;
 
   @include e(placeholder) {
@@ -48,7 +48,11 @@
 
 
     @include when(border) {
-      @include halfPixelBorder('top');
+      @include halfPixelBorder('top', 0, $-tabbar-border-color);
+
+      .oxy-theme-dark & {
+        @include halfPixelBorder('top', 0, $-tabbar-border-color-dark);
+      }
     }
   }
 

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

@@ -6,7 +6,7 @@
     @include e(body) {
       :deep(){
         @include when(inactive) {
-          color: $-dark-color-gray;
+          color: $-tabbar-inactive-color-dark;
         }
       }
     }
@@ -52,4 +52,4 @@
     font-size: $-tabbar-item-icon-size;
   }
   
-}
+}

package/components/oxy-table/index.scss

@@ -3,23 +3,23 @@
 
 .oxy-theme-dark {
   @include b(table) {
-    background: $-dark-background;
+    background: $-table-bg-dark;
 
     @include when(border) {
-      border: 1px solid $-dark-border-color;
+      border: 1px solid $-table-border-color-dark;
     }
 
     @include e(cell) {
-      color: $-dark-color;
-      background: $-dark-background2;
+      color: $-table-color-dark;
+      background: $-table-bg-dark;
 
       @include when(stripe) {
-        background: $-dark-background4;
+        background: $-table-stripe-bg-dark;
       }
 
       @include when(border) {
-        border-right: 1px solid $-dark-border-color;
-        border-bottom: 1px solid $-dark-border-color;
+        border-right: 1px solid $-table-border-color-dark;
+        border-bottom: 1px solid $-table-border-color-dark;
       }
 
       @include when(shadow) {