oxy-uni-ui 1.0.1

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

@@ -0,0 +1,412 @@
+<template>
+  <view
+    :class="`oxy-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''} ${alignRight ? 'is-align-right' : ''} ${
+      error ? 'is-error' : ''
+    } ${customClass}`"
+    :style="customStyle"
+  >
+    <oxy-cell
+      v-if="!$slots.default"
+      :title="label"
+      :value="showValue ? 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="showPopup"
+    >
+      <template v-if="$slots.label" #title>
+        <slot name="label"></slot>
+      </template>
+      <template #right-icon>
+        <oxy-icon v-if="showArrow" custom-class="oxy-picker__arrow" name="arrow-right" />
+        <view v-else-if="showClear" @click.stop="handleClear">
+          <oxy-icon custom-class="oxy-picker__clear" name="error-fill" />
+        </view>
+      </template>
+    </oxy-cell>
+    <view v-else @click="showPopup">
+      <slot></slot>
+    </view>
+    <oxy-popup
+      v-model="popupShow"
+      position="bottom"
+      :hide-when-close="false"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
+      @close="onCancel"
+      custom-class="oxy-picker__popup"
+    >
+      <view class="oxy-picker__wraper">
+        <view class="oxy-picker__toolbar" @touchmove="noop">
+          <view class="oxy-picker__action oxy-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText || translate('cancel') }}
+          </view>
+          <view v-if="title" class="oxy-picker__title">{{ title }}</view>
+          <view :class="`oxy-picker__action ${isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText || translate('done') }}
+          </view>
+        </view>
+        <oxy-picker-view
+          ref="pickerViewOxy"
+          :custom-class="customViewClass"
+          v-model="pickerValue"
+          :columns="displayColumns"
+          :loading="isLoading"
+          :loading-color="loadingColor"
+          :columns-height="columnsHeight"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          :immediate-change="immediateChange"
+          @change="pickerViewChange"
+          @pickstart="onPickStart"
+          @pickend="onPickEnd"
+          :column-change="columnChange"
+        />
+      </view>
+    </oxy-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-picker',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyPopup from '../oxy-popup/oxy-popup.vue'
+import OxyPickerView from '../oxy-picker-view/oxy-picker-view.vue'
+import OxyCell from '../oxy-cell/oxy-cell.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
+import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
+import { type ColumnItem, formatArray, type PickerViewInstance } from '../oxy-picker-view/types'
+import { FORM_KEY, type FormItemRule } from '../oxy-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { pickerProps, type PickerExpose } from './types'
+const { translate } = useTranslate('picker')
+
+const props = defineProps(pickerProps)
+const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue'])
+
+const pickerViewOxy = ref<PickerViewInstance | null>(null)
+
+const innerLoading = ref<boolean>(false) // 内部控制是否loading
+
+// 弹出层是否显示
+const popupShow = ref<boolean>(false)
+// 选定后展示的选中项
+const showValue = ref<string>('')
+const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>('')
+const displayColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 传入 pickerView 的columns
+const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
+const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
+const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+
+const isLoading = computed(() => {
+  return props.loading || innerLoading.value
+})
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+    if (pickerViewOxy.value && pickerViewOxy.value.getSelectedIndex().length !== 0) {
+      handleShowValueUpdate(props.modelValue)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    pickerValue.value = newValue
+    // 获取初始选中项,并展示初始选中文案
+    handleShowValueUpdate(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    displayColumns.value = deepClone(newValue)
+    resetColumns.value = deepClone(newValue)
+    if (newValue.length === 0) {
+      // 当 columns 变为空时，清空 pickerValue 和 showValue
+      pickerValue.value = isArray(props.modelValue) ? [] : ''
+      showValue.value = ''
+    } else {
+      // 非空时正常更新显示值
+      handleShowValueUpdate(props.modelValue)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columnChange,
+  (newValue) => {
+    if (newValue && !isFunction(newValue)) {
+      console.error('The type of columnChange must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
+})
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
+const cellClass = computed(() => {
+  const classes = ['oxy-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-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(() => {
+  handleShowValueUpdate(props.modelValue)
+})
+
+onBeforeMount(() => {
+  displayColumns.value = deepClone(props.columns)
+  resetColumns.value = deepClone(props.columns)
+})
+
+/**
+ * 值变更时更新显示内容
+ * @param value
+ */
+function handleShowValueUpdate(value: string | number | Array<string | number>) {
+  // 获取初始选中项,并展示初始选中文案
+  if ((isArray(value) && value.length > 0) || (isDef(value) && !isArray(value) && value !== '')) {
+    if (pickerViewOxy.value) {
+      nextTick(() => {
+        setShowValue(pickerViewOxy.value!.getSelects())
+      })
+    } else {
+      setShowValue(getSelects(value)!)
+    }
+  } else {
+    showValue.value = ''
+  }
+}
+
+/**
+ * @description 根据传入的value，picker组件获取当前cell展示值。
+ * @param {String|Number|Array<String|Number|Array<any>>}value
+ */
+function getSelects(value: string | number | Array<string | number | Array<any>>) {
+  const formatColumns = formatArray(props.columns, props.valueKey, props.labelKey)
+  if (props.columns.length === 0) return
+
+  // 使其默认选中首项
+  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
+    return
+  }
+  const valueType = getType(value)
+  const type = ['string', 'number', 'boolean', 'array']
+  if (type.indexOf(valueType) === -1) return []
+  /**
+   * 1.单key转为Array<key>
+   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
+   * 3.根据每列的key值找到选项中value为此key的下标并记录
+   */
+  value = isArray(value) ? value : [value]
+  value = value.slice(0, formatColumns.length)
+
+  if (value.length === 0) {
+    value = formatColumns.map(() => 0)
+  }
+  let selected: number[] = []
+  value.forEach((target, col) => {
+    let row = formatColumns[col].findIndex((row) => {
+      return row[props.valueKey].toString() === target.toString()
+    })
+    row = row === -1 ? 0 : row
+    selected.push(row)
+  })
+
+  const selects = selected.map((row, col) => formatColumns[col][row])
+  // 单列选择器，则返回单项
+  if (selects.length === 1) {
+    return selects[0]
+  }
+  return selects
+}
+
+// 对外暴露方法，打开弹框
+function open() {
+  showPopup()
+}
+// 对外暴露方法，关闭弹框
+function close() {
+  onCancel()
+}
+/**
+ * 展示popup
+ */
+function showPopup() {
+  if (props.disabled || props.readonly) return
+
+  emit('open')
+  popupShow.value = true
+  pickerValue.value = props.modelValue
+  displayColumns.value = resetColumns.value
+}
+
+/**
+ * 点击取消按钮触发。关闭popup，触发cancel事件。
+ */
+function onCancel() {
+  popupShow.value = false
+  emit('cancel')
+  let timmer = setTimeout(() => {
+    clearTimeout(timmer)
+    isDef(pickerViewOxy.value) && pickerViewOxy.value.resetColumns(resetColumns.value)
+  }, 300)
+}
+/**
+ * 点击确定按钮触发。展示选中值，触发cancel事件。
+ */
+function onConfirm() {
+  if (isLoading.value) return
+
+  // 如果当前还在滑动且未停止下来，则锁住先不确认，等滑完再自动确认，避免pickview值未更新
+  if (isPicking.value) {
+    hasConfirmed.value = true
+    return
+  }
+
+  const { beforeConfirm } = props
+  if (beforeConfirm && isFunction(beforeConfirm)) {
+    beforeConfirm(
+      pickerValue.value,
+      (isPass: boolean) => {
+        isPass && handleConfirm()
+      },
+      proxy.$.exposed
+    )
+  } else {
+    handleConfirm()
+  }
+}
+function handleConfirm() {
+  if (isLoading.value || props.disabled) {
+    popupShow.value = false
+    return
+  }
+
+  const selects = pickerViewOxy.value!.getSelects()
+  const values = pickerViewOxy.value!.getValues()
+  // 获取当前的数据源，并设置给 resetColumns，用于取消时可以回退数据源
+  const columns = pickerViewOxy.value!.getColumnsData()
+  popupShow.value = false
+  resetColumns.value = deepClone(columns)
+  emit('update:modelValue', values)
+
+  setShowValue(selects)
+  emit('confirm', {
+    value: values,
+    selectedItems: selects
+  })
+}
+/**
+ * 初始change事件
+ * @param event
+ */
+function pickerViewChange({ value }: any) {
+  pickerValue.value = value
+}
+/**
+ * 设置展示值
+ * @param  items
+ */
+function setShowValue(items: ColumnItem | ColumnItem[]) {
+  // 避免值为空时调用自定义展示函数
+  if ((isArray(items) && !items.length) || !items) return
+
+  const { valueKey, labelKey } = props
+  showValue.value = (props.displayFormat || defaultDisplayFormat)(items, { valueKey, labelKey })
+}
+function noop() {}
+function onPickStart() {
+  isPicking.value = true
+}
+function onPickEnd() {
+  isPicking.value = false
+
+  if (hasConfirmed.value) {
+    hasConfirmed.value = false
+    onConfirm()
+  }
+}
+
+/**
+ * 外部设置是否loading
+ * @param loading 是否loading
+ */
+function setLoading(loading: boolean) {
+  innerLoading.value = loading
+}
+
+function handleClear() {
+  const clearValue = isArray(pickerValue.value) ? [] : ''
+  emit('update:modelValue', clearValue)
+  emit('clear')
+}
+
+defineExpose<PickerExpose>({
+  close,
+  open,
+  setLoading
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-picker/types.ts

@@ -0,0 +1,189 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { ColumnItem, PickerViewColumnChange } from '../oxy-picker-view/types'
+import type { FormItemRule } from '../oxy-form/types'
+
+export const pickerProps = {
+  ...baseProps,
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * pickerView 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /* popup */
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 尺寸
+   */
+  size: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用默认插槽
+   * @deprecated 可以直接使用默认插槽，无需配置此选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 使用标签插槽
+   * @deprecated 可以直接使用标签插槽，无需配置此选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 错误状态
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 右对齐
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
+   */
+  beforeConfirm: Function as PropType<PickerBeforeConfirm>,
+  /**
+   * 点击蒙层关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 文本溢出显示省略号
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 选项总高度
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * 选项值对应的键名
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项文本对应的键名
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，如果为多列选择器，则其类型应为数组
+   */
+  modelValue: {
+    type: [String, Number, Array] as PropType<string | number | Array<string> | Array<number>>,
+    default: ''
+  },
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   */
+  columns: {
+    type: Array as PropType<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>,
+    default: () => []
+  },
+  /**
+   * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
+   */
+  columnChange: Function as PropType<PickerViewColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<PickerDisplayFormat>,
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合oxy-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
+}
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>
+
+export type PickerDisplayFormat = (item: ColumnItem | ColumnItem[], vl: { valueKey: string; labelKey: string }) => string
+
+export type PickerBeforeConfirm = (
+  value: string | number | boolean | string[] | number[] | boolean[],
+  resolve: (isPass: boolean) => void,
+  picker: any
+) => void
+
+export type PickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+  /**
+   * 设置加载状态
+   * @param loading 加载状态
+   */
+  setLoading: (loading: boolean) => void
+}
+
+export type PickerInstance = ComponentPublicInstance<PickerExpose, PickerProps>

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

@@ -0,0 +1,92 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(picker-view) {
+    @include e(columns) {
+      background: $-dark-background2;
+    }
+
+    :deep(.oxy-picker-view__roller) {
+      background: $-dark-background4;
+    }
+  }
+
+  @include b(picker-view-column) {
+    color: $-dark-color;
+
+    @include e(item) {
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(picker-view) {
+  position: relative;
+  padding: 10px 0;
+
+  @include e(columns) {
+    position: relative;
+    display: flex;
+    background: $-picker-bg;
+    overflow: hidden;
+    align-items: center;
+  }
+
+  @include edeep(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $-picker-mask;
+    background-position: top, bottom;
+    background-repeat: no-repeat;
+    z-index: 2;
+    pointer-events: none;
+    filter: blur(4px);
+  }
+
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    background: $-picker-loading-bg;
+  }
+
+  @include edeep(roller) {
+    background: rgba(245, 245, 245, 1);
+    z-index: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+@include b(picker-view-column) {
+  flex: 1;
+  font-size: $-picker-column-fs;
+  color: $-picker-column-color;
+  text-align: center;
+  transition-timing-function: cubic-bezier(0.28, 0.8, 0.63, 1);
+
+  @include e(item) {
+    padding: $-picker-column-padding;
+    @include lineEllipsis;
+
+    @include m(disabled) {
+      color: $-picker-column-disabled-color;
+    }
+  }
+}