poe-svelte-ui-lib 1.15.5 → 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/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.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.5",
+  "version": "1.16.1",
   "license": "MIT",
   "type": "module",
   "scripts": {