poe-svelte-ui-lib 0.2.0 → 0.3.0

package/dist/options.js

@@ -0,0 +1,71 @@
+// $lib/ElementsUI/options.ts
+import { derived } from 'svelte/store';
+import { t } from './locales/i18n';
+function id() {
+    return crypto.randomUUID();
+}
+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' },
+        ],
+        SHORT_ARGUMENT_OPTION: [
+            { id: id(), value: 'NoSave', name: $t('service.constructor.props.action.update'), class: '!w-1/3' },
+            { id: id(), value: 'Save', name: $t('service.constructor.props.action.save'), class: '!w-1/3' },
+            { id: id(), value: 'NoSend', name: $t('service.constructor.props.action.nosend'), class: '!w-1/3' },
+        ],
+        FULL_ARGUMENT_OPTION: [
+            { id: id(), value: 'NoSave', name: $t('service.constructor.props.action.update'), class: '!w-1/3' },
+            { id: id(), value: 'Save', name: $t('service.constructor.props.action.save'), class: '!w-1/3' },
+            { id: id(), value: '', name: $t('service.constructor.props.action.custom'), class: '!w-1/3' },
+        ],
+        INPUT_TYPE_OPTIONS: [
+            { id: id(), value: 'text', name: $t('service.constructor.props.type.text') },
+            { id: id(), value: 'password', name: $t('service.constructor.props.type.password') },
+            { id: id(), value: 'number', name: $t('service.constructor.props.type.number') },
+            { id: id(), value: 'text-area', name: $t('service.constructor.props.type.textarea') },
+        ],
+        SELECT_TYPE_OPTIONS: [
+            { id: id(), value: 'select', name: $t('service.constructor.props.type.select'), class: '!w-1/2' },
+            { id: id(), value: 'buttons', name: $t('service.constructor.props.type.buttons'), class: '!w-1/2' },
+        ],
+        SELECT_VALUE_TYPE_OPTIONS: [
+            { id: id(), value: 'text', name: $t('service.constructor.props.valuetype.text'), class: '!w-1/2' },
+            { id: id(), value: 'number', name: $t('service.constructor.props.valuetype.number'), class: '!w-1/2' },
+        ],
+        SLIDER_TYPE_OPTIONS: [
+            { id: id(), value: 'single', name: $t('service.constructor.props.type.single'), class: '!w-1/2' },
+            { id: id(), value: 'range', name: $t('service.constructor.props.type.range'), class: '!w-1/2' },
+        ],
+        TEXTFIELD_SIZE_OPTIONS: [
+            { id: id(), value: 'small', name: $t('service.constructor.props.type.small'), class: '!w-1/3' },
+            { id: id(), value: 'medium', name: $t('service.constructor.props.type.medium'), class: '!w-1/3' },
+            { id: id(), value: 'xlarge', name: $t('service.constructor.props.type.xlarge'), class: '!w-1/3' },
+        ],
+        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' },
+        ],
+        ALIGN_OPTIONS: [
+            { id: id(), value: 'text-left', name: $t('service.constructor.props.align.left'), class: '!w-1/3' },
+            { id: id(), value: 'text-center', name: $t('service.constructor.props.align.center'), class: '!w-1/3' },
+            { id: id(), value: 'text-right', name: $t('service.constructor.props.align.right'), class: '!w-1/3' },
+        ],
+        HEIGHT_OPTIONS: [
+            { id: id(), value: 'py-1', name: $t('service.constructor.props.height.small'), class: '!w-1/3' },
+            { id: id(), value: 'py-2', name: $t('service.constructor.props.height.medium'), class: '!w-1/3' },
+            { id: id(), value: 'py-3', name: $t('service.constructor.props.height.large'), class: '!w-1/3' },
+        ],
+        ACCORDION_TYPE_OPTIONS: [
+            { id: id(), value: 'main', name: $t('service.constructor.props.type.main'), class: '!w-1/2' },
+            { id: id(), value: 'sub', name: $t('service.constructor.props.type.sub'), class: '!w-1/2' },
+        ],
+    };
+});

package/dist/types.d.ts

@@ -0,0 +1,284 @@
+import type { Component, Snippet } from 'svelte';
+import type { Writable } from 'svelte/store';
+export interface UIComponent {
+    id: string;
+    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table';
+    component: Component<IButtonProps> | Component<IInputProps> | Component<ISelectProps> | Component<ISwitchProps> | Component<IColorPickerProps> | Component<ISliderProps> | Component<ITextFieldProps> | Component<IProgressBarProps> | Component<IGraphProps> | Component<ITableProps<object>> | null;
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object>;
+    position: Position;
+    parentId: string;
+}
+export interface Position {
+    row: number;
+    col: number;
+    width: number;
+    height: number;
+}
+export interface IUIComponentHandler {
+    Header?: string;
+    Argument?: string;
+    Value?: string;
+    Variables?: string[];
+}
+export interface IButtonProps {
+    id?: {
+        value?: string;
+        name?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    componentClass?: string;
+    name?: string;
+    icon?: {
+        component?: ConstructorOfATypedSvelteComponent | null;
+        properties?: Record<string, unknown>;
+    };
+    info?: string;
+    keyBind?: {
+        key?: string;
+        ctrlKey?: boolean;
+        shiftKey?: boolean;
+        altKey?: boolean;
+        metaKey?: boolean;
+    };
+    disabled?: boolean;
+    eventHandler?: IUIComponentHandler;
+    onClick?: () => void;
+}
+export interface IAccordionProps {
+    id?: {
+        value?: string;
+        name?: string;
+    };
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    isOpen: boolean;
+    componentClass?: string;
+    type?: 'main' | 'sub';
+    components?: UIComponent[];
+    image?: string;
+    children?: Snippet;
+}
+export interface IInputProps {
+    id?: {
+        value?: string;
+        name?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: 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;
+    number?: {
+        minNum?: number;
+        maxNum?: number;
+        step?: number;
+    };
+    textareaRows?: number;
+    regExp?: string | RegExp;
+    help?: {
+        placeholder?: string;
+        info?: string;
+    };
+    copyButton?: boolean;
+    eventHandler?: IUIComponentHandler;
+    onUpdate?: (value: string | number) => void;
+}
+export interface ISelectProps<T = unknown> {
+    id?: {
+        value?: string;
+        name?: string;
+    };
+    wrapperClass?: string;
+    disabled?: boolean;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    type?: 'select' | 'buttons' | 'input';
+    value?: ISelectOption<T> | null;
+    options?: ISelectOption<T>[];
+    eventHandler?: IUIComponentHandler;
+    onUpdate?: (value: ISelectOption<T>) => void;
+}
+export interface ISelectOption<T = unknown> {
+    id: string;
+    value?: T;
+    name?: string;
+    class?: string;
+    icon?: {
+        component?: ConstructorOfATypedSvelteComponent | null;
+        properties?: Record<string, unknown>;
+    };
+    disabled?: boolean;
+}
+export interface ISwitchProps {
+    id?: {
+        value?: string;
+        name?: 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;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    value?: number[];
+    eventHandler?: IUIComponentHandler;
+    onChange?: (value: number[]) => void;
+}
+export interface ISliderProps {
+    id?: {
+        name?: string;
+        value?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    value?: number | [number, number];
+    type?: 'single' | 'range';
+    number?: {
+        minNum: number;
+        maxNum: number;
+        step: number;
+    };
+    disabled?: boolean;
+    eventHandler?: IUIComponentHandler;
+    onUpdate?: (value: number | [number, number]) => void;
+}
+export interface ITextFieldProps {
+    id?: {
+        name?: string;
+        value?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    type?: 'small' | 'medium' | 'xlarge';
+    bold?: boolean;
+    italic?: boolean;
+}
+export interface IProgressBarProps {
+    id?: {
+        name?: string;
+        value?: string;
+    };
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    value?: boolean | string | number | number[] | object | null;
+    range?: {
+        min?: number;
+        max?: number;
+        units?: string;
+    };
+    wrapperClass?: string;
+}
+export interface IGraphDataObject {
+    name: string;
+    value: number;
+    timeshamp?: Date;
+    color?: string;
+}
+export interface IGraphProps {
+    id?: {
+        value: string;
+        name?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    streamingData?: {
+        data: IGraphDataObject[] | string | null;
+        timestamp?: number;
+    };
+    isTest?: boolean;
+}
+export interface ITableHeader<T extends object> {
+    wrapperClass?: string;
+    label?: string;
+    key: keyof T;
+    width?: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    cellClass?: string;
+    overflow?: {
+        truncated?: boolean;
+        formatting?: (text: string) => string;
+        copy?: boolean;
+        modal?: boolean;
+    };
+    buttons?: {
+        name: string | ((row: T) => string);
+        class?: string | ((row: T) => string);
+        eventHandler?: IUIComponentHandler;
+        onClick?: (row: T) => void;
+    }[];
+    image?: {
+        src: string | ((row: T) => string);
+        alt?: string;
+        class?: string;
+        width?: number | string;
+        height?: number | string;
+        defaultIcon?: ConstructorOfATypedSvelteComponent;
+    };
+}
+export interface ITableProps<T extends object> {
+    id?: {
+        value?: string;
+        name?: string;
+    };
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    tableHeader: ITableHeader<T>[];
+    tableBody: T[];
+    showInfo?: boolean;
+    cursor?: string | null;
+    loader?: Writable<boolean>;
+    getData?: () => void;
+    modalData?: {
+        isOpen?: boolean;
+        rawData?: string;
+        formattedData?: string;
+    };
+    onClick?: (eventHandler: IUIComponentHandler) => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "0.2.0",
+  "version": "0.3.0",
+  "license": "MIT", 
   "svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
+  "types": "./dist/index.d.ts",
+  "type": "module",
   "scripts": {
-		"build": "vite build && npm run prepack",
-		"prepack": "svelte-kit sync && svelte-package && publint"
-	},
-  "peerDependencies": {
-    "svelte": "^5.36.5"
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-package && publint",
+    "prepack": "svelte-kit sync && npm run package",
+    "CheckUpdate": "npx npm-check-updates -u && npm install"
   },
   "files": [
     "dist"
@@ -27,14 +22,23 @@
     "runes"
   ],
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "tailwindcss": "^4.1.11"
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
-    "@sveltejs/kit": "^2.25.0",
-		"@sveltejs/package": "^2.4.0",
+    "@sveltejs/kit": "^2.43.5",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "svelte": "^5.39.6",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.0.5"
+    "vite": "^7.1.7"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
   }
 }

package/dist/Button.svelte.d.ts

@@ -1,37 +0,0 @@
-export interface IUIComponentHandler {
-    Action: string;
-    Header?: string;
-    Argument?: string;
-    Variables?: string[];
-}
-export interface IButtonProps {
-    id?: {
-        value?: string;
-        name?: string;
-    };
-    wrapperClass?: string;
-    label?: {
-        name?: string;
-        class?: string;
-    };
-    componentClass?: string;
-    name?: string;
-    icon?: {
-        component?: ConstructorOfATypedSvelteComponent | null;
-        properties?: Record<string, unknown>;
-    };
-    keyBind?: {
-        key?: string;
-        ctrlKey?: boolean;
-        shiftKey?: boolean;
-        altKey?: boolean;
-        metaKey?: boolean;
-    };
-    disabled?: boolean;
-    eventHandler?: IUIComponentHandler;
-    onClick?: (id: string, eventHandler: IUIComponentHandler) => void;
-    onKeyBind?: (id: string, eventHandler: IUIComponentHandler) => void;
-}
-declare const Button: import("svelte").Component<IButtonProps, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;