poe-svelte-ui-lib 1.0.5 → 1.0.7

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,77 +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;
+        icon?: ConstructorOfATypedSvelteComponent | null;
     };
-    icon?: {
-        component?: ConstructorOfATypedSvelteComponent | null;
-        properties?: Record<string, unknown>;
-    };
-    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;
 }
@@ -123,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;
@@ -162,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;
@@ -183,32 +155,25 @@ export interface ISliderProps {
     onUpdate?: (value: number | [number, number]) => void;
 }
 export interface ITextFieldProps {
-    id?: {
-        name?: string;
-        value?: string;
-    };
+    id?: string;
     wrapperClass?: string;
-    label?: {
+    background?: boolean;
+    content?: {
         name?: string;
         class?: string;
+        size?: 'small' | 'base' | 'large' | 'huge' | 'massive';
     };
-    type?: 'small' | 'medium' | 'xlarge';
-    bold?: boolean;
-    italic?: boolean;
 }
 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;
@@ -216,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;
@@ -265,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.5",
+  "version": "1.0.7",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,16 +33,21 @@
   "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.43.7",
+    "@sveltejs/kit": "^2.46.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "publint": "^0.3.13",
-    "svelte": "^5.39.8",
+    "publint": "^0.3.14",
+    "svelte": "^5.39.11",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.9"
+    "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;