@aiquants/drag-drop-panels 0.8.5 → 0.9.1
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/CHANGELOG.md +72 -0
- package/README.md +248 -54
- package/dist/DragDropLayout.d.ts +7 -2
- package/dist/drag-drop/DebugComponents.d.ts +2 -3
- package/dist/drag-drop/DebugOverlay.d.ts +2 -0
- package/dist/drag-drop/ResizeHandle.d.ts +5 -2
- package/dist/drag-drop/domHooks.d.ts +2 -0
- package/dist/drag-drop/dragImage.d.ts +6 -0
- package/dist/drag-drop/hooks/useDragDropColumns.d.ts +0 -1
- package/dist/drag-drop/hooks/useDragDropState.d.ts +1 -3
- package/dist/drag-drop/hooks/usePanelTouchDrag.d.ts +27 -0
- package/dist/drag-drop/labels.d.ts +44 -0
- package/dist/drag-drop/maximizeEscape.d.ts +9 -0
- package/dist/drag-drop/panelTheme.d.ts +2 -0
- package/dist/drag-drop/touchDragConfig.d.ts +6 -0
- package/dist/drag-drop/types.d.ts +1 -22
- package/dist/drag-drop/utils/dropTarget.d.ts +2 -0
- package/dist/drag-drop/utils/edgeScrollUtils.d.ts +2 -0
- package/dist/drag-drop/utils/panelMoves.d.ts +30 -0
- package/dist/drag-drop-panels.css +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.es.js +2249 -1767
- package/dist/index.umd.js +2 -2
- package/dist/styles/drag-drop-panels.standalone.css +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export type LabelLanguage = "en" | "ja";
|
|
2
|
+
export interface LabelDefault {
|
|
3
|
+
readonly text: string;
|
|
4
|
+
readonly lang: LabelLanguage;
|
|
5
|
+
}
|
|
6
|
+
export interface ResolvedLabel {
|
|
7
|
+
readonly text: string;
|
|
8
|
+
readonly lang: LabelLanguage | undefined;
|
|
9
|
+
}
|
|
10
|
+
export interface LabelSegment {
|
|
11
|
+
readonly text: string;
|
|
12
|
+
readonly lang: LabelLanguage | undefined;
|
|
13
|
+
}
|
|
14
|
+
export interface DragDropLayoutLabels {
|
|
15
|
+
switchToCustomDragMode?: string;
|
|
16
|
+
switchToNormalDragMode?: string;
|
|
17
|
+
hidePanel?: string;
|
|
18
|
+
maximizePanel?: string;
|
|
19
|
+
restorePanel?: string;
|
|
20
|
+
closePanel?: string;
|
|
21
|
+
movePanelToPreviousColumn?: string;
|
|
22
|
+
movePanelToNextColumn?: string;
|
|
23
|
+
movePanelUp?: string;
|
|
24
|
+
movePanelDown?: string;
|
|
25
|
+
customDragModeBadge?: string;
|
|
26
|
+
panelMoved?: string;
|
|
27
|
+
panelMoveUnavailable?: string;
|
|
28
|
+
panelDragStarted?: string;
|
|
29
|
+
panelDragCancelled?: string;
|
|
30
|
+
hiddenPanels?: string;
|
|
31
|
+
hiddenPanelBadge?: string;
|
|
32
|
+
hiddenPanelNotice?: string;
|
|
33
|
+
emptyColumn?: string;
|
|
34
|
+
dropZone?: string;
|
|
35
|
+
dropHere?: string;
|
|
36
|
+
resizeColumn?: string;
|
|
37
|
+
}
|
|
38
|
+
export type DragDropLayoutLabelKey = keyof DragDropLayoutLabels;
|
|
39
|
+
export declare const TEMPLATE_PLACEHOLDERS: Readonly<Partial<Record<DragDropLayoutLabelKey, readonly string[]>>>;
|
|
40
|
+
export declare const DEFAULT_DRAG_DROP_LAYOUT_LABELS: Readonly<Required<DragDropLayoutLabels>>;
|
|
41
|
+
export type ResolvedDragDropLayoutLabels = Readonly<Record<DragDropLayoutLabelKey, ResolvedLabel>>;
|
|
42
|
+
export declare const resolveDragDropLayoutLabels: (labels: DragDropLayoutLabels | undefined) => ResolvedDragDropLayoutLabels;
|
|
43
|
+
export declare const composeLabel: (label: ResolvedLabel, values: Readonly<Record<string, number | ResolvedLabel>>) => readonly LabelSegment[];
|
|
44
|
+
export declare const formatLabel: (label: ResolvedLabel, values: Readonly<Record<string, number>>) => ResolvedLabel;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type PopoverCandidate = {
|
|
2
|
+
readonly getAttribute: (name: string) => string | null;
|
|
3
|
+
readonly matches: (selectors: string) => boolean;
|
|
4
|
+
};
|
|
5
|
+
export type PopoverRoot = {
|
|
6
|
+
readonly querySelectorAll: (selectors: string) => Iterable<PopoverCandidate>;
|
|
7
|
+
};
|
|
8
|
+
export declare const hasOpenEscapePopover: (root: PopoverRoot) => boolean;
|
|
9
|
+
export declare const isMaximizeEscape: (event: KeyboardEvent) => boolean;
|
|
@@ -4,10 +4,8 @@ export interface ElementWithResizeObserver extends HTMLElement {
|
|
|
4
4
|
}
|
|
5
5
|
export type ReactMouseEvent = import("react").MouseEvent<Element>;
|
|
6
6
|
export type ReactDragEvent = import("react").DragEvent<Element>;
|
|
7
|
-
export type ReactTouchEvent = import("react").TouchEvent<Element>;
|
|
8
7
|
export type DOMMouseEvent = globalThis.MouseEvent;
|
|
9
8
|
export type DOMDragEvent = globalThis.DragEvent;
|
|
10
|
-
export type DOMTouchEvent = globalThis.TouchEvent;
|
|
11
9
|
export interface DebugConfig {
|
|
12
10
|
showDebugPanel?: boolean;
|
|
13
11
|
showMousePosition?: boolean;
|
|
@@ -58,15 +56,6 @@ export interface PanelSizeInfo {
|
|
|
58
56
|
minHeight: string;
|
|
59
57
|
maxHeight: string;
|
|
60
58
|
}
|
|
61
|
-
export interface TouchDragState {
|
|
62
|
-
isTouchDragging: boolean;
|
|
63
|
-
panelId?: string | null;
|
|
64
|
-
startX: number;
|
|
65
|
-
startY: number;
|
|
66
|
-
currentX: number;
|
|
67
|
-
currentY: number;
|
|
68
|
-
draggedElement: HTMLElement | null;
|
|
69
|
-
}
|
|
70
59
|
export interface ClickState {
|
|
71
60
|
isClicked: boolean;
|
|
72
61
|
panelId: string | null;
|
|
@@ -86,7 +75,6 @@ export interface DragDropHookReturn {
|
|
|
86
75
|
dragState: DragState;
|
|
87
76
|
dragOverPosition: DragOverPosition | null;
|
|
88
77
|
originalPanelPosition: OriginalPanelPosition | null;
|
|
89
|
-
touchDragState: TouchDragState;
|
|
90
78
|
customDrag: CustomDragState;
|
|
91
79
|
clickState: ClickState;
|
|
92
80
|
mousePosition: MousePosition;
|
|
@@ -96,9 +84,6 @@ export interface DragDropHookReturn {
|
|
|
96
84
|
handleDragEnd: (e: ReactDragEvent) => void;
|
|
97
85
|
handleClick: (e: ReactMouseEvent, panelId: string) => void;
|
|
98
86
|
handleMouseDown: (e: ReactMouseEvent, panelId: string) => void;
|
|
99
|
-
handleTouchStart: (e: ReactTouchEvent, panelId: string) => void;
|
|
100
|
-
handleTouchMove: (e: ReactTouchEvent) => void;
|
|
101
|
-
handleTouchEnd: (e: ReactTouchEvent) => void;
|
|
102
87
|
handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void;
|
|
103
88
|
handlePlaceholderDragLeave: (e: ReactDragEvent, columnIndex: number, insertIndex: number) => void;
|
|
104
89
|
toggleDragMode: (panelId: string) => void;
|
|
@@ -117,15 +102,13 @@ export interface DragDropEventHandlers {
|
|
|
117
102
|
onColumnDragLeave: (e: DragEvent<Element>) => void;
|
|
118
103
|
onPanelClick?: (e: MouseEvent<Element>, panelId: string) => void;
|
|
119
104
|
onPanelMouseDown?: (e: MouseEvent<Element>, panelId: string) => void;
|
|
120
|
-
onTouchStart?: (e: TouchEvent<Element>, panelId: string) => void;
|
|
121
|
-
onTouchMove?: (e: TouchEvent<Element>) => void;
|
|
122
|
-
onTouchEnd?: (e: TouchEvent<Element>) => void;
|
|
123
105
|
onPanelSizeInfoClick?: (e: MouseEvent<Element> | TouchEvent<Element>, panelId: string) => void;
|
|
124
106
|
onToggleDragMode?: (panelId: string) => void;
|
|
125
107
|
onPanelClose?: (panelId: string) => void;
|
|
126
108
|
onPanelMaximizeChange?: (panelId: string | null) => void;
|
|
127
109
|
}
|
|
128
110
|
export type PanelDragHandle = "panel" | "header";
|
|
111
|
+
export type ScrollRootElement = "main" | "div";
|
|
129
112
|
export interface DragDropState {
|
|
130
113
|
columnPanels: Record<string, string[]>;
|
|
131
114
|
panelVisibility: Record<string, boolean>;
|
|
@@ -148,7 +131,6 @@ export interface UseDragDropColumnsReturn {
|
|
|
148
131
|
dragState: DragState;
|
|
149
132
|
dragOverPosition: DragOverPosition | null;
|
|
150
133
|
originalPanelPosition: OriginalPanelPosition | null;
|
|
151
|
-
touchDragState: TouchDragState;
|
|
152
134
|
customDrag: CustomDragState;
|
|
153
135
|
clickState: ClickState;
|
|
154
136
|
mousePosition: MousePosition;
|
|
@@ -160,9 +142,6 @@ export interface UseDragDropColumnsReturn {
|
|
|
160
142
|
handleDragStart: (e: DragEvent<Element>, panelId: string) => void;
|
|
161
143
|
handleDragEnd: () => void;
|
|
162
144
|
handleMouseDown: (e: MouseEvent<Element>, panelId: string) => void;
|
|
163
|
-
handleTouchStart: (e: TouchEvent<Element>, panelId: string) => void;
|
|
164
|
-
handleTouchMove: (e: TouchEvent) => void;
|
|
165
|
-
handleTouchEnd: (e: TouchEvent) => void;
|
|
166
145
|
handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void;
|
|
167
146
|
handlePlaceholderDragLeave: (e?: DragEvent<Element>, columnIndex?: number, insertIndex?: number) => void;
|
|
168
147
|
handleDragOverWithInsert: (e: DragEvent<Element>, columnIndex: number) => void;
|
|
@@ -15,6 +15,8 @@ export declare class EdgeScrollManager {
|
|
|
15
15
|
private config;
|
|
16
16
|
private isActive;
|
|
17
17
|
private scrollElement?;
|
|
18
|
+
private pointX;
|
|
19
|
+
private pointY;
|
|
18
20
|
constructor(config?: EdgeScrollConfig, scrollElement?: HTMLElement);
|
|
19
21
|
setScrollElement(element?: HTMLElement): void;
|
|
20
22
|
start(clientX: number, clientY: number): void;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { OriginalPanelPosition } from "../types";
|
|
2
|
+
export declare const isOriginalPlace: (origin: OriginalPanelPosition, columnIndex: number, insertIndex: number) => boolean;
|
|
3
|
+
export declare const insertPanelAt: (columnPanels: Readonly<Record<string, string[]>>, panelId: string, targetColumnKey: string, insertIndex: number) => Record<string, string[]> | null;
|
|
4
|
+
export type PanelMove = "previous-column" | "next-column" | "up" | "down";
|
|
5
|
+
export declare const PANEL_MOVES: readonly PanelMove[];
|
|
6
|
+
export interface PanelArrangement {
|
|
7
|
+
readonly columnKeys: readonly string[];
|
|
8
|
+
readonly columnPanels: Readonly<Record<string, readonly string[]>>;
|
|
9
|
+
readonly panelVisibility: Readonly<Record<string, boolean>>;
|
|
10
|
+
}
|
|
11
|
+
export interface ShownPanelPlace {
|
|
12
|
+
readonly column: number;
|
|
13
|
+
readonly index: number;
|
|
14
|
+
}
|
|
15
|
+
export declare const shownPanelPlace: (arrangement: PanelArrangement, panelId: string) => ShownPanelPlace | null;
|
|
16
|
+
export declare const availablePanelMoves: (arrangement: PanelArrangement, panelId: string) => readonly PanelMove[];
|
|
17
|
+
export declare const movePanelInColumns: (arrangement: PanelArrangement, panelId: string, move: PanelMove) => {
|
|
18
|
+
readonly columnPanels: Record<string, string[]>;
|
|
19
|
+
readonly from: ShownPanelPlace;
|
|
20
|
+
readonly place: ShownPanelPlace;
|
|
21
|
+
} | null;
|
|
22
|
+
export declare const differsOnlyInPanel: (before: Readonly<Record<string, readonly string[]>>, after: Readonly<Record<string, readonly string[]>>, panelId: string) => boolean;
|
|
23
|
+
export interface PanelMoveShortcut {
|
|
24
|
+
readonly key: string;
|
|
25
|
+
readonly aria: string;
|
|
26
|
+
readonly text: string;
|
|
27
|
+
}
|
|
28
|
+
export declare const PANEL_MOVE_SHORTCUTS: Readonly<Record<PanelMove, PanelMoveShortcut>>;
|
|
29
|
+
export type PanelMoveKeyChord = Pick<KeyboardEvent, "key" | "altKey" | "shiftKey" | "ctrlKey" | "metaKey">;
|
|
30
|
+
export declare const panelMoveOfKey: (chord: PanelMoveKeyChord) => PanelMove | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.resize-enabled-column{flex-shrink:0;flex-grow:0;width:var(--column-width, 350px)}.auto-width-column{flex:1}.resizing-cursor{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.column-resizing{opacity:.8;transition:opacity .2s ease}.column-resizing-active{opacity:1;box-shadow:0 0 0 2px #3b82f680;transition:none}body.resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.custom-dragging,body.custom-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}body.custom-dragging *:before,body.custom-dragging *:after{cursor:grabbing!important}.panel-draggable[data-dragging=true]{transform:rotate(1deg);opacity:.2;box-shadow:0 0 0 2px #60a5fa80;transition:transform 1s ease,opacity 1s ease,box-shadow 1s ease}.panel.is-moving *{overflow:hidden!important}.panel-with-placeholder[data-panel-hidden=true]{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;height:0!important;opacity:0}[data-drop-zone=true]>.panel-with-placeholder{margin-top:0;transition:margin .2s ease}[data-drop-zone=true]>.panel-with-placeholder:not([data-panel-hidden=true])~.panel-with-placeholder:not([data-panel-hidden=true]){margin-top:1rem}.panel-scroll-area{scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.25) transparent}.panel-scroll-area:hover{scrollbar-color:rgba(15,23,42,.35) transparent}.panel-scroll-area::-webkit-scrollbar{width:6px}.panel-scroll-area::-webkit-scrollbar-track{background:transparent}.panel-scroll-area::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#0f172a40}.panel-scroll-area:hover::-webkit-scrollbar-thumb{background-color:#0f172a59}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.resize-handle{position:absolute;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:10;transition:background-color .2s ease}.resize-handle.right{right:-6px}.resize-handle.left{left:-6px}.resize-handle.resizing,.resize-handle:hover{background-color:#0000000d}.resize-handle-bar{width:2px;height:40px;background-color:#6366f180;border-radius:999px}.resize-handle.resizing .resize-handle-bar{background-color:#6366f1e6;box-shadow:0 0 6px #6366f199}.resize-handle-debug-info{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none}.column-debug-size{position:absolute;top:8px;right:12px;background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;pointer-events:none}
|
|
1
|
+
:where([data-aqdd-scroll-root]){padding-block:var(--aqdd-stage-padding-block, 1.5rem);padding-inline:var(--aqdd-stage-padding-inline, 1rem 2rem)}@media(min-width:40rem){:where([data-aqdd-scroll-root]){padding-inline:var(--aqdd-stage-padding-inline, 1.5rem 2.5rem)}}:where([data-aqdd-columns]){gap:var(--aqdd-column-gap, 1.5rem)}:where([data-aqdd-layout],[data-aqdd-panel]){--aqdd-default-panel-surface: rgb(255 255 255 / .8);--aqdd-default-panel-border: #e2e8f0;--aqdd-default-panel-title-color: #334155;--aqdd-default-header-button-color: #475569;--aqdd-default-header-button-hover-color: #0f172a;--aqdd-default-header-button-hover-surface: #f1f5f9;--aqdd-default-header-close-hover-color: #b91c1c;--aqdd-default-custom-badge-color: #9a3412;--aqdd-default-custom-badge-surface: #ffedd5}:where([data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(255 255 255 / .95)}:where([data-aqdd-layout]){--aqdd-default-restore-button-color: #ffffff;--aqdd-default-restore-button-surface: #0369a1;--aqdd-default-restore-button-hover-surface: #075985}:where([data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #075985;--aqdd-default-drop-placeholder-surface: rgb(240 249 255 / .9);--aqdd-default-drop-placeholder-target-surface: #bae6fd}:where(.dark [data-aqdd-layout],.dark [data-aqdd-panel]){--aqdd-default-panel-surface: rgb(15 23 42 / .8);--aqdd-default-panel-border: #334155;--aqdd-default-panel-title-color: #e2e8f0;--aqdd-default-header-button-color: #94a3b8;--aqdd-default-header-button-hover-color: #f1f5f9;--aqdd-default-header-button-hover-surface: #334155;--aqdd-default-header-close-hover-color: #fca5a5;--aqdd-default-custom-badge-color: #fdba74;--aqdd-default-custom-badge-surface: #431407}:where(.dark [data-aqdd-panel][data-maximized]){--aqdd-default-panel-surface: rgb(15 23 42 / .95)}:where(.dark [data-aqdd-drop-placeholder]){--aqdd-default-drop-placeholder-color: #bae6fd;--aqdd-default-drop-placeholder-surface: rgb(8 47 73 / .9);--aqdd-default-drop-placeholder-target-surface: #075985}:where([data-aqdd-panel],[data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){border-color:var(--aqdd-panel-border, var(--aqdd-default-panel-border));background-color:var(--aqdd-panel-surface, var(--aqdd-default-panel-surface))}:where([data-aqdd-hidden-panels],[data-aqdd-empty-column],[data-aqdd-hidden-panel-stand-in]){color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-restore-panel]){color:var(--aqdd-restore-button-color, var(--aqdd-default-restore-button-color));background-color:var(--aqdd-restore-button-surface, var(--aqdd-default-restore-button-surface))}:where([data-aqdd-restore-panel]:hover){background-color:var(--aqdd-restore-button-hover-surface, var(--aqdd-default-restore-button-hover-surface))}:where([data-aqdd-drop-placeholder=shown],[data-aqdd-drop-placeholder=target]){color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));border-color:var(--aqdd-drop-placeholder-color, var(--aqdd-default-drop-placeholder-color));background-color:var(--aqdd-drop-placeholder-surface, var(--aqdd-default-drop-placeholder-surface))}:where([data-aqdd-drop-placeholder=target]){background-color:var(--aqdd-drop-placeholder-target-surface, var(--aqdd-default-drop-placeholder-target-surface))}:where([data-aqdd-panel-header]){display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.25rem;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:where([data-aqdd-panel-title]){flex:1 1 6em;min-inline-size:min(100%,6em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--aqdd-panel-title-color, var(--aqdd-default-panel-title-color))}:where([data-aqdd-panel-controls]),:where([data-aqdd-panel-buttons]){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem;min-inline-size:0}:where([data-aqdd-panel-controls]){margin-inline-start:auto}:where([data-aqdd-panel-buttons]){opacity:0;transition:opacity .15s ease}:where([data-aqdd-panel]:hover [data-aqdd-panel-buttons]){opacity:1}:where([data-aqdd-panel-buttons]:focus-within){opacity:1}@media(hover:none){:where([data-aqdd-panel-buttons]){opacity:1}}:where([data-aqdd-panel-action]){cursor:pointer;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color))}:where([data-aqdd-panel-action]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-button-hover-color));background-color:var(--aqdd-header-button-hover-surface, var(--aqdd-default-header-button-hover-surface))}:where([data-aqdd-panel-action=close]:hover){color:var(--aqdd-header-button-hover-color, var(--aqdd-default-header-close-hover-color))}:where([data-aqdd-custom-badge]),:where([data-aqdd-hidden-panel-badge]),:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){color:var(--aqdd-custom-badge-color, var(--aqdd-default-custom-badge-color));background-color:var(--aqdd-custom-badge-surface, var(--aqdd-default-custom-badge-surface))}:where([data-aqdd-panel-action][aria-disabled=true]){cursor:not-allowed;color:var(--aqdd-header-button-color, var(--aqdd-default-header-button-color));background-color:transparent}:where([data-aqdd-panel-action][aria-disabled=true]>svg){opacity:.382}@media(forced-colors:active){:where([data-aqdd-drag-mode=custom] [data-aqdd-panel-action=drag-mode]){forced-color-adjust:none;color:HighlightText;background-color:Highlight}:where([data-aqdd-panel-action][aria-disabled=true]){color:GrayText}}:where([data-aqdd-announcer]){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.resize-enabled-column{flex-shrink:0;flex-grow:0;width:var(--column-width, 350px)}.auto-width-column{flex:1}.resizing-cursor{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.column-resizing{opacity:.8;transition:opacity .2s ease}.column-resizing-active{opacity:1;box-shadow:0 0 0 2px #3b82f680;transition:none}body.resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}body.custom-dragging,body.custom-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}body.custom-dragging *:before,body.custom-dragging *:after{cursor:grabbing!important}.panel-draggable[data-dragging=true]{transform:rotate(1deg);opacity:.2;box-shadow:0 0 0 2px #60a5fa80;transition:transform 1s ease,opacity 1s ease,box-shadow 1s ease}.panel.is-moving *{overflow:hidden!important}.panel-with-placeholder[data-panel-hidden=true]{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;height:0!important;opacity:0}[data-drop-zone=true]>.panel-with-placeholder{margin-top:0;transition:margin .2s ease}[data-drop-zone=true]>.panel-with-placeholder:not([data-panel-hidden=true])~.panel-with-placeholder:not([data-panel-hidden=true]){margin-top:1rem}.panel-scroll-area{scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.25) transparent}.panel-scroll-area:hover{scrollbar-color:rgba(15,23,42,.35) transparent}.panel-scroll-area::-webkit-scrollbar{width:6px}.panel-scroll-area::-webkit-scrollbar-track{background:transparent}.panel-scroll-area::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#0f172a40}.panel-scroll-area:hover::-webkit-scrollbar-thumb{background-color:#0f172a59}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}@media(prefers-reduced-motion:reduce){:where([data-aqdd-panel-buttons]){transition:none}.column-resizing,.panel-draggable[data-dragging=true]{transition:none}[data-drop-zone=true]>.panel-with-placeholder{transition:none}}.resize-handle{position:absolute;top:0;bottom:0;width:12px;display:flex;align-items:center;justify-content:center;cursor:col-resize;z-index:10;transition:background-color .2s ease;touch-action:none}.resize-handle.right{right:-6px}.resize-handle.left{left:-6px}.resize-handle.resizing,.resize-handle:hover{background-color:#0000000d}.resize-handle-bar{width:2px;height:40px;background-color:#6366f180;border-radius:999px}.resize-handle.resizing .resize-handle-bar{background-color:#6366f1e6;box-shadow:0 0 6px #6366f199}.resize-handle-debug-info{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none}@media(prefers-reduced-motion:reduce){.resize-handle{transition:none}}.column-debug-size{position:absolute;top:8px;right:12px;background:#1e40afd9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;pointer-events:none}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { ColumnInsertPanel } from "./drag-drop/ColumnInsertPanel";
|
|
|
5
5
|
export { debugLog, PanelSizeDisplay } from "./drag-drop/DebugComponents";
|
|
6
6
|
export { DebugControlPanel } from "./drag-drop/DebugControlPanel";
|
|
7
7
|
export { DropZoneDebugOverlay, InsertPlaceholder } from "./drag-drop/DebugOverlay";
|
|
8
|
+
export { PANEL_ACTION_ATTRIBUTE, SCROLL_ROOT_SELECTOR } from "./drag-drop/domHooks";
|
|
8
9
|
export type { ColumnConfig, ColumnLayoutState, UseColumnLayoutProps, UseColumnLayoutReturn } from "./drag-drop/hooks/useColumnLayout";
|
|
9
10
|
export { useColumnLayout } from "./drag-drop/hooks/useColumnLayout";
|
|
10
11
|
export { useCustomDragHandlers } from "./drag-drop/hooks/useCustomDragHandlers";
|
|
@@ -16,12 +17,18 @@ export { useNormalDragHandlers } from "./drag-drop/hooks/useNormalDragHandlers";
|
|
|
16
17
|
export { usePanelManagement } from "./drag-drop/hooks/usePanelManagement";
|
|
17
18
|
export type { UseResponsiveColumnsProps, UseResponsiveColumnsReturn } from "./drag-drop/hooks/useResponsiveColumns";
|
|
18
19
|
export { useResponsiveColumns } from "./drag-drop/hooks/useResponsiveColumns";
|
|
20
|
+
export type { DragDropLayoutLabelKey, DragDropLayoutLabels, LabelLanguage, ResolvedLabel } from "./drag-drop/labels";
|
|
21
|
+
export { DEFAULT_DRAG_DROP_LAYOUT_LABELS, TEMPLATE_PLACEHOLDERS } from "./drag-drop/labels";
|
|
19
22
|
export type { ResizableColumnProps, ResizeHandleProps } from "./drag-drop/ResizeHandle";
|
|
20
23
|
export { ResizableColumn, ResizeHandle } from "./drag-drop/ResizeHandle";
|
|
21
24
|
export { ResponsiveControl } from "./drag-drop/ResponsiveControl";
|
|
22
|
-
export type {
|
|
25
|
+
export type { TouchDragConfig } from "./drag-drop/touchDragConfig";
|
|
26
|
+
export { DEFAULT_TOUCH_DRAG_CONFIG } from "./drag-drop/touchDragConfig";
|
|
27
|
+
export type { ClickState, ColumnConfig as ColumnConfigType, CustomDragState, DebugConfig, DOMDragEvent, DOMMouseEvent, DragDropEventHandlers, DragDropHookReturn, DragDropState, DragDropStateUpdaters, DragMode, DragOverPosition, DragState, ElementWithResizeObserver, MousePosition, OriginalPanelPosition, PanelConfig, PanelDragHandle, PanelSizeInfo, ReactDragEvent, ReactMouseEvent, ResizeConfig, ScrollRootElement, UseDragDropColumnsReturn, } from "./drag-drop/types";
|
|
23
28
|
export { DEFAULT_DEBUG_CONFIG } from "./drag-drop/types";
|
|
24
29
|
export type { ColumnIdConfig } from "./drag-drop/utils/columnIdUtils";
|
|
25
30
|
export { createColumnIdMapping, DEFAULT_COLUMN_ID_CONFIG, generateColumnId, generateColumnIds, getNextColumnId, isValidColumnId, normalizeColumnPanels, parseColumnId, sortColumnIds } from "./drag-drop/utils/columnIdUtils";
|
|
26
31
|
export type { EdgeScrollConfig, ScrollVector } from "./drag-drop/utils/edgeScrollUtils";
|
|
27
32
|
export { calculateScrollVector, DEFAULT_EDGE_SCROLL_CONFIG, EdgeScrollManager, performScroll } from "./drag-drop/utils/edgeScrollUtils";
|
|
33
|
+
export type { PanelArrangement, PanelMove, PanelMoveKeyChord, PanelMoveShortcut, ShownPanelPlace } from "./drag-drop/utils/panelMoves";
|
|
34
|
+
export { availablePanelMoves, insertPanelAt, movePanelInColumns, PANEL_MOVE_SHORTCUTS, PANEL_MOVES, panelMoveOfKey, shownPanelPlace } from "./drag-drop/utils/panelMoves";
|