papayaui 0.3.5 → 0.3.7

package/components/date-range-picker/date-range-picker.scss

@@ -0,0 +1,79 @@
+@import '../../styles/vars.scss';
+
+.#{$prefix}-date-range-picker {
+  display: block;
+
+  &-inputs {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    background-color: _var(date-range-picker-background, #fff);
+    border-radius: _var(date-range-picker-border-radius, 12rpx);
+    border: 1rpx solid _var(date-range-picker-border-color, _var(color-border));
+    overflow: hidden;
+  }
+
+  &-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: _var(date-range-picker-padding-y, 16rpx) _var(date-range-picker-padding-x, 20rpx);
+    min-width: 0;
+  }
+
+  &-label {
+    font-size: _var(date-range-picker-label-font-size, 24rpx);
+    color: _var(date-range-picker-label-color, _var(color-black));
+    margin-bottom: _var(date-range-picker-label-margin-bottom, 8rpx);
+  }
+
+  &-value {
+    font-size: _var(date-range-picker-value-font-size, 26rpx);
+    color: _var(date-range-picker-value-color, _var(color-text));
+  }
+
+  &--placeholder {
+    color: _var(date-range-picker-placeholder-color, _var(color-disabled));
+  }
+
+  &-separator {
+    margin: 0 _var(date-range-picker-separator-margin, 12rpx);
+    color: _var(date-range-picker-separator-color, _var(color-text-secondary));
+  }
+
+  &-clear {
+    flex-shrink: 0;
+    font-size: _var(date-range-picker-clear-font-size, 32rpx);
+    color: _var(date-range-picker-clear-color, _var(color-disabled));
+    padding-right: _var(date-range-picker-clear-padding-right, 20rpx);
+  }
+
+  &--readonly &-inputs {
+    background-color: _var(date-range-picker-readonly-background, #fff);
+  }
+
+  &--disabled &-inputs {
+    background-color: _var(
+      date-range-picker-disabled-background,
+      _var(color-background-disabled, #f7f8fa)
+    );
+    border-color: _var(date-range-picker-disabled-border-color, _var(color-border));
+  }
+
+  &--readonly &-value,
+  &--readonly &-label,
+  &--readonly &-separator {
+    color: _var(date-range-picker-readonly-color, _var(color-text-secondary));
+  }
+
+  &--disabled &-value,
+  &--disabled &-label,
+  &--disabled &-separator {
+    color: _var(date-range-picker-disabled-color, _var(color-disabled));
+  }
+}
+
+.btn-hover {
+  opacity: 0.7;
+}
+

package/components/date-range-picker/date-range-picker.vue

@@ -0,0 +1,245 @@
+<template>
+  <view :class="[ns.b(), ns.is('readonly', readonly), ns.is('disabled', disabled)]">
+    <view :class="ns.b('inputs')">
+      <view :class="ns.b('input')" @click="openStart">
+        <view v-if="startLabel" :class="ns.b('label')">
+          {{ startLabel }}
+        </view>
+        <view :class="[ns.b('value'), ns.is('placeholder', !startText)]">
+          {{ startText || startPlaceholder }}
+        </view>
+      </view>
+      <view :class="ns.b('separator')">-</view>
+      <view :class="ns.b('input')" @click="openEnd">
+        <view v-if="endLabel" :class="ns.b('label')">
+          {{ endLabel }}
+        </view>
+        <view :class="[ns.b('value'), ns.is('placeholder', !endText)]">
+          {{ endText || endPlaceholder }}
+        </view>
+      </view>
+      <pa-icon
+        v-if="showClear"
+        name="round-close-fill"
+        :class="ns.b('clear')"
+        @tap.stop="onClear"
+      />
+    </view>
+
+    <!-- 开始时间选择 -->
+    <pa-bottom-popup v-model:show="showStartPopup" :title="title" height="auto">
+      <pa-date-picker
+        v-model="innerStart"
+        :columns-type="columnsType"
+        :show-toolbar="showToolbar"
+        :show-columns-header="true"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :option-height="optionHeight"
+        :visible-option-num="visibleOptionNum"
+        :confirm-button-text="confirmButtonText"
+        :cancel-button-text="cancelButtonText"
+        :formatter="formatter"
+        :filter="filter"
+        @change="onStartChange"
+        @confirm="onStartConfirm"
+        @cancel="onStartCancel"
+      />
+    </pa-bottom-popup>
+
+    <!-- 结束时间选择 -->
+    <pa-bottom-popup v-model:show="showEndPopup" :title="title" height="auto">
+      <pa-date-picker
+        v-model="innerEnd"
+        :columns-type="columnsType"
+        :show-toolbar="showToolbar"
+        :show-columns-header="true"
+        :min-date="endMinDate"
+        :max-date="maxDate"
+        :option-height="optionHeight"
+        :visible-option-num="visibleOptionNum"
+        :confirm-button-text="confirmButtonText"
+        :cancel-button-text="cancelButtonText"
+        :formatter="formatter"
+        :filter="filter"
+        @change="onEndChange"
+        @confirm="onEndConfirm"
+        @cancel="onEndCancel"
+      />
+    </pa-bottom-popup>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { computed, ref, toRefs, watch } from 'vue'
+import useNamespace from '../../core/useNamespace'
+import { dateRangePickerEmits, dateRangePickerProps } from './props'
+
+const ns = useNamespace('date-range-picker')
+
+const props = defineProps(dateRangePickerProps)
+const emit = defineEmits(dateRangePickerEmits)
+
+const { columnsType, minDate, maxDate, formatter, filter } = toRefs(props)
+
+const showStartPopup = ref(false)
+const showEndPopup = ref(false)
+
+const innerStart = ref<Date | undefined>(props.start)
+const innerEnd = ref<Date | undefined>(props.end)
+
+/** 是否允许打开弹窗 */
+const canOpenPopup = computed(() => !props.disabled && !props.readonly)
+
+/** 是否显示清空按钮 */
+const showClear = computed(() => {
+  return !props.disabled && !props.readonly && props.clearable && (!!props.start || !!props.end)
+})
+
+watch(
+  () => props.start,
+  (val) => {
+    innerStart.value = val
+  },
+)
+
+watch(
+  () => props.end,
+  (val) => {
+    innerEnd.value = val
+  },
+)
+
+const endMinDate = computed(() => {
+  const base = minDate?.value || innerStart.value || props.start
+  if (!base) return undefined
+  if (props.allowReverse) {
+    return base
+  }
+  const startTime = dayjs(innerStart.value || base)
+  const minTime = dayjs(minDate?.value || base)
+  return startTime.isAfter(minTime) ? startTime.toDate() : minTime.toDate()
+})
+
+const getFormatByColumnsType = () => {
+  if (!columnsType.value || !columnsType.value.length) {
+    return 'YYYY-MM-DD HH:mm'
+  }
+  const dateParts: string[] = []
+  const timeParts: string[] = []
+
+  columnsType.value.forEach((type) => {
+    if (type === 'year') dateParts.push('YYYY')
+    if (type === 'month') dateParts.push('MM')
+    if (type === 'day') dateParts.push('DD')
+    if (type === 'hour') timeParts.push('HH')
+    if (type === 'minute') timeParts.push('mm')
+  })
+
+  let format = ''
+  if (dateParts.length) {
+    format += dateParts.join('-')
+  }
+  if (timeParts.length) {
+    format += format ? ' ' : ''
+    format += timeParts.join(':')
+  }
+
+  return format || 'YYYY-MM-DD HH:mm'
+}
+
+const startText = computed(() =>
+  props.start ? dayjs(props.start).format(getFormatByColumnsType()) : '',
+)
+const endText = computed(() =>
+  props.end ? dayjs(props.end).format(getFormatByColumnsType()) : '',
+)
+
+/** 触发区间变更事件 */
+const emitRangeChange = (start?: Date, end?: Date) => {
+  if (start && end) {
+    emit('change', { start, end })
+  }
+}
+
+/** 触发区间确认事件 */
+const emitRangeConfirm = (start?: Date, end?: Date) => {
+  if (start && end) {
+    emit('confirm', { start, end })
+  }
+}
+
+const openStart = () => {
+  if (!canOpenPopup.value) return
+  showStartPopup.value = true
+}
+
+const openEnd = () => {
+  if (!canOpenPopup.value) return
+  showEndPopup.value = true
+}
+
+/** 清空当前区间值 */
+const onClear = () => {
+  showStartPopup.value = false
+  showEndPopup.value = false
+  emit('update:start', undefined)
+  emit('update:end', undefined)
+  emit('clear')
+}
+
+/** 处理开始时间变更 */
+const onStartChange = (val: Date) => {
+  if (!props.showToolbar) {
+    onStartConfirm(val)
+  }
+}
+
+const onStartConfirm = (val: Date) => {
+  const finalStart = val
+  const finalEnd =
+    !props.allowReverse && props.end && dayjs(val).isAfter(props.end) ? val : props.end
+
+  emit('update:start', val)
+  showStartPopup.value = false
+  if (finalEnd !== props.end) {
+    emit('update:end', finalEnd)
+  }
+  emitRangeChange(finalStart, finalEnd)
+  emitRangeConfirm(finalStart, finalEnd)
+}
+
+const onStartCancel = () => {
+  showStartPopup.value = false
+  emit('cancel')
+}
+
+const onEndConfirm = (val: Date) => {
+  let finalEnd = val
+  if (!props.allowReverse && props.start && dayjs(val).isBefore(props.start)) {
+    finalEnd = props.start
+  }
+  const finalStart = props.start
+  emit('update:end', finalEnd)
+  showEndPopup.value = false
+  emitRangeChange(finalStart, finalEnd)
+  emitRangeConfirm(finalStart, finalEnd)
+}
+
+/** 处理结束时间变更 */
+const onEndChange = (val: Date) => {
+  if (!props.showToolbar) {
+    onEndConfirm(val)
+  }
+}
+
+const onEndCancel = () => {
+  showEndPopup.value = false
+  emit('cancel')
+}
+</script>
+
+<style lang="scss">
+@import './date-range-picker.scss';
+</style>

package/components/date-range-picker/index.ts

@@ -0,0 +1,6 @@
+import DateRangePicker from './date-range-picker.vue'
+
+export type DateRangePickerInstance = InstanceType<typeof DateRangePicker>
+export * from './props'
+
+export default DateRangePicker

package/components/date-range-picker/props.ts

@@ -0,0 +1,139 @@
+import type { ExtractPropTypes, ExtractPublicPropTypes, PropType } from 'vue'
+import type {
+  DatePickerColumnType,
+  DatePickerFilter,
+  DatePickerFormatter,
+} from '../../core/useDatePicker'
+import { isDate, isUndefined } from '../../utils'
+
+export const dateRangePickerProps = {
+  /**
+   * 开始时间
+   */
+  start: Date,
+  /**
+   * 结束时间
+   */
+  end: Date,
+  /**
+   * 选项类型
+   */
+  columnsType: {
+    type: Array as PropType<DatePickerColumnType[]>,
+    default: () => ['year', 'month', 'day'],
+  },
+  /**
+   * 可选的最小时间，精确到分
+   */
+  minDate: Date,
+  /**
+   * 可选的最大时间，精确到分
+   */
+  maxDate: Date,
+  /**
+   * 顶部栏标题
+   */
+  title: {
+    type: String,
+    default: '选择时间区间',
+  },
+  /**
+   * 是否显示顶部栏
+   * @description 启用时只有 confirm 会触发值更新，禁用时 change 会触发更新
+   */
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 选项高度
+   */
+  optionHeight: {
+    type: Number,
+    default: 44,
+  },
+  /**
+   * 可见选项个数
+   */
+  visibleOptionNum: {
+    type: Number,
+    default: 6,
+  },
+  /**
+   * 选项格式化函数
+   */
+  formatter: Function as PropType<DatePickerFormatter>,
+  /**
+   * 选项过滤函数
+   */
+  filter: Function as PropType<DatePickerFilter>,
+  /**
+   * 是否允许结束时间早于开始时间
+   */
+  allowReverse: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: Boolean,
+  /**
+   * 是否只读
+   */
+  readonly: Boolean,
+  /**
+   * 是否显示清空控件
+   */
+  clearable: Boolean,
+  /**
+   * 开始时间标签
+   */
+  startLabel: String,
+  /**
+   * 结束时间标签
+   */
+  endLabel: String,
+  /**
+   * 开始时间占位文字
+   */
+  startPlaceholder: {
+    type: String,
+    default: '开始时间',
+  },
+  /**
+   * 结束时间占位文字
+   */
+  endPlaceholder: {
+    type: String,
+    default: '结束时间',
+  },
+  /**
+   * 确认按钮文字
+   */
+  confirmButtonText: {
+    type: String,
+    default: '确认',
+  },
+  /**
+   * 取消按钮文字
+   */
+  cancelButtonText: {
+    type: String,
+    default: '取消',
+  },
+} as const
+
+export const dateRangePickerEmits = {
+  'update:start': (value?: Date) => isDate(value) || isUndefined(value),
+  'update:end': (value?: Date) => isDate(value) || isUndefined(value),
+  change: (value: { start: Date; end: Date }) => isDate(value.start) && isDate(value.end),
+  confirm: (value: { start: Date; end: Date }) => isDate(value.start) && isDate(value.end),
+  cancel: () => true,
+  clear: () => true,
+}
+
+export type DateRangePickerProps = ExtractPropTypes<typeof dateRangePickerProps>
+export type DateRangePickerPropsPublic = ExtractPublicPropTypes<typeof dateRangePickerProps>
+
+export type DateRangePickerEmits = typeof dateRangePickerEmits

package/components/index.ts

@@ -65,3 +65,5 @@ export * from './tooltip'
 export * from './transition'
 export * from './uploader'
 export * from './watermark'
+export * from './date-range-picker'
+export * from './tour'

package/components/picker-popup/picker-popup.vue

@@ -136,7 +136,9 @@ const filterOptions = computed(() => {
   if (props.remote) return text ? options.value : fullOptions
   // 本地数据情况，直接做过滤
   if (!text) return fullOptions
-  return fullOptions.filter((item) => item[labelKey.value]?.indexOf(text) !== -1)
+  // 优先使用 searchKey，未指定时回退到 labelKey
+  const key = props.searchKey ?? labelKey.value
+  return fullOptions.filter((item) => item[key]?.indexOf(text) !== -1)
 })
 
 const showView = computed(() => {

package/components/picker-popup/props.ts

@@ -34,6 +34,13 @@ export const pickerPopupProps = {
     type: String,
     default: 'value',
   },
+  /**
+   * 搜索时使用的字段名，不传则默认使用 labelKey 字段进行搜索
+   */
+  searchKey: {
+    type: String,
+    default: undefined,
+  },
   /**
    * 是否显示搜索
    */

package/components/tour/index.ts

@@ -0,0 +1,6 @@
+import Tour from './tour.vue'
+
+export type TourInstance = InstanceType<typeof Tour>
+export * from './props'
+
+export default Tour

package/components/tour/props.ts

@@ -0,0 +1,105 @@
+import type {
+  ComponentInternalInstance,
+  ExtractPropTypes,
+  ExtractPublicPropTypes,
+  PropType,
+} from 'vue'
+
+/** 气泡弹出方向 */
+export type TourPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+/** 单步引导配置 */
+export interface TourStep {
+  /** 目标元素的 CSS 选择器，不传时气泡居中展示 */
+  target?: string
+  /** 步骤标题 */
+  title?: string
+  /** 步骤描述内容 */
+  content: string
+  /** 气泡弹出位置，不传时根据目标位置自动判断 */
+  placement?: TourPlacement
+}
+
+export const tourProps = {
+  /** 是否显示引导 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /** 引导步骤列表 */
+  steps: {
+    type: Array as PropType<TourStep[]>,
+    default: () => [],
+  },
+  /** 当前步骤索引，支持 v-model:current */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 点击遮罩是否关闭引导 */
+  maskClosable: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示关闭按钮 */
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 高亮区域内边距，单位 px */
+  padding: {
+    type: Number,
+    default: 8,
+  },
+  /** 上一步按钮文字 */
+  prevText: {
+    type: String,
+    default: '上一步',
+  },
+  /** 下一步按钮文字 */
+  nextText: {
+    type: String,
+    default: '下一步',
+  },
+  /** 完成按钮文字 */
+  finishText: {
+    type: String,
+    default: '完成',
+  },
+  /** 遮罩颜色 */
+  maskColor: {
+    type: String,
+    default: 'rgba(0, 0, 0, 0.5)',
+  },
+  /** z-index 层级 */
+  zIndex: {
+    type: Number,
+    default: 9999,
+  },
+  /**
+   * 包含目标元素的组件实例，传入调用方的 getCurrentInstance()。
+   * 在微信小程序中，createSelectorQuery 的查询范围由组件实例决定，
+   * 必须传入实际持有目标元素的那个组件实例才能正确获取元素位置。
+   */
+  scope: {
+    type: Object as PropType<ComponentInternalInstance>,
+    default: null,
+  },
+} as const
+
+export const tourEmits = {
+  /** 更新 show 状态 */
+  'update:show': (value: boolean) => typeof value === 'boolean',
+  /** 更新当前步骤索引 */
+  'update:current': (value: number) => typeof value === 'number',
+  /** 步骤切换时触发，参数为切换后的步骤索引 */
+  change: (current: number) => typeof current === 'number',
+  /** 点击关闭按钮或遮罩关闭时触发 */
+  close: () => true,
+  /** 点击完成按钮时触发 */
+  finish: () => true,
+}
+
+export type TourProps = ExtractPropTypes<typeof tourProps>
+export type TourPropsPublic = ExtractPublicPropTypes<typeof tourProps>
+export type TourEmits = typeof tourEmits