oxy-uni-ui 2.1.0 → 2.1.1

package/components/oxy-date-strip-item/index.scss

@@ -27,13 +27,13 @@
 		display: flex;
 		flex-direction: column;
 		margin: 0 4rpx;
-		transition-duration: 300ms;
+		transition-duration: $-transition-duration-slow;
 		transition-property: background-color, color;
 		transition-timing-function: linear;
 
 		&-prefix,&-day,&-suffix {
 			text-align: center;
-			transition-duration: 200ms;
+			transition-duration: $-transition-duration-base;
 			transition-property: color;
 			transition-timing-function: linear;
 		}
@@ -69,7 +69,7 @@
 		&-day {
 			font-size: $-date-strip-font-size;
 			color: $-date-strip-color;
-			font-weight: bold;
+			font-weight: $-fw-bold;
 		}
 		&-info {
 			display: flex;
@@ -82,7 +82,7 @@
 			background-color: $-date-strip-active-color;
 		}
 		&--active-text {
-			color: white;
+			color: $-color-white;
 			&-none {
 				color:  $-date-strip-active-color;
 			}

package/components/oxy-datetime-picker/types.ts

@@ -76,7 +76,7 @@ export const datetimePickerProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * 选项的key
    */

package/components/oxy-datetime-picker-view/types.ts

@@ -20,11 +20,11 @@ export const datetimePickerViewProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * picker item的高度
    */
-  itemHeight: makeNumberProp(35),
+  itemHeight: makeNumberProp(70),
   /**
    * 选项的key
    */

package/components/oxy-fab/index.scss

@@ -1,10 +1,6 @@
 @import "../common/abstracts/variable";
 @import "../common/abstracts/mixin";
 
-.oxy-theme-dark {
-  @include b(fab) {}
-}
-
 @include b(fab) {
   position: fixed;
   z-index: 99;
@@ -60,7 +56,7 @@
 
     // 动画
     @include e(transition-enter-active, transition-leave-active) {
-      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      transition: $-transition-duration-slow $-transition-timing-function-base !important;
     }
 
 

package/components/oxy-file-list/index.scss

@@ -19,7 +19,7 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    border: 1px solid $-color-border;
+    border: #{$-border-width-base} solid $-color-border;
     border-radius: $-file-list-card-radius;
     position: relative;
   }
@@ -83,7 +83,7 @@
       .oxy-file-list__delete {
         font-size: $-file-list-action-icon-size;
         color: $-file-list-action-icon-color;
-        margin-left: 24rpx;
+        margin-left: $-spacing-24;
       }
       & + .oxy-file-list__list--item {
         margin-top: 20rpx;

package/components/oxy-footer/index.scss

@@ -11,9 +11,9 @@
 @include b(footer) {
   overflow: visible;
   padding: 0;
-  background-color: $--footer-bg;
+  background-color: $-footer-bg;
   @include e(content) {
     overflow: visible;
-    padding: $--footer-padding;
+    padding: $-footer-padding;
   }
 }

package/components/oxy-footer/oxy-footer.vue

@@ -21,7 +21,7 @@ export default {
 <script setup lang="ts">
 import { getCurrentInstance, nextTick, onMounted, ref, computed, watch } from 'vue'
 import { footerProps } from './types'
-import { withDefaultUnit } from '../common/util'
+import { convertPxToRpx, withDefaultUnit } from '../common/util'
 import NodeInfo = UniNamespace.NodeInfo
 
 const props = defineProps(footerProps)
@@ -41,8 +41,7 @@ const contentStyle = computed(() => {
 
 // 设置内容高度（rpx 语义）
 function setHeight(val: number) {
-  const pxPer100Rpx = uni.upx2px(100)
-  const heightInRpx = pxPer100Rpx ? (val / pxPer100Rpx) * 100 : val * 2
+  const heightInRpx = convertPxToRpx(val)
   placeholderHeight.value = `${heightInRpx}rpx`
 }
 

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

@@ -1,11 +1,6 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-.oxy-theme-dark {
-  @include b(form-item) {
-  }
-}
-
 
 @include b(form-item) {
   @include e(error-message){

package/components/oxy-grid/oxy-grid.vue

@@ -73,7 +73,7 @@ watch(
 )
 
 const rootStyle = computed(() => {
-  return `${props.gutter ? 'padding-left:' + props.gutter * 2 + 'rpx;' + 'padding-bottom:' + props.gutter * 2 + 'rpx;' : ''}${props.customStyle}`
+  return `${props.gutter ? 'padding-left:' + props.gutter + 'rpx;' + 'padding-bottom:' + props.gutter + 'rpx;' : ''}${props.customStyle}`
 })
 
 const handleChildrenChange = debounce(() => {

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

@@ -140,7 +140,7 @@
   }
 
   @include e(text) {
-    margin-top: 16rpx;
+    margin-top: $-spacing-16;
     font-size: $-grid-item-fs;
     line-height: $-grid-item-fs;
     @include lineEllipsis;

package/components/oxy-guidance/index.scss

@@ -53,12 +53,12 @@
 
         @include e(next) {
           background: $-guide-tip-action-bg;
-          height: 48rpx;
+          height: $-size-48;
           width: 100rpx;
           text-align: center;
           border-radius: $-guide-tip-action-radius;
           color: $-guide-tip-action-color;
-          line-height: 48rpx;
+          line-height: $-lh-base;
           font-size: $-fs-secondary;
         }
       }

package/components/oxy-img/index.scss

@@ -14,6 +14,6 @@
 
   @include when(round) {
     overflow: hidden;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
   }
-}
+}

package/components/oxy-img-cropper/index.scss

@@ -204,7 +204,6 @@
       text-align: left;
       margin: 0 40rpx;
       padding-top: 4vh;
-      // line-height: 32px;
       box-sizing: border-box;
 
       .is-cancel {
@@ -216,7 +215,6 @@
       .is-confirm {
         position: absolute;
         right: 0;
-        // height: 32px;
         width: 112rpx;
         border-radius: $-img-cropper-action-radius;
         font-size: $-img-cropper-action-fs;

package/components/oxy-img-lazy/index.scss

@@ -2,7 +2,6 @@
 @import "./../common/abstracts/variable.scss";
 
 @include b(img-lazy) {
-  // overflow: hidden;
   position: relative;
   @include e(image) {
     display: block;

package/components/oxy-index-anchor/index.scss

@@ -10,12 +10,12 @@
 
 // #ifdef MP-DINGTALK
 @include b(index-anchor-ding) {
-  
+
   @include when(sticky){
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
   }
 }
 // #endif
@@ -30,6 +30,6 @@
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
   }
 }

package/components/oxy-input/index.scss

@@ -80,7 +80,7 @@
     height: 1px;
     background: $-input-border-color;
     transform: scaleY(0.5);
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color $-transition-duration-base ease-in-out;
   }
 
   @include when(not-empty) {
@@ -301,7 +301,7 @@
   }
 
   @include e(count) {
-    margin-left: 32rpx;
+    margin-left: $-spacing-32;
     font-size: $-input-count-fs;
     color: $-input-count-color;
     vertical-align: middle;

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

@@ -27,9 +27,9 @@
 }
 
 @include b(input-number) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   user-select: none;
-  line-height: 1.15;
 
   @include e(action) {
     position: relative;
@@ -61,6 +61,11 @@
       border-top-right-radius: calc($-input-number-radius * 2);
       border-bottom-right-radius: calc($-input-number-radius * 2);
     }
+
+    &:not(.is-disabled):active {
+      background-color: $-color-bg;
+    }
+
     @include when(disabled) {
       color: $-input-number-disabled-color;
     }
@@ -105,7 +110,10 @@
 
   @include edeep(action-icon) {
     position: absolute;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
     font-size: $-input-number-icon-size;
     width: $-input-number-icon-size;
     height: $-input-number-icon-size;
@@ -114,6 +122,16 @@
     transform: translate(-50%, -50%);
   }
 
+  @include when(focus) {
+    .oxy-input-number__action::after {
+      border-color: $-color-theme;
+    }
+    .oxy-input-number__input-border {
+      border-top-color: $-color-theme;
+      border-bottom-color: $-color-theme;
+    }
+  }
+
   @include when(disabled) {
     .oxy-input-number__input {
       color: $-input-number-disabled-color;

package/components/oxy-input-number/oxy-input-number.vue

@@ -1,5 +1,10 @@
 <template>
-  <view :class="`oxy-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
+  <view
+    :class="`oxy-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''} ${
+      isFocused ? 'is-focus' : ''
+    }`"
+    :style="customStyle"
+  >
     <!-- 减号按钮 -->
     <view
       :class="`oxy-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
@@ -76,6 +81,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: number | string): void
 }>()
 const inputValue = ref<string | number>(getInitValue())
+const isFocused = ref(false)
 let longPressTimer: ReturnType<typeof setTimeout> | null = null
 
 /**
@@ -414,6 +420,7 @@ function handleInput(event: any) {
  * 处理失焦事件
  */
 function handleBlur(event: any) {
+  isFocused.value = false
   const val = event.detail.value || ''
   updateValue(val)
   emit('blur', { value: val })
@@ -423,6 +430,7 @@ function handleBlur(event: any) {
  * 处理聚焦事件
  */
 function handleFocus(event: any) {
+  isFocused.value = true
   emit('focus', event.detail)
 }
 

package/components/oxy-keyboard/index.scss

@@ -90,7 +90,7 @@
     background-color: transparent;
     border: none;
     @include m(hover) {
-      opacity: 0.6;
+      opacity: $-opacity-disabled;
     }
   }
 

package/components/oxy-link/index.scss

@@ -3,15 +3,16 @@
 
 @include b(link) {
   display: inline-block;
-  @include e(medium) {
+
+  @include m(medium) {
     font-size: $-link-font-size-medium;
   }
 
-  @include e(small) {
+  @include m(small) {
     font-size: $-link-font-size-small;
   }
 
-  @include e(large) {
+  @include m(large) {
     font-size: $-link-font-size-large;
   }
 
@@ -44,14 +45,14 @@
   }
 
   @include when(disabled) {
-    opacity: .6;
+    opacity: $-opacity-disabled;
   }
 
-  &__prefix-icon:not(:empty) + &__content:not(:empty) {
-	    padding-left: 8rpx;
-	}
+  .#{$B}__prefix-icon:not(:empty) + .#{$B}__content:not(:empty) {
+    padding-left: 8rpx;
+  }
 
-	&__content:not(:empty) + &__suffix-icon:not(:empty) {
-	    padding-left: 8rpx;
-	}
+  .#{$B}__content:not(:empty) + .#{$B}__suffix-icon:not(:empty) {
+    padding-left: 8rpx;
+  }
 }

package/components/oxy-loading/index.scss

@@ -12,7 +12,7 @@
   @include e(body) {
     width: 100%;
     height: 100%;
-    animation: oxy-rotate 0.8s linear infinite;
+    animation: oxy-rotate linear infinite;
     animation-duration: 2s;
 
   }

package/components/oxy-loadmore/index.scss

@@ -15,7 +15,7 @@
 
   @include edeep(loading) {
     display: inline-block;
-    margin-right: 16rpx;
+    margin-right: $-spacing-16;
     vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;

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

@@ -47,10 +47,10 @@
     text-align: center;
     font-size: $-message-box-title-fs;
     color: $-message-box-title-color;
-    line-height: 48rpx;
-    font-weight: 500;
-    padding-top: 16rpx;
-    padding-bottom: 24rpx;
+    line-height: $-lh-base;
+    font-weight: $-fw-medium;
+    padding-top: $-spacing-16;
+    padding-bottom: $-spacing-24;
   }
 
   @include e(content) {
@@ -59,7 +59,7 @@
     font-size: $-message-box-content-fs;
     text-align: center;
     overflow: auto;
-    line-height: 48rpx;
+    line-height: $-lh-base;
 
     &::-webkit-scrollbar {
       width: $-message-box-content-scrollbar-width;
@@ -89,7 +89,7 @@
   
   @include edeep(actions-btn) {
     &:not(:last-child) {
-      margin-right: 32rpx;
+      margin-right: $-spacing-32;
     }
   }
 
@@ -104,6 +104,6 @@
   }
 
   @include e(cancel) {
-    margin-right: 32rpx;
+    margin-right: $-spacing-32;
   }
 }

package/components/oxy-navbar/index.scss

@@ -88,6 +88,6 @@
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 500;
+    z-index: $-z-index-fixed;
   }
 }

package/components/oxy-navbar/oxy-navbar.vue

@@ -52,7 +52,7 @@ export default {
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-import { getRect, isDef, objToStyle, unitConvert } from '../common/util'
+import { convertPxToRpx, getRect, isDef, objToStyle, unitConvert } from '../common/util'
 import { navbarProps } from './types'
 
 const props = defineProps(navbarProps)
@@ -139,8 +139,7 @@ function setPlaceholderHeight() {
         const rectBottom = Number(res.bottom)
         const occupiedHeight =
           rectHeight > 0 ? rectHeight : !Number.isNaN(rectTop) && !Number.isNaN(rectBottom) ? Math.max(rectBottom - rectTop, 0) : 0
-        const pxPer100Rpx = uni.upx2px(100)
-        const occupiedHeightInRpx = pxPer100Rpx ? (occupiedHeight / pxPer100Rpx) * 100 : occupiedHeight * 2
+        const occupiedHeightInRpx = convertPxToRpx(occupiedHeight)
 
         placeholderHeight.value = occupiedHeight ? occupiedHeightInRpx : ''
       })

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

@@ -51,11 +51,11 @@
     height: 100%;
     color: $-password-input-text-color;
     font-size: $-password-input-font-size;
-    line-height: 1.2;
+    line-height: $-line-height-base;
     background: $-password-input-background;
 
     @include when(border) {
-      border: 1px solid $-password-input-border-color;
+      border: #{$-border-width-base} solid $-password-input-border-color;
 
       &:not(:last-child) {
         border-right: none;
@@ -80,7 +80,7 @@
     width: $-password-input-dot-size;
     height: $-password-input-dot-size;
     background: $-password-input-dot-color;
-    border-radius: 100%;
+    border-radius: $-radius-circle;
     transform: translate(-50%, -50%);
     visibility: hidden;
   }
@@ -121,4 +121,4 @@
   100% {
     opacity: 0;
   }
-}
+}

package/components/oxy-picker/types.ts

@@ -103,7 +103,7 @@ export const pickerProps = {
   /**
    * 选项总高度
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * 选项值对应的键名
    */

package/components/oxy-picker-view/oxy-picker-view.vue

@@ -3,12 +3,12 @@
     <view class="oxy-picker-view__loading" v-if="loading">
       <oxy-loading :color="loadingColor" />
     </view>
-    <view :style="`height: ${(columnsHeight - 20) * 2}rpx;`">
+    <view :style="`height: ${innerColumnsHeight}rpx;`">
       <picker-view
         mask-class="oxy-picker-view__mask"
         indicator-class="oxy-picker-view__roller"
-        :indicator-style="`height: ${itemHeight * 2}rpx;`"
-        :style="`height: ${(columnsHeight - 20) * 2}rpx;`"
+        :indicator-style="`height: ${itemHeight}rpx;`"
+        :style="`height: ${innerColumnsHeight}rpx;`"
         :value="selectedIndex"
         :immediate-change="immediateChange"
         @change="onChange"
@@ -22,7 +22,7 @@
             :class="`oxy-picker-view-column__item ${row['disabled'] ? 'oxy-picker-view-column__item--disabled' : ''}  ${
               selectedIndex[colIndex] == rowIndex ? 'oxy-picker-view-column__item--active' : ''
             }`"
-            :style="`line-height: ${itemHeight * 2}rpx;`"
+            :style="`line-height: ${itemHeight}rpx;`"
           >
             {{ row[labelKey] }}
           </view>
@@ -44,13 +44,16 @@ export default {
 </script>
 <script lang="ts" setup>
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
-import { getCurrentInstance, ref, watch, nextTick } from 'vue'
+import { computed, getCurrentInstance, ref, watch, nextTick } from 'vue'
 import { deepClone, getType, isArray, isDef, isEqual, range } from '../common/util'
 import { formatArray, pickerViewProps, type ColumnItem, type PickerViewExpose } from './types'
 
 const props = defineProps(pickerViewProps)
 const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
 
+// Root has 24rpx vertical padding on top and bottom; compensate here to keep visual viewport stable.
+const innerColumnsHeight = computed(() => Math.max(props.columnsHeight - 48, props.itemHeight))
+
 const formatColumns = ref<ColumnItem[][]>([]) // 格式化后的列数据
 const selectedIndex = ref<Array<number>>([]) // 格式化之后，每列选中的下标集合
 

package/components/oxy-picker-view/types.ts

@@ -29,11 +29,11 @@ export const pickerViewProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * picker item的高度
    */
-  itemHeight: makeNumberProp(35),
+  itemHeight: makeNumberProp(70),
   /**
    * 选项对象中，value对应的 key
    */

package/components/oxy-progress/index.scss

@@ -21,7 +21,7 @@
     position: relative;
     flex: 1;
     height: $-progress-height;
-    border-radius: calc($-progress-height / 2);
+    border-radius: $-progress-radius;
     background: $-progress-bg;
   }
   @include e(inner) {
@@ -30,7 +30,7 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-radius: calc($-progress-height / 2);
+    border-radius: $-progress-radius;
     background: $-progress-color;
     transition-property: width;
     transition-timing-function: linear;

package/components/oxy-radio/index.scss

@@ -92,7 +92,7 @@
     vertical-align: top;
     font-size: $-radio-label-fs;
     color: $-radio-label-color;
-    line-height: 48rpx;
+    line-height: $-lh-base;
     word-break: break-all;
   }
   @include when(checked) {
@@ -109,8 +109,10 @@
 
   @include when(dot) {
     .oxy-radio__shape {
+      width: $-radio-dot-shape-size;
+      height: $-radio-dot-shape-size;
       border: 4rpx solid $-radio-dot-border-color;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       position: relative;
       display: inline-block;
       box-sizing: border-box;
@@ -123,7 +125,7 @@
         height: $-radio-dot-size;
         left: calc(50% - #{$-radio-dot-size / 2});
         top: calc(50% - #{$-radio-dot-size / 2});
-        border-radius: 50%;
+        border-radius: $-radius-circle;
         background-color: $-color-white;
         transform: scale(0);
         transition: transform .2s ease-in;
@@ -145,7 +147,7 @@
   @include when(button) {
     display: inline-block;
     margin-top: 0;
-    margin-right: 24rpx;
+    margin-right: $-spacing-24;
 
     .oxy-radio__shape {
       display: none;
@@ -294,6 +296,8 @@
 
     @include when(dot) {
       .oxy-radio__shape {
+        width: $-radio-dot-shape-large-size;
+        height: $-radio-dot-shape-large-size;
         &::before {
           width: $-radio-dot-large-size;
           height: $-radio-dot-large-size;

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

@@ -14,7 +14,6 @@
   // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    height: 100%;
     padding: 24rpx 32rpx 40rpx 32rpx;
     box-sizing: border-box;
     overflow: hidden;