poe-svelte-ui-lib 1.0.6 → 1.0.7

package/dist/options.d.ts

@@ -3,19 +3,16 @@ export declare const optionsStore: import("svelte/store").Readable<{
         id: string;
         name: string;
         value: string;
-        class: string;
     }[];
     SHORT_ARGUMENT_OPTION: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     FULL_ARGUMENT_OPTION: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     INPUT_TYPE_OPTIONS: {
         id: string;
@@ -26,30 +23,25 @@ export declare const optionsStore: import("svelte/store").Readable<{
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     SELECT_VALUE_TYPE_OPTIONS: ({
         id: string;
         value: "text";
         name: string;
-        class: string;
     } | {
         id: string;
         value: "number";
         name: string;
-        class: string;
     })[];
     SLIDER_TYPE_OPTIONS: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     TEXTFIELD_SIZE_OPTIONS: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     COLOR_OPTIONS: {
         id: string;
@@ -57,22 +49,25 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         class: string;
     }[];
+    TEXT_COLOR_OPTIONS: {
+        id: string;
+        name: string;
+        value: string;
+        class: string;
+    }[];
     ALIGN_OPTIONS: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     HEIGHT_OPTIONS: {
         id: string;
         value: string;
         name: string;
-        class: string;
     }[];
     ACCORDION_TYPE_OPTIONS: {
         id: string;
-        value: string;
+        value: boolean;
         name: string;
-        class: string;
     }[];
 }>;

package/dist/options.js

@@ -7,20 +7,20 @@ function id() {
 export const optionsStore = derived(t, ($t) => {
     return {
         HEADER_OPTIONS: [
-            { id: id(), name: 'GET', value: 'GET', class: '!w-1/4' },
-            { id: id(), name: 'SET', value: 'SET', class: '!w-1/4' },
-            { id: id(), name: 'OK!', value: 'OK!', class: '!w-1/4' },
-            { id: id(), name: 'ER!', value: 'ER!', class: '!w-1/4' },
+            { id: id(), name: 'GET', value: 'GET' },
+            { id: id(), name: 'SET', value: 'SET' },
+            { id: id(), name: 'OK!', value: 'OK!' },
+            { id: id(), name: 'ER!', value: 'ER!' },
         ],
         SHORT_ARGUMENT_OPTION: [
-            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update'), class: '!w-1/3' },
-            { id: id(), value: 'Save', name: $t('constructor.props.action.save'), class: '!w-1/3' },
-            { id: id(), value: 'NoSend', name: $t('constructor.props.action.nosend'), class: '!w-1/3' },
+            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update') },
+            { id: id(), value: 'Save', name: $t('constructor.props.action.save') },
+            { id: id(), value: 'NoSend', name: $t('constructor.props.action.nosend') },
         ],
         FULL_ARGUMENT_OPTION: [
-            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update'), class: '!w-1/3' },
-            { id: id(), value: 'Save', name: $t('constructor.props.action.save'), class: '!w-1/3' },
-            { id: id(), value: '', name: $t('constructor.props.action.custom'), class: '!w-1/3' },
+            { id: id(), value: 'NoSave', name: $t('constructor.props.action.update') },
+            { id: id(), value: 'Save', name: $t('constructor.props.action.save') },
+            { id: id(), value: '', name: $t('constructor.props.action.custom') },
         ],
         INPUT_TYPE_OPTIONS: [
             { id: id(), value: 'text', name: $t('constructor.props.type.text') },
@@ -29,43 +29,54 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'text-area', name: $t('constructor.props.type.textarea') },
         ],
         SELECT_TYPE_OPTIONS: [
-            { id: id(), value: 'select', name: $t('constructor.props.type.select'), class: '!w-1/2' },
-            { id: id(), value: 'buttons', name: $t('constructor.props.type.buttons'), class: '!w-1/2' },
+            { id: id(), value: 'select', name: $t('constructor.props.type.select') },
+            { id: id(), value: 'buttons', name: $t('constructor.props.type.buttons') },
+            { id: id(), value: 'input', name: $t('constructor.props.type.selectput') },
         ],
         SELECT_VALUE_TYPE_OPTIONS: [
-            { id: id(), value: 'text', name: $t('constructor.props.valuetype.text'), class: '!w-1/2' },
-            { id: id(), value: 'number', name: $t('constructor.props.valuetype.number'), class: '!w-1/2' },
+            { id: id(), value: 'text', name: $t('constructor.props.valuetype.text') },
+            { id: id(), value: 'number', name: $t('constructor.props.valuetype.number') },
         ],
         SLIDER_TYPE_OPTIONS: [
-            { id: id(), value: 'single', name: $t('constructor.props.type.single'), class: '!w-1/2' },
-            { id: id(), value: 'range', name: $t('constructor.props.type.range'), class: '!w-1/2' },
+            { id: id(), value: 'single', name: $t('constructor.props.type.single') },
+            { id: id(), value: 'range', name: $t('constructor.props.type.range') },
         ],
         TEXTFIELD_SIZE_OPTIONS: [
-            { id: id(), value: 'small', name: $t('constructor.props.type.small'), class: '!w-1/3' },
-            { id: id(), value: 'medium', name: $t('constructor.props.type.medium'), class: '!w-1/3' },
-            { id: id(), value: 'xlarge', name: $t('constructor.props.type.xlarge'), class: '!w-1/3' },
+            { id: id(), value: 'small', name: $t('constructor.props.type.small') },
+            { id: id(), value: 'base', name: $t('constructor.props.type.base') },
+            { id: id(), value: 'large', name: $t('constructor.props.type.large') },
+            { id: id(), value: 'huge', name: $t('constructor.props.type.huge') },
+            { id: id(), value: 'massive', name: $t('constructor.props.type.massive') },
         ],
         COLOR_OPTIONS: [
-            { id: id(), name: '', value: 'bg-gray', class: '!w-1/6 bg-gray' },
-            { id: id(), name: '', value: 'bg-max', class: '!w-1/6 bg-max' },
-            { id: id(), name: '', value: 'bg-red', class: '!w-1/6 bg-red' },
-            { id: id(), name: '', value: 'bg-yellow', class: '!w-1/6 bg-yellow' },
-            { id: id(), name: '', value: 'bg-green', class: '!w-1/6 bg-green' },
-            { id: id(), name: '', value: 'bg-blue', class: '!w-1/6 bg-blue' },
+            { id: id(), name: '', value: 'bg-gray', class: 'bg-gray' },
+            { id: id(), name: '', value: 'bg-max', class: 'bg-max' },
+            { id: id(), name: '', value: 'bg-red', class: 'bg-red' },
+            { id: id(), name: '', value: 'bg-yellow', class: 'bg-yellow' },
+            { id: id(), name: '', value: 'bg-green', class: 'bg-green' },
+            { id: id(), name: '', value: 'bg-blue', class: 'bg-blue' },
+        ],
+        TEXT_COLOR_OPTIONS: [
+            { id: id(), name: '', value: 'text-[#333] dark:text-[#e2e3e7]', class: 'bg-[var(--shadow-color)] dark:bg-[#e2e3e7] ' },
+            { id: id(), name: '', value: 'text-red-500 dark:text-red-400', class: 'bg-red-500 dark:bg-red-400' },
+            { id: id(), name: '', value: 'text-yellow-500 dark:text-yellow-400', class: 'bg-yellow-500 dark:bg-yellow-400' },
+            { id: id(), name: '', value: 'text-green-500 dark:text-green-400', class: 'bg-green-500 dark:bg-green-400' },
+            { id: id(), name: '', value: 'text-blue-500 dark:text-blue-400', class: 'bg-blue-500 dark:bg-blue-400' },
+            { id: id(), name: '', value: 'text-gray-500 dark:text-gray-400', class: 'bg-gray-500 dark:bg-gray-400' },
         ],
         ALIGN_OPTIONS: [
-            { id: id(), value: 'text-left', name: $t('constructor.props.align.left'), class: '!w-1/3' },
-            { id: id(), value: 'text-center', name: $t('constructor.props.align.center'), class: '!w-1/3' },
-            { id: id(), value: 'text-right', name: $t('constructor.props.align.right'), class: '!w-1/3' },
+            { id: id(), value: 'text-left', name: $t('constructor.props.align.left') },
+            { id: id(), value: 'text-center', name: $t('constructor.props.align.center') },
+            { id: id(), value: 'text-right', name: $t('constructor.props.align.right') },
         ],
         HEIGHT_OPTIONS: [
-            { id: id(), value: 'py-1', name: $t('constructor.props.height.small'), class: '!w-1/3' },
-            { id: id(), value: 'py-2', name: $t('constructor.props.height.medium'), class: '!w-1/3' },
-            { id: id(), value: 'py-3', name: $t('constructor.props.height.large'), class: '!w-1/3' },
+            { id: id(), value: 'py-1', name: $t('constructor.props.height.small') },
+            { id: id(), value: 'py-2', name: $t('constructor.props.height.medium') },
+            { id: id(), value: 'py-3', name: $t('constructor.props.height.large') },
         ],
         ACCORDION_TYPE_OPTIONS: [
-            { id: id(), value: 'main', name: $t('constructor.props.type.main'), class: '!w-1/2' },
-            { id: id(), value: 'sub', name: $t('constructor.props.type.sub'), class: '!w-1/2' },
+            { id: id(), value: false, name: $t('constructor.props.type.main') },
+            { id: id(), value: true, name: $t('constructor.props.type.sub') },
         ],
     };
 });

package/dist/types.d.ts

@@ -1,5 +1,8 @@
 import type { Component, Snippet } from 'svelte';
 import type { Writable } from 'svelte/store';
+export declare const updateProperty: (path: string, value: string | number | boolean | object | string[], component: UIComponent & {
+    properties: Partial<UIComponent["properties"]>;
+}, onPropertyChange: (value: string | object) => void) => void;
 export interface UIComponent {
     id: string;
     type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table';
@@ -21,22 +24,15 @@ export interface IUIComponentHandler {
     Variables?: string[];
 }
 export interface IButtonProps {
-    id?: {
-        value?: string;
-        name?: string;
-    };
+    id?: string;
     wrapperClass?: string;
-    label?: {
-        name?: string;
-        class?: string;
-    };
     componentClass?: string;
-    name?: string;
-    icon?: {
-        component?: ConstructorOfATypedSvelteComponent | null;
-        properties?: Record<string, unknown>;
+    disabled?: boolean;
+    content?: {
+        name?: string;
+        info?: string;
+        icon?: ConstructorOfATypedSvelteComponent | null;
     };
-    info?: string;
     keyBind?: {
         key?: string;
         ctrlKey?: boolean;
@@ -44,78 +40,67 @@ export interface IButtonProps {
         altKey?: boolean;
         metaKey?: boolean;
     };
-    disabled?: boolean;
     eventHandler?: IUIComponentHandler;
     onClick?: () => void;
 }
 export interface IAccordionProps {
-    id: {
-        value?: string;
-        name?: string;
+    id?: string;
+    isOpen: boolean;
+    outline?: boolean;
+    wrapperClass?: string;
+    size?: {
+        height?: number;
+        width?: number;
     };
     label?: {
         name?: string;
         class?: string;
-        align?: 'left' | 'center' | 'right';
+        icon?: ConstructorOfATypedSvelteComponent | null;
     };
-    icon?: {
-        svg?: string;
-        component?: ConstructorOfATypedSvelteComponent | null;
-    };
-    isOpen: boolean;
-    componentClass?: string;
-    type?: 'main' | 'sub';
-    components?: UIComponent[];
-    image?: string;
     children?: Snippet;
+    image?: string;
 }
 export interface IInputProps {
-    id?: {
-        value?: string;
-        name?: string;
-    };
+    id?: string;
+    type?: 'text' | 'password' | 'number' | 'text-area';
     wrapperClass?: string;
     label?: {
         name?: string;
         class?: string;
     };
+    componentClass?: string;
     disabled?: boolean;
     readonly?: boolean;
     value?: string | number;
-    type?: 'text' | 'password' | 'number' | 'text-area';
-    autocomplete?: 'on' | 'off' | 'given-name' | 'family-name' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'country-name' | 'address-level1' | 'address-level2' | 'street-address' | 'postal-code' | null;
-    componentClass?: string;
     maxlength?: number;
+    textareaRows?: number;
+    placeholder?: string;
     number?: {
         minNum?: number;
         maxNum?: number;
         step?: number;
     };
-    textareaRows?: number;
-    regExp?: string | RegExp;
     help?: {
-        placeholder?: string;
         info?: string;
+        copyButton?: boolean;
+        regExp?: string | RegExp;
+        autocomplete?: 'on' | 'off' | 'given-name' | 'family-name' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'country-name' | 'address-level1' | 'address-level2' | 'street-address' | 'postal-code' | null;
     };
-    copyButton?: boolean;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: string | number) => void;
 }
 export interface ISelectProps<T = unknown> {
-    id?: {
-        value?: string;
-        name?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     disabled?: boolean;
     label?: {
         name?: string;
         class?: string;
     };
+    componentClass?: string;
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
-    placeholder?: string;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -124,35 +109,24 @@ export interface ISelectOption<T = unknown> {
     value?: T;
     name?: string;
     class?: string;
-    icon?: {
-        component?: ConstructorOfATypedSvelteComponent | null;
-        properties?: Record<string, unknown>;
-    };
     disabled?: boolean;
 }
 export interface ISwitchProps {
-    id?: {
-        value?: string;
-        name?: string;
-    };
+    id?: string;
+    height?: string;
     wrapperClass?: string;
     disabled?: boolean;
     label?: {
         name?: string;
         captionLeft?: string;
         captionRight?: string;
-        class?: string;
     };
-    height?: string;
     value?: number;
     eventHandler?: IUIComponentHandler;
     onChange?: (value: number) => void;
 }
 export interface IColorPickerProps {
-    id?: {
-        name?: string;
-        value?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     label?: {
         name?: string;
@@ -163,10 +137,7 @@ export interface IColorPickerProps {
     onChange?: (value: number[]) => void;
 }
 export interface ISliderProps {
-    id?: {
-        name?: string;
-        value?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     label?: {
         name?: string;
@@ -186,27 +157,23 @@ export interface ISliderProps {
 export interface ITextFieldProps {
     id?: string;
     wrapperClass?: string;
-    label?: {
+    background?: boolean;
+    content?: {
         name?: string;
-        bold?: boolean;
-        italic?: boolean;
-        color?: string;
+        class?: string;
+        size?: 'small' | 'base' | 'large' | 'huge' | 'massive';
     };
-    type?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'huge' | 'massive';
 }
 export interface IProgressBarProps {
-    id?: {
-        name?: string;
-        value?: string;
-    };
+    id?: string;
     label?: {
         name?: string;
         class?: string;
     };
-    value?: boolean | string | number | number[] | object | null;
-    range?: {
-        min?: number;
-        max?: number;
+    value?: number | null;
+    number?: {
+        minNum?: number;
+        maxNum?: number;
         units?: string;
     };
     wrapperClass?: string;
@@ -214,33 +181,30 @@ export interface IProgressBarProps {
 export interface IGraphDataObject {
     name: string;
     value: number;
-    timeshamp?: Date;
-    color?: string;
+    timestamp?: Date;
 }
 export interface IGraphProps {
-    id?: {
-        value: string;
-        name?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     label?: {
         name?: string;
         class?: string;
     };
     streamingData?: {
-        data: IGraphDataObject[] | string | null;
+        data: IGraphDataObject[] | null;
         timestamp?: number;
     };
     isTest?: boolean;
 }
 export interface ITableHeader<T extends object> {
-    wrapperClass?: string;
-    label?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
     key: keyof T;
-    width?: string;
     sortable?: boolean;
+    width?: string;
     align?: 'left' | 'center' | 'right';
-    cellClass?: string;
     overflow?: {
         truncated?: boolean;
         formatting?: (text: string) => string;
@@ -263,10 +227,7 @@ export interface ITableHeader<T extends object> {
     };
 }
 export interface ITableProps<T extends object> {
-    id?: {
-        value?: string;
-        name?: string;
-    };
+    id?: string;
     wrapperClass?: string;
     label?: {
         name?: string;

package/dist/types.js

@@ -1 +1,13 @@
-export {};
+export const updateProperty = (path, value, component, onPropertyChange) => {
+    const newProperties = JSON.parse(JSON.stringify(component.properties));
+    const parts = path.split('.');
+    let obj = newProperties;
+    for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        if (!obj[part])
+            obj[part] = {};
+        obj = obj[part];
+    }
+    obj[parts[parts.length - 1]] = value;
+    onPropertyChange(newProperties);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,15 +33,19 @@
   "dependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
     "@tailwindcss/vite": "^4.1.14",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.44.0",
+    "@sveltejs/kit": "^2.46.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "publint": "^0.3.14",
-    "svelte": "^5.39.9",
+    "svelte": "^5.39.11",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.1.9",
     "vite-plugin-compression": "^0.5.1"

package/dist/Loader.svelte

@@ -1,12 +0,0 @@
-<!-- $lib/ElementsUI/Loader.svelte -->
-<script lang="ts">
-  import LoaderRotate from './libIcons/LoaderRotate.svelte'
-
-  let { show = false } = $props()
-</script>
-
-{#if show}
-  <div class="absolute inset-0 z-50 flex items-center justify-center">
-    <LoaderRotate />
-  </div>
-{/if}

package/dist/Loader.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const Loader: import("svelte").Component<{
-    show?: boolean;
-}, {}, "">;
-type Loader = ReturnType<typeof Loader>;
-export default Loader;

package/dist/MessageModal.svelte

@@ -1,54 +0,0 @@
-<!-- $lib/ElementsUI/MessageModal.svelte -->
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { fly } from 'svelte/transition'
-
-  interface Props {
-    message: { id: number; text: string }
-    onCLick: (messageId: number) => {}
-  }
-
-  let { message, onCLick }: Props = $props()
-
-  const getMessageStyle = (text: string) => {
-    if (text.startsWith('ERR: ')) return 'text-red-500'
-    if (text.startsWith('OK: ')) return 'text-lime-500'
-    if (text.startsWith('WR: ')) return 'text-yellow-500'
-    return 'text-gray-400'
-  }
-
-  const getMessageText = (text: string) => {
-    if (text.startsWith('ERR: ')) return text.replace('ERR: ', '')
-    if (text.startsWith('OK: ')) return text.replace('OK: ', '')
-    if (text.startsWith('WR: ')) return text.replace('WR: ', '')
-    return text
-  }
-
-  let progress = $state(100)
-  onMount(() => {
-    const duration = 5000
-    const interval = 50
-    const step = (interval / duration) * 100
-    const timer = setInterval(() => {
-      progress -= step
-      if (progress <= 0) {
-        clearInterval(timer)
-        onCLick(message.id)
-      }
-    }, interval)
-  })
-</script>
-
-<div
-  transition:fly={{ y: 5, duration: 250 }}
-  class="my-1 flex flex-col rounded-2xl border border-[var(--border-color)] bg-[var(--back-color)] px-4 py-2 shadow-lg"
->
-  <div class="flex items-center justify-between">
-    <p class={`font-semibold ${getMessageStyle(message.text)}`}>{getMessageText(message.text)}</p>
-    <button class="ml-2 cursor-pointer text-2xl" onclick={() => onCLick(message.id)}>&times;</button>
-  </div>
-
-  <div class="mt-2 h-2 w-full overflow-hidden rounded bg-gray-200">
-    <div class="h-full bg-[var(--green-color)]" style={`width: ${progress}%`}></div>
-  </div>
-</div>

package/dist/MessageModal.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    message: {
-        id: number;
-        text: string;
-    };
-    onCLick: (messageId: number) => {};
-}
-declare const MessageModal: import("svelte").Component<Props, {}, "">;
-type MessageModal = ReturnType<typeof MessageModal>;
-export default MessageModal;