oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-select/index.scss

@@ -8,9 +8,13 @@
   flex: 1;
   box-sizing: border-box;
   position: relative;
+  text-align: left;
   .oxy-select__label {
     margin: auto 0;
-    margin-right: $-input-cell-padding;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+    font-size: $-input-fs;
   }
   .oxy-select__icon {
     position: absolute;
@@ -33,31 +37,46 @@
   }
   .oxy-select__wrapper {
     font-size: $-input-fs;
-    border: 1px solid $-input-border-color;
+    color: $-input-color;
+    border: 1px solid $-color-border;
     box-sizing: border-box;
-    border-radius: 4px;
-    padding: 0 5px;
-    padding-left: $-input-cell-padding;
+    border-radius: 8rpx;
+    padding: 0 $-input-cell-padding;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
     user-select: none;
     /* #endif */
     flex-direction: row;
-    align-items: center;
-    border-bottom: solid 1px $-input-border-color;
     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: $-input-disabled-color;
+      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%;
-    // height: $-input-inner-height;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
@@ -65,71 +84,83 @@
     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: 12px;
-      border: 1px solid #d9ecff;
-      border-radius: 4px;
+      font-size: 24rpx;
+      border-radius: 8rpx;
       white-space: nowrap;
-      height: 24px;
-      padding: 0 4px;
-      line-height: 22px;
+      height: 48rpx;
+      padding: 0 16rpx;
+      line-height: 44rpx;
       box-sizing: border-box;
-      margin: 2px 2px;
+      margin: 4rpx 8rpx 4rpx 0;
       display: flex;
       max-width: 100%;
       align-items: center;
-      background-color: #f4f4f5;
-      border-color: #e9e9eb;
-      color: #909399;
-      &:first-child {
-        margin-left: 0;
+      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: 12px;
+        font-size: 24rpx;
         white-space: nowrap;
-        line-height: 22px;
-        color: #909399;
+        line-height: 44rpx;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
     .oxy-select__icon-error{
-      margin-left: 4px;
+      margin-left: 8rpx;
+      font-size: 28rpx;
+      color: $-color-aid;
+      cursor: pointer;
+
+      &:hover {
+        color: $-color-danger;
+      }
     }
   }
 
   .oxy-select__input {
     flex: 1;
-    font-size: 14px;
-    height: 22px;
-    line-height: 22px;
+    font-size: $-fs-content;
+    height: 44rpx;
+    line-height: 44rpx;
   }
 
   .oxy-select__input-plac {
-    color: $-input-placeholder-color;
+    color: $-color-tip;
   }
 
   .oxy-select__selector__down {
-    top: calc(100% + 12px);
+    top: calc(100% + 24rpx);
 
     .oxy-select__selector-arrow {
       transform: rotateX(0deg);
-      top: -6px;
+      top: -12rpx;
     }
   }
 
   .oxy-select__selector__upwards {
-    bottom: calc(100% + 12px);
+    bottom: calc(100% + 24rpx);
 
     .oxy-select__selector-arrow {
       transform: rotateX(180deg);
-      bottom: -6px;
+      bottom: -12rpx;
     }
   }
 
@@ -140,17 +171,18 @@
     position: absolute;
     left: 0;
     width: 100%;
-    background-color: #FFFFFF;
-    border: 1px solid #EBEEF5;
-    border-radius: 6px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    z-index: 3;
-    padding: 4px 0;
+    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: 200px;
+    max-height: 480rpx;
     box-sizing: border-box;
     /* #endif */
   }
@@ -159,36 +191,56 @@
   .oxy-select__selector-item {
     /* #ifndef APP-NVUE */
     display: flex;
-    // cursor: pointer;
     /* #endif */
-    line-height: $-input-inner-height;
-    font-size: 14px;
-    text-align: center;
-    padding: 0px 10px;
+    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-empty:last-child,
-  .oxy-select__selector-item:last-child {
-    /* #ifndef APP-NVUE */
-    border-bottom: none;
-    /* #endif */
+  .oxy-select__selector__disabled {
+    color: $-color-tip;
+    cursor: not-allowed;
+    background-color: transparent !important;
   }
 
-  .oxy-select_selector-item_active {
-    color: $-color-theme;
-    font-weight: bold;
-    border-radius: 3px;
+  .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;
+    }
   }
 
-  .oxy-select__selector__disabled {
-    opacity: 0.4;
-    cursor: default;
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 
   /* picker 弹出层通用的指示小三角 */
@@ -200,44 +252,57 @@
     height: 0;
     border-color: transparent;
     border-style: solid;
-    border-width: 6px;
+    border-width: 12rpx;
   }
 
   .oxy-select__selector-arrow {
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+    filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
 
     left: 10%;
-    margin-right: 3px;
+    margin-right: 6rpx;
     border-top-width: 0;
-    border-bottom-color: #EBEEF5;
+    border-bottom-color: $-color-border-light;
   }
 
   .oxy-select__selector-arrow::after {
     content: " ";
-    top: 1px;
-    margin-left: -6px;
+    top: 2rpx;
+    margin-left: -12rpx;
     border-top-width: 0;
-    border-bottom-color: #fff;
+    border-bottom-color: $-color-white;
   }
 
   .oxy-select__input-text {
-    // width: 280px;
-    width: 90%;
+    width: 100%;
+    font-size: $-input-fs;
     color: $-input-color;
+    outline: none;
+    border: none;
+    background: none;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-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;
-    margin-left: 6px;
+    min-width: 80rpx;
+    margin-left: 8rpx;
+    flex: 1;
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
   }
 
   .oxy-select__input-placeholder {
@@ -252,4 +317,15 @@
     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;
+      }
+    }
+  }
 }

package/components/oxy-select/oxy-select.vue

@@ -1,27 +1,27 @@
 <template>
-  <view :class="`oxy-select ${customClass}`" :style="rootStyle">
+  <view :class="rootClass" :style="rootStyle">
     <view v-if="label" class="oxy-select__label" :style="labelStyle">
       <slot name="label">{{ label }}</slot>
     </view>
     <view class="oxy-select__box">
-      <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly }]">
+      <view :class="['oxy-select__wrapper', { 'is-disabled': disabled, 'is-readonly': readonly, 'is-focus': showSelector }]">
         <view class="oxy-select__input-box" @click="toggleSelector">
           <view class="oxy-select__tags" v-if="multiple && currentList.length > 0">
             <view class="oxy-select__tags-item" v-for="item in displayTags" :key="item[valueKey]">
-              <span class="oxy-select__tags-item-text">{{ item[labelKey] }}</span>
+              <span class="oxy-select__tags-item-text">{{ formatItemName(item) }}</span>
               <view v-if="!disabled && !readonly" @click.stop="delItem(item)">
-                <oxy-icon custom-class="oxy-select__icon-error" name="error-fill" />
+                <oxy-icon custom-class="oxy-select__icon-error" name="close" />
               </view>
             </view>
             <view v-if="currentList.length > collapseTagsNum && collapseTags" class="oxy-select__tags-item">
               <span class="oxy-select__tags-item-text">+{{ currentList.length - collapseTagsNum }}</span>
             </view>
             <input
-              v-if="filterable && (!disabled || !readonly)"
+              v-if="filterable && !disabled && !readonly"
               @input="inputChange"
               class="oxy-select__input-text oxy-select__input-filter"
               type="text"
-              placeholder="请输入"
+              :placeholder="currentList.length === 0 ? typePlaceholder : ''"
               v-model="filterInput"
             />
           </view>
@@ -36,15 +36,15 @@
             :readonly="readonly"
             class="oxy-select__input-text oxy-select__input-selector"
             type="text"
-            :placeholder="placeholderOld"
+            :placeholder="placeholderOld || typePlaceholder"
             v-model="filterInput"
           />
           <view v-else-if="!disabled && !readonly" class="oxy-select__input-text oxy-select__input-placeholder">{{ typePlaceholder }}</view>
           <oxy-icon
             v-if="(current.length > 0 && clear && !disabled && !readonly) || (currentArr.length > 0 && clear && !disabled && !readonly)"
             custom-class="oxy-select__icon oxy-select__icon-clear"
-            name="error-fill"
-            @click="clearVal"
+            name="close-circle-filled"
+            @click.stop="clearVal"
           />
           <oxy-icon
             :custom-class="`oxy-select__icon oxy-select__icon-arrow ${showSelector ? 'is-open' : ''}`"
@@ -52,24 +52,33 @@
             name="arrow-down"
           />
         </view>
-        <oxy-transition :show="showSelector" name="fade" :duration="duration">
+        <oxy-transition :show="showSelector" name="fade" :duration="duration" :lazy-render="false">
           <view class="oxy-select--mask" @click="toggleSelector" />
           <view class="oxy-select__selector" :class="isDown ? 'oxy-select__selector__down' : 'oxy-select__selector__upwards'">
             <view class="oxy-select__selector-arrow"></view>
             <scroll-view :scroll-y="true" class="oxy-select__selector-scroll">
-              <view class="oxy-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
-                <span>{{ emptyTips }}</span>
-              </view>
-              <view
-                v-else
-                :class="['oxy-select__selector-item', { 'oxy-select_selector-item_active': multiple && currentArr.includes(item[valueKey]) }]"
-                v-for="(item, index) in filterMixinDatacomResData"
-                :key="index"
-                @click="change(item)"
-              >
-                <span :class="{ 'oxy-select__selector__disabled': item.disabled }">{{ formatItemName(item) }}</span>
-                <oxy-icon v-if="multiple && currentArr.includes(item[valueKey])" name="check" />
+              <view v-if="loading" class="oxy-select__loading">
+                <oxy-icon name="refresh" custom-class="oxy-select__loading-icon" />
+                <text>{{ loadingText }}</text>
               </view>
+              <template v-else>
+                <view class="oxy-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
+                  <span>{{ emptyTips }}</span>
+                </view>
+                <view
+                  v-else
+                  :class="[
+                    'oxy-select__selector-item',
+                    { 'oxy-select_selector-item_active': multiple ? currentArr.includes(item[valueKey]) : modelValue === item[valueKey] }
+                  ]"
+                  v-for="(item, index) in filterMixinDatacomResData"
+                  :key="index"
+                  @click="change(item)"
+                >
+                  <span :class="{ 'oxy-select__selector__disabled': item.disabled }">{{ formatItemName(item) }}</span>
+                  <oxy-icon v-if="multiple && currentArr.includes(item[valueKey])" name="check" />
+                </view>
+              </template>
             </scroll-view>
           </view>
         </oxy-transition>
@@ -89,8 +98,9 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, onMounted, computed } from 'vue'
+import { getCurrentInstance, ref, watch, computed } from 'vue'
 import { objToStyle } from '../common/util'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 import { selectProps, type SelectProps } from './types'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 
@@ -114,8 +124,23 @@ const rootStyle = ref('')
 const duration = ref<number>(200)
 let overlayTimer: ReturnType<typeof setTimeout> | null
 
-onMounted(() => {
-  windowHeight.value = uni.getSystemInfoSync().windowHeight
+const syncWindowHeight = (res?: WindowResizeResult) => {
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  const systemHeight = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemHeight
+}
+
+const handleWindowResize = (res?: WindowResizeResult) => {
+  syncWindowHeight(res)
+  if (showSelector.value) {
+    void getIsDown()
+  }
+}
+
+useWindowResize(handleWindowResize, { immediate: true })
+
+const rootClass = computed(() => {
+  return `oxy-select ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
 })
 
 const labelStyle = computed(() => {
@@ -212,18 +237,28 @@ watch(
 )
 
 function getIsDown() {
-  const query = uni.createSelectorQuery().in(instance)
-  query
-    .select('.oxy-select__box')
-    .boundingClientRect((data) => {
-      const rect = data as UniApp.NodeInfo
-      if (rect && windowHeight.value - (rect.top || 0) > 200) {
-        isDown.value = true
-      } else {
-        isDown.value = false
-      }
-    })
-    .exec()
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery().in(instance)
+    query
+      .select('.oxy-select__box')
+      .boundingClientRect((data) => {
+        const rect = data as UniApp.NodeInfo
+        if (rect) {
+          const bottomSpace = windowHeight.value - (rect.bottom || 0)
+          const topSpace = rect.top || 0
+          const threshold = 280 // max-height 240 + padding/arrow space
+
+          // 如果下方空间不足，且上方空间比下方空间大，则向上弹出
+          if (bottomSpace < threshold && topSpace > bottomSpace) {
+            isDown.value = false
+          } else {
+            isDown.value = true
+          }
+        }
+        resolve(isDown.value)
+      })
+      .exec()
+  })
 }
 
 function initDefVal() {
@@ -367,13 +402,16 @@ function handleEmit(val: any) {
     emit('change', _current)
   }
 }
-function toggleSelector() {
+async function toggleSelector() {
   if (props.disabled || props.readonly) {
     return
   }
-  getIsDown()
-  showSelector.value = !showSelector.value
-  isFocus.value = showSelector.value
+  const nextShow = !showSelector.value
+  if (nextShow) {
+    await getIsDown()
+  }
+  showSelector.value = nextShow
+  isFocus.value = nextShow
   if (props.filterable && current.value && showSelector.value) {
     if (!props.multiple) {
       if (typeof current.value === 'string') {
@@ -394,21 +432,18 @@ function formatItemName(item: any) {
   if (!item) {
     return ''
   }
-  let text = item[props.labelKey]
-  let value = item[props.valueKey]
-  let { channel_code } = item
-  channel_code = channel_code ? `(${channel_code})` : ''
+  const label = item[props.labelKey]
+
   if (props.format) {
     // 格式化输出
-    let str = ''
-    str = props.format
-    for (let key in item) {
+    let str = props.format
+    for (const key in item) {
       str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
     }
     return str
-  } else {
-    return text ? text : `未命名${channel_code}`
   }
+
+  return label !== undefined && label !== null ? String(label) : ''
 }
 
 // 获取当前加载的数据

package/components/oxy-select/types.ts

@@ -61,11 +61,23 @@ export const selectProps = {
    * 是否可清除
    */
   clear: makeBooleanProp(true),
+  /**
+   * 是否加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中文字
+   */
+  loadingText: makeStringProp('加载中...'),
   /**
    * 格式化输出
    */
   format: makeStringProp(''),
-  defItem: makeNumberProp(0)
+  defItem: makeNumberProp(0),
+  /**
+   * 是否隐藏边框
+   */
+  noBorder: makeBooleanProp(false)
 }
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>

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

@@ -73,19 +73,19 @@
   }
   
   @include edeep(header) {
-    height: 72px;
-    line-height: 72px;
+    height: 144rpx;
+    line-height: 144rpx;
   }
   @include e(wrapper) {
-    padding: 0 10px;
+    padding: 0 20rpx;
     position: relative;
-    max-height: 356px;
+    max-height: 712rpx;
     box-sizing: border-box;
     overflow: auto;
 
     @include when(filterable) {
-      height: 314px;
-      max-height: 314px;
+      height: 628rpx;
+      max-height: 628rpx;
     }
 
     @include when(loading) {
@@ -97,6 +97,6 @@
   }
 
   @include e(footer) {
-    padding: 24px 15px;
+    padding: 48rpx 30rpx;
   }
 }

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

@@ -40,6 +40,7 @@
       :title="title || translate('title')"
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :root-portal="rootPortal"
       @close="close"

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

@@ -72,6 +72,8 @@ export const selectPickerProps = {
   beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
   /** 弹窗层级 */
   zIndex: makeNumberProp(15),
+  /** 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；`%` 在弹层打开时按屏幕宽度换算为 `rpx` */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
   safeAreaInsetBottom: makeBooleanProp(true),
   /** 可搜索（目前只支持本地搜索） */

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

@@ -91,7 +91,7 @@
 
   @include edeep(icon) {
     font-size: $-sidebar-icon-size;
-    margin-right: 2px;
+    margin-right: 4rpx;
   }
 
 }