papayaui 0.3.6 → 0.3.7

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

@@ -1,13 +1,15 @@
 @import '../../styles/vars.scss';
 
 .#{$prefix}-date-range-picker {
+  display: block;
+
   &-inputs {
     display: flex;
     align-items: center;
     padding: 0;
-    background-color: #fff;
-    border-radius: 12rpx;
-    border: 1rpx solid _var(color-border);
+    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;
   }
 
@@ -15,23 +17,59 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 16rpx 20rpx;
+    padding: _var(date-range-picker-padding-y, 16rpx) _var(date-range-picker-padding-x, 20rpx);
+    min-width: 0;
   }
 
   &-label {
-    font-size: 24rpx;
-    color: _var(color-black);
-    margin-bottom: 8rpx;
+    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: 26rpx;
-    color: _var(color-text);
+    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 12rpx;
-    color: _var(color-text-secondary);
+    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));
   }
 }
 

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

@@ -1,12 +1,12 @@
 <template>
-  <view :class="ns.b()">
+  <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')">
-          {{ startText || placeholderStart }}
+        <view :class="[ns.b('value'), ns.is('placeholder', !startText)]">
+          {{ startText || startPlaceholder }}
         </view>
       </view>
       <view :class="ns.b('separator')">-</view>
@@ -14,10 +14,16 @@
         <view v-if="endLabel" :class="ns.b('label')">
           {{ endLabel }}
         </view>
-        <view :class="ns.b('value')">
-          {{ endText || placeholderEnd }}
+        <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>
 
     <!-- 开始时间选择 -->
@@ -25,13 +31,17 @@
       <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"
       />
@@ -42,13 +52,17 @@
       <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"
       />
@@ -75,6 +89,14 @@ 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) => {
@@ -134,33 +156,58 @@ const endText = computed(() =>
   props.end ? dayjs(props.end).format(getFormatByColumnsType()) : '',
 )
 
-const placeholderStart = computed(() => props.startLabel ?? '')
-const placeholderEnd = computed(() => props.endLabel ?? '')
+/** 触发区间变更事件 */
+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 emitRangeChange = () => {
-  if (props.start && props.end) {
-    emit('change', {
-      start: props.start,
-      end: props.end,
-    })
+/** 清空当前区间值 */
+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 (!props.allowReverse && props.end && dayjs(val).isAfter(props.end)) {
-    emit('update:end', val)
+  if (finalEnd !== props.end) {
+    emit('update:end', finalEnd)
   }
-  emitRangeChange()
+  emitRangeChange(finalStart, finalEnd)
+  emitRangeConfirm(finalStart, finalEnd)
 }
 
 const onStartCancel = () => {
@@ -173,9 +220,18 @@ const onEndConfirm = (val: Date) => {
   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()
+  emitRangeChange(finalStart, finalEnd)
+  emitRangeConfirm(finalStart, finalEnd)
+}
+
+/** 处理结束时间变更 */
+const onEndChange = (val: Date) => {
+  if (!props.showToolbar) {
+    onEndConfirm(val)
+  }
 }
 
 const onEndCancel = () => {

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

@@ -4,7 +4,7 @@ import type {
   DatePickerFilter,
   DatePickerFormatter,
 } from '../../core/useDatePicker'
-import { isDate } from '../../utils'
+import { isDate, isUndefined } from '../../utils'
 
 export const dateRangePickerProps = {
   /**
@@ -74,6 +74,18 @@ export const dateRangePickerProps = {
     type: Boolean,
     default: false,
   },
+  /**
+   * 是否禁用
+   */
+  disabled: Boolean,
+  /**
+   * 是否只读
+   */
+  readonly: Boolean,
+  /**
+   * 是否显示清空控件
+   */
+  clearable: Boolean,
   /**
    * 开始时间标签
    */
@@ -82,6 +94,20 @@ export const dateRangePickerProps = {
    * 结束时间标签
    */
   endLabel: String,
+  /**
+   * 开始时间占位文字
+   */
+  startPlaceholder: {
+    type: String,
+    default: '开始时间',
+  },
+  /**
+   * 结束时间占位文字
+   */
+  endPlaceholder: {
+    type: String,
+    default: '结束时间',
+  },
   /**
    * 确认按钮文字
    */
@@ -99,11 +125,12 @@ export const dateRangePickerProps = {
 } as const
 
 export const dateRangePickerEmits = {
-  'update:start': (value: Date) => isDate(value),
-  'update:end': (value: Date) => isDate(value),
+  '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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "适用于uniapp的ui扩展库",
   "main": "index.ts",
   "module": "index.ts",