poe-svelte-ui-lib 1.49.0 → 1.50.0

package/dist/Dragging.README.md

@@ -72,3 +72,7 @@
 - При единственном элементе в `array` (`array.length == 1`) ручка визуально приглушена (`opacity-50`) и перетаскивание не запускается
 - Работает только с `MouseEvent` — нет отдельной поддержки touch/pointer-событий и клавиатурной перестановки (ручка фокусируема как `role="button"`, но `onkeydown` не обрабатывается — известное ограничение доступности)
 - `container`/`elementIndex`/`array` обязательны — компонент не проверяет их наличие и упадёт при обращении к `array.length` в классе, если `array` не передан
+
+## Вид перетаскивания
+
+Один на библиотеку и приложения — `dragStyle.ts` (`applyDragGhost`, `clearDragGhost`, `createDropPlaceholder`, экспортируются из пакета): перетаскиваемый элемент — фон с заметным оттенком акцента (30%), рамка акцентом и тень, курсор «захват»; место вставки — заливка мягким акцентом (`--accent-soft`) со штриховой рамкой акцентом. Тот же вид — у перетаскивания компонентов на холсте конструктора DevCloud.

package/dist/Dragging.svelte

@@ -2,6 +2,7 @@
   import { tick } from "svelte"
   import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
   import { twMerge } from "tailwind-merge"
+  import { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle"
 
   let dragState = $state({
     isDragging: false,
@@ -48,24 +49,19 @@
     const element = movedElement.cloneNode(true) as HTMLElement
     const rect = movedElement.getBoundingClientRect()
 
-    /* Создаем визуальный эффект перетаскивания */
+    /* Визуальный эффект перетаскивания — общий для библиотеки и приложений (dragStyle.ts) */
     element.id = "drag-element"
     element.style.position = "fixed"
     element.style.zIndex = "9999"
     element.style.minHeight = `${rect.height}px`
     element.style.pointerEvents = "none"
     element.style.width = `${rect.width}px`
-    element.style.background = "var(--field-color)"
-    element.style.padding = "0.25rem"
-    element.style.borderRadius = "1rem"
+    element.style.left = `${rect.left}px`
     element.style.top = `${rect.top}px`
+    applyDragGhost(element)
     movedElement.parentNode?.appendChild(element)
 
-    const placeholder = document.createElement("div")
-    placeholder.style.minHeight = `${rect.height}px`
-    placeholder.style.width = "100%"
-    placeholder.style.border = "2px dashed var(--blue-color)"
-    placeholder.style.borderRadius = "1rem"
+    const placeholder = createDropPlaceholder(rect.height)
     element.parentNode?.insertBefore(placeholder, movedElement)
 
     const [movedItem] = array.splice(elementIndex, 1)
@@ -127,6 +123,7 @@
 
     if (dragState.placeholderElement) dragState.placeholderElement.remove()
     if (dragState.ghostElement) dragState.ghostElement.remove()
+    clearDragGhost()
 
     dragState = {
       isDragging: false,

package/dist/dragStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const applyDragGhost: (element: HTMLElement) => void;
+export declare const clearDragGhost: (element?: HTMLElement | null) => void;
+export declare const createDropPlaceholder: (height: number) => HTMLElement;

package/dist/dragStyle.js

@@ -0,0 +1,35 @@
+/* $lib/dragStyle.ts — единый вид перетаскивания для библиотеки и приложений (списки Dragging, холст конструктора DevCloud):
+   перетаскиваемый элемент — фон с заметным оттенком акцента, рамка акцентом и тень; место вставки — заливка мягким акцентом со штриховой рамкой */
+const GHOST_STYLE = {
+    background: "color-mix(in srgb, var(--accent-color) 30%, var(--back-color))",
+    outline: "2px solid var(--accent-color)",
+    outlineOffset: "-2px",
+    boxShadow: "var(--elevation-3)",
+    borderRadius: "12px",
+    opacity: "1",
+};
+/* Оформить перетаскиваемый элемент; курсор «захват» — на всё время перетаскивания */
+export const applyDragGhost = (element) => {
+    Object.assign(element.style, GHOST_STYLE);
+    document.body.style.cursor = "grabbing";
+};
+/* Снять оформление перетаскивания с элемента (если он остаётся на странице) и вернуть курсор */
+export const clearDragGhost = (element) => {
+    if (element)
+        for (const key of Object.keys(GHOST_STYLE))
+            element.style[key] = "";
+    document.body.style.cursor = "";
+};
+/* Место вставки: заливка мягким акцентом и штриховая рамка акцентом */
+export const createDropPlaceholder = (height) => {
+    const placeholder = document.createElement("div");
+    Object.assign(placeholder.style, {
+        minHeight: `${height}px`,
+        width: "100%",
+        background: "var(--accent-soft)",
+        border: "2px dashed var(--accent-color)",
+        borderRadius: "12px",
+        boxSizing: "border-box",
+    });
+    return placeholder;
+};

package/dist/index.d.ts

@@ -54,5 +54,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IWidgetProps, type IWidgetWiFiProps, type IWidgetWiFiConfig, type IWidgetDeviceInfoProps, type IWidgetDeviceInfoConfig, type IWidgetFileSystemProps, type IWidgetFileSystemInfo, type IWidgetFileSystemFile, type IWidgetFileSystemUpload, type IWidgetStackInfoProps, type IWidgetStackInfo, type IWidgetStackInfoHeap, type IWidgetStackInfoTask, type IWidgetRGBStripProps, type IWidgetRGBStripConfig, type IWidgetPFDProps, type IWidgetPFDData, type IWidgetPFDLimits, type IWidgetMapProps, type IWidgetMapData, type IGraphProps, type IGraphDataObject, type IGraphHistoryPoint, type IGraphHistorySeries, type ITableHeader, type ITableText, type ITableSelect, type ITableButton, type ITableProgressBar, type ITableImage, type ITableContent, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -55,5 +55,6 @@ export * from "./locales/i18n";
 export * from "./locales/languages";
 export * from "./locales/localize";
 export { widgetAccentStyle } from "./widgetAccent";
+export { applyDragGhost, clearDragGhost, createDropPlaceholder } from "./dragStyle";
 export * from "./ModalStackStore";
 export {} from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.49.0",
+  "version": "1.50.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"