vxe-pc-ui 4.12.0 → 4.12.2

package/styles/components/calendar.scss

@@ -1,44 +1,14 @@
-@use '../helpers/baseMixin.scss';
+@use "sass:list";
 
 .vxe-calendar {
-  display: inline-flex;
+  color: var(--vxe-ui-font-color);
+  display: flex;
   flex-direction: column;
+  flex-shrink: 0; 
   width: 100%;
   height: 38em;
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   border-radius: var(--vxe-ui-base-border-radius);
-  &.type--date {
-    .vxe-calendar--body {
-      td {
-        width: 14.28571%;
-      }
-    }
-  }
-  &.type--week {
-    .vxe-calendar--body {
-      td {
-        width: 12%;
-        &:first-child {
-          width: 14%;
-        }
-      }
-    }
-  }
-  &.type--quarter {
-    .vxe-calendar--body {
-      td {
-        width: 50%;
-      }
-    }
-  }
-  &.type--month,
-  &.type--year {
-    .vxe-calendar--body {
-      td {
-        width: 25%;
-      }
-    }
-  }
 }
 
 .vxe-calendar--confirm {
@@ -108,113 +78,347 @@
     table-layout: fixed
   }
 }
-.vxe-calendar--view-th {
-  font-weight: 700;
+
+.vxe-calendar--wrapper {
+  border: 0 solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-calendar--wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0.8em;
+}
+
+.vxe-calendar--picker-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 3em;
+  padding-bottom: 0.5em;
+}
+
+.vxe-calendar--picker-header {
+  user-select: none;
+  .vxe-calendar--picker-type-wrapper {
+    flex-grow: 1;
+    font-size: 1.1em;
+  }
+  .vxe-calendar--picker-btn-wrapper {
+    flex-shrink: 0;
+    text-align: center;
+  }
+}
+.vxe-calendar--picker-type-wrapper {
+  display: flex;
+  align-items: center;
+  .vxe-calendar--picker-label,
+  .vxe-calendar--picker-btn {
+    display: inline-block;
+  }
+}
+.vxe-calendar--picker-btn-wrapper {
+  display: flex;
+  flex-direction: row;
+  .vxe-calendar--picker-prev-btn,
+  .vxe-calendar--picker-current-btn,
+  .vxe-calendar--picker-next-btn {
+    height: 2.2em;
+    padding: 0 0.5em;
+    border-radius: var(--vxe-ui-base-border-radius);
+    border: 1px solid var(--vxe-ui-input-border-color);
+    margin-left: 0.5em;
+    i {
+      font-size: 1.2em;
+    }
+  }
+  .vxe-calendar--picker-btn {
+    &:not(.is--disabled) {
+      &:active {
+        transform: scale(0.9);
+      }
+    }
+  }
+}
+.vxe-calendar--picker-label,
+.vxe-calendar--picker-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-calendar--picker-btn {
+  &.is--disabled {
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: no-drop;
+  }
+  &:not(.is--disabled) {
+    cursor: pointer;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+      background-color: #fff;
+    }
+    &:active {
+      background-color: #fff;
+    }
+  }
+}
+.vxe-calendar--picker-btns {
+  .vxe-calendar--picker-btn {
+    margin-left: 0.6em;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.vxe-calendar--view-wrapper {
+  display: flex;
+  flex-direction: column; 
+  line-height: 1.5;
+  height: 100%;
 }
-.vxe-calendar--view-td {
-  font-weight: normal;
+.vxe-calendar--picker-body {
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
   user-select: none;
-  @include baseMixin.createAnimationTransition(all, 0.1s);
+}
+.vxe-calendar--view-header {
+  box-shadow: inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color);
+  text-align: center;
+}
+.vxe-calendar--view-body {
+  display: inline-flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}
+.vxe-calendar--view-header {
+  .vxe-calendar--view-row {
+    height: 100%;
+  }
+  .vxe-calendar--view-item-label {
+    font-weight: 700;
+  }
+}
+
+.vxe-calendar--view-body {
+  .vxe-calendar--view-item {
+    cursor: pointer;
+    &.is--range-disabled,
+    &.is--disabled {
+      cursor: no-drop;
+    }
+    &.is--over {
+      cursor: no-drop;
+    }
+  }
+}
+.vxe-calendar--view-row {
+  display: flex;
+  flex-direction: row;
+}
+.vxe-calendar--view-item {
   &.is--prev,
   &.is--next {
-    color: var(--vxe-ui-font-disabled-color);
-    .vxe-calendar--date-label,
-    .vxe-calendar--date-festival {
+    .vxe-calendar--view-item-inner {
+      color: var(--vxe-ui-font-disabled-color);
+    }
+    .vxe-calendar--label,
+    .vxe-calendar--festival {
       color: var(--vxe-ui-font-disabled-color);
     }
   }
   &.is--now {
+    .vxe-calendar--view-item-inner {
+      color: var(--vxe-ui-base-popup-border-color);
+    }
     &:not(.is--selected) {
       &.is--current {
         color: var(--vxe-ui-font-primary-color);
-        .vxe-calendar--date-label,
-        .vxe-calendar--date-festival {
+        .vxe-calendar--label,
+        .vxe-calendar--festival {
           color: var(--vxe-ui-font-primary-color);
         }
       }
     }
   }
   &.is--hover {
-    background-color: var(--vxe-ui-base-hover-background-color);
+    .vxe-calendar--view-item-inner {
+      background-color: var(--vxe-ui-font-primary-tinge-color);
+    }
   }
   &.is--selected {
-    color: var(--vxe-ui-calendar-selected-color);
-    background-color: var(--vxe-ui-font-primary-color);
+    .vxe-calendar--view-item-inner {
+      color: var(--vxe-ui-input-date-picker-selected-color);
+      background-color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--hover {
+      .vxe-calendar--view-item-inner {
+        box-shadow: 0 0px 6px 1px var(--vxe-ui-font-primary-color);
+      }
+    }
     &.is--prev,
     &.is--next {
-      background-color: var(--vxe-ui-font-primary-lighten-color);
+      .vxe-calendar--label,
+      .vxe-calendar--festival {
+        color: var(--vxe-ui-base-popup-border-color);
+      }
     }
-    .vxe-calendar--date-label,
-    .vxe-calendar--date-festival {
-      color: var(--vxe-ui-calendar-festival-selected-color);
+    .vxe-calendar--label,
+    .vxe-calendar--festival {
+      color: var(--vxe-ui-input-date-picker-festival-selected-color);
     }
-    .vxe-calendar--date-label {
+    .vxe-calendar--label {
       &.is-notice {
         &:before {
-          background-color: var(--vxe-ui-calendar-notice-selected-background-color);
+          background-color: var(--vxe-ui-input-date-picker-notice-selected-background-color);
         }
       }
     }
   }
-  &:not(.is--disabled) {
-    cursor: pointer;
+  &.is--range-disabled {
+    .vxe-calendar--view-item-inner {
+      color: var(--vxe-ui-input-disabled-color);
+      background-color: inherit;
+    }
   }
   &.is--disabled {
-    cursor: no-drop;
-    color: var(--vxe-ui-input-disabled-color);
-    background-color: var(--vxe-ui-input-disabled-background-color);
-    .vxe-calendar--date-label,
-    .vxe-calendar--date-festival {
+    .vxe-calendar--view-item-inner {
+      color: var(--vxe-ui-input-disabled-color);
+      background-color: var(--vxe-ui-input-disabled-background-color);
+    }
+    .vxe-calendar--label,
+    .vxe-calendar--festival {
       color: var(--vxe-ui-input-disabled-color);
     }
   }
 }
 
-.vxe-calendar--date-label,
-.vxe-calendar--date-festival {
+// .vxe-date-range-picker--panel {
+//   .vxe-calendar--view-item {
+//     &.is--range-disabled {
+//       .vxe-calendar--view-item-inner {
+//         color: var(--vxe-ui-input-disabled-color);
+//         background-color: inherit;
+//       }
+//     }
+//   }
+// }
+
+.vxe-calendar--view-wrapper {
+  &.type--week {
+    .vxe-calendar--view-item {
+      padding: 0.2em 0;
+      .vxe-calendar--view-item-inner {
+        border-radius: 0;
+      }
+      &:first-child {
+        padding: 0.2em 0 0.2em 0.2em;
+        border-right: 1px solid var(--vxe-ui-base-popup-border-color);
+        .vxe-calendar--view-item-inner {
+          color: var(--vxe-ui-input-date-festival-color);
+        }
+      }
+      &:last-child {
+        padding: 0.2em 0.2em 0.2em 0;
+      }
+      &.is--hover,
+      &.is--selected {
+        &:first-child {
+          .vxe-calendar--view-item-inner {
+            border-radius: var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius);
+          }
+        }
+        &:last-child {
+          .vxe-calendar--view-item-inner {
+            border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
+          }
+        }
+      }
+      &.is--now {
+        &:not(.is--selected) {
+          &:first-child {
+            .vxe-calendar--view-item-inner {
+              color: var(--vxe-ui-font-primary-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.vxe-calendar--view-item-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--vxe-ui-base-border-radius);
+  overflow: hidden;
+}
+.vxe-calendar--view-item-label {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-calendar--label,
+.vxe-calendar--festival {
+  width: 100%;
   display: block;
   overflow: hidden;
+  text-align: center;
+}
+
+.vxe-calendar--label--number {
+  font-size: 1.2em;
 }
 
-.vxe-calendar--date-label {
+.vxe-calendar--label {
   position: relative;
+  height: 1.8em;
+  line-height: 1.8em;
   &.is-notice {
     &:before {
       content: "";
       position: absolute;
-      width: 4px;
-      height: 4px;
-      left: 0.8em;
-      top: 0.1em;
+      width: 0.25em;
+      height: 0.25em;
+      left: 50%;
+      top: 0;
       transform: translateX(-50%);
       border-radius: 100%;
       background-color: var(--vxe-ui-input-date-notice-background-color);
     }
   }
 }
-.vxe-calendar--date-label--extra {
+.vxe-calendar--label--extra {
   position: absolute;
   right: 0.1em;
-  top: -0.2em;
-  transform: scale(0.9);
+  top: -0.4em;
+  font-size: 0.85em;
   color: var(--vxe-ui-input-date-extra-color);
   &.is-important {
     color: var(--vxe-ui-input-date-extra-important-color);
   }
 }
 
-.vxe-calendar--date-festival {
+.vxe-calendar--festival {
   color: var(--vxe-ui-input-date-festival-color);
-  height: 14px;
-  line-height: 1;
+  height: 1.2em;
+  line-height: 1.2em;
   overflow: hidden;
   &.is-important {
     color: var(--vxe-ui-input-date-festival-important-color);
   }
 }
-.vxe-calendar--date-festival--label {
+.vxe-calendar--festival--label {
   display: block;
-  transform: scale(0.8);
+  font-size: 0.95em;
 }
 
 @keyframes festivalOverlap2 {
@@ -238,9 +442,9 @@
   }
 }
 
-.vxe-calendar--date-festival--overlap {
+.vxe-calendar--festival--overlap {
   display: block;
-  font-size: 12px;
+  font-size: 0.86em;
   &.overlap--2 {
     animation: festivalOverlap2 6s infinite ease-in-out;
   }
@@ -250,7 +454,6 @@
   & > span {
     height: 14px;
     display: block;
-    transform: scale(0.8);
   }
 }
 

package/types/components/calendar.d.ts

@@ -1,5 +1,6 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -39,6 +40,27 @@ export namespace VxeCalendarPropTypes {
   export type FestivalMethod = (params: VxeCalendarDefines.DateFestivalParams) => VxeCalendarDefines.DateFestivalInfo | null | void
   export type DisabledMethod = (params: VxeCalendarDefines.DateDisabledParams) => boolean
   export type CellStyle = (params: VxeCalendarDefines.CellStyleParams) => void | null | Partial<CSSStyleDeclaration>
+
+  export interface MenuConfig {
+    /**
+     * 是否启用
+     */
+    enabled?: boolean
+    /**
+     * 菜单配置
+     */
+    options: VxeContextMenuPropTypes.Options
+    /**
+     * 该函数的返回值用来决定是否允许显示右键菜单（对于需要对菜单进行权限控制时可能会用到）
+     */
+    visibleMethod?(params: {
+      $calendar: VxeCalendarConstructor
+      options: VxeContextMenuPropTypes.Options
+      date: Date
+      type: string
+      viewType: VxeCalendarDefines.DatePanelType
+    }): boolean
+  }
 }
 
 export type VxeCalendarProps = {
@@ -58,6 +80,7 @@ export type VxeCalendarProps = {
   festivalMethod?: VxeCalendarPropTypes.FestivalMethod
   disabledMethod?: VxeCalendarPropTypes.DisabledMethod
   cellStyle?: VxeCalendarPropTypes.CellStyle
+  menuConfig?: VxeCalendarPropTypes.MenuConfig
 }
 
 export interface CalendarPrivateComputed {
@@ -91,11 +114,13 @@ export interface VxeCalendarPrivateMethods extends CalendarPrivateMethods { }
 export type VxeCalendarEmits = [
   'update:modelValue',
   'change',
-  'click',
+  'cell-click',
   'date-prev',
   'date-today',
   'date-next',
-  'view-change'
+  'view-change',
+  'cell-menu',
+  'menu-click'
 ]
 
 export namespace VxeCalendarDefines {
@@ -159,7 +184,11 @@ export namespace VxeCalendarDefines {
   export interface ChangeEventParams extends CalendarEventParams {
     value: string
   }
-  export interface ClickEventParams extends CalendarEventParams { }
+  export interface ClickEventParams extends CalendarEventParams {
+    type: string
+    viewType: DatePanelType
+    date: Date
+  }
   export interface DatePrevEventParams extends CalendarEventParams {
     type: DatePanelType
    }
@@ -173,6 +202,15 @@ export namespace VxeCalendarDefines {
     viewType: DatePanelType
     viewDates: Date[]
   }
+  export interface CellMemuEventParams extends CalendarEventParams {
+    type: string
+    viewType: DatePanelType
+    date: Date
+  }
+  export interface MenuClickEventParams extends CellMemuEventParams {
+    date: Date
+    option: VxeContextMenuDefines.MenuFirstOption | VxeContextMenuDefines.MenuChildOption
+  }
 }
 
 export type VxeCalendarEventProps = {
@@ -184,6 +222,8 @@ export type VxeCalendarEventProps = {
   onDateToday?: VxeCalendarEvents.DateToday
   onDateNext?: VxeCalendarEvents.DateNext
   onViewChange?: VxeCalendarEvents.ViewChange
+  onCellMemu?: VxeCalendarEvents.CellMemu
+  onMenuClick?: VxeCalendarEvents.MenuClick
 }
 
 export interface VxeCalendarListeners {
@@ -195,6 +235,8 @@ export interface VxeCalendarListeners {
   dateToday?: VxeCalendarEvents.DateToday
   dateNext?: VxeCalendarEvents.DateNext
   viewChange?: VxeCalendarEvents.ViewChange
+  cellMenu?: VxeCalendarEvents.CellMemu
+  memuClick?: VxeCalendarEvents.MenuClick
 }
 
 export namespace VxeCalendarEvents {
@@ -206,6 +248,8 @@ export namespace VxeCalendarEvents {
   export type DateToday = (params: VxeCalendarDefines.DateTodayEventParams) => void
   export type DateNext = (params: VxeCalendarDefines.DateNextEventParams) => void
   export type ViewChange = (params: VxeCalendarDefines.ViewChangeEventParams) => void
+  export type CellMemu = (params: VxeCalendarDefines.CellMemuEventParams) => void
+  export type MenuClick = (params: VxeCalendarDefines.MenuClickEventParams) => void
 }
 
 export namespace VxeCalendarSlotTypes {