poe-svelte-ui-lib 1.15.4 → 1.16.1

package/dist/Divider/Divider.svelte

@@ -0,0 +1,17 @@
+<!-- $lib/ElementsUI/Divider.svelte -->
+<script lang="ts">
+  import { twMerge } from "tailwind-merge"
+  import type { IDividerProps } from "../types"
+
+  let { id = crypto.randomUUID(), wrapperClass = "", type = "line", size = 16, anchor = "center" }: IDividerProps = $props()
+
+  const anchorClass = { top: "justify-start", center: "justify-center", bottom: "justify-end" } as const
+</script>
+
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`flex h-full w-full flex-col ${anchorClass[anchor]}`, wrapperClass)}>
+  <div class="flex w-full items-center" style="height: {size}px;">
+    {#if type === "line"}
+      <div class="w-full border-t border-(--bg-color)"></div>
+    {/if}
+  </div>
+</div>

package/dist/Divider/Divider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDividerProps } from "../types";
+declare const Divider: import("svelte").Component<IDividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/Divider/DividerProps.svelte

@@ -0,0 +1,81 @@
+<!-- $lib/ElementsUI/DividerProps.svelte -->
+<script lang="ts">
+  import { T } from "../locales/i18n"
+  import { updateProperty, type IDividerProps, type IUIComponentHandler, type UIComponent } from "../types"
+  import * as UI from ".."
+  import { optionsStore } from "../options"
+  import CommonSnippets from "../CommonSnippets.svelte"
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IDividerProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
+    forConstructor?: boolean
+  }>()
+
+  let currentType = $derived($optionsStore.DIVIDER_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
+  let currentAnchor = $derived($optionsStore.DIVIDER_ANCHOR_OPTIONS.find((a) => a.value === component.properties.anchor))
+</script>
+
+{#snippet DividerType()}
+  <UI.Select
+    label={{ name: $T("constructor.props.divider.type") }}
+    type="buttons"
+    value={currentType}
+    options={$optionsStore.DIVIDER_TYPE_OPTIONS}
+    onUpdate={(item) => updateProperty("type", (item as UI.IOption).value as string, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#snippet DividerAnchor()}
+  <UI.Select
+    label={{ name: $T("constructor.props.divider.anchor") }}
+    type="buttons"
+    value={currentAnchor}
+    options={$optionsStore.DIVIDER_ANCHOR_OPTIONS}
+    onUpdate={(item) => updateProperty("anchor", (item as UI.IOption).value as string, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#snippet DividerSize()}
+  <UI.Input
+    label={{ name: $T("constructor.props.size") }}
+    value={component.properties.size}
+    onUpdate={(value) => updateProperty("size", value as number, component, onPropertyChange)}
+    number={{ minNum: 0, maxNum: 200, step: 1 }}
+    type="number"
+  />
+{/snippet}
+
+{#if forConstructor}
+  <div class="flex items-start justify-center gap-8">
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render DividerType()}
+      {@render DividerAnchor()}
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render DividerSize()}
+    </div>
+  </div>
+{:else}
+  <div class="flex items-start justify-center gap-8">
+    <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render DividerType()}
+      {@render DividerAnchor()}
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      {@render DividerSize()}
+    </div>
+  </div>
+{/if}

package/dist/Divider/DividerProps.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type IDividerProps, type IUIComponentHandler, type UIComponent } from "../types";
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IDividerProps>;
+    };
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
+    forConstructor?: boolean;
+};
+declare const DividerProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type DividerProps = ReturnType<typeof DividerProps>;
+export default DividerProps;

package/dist/Graph/Graph.svelte

@@ -154,9 +154,7 @@
         drawAllGraphs()
       }, selectedRefreshRate)
     } else if (selectedRefreshRate == 0 && !isTest) {
-      /* AUTO: streamingData не несёт признак "это новый пакет" (метки времени тут нет —
-         DeviceStore хранит только последнее значение), поэтому опрашиваем каждые 10мс и рисуем
-         точку только когда сами значения реально изменились, а не на каждый тик поллинга. */
+      /* AUTO: streamingData не несёт признак "новый пакет" — опрашиваем каждые 10мс, рисуем точку только при реальном изменении значений */
       intervalId = setInterval(() => {
         if (!streamingData.data || streamingData.data.length === 0) return
         const newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
@@ -210,9 +208,7 @@
     const maxX = allPoints.length ? Math.max(...allPoints.map((p) => p.x)) : 1
     const timeSpan = maxX - minX || 1
 
-    /* Оба режима — авто-масштаб по фактическим данным (±10% отступ, не обязательно симметрично относительно нуля):
-       в статическом считается разово по всему массиву, в живом — используется сглаженный liveYRange
-       (обновляется отдельно, в updateLiveYRange, чтобы не дёргаться на каждый кадр/mousemove) */
+    /* Авто-масштаб по данным (±10%): статический — разово по массиву, живой — через сглаженный liveYRange (updateLiveYRange) */
     let yMin: number
     let yMax: number
     if (isHistoryMode) {

package/dist/Table/Table.svelte

@@ -151,8 +151,7 @@
     }
   }
 
-  /* Для работы этой проверки в описании столбцов таблицы нужно явно указать что строка будет пустая при отсутствии иконки в БД -
-     src: (row) => (row.icon ? `data:image/png;base64,${row.icon}` : '') */
+  /* Требует явного src: (row) => row.icon ? `data:image/png;base64,${row.icon}` : '' в описании столбца */
   const hasImage = (column: ITableHeader<any>, row: any, index: number): boolean => {
     let content = (column.content as ITableContent<any>[])?.[index]
     const src = content?.type === "image" && typeof content.data.src === "function" ? content.data.src(row) : (content?.data as ITableImage<object>).src

package/dist/VideoViewer/VideoViewer.svelte

@@ -121,8 +121,7 @@
     }
   })
 
-  /* Remote-режим: кадр приходит извне через проп frame — компонент только рендерит, WS не открывает.
-     object URL создаётся заново на каждый кадр и отзывается перед следующим (и при размонтировании) */
+  /* Remote-режим: кадр приходит через проп frame, object URL создаётся заново на каждый кадр и отзывается перед следующим */
   let remoteImgSrc = $state<string | null>(null)
   $effect(() => {
     if (!isRemote || !frame) {

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { default as ButtonProps } from "./Button/ButtonProps.svelte";
 export { default as Carousel } from "./Carousel/Carousel.svelte";
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte";
 export { default as ColorPickerProps } from "./ColorPicker/ColorPickerProps.svelte";
+export { default as Divider } from "./Divider/Divider.svelte";
+export { default as DividerProps } from "./Divider/DividerProps.svelte";
 export { default as Dragging } from "./Dragging.svelte";
 export { default as FileAttach } from "./FileAttach/FileAttach.svelte";
 export { default as FileAttachProps } from "./FileAttach/FileAttachProps.svelte";
@@ -38,4 +40,4 @@ export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, } from "./types";
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, } from "./types";

package/dist/index.js

@@ -6,6 +6,8 @@ export { default as ButtonProps } from "./Button/ButtonProps.svelte";
 export { default as Carousel } from "./Carousel/Carousel.svelte";
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte";
 export { default as ColorPickerProps } from "./ColorPicker/ColorPickerProps.svelte";
+export { default as Divider } from "./Divider/Divider.svelte";
+export { default as DividerProps } from "./Divider/DividerProps.svelte";
 export { default as Dragging } from "./Dragging.svelte";
 export { default as FileAttach } from "./FileAttach/FileAttach.svelte";
 export { default as FileAttachProps } from "./FileAttach/FileAttachProps.svelte";

package/dist/locales/translations.d.ts

@@ -1,9 +1,3 @@
-/**
- * Значения для каждого ключа хранятся одним кортежем [ru, en, zh] — это гарантирует,
- * что ключ не может существовать в одном языке и отсутствовать в другом:
- * TypeScript требует заполнить все три элемента кортежа при добавлении новой строки.
- * Порядок элементов кортежа жёстко привязан к порядку языков в LOCALES (see i18n.ts).
- */
 export type LanguageCode = "ru" | "en" | "zh";
 declare const translations: Record<string, [string, string, string]>;
 export default translations;

package/dist/locales/translations.js

@@ -164,6 +164,13 @@ const translations = {
     "constructor.props.info.bottom": ["Внизу", "Bottom", "下方"],
     "constructor.props.info.left": ["Слева", "Left", "左侧"],
     "constructor.props.info.right": ["Справа", "Right", "右侧"],
+    "constructor.props.divider.type": ["Тип разделителя", "Divider type", "分隔线类型"],
+    "constructor.props.divider.type.line": ["Полоса", "Line", "线条"],
+    "constructor.props.divider.type.empty": ["Пустота", "Empty", "空白"],
+    "constructor.props.divider.anchor": ["Привязка", "Anchor", "对齐位置"],
+    "constructor.props.divider.anchor.top": ["К верху", "To top", "顶部"],
+    "constructor.props.divider.anchor.center": ["По центру", "Center", "居中"],
+    "constructor.props.divider.anchor.bottom": ["К низу", "To bottom", "底部"],
     "constructor.props.disabled": ["Отключить", "Disable", "禁用"],
     "constructor.props.readonly": ["Только чтение", "Read only", "只读"],
     "constructor.props.istest": ["Тестовые данные", "Test data", "测试数据"],

package/dist/options.d.ts

@@ -100,6 +100,16 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    DIVIDER_TYPE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    DIVIDER_ANCHOR_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     FITMODE_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -144,6 +144,15 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), value: "file", name: $T("constructor.props.type.file") },
             { id: id(), value: "image", name: $T("constructor.props.type.image") },
         ],
+        DIVIDER_TYPE_OPTIONS: [
+            { id: id(), value: "line", name: $T("constructor.props.divider.type.line") },
+            { id: id(), value: "empty", name: $T("constructor.props.divider.type.empty") },
+        ],
+        DIVIDER_ANCHOR_OPTIONS: [
+            { id: id(), value: "top", name: $T("constructor.props.divider.anchor.top") },
+            { id: id(), value: "center", name: $T("constructor.props.divider.anchor.center") },
+            { id: id(), value: "bottom", name: $T("constructor.props.divider.anchor.bottom") },
+        ],
         FITMODE_OPTIONS: [
             { id: id(), value: "cover", name: $T("constructor.props.type.cover") },
             { id: id(), value: "contain", name: $T("constructor.props.type.contain") },

package/dist/types.d.ts

@@ -16,10 +16,10 @@ export declare const updateComponent: (component: UIComponent, updates: Partial<
 }>) => {
     access: "full" | "viewOnly" | "hidden" | undefined;
     name: string | undefined;
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
     eventHandler: IUIComponentHandler | undefined;
     id: string;
-    type: "Accordion" | "Button" | "ColorPicker" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
     position: Required<Position>;
     parentId: string;
 };
@@ -27,8 +27,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: "full" | "viewOnly" | "hidden";
-    type: "Accordion" | "Button" | "ColorPicker" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -111,6 +111,13 @@ export interface IColorPickerProps {
     readonly?: boolean;
     onChange?: (value: number[]) => void;
 }
+export interface IDividerProps {
+    id?: string;
+    wrapperClass?: string;
+    type?: "line" | "empty";
+    size?: number;
+    anchor?: "top" | "center" | "bottom";
+}
 export interface IFileAttachProps {
     id?: string;
     wrapperClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.15.4",
+  "version": "1.16.1",
   "license": "MIT",
   "type": "module",
   "scripts": {