poe-svelte-ui-lib 0.1.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,34 +1,44 @@
-{
-  "name": "poe-svelte-ui-lib",
-  "version": "0.1.0",
-  "type": "module",
-  "main": "dist/svelte-ui-lib.umd.js",
-  "module": "dist/svelte-ui-lib.es.js",
-  "svelte": "src/lib/index.ts",
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "svelte": "^5"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "keywords": [
-    "svelte",
-    "ui",
-    "components",
-    "runes"
-  ],
-  "dependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "tailwindcss": "^4.1.11"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
-    "svelte-preprocess": "^6.0.3",
-    "vite": "^7.0.4"
-  }
-}
+{
+  "name": "poe-svelte-ui-lib",
+  "version": "0.3.0",
+  "license": "MIT", 
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "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"
+  ],
+  "keywords": [
+    "svelte",
+    "ui",
+    "components",
+    "runes"
+  ],
+  "dependencies": {
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@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.1.7"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  }
+}