@progress/kendo-vue-dateinputs
Version:
122 lines (121 loc) • 3.21 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as k, createVNode as a } from "vue";
import { getDefaultSlots as m } from "@progress/kendo-vue-common";
const M = /* @__PURE__ */ k({
name: "KendoCalendarCell",
emits: {
click: null,
mousedown: null,
mouseenter: null,
mouseleave: null
},
props: {
isDisabled: Boolean,
view: Number,
formattedValue: String,
id: String,
isWeekend: Boolean,
isFocused: Boolean,
isSelected: Boolean,
isInRange: Boolean,
isRangeStart: Boolean,
isRangeEnd: Boolean,
isRangeMid: Boolean,
isRangeSplitEnd: Boolean,
isRangeSplitStart: Boolean,
isToday: Boolean,
title: String,
value: Date
},
// Manually checking if the component needs an update
// due to date object being compared by instance
// and new Date object is created
// every time and fails the shallow compare of the Vue.
/**
* @hidden
*/
updated() {
},
// tslint:disable:max-line-length
/**
* @return
* Returns a `<td />` element with a `<span class="k-link" />` inside to apply the styles. The text inside is the [`formattedValue`]({% slug api_dateinputs_calendarcellprops %}#toc-formattedvalue) of the `cell`.
*/
render() {
const e = m(this), {
formattedValue: t,
isWeekend: o,
isFocused: i,
isInRange: v,
isSelected: l,
isRangeStart: s,
isRangeMid: d,
isRangeEnd: n,
isRangeSplitStart: r,
isRangeSplitEnd: u,
isToday: p,
isDisabled: c,
view: S,
value: R
} = this.$props, h = this.$props.activeRangeEnd === "end" && n, g = this.$props.activeRangeEnd === "start" && s;
return a("td", {
id: this.$props.id,
title: this.$props.title,
class: {
"k-calendar-td": !0,
"k-range-end": n,
"k-range-mid": d,
"k-range-split-end": u,
"k-range-split-start": r,
"k-range-start": s,
"k-active": g || h,
"k-focus": i,
"k-selected": l || s || n,
"k-today": p,
"k-weekend": o,
"k-disabled": c
},
onClick: this.handleClick,
onMousedown: this.handleMouseDown,
onMouseenter: this.handleMouseEnter,
onMouseleave: this.handleMouseLeave
}, [a("span", {
class: "k-link"
}, [e])]);
},
methods: {
handleClick(e) {
const {
value: t
} = this.$props;
this.$emit("click", t, e);
},
handleMouseDown(e) {
const {
value: t
} = this.$props;
this.$emit("mousedown", t, e);
},
handleMouseEnter() {
const {
value: e
} = this.$props;
this.$emit("mouseenter", e);
},
handleMouseLeave() {
const {
value: e
} = this.$props;
this.$emit("mouseleave", e);
}
}
});
export {
M as CalendarCell
};