oxy-uni-ui 1.0.1

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

@@ -0,0 +1,498 @@
+<template>
+  <view :class="`oxy-col-picker ${customClass}`" :style="customStyle">
+    <oxy-cell
+      v-if="!$slots.default"
+      :title="label"
+      :value="showValue || placeholder || translate('placeholder')"
+      :required="required"
+      :size="size"
+      :title-width="labelWidth"
+      :prop="prop"
+      :rules="rules"
+      :clickable="!disabled && !readonly"
+      :value-align="alignRight ? 'right' : 'left'"
+      :custom-class="cellClass"
+      :custom-style="customStyle"
+      :custom-title-class="customLabelClass"
+      :custom-value-class="customValueClass"
+      :ellipsis="ellipsis"
+      :use-title-slot="!!$slots.label"
+      :marker-side="markerSide"
+      @click="showPicker"
+    >
+      <template v-if="$slots.label" #title>
+        <slot name="label"></slot>
+      </template>
+      <template #right-icon>
+        <oxy-icon v-if="showArrow" custom-class="oxy-col-picker__arrow" name="arrow-right" />
+      </template>
+    </oxy-cell>
+    <view v-else @click="showPicker">
+      <slot></slot>
+    </view>
+    <oxy-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :title="title || translate('title')"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
+      @open="handlePickerOpend"
+      @close="handlePickerClose"
+      @closed="handlePickerClosed"
+    >
+      <view class="oxy-col-picker__selected">
+        <scroll-view :scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
+          <view class="oxy-col-picker__selected-container">
+            <view
+              v-for="(_, colIndex) in selectList"
+              :key="colIndex"
+              :class="`oxy-col-picker__selected-item  ${colIndex === currentCol && 'is-selected'}`"
+              @click="handleColClick(colIndex)"
+            >
+              {{ selectShowList[colIndex] || translate('select') }}
+            </view>
+            <view class="oxy-col-picker__selected-line" :style="state.lineStyle"></view>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="oxy-col-picker__list-container">
+        <view
+          v-for="(col, colIndex) in selectList"
+          :key="colIndex"
+          class="oxy-col-picker__list"
+          :style="colIndex === currentCol ? 'display: block;' : 'display: none;'"
+        >
+          <view
+            v-for="(item, index) in col"
+            :key="index"
+            :class="`oxy-col-picker__list-item ${pickerColSelected[colIndex] && item[valueKey] === pickerColSelected[colIndex] && 'is-selected'} ${
+              item.disabled && 'is-disabled'
+            }`"
+            @click="chooseItem(colIndex, index)"
+          >
+            <view>
+              <view class="oxy-col-picker__list-item-label">{{ item[labelKey] }}</view>
+              <view v-if="item[tipKey]" class="oxy-col-picker__list-item-tip">{{ item[tipKey] }}</view>
+            </view>
+            <oxy-icon custom-class="oxy-col-picker__checked" name="check"></oxy-icon>
+          </view>
+          <view v-if="loading" class="oxy-col-picker__loading">
+            <oxy-loading :color="loadingColor" />
+          </view>
+        </view>
+      </view>
+    </oxy-action-sheet>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-col-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
+import OxyCell from '../oxy-cell/oxy-cell.vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, reactive } from 'vue'
+import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { colPickerProps, type ColPickerExpose } from './types'
+
+const { translate } = useTranslate('col-picker')
+
+const $container = '.oxy-col-picker__selected-container'
+const $item = '.oxy-col-picker__selected-item'
+
+const props = defineProps(colPickerProps)
+const emit = defineEmits(['close', 'update:modelValue', 'confirm'])
+
+const pickerShow = ref<boolean>(false)
+const currentCol = ref<number>(0)
+const selectList = ref<Record<string, any>[][]>([])
+const pickerColSelected = ref<(string | number)[]>([])
+const selectShowList = ref<Record<string, any>[]>([])
+const loading = ref<boolean>(false)
+const isChange = ref<boolean>(false)
+const lastSelectList = ref<Record<string, any>[][]>([])
+const lastPickerColSelected = ref<(string | number)[]>([])
+const scrollLeft = ref<number>(0)
+const inited = ref<boolean>(false)
+const isCompleting = ref<boolean>(false)
+
+const state = reactive({
+  lineStyle: 'display:none;' // 激活项边框线样式
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const updateLineAndScroll = debounce(function (animation = true) {
+  setLineStyle(animation)
+  lineScrollIntoView()
+}, 50)
+
+const showValue = computed(() => {
+  const selectedItems = (props.modelValue || []).map((item, colIndex) => {
+    return getSelectedItem(item, colIndex, selectList.value)
+  })
+
+  if (props.displayFormat) {
+    return props.displayFormat(selectedItems)
+  } else {
+    return selectedItems
+      .map((item) => {
+        return item[props.labelKey]
+      })
+      .join('')
+  }
+})
+
+const cellClass = computed(() => {
+  const classes = ['oxy-col-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('oxy-col-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === pickerColSelected.value) return
+    pickerColSelected.value = newValue
+    newValue.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+    })
+    handleAutoComplete()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue, oldValue) => {
+    if (newValue.length && !isArray(newValue[0])) {
+      console.error('[Oxy ui] error(oxy-col-picker): the columns props of oxy-col-picker should be a two-dimensional array')
+      return
+    }
+    if (newValue.length === 0 && !oldValue) return
+
+    const newSelectedList = newValue.slice(0)
+
+    selectList.value = newSelectedList
+
+    selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey]
+    })
+    lastSelectList.value = newSelectedList
+
+    if (newSelectedList.length > 0) {
+      currentCol.value = newSelectedList.length - 1
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columnChange,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of columnChange must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeConfirm,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeConfirm must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly
+})
+
+onMounted(() => {
+  inited.value = true
+})
+
+// 打开弹框
+function open() {
+  showPicker()
+}
+// 关闭弹框
+function close() {
+  handlePickerClose()
+}
+function handlePickerOpend() {
+  updateLineAndScroll(false)
+}
+
+function handlePickerClose() {
+  pickerShow.value = false
+  emit('close')
+}
+
+function handlePickerClosed() {
+  if (isChange.value) {
+    setTimeout(() => {
+      selectList.value = lastSelectList.value.slice(0)
+      pickerColSelected.value = lastPickerColSelected.value.slice(0)
+      selectShowList.value = lastPickerColSelected.value.map((item, colIndex) => {
+        return getSelectedItem(item, colIndex, lastSelectList.value)[props.labelKey]
+      })
+      currentCol.value = lastSelectList.value.length - 1
+      isChange.value = false
+    }, 250)
+  }
+}
+
+function showPicker() {
+  const { disabled, readonly } = props
+
+  if (disabled || readonly) return
+  pickerShow.value = true
+  lastPickerColSelected.value = pickerColSelected.value.slice(0)
+  lastSelectList.value = selectList.value.slice(0)
+}
+
+function getSelectedItem(value: string | number, colIndex: number, selectList: Record<string, any>[][]) {
+  const { valueKey, labelKey } = props
+  if (selectList[colIndex]) {
+    const selecteds = selectList[colIndex].filter((item) => {
+      return item[valueKey] === value
+    })
+
+    if (selecteds.length > 0) {
+      return selecteds[0]
+    }
+  }
+
+  return {
+    [valueKey]: value,
+    [labelKey]: ''
+  }
+}
+
+function chooseItem(colIndex: number, index: number) {
+  const item = selectList.value[colIndex][index]
+  if (item.disabled) return
+
+  const newPickerColSelected = pickerColSelected.value.slice(0, colIndex)
+  newPickerColSelected.push(item[props.valueKey])
+  isChange.value = true
+  pickerColSelected.value = newPickerColSelected
+  selectList.value = selectList.value.slice(0, colIndex + 1)
+  selectShowList.value = newPickerColSelected.map((item, colIndex) => {
+    return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+  })
+
+  if (selectShowList.value[colIndex] && colIndex === currentCol.value) {
+    updateLineAndScroll(true)
+  }
+
+  handleColChange(colIndex, item, index)
+}
+
+function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
+  loading.value = true
+  const { columnChange, beforeConfirm } = props
+  columnChange &&
+    columnChange({
+      selectedItem: item,
+      index: colIndex,
+      rowIndex: index,
+      resolve: (nextColumn: Record<string, any>[]) => {
+        if (!isArray(nextColumn)) {
+          console.error('[Oxy ui] error(oxy-col-picker): the data of each column of oxy-col-picker should be an array')
+          return
+        }
+
+        const newSelectList = selectList.value.slice(0)
+        newSelectList[colIndex + 1] = nextColumn
+
+        selectList.value = newSelectList
+        loading.value = false
+        currentCol.value = colIndex + 1
+
+        updateLineAndScroll(true)
+        if (typeof callback === 'function') {
+          isCompleting.value = false
+          selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
+            return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+          })
+          callback()
+        }
+      },
+      finish: (isOk?: boolean) => {
+        // 每设置展示数据回显
+        if (typeof callback === 'function') {
+          loading.value = false
+          isCompleting.value = false
+          return
+        }
+        if (isBoolean(isOk) && !isOk) {
+          loading.value = false
+          return
+        }
+
+        if (beforeConfirm) {
+          beforeConfirm(
+            pickerColSelected.value,
+            pickerColSelected.value.map((item, colIndex) => {
+              return getSelectedItem(item, colIndex, selectList.value)
+            }),
+            (isPass: boolean) => {
+              if (isPass) {
+                onConfirm()
+              } else {
+                loading.value = false
+              }
+            }
+          )
+        } else {
+          onConfirm()
+        }
+      }
+    })
+}
+function onConfirm() {
+  isChange.value = false
+  loading.value = false
+  pickerShow.value = false
+
+  emit('update:modelValue', pickerColSelected.value)
+  emit('confirm', {
+    value: pickerColSelected.value,
+    selectedItems: pickerColSelected.value.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, selectList.value)
+    })
+  })
+}
+function handleColClick(index: number) {
+  isChange.value = true
+  currentCol.value = index
+  updateLineAndScroll(true)
+}
+/**
+ * @description 更新navBar underline的偏移量
+ * @param {Boolean} animation 是否伴随动画
+ */
+function setLineStyle(animation: boolean = true) {
+  if (!inited.value) return
+  const { lineWidth, lineHeight } = props
+  getRect($item, true, proxy)
+    .then((rects) => {
+      const lineStyle: CSSProperties = {}
+      if (isDef(lineWidth)) {
+        lineStyle.width = addUnit(lineWidth)
+      }
+      if (isDef(lineHeight)) {
+        lineStyle.height = addUnit(lineHeight)
+        lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      }
+      const rect = rects[currentCol.value]
+      let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
+      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+
+      if (animation) {
+        lineStyle.transition = 'width 300ms ease, transform 300ms ease'
+      }
+
+      state.lineStyle = objToStyle(lineStyle)
+    })
+    .catch(() => {})
+}
+/**
+ * @description scroll-view滑动到active的tab_nav
+ */
+function lineScrollIntoView() {
+  if (!inited.value) return
+  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)])
+    .then(([navItemsRects, navRect]) => {
+      if (!isArray(navItemsRects) || navItemsRects.length === 0) return
+      // 选中元素
+      const selectItem = navItemsRects[currentCol.value]
+      // 选中元素之前的节点的宽度总和
+      const offsetLeft = navItemsRects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0)
+      // scroll-view滑动到selectItem的偏移量
+      scrollLeft.value = offsetLeft - ((navRect as any).width - Number(selectItem.width)) / 2
+    })
+    .catch(() => {})
+}
+
+// 递归列数据补齐
+function diffColumns(colIndex: number) {
+  // colIndex 为 -1 时，item 为空对象，>=0 时则具有 value 属性
+  const item = colIndex === -1 ? {} : { [props.valueKey]: props.modelValue[colIndex] }
+  handleColChange(colIndex, item, -1, () => {
+    // 如果 columns 长度还小于 value 长度，colIndex + 1，继续递归补齐
+    if (selectList.value.length < props.modelValue.length) {
+      diffColumns(colIndex + 1)
+    }
+  })
+}
+function handleAutoComplete() {
+  if (props.autoComplete) {
+    // 如果 columns 数组长度为空，或者长度小于 value 的长度，自动触发 columnChange 来补齐数据
+    if (selectList.value.length < props.modelValue.length || selectList.value.length === 0) {
+      // isCompleting 是否在自动补全，锁操作
+      if (!isCompleting.value) {
+        // 如果 columns 长度为空，则传入的 colIndex 为 -1
+        const colIndex = selectList.value.length === 0 ? -1 : selectList.value.length - 1
+        diffColumns(colIndex)
+      }
+      isCompleting.value = true
+    }
+  }
+}
+
+defineExpose<ColPickerExpose>({
+  close,
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,166 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+import type { FormItemRule } from '../oxy-form/types'
+
+export const colPickerProps = {
+  ...baseProps,
+  /**
+   * 选中项
+   */
+  modelValue: makeRequiredProp(Array as PropType<Array<string | number>>),
+  /**
+   * 选择器数据，二维数组
+   */
+  columns: makeArrayProp<Record<string, any>[]>(),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用 label 插槽时设置该选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 使用默认插槽时设置该选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
+   */
+  columnChange: Function as PropType<ColPickerColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<ColPickerDisplayFormat>,
+  /**
+   * 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<ColPickerBeforeConfirm>,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，提示文案对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * loading 图标的颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change
+   */
+  autoComplete: makeBooleanProp(false),
+  /**
+   * 弹窗层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合oxy-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 底部条宽度，单位像素
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   */
+  lineHeight: numericProp,
+  /**
+   * label 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
+}
+
+export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>
+
+export type ColPickerColumnChangeOption = {
+  selectedItem: Record<string, any>
+  index: number
+  rowIndex: number
+  resolve: (nextColumn: Record<string, any>[]) => void
+  finish: (isOk?: boolean) => void
+}
+export type ColPickerColumnChange = (option: ColPickerColumnChangeOption) => void
+export type ColPickerDisplayFormat = (selectedItems: Record<string, any>[]) => string
+export type ColPickerBeforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => void
+
+export type ColPickerExpose = {
+  // 关闭picker弹框
+  close: () => void
+  // 打开picker弹框
+  open: () => void
+}
+
+export type ColPickerInstance = ComponentPublicInstance<ColPickerExpose, ColPickerProps>