oxy-uni-ui 1.2.0 → 2.0.0

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

@@ -0,0 +1,456 @@
+<template>
+  <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, '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">{{ formatItemName(item) }}</span>
+              <view v-if="!disabled && !readonly" @click.stop="delItem(item)">
+                <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"
+              @input="inputChange"
+              class="oxy-select__input-text oxy-select__input-filter"
+              type="text"
+              :placeholder="currentList.length === 0 ? typePlaceholder : ''"
+              v-model="filterInput"
+            />
+          </view>
+          <view v-else-if="current && current.length > 0 && !showSelector" class="oxy-select__input-text">
+            {{ current }}
+          </view>
+          <input
+            v-else-if="filterable && showSelector"
+            :focus="isFocus"
+            @input="inputChange"
+            :disabled="disabled"
+            :readonly="readonly"
+            class="oxy-select__input-text oxy-select__input-selector"
+            type="text"
+            :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="close-circle-filled"
+            @click.stop="clearVal"
+          />
+          <oxy-icon
+            :custom-class="`oxy-select__icon oxy-select__icon-arrow ${showSelector ? 'is-open' : ''}`"
+            v-else-if="!disabled && !readonly"
+            name="arrow-down"
+          />
+        </view>
+        <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 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>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-select',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+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'
+
+type SelectOption = Record<string, any>
+type SelectModelValue = SelectProps['modelValue']
+
+const props = defineProps(selectProps)
+const emit = defineEmits(['inputChange', 'input', 'change', 'update:modelValue'])
+
+const instance = getCurrentInstance() as any
+const showSelector = ref<boolean>(false)
+const current = ref<string | SelectOption[]>('')
+const mixinDatacomResData = ref<SelectOption[]>([])
+const placeholderOld = ref<string>('')
+const currentArr = ref<Array<string | number | boolean>>([])
+const filterInput = ref<string>('')
+const isFocus = ref<boolean>(false)
+const windowHeight = ref<number>(0)
+const isDown = ref<boolean>(true)
+const rootStyle = ref('')
+const duration = ref<number>(200)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+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(() => {
+  const labelStyle: Record<string, any> = {}
+  if (props.labelWidth) {
+    labelStyle['min-width'] = props.labelWidth
+    labelStyle['max-width'] = props.labelWidth
+  }
+  return objToStyle(labelStyle)
+})
+
+const currentList = computed(() => {
+  if (props.multiple && Array.isArray(current.value)) {
+    return current.value
+  }
+  return []
+})
+
+const displayTags = computed(() => {
+  if (props.collapseTags) {
+    return currentList.value.slice(0, props.collapseTagsNum)
+  }
+  return currentList.value
+})
+
+const filterMixinDatacomResData = computed(() => {
+  if (props.filterable && filterInput.value) {
+    return mixinDatacomResData.value.filter((e) => e[props.labelKey].includes(filterInput.value))
+  } else {
+    return mixinDatacomResData.value
+  }
+})
+
+const typePlaceholder = computed(() => {
+  return props.placeholder
+})
+
+const valueCom = computed(() => {
+  return props.modelValue
+})
+
+watch(
+  () => props.columns,
+  (newValue, oldValue) => {
+    if (Array.isArray(newValue) && oldValue !== newValue) {
+      mixinDatacomResData.value = newValue || []
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => valueCom.value,
+  () => {
+    initDefVal()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => mixinDatacomResData.value,
+  (val) => {
+    if (val.length) {
+      initDefVal()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => showSelector.value,
+  (val) => {
+    if (overlayTimer) {
+      clearTimeout(overlayTimer)
+    }
+    if (val) {
+      rootStyle.value = `z-index: 1;${props.customStyle}`
+    } else {
+      overlayTimer = setTimeout(() => {
+        rootStyle.value = `${props.customStyle}`
+      }, duration.value)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+function getIsDown() {
+  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() {
+  let defValue: SelectModelValue | '' = ''
+  if ((valueCom.value || valueCom.value === 0) && !isDisabled(valueCom.value)) {
+    defValue = valueCom.value as SelectModelValue
+  } else {
+    let strogeValue: SelectModelValue | '' | undefined
+    if (strogeValue || strogeValue === 0) {
+      defValue = strogeValue
+    } else {
+      let defItem = ''
+      if (props.defItem > 0 && props.defItem <= mixinDatacomResData.value.length) {
+        defItem = mixinDatacomResData.value[props.defItem - 1][props.valueKey] as string
+      }
+      defValue = defItem as SelectModelValue
+    }
+    if (defValue || defValue === 0) {
+      handleEmit(defValue)
+    }
+  }
+  if (props.multiple) {
+    const _mixinDatacomResData = mixinDatacomResData.value || []
+    const defArray = Array.isArray(defValue) ? defValue : []
+    const list: SelectOption[] = defArray.map((item) => {
+      const found = _mixinDatacomResData.find((e) => {
+        return e[props.valueKey] == item
+      })
+      return {
+        ...found
+      }
+    })
+    current.value = list
+    currentArr.value = list.map((e) => e[props.valueKey] as string | number | boolean)
+    if (defArray.length < 1) {
+      currentArr.value = []
+    }
+  } else {
+    const def = mixinDatacomResData.value.find((item) => item[props.valueKey] === defValue)
+    current.value = def ? formatItemName(def) : ''
+  }
+}
+
+/**
+ * @param {[String, Number]} value
+ * 判断用户给的 value 是否同时为禁用状态
+ */
+function isDisabled(value: any) {
+  let isDisabled = false
+
+  mixinDatacomResData.value.forEach((item) => {
+    if (item[props.valueKey] === value) {
+      isDisabled = item.disabled
+    }
+  })
+  return isDisabled
+}
+
+function inputChange(e: any) {
+  emit('inputChange', e.detail.value)
+}
+
+function clearVal() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  if (props.multiple) {
+    current.value = []
+    currentArr.value = []
+    handleEmit([])
+  } else {
+    current.value = ''
+    currentArr.value = []
+    handleEmit('')
+  }
+  placeholderOld.value = props.placeholder
+  filterInput.value = ''
+}
+
+function change(item: any) {
+  if (!item.disabled) {
+    if (props.multiple) {
+      if (!Array.isArray(current.value)) {
+        current.value = []
+      } else {
+        current.value = [...current.value]
+      }
+      const currentList = current.value as SelectOption[]
+      const value = item[props.valueKey] as string | number | boolean
+      if (!currentArr.value) {
+        currentArr.value = []
+      }
+      const index = currentArr.value.indexOf(value)
+      if (index !== -1) {
+        currentList.splice(index, 1)
+        currentArr.value.splice(index, 1)
+        handleEmit(currentList)
+      } else {
+        currentList.push(item)
+        currentArr.value.push(value)
+        handleEmit(currentList)
+      }
+      filterInput.value = ''
+    } else {
+      showSelector.value = false
+      current.value = formatItemName(item)
+      if (props.filterable) {
+        filterInput.value = item[props.labelKey]
+      }
+      handleEmit(item[props.valueKey])
+    }
+  }
+}
+function delItem(item: any) {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  if (currentArr.value.includes(item[props.valueKey])) {
+    if (!Array.isArray(current.value)) {
+      return
+    }
+    const currentList = current.value as SelectOption[]
+    const index = currentList.findIndex((e) => {
+      return e[props.valueKey] == item[props.valueKey]
+    })
+    currentList.splice(index, 1)
+    currentArr.value.splice(index, 1)
+    handleEmit(currentList)
+  }
+}
+function handleEmit(val: any) {
+  if (props.multiple) {
+    emit('input', currentArr.value)
+    emit('update:modelValue', currentArr.value)
+    const _currentArr = mixinDatacomResData.value.filter((item) => currentArr.value.includes(item[props.valueKey]))
+    emit('change', _currentArr)
+  } else {
+    emit('input', val)
+    emit('update:modelValue', val)
+    const _current = mixinDatacomResData.value.find((item) => val == item[props.valueKey])
+    emit('change', _current)
+  }
+}
+async function toggleSelector() {
+  if (props.disabled || props.readonly) {
+    return
+  }
+  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') {
+        placeholderOld.value = current.value
+      }
+    }
+  } else if (props.filterable && !current.value && !showSelector.value) {
+    if (placeholderOld.value != props.placeholder) {
+      if (!props.multiple) {
+        current.value = placeholderOld.value
+      }
+    }
+  }
+  filterInput.value = ''
+}
+
+function formatItemName(item: any) {
+  if (!item) {
+    return ''
+  }
+  const label = item[props.labelKey]
+
+  if (props.format) {
+    // 格式化输出
+    let str = props.format
+    for (const key in item) {
+      str = str.replace(new RegExp(`{${key}}`, 'g'), item[key])
+    }
+    return str
+  }
+
+  return label !== undefined && label !== null ? String(label) : ''
+}
+
+// 获取当前加载的数据
+function getLoadData() {
+  return mixinDatacomResData.value
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-select/types.ts

@@ -0,0 +1,83 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const selectProps = {
+  ...baseProps,
+  /**
+   * 选中项
+   */
+  modelValue: makeRequiredProp([String, Number, Array]),
+  /**
+   * 是否多选
+   */
+  multiple: makeBooleanProp(false),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /** 只读 */
+  readonly: makeBooleanProp(false),
+  /**
+   * 多作为 key 唯一标识的键名
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 多作为 value 唯一标识的键名
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 是否开启搜索
+   */
+  filterable: makeBooleanProp(false),
+  /**
+   * 是否折叠显示标签
+   */
+  collapseTags: makeBooleanProp(false),
+  /**
+   * 超过多少个标签才折叠
+   */
+  collapseTagsNum: makeNumberProp(1),
+  /**
+   * 选择器数据
+   */
+  columns: makeArrayProp<Record<string, any>>(),
+  /**
+   * 左侧标题
+   */
+  label: makeStringProp(''),
+  /** 设置左侧标题宽度 */
+  labelWidth: makeStringProp(''),
+  /** 选择器的值靠右展示 */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 输入框的提示文字
+   */
+  placeholder: makeStringProp('请选择'),
+  /**
+   * 无选项提示
+   */
+  emptyTips: makeStringProp('无选项'),
+  /**
+   * 是否可清除
+   */
+  clear: makeBooleanProp(true),
+  /**
+   * 是否加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中文字
+   */
+  loadingText: makeStringProp('加载中...'),
+  /**
+   * 格式化输出
+   */
+  format: makeStringProp(''),
+  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"
@@ -320,6 +321,9 @@ function close() {
 
 function open() {
   if (props.disabled || props.readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   selectList.value = valueFormat(props.modelValue)
   pickerShow.value = true
   isConfirm.value = false

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),
   /** 可搜索（目前只支持本地搜索） */
@@ -105,7 +107,11 @@ export const selectPickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

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

package/components/oxy-signature/oxy-signature.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { getRect, isDef, objToStyle, unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
 import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'
 import { useTranslate } from '../composables/useTranslate'
 // #ifdef MP-WEIXIN
@@ -147,11 +147,11 @@ watch(
 const canvasStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.width)) {
-    style.width = addUnit(props.width)
+    style.width = unitConvert(withDefaultUnit(props.width, 'rpx'), 0, { output: 'px' })
   }
 
   if (isDef(props.height)) {
-    style.height = addUnit(props.height)
+    style.height = unitConvert(withDefaultUnit(props.height, 'rpx'), 0, { output: 'px' })
   }
 
   return `${objToStyle(style)}`
@@ -159,6 +159,12 @@ const canvasStyle = computed(() => {
 
 const disableScroll = computed(() => props.disableScroll)
 const enableHistory = computed(() => props.enableHistory)
+const resolveStrokeWidth = (value: number | string): number => {
+  return unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+}
+const lineWidthInPx = computed(() => resolveStrokeWidth(props.lineWidth))
+const minWidthInPx = computed(() => resolveStrokeWidth(props.minWidth))
+const maxWidthInPx = computed(() => resolveStrokeWidth(props.maxWidth))
 
 const lines = ref<Line[]>([]) // 保存所有线条
 const redoLines = ref<Line[]>([]) // 保存撤销的线条
@@ -167,22 +173,24 @@ const currentStep = ref(0) // 当前步骤
 
 // 添加计算笔画宽度的方法
 function calculateLineWidth(speed: number): number {
-  if (!props.pressure) return props.lineWidth
+  if (!props.pressure) return lineWidthInPx.value
 
   const minSpeed = props.minSpeed || 1.5
+  const minWidth = Math.min(minWidthInPx.value, maxWidthInPx.value)
+  const maxWidth = Math.max(minWidthInPx.value, maxWidthInPx.value)
   const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed))
-  const addWidth = ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed
-  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth)
-  return Math.min(lineWidth, props.maxWidth)
+  const addWidth = ((maxWidth - minWidth) * (limitedSpeed - minSpeed)) / minSpeed
+  const lineWidth = Math.max(maxWidth - addWidth, minWidth)
+  return Math.min(lineWidth, maxWidth)
 }
 
 /* 获取默认笔画宽度 */
 const getDefaultLineWidth = () => {
   if (props.pressure) {
     // 在压感模式下，使用最大和最小宽度的平均值作为默认值
-    return (props.maxWidth + props.minWidth) / 2
+    return (maxWidthInPx.value + minWidthInPx.value) / 2
   }
-  return props.lineWidth
+  return lineWidthInPx.value
 }
 
 /* 开始画线 */
@@ -469,7 +477,7 @@ function drawSmoothLine(prePoint: Point, point: Point) {
   }
 
   // 计算线宽
-  const lineWidth = point.lineWidth || props.lineWidth
+  const lineWidth = point.lineWidth || lineWidthInPx.value
 
   // 绘制贝塞尔曲线
   if (typeof prePoint.lastX1 === 'number') {