vxe-pc-ui 4.5.35 → 4.6.0

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

@@ -0,0 +1,284 @@
+@use "sass:list";
+@use '../helpers/baseMixin.scss';
+
+.vxe-date-range-picker--readonly {
+  color: var(--vxe-ui-font-color);
+  display: inline-flex;
+}
+.vxe-date-range-picker--wrapper {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.vxe-date-range-picker--inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+  margin: 0;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  padding: 0 0.5em;
+  color: var(--vxe-ui-font-color);
+  border: 0;
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+  box-shadow: none;
+  &::placeholder {
+    color: var(--vxe-ui-input-placeholder-color);
+  }
+  &::-webkit-autofill {
+    background-color: var(--vxe-ui-layout-background-color);
+  }
+  &[disabled] {
+    cursor: not-allowed;
+    color: var(--vxe-ui-font-disabled-color);
+    background-color: var(--vxe-ui-input-disabled-background-color);
+  }
+}
+
+// 禁用
+.vxe-date-range-picker {
+  &.is--disabled {
+    background-color: var(--vxe-ui-input-disabled-background-color);
+    .vxe-date-range-picker--prefix,
+    .vxe-date-range-picker--suffix,
+    .vxe-date-range-picker--clear-icon,
+    .vxe-date-range-picker--control-icon {
+      cursor: not-allowed;
+    }
+    .vxe-date-range-picker--prefix,
+    .vxe-date-range-picker--suffix {
+      background-color: var(--vxe-ui-input-disabled-background-color);
+    }
+  }
+}
+
+// 图标
+.vxe-date-range-picker {
+  display: inline-flex;
+  flex-direction: row;
+  position: relative;
+  border-radius: var(--vxe-ui-base-border-radius);
+  width: 330px;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  &.is--active {
+    border: 1px solid var(--vxe-ui-font-primary-color);
+  }
+  &.show--clear {
+    &:hover {
+      .vxe-date-range-picker--clear-icon {
+        display: block;
+      }
+    }
+  }
+}
+.vxe-date-range-picker--prefix,
+.vxe-date-range-picker--suffix {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-date-range-picker--prefix-icon {
+  padding-left: 0.5em;
+}
+.vxe-date-range-picker--clear-icon,
+.vxe-date-range-picker--control-icon,
+.vxe-date-range-picker--suffix-icon {
+  padding-right: 0.5em;
+}
+.vxe-date-range-picker--clear-icon,
+.vxe-date-range-picker--control-icon {
+  height: 100%;
+  color: var(--vxe-ui-input-placeholder-color);
+  cursor: pointer;
+}
+.vxe-date-range-picker--clear-icon {
+  display: none;
+  &:hover {
+    color: var(--vxe-ui-font-color);
+  }
+  &:active {
+    color: var(--vxe-ui-font-primary-color);
+  }
+}
+
+.vxe-date-range-picker--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  font-size: var(--vxe-ui-font-size-default);
+  text-align: left;
+  &.is--transfer {
+    position: fixed;
+  }
+  &.ani--leave {
+    display: block;
+    opacity: 0;
+    transform: scaleY(0.5);
+    transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
+    transform-origin: center top;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    &[placement="top"] {
+      transform-origin: center bottom;
+    }
+  }
+  &.ani--enter {
+    opacity: 1;
+    transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
+  }
+}
+
+.vxe-date-range-picker--panel {
+  pointer-events: none;
+  &.show--top,
+  &.show--right {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-top-right-radius: 0;
+    }
+  }
+  &.show--right,
+  &.show--bottom {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-bottom-right-radius: 0;
+    }
+  }
+  &.show--bottom,
+  &.show--left {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-bottom-left-radius: 0;
+    }
+  }
+  &.show--top,
+  &.show--left {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-top-left-radius: 0;
+    }
+  }
+  &.show--top {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-top-width: 1px;
+    }
+  }
+  &.show--bottom {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-bottom-width: 1px;
+    }
+  }
+  &.show--left {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-left-width: 1px;
+    }
+  }
+  &.show--right {
+    .vxe-date-range-picker--layout-wrapper,
+    .vxe-date-range-picker--layout-datetime-layout-wrapper {
+      border-right-width: 1px;
+    }
+  }
+}
+
+.vxe-date-range-picker--layout-all-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  pointer-events: auto;
+  background-color: var(--vxe-ui-layout-background-color);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+  border-radius: var(--vxe-ui-base-border-radius);
+  line-height: 1.5;
+}
+.vxe-date-range-picker--layout-body-layout-wrapper {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+.vxe-date-range-picker--layout-body-content-wrapper,
+.vxe-date-range-picker--layout-body-layout-wrapper,
+.vxe-date-range-picker--layout-body-wrapper {
+  flex-grow: 1;
+}
+.vxe-date-range-picker--layout-body-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.vxe-date-range-picker--layout-top-wrapper,
+.vxe-date-range-picker--layout-bottom-wrapper,
+.vxe-date-range-picker--layout-left-wrapper,
+.vxe-date-range-picker--layout-right-wrapper,
+.vxe-date-range-picker--layout-header-wrapper,
+.vxe-date-range-picker--layout-footer-wrapper {
+  flex-shrink: 0;
+}
+
+.vxe-date-range-picker--layout-top-wrapper {
+  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-date-range-picker--layout-bottom-wrapper {
+  border-top: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-date-range-picker--layout-left-wrapper {
+  border-right: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-date-range-picker--layout-right-wrapper {
+  border-left: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
+.vxe-date-range-picker--layout-footer-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 0 0.8em 0.8em 0.8em;
+}
+.vxe-date-range-picker--layout-footer-label {
+  padding-right: 0.8em;
+  flex-shrink: 0;
+}
+.vxe-date-range-picker--layout-footer-custom {
+  flex-grow: 1;
+  text-align: right;
+}
+.vxe-date-range-picker--layout-footer-btns {
+  flex-shrink: 0;
+  padding-left: 0.8em;
+}
+
+.vxe-date-range-picker {
+  font-size: var(--vxe-ui-font-size-default);
+  height: var(--vxe-ui-input-height-default);
+  line-height: var(--vxe-ui-input-height-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+    height: var(--vxe-ui-input-height-medium);
+    line-height: var(--vxe-ui-input-height-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+    height: var(--vxe-ui-input-height-small);
+    line-height: var(--vxe-ui-input-height-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+    height: var(--vxe-ui-input-height-mini);
+    line-height: var(--vxe-ui-input-height-mini);
+  }
+}

package/styles/components/pulldown.scss

@@ -1,3 +1,5 @@
+@use '../helpers/baseMixin.scss';
+
 .vxe-pulldown {
   position: relative;
   display: inline-block;
@@ -39,6 +41,14 @@
   &.ani--enter {
     opacity: 1;
     transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
   }
 }
 .vxe-pulldown--panel-wrapper {

package/styles/components/select.scss

@@ -76,6 +76,14 @@
   &.ani--enter {
     opacity: 1;
     transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
   }
 }
 

package/styles/components/table-select.scss

@@ -73,6 +73,14 @@
   &.ani--enter {
     opacity: 1;
     transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
   }
 }
 

package/styles/components/tree-select.scss

@@ -73,6 +73,14 @@
   &.ani--enter {
     opacity: 1;
     transform: scaleY(1);
+    & > div {
+      &::after {
+        display: none;
+      }
+    }
+  }
+  & > div {
+    @include baseMixin.createEmptyMask();
   }
 }
 

package/styles/helpers/baseMixin.scss

@@ -80,3 +80,16 @@
     vertical-align: middle;
   }
 }
+
+@mixin createEmptyMask {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    user-select: none;
+  }
+}

package/types/all.d.ts

@@ -21,7 +21,9 @@ import VxeCollapse from './components/collapse'
 import VxeCollapsePane from './components/collapse-pane'
 import VxeColorPicker from './components/color-picker'
 import VxeCountdown from './components/countdown'
+import VxeDatePanel from './components/date-panel'
 import VxeDatePicker from './components/date-picker'
+import VxeDateRangePicker from './components/date-range-picker'
 import VxeDrawer from './components/drawer'
 import VxeEmpty from './components/empty'
 import VxeFlowDesign from './components/flow-design'
@@ -115,7 +117,9 @@ interface AllComponents {
   VxeCollapsePane: typeof VxeCollapsePane
   VxeColorPicker: typeof VxeColorPicker
   VxeCountdown: typeof VxeCountdown
+  VxeDatePanel: typeof VxeDatePanel
   VxeDatePicker: typeof VxeDatePicker
+  VxeDateRangePicker: typeof VxeDateRangePicker
   VxeDrawer: typeof VxeDrawer
   VxeEmpty: typeof VxeEmpty
   VxeFlowDesign: typeof VxeFlowDesign
@@ -218,7 +222,9 @@ export * from './components/collapse'
 export * from './components/collapse-pane'
 export * from './components/color-picker'
 export * from './components/countdown'
+export * from './components/date-panel'
 export * from './components/date-picker'
+export * from './components/date-range-picker'
 export * from './components/drawer'
 export * from './components/empty'
 export * from './components/flow-design'

package/types/components/button-group.d.ts

@@ -84,7 +84,7 @@ export namespace VxeButtonGroupDefines {
 
   export interface ClickEventParams extends ButtonGroupEventParams {
     name: VxeButtonPropTypes.Name
-    option: VxeButtonProps
+    option: VxeButtonProps & Record<string, any>
   }
 }
 

package/types/components/date-panel.d.ts

@@ -0,0 +1,240 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeDatePanel: DefineVxeComponentApp<VxeDatePanelProps, VxeDatePanelEventProps, VxeDatePanelSlots, VxeDatePanelMethods>
+export type VxeDatePanelComponent = DefineVxeComponentOptions<VxeDatePanelProps, VxeDatePanelEventProps>
+
+export type VxeDatePanelInstance = DefineVxeComponentInstance<VxeDatePanelProps, VxeDatePanelConstructor>
+
+export interface VxeDatePanelConstructor extends VxeComponentBaseOptions, VxeDatePanelMethods {
+  props: VxeDatePanelProps
+  context: SetupContext<VxeDatePanelEmits>
+  reactData: DatePanelReactData
+  getRefMaps(): DatePanelPrivateRef
+  getComputeMaps(): DatePanelPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface DatePanelPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+  refInput: Ref<HTMLInputElement>
+}
+export interface VxeDatePanelPrivateRef extends DatePanelPrivateRef { }
+
+export namespace VxeDatePanelPropTypes {
+  export type Size = VxeComponentSizeType
+  export type ModelValue = string | number | Date | null
+  export type ClassName = string
+  export type Type = 'date' | 'time' | 'datetime' | 'week' | 'month' | 'quarter' | 'year'
+  export type Multiple = boolean
+  export type LimitCount = string | number
+  export type StartDate = string | number | Date
+  export type EndDate = string | number | Date
+  export type MinDate = string | number | Date
+  export type MaxDate = string | number | Date
+  export type StartDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+  export type SelectDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+  export type LabelFormat = string
+  export type ValueFormat = string
+  export type FestivalMethod = (params: VxeDatePanelDefines.DateFestivalParams) => VxeDatePanelDefines.DateFestivalInfo | null | void
+  export type DisabledMethod = (params: VxeDatePanelDefines.DateDisabledParams) => boolean
+}
+
+export interface VxeDatePanelProps {
+  size?: VxeDatePanelPropTypes.Size
+  modelValue?: VxeDatePanelPropTypes.ModelValue
+  className?: VxeDatePanelPropTypes.ClassName
+  type?: VxeDatePanelPropTypes.Type
+  multiple?: VxeDatePanelPropTypes.Multiple
+  limitCount?: VxeDatePanelPropTypes.LimitCount
+
+  /**
+   * 日期面板的起始周为星期几
+   */
+  startDate?: VxeDatePanelPropTypes.StartDate
+  endDate?: VxeDatePanelPropTypes.EndDate
+  minDate?: VxeDatePanelPropTypes.MinDate
+  maxDate?: VxeDatePanelPropTypes.MaxDate
+
+  startDay?: VxeDatePanelPropTypes.StartDay
+  labelFormat?: VxeDatePanelPropTypes.LabelFormat
+  valueFormat?: VxeDatePanelPropTypes.ValueFormat
+  festivalMethod?: VxeDatePanelPropTypes.FestivalMethod
+  disabledMethod?: VxeDatePanelPropTypes.DisabledMethod
+
+  /**
+   * 只对 type=week 有效，选中日期后指定为一周的哪一天
+   */
+  selectDay?: VxeDatePanelPropTypes.SelectDay
+}
+
+export interface DatePanelPrivateComputed {
+}
+export interface VxeDatePanelPrivateComputed extends DatePanelPrivateComputed { }
+
+export interface DatePanelReactData {
+  visiblePanel: boolean
+  isAniVisible: boolean
+  isActivated: boolean
+  inputValue: any
+  datetimePanelValue: Date | null
+  datePanelValue: Date | null
+  datePanelLabel: string
+  datePanelType: VxeDatePanelDefines.DatePanelType
+  selectMonth: any
+  currentDate: any
+}
+
+export interface DatePanelInternalData {
+  yearSize: number
+  monthSize: number
+  quarterSize: number
+  hpTimeout?: undefined | number
+}
+
+export interface DatePanelMethods {
+  dispatchEvent(type: ValueOf<VxeDatePanelEmits>, params: Record<string, any>, evnt: Event | null): void
+
+  getValue(): string
+  setPanelDate(date: Date): void
+  getPanelDate(): Date
+  checkValue(inputLabel: string): void
+  confirmByEvent(event: Event): void
+}
+export interface VxeDatePanelMethods extends DatePanelMethods { }
+
+export interface DatePanelPrivateMethods { }
+export interface VxeDatePanelPrivateMethods extends DatePanelPrivateMethods { }
+
+export type VxeDatePanelEmits = [
+  'update:modelValue',
+  'change',
+  'click',
+  'clear',
+  'date-prev',
+  'date-today',
+  'date-next',
+  'confirm'
+]
+
+export namespace VxeDatePanelDefines {
+  export interface DatePanelEventParams extends VxeComponentEventParams {
+    $datePanel: VxeDatePanelConstructor
+  }
+
+  export interface DateYearItem {
+    date: Date;
+    isPrev: boolean;
+    isCurrent: boolean;
+    isNow: boolean;
+    isNext: boolean;
+    year: number;
+  }
+
+  export interface DateMonthItem {
+    date: Date;
+    isPrev: boolean;
+    isCurrent: boolean;
+    isNow: boolean;
+    isNext: boolean;
+    month: number;
+  }
+
+  export interface DateQuarterItem {
+    date: Date;
+    isPrev: boolean;
+    isCurrent: boolean;
+    isNow: boolean;
+    isNext: boolean;
+    quarter: number;
+  }
+
+  export interface DateDayItem {
+    date: Date;
+    isWeekNumber?: boolean;
+    isPrev: boolean;
+    isCurrent: boolean;
+    isNow: boolean;
+    isNext: boolean;
+    label: number;
+  }
+
+  export interface DateHourMinuteSecondItem {
+    value: number;
+    label: string;
+  }
+
+  export type DatePanelType = 'year' | 'quarter' | 'month' | 'week' | 'day'
+
+  interface DateFestivalItem {
+    /**
+     * 显示名称
+     */
+    label?: string
+    /**
+     * 标记为重要信息
+     */
+    important?: boolean
+    className?: string
+    style?: VxeComponentStyleType
+  }
+
+  /**
+   * 日期节日对象
+   */
+  export interface DateFestivalInfo extends DateFestivalItem {
+    /**
+     * 显示左上角小圆点通知
+     */
+    notice?: boolean
+    /**
+     * 显示右上角信息
+     */
+    extra?: string | DateFestivalItem
+  }
+
+  export interface DateFestivalParams {
+    $datePanel: VxeDatePanelConstructor
+    type: string
+    viewType: DatePanelType
+    date: Date
+  }
+
+  export interface DateDisabledParams {
+    $datePanel: VxeDatePanelConstructor
+    type: string
+    viewType: DatePanelType
+    date: Date
+  }
+
+  export interface DatePanelParams {
+    value: string
+  }
+
+  export interface ChangeEventParams extends DatePanelEventParams, DatePanelParams { }
+}
+
+export type VxeDatePanelEventProps = {
+  onChange?: VxeDatePanelEvents.Change
+}
+
+export interface VxeDatePanelListeners {
+  change?: VxeDatePanelEvents.Change
+}
+
+export namespace VxeDatePanelEvents {
+  export type Change = (params: VxeDatePanelDefines.ChangeEventParams) => void
+}
+
+export namespace VxeDatePanelSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
+export interface VxeDatePanelSlots {
+  default?: (params: VxeDatePanelSlotTypes.DefaultSlotParams) => any
+}
+
+export const DatePanel: typeof VxeDatePanel
+export default VxeDatePanel