@kkkarsss/ui 1.1.5 → 1.1.6

package/dist/ui/information/calendar-like/calendar-hour-slot.d.ts

@@ -1,7 +1,7 @@
 import { type FC, type DragEvent, ReactNode } from 'react';
 export type TCalendarHourSlotProps = {
     hour: number;
-    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number) => void;
+    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number, minutes: number) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
     children?: ReactNode;
 };

package/dist/ui/information/calendar-like/calendar-hour-slot.js

@@ -3,8 +3,25 @@ import { useState } from 'react';
 import { Typo } from '../text/typo';
 export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children }) => {
     const [selection, setSelection] = useState(null);
+    const [dragOverMinutes, setDragOverMinutes] = useState(null);
     const handleDragOver = (e) => {
         e.preventDefault();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offsetY = e.clientY - rect.top;
+        const minutes = Math.floor(offsetY / 20) * 15;
+        if (minutes !== dragOverMinutes) {
+            setDragOverMinutes(minutes);
+        }
+    };
+    const handleDragLeave = () => {
+        setDragOverMinutes(null);
+    };
+    const handleInternalDrop = (e) => {
+        setDragOverMinutes(null);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offsetY = e.clientY - rect.top;
+        const minutes = Math.floor(offsetY / 20) * 15;
+        onDrop?.(e, hour, minutes);
     };
     const handleMouseDown = (e) => {
         if (e.button !== 0 || !onCreateTask)
@@ -37,7 +54,10 @@ export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children }) => {
         document.addEventListener('mousemove', onMouseMove);
         document.addEventListener('mouseup', onMouseUp);
     };
-    return (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), onMouseDown: handleMouseDown, className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [children, selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
+    return (_jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, onMouseDown: handleMouseDown, className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [children, dragOverMinutes !== null && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/10 border border-dashed border-accent/50 rounded-sm z-[40] pointer-events-none", style: {
+                            top: `${(dragOverMinutes / 60) * 80}px`,
+                            height: '20px',
+                        } })), selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
                             top: `${(selection.startMinutes / 60) * 80}px`,
                             height: `${(selection.currentEstimatedTime / 60) * 80}px`,
                         }, children: _jsxs("div", { className: "p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] }) }))] })] }));

package/dist/ui/information/calendar-like/calendar-item-wrapper.js

@@ -38,15 +38,15 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, ren
     const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 60) * 80}px` : position.height;
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
             onDragStart?.(e, task.id);
-            setTimeout(() => {
-                const el = e.currentTarget;
-                if (el)
-                    el.style.pointerEvents = 'none';
-            }, 0);
+            const el = e.currentTarget;
+            if (el) {
+                el.style.opacity = '0.4';
+            }
         }, onDragEnd: (e) => {
             const el = e.currentTarget;
-            if (el)
-                el.style.pointerEvents = '';
+            if (el) {
+                el.style.opacity = '';
+            }
         }, style: {
             height: displayHeight,
             width: position.width,

package/dist/ui/information/calendar-like/calendar-like.js

@@ -13,10 +13,10 @@ export const CalendarLike = ({ tasks, hours = DEFAULT_HOURS, renderTask, onTaskD
     const handleDragStart = (e, taskId) => {
         e.dataTransfer.setData('taskId', taskId);
     };
-    const handleDrop = (e, hour) => {
+    const handleDrop = (e, hour, minutes) => {
         const taskId = e.dataTransfer.getData('taskId');
         if (taskId && onTaskDrop) {
-            onTaskDrop(taskId, hour);
+            onTaskDrop(taskId, hour, minutes);
         }
     };
     return (_jsx("div", { className: "relative border-l border-secondary/20 ml-12 select-none", children: hours.map((hour) => {

package/dist/ui/information/calendar-like/types.d.ts

@@ -17,7 +17,7 @@ export type TCalendarLikeProps = {
     tasks: TCalendarTask[];
     hours?: number[];
     renderTask: (task: TCalendarTask) => ReactNode;
-    onTaskDrop?: (taskId: string, hour: number) => void;
+    onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
     onTaskResize?: (taskId: string, newEstimatedTime: number) => void;
     onTaskClick?: (taskId: string) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",