vxe-pc-ui 4.12.0 → 4.12.1

package/es/calendar/src/calendar.js

@@ -1,10 +1,13 @@
 import { h, ref, computed, reactive, watch, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { VxeUI, createEvent, useSize, renderEmptyElement } from '../../ui';
 import { getDateQuarter } from '../../date-panel/src/util';
 import { toCssUnit } from '../../ui/src/dom';
+import { isEnableConf } from '../../ui/src/utils';
+import { errLog } from '../../ui/src/log';
 import VxeButtonComponent from '../../button/src/button';
 import XEUtils from 'xe-utils';
+const { menus, getConfig, getI18n } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeCalendar',
     props: {
@@ -44,7 +47,8 @@ export default defineVxeComponent({
             type: Function,
             default: () => getConfig().calendar.disabledMethod
         },
-        cellStyle: Function,
+        cellStyle: [Object, Function],
+        menuConfig: Object,
         // week
         selectDay: {
             type: [String, Number],
@@ -54,11 +58,13 @@ export default defineVxeComponent({
     emits: [
         'update:modelValue',
         'change',
-        'click',
+        'cell-click',
         'date-prev',
         'date-today',
         'date-next',
-        'view-change'
+        'view-change',
+        'cell-menu',
+        'menu-click'
     ],
     setup(props, context) {
         const { emit } = context;
@@ -116,6 +122,9 @@ export default defineVxeComponent({
         const computeSupportMultiples = computed(() => {
             return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
         });
+        const computeMenuOpts = computed(() => {
+            return Object.assign({}, getConfig().calendar.menuConfig, props.menuConfig);
+        });
         const computeDateListValue = computed(() => {
             const { multiple } = props;
             const { selectValue } = reactData;
@@ -235,11 +244,11 @@ export default defineVxeComponent({
                 }
                 else {
                     y = `${year}`;
-                    m = month ? getI18n(`vxe.input.date.m${month}`) : '-';
+                    m = month ? getI18n('vxe.calendar.monthLabel', [month]) : '-';
                 }
             }
             return {
-                y,
+                y: getI18n('vxe.calendar.yearLabel', [y]),
                 m
             };
         });
@@ -673,10 +682,44 @@ export default defineVxeComponent({
                 }
             }
         };
-        const dateSelectEvent = (item) => {
+        const dateClickEvent = (evnt, item) => {
+            const { type } = props;
+            const { datePanelType } = reactData;
+            const { date } = item;
             if (!isDateDisabled(item)) {
-                dateSelectItem(item.date);
+                dateSelectItem(date);
+                dispatchEvent('cell-click', { date, type, viewType: datePanelType }, evnt);
+            }
+        };
+        const datContextmenuEvent = (evnt, item) => {
+            const { type } = props;
+            const { datePanelType } = reactData;
+            const { menuConfig } = props;
+            const menuOpts = computeMenuOpts.value;
+            if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+                const { options, visibleMethod } = menuOpts;
+                const { date } = item;
+                if (!visibleMethod || visibleMethod({ $calendar: $xeCalendar, options, date, type, viewType: datePanelType })) {
+                    if (VxeUI.contextMenu) {
+                        VxeUI.contextMenu.openByEvent(evnt, {
+                            options,
+                            events: {
+                                optionClick(eventParams) {
+                                    const { option } = eventParams;
+                                    const gMenuOpts = menus.get(option.code);
+                                    const cmMethod = gMenuOpts ? gMenuOpts.calendarMenuMethod : null;
+                                    const params = { menu: option, date, type, viewType: datePanelType, $event: evnt, $calendar: $xeCalendar };
+                                    if (cmMethod) {
+                                        cmMethod(params, evnt);
+                                    }
+                                    dispatchEvent('menu-click', params, eventParams.$event);
+                                }
+                            }
+                        });
+                    }
+                }
             }
+            dispatchEvent('cell-menu', { date: item.date, type, viewType: datePanelType }, evnt);
         };
         const dateMoveDay = (offsetDay) => {
             if (!isDateDisabled({ date: offsetDay })) {
@@ -731,6 +774,9 @@ export default defineVxeComponent({
                 }
             }
         };
+        const dateMouseleaveEvent = () => {
+            reactData.datePanelValue = null;
+        };
         const dateConfirmEvent = () => {
         };
         const dateOpenPanel = () => {
@@ -760,14 +806,16 @@ export default defineVxeComponent({
                 const extraItem = festivalItem.extra ? (XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra) : null;
                 const labels = [
                     h('span', {
-                        class: ['vxe-calendar--date-label', {
+                        class: ['vxe-calendar--label', {
                                 'is-notice': festivalItem.notice
                             }]
                     }, extraItem && extraItem.label
                         ? [
-                            h('span', `${label || ''}`),
                             h('span', {
-                                class: ['vxe-calendar--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+                                class: 'vxe-calendar--label--number'
+                            }, `${label || ''}`),
+                            h('span', {
+                                class: ['vxe-calendar--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                                 style: extraItem.style
                             }, XEUtils.toValueString(extraItem.label))
                         ]
@@ -778,15 +826,15 @@ export default defineVxeComponent({
                     // 默认最多支持3个节日重叠
                     const festivalLabels = XEUtils.toValueString(festivalLabel).split(',');
                     labels.push(h('span', {
-                        class: ['vxe-calendar--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+                        class: ['vxe-calendar--festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
                         style: festivalItem.style
                     }, [
                         festivalLabels.length > 1
                             ? h('span', {
-                                class: ['vxe-calendar--date-festival--overlap', `overlap--${festivalLabels.length}`]
+                                class: ['vxe-calendar--festival--overlap', `overlap--${festivalLabels.length}`]
                             }, festivalLabels.map(label => h('span', label.substring(0, 3))))
                             : h('span', {
-                                class: 'vxe-calendar--date-festival--label'
+                                class: 'vxe-calendar--festival--label'
                             }, festivalLabels[0].substring(0, 3))
                     ]));
                 }
@@ -803,35 +851,68 @@ export default defineVxeComponent({
             const dateListValue = computeDateListValue.value;
             const matchFormat = 'yyyyMMdd';
             return [
-                h('table', {
-                    class: `vxe-calendar--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
+                h('div', {
+                    class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
                 }, [
-                    h('tr', dateHeaders.map((item) => {
-                        return h('th', {
-                            class: 'vxe-calendar--view-th'
-                        }, item.label);
-                    })),
-                    ...dayDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: ['vxe-calendar--view-td', {
+                    h('div', {
+                        class: 'vxe-calendar--view-header',
+                        style: {
+                            height: `${100 / (dayDatas.length + 1)}%`
+                        }
+                    }, [
+                        h('div', {
+                            class: 'vxe-calendar--view-row'
+                        }, dateHeaders.map((item) => {
+                            return h('div', {
+                                class: 'vxe-calendar--view-item',
+                                style: {
+                                    width: `${100 / dateHeaders.length}%`
+                                }
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, [
+                                    h('div', {
+                                        class: 'vxe-calendar--view-item-label'
+                                    }, item.label)
+                                ])
+                            ]);
+                        }))
+                    ]),
+                    h('div', {
+                        class: 'vxe-calendar--view-body'
+                    }, dayDatas.map((rows) => {
+                        return h('div', {
+                            class: 'vxe-calendar--view-row',
+                            style: {
+                                height: `${100 / dayDatas.length}%`
+                            }
+                        }, rows.map((item) => {
+                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                            return h('div', {
+                                class: ['vxe-calendar--view-item', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
                                         'is--next': item.isNext,
                                         'is--disabled': isDateDisabled(item),
-                                        'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                        'is--selected': isSelected,
                                         'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                     }],
-                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.label));
+                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                                    width: `${100 / rows.length}%`
+                                }),
+                                onClick: (evnt) => dateClickEvent(evnt, item),
+                                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                                onMouseenter: () => dateMouseenterEvent(item),
+                                onMouseleave: dateMouseleaveEvent
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, renderDateLabel(item, item.label))
+                            ]);
                         }));
-                    })
+                    }))
                 ])
             ];
         };
@@ -844,38 +925,70 @@ export default defineVxeComponent({
             const dateListValue = computeDateListValue.value;
             const matchFormat = 'yyyyMMdd';
             return [
-                h('table', {
-                    class: `vxe-calendar--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
+                h('div', {
+                    class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
                 }, [
-                    h('tr', weekHeaders.map((item) => {
-                        return h('td', {
-                            class: 'vxe-calendar--view-th'
-                        }, item.label);
-                    })),
-                    ...weekDates.map((rows) => {
+                    h('div', {
+                        class: 'vxe-calendar--view-header',
+                        style: {
+                            height: `${100 / (weekDates.length + 1)}%`
+                        }
+                    }, [
+                        h('div', {
+                            class: 'vxe-calendar--view-row'
+                        }, weekHeaders.map((item, rIndex) => {
+                            return h('div', {
+                                class: 'vxe-calendar--view-item',
+                                style: {
+                                    width: `${rIndex ? 13 : 9}%`
+                                }
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, [
+                                    h('div', {
+                                        class: 'vxe-calendar--view-item-label'
+                                    }, item.label)
+                                ])
+                            ]);
+                        }))
+                    ]),
+                    h('div', {
+                        class: 'vxe-calendar--view-body'
+                    }, weekDates.map((rows) => {
                         const isSelected = multiple ? rows.some((item) => dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat));
                         const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat));
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: ['vxe-calendar--view-td', {
+                        const isNowWeek = rows.some(item => item.isNow);
+                        return h('div', {
+                            class: 'vxe-calendar--view-row',
+                            style: {
+                                height: `${100 / weekDates.length}%`
+                            }
+                        }, rows.map((item, rIndex) => {
+                            return h('div', {
+                                class: ['vxe-calendar--view-item', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
-                                        'is--now': item.isNow,
+                                        'is--now': rIndex ? item.isNow : isNowWeek,
                                         'is--next': item.isNext,
                                         'is--disabled': isDateDisabled(item),
                                         'is--selected': isSelected,
                                         'is--hover': isHover
                                     }],
-                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                                // event
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.label));
+                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                                    width: `${rIndex ? 13 : 9}%`
+                                }),
+                                onClick: (evnt) => dateClickEvent(evnt, item),
+                                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                                onMouseenter: () => dateMouseenterEvent(item),
+                                onMouseleave: dateMouseleaveEvent
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, renderDateLabel(item, item.label))
+                            ]);
                         }));
-                    })
+                    }))
                 ])
             ];
         };
@@ -887,28 +1000,41 @@ export default defineVxeComponent({
             const dateListValue = computeDateListValue.value;
             const matchFormat = 'yyyyMM';
             return [
-                h('table', {
-                    class: `vxe-calendar--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
+                h('div', {
+                    class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
                 }, [
-                    h('tbody', monthDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: ['vxe-calendar--view-td', {
+                    h('div', {
+                        class: 'vxe-calendar--view-body'
+                    }, monthDatas.map((rows) => {
+                        return h('div', {
+                            class: 'vxe-calendar--view-row',
+                            style: {
+                                height: `${100 / monthDatas.length}%`
+                            }
+                        }, rows.map((item) => {
+                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                            return h('div', {
+                                class: ['vxe-calendar--view-item', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
                                         'is--next': item.isNext,
                                         'is--disabled': isDateDisabled(item),
-                                        'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                        'is--selected': isSelected,
                                         'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                     }],
-                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)));
+                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                                    width: `${100 / rows.length}%`
+                                }),
+                                onClick: (evnt) => dateClickEvent(evnt, item),
+                                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                                onMouseenter: () => dateMouseenterEvent(item),
+                                onMouseleave: dateMouseleaveEvent
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
+                            ]);
                         }));
                     }))
                 ])
@@ -922,28 +1048,41 @@ export default defineVxeComponent({
             const dateListValue = computeDateListValue.value;
             const matchFormat = 'yyyyq';
             return [
-                h('table', {
-                    class: `vxe-calendar--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
+                h('div', {
+                    class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
                 }, [
-                    h('tbody', quarterDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: ['vxe-calendar--view-td', {
+                    h('div', {
+                        class: 'vxe-calendar--view-body'
+                    }, quarterDatas.map((rows) => {
+                        return h('div', {
+                            class: 'vxe-calendar--view-row',
+                            style: {
+                                height: `${100 / quarterDatas.length}%`
+                            }
+                        }, rows.map((item) => {
+                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                            return h('div', {
+                                class: ['vxe-calendar--view-item', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
                                         'is--next': item.isNext,
                                         'is--disabled': isDateDisabled(item),
-                                        'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                        'is--selected': isSelected,
                                         'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                     }],
-                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)));
+                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                                    width: `${100 / rows.length}%`
+                                }),
+                                onClick: (evnt) => dateClickEvent(evnt, item),
+                                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                                onMouseenter: () => dateMouseenterEvent(item),
+                                onMouseleave: dateMouseleaveEvent
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
+                            ]);
                         }));
                     }))
                 ])
@@ -957,28 +1096,41 @@ export default defineVxeComponent({
             const dateListValue = computeDateListValue.value;
             const matchFormat = 'yyyy';
             return [
-                h('table', {
-                    class: `vxe-calendar--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
+                h('div', {
+                    class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
                 }, [
-                    h('tbody', yearDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: ['vxe-calendar--view-td', {
+                    h('div', {
+                        class: 'vxe-calendar--view-body'
+                    }, yearDatas.map((rows) => {
+                        return h('div', {
+                            class: 'vxe-calendar--view-row',
+                            style: {
+                                height: `${100 / yearDatas.length}%`
+                            }
+                        }, rows.map((item) => {
+                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                            return h('div', {
+                                class: ['vxe-calendar--view-item', {
                                         'is--prev': item.isPrev,
                                         'is--current': item.isCurrent,
                                         'is--now': item.isNow,
                                         'is--next': item.isNext,
                                         'is--disabled': isDateDisabled(item),
-                                        'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                        'is--selected': isSelected,
                                         'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                     }],
-                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.year));
+                                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                                    width: `${100 / rows.length}%`
+                                }),
+                                onClick: (evnt) => dateClickEvent(evnt, item),
+                                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                                onMouseenter: () => dateMouseenterEvent(item),
+                                onMouseleave: dateMouseleaveEvent
+                            }, [
+                                h('div', {
+                                    class: 'vxe-calendar--view-item-inner'
+                                }, renderDateLabel(item, item.year))
+                            ]);
                         }));
                     }))
                 ])
@@ -1119,6 +1271,11 @@ export default defineVxeComponent({
             }
         });
         onMounted(() => {
+            const { menuConfig } = props;
+            const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu');
+            if (menuConfig && !VxeUIContextMenu) {
+                errLog('vxe.error.reqComp', ['vxe-context-menu']);
+            }
             dateOpenPanel();
         });
         initValue();