oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-row/oxy-row.vue

@@ -18,7 +18,7 @@ export default {
 import { computed, type CSSProperties } from 'vue'
 import { useChildren } from '../composables/useChildren'
 import { ROW_KEY, rowProps } from './types'
-import { addUnit, objToStyle } from '../common/util'
+import { withDefaultUnit, objToStyle } from '../common/util'
 
 const props = defineProps(rowProps)
 const { linkChildren } = useChildren(ROW_KEY)
@@ -31,8 +31,8 @@ const rowStyle = computed(() => {
   if (gutter < 0) {
     console.error('[Oxy ui] warning(oxy-row): attribute gutter must be greater than or equal to 0')
   } else if (gutter) {
-    style.marginLeft = addUnit(gutter / 2)
-    style.marginRight = addUnit(gutter / 2)
+    style.marginLeft = withDefaultUnit(gutter / 2)
+    style.marginRight = withDefaultUnit(gutter / 2)
   }
   return `${objToStyle(style)}${props.customStyle}`
 })

package/components/oxy-row/types.ts

@@ -10,7 +10,7 @@ export const ROW_KEY: InjectionKey<RowProvide> = Symbol('oxy-row')
 export const rowProps = {
   ...baseProps,
   /**
-   * 列元素之间的间距（单位为px）
+   * 列元素之间的间距（单位为rpx）
    */
   gutter: makeNumberProp(0)
 }

package/components/oxy-search/index.scss

@@ -97,7 +97,7 @@
     align-items: center;
   }
   @include edeep(search-icon) {
-    margin-right: 8px;
+    margin-right: 16rpx;
     color: $-search-icon-color;
     font-size: $-search-icon-size;
   }
@@ -105,7 +105,7 @@
     position: absolute;
     font-size: $-search-icon-size;
     top: 50%;
-    left: 16px;
+    left: 32rpx;
     transform: translateY(-50%);
     color: $-search-icon-color;
   }
@@ -116,7 +116,7 @@
   @include edeep(clear) {
     position: absolute;
     right: 0;
-    padding: 6px 9px 6px 7px;
+    padding: 12rpx 18rpx 12rpx 14rpx;
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {

package/components/oxy-segmented/index.scss

@@ -40,21 +40,21 @@
   width: 100%;
   background-color: $-segmented-item-bg-color;
   padding: $-segmented-padding;
-  border-radius: 4px;
+  border-radius: 8rpx;
   box-sizing: border-box;
 
 
   @include e(item) {
     position: relative;
     text-align: center;
-    border-radius: 4px;
+    border-radius: 8rpx;
     flex: 1;
     min-width: 0;
     z-index: 1;
-    min-height: 28px;
-    line-height: 28px;
-    padding: 0 12px;
-    font-size: 14px;
+    min-height: 56rpx;
+    line-height: 56rpx;
+    padding: 0 24rpx;
+    font-size: 28rpx;
     color: $-segmented-item-color;
     font-weight: 400;
 
@@ -63,18 +63,18 @@
     }
 
     @include when(large) {
-      min-height: 32px;
-      line-height: 32px;
-      padding: 0 12px;
-      font-size: 16px;
+      min-height: 64rpx;
+      line-height: 64rpx;
+      padding: 0 24rpx;
+      font-size: 32rpx;
     }
 
 
     @include when(small) {
-      min-height: 24px;
-      line-height: 24px;
-      padding: 0 7px;
-      font-size: 12px;
+      min-height: 48rpx;
+      line-height: 48rpx;
+      padding: 0 14rpx;
+      font-size: 24rpx;
     }
 
     @include when(disabled) {
@@ -84,7 +84,7 @@
 
     @include m(active) {
       background-color: $-segmented-item-acitve-bg;
-      border-radius: 4px;
+      border-radius: 8rpx;
       height: calc(100% - $-segmented-padding * 2);
       @include when(disabled) {
         opacity: 0.8;
@@ -98,4 +98,4 @@
     text-overflow: ellipsis;
   }
 
-}
+}

package/components/oxy-segmented/oxy-segmented.vue

@@ -32,9 +32,10 @@ export default {
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
-import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../common/util'
+import { getRect, isObj, objToStyle, pause, isEqual, unitConvert } from '../common/util'
 import type { CSSProperties } from 'vue'
 import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
+import { useWindowResize } from '../composables/useWindowResize'
 const $item = '.oxy-segmented__item'
 
 const props = defineProps(segmentedProps)
@@ -63,7 +64,24 @@ watch(
   }
 )
 
+watch(
+  () => props.options,
+  async () => {
+    updateCurrentIndex()
+    await pause()
+    updateActiveStyle(false)
+  },
+  {
+    deep: true
+  }
+)
+
 const { proxy } = getCurrentInstance() as any
+const handleWindowResize = async () => {
+  await pause()
+  updateActiveStyle(false)
+}
+useWindowResize(handleWindowResize)
 
 onMounted(async () => {
   updateCurrentIndex()
@@ -77,15 +95,17 @@ onMounted(async () => {
  */
 function updateActiveStyle(animation: boolean = true) {
   getRect($item, true, proxy).then((rects) => {
+    if (!Array.isArray(rects) || rects.length === 0 || !rects[state.activeIndex]) return
     const rect = rects[state.activeIndex]
     const style: CSSProperties = {
       position: 'absolute',
-      width: addUnit(rect.width!),
+      // getRect 返回的是真实像素值，需按 px 输出避免宽屏下激活块尺寸偏大
+      width: unitConvert(rect.width, 0, { output: 'px' }),
       'z-index': 0
     }
     const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
     if (left) {
-      style.transform = `translateX(${left}px)`
+      style.transform = `translateX(${unitConvert(left, 0, { output: 'px' })})`
     }
     if (animation) {
       style.transition = 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'

package/components/oxy-select/index.scss

@@ -0,0 +1,331 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(select) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+  box-sizing: border-box;
+  position: relative;
+  text-align: left;
+  .oxy-select__label {
+    margin: auto 0;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+    font-size: $-input-fs;
+  }
+  .oxy-select__icon {
+    position: absolute;
+    right: 0;
+    font-size: $-input-icon-size;
+    color: $-input-icon-color;
+  }
+  .oxy-select__icon-clear {
+    color: $-input-clear-color;
+  }
+  .oxy-select__icon-arrow {
+    transition: transform .2s;
+  }
+  .oxy-select__icon-arrow.is-open {
+    transform: rotate(180deg);
+  }
+  .oxy-select__box {
+    width: 100%;
+    flex: 1;
+  }
+  .oxy-select__wrapper {
+    font-size: $-input-fs;
+    color: $-input-color;
+    border: 1px solid $-color-border;
+    box-sizing: border-box;
+    border-radius: 8rpx;
+    padding: 0 $-input-cell-padding;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    user-select: none;
+    /* #endif */
+    flex-direction: row;
+    width: 100%;
+    flex: 1;
+    min-height: $-input-inner-height;
+    transition: all 0.2s;
+
+    &:hover:not(.is-disabled):not(.is-readonly) {
+      border-color: $-color-theme;
+    }
+
+    &.is-focus:not(.is-disabled):not(.is-readonly) {
+      border-color: $-color-theme;
+      box-shadow: 0 0 0 4rpx rgba($-color-theme, 0.1);
+    }
+
+    &.is-disabled {
+      background-color: $-color-bg;
+      border-color: $-color-border-light;
+      cursor: not-allowed;
+      color: $-color-tip;
+    }
+
+    &.is-readonly {
+      background-color: transparent;
+      border-color: transparent;
+      padding: 0;
+    }
+  }
+  .oxy-select__input-box {
+    width: 100%;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .oxy-select__tags {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    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;
+
+      &:hover {
+        border-color: $-color-theme;
+        color: $-color-theme;
+      }
+
+      &-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;
+      }
+    }
+  }
+
+  .oxy-select__input {
+    flex: 1;
+    font-size: $-fs-content;
+    height: 44rpx;
+    line-height: 44rpx;
+  }
+
+  .oxy-select__input-plac {
+    color: $-color-tip;
+  }
+
+  .oxy-select__selector__down {
+    top: calc(100% + 24rpx);
+
+    .oxy-select__selector-arrow {
+      transform: rotateX(0deg);
+      top: -12rpx;
+    }
+  }
+
+  .oxy-select__selector__upwards {
+    bottom: calc(100% + 24rpx);
+
+    .oxy-select__selector-arrow {
+      transform: rotateX(180deg);
+      bottom: -12rpx;
+    }
+  }
+
+  .oxy-select__selector {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    position: absolute;
+    left: 0;
+    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);
+    z-index: 100;
+    padding: 12rpx 0;
+    overflow: hidden;
+  }
+
+  .oxy-select__selector-scroll {
+    /* #ifndef APP-NVUE */
+    max-height: 480rpx;
+    box-sizing: border-box;
+    /* #endif */
+  }
+
+  .oxy-select__selector-empty,
+  .oxy-select__selector-item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    min-height: 80rpx;
+    line-height: 1.4;
+    font-size: $-fs-content;
+    padding: 16rpx 32rpx;
+    box-sizing: border-box;
+    transition: background-color 0.2s;
+  }
+
+  .oxy-select__selector-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $-color-content;
+    cursor: pointer;
+
+    &:hover:not(.oxy-select__selector__disabled) {
+      background-color: $-color-bg;
+    }
+
+    &.oxy-select_selector-item_active {
+      color: $-color-theme;
+      background-color: rgba($-color-theme, 0.05);
+      font-weight: 500;
+    }
+  }
+
+  .oxy-select__selector__disabled {
+    color: $-color-tip;
+    cursor: not-allowed;
+    background-color: transparent !important;
+  }
+
+  .oxy-select__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40rpx 0;
+    color: $-color-aid;
+    font-size: $-fs-secondary;
+
+    &-icon {
+      margin-right: 16rpx;
+      animation: rotate 1s linear infinite;
+    }
+  }
+
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* picker 弹出层通用的指示小三角 */
+  .oxy-select__selector-arrow,
+  .oxy-select__selector-arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 12rpx;
+  }
+
+  .oxy-select__selector-arrow {
+    filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
+
+    left: 10%;
+    margin-right: 6rpx;
+    border-top-width: 0;
+    border-bottom-color: $-color-border-light;
+  }
+
+  .oxy-select__selector-arrow::after {
+    content: " ";
+    top: 2rpx;
+    margin-left: -12rpx;
+    border-top-width: 0;
+    border-bottom-color: $-color-white;
+  }
+
+  .oxy-select__input-text {
+    width: 100%;
+    font-size: $-input-fs;
+    color: $-input-color;
+    outline: none;
+    border: none;
+    background: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .oxy-select__input-selector {
+    position: absolute;
+    z-index: 1;
+    left: 20rpx;
+    right: 60rpx;
+    width: auto;
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  .oxy-select__input-filter {
+    width: auto;
+    min-width: 80rpx;
+    margin-left: 8rpx;
+    flex: 1;
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  .oxy-select__input-placeholder {
+    color: $-input-placeholder-color;
+  }
+
+  .oxy-select--mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 2;
+  }
+
+  @include when(no-border) {
+    .oxy-select__wrapper {
+      border: 0;
+      padding: 0;
+      min-height: $-input-cell-height;
+      &.is-focus:not(.is-disabled):not(.is-readonly) {
+        box-shadow: none;
+      }
+    }
+  }
+}