oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-table/index.scss

@@ -24,7 +24,7 @@
 
       @include when(shadow) {
         &::after {
-          background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+          background: $-table-fixed-shadow-dark;
         }
       }
     }
@@ -55,7 +55,7 @@
 
   @include e(header) {
     width: 100%;
-    height: 50px;
+    height: 100rpx;
     position: sticky;
     top: 0;
     z-index: 2;
@@ -84,12 +84,12 @@
     align-items: center;
     box-sizing: border-box;
     background: $-table-bg;
-    width: 100px;
-    min-height: 50px;
-    padding: 8px 10px;
+    width: 200rpx;
+    min-height: 100rpx;
+    padding: 20rpx 24rpx;
     font-size: $-table-font-size;
     color: $-table-color;
-    --oxy-sort-button-height: 30px;
+    --oxy-sort-button-height: 64rpx;
 
     @include when(border) {
       border-right: 1px solid $-table-border-color;
@@ -115,7 +115,7 @@
         top: 0;
         width: 30rpx;
         height: 100%;
-        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+        background: $-table-fixed-shadow-light;
       }
     }
 
@@ -160,4 +160,4 @@
       @include multiEllipsis(2);
     }
   }
-}
+}

package/components/oxy-table/oxy-table.vue

@@ -122,7 +122,7 @@ export default {
 import OxyTableCol from '../oxy-table-col/oxy-table-col.vue'
 import OxySortButton from '../oxy-sort-button/oxy-sort-button.vue'
 import { type CSSProperties, computed, reactive, ref } from 'vue'
-import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
+import { withDefaultUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
 import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../oxy-table-col/types'
 import { TABLE_KEY, tableProps, type TableProvide } from './types'
 import { useTranslate } from '../composables/useTranslate'
@@ -160,7 +160,7 @@ const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
 const tableStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['max-height'] = addUnit(props.height)
+    style['max-height'] = withDefaultUnit(props.height)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
@@ -171,7 +171,7 @@ const realWidthStyle = computed(() => {
   }
   let width: string | number = ''
   children.forEach((child) => {
-    width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.width)
+    width = width ? `${width} + ${withDefaultUnit(child.width)}` : withDefaultUnit(child.width)
   })
   style['width'] = `calc(${width})`
   return objToStyle(style)
@@ -180,7 +180,9 @@ const realWidthStyle = computed(() => {
 const bodyStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style['height'] = isDef(props.rowHeight) ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})` : `calc(${props.data.length} * 50px)`
+    style['height'] = isDef(props.rowHeight)
+      ? `calc(${props.data.length} * ${withDefaultUnit(props.rowHeight)})`
+      : `calc(${props.data.length} * 100rpx)`
   }
   return `${objToStyle(style)}`
 })
@@ -208,7 +210,7 @@ function getIsLastFixed(column: { fixed: boolean; prop: string }) {
 function getCellStyle(columnIndex: number) {
   let style: CSSProperties = {}
   if (isDef(children[columnIndex].width)) {
-    style['width'] = addUnit(children[columnIndex].width)
+    style['width'] = withDefaultUnit(children[columnIndex].width)
   }
   if (children[columnIndex].fixed) {
     style = getFixedStyle(columnIndex, style)
@@ -225,7 +227,7 @@ function getFixedStyle(columnIndex: number, style: CSSProperties) {
     let left: string | number = ''
     children.forEach((column, index) => {
       if (index < columnIndex) {
-        left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
+        left = left ? `${left} + ${withDefaultUnit(column.width)}` : withDefaultUnit(column.width)
       }
     })
     style['left'] = `calc(${left})`

package/components/oxy-table/types.ts

@@ -22,9 +22,9 @@ export const tableProps = {
    */
   height: numericProp,
   /**
-   * 行高
+   * 行高，number 类型按 `rpx` 语义处理
    */
-  rowHeight: makeNumericProp(50),
+  rowHeight: makeNumericProp(100),
   /**
    * 是否显示表头
    */

package/components/oxy-table-col/index.scss

@@ -7,7 +7,7 @@
   @include b(table-col) {
     @include when(shadow) {
       &::after {
-        background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+        background: $-table-fixed-shadow-dark;
       }
     }
   }
@@ -34,7 +34,7 @@
       top: 0;
       width: 30rpx;
       height: 100%;
-      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+      background: $-table-fixed-shadow-light;
     }
   }
 
@@ -43,4 +43,4 @@
       border-bottom: none;
     }
   }
-}
+}

package/components/oxy-table-col/oxy-table-col.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { type CSSProperties, computed, ref } from 'vue'
-import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'
 import { TABLE_KEY } from '../oxy-table/types'
@@ -87,7 +87,7 @@ const isLastFixed = computed(() => {
 const columnStyle = computed(() => {
   let style: CSSProperties = {}
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)
@@ -102,7 +102,7 @@ const cellStyle = computed(() => {
   let style: CSSProperties = {}
   const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
   if (isDef(rowHeight)) {
-    style['height'] = addUnit(rowHeight)
+    style['height'] = withDefaultUnit(rowHeight)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)

package/components/oxy-table-col/types.ts

@@ -32,9 +32,9 @@ export const tableColumnProps = {
    */
   label: makeRequiredProp(String),
   /**
-   * 列宽度，单位px
+   * 列宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
-  width: makeNumericProp(100),
+  width: makeNumericProp(200),
   /**
    * 是否开启列排序
    */

package/components/oxy-tabs/index.scss

@@ -30,13 +30,13 @@
 
       @include when(active) {
         color: $-dark-color;
-        border: 1px solid $-tabs-nav-active-color;
+        border: 2rpx solid $-tabs-nav-active-color;
         background-color: $-dark-background;
       }
 
       @include when(disabled) {
         color: $-dark-color-gray;
-        border-color: #f4f4f4;
+        border-color: $-tabs-nav-map-disabled-border-color;
       }
     }
 
@@ -63,14 +63,14 @@
 
 @include b(tabs) {
   position: relative;
-  background: #fff;
+  background: $-tabs-nav-bg;
   width: 100%;
 
   @include e(nav) {
     left: 0;
     right: 0;
     height: $-tabs-nav-height;
-    background-color: #fff;
+    background-color: $-tabs-nav-bg;
     width: 100%;
     position: relative;
 
@@ -125,7 +125,7 @@
 
   @include e(line) {
     position: absolute;
-    bottom: 4px;
+    bottom: 8rpx;
     left: 0;
     z-index: 1;
     height: $-tabs-nav-line-height;
@@ -139,6 +139,25 @@
     }
   }
 
+  @include edeep(nav-item-pills){
+    .oxy-tabs__nav-item-text {
+      padding: $-tabs-nav-pills-padding-y $-tabs-nav-pills-padding-x;
+    }
+    .oxy-tabs__nav-item-badge {
+      .oxy-badge__content {
+        margin-top: $-tabs-nav-pills-padding-y;
+        margin-right: $-tabs-nav-pills-padding-x;
+      }
+    }
+    @include when(active) {
+      .oxy-tabs__nav-item-text {
+        background-color: $-tabs-nav-pills-bg-color;
+        border-radius: $-tabs-nav-pills-border-radius;
+        color: $-tabs-nav-pills-color;
+      }
+    }
+  }
+
   @include e(container) {
     overflow: hidden;
   }
@@ -179,8 +198,8 @@
       position: absolute;
       content: '';
       top: 0;
-      left: -24px;
-      width: 24px;
+      left: -48rpx;
+      width: 48rpx;
       height: $-tabs-nav-height - 1;
       background: $-tabs-nav-map-btn-before-bg;
     }
@@ -197,13 +216,13 @@
 
   @include e(map-header) {
     position: relative;
-    padding-left: 17px;
+    padding-left: 36rpx;
     height: $-tabs-nav-height;
     line-height: $-tabs-nav-height;
     font-size: $-tabs-nav-map-fs;
     color: $-tabs-nav-map-color;
     transition: opacity .3s;
-    background: #fff;
+    background: $-tabs-nav-bg;
     opacity: 0;
 
     @include halfPixelBorder;
@@ -216,8 +235,8 @@
   @include e(map-body) {
     display: flex;
     flex-wrap: wrap;
-    padding: 20px 15px 10px;
-    background: #fff;
+    padding: 40rpx 32rpx 24rpx;
+    background: $-tabs-nav-bg;
     transition: transform .3s;
     transform: scaleY(0);
     transform-origin: center top;
@@ -242,13 +261,15 @@
   @include e(map-nav-btn) {
     @include buttonClear;
     @include lineEllipsis;
-    display: inline-block;
-    width: 107px;
-    height: 32px;
-    line-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 214rpx;
+    height: 64rpx;
+    line-height: 1.2;
     background-color: $-tabs-nav-map-button-back-color;
     border-color: transparent;
-    margin-bottom: 10px;
+    margin-bottom: 24rpx;
     border-radius: $-tabs-nav-map-button-radius;
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;
@@ -257,13 +278,13 @@
 
     @include when(active) {
       color: $-tabs-nav-active-color;
-      border: 1px solid $-tabs-nav-active-color;
+      border: 2rpx solid $-tabs-nav-active-color;
       background-color: $-tabs-nav-bg
     }
 
     @include when(disabled) {
       color: $-tabs-nav-disabled-color;
-      border-color: #f4f4f4;
+      border-color: $-tabs-nav-map-disabled-border-color;
     }
   }
 
@@ -281,19 +302,28 @@
   @include when(slide) {
     .oxy-tabs__nav-item {
       flex: 0 0 auto;
-      padding: 0 17px;
+      padding: 0 36rpx;
     }
   }
 
   @include when(map) {
     .oxy-tabs__nav--wrap {
-      padding-right: 40px;
+      padding-right: 80rpx;
+    }
+  }
+
+  @include when(fullscreen) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .oxy-tabs__container {
+      flex: 1;
     }
   }
 }
 
 @media screen and (max-width: 330px) {
   .oxy-tabs__map-nav-btn {
-    width: 90px;
+    width: 180rpx;
   }
-}
+}

package/components/oxy-tabs/oxy-tabs.vue

@@ -2,7 +2,9 @@
   <template v-if="sticky">
     <oxy-sticky-box>
       <view
-        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+          fullscreen ? 'is-fullscreen' : ''
+        }`"
         :style="customStyle"
       >
         <oxy-sticky :offset-top="offsetTop">
@@ -14,17 +16,32 @@
                     @click="handleSelect(index)"
                     v-for="(item, index) in children"
                     :key="index"
-                    :class="`oxy-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                    :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                      item.disabled ? 'is-disabled' : ''
+                    }`"
                     :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
                   >
                     <oxy-badge v-if="item.badgeProps" v-bind="item.badgeProps">
-                      <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                      <text
+                        class="oxy-tabs__nav-item-text"
+                        :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                      >
+                        {{ item.title }}
+                      </text>
                     </oxy-badge>
-                    <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-
-                    <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                    <text
+                      v-else
+                      class="oxy-tabs__nav-item-text"
+                      :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                    >
+                      {{ item.title }}
+                    </text>
+                    <view
+                      class="oxy-tabs__line oxy-tabs__line--inner"
+                      v-if="!props.pills && state.activeIndex === index && state.useInnerLine"
+                    ></view>
                   </view>
-                  <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+                  <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
                 </view>
               </scroll-view>
             </view>
@@ -75,7 +92,11 @@
   </template>
 
   <template v-else>
-    <view :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+    <view
+      :class="`oxy-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+        fullscreen ? 'is-fullscreen' : ''
+      }`"
+    >
       <view class="oxy-tabs__nav">
         <view class="oxy-tabs__nav--wrap">
           <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
@@ -84,16 +105,29 @@
                 v-for="(item, index) in children"
                 @click="handleSelect(index)"
                 :key="index"
-                :class="`oxy-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                :class="`oxy-tabs__nav-item ${props.pills ? 'oxy-tabs__nav-item-pills' : ''} ${state.activeIndex === index ? 'is-active' : ''} ${
+                  item.disabled ? 'is-disabled' : ''
+                }`"
                 :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
               >
                 <oxy-badge custom-class="oxy-tabs__nav-item-badge" v-if="item.badgeProps" v-bind="item.badgeProps">
-                  <text class="oxy-tabs__nav-item-text">{{ item.title }}</text>
+                  <text
+                    class="oxy-tabs__nav-item-text"
+                    :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                  >
+                    {{ item.title }}
+                  </text>
                 </oxy-badge>
-                <text v-else class="oxy-tabs__nav-item-text">{{ item.title }}</text>
-                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                <text
+                  v-else
+                  class="oxy-tabs__nav-item-text"
+                  :style="props.pills && props.pillsColor && state.activeIndex === index ? 'background-color:' + props.pillsColor : ''"
+                >
+                  {{ item.title }}
+                </text>
+                <view class="oxy-tabs__line oxy-tabs__line--inner" v-if="!props.pills && state.activeIndex === index && state.useInnerLine"></view>
               </view>
-              <view class="oxy-tabs__line" :style="state.lineStyle"></view>
+              <view v-if="!props.pills" class="oxy-tabs__line" :style="state.lineStyle"></view>
             </view>
           </scroll-view>
         </view>
@@ -145,7 +179,7 @@ import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxySticky from '../oxy-sticky/oxy-sticky.vue'
 import OxyStickyBox from '../oxy-sticky-box/oxy-sticky-box.vue'
 import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
-import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
+import { withDefaultUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
 import { TABS_KEY, tabsProps, type TabsExpose } from './types'
 import { useChildren } from '../composables/useChildren'
@@ -316,23 +350,23 @@ async function updateLineStyle(animation: boolean = true) {
   try {
     const lineStyle: CSSProperties = {}
     if (isDef(lineWidth)) {
-      lineStyle.width = addUnit(lineWidth)
+      lineStyle.width = withDefaultUnit(lineWidth)
     } else {
       if (autoLineWidth) {
         const textRects = await getRect($itemText, true, proxy)
         const textWidth = Number(textRects[state.activeIndex].width)
-        lineStyle.width = addUnit(textWidth)
+        lineStyle.width = unitConvert(textWidth, 0, { output: 'px' })
       }
     }
     if (isDef(lineHeight)) {
-      lineStyle.height = addUnit(lineHeight)
-      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      lineStyle.height = withDefaultUnit(lineHeight)
+      lineStyle.borderRadius = `calc(${withDefaultUnit(lineHeight)} / 2)`
     }
     const rects = await getRect($item, true, proxy)
     const rect = rects[state.activeIndex]
     let left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
     if (left) {
-      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      lineStyle.transform = `translateX(${unitConvert(left, 0, { output: 'px' })}) translateX(-50%)`
       if (animation) {
         lineStyle.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);'
       }

package/components/oxy-tabs/types.ts

@@ -52,11 +52,11 @@ export const tabsProps = {
    */
   autoLineWidth: makeBooleanProp(false),
   /**
-   * 底部条宽度，单位像素
+   * 底部条宽度，支持 `px/rpx`
    */
   lineWidth: numericProp,
   /**
-   * 底部条高度，单位像素
+   * 底部条高度，支持 `px/rpx`
    */
   lineHeight: numericProp,
   /**
@@ -80,7 +80,19 @@ export const tabsProps = {
    * 可选值：'auto' | 'always'
    * @default auto
    */
-  slidable: makeStringProp<TabsSlidable>('auto')
+  slidable: makeStringProp<TabsSlidable>('auto'),
+  /**
+   * 是否开启胶囊模式
+   */
+  pills: makeBooleanProp(false),
+  /**
+   * 胶囊背景颜色
+   */
+  pillsColor: makeStringProp(''),
+  /**
+   * 是否开启全屏模式
+   */
+  fullscreen: makeBooleanProp(false)
 }
 
 export type TabsExpose = {