nuxt-ui-elements-pro 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/module.mjs +3 -2
- package/dist/runtime/components/EventCalendar.d.vue.ts +4 -0
- package/dist/runtime/components/EventCalendar.vue +3 -0
- package/dist/runtime/components/EventCalendar.vue.d.ts +4 -0
- package/dist/runtime/components/event-calendar/EventCalendarMonthView.d.vue.ts +3 -0
- package/dist/runtime/components/event-calendar/EventCalendarMonthView.vue +15 -6
- package/dist/runtime/components/event-calendar/EventCalendarMonthView.vue.d.ts +3 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -15,9 +15,10 @@ const eventCalendar = (options) => ({
|
|
|
15
15
|
weekdayCell: "py-2 text-center text-xs font-medium text-muted uppercase tracking-wider",
|
|
16
16
|
monthBody: "flex flex-col select-none",
|
|
17
17
|
monthWeekRow: "relative",
|
|
18
|
-
dayCell: "border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
|
|
18
|
+
dayCell: "relative border-b border-r border-default hover:bg-elevated/50 cursor-pointer",
|
|
19
19
|
dayCellOutside: "bg-muted/20",
|
|
20
|
-
|
|
20
|
+
monthDayCell: "absolute inset-0 pointer-events-none",
|
|
21
|
+
monthDayNumber: "relative z-[1] p-1 pointer-events-none",
|
|
21
22
|
dayNumber: "text-xs font-medium p-1 leading-none",
|
|
22
23
|
dayNumberToday: "inline-flex items-center justify-center size-6 rounded-full text-inverted font-semibold",
|
|
23
24
|
dayNumberOutside: "text-muted",
|
|
@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
|
|
|
108
108
|
"month-day-header"?: (props: {
|
|
109
109
|
day: CalendarDay;
|
|
110
110
|
}) => any;
|
|
111
|
+
/** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
|
|
112
|
+
"month-day-cell"?: (props: {
|
|
113
|
+
day: CalendarDay;
|
|
114
|
+
}) => any;
|
|
111
115
|
/** Customize "+N more" indicator (month view) */
|
|
112
116
|
"month-more-events"?: (props: {
|
|
113
117
|
events: CalendarEvent[];
|
|
@@ -229,6 +229,9 @@ defineExpose({
|
|
|
229
229
|
<template v-if="slots['month-day-header']" #month-day-header="dayProps">
|
|
230
230
|
<slot name="month-day-header" v-bind="dayProps" />
|
|
231
231
|
</template>
|
|
232
|
+
<template v-if="slots['month-day-cell']" #month-day-cell="cellProps">
|
|
233
|
+
<slot name="month-day-cell" v-bind="cellProps" />
|
|
234
|
+
</template>
|
|
232
235
|
<template v-if="slots['month-more-events']" #month-more-events="moreProps">
|
|
233
236
|
<slot name="month-more-events" v-bind="moreProps" />
|
|
234
237
|
</template>
|
|
@@ -108,6 +108,10 @@ export interface EventCalendarSlots {
|
|
|
108
108
|
"month-day-header"?: (props: {
|
|
109
109
|
day: CalendarDay;
|
|
110
110
|
}) => any;
|
|
111
|
+
/** Full day-cell overlay for custom interactive content (month view). Container has pointer-events: none; use pointer-events-auto on your content. */
|
|
112
|
+
"month-day-cell"?: (props: {
|
|
113
|
+
day: CalendarDay;
|
|
114
|
+
}) => any;
|
|
111
115
|
/** Customize "+N more" indicator (month view) */
|
|
112
116
|
"month-more-events"?: (props: {
|
|
113
117
|
events: CalendarEvent[];
|
|
@@ -78,6 +78,7 @@ onKeyStroke("Escape", () => {
|
|
|
78
78
|
:aria-current="day.isToday ? 'date' : void 0"
|
|
79
79
|
:data-date="day.date.toString()"
|
|
80
80
|
:class="[
|
|
81
|
+
'group/cell',
|
|
81
82
|
ctx.ui.value.dayCell({ class: ctx.propUi.value?.dayCell }),
|
|
82
83
|
!day.isCurrentMonth && ctx.ui.value.dayCellOutside({ class: ctx.propUi.value?.dayCellOutside }),
|
|
83
84
|
ctx.dropTargetKey.value === `month-${day.date.toString()}` && ctx.ui.value.dropTarget({ class: ctx.propUi.value?.dropTarget }),
|
|
@@ -96,6 +97,12 @@ onKeyStroke("Escape", () => {
|
|
|
96
97
|
@dragover="ctx.onDragOver(`month-${day.date.toString()}`, $event)"
|
|
97
98
|
@dragleave="ctx.onDragLeave"
|
|
98
99
|
@drop="ctx.onDropMonthCell(day.date, $event)">
|
|
100
|
+
<div
|
|
101
|
+
v-if="$slots['month-day-cell']"
|
|
102
|
+
data-slot="monthDayCell"
|
|
103
|
+
:class="ctx.ui.value.monthDayCell({ class: ctx.propUi.value?.monthDayCell })">
|
|
104
|
+
<slot name="month-day-cell" :day="day" />
|
|
105
|
+
</div>
|
|
99
106
|
</div>
|
|
100
107
|
|
|
101
108
|
<!-- Layer 2: Day numbers (row 1) -->
|
|
@@ -108,16 +115,18 @@ onKeyStroke("Escape", () => {
|
|
|
108
115
|
gridColumn: `${colIdx + 1}`,
|
|
109
116
|
gridRow: '1'
|
|
110
117
|
}">
|
|
111
|
-
<
|
|
112
|
-
<
|
|
113
|
-
|
|
118
|
+
<div class="pointer-events-auto w-fit">
|
|
119
|
+
<slot name="month-day-header" :day="day">
|
|
120
|
+
<div
|
|
121
|
+
:class="[
|
|
114
122
|
!day.isToday && ctx.ui.value.dayNumber({ class: ctx.propUi.value?.dayNumber }),
|
|
115
123
|
day.isToday && ctx.ui.value.dayNumberToday({ class: ctx.propUi.value?.dayNumberToday }),
|
|
116
124
|
!day.isCurrentMonth && !day.isToday && ctx.ui.value.dayNumberOutside({ class: ctx.propUi.value?.dayNumberOutside })
|
|
117
125
|
]">
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
126
|
+
{{ day.date.day }}
|
|
127
|
+
</div>
|
|
128
|
+
</slot>
|
|
129
|
+
</div>
|
|
121
130
|
</div>
|
|
122
131
|
|
|
123
132
|
<!-- Layer 3: Spanning event bars -->
|