oxy-uni-ui 2.1.4 → 2.1.5

package/components/oxy-keyboard/key/index.scss

@@ -3,15 +3,15 @@
 
 .oxy-theme-dark {
   @include b(key) {
-    background: $-dark-background2;
-    color: $-dark-color;
+    background: $-keyboard-key-background-dark;
+    color: $-keyboard-key-color-dark;
 
     &:active {
-      background-color: $-dark-background4;
+      background-color: $-keyboard-key-active-color-dark;
     }
 
     @include m(active) {
-      background-color: $-dark-background4;
+      background-color: $-keyboard-key-active-color-dark;
     }
   }
 }

package/components/oxy-keyboard/oxy-keyboard.vue

@@ -4,6 +4,7 @@
     position="bottom"
     :z-index="zIndex"
     :max-width="popupMaxWidth"
+    custom-class="oxy-keyboard__popup"
     :safe-area-inset-bottom="safeAreaInsetBottom"
     :modal-style="modal ? '' : 'opacity: 0;'"
     :modal="hideOnClickOutside"

package/components/oxy-loadmore/index.scss

@@ -2,7 +2,7 @@
 @import '../common/abstracts/mixin';
 .oxy-theme-dark {
   @include b(loadmore) {
-    color: $-dark-color;
+    color: $-loadmore-color-dark;
   }
 }
 

package/components/oxy-message-box/index.scss

@@ -4,25 +4,25 @@
 .oxy-theme-dark {
   @include b(message-box) {
     @include e(container) {
-      background-color: $-dark-background2;
+      background-color: $-message-box-bg-dark;
     }
 
     @include e(title) {
-      color: $-dark-color;
+      color: $-message-box-title-color-dark;
     }
 
     @include e(content-text) {
-      color: $-dark-color3;
+      color: $-message-box-content-color-dark;
     }
 
     @include e(content) {
       &::-webkit-scrollbar-thumb {
-        background: $-dark-border-color;
+        background: $-message-box-content-scrollbar-color-dark;
       }
     }
 
     @include e(close) {
-      color: $-dark-color3;
+      color: $-message-box-close-color-dark;
     }
   }
 }

package/components/oxy-message-box/oxy-message-box.vue

@@ -119,10 +119,14 @@ const bodyClass = computed(() => {
   return `oxy-message-box__body ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
 })
 
-const popupWidth = computed(() => {
+const resolvedPopupWidth = computed(() => {
   return resolveSizeWithScreenWidth(messageState.width || props.width, { defaultUnit: 'rpx' })
 })
 
+const popupWidth = computed(() => {
+  return `var(--oxy-message-box-width, ${resolvedPopupWidth.value})`
+})
+
 const showCancelButton = computed(() => {
   return !!messageState.showCancelButton && messageState.cancelButtonProps !== null
 })

package/components/oxy-navbar/index.scss

@@ -3,18 +3,18 @@
 
 .oxy-theme-dark {
   @include b(navbar) {
-    background-color: $-dark-background;
+    background-color: $-navbar-background-dark;
 
     @include e(title) {
-      color: $-dark-color;
+      color: $-navbar-color-dark;
     }
 
     @include e(text) {
-      color: $-dark-color;
+      color: $-navbar-desc-font-color-dark;
     }
 
     :deep(.oxy-navbar__arrow) {
-      color: $-dark-color;
+      color: $-navbar-color-dark;
     }
   }
 }
@@ -80,7 +80,11 @@
 
 
   @include when(border) {
-    @include halfPixelBorder('bottom');
+    @include halfPixelBorder('bottom', 0, $-navbar-border-color);
+
+    .oxy-theme-dark & {
+      @include halfPixelBorder('bottom', 0, $-navbar-border-color-dark);
+    }
   }
 
   @include when(fixed) {

package/components/oxy-navbar-capsule/index.scss

@@ -4,15 +4,15 @@
 .oxy-theme-dark {
   @include b(navbar-capsule) {
     &::before {
-      border: 2rpx solid $-dark-border-color;
+      border: 2rpx solid $-navbar-capsule-border-color-dark;
     }
 
     &::after {
-      background: $-dark-border-color;
+      background: $-navbar-capsule-border-color-dark;
     }
 
     :deep(.oxy-navbar-capsule__icon) {
-      color: $-dark-color;
+      color: $-navbar-capsule-icon-color-dark;
     }
   }
 }
@@ -60,7 +60,7 @@
   @include edeep(icon) {
     flex: 1;
     position: relative;
-    color: $-navbar-desc-font-color;
+    color: $-navbar-capsule-icon-color;
     font-size: $-navbar-capsule-icon-size;
   }
-}
+}

package/components/oxy-overlay/index.scss

@@ -4,6 +4,7 @@
 .oxy-theme-dark {
   @include b(overlay) {
     background: $-overlay-bg-dark;
+    color: $-overlay-color-dark;
   }
 }
 
@@ -14,4 +15,5 @@
   right: 0;
   bottom: 0;
   background: $-overlay-bg;
+  color: $-overlay-color;
 }

package/components/oxy-pagination/index.scss

@@ -3,9 +3,33 @@
 
 .oxy-theme-dark {
   @include b(pager) {
-    background-color: $-dark-background;
+    background-color: $-pagination-bg-dark;
+    --oxy-button-info-bg-color: #{$-pagination-nav-bg-dark};
+    --oxy-button-info-color: #{$-pagination-nav-color-dark};
+    --oxy-button-plain-bg-color: #{$-pagination-bg-dark};
+    --oxy-button-info-plain-normal-color: #{$-pagination-nav-active-color-dark};
+    --oxy-button-info-plain-border-color: #{$-pagination-nav-border-dark};
+
     @include e(message) {
-      color: $-dark-color3;
+      color: $-pagination-message-color-dark;
+    }
+
+    @include e(size) {
+      color: $-pagination-size-color-dark;
+    }
+
+    @include e(separator) {
+      color: $-pagination-separator-color-dark;
+    }
+
+    @include edeep(nav) {
+      @include m(active) {
+        color: $-pagination-nav-active-color-dark;
+      }
+
+      @include m(disabled) {
+        color: $-pagination-nav-disabled-color-dark;
+      }
     }
   }
 }
@@ -13,6 +37,11 @@
 @include b(pager) {
   user-select: none;
   background-color: $-pagination-bg;
+  --oxy-button-info-bg-color: #{$-pagination-nav-bg};
+  --oxy-button-info-color: #{$-pagination-nav-color};
+  --oxy-button-plain-bg-color: #{$-pagination-bg};
+  --oxy-button-info-plain-normal-color: #{$-pagination-nav-active-color};
+  --oxy-button-info-plain-border-color: #{$-pagination-nav-border};
 
   @include edeep(icon) {
     font-size: $-pagination-icon-size;
@@ -26,33 +55,42 @@
   }
   @include e(message) {
     text-align: center;
-    color:$-pagination-message-color;
+    color: $-pagination-message-color;
     font-size: $-pagination-message-fs;
     padding: $-pagination-message-padding;
   }
+
   @include edeep(nav) {
     min-width: $-pagination-nav-width;
     font-size: $-pagination-nav-fs;
-    @include m(active){
+
+    @include m(active) {
       color: $-pagination-nav-active-color;
     }
-    @include m(disabled){
+
+    @include m(disabled) {
       color: $-pagination-nav-disabled-color;
     }
   }
-  @include e(size){
+
+  @include e(size) {
     flex: 1;
     text-align: center;
     font-size: $-pagination-nav-content-fs;
+    color: $-pagination-size-color;
   }
-  @include e(separator){
+
+  @include e(separator) {
     padding: $-pagination-nav-sepatator-padding;
+    color: $-pagination-separator-color;
   }
-  @include edeep(left){
+
+  @include edeep(left) {
     transform: rotate(180deg) translateY(2rpx);
     display: inline-block;
   }
-  @include e(current){
+
+  @include e(current) {
     color: $-pagination-nav-current-color;
   }
 }

package/components/oxy-password-input/index.scss

@@ -4,27 +4,27 @@
 .oxy-theme-dark {
   @include b(password-input) {
     @include e(item) {
-      color: $-dark-color;
-      background: $-dark-background2;
+      color: $-password-input-text-color-dark;
+      background: $-password-input-background-dark;
 
       @include when(border) {
-        border-color: $-dark-border-color;
+        border-color: $-password-input-border-color-dark;
       }
     }
 
     @include e(mask) {
-      background-color: $-dark-color;
+      background-color: $-password-input-dot-color-dark;
     }
 
     @include e(cursor) {
-      background-color: $-dark-color;
+      background-color: $-password-input-cursor-color-dark;
     }
 
     @include e(info) {
-      color: $-dark-color;
+      color: $-password-input-info-color-dark;
 
       @include when(border) {
-        color: $-dark-color2;
+        color: $-password-input-info-border-color-dark;
       }
     }
   }

package/components/oxy-picker/index.scss

@@ -5,21 +5,52 @@
   @include b(picker) {
     @include e(action) {
       @include m(cancel) {
-        color: $-dark-color;
+        color: $-picker-toolbar-cancel-color-dark;
       }
       @include when(loading) {
-        color: $-dark-color3;
+        color: $-picker-loading-button-color-dark;
       }
     }
 
-    :deep(.oxy-picker__arrow),
+    @include e(title) {
+      color: $-picker-toolbar-title-color-dark;
+    }
+
+    @include e(search) {
+      background: $-picker-search-bg-dark;
+    }
+
+    :deep(.oxy-picker__arrow) {
+      color: $-picker-arrow-color-dark;
+    }
+
     :deep(.oxy-picker__clear) {
-      color: $-dark-color;
+      color: $-picker-clear-color-dark;
     }
 
     :deep(.oxy-picker__cell--placeholder) {
       .oxy-cell__value {
-        color: $-dark-color-gray;
+        color: $-picker-placeholder-color-dark;
+      }
+    }
+
+    :deep(.oxy-picker__search-clear-icon) {
+      color: $-picker-search-icon-color-dark;
+    }
+
+    @include e(search-icon) {
+      color: $-picker-search-icon-color-dark;
+    }
+
+    @include e(search-input) {
+      background: $-picker-column-select-bg-dark;
+
+      input {
+        color: $-picker-search-input-color-dark;
+
+        &::placeholder {
+          color: $-picker-search-placeholder-color-dark;
+        }
       }
     }
   }
@@ -28,6 +59,7 @@
 @include b(picker) {
   @include edeep(popup) {
     border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+    --oxy-popup-bg: #{$-picker-bg};
   }
 
   @include edeep(cell) {
@@ -53,7 +85,7 @@
     }
     @include m(placeholder) {
       .oxy-cell__value {
-        color: $-input-placeholder-color;
+        color: $-picker-placeholder-color;
       }
     }
   }
@@ -126,9 +158,14 @@
       height: 100%;
       margin-left: $-spacing-20;
       font-size: $-fs-content;
+      color: $-picker-search-input-color;
       background: transparent;
       border: none;
       outline: none;
+
+      &::placeholder {
+        color: $-picker-search-placeholder-color;
+      }
     }
   }
 

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

@@ -4,20 +4,28 @@
 .oxy-theme-dark {
   @include b(picker-view) {
     @include e(columns) {
-      background: $-dark-background2;
+      background: $-picker-bg-dark;
     }
 
     :deep(.oxy-picker-view__roller) {
-      background: $-dark-background4;
+      background: $-picker-column-select-bg-dark;
+    }
+
+    :deep(.oxy-picker-view__mask) {
+      background: $-picker-mask-dark;
+    }
+
+    @include e(loading) {
+      background: $-picker-loading-bg-dark;
     }
   }
 
   @include b(picker-view-column) {
-    color: $-dark-color;
+    color: $-picker-column-color-dark;
 
     @include e(item) {
       @include m(disabled) {
-        color: $-dark-color-gray;
+        color: $-picker-column-disabled-color-dark;
       }
     }
   }

package/components/oxy-popover/index.scss

@@ -6,7 +6,7 @@
 
     @include e(pos) {
       background: $-popover-dark-bg;
-      color: $-dark-color;
+      color: $-popover-color-dark;
       box-shadow: $-popover-dark-box-shadow;
     }
 
@@ -20,7 +20,7 @@
 
     @include e(menu-inner) {
 
-      @include halfPixelBorder("top", 0, $-dark-border-color);
+      @include halfPixelBorder("top", 0, $-popover-border-color-dark);
     }
 
     @include squareArrow($-popover-arrow-size, $-popover-dark-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);

package/components/oxy-popup/index.scss

@@ -5,11 +5,11 @@
   @include b(popup-wrapper) {
     :deep() {
       .oxy-popup {
-        background: $-dark-background2;
+        background: $-popup-bg-dark;
       }
 
       .oxy-popup__close {
-        color: $-dark-color;
+        color: $-popup-close-color-dark;
       }
     }
   }

package/components/oxy-progress/index.scss

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(progress) {
     @include e(label) {
-      color: $-dark-color3;
+      color: $-progress-label-color-dark;
     }
   }
 }

package/components/oxy-radio/index.scss

@@ -4,53 +4,54 @@
 .oxy-theme-dark {
   @include b(radio) {
     @include e(shape) {
-      background: transparent;
+      background: $-radio-shape-bg-dark;
     }
     @include e(label) {
-      color: $-dark-color;
+      color: $-radio-label-color-dark;
     }
     @include when(button) {
       .oxy-radio__label {
-        background-color: $-dark-background;
+        background-color: $-radio-button-bg-dark;
+        border-color: $-radio-button-border-dark;
       }
       @include when(checked) {
         .oxy-radio__label {
-          background-color: $-dark-background2;
+          background-color: $-radio-button-checked-bg-dark;
         }
       }
     }
 
     @include when(disabled) {
       .oxy-radio__label {
-        color: $-dark-color-gray;
+        color: $-radio-disabled-label-color-dark;
       }
       @include when(checked) {
         .oxy-radio__label {
-          color: $-dark-color-gray;
+          color: $-radio-disabled-label-color-dark;
         }
       }
 
       @include when(button) {
         .oxy-radio__label {
-          border-color: $-color-gray-5;
-          background: $-dark-border-color;
-          color: $-dark-color-gray;
+          border-color: $-radio-button-disabled-border-dark;
+          background: $-radio-button-disabled-bg-dark;
+          color: $-radio-button-disabled-label-color-dark;
         }
         @include when(checked) {
           .oxy-radio__label {
-            border-color: $-color-gray-5;
-            background: $-dark-border-color;
-            color: $-color-gray-5;
+            border-color: $-radio-button-disabled-border-dark;
+            background: $-radio-button-disabled-bg-dark;
+            color: $-radio-button-disabled-label-color-dark;
           }
         }
       }
 
       @include when(dot) {
         .oxy-radio__shape {
-          border-color: $-color-gray-5;
-          background: $-dark-border-color;
+          border-color: $-radio-dot-disabled-border-dark;
+          background: $-radio-dot-disabled-bg-dark;
           &::before {
-            background-color: $-color-gray-5;
+            background-color: $-radio-dot-disabled-color-dark;
           }
         }
       }
@@ -126,7 +127,7 @@
         left: calc(50% - #{$-radio-dot-size / 2});
         top: calc(50% - #{$-radio-dot-size / 2});
         border-radius: $-radius-circle;
-        background-color: $-color-white;
+        background-color: $-radio-dot-color;
         transform: scale(0);
         transition: transform .2s ease-in;
       }

package/components/oxy-radio-group/index.scss

@@ -3,7 +3,7 @@
 
 .oxy-theme-dark {
   @include b(radio-group) {
-    background-color: $-dark-background2;
+    background-color: $-radio-bg-dark;
   }
 }
 

package/components/oxy-rich-text/index.scss

@@ -10,6 +10,29 @@
 
   &.editable {
     border: 1px solid $-rich-text-editable-border-color;
+    --oxy-popup-bg: #{$-rich-text-toolbox-bg};
+    --oxy-popup-close-color: #{$-rich-text-link-label-color};
+    --oxy-action-sheet-bg: #{$-rich-text-toolbox-bg};
+    --oxy-action-sheet-color: #{$-rich-text-title-color};
+    --oxy-action-sheet-close-color: #{$-rich-text-link-label-color};
+    --oxy-input-bg: #{$-rich-text-blockquote-bg};
+    --oxy-input-color: #{$-rich-text-primary-color};
+    --oxy-input-placeholder-color: #{$-rich-text-link-label-color};
+    --oxy-input-border-color: #{$-rich-text-toolbox-border-color};
+    --oxy-button-normal-bg: #{$-rich-text-blockquote-bg};
+    --oxy-button-normal-color: #{$-rich-text-primary-color};
+    --oxy-button-primary-bg-color: #{$-rich-text-a-color};
+    --oxy-button-primary-color: #{$-color-white};
+    --oxy-input-number-color: #{$-rich-text-primary-color};
+    --oxy-input-number-border-color: #{$-rich-text-toolbox-border-color};
+    --oxy-input-number-icon-color: #{$-rich-text-link-label-color};
+    --oxy-message-box-bg: #{$-rich-text-toolbox-bg};
+    --oxy-message-box-title-color: #{$-rich-text-title-color};
+    --oxy-message-box-content-color: #{$-rich-text-primary-color};
+    --oxy-message-box-content-scrollbar-color: #{$-rich-text-toolbox-border-color};
+    --oxy-message-box-close-color: #{$-rich-text-link-label-color};
+    --oxy-message-box-actions-text-border-color: #{$-rich-text-toolbox-border-color};
+    --oxy-message-box-actions-text-confirm-color: #{$-rich-text-a-color};
 
   }
 
@@ -30,7 +53,7 @@
     gap: $-spacing-8;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid $-color-border-light;
+    border-bottom: 1px solid $-rich-text-toolbox-border-color;
     box-shadow: $-rich-text-toolbox-shadow;
 
     .oxy-icon {
@@ -42,7 +65,7 @@
       justify-content: center;
       border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
-      color: $-color-secondary;
+      color: $-rich-text-toolbox-icon-color;
       font-size: $-rich-text-toolbox-icon-size;
 
       &:hover {
@@ -108,7 +131,7 @@
     text-align: center;
     height: 100rpx;
     font-weight: $-fw-semibold;
-    color: $-color-black;
+    color: $-rich-text-dialog-title-color;
 
   }
 
@@ -138,7 +161,7 @@
 
       .oxy-rich-text__link-label {
         font-size: $-fs-content;
-        color: $-color-secondary;
+        color: $-rich-text-link-label-color;
         margin-bottom: $-spacing-16;
       }
     }

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

@@ -561,6 +561,10 @@ export default {
           }
           break
         }
+        // 自定义节点点击
+        case 'onCustomTap':
+          this.$emit('customtap', message.attrs)
+          break
         case 'onPlay':
           this.$emit('play')
           break

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)
 }