feat(date-picker-pro): 完善size属性

Author: daviForevel

packages/devui-vue/devui/date-picker-pro/__tests__/date-picker-pro.spec.tsx

@@ -15,6 +15,8 @@ const tableMonthClass = ns.e('table-month');
 const noDotNs = useNamespace('date-picker-pro', false);
 const noDotYearActiveClass = noDotNs.e('year-title-active');
 
+const inputNs = useNamespace('input', true);
+
 describe('date-picker-pro test', () => {
  it('date-picker-pro init render', async () => {
  const datePickerProValue = ref('');
@@ -269,4 +271,18 @@ describe('date-picker-pro test', () => {
 
  wrapper.unmount();
  });
+
+ it('date-picker-pro size test', async () => {
+ const datePickerProValue = ref<Date | string>('');
+ const wrapper = mount({
+ setup() {
+ return () => <DDatePickerPro v-model={datePickerProValue.value} size="lg"></DDatePickerPro>;
+ },
+ });
+ const container = wrapper.find(baseClass);
+ const input = container.find(inputNs.m('lg'));
+ expect(input.exists()).toBeTruthy();
+
+ wrapper.unmount();
+ });
 });

packages/devui-vue/devui/date-picker-pro/__tests__/range-date-picker-pro.spec.tsx

@@ -14,6 +14,8 @@ const tableMonthClass = datePickerNs.e('table-month');
 const noDotDatePickerNs = useNamespace('date-picker-pro', false);
 const noDotYearActiveClass = noDotDatePickerNs.e('year-title-active');
 
+const inputNs = useNamespace('input', true);
+
 describe('range-date-picker-pro test', () => {
  it('range-date-picker-pro init render', async () => {
  const datePickerProValue = ref(['', '']);
@@ -206,7 +208,7 @@ describe('range-date-picker-pro test', () => {
  );
  expect(inputs[1].value).toBe('');
 
- const rangePicker = container.find(rangeDatePickerNs.e('ranger-picker'));
+ const rangePicker = container.find(rangeDatePickerNs.e('range-picker'));
  await rangePicker.trigger('mouseover');
  const icon = rangePicker.find(rangeDatePickerNs.m('icon-visible'));
  expect(icon.exists()).toBeTruthy();
@@ -217,4 +219,20 @@ describe('range-date-picker-pro test', () => {
 
  wrapper.unmount();
  });
+
+ it('range-date-picker-pro size test', async () => {
+ const datePickerProValue = ref<(Date | string)[]>(['', '']);
+ const wrapper = mount({
+ setup() {
+ return () => <DRangeDatePickerPro v-model={datePickerProValue.value} size="lg"></DRangeDatePickerPro>;
+ },
+ });
+ const container = wrapper.find(baseClass);
+ const inputs = container.findAll(inputNs.m('lg'));
+ expect(inputs.length).toBe(2);
+ expect(inputs[0].exists()).toBeTruthy();
+ expect(inputs[1].exists()).toBeTruthy();
+
+ wrapper.unmount();
+ });
 });

packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx

@@ -38,9 +38,11 @@ export default defineComponent({
 
  return () => {
  return (
- <div class={[ns.b(), props.showTime ? ns.e('range-time-width') : ns.e('range-width')]} ref={containerRef}>
+ <div
+ class={[ns.b(), props.showTime ? ns.e('range-time-width') : ns.e('range-width'), isPanelShow.value && ns.m('open')]}
+ ref={containerRef}>
  <div
- class={ns.e('ranger-picker')}
+ class={ns.e('range-picker')}
  ref={originRef}
  onmouseover={() => (isMouseEnter.value = true)}
  onmouseout={() => (isMouseEnter.value = false)}>
@@ -81,7 +83,7 @@ export default defineComponent({
  </span>
  </div>
  <Transition name="fade">
- <FlexibleOverlay v-model={isPanelShow.value} ref={overlayRef} origin={originRef.value} position={position.value}>
+ <FlexibleOverlay v-model={isPanelShow.value} ref={overlayRef} origin={originRef.value} align="start" position={position.value}>
  <DatePickerProPanel
  dateValue={dateValue.value}
  visible={isPanelShow.value}

packages/devui-vue/devui/date-picker-pro/src/composables/use-calendar-panel.ts

@@ -182,7 +182,7 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
  }
  };
 
- const handlerSetRangerDate = (day: CalendarDateItem) => {
+ const handlerSetRangeDate = (day: CalendarDateItem) => {
  if (props.focusType === 'start') {
  rangeSelectDate.value[0] = dayjs(new Date(day.date.setHours(0, 0, 0))).locale('zh-cn');
  } else if (props.focusType === 'end') {
@@ -197,7 +197,7 @@ export default function useCalendarPanel(props: DatePickerProPanelProps, ctx: Se
  }
  selectDate.value = dayjs(new Date(day.date.setHours(0, 0, 0))).locale('zh-cn');
  if (props.isRangeType) {
- handlerSetRangerDate(day);
+ handlerSetRangeDate(day);
  }
  if (props.isRangeType && !props.showTime) {
  if (props.focusType === 'start') {

packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.scss

@@ -285,7 +285,7 @@ $input-height-lg: 46px;
  width: 400px;
  }
 
- .#{$devui-prefix}-range-date-picker-pro__ranger-picker {
+ .#{$devui-prefix}-range-date-picker-pro__range-picker {
  display: flex;
  justify-content: center;
  align-items: center;
@@ -350,4 +350,14 @@ $input-height-lg: 46px;
  visibility: hidden;
  }
  }
+
+ &--open {
+ .#{$devui-prefix}-range-date-picker-pro__range-picker {
+ border-color: $devui-form-control-line-active;
+
+ &:hover {
+ border-color: $devui-form-control-line-active;
+ }
+ }
+ }
 }