oxy-uni-ui 1.0.1

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

@@ -0,0 +1,369 @@
+<template>
+  <view :class="`oxy-picker-view ${customClass}`" :style="customStyle">
+    <view class="oxy-picker-view__loading" v-if="loading">
+      <oxy-loading :color="loadingColor" />
+    </view>
+    <view :style="`height: ${columnsHeight - 20}px;`">
+      <picker-view
+        mask-class="oxy-picker-view__mask"
+        indicator-class="oxy-picker-view__roller"
+        :indicator-style="`height: ${itemHeight}px;`"
+        :style="`height: ${columnsHeight - 20}px;`"
+        :value="selectedIndex"
+        :immediate-change="immediateChange"
+        @change="onChange"
+        @pickstart="onPickStart"
+        @pickend="onPickEnd"
+      >
+        <picker-view-column v-for="(col, colIndex) in formatColumns" :key="colIndex" class="oxy-picker-view-column">
+          <view
+            v-for="(row, rowIndex) in col"
+            :key="rowIndex"
+            :class="`oxy-picker-view-column__item ${row['disabled'] ? 'oxy-picker-view-column__item--disabled' : ''}  ${
+              selectedIndex[colIndex] == rowIndex ? 'oxy-picker-view-column__item--active' : ''
+            }`"
+            :style="`line-height: ${itemHeight}px;`"
+          >
+            {{ row[labelKey] }}
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-picker-view',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyLoading from '../oxy-loading/oxy-loading.vue'
+import { getCurrentInstance, ref, watch, nextTick } from 'vue'
+import { deepClone, getType, isArray, isDef, isEqual, range } from '../common/util'
+import { formatArray, pickerViewProps, type ColumnItem, type PickerViewExpose } from './types'
+
+const props = defineProps(pickerViewProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
+
+const formatColumns = ref<ColumnItem[][]>([]) // 格式化后的列数据
+const selectedIndex = ref<Array<number>>([]) // 格式化之后，每列选中的下标集合
+
+watch(
+  [() => props.modelValue, () => props.columns],
+  (newValue, oldValue) => {
+    if (!isEqual(oldValue[1], newValue[1])) {
+      if (isArray(newValue[1]) && newValue[1].length > 0) {
+        formatColumns.value = formatArray(newValue[1], props.valueKey, props.labelKey)
+      } else {
+        // 当 columns 变为空时，清空 formatColumns 和 selectedIndex
+        formatColumns.value = []
+        selectedIndex.value = []
+      }
+    }
+    if (isDef(newValue[0])) {
+      selectWithValue(newValue[0])
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 根据传入的value，寻找对应的索引，并传递给原生选择器。
+ * 需要保证formatColumns先设置，之后会修改selectedIndex。
+ * @param {String|Number|Boolean|Array<String|Number|Boolean|Array<any>>}value
+ */
+function selectWithValue(value: string | number | boolean | number[] | string[] | boolean[]) {
+  if (formatColumns.value.length === 0) {
+    selectedIndex.value = [] // 如果列为空，直接清空选中索引
+    return
+  }
+  // 使其默认选中首项
+  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
+    value = formatColumns.value.map((col) => {
+      return col[0][props.valueKey]
+    })
+  }
+  const valueType = getType(value)
+  const type = ['string', 'number', 'boolean', 'array']
+  if (type.indexOf(valueType) === -1) console.error(`value must be one of ${type.toString()}`)
+
+  /**
+   * 1.单key转为Array<key>
+   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
+   * 3.根据每列的key值找到选项中value为此key的下标并记录
+   */
+  value = isArray(value) ? value : [value as string]
+  value = value.slice(0, formatColumns.value.length)
+
+  let selected: number[] = deepClone(selectedIndex.value)
+  value.forEach((target, col) => {
+    let row = formatColumns.value[col].findIndex((row) => {
+      return row[props.valueKey].toString() === target.toString()
+    })
+    row = row === -1 ? 0 : row
+    selected = correctSelectedIndex(col, row, selected)
+  })
+  /** 根据formatColumns的长度去除selectWithIndex无用的部分。
+   * 始终保持value、selectWithIndex、formatColumns长度一致
+   */
+  selectedIndex.value = selected.slice(0, value.length)
+}
+
+/**
+ * 修正选中项的值
+ * @param value 当前picker选择器选中的值
+ * @param origin 原始选中的值
+ */
+function correctSelected(value: number[]) {
+  let selected = deepClone(value)
+  value.forEach((row, col) => {
+    row = range(row, 0, formatColumns.value[col].length - 1)
+    selected = correctSelectedIndex(col, row, selected)
+  })
+  return selected
+}
+
+/**
+ * 修正选中项指定列行的值
+ * @param columnIndex 列下标
+ * @param rowIndex 行下标
+ * @param selected 选中值列表
+ */
+function correctSelectedIndex(columnIndex: number, rowIndex: number, selected: number[]) {
+  const col = formatColumns.value[columnIndex]
+  if (!col || !col[rowIndex]) {
+    throw Error(`The value to select with Col:${columnIndex} Row:${rowIndex} is incorrect`)
+  }
+  const select: number[] = deepClone(selected)
+  select[columnIndex] = rowIndex
+
+  // 被禁用的无法选中，选中距离它最近的未被禁用的
+  if (col[rowIndex].disabled) {
+    // 寻找值为0或最最近的未被禁用的节点的索引
+    const prev = col
+      .slice(0, rowIndex)
+      .reverse()
+      .findIndex((s) => !s.disabled)
+    const next = col.slice(rowIndex + 1).findIndex((s) => !s.disabled)
+    if (prev !== -1) {
+      select[columnIndex] = rowIndex - 1 - prev
+    } else if (next !== -1) {
+      select[columnIndex] = rowIndex + 1 + next
+    } else if (select[columnIndex] === undefined) {
+      select[columnIndex] = 0
+    }
+  }
+  return select
+}
+
+/**
+ * 选择器选中项变化时触发
+ * @param param0
+ */
+function onChange({ detail: { value } }: { detail: { value: number[] } }) {
+  value = value.map((v: any) => {
+    return Number(v || 0)
+  })
+  const index = getChangeDiff(value)
+  // 先将picker选择器的值赋给selectedIndex，然后重新赋予修正后的值，防止两次操作修正结果一致时pikcer视图不刷新
+  selectedIndex.value = deepClone(value)
+  nextTick(() => {
+    // 重新赋予修正后的值
+    selectedIndex.value = correctSelected(value)
+    if (props.columnChange) {
+      // columnsChange 可能有异步操作，需要添加 resolve 进行回调通知，形参小于4个则为同步
+      if (props.columnChange.length < 4) {
+        props.columnChange(proxy.$.exposed, getSelects(), index || 0, () => {})
+        handleChange(index || 0)
+      } else {
+        props.columnChange(proxy.$.exposed, getSelects(), index || 0, () => {
+          // 如果selectedIndex只有一列，返回此项；如果是多项，返回所有选中项。
+          handleChange(index || 0)
+        })
+      }
+    } else {
+      // 如果selectedIndex只有一列，返回此项；如果是多项，返回所有选中项。
+      handleChange(index || 0)
+    }
+  })
+}
+
+/**
+ * 获取选中项变化的列的下标
+ * @param now 当前选中项值
+ * @param origin 旧选中项值
+ */
+function getChangeColumn(now: number[], origin: number[]) {
+  if (!now || !origin) return -1
+  const index = now.findIndex((row, index) => row !== origin[index])
+  return index
+}
+
+function getChangeDiff(value: number[]) {
+  value = value.slice(0, formatColumns.value.length)
+
+  // 保留选中前的
+  const origin: number[] = deepClone(selectedIndex.value)
+  // 存储赋值旧值，便于外部比较
+  let selected: number[] = deepClone(selectedIndex.value)
+
+  value.forEach((row, col) => {
+    row = range(row, 0, formatColumns.value[col].length - 1)
+    if (row === origin[col]) return
+    selected = correctSelectedIndex(col, row, selected)
+  })
+
+  // 值变化的列
+  const diffCol = getChangeColumn(selected, origin)
+  if (diffCol === -1) return
+
+  // 获取变化的的行
+  const diffRow = selected[diffCol]
+
+  // 如果selectedIndex只有一列，返回选中项的索引；如果是多项，返回选中项所在的列。
+  return selected.length === 1 ? diffRow : diffCol
+}
+
+/**
+ * 列更新
+ * @param index 列下标
+ */
+function handleChange(index: number) {
+  const value = getValues()
+
+  // 避免多次触发change
+  if (isEqual(value, props.modelValue)) return
+
+  emit('update:modelValue', value)
+  // 延迟一下，避免组件刚渲染时调用者的事件未初始化好
+  setTimeout(() => {
+    emit('change', {
+      picker: proxy.$.exposed,
+      value,
+      index
+    })
+  }, 0)
+}
+
+/**
+ * @description 获取所有列选中项，返回值为一个数组
+ */
+function getSelects() {
+  const selects = selectedIndex.value.map((row, col) => formatColumns.value[col][row])
+  // 单列选择器，则返回单项
+  if (selects.length === 1) {
+    return selects[0]
+  }
+  return selects
+}
+
+/**
+ * 获取所有列的选中值
+ * 如果values只有一项则将第一项返回
+ */
+function getValues() {
+  const { valueKey } = props
+  const values = selectedIndex.value.map((row, col) => {
+    return formatColumns.value[col][row][valueKey]
+  })
+
+  if (values.length === 1) {
+    return values[0]
+  }
+  return values
+}
+
+/**
+ * 获取所有列选中项的label，返回值为一个数组
+ */
+function getLabels() {
+  const { labelKey } = props
+  return selectedIndex.value.map((row, col) => formatColumns.value[col][row][labelKey])
+}
+
+/**
+ * 获取某一列的选中项下标
+ * @param {Number} columnIndex 列的下标
+ * @returns {Number} 下标
+ */
+function getColumnIndex(columnIndex: number) {
+  return selectedIndex.value[columnIndex]
+}
+
+/**
+ *  获取某一列的选项
+ * @param {Number} columnIndex 列的下标
+ * @returns {Array<{valueKey,labelKey}>} 当前列的集合
+ */
+function getColumnData(columnIndex: number) {
+  return formatColumns.value[columnIndex]
+}
+
+/**
+ * 设置列数据
+ * @param columnIndex 列下标
+ * @param data // 列数据
+ * @param rowIndex // 行下标
+ */
+function setColumnData(columnIndex: number, data: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>, rowIndex: number = 0) {
+  formatColumns.value[columnIndex] = formatArray(data, props.valueKey, props.labelKey).reduce((acc, val) => acc.concat(val), [])
+  selectedIndex.value = correctSelectedIndex(columnIndex, rowIndex, selectedIndex.value)
+}
+
+/**
+ * 获取列数据
+ */
+function getColumnsData() {
+  return deepClone(formatColumns.value)
+}
+
+/**
+ * 获取选中数据
+ */
+function getSelectedIndex() {
+  return selectedIndex.value
+}
+
+/**
+ * 用于重置列数据为指定列数据
+ */
+function resetColumns(columns: (string | number | string[] | number[] | ColumnItem | ColumnItem[])[]) {
+  if (isArray(columns) && columns.length) {
+    formatColumns.value = formatArray(columns, props.valueKey, props.labelKey)
+  }
+}
+
+function onPickStart() {
+  emit('pickstart')
+}
+
+function onPickEnd() {
+  emit('pickend')
+}
+
+defineExpose<PickerViewExpose>({
+  getSelects,
+  getValues,
+  setColumnData,
+  getColumnsData,
+  getColumnData,
+  getColumnIndex,
+  getLabels,
+  getSelectedIndex,
+  resetColumns
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,152 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType, Ref } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { getType, isArray, isObj } from '../common/util'
+
+export type ColumnItem = {
+  [key: string]: any
+  value?: string | number | boolean
+  label?: string
+  disabled?: boolean
+}
+
+export type PickerViewColumnChange = (
+  pickerView: PickerViewInstance,
+  selects: Record<string, any> | Record<string, any>[],
+  index: number,
+  reslove: () => void
+) => void
+
+export const pickerViewProps = {
+  ...baseProps,
+  /**
+   * 加载状态
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * picker item的高度
+   */
+  itemHeight: makeNumberProp(35),
+  /**
+   * 选项对象中，value对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 选中项，如果为多列选择器，则其类型应为数组
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Array<number>, Array<string>, Array<boolean>] as PropType<
+      string | number | boolean | Array<number> | Array<string> | Array<boolean>
+    >,
+    default: '',
+    required: true
+  },
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   */
+  columns: makeArrayProp<string | number | ColumnItem | Array<number> | Array<string> | Array<ColumnItem>>(),
+  /**
+   * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
+   */
+  columnChange: Function as PropType<PickerViewColumnChange>
+}
+
+export type PickerViewExpose = {
+  getSelects: () => Record<string, any> | Record<string, any>[]
+  getValues: () => string | string[]
+  setColumnData: (columnIndex: number, data: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>, rowIndex?: number) => void
+  getColumnsData: () => Record<string, string>[][]
+  getColumnData: (columnIndex: number) => Record<string, string>[]
+  getColumnIndex: (columnIndex: number) => number
+  getLabels: () => string[]
+  getSelectedIndex: () => number[]
+  resetColumns: (columns: (string | number | string[] | number[] | ColumnItem | ColumnItem[])[]) => void
+}
+
+export type PickerViewProps = ExtractPropTypes<typeof pickerViewProps>
+
+export type PickerViewInstance = ComponentPublicInstance<PickerViewProps, PickerViewExpose>
+
+/**
+ * 格式化传入的列数据
+ * 列数据统一格式化为二维数组
+ * @param array 列数据
+ * @param valueKey
+ * @param labelKey
+ * @returns
+ */
+export function formatArray(
+  array: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>,
+  valueKey: string,
+  labelKey: string
+): ColumnItem[][] {
+  let tempArray: Array<string | number | ColumnItem | Array<string | number | ColumnItem>> = isArray(array) ? array : [array]
+  // 判断数组第一层的数据类型，如果存在多种类型，则抛错
+  const firstLevelTypeList = new Set(array.map(getType))
+  /**
+   * 存在三种类型的合法数据
+   * 1.数组是一维元素，所有元素都是原始值
+   * 2.数组是一维元素，所有元素都是object
+   * 3.数组是二维元素，二维元素可以是任意内容
+   */
+  if (firstLevelTypeList.size !== 1 && firstLevelTypeList.has('object')) {
+    // 原始值和引用类型不用混用
+    throw Error('The columns are correct')
+  }
+  /**
+   * 简单处理，如果数组第一项不是数组则认为它是一个一维数组
+   * 所以需要把一维的转成二维，这样方便统一处理
+   */
+  if (!isArray(array[0])) {
+    tempArray = [tempArray as Array<string | number | ColumnItem>]
+  }
+  // 转化为二维数组后需要将每一项包装成ColumnItem
+  const result: Array<Array<ColumnItem>> = (tempArray as Array<Array<string | number | ColumnItem>>).map((col) => {
+    return col.map((row) => {
+      // 非对象类型直接将值作为label和value
+      if (!isObj(row)) {
+        return {
+          [valueKey]: row,
+          [labelKey]: row
+        }
+      }
+      /**
+       * 针对已经是object的，修补成{valueKey,labelKey}
+       * 如果没有labelKey，用valueKey代替
+       * 如果没有valueKey，用labelKey代替
+       * valueKey,labelKey都没有，直接抛错
+       */
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(valueKey) && !row.hasOwnProperty(labelKey)) {
+        // eslint-disable-next-line prettier/prettier
+      throw Error('Can\'t find valueKey and labelKey in columns')
+      }
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(labelKey)) {
+        row[labelKey] = row[valueKey]
+      }
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(valueKey)) {
+        row[valueKey] = row[labelKey]
+      }
+      return row
+    })
+  })
+
+  return result
+}

package/components/oxy-popover/index.scss

@@ -0,0 +1,116 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(popover) {
+
+    @include e(pos) {
+      background: rgb(75, 76, 77);
+      color: $-dark-color;
+      box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1);
+    }
+
+    @include e(menu) {
+      background: rgb(75, 76, 77);
+    }
+
+    @include e(inner) {
+      background-color: rgb(75, 76, 77);
+    }
+
+    @include e(menu-inner) {
+
+      @include halfPixelBorder("top", 0, $-dark-border-color);
+    }
+
+    @include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow);
+
+  }
+}
+
+@include b(popover) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(icon) {
+    vertical-align: middle;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+
+  @include e(menu-inner) {
+    position: relative;
+    padding: $-popover-padding 0;
+    display: flex;
+    align-items: center;
+
+    @include halfPixelBorder("top", 0, $-popover-border-color);
+
+    &:first-child::after {
+      display: none;
+    }
+  }
+
+  @include e(menu) {
+    display: inline-block;
+    padding: 0 $-popover-padding;
+    white-space: nowrap;
+    z-index: $-popover-z-index;
+    position: relative;
+    background: $-popover-bg;
+    border-radius: $-popover-radius;
+  }
+
+  @include edeep(pos) {
+    position: absolute;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    text-align: center;
+    min-height: 36px;
+    z-index: $-popover-z-index;
+    line-height: $-popover-line-height;
+    font-size: $-popover-fs;
+    border-radius: $-popover-radius;
+    transition: opacity 0.2s;
+    background: $-popover-bg;
+    box-shadow: $-popover-box-shadow;
+    color: $-popover-color;
+  }
+
+  // @include edeep(transition) {
+  //   position: relative;
+  //   z-index: $-popover-z-index;
+  // }
+
+  @include e(hidden) {
+    left: -100vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    line-height: $-tooltip-line-height;
+    font-size: $-tooltip-fs;
+  }
+
+  @include e(inner) {
+    position: relative;
+    white-space: nowrap;
+    padding: $-popover-padding;
+    line-height: $-popover-line-height;
+    z-index: $-popover-z-index;
+    background-color: $-popover-bg;
+    border-radius: $-popover-radius;
+  }
+
+  @include edeep(close-icon) {
+    font-size: 12px;
+    position: absolute;
+    right: -8px;
+    top: -10px;
+    transform: scale(0.5);
+    padding: 10px;
+  }
+
+  @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
+}