poe-svelte-ui-lib 1.0.2 → 1.0.5

package/dist/types.d.ts

@@ -57,6 +57,10 @@ export interface IAccordionProps {
         name?: string;
         class?: string;
     };
+    icon?: {
+        component?: ConstructorOfATypedSvelteComponent | null;
+        properties?: Record<string, unknown>;
+    };
     isOpen: boolean;
     componentClass?: string;
     type?: 'main' | 'sub';
@@ -110,6 +114,7 @@ export interface ISelectProps<T = unknown> {
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
+    placeholder?: string;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -269,9 +274,9 @@ export interface ITableProps<T extends object> {
         name?: string;
         class?: string;
     };
-    tableHeader: ITableHeader<T>[];
-    tableBody: T[];
-    showInfo?: boolean;
+    header: ITableHeader<T>[];
+    body: T[];
+    footer?: string;
     cursor?: string | null;
     loader?: Writable<boolean>;
     getData?: () => void;

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "package": "svelte-package && publint",
-    "prepack": "svelte-kit sync && npm run package",
+    "prepack": "svelte-kit sync && svelte-package && publint",
     "CheckUpdate": "npx npm-check-updates -u && npm install"
   },
   "svelte": "./dist/index.js",
@@ -32,18 +31,18 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@tailwindcss/vite": "^4.1.13",
-    "tailwindcss": "^4.1.13",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@tailwindcss/vite": "^4.1.14",
+    "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.43.6",
+    "@sveltejs/kit": "^2.43.7",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "publint": "^0.3.13",
-    "svelte": "^5.39.7",
+    "svelte": "^5.39.8",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.7"
+    "vite": "^7.1.9"
   }
 }

package/dist/Accordion/AccordionProps.svelte

@@ -1,70 +0,0 @@
-<!-- $lib/ElementsUI/AccordionProps.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { IAccordionProps, UIComponent } from '../types'
-  import * as UI from '../index'
-  import { optionsStore } from '../options'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<IAccordionProps> }
-    onPropertyChange: (value: string | object) => void
-  }>()
-
-  let currentType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object) => {
-    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)
-  }
-
-  const handleImageUpload = (event: Event) => {
-    const input = event.target as HTMLInputElement
-    if (!input.files || input.files.length === 0) return
-
-    const file = input.files[0]
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      const base64String = e.target?.result as string
-      updateProperty('image', base64String)
-    }
-    reader.readAsDataURL(file)
-  }
-</script>
-
-{#if component && component.properties}
-  <div class="flex items-center justify-center gap-8">
-    <UI.Input
-      label={{ name: $t('service.constructor.props.label') }}
-      wrapperClass="!w-1/3"
-      value={component.properties.label.name}
-      onUpdate={(value) => updateProperty('label.name', value as string)}
-      type="text"
-    />
-    <UI.Select
-      wrapperClass="!w-1/3"
-      label={{ name: $t('service.constructor.props.type') }}
-      type="buttons"
-      value={currentType}
-      options={$optionsStore.ACCORDION_TYPE_OPTIONS}
-      onUpdate={(item) => updateProperty('type', item.value as string)}
-    />
-    <UI.FileAttach
-      type="image"
-      label={{ name: $t('service.constructor.props.image') }}
-      accept="image/png, image/jpeg, image/webp"
-      onChange={handleImageUpload}
-    />
-    <UI.Button name={$t('service.constructor.props.removeimage')} wrapperClass="!w-auto" componentClass="px-4" onClick={() => updateProperty('image', '')} />
-  </div>
-{/if}

package/dist/Accordion/AccordionProps.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { IAccordionProps, UIComponent } from '../types';
-type $$ComponentProps = {
-    component: UIComponent & {
-        properties: Partial<IAccordionProps>;
-    };
-    onPropertyChange: (value: string | object) => void;
-};
-declare const AccordionProps: import("svelte").Component<$$ComponentProps, {}, "">;
-type AccordionProps = ReturnType<typeof AccordionProps>;
-export default AccordionProps;

package/dist/Button/ButtonProps.svelte

@@ -1,200 +0,0 @@
-<!-- $lib/ElementsUI/ButtonProps.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { UIComponent, IButtonProps, ISelectOption } from '../types'
-  import * as UI from '../index'
-  import { optionsStore } from '../options'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<IButtonProps> }
-    onPropertyChange: (value: string | object) => void
-  }>()
-
-  let Header: ISelectOption = $derived(
-    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? { id: '', name: '', value: '', class: '!w-1/4' },
-  )
-
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
-    ),
-  )
-
-  const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
-    ),
-  )
-
-  const initialHeight = $derived(
-    $optionsStore.HEIGHT_OPTIONS.find((h) =>
-      (h.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('py-'))),
-    ),
-  )
-
-  /* Добавление цветов через селект */
-  const handleOptionColorChange = (color: string) => {
-    let componentClass = component.properties.componentClass || ''
-    componentClass = componentClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('bg-'))
-      .join(' ')
-    if (color) {
-      componentClass += ` ${color}`
-    }
-    updateProperty('componentClass', componentClass)
-  }
-
-  const handleLabelAlign = (align: string) => {
-    let labelClass = component.properties.label.class || ''
-    labelClass = labelClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('text-'))
-      .join(' ')
-    if (align) {
-      labelClass += ` ${align}`
-    }
-    updateProperty('label.class', labelClass)
-  }
-
-  const handleButtonHeight = (height: string) => {
-    let buttonClass = component.properties.componentClass || ''
-    buttonClass = buttonClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('py-'))
-      .join(' ')
-    if (height) {
-      buttonClass += ` ${height}`
-    }
-    updateProperty('componentClass', buttonClass)
-  }
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | string[]) => {
-    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)
-  }
-</script>
-
-{#if component && component.properties}
-  <div class="relative flex flex-row items-start justify-center">
-    <!-- Сообщение для отправки в ws по нажатию кнопки -->
-    <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.header') }}
-        type="buttons"
-        value={Header}
-        options={$optionsStore.HEADER_OPTIONS}
-        onUpdate={(option) => {
-          Header = option
-          updateProperty('eventHandler.Header', Header.value as string)
-        }}
-      />
-      {#if Header.value === 'SET'}
-        <UI.Select
-          wrapperClass="w-full"
-          label={{ name: $t('service.constructor.props.argument') }}
-          type="buttons"
-          value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
-          options={$optionsStore.FULL_ARGUMENT_OPTION}
-          onUpdate={(option) => {
-            updateProperty('eventHandler.Argument', option.value as string)
-          }}
-        />
-      {/if}
-      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
-        <UI.Input
-          wrapperClass="w-full {Header.value === 'SET' ? 'mt-1' : ''} "
-          label={{ name: Header.value === 'SET' ? '' : $t('service.constructor.props.argument') }}
-          value={component.properties.eventHandler.Argument}
-          type="text"
-          autocomplete="on"
-          componentClass="w-full"
-          maxlength={32}
-          regExp={/^[a-zA-Z0-9\-_]{0,32}$/}
-          help={{ info: $t('service.constructor.props.argument.info') }}
-          onUpdate={(value) => updateProperty('eventHandler.Argument', value as string)}
-        />
-        <UI.Input
-          wrapperClass="w-full"
-          label={{ name: $t('service.constructor.props.value') }}
-          value={component.properties.eventHandler.Value}
-          type="text"
-          autocomplete="on"
-          componentClass="w-full"
-          maxlength={500}
-          regExp={/^[a-zA-Z0-9\-_ ":{}]{0,500}$/}
-          help={{ info: $t('service.constructor.props.value.info') }}
-          onUpdate={(value) => updateProperty('eventHandler.Value', value as string)}
-        />
-      {/if}
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.variables') }}
-        value={component.properties.eventHandler.Variables.join(' ')}
-        type="text"
-        autocomplete="on"
-        componentClass="w-full"
-        maxlength={500}
-        regExp={/^[a-zA-Z0-9\-_ ]{0,500}$/}
-        help={{ info: $t('service.constructor.props.variables.info') }}
-        onUpdate={(value) => {
-          const parts = (value as string).trim().split(/\s+/)
-          updateProperty('eventHandler.Variables', parts)
-        }}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.name') }}
-        value={component.properties.name}
-        type="text"
-        onUpdate={(value) => updateProperty('name', value as string)}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.height') }}
-        type="buttons"
-        options={$optionsStore.HEIGHT_OPTIONS}
-        value={initialHeight}
-        onUpdate={(option) => handleButtonHeight(option.value as string)}
-      />
-      <UI.Select
-        wrapperClass="w-full h-14"
-        label={{ name: $t('service.constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS}
-        value={initialColor}
-        onUpdate={(option) => handleOptionColorChange(option.value as string)}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.label') }}
-        value={component.properties.label.name}
-        type="text"
-        componentClass="w-full"
-        onUpdate={(value) => updateProperty('label.name', value as string)}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.align') }}
-        type="buttons"
-        value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
-        onUpdate={(option) => handleLabelAlign(option.value as string)}
-      />
-    </div>
-  </div>
-{/if}

package/dist/Button/ButtonProps.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { UIComponent, IButtonProps } from '../types';
-type $$ComponentProps = {
-    component: UIComponent & {
-        properties: Partial<IButtonProps>;
-    };
-    onPropertyChange: (value: string | object) => void;
-};
-declare const ButtonProps: import("svelte").Component<$$ComponentProps, {}, "">;
-type ButtonProps = ReturnType<typeof ButtonProps>;
-export default ButtonProps;

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -1,100 +0,0 @@
-<!-- $lib/ElementsUI/ButtonProps.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { UIComponent, IColorPickerProps } from '../types'
-  import * as UI from '../index'
-  import { getContext } from 'svelte'
-  import { optionsStore } from '../options'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value: string | object) => void
-  }>()
-
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables.map((variable: { value: string; name: string }) => ({
-      id: variable.name,
-      value: variable.value,
-      name: `${variable.value} | ${variable.name}`,
-    })),
-  )
-
-  const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
-    ),
-  )
-
-  const handleLabelAlign = (align: string) => {
-    let labelClass = component.properties.label.class || ''
-    labelClass = labelClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('text-'))
-      .join(' ')
-    if (align) {
-      labelClass += ` ${align}`
-    }
-    updateProperty('label.class', labelClass)
-  }
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | string[]) => {
-    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)
-  }
-</script>
-
-{#if component && component.properties}
-  <div class="relative flex flex-row items-start justify-center">
-    <!-- Сообщение для отправки в ws по нажатию кнопки -->
-    <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Select
-        label={{ name: $t('service.constructor.props.variable') }}
-        options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
-        onUpdate={(value) => {
-          updateProperty('id.name', (value.name as string).split('|')[1].trim())
-          updateProperty('id.value', value.value as string)
-          updateProperty('eventHandler.Variables', value.value as string)
-        }}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.action') }}
-        type="buttons"
-        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
-        options={$optionsStore.SHORT_ARGUMENT_OPTION}
-        onUpdate={(option) => {
-          updateProperty('eventHandler.Argument', option.value as string)
-        }}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.label') }}
-        value={component.properties.label.name}
-        type="text"
-        componentClass="w-full"
-        onUpdate={(value) => updateProperty('label.name', value as string)}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.align') }}
-        type="buttons"
-        value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
-        onUpdate={(option) => handleLabelAlign(option.value as string)}
-      />
-    </div>
-  </div>
-{/if}

package/dist/ColorPicker/ColorPickerProps.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { UIComponent, IColorPickerProps } from '../types';
-type $$ComponentProps = {
-    component: UIComponent & {
-        properties: Partial<IColorPickerProps>;
-    };
-    onPropertyChange: (value: string | object) => void;
-};
-declare const ColorPickerProps: import("svelte").Component<$$ComponentProps, {}, "">;
-type ColorPickerProps = ReturnType<typeof ColorPickerProps>;
-export default ColorPickerProps;

package/dist/Graph/GraphProps.svelte

@@ -1,56 +0,0 @@
-<!-- $lib/ElementsUI/SwitchProps.svelte -->
-<script lang="ts">
-  import { getContext } from 'svelte'
-  import { t } from '../locales/i18n'
-  import type { UIComponent, IGraphProps } from '../types'
-  import * as UI from '../index'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<IGraphProps> }
-    onPropertyChange: (value: string | object) => void
-  }>()
-
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables.map((variable: { value: string; name: string }) => ({
-      id: variable.name,
-      value: variable.value,
-      name: `${variable.value} | ${variable.name}`,
-    })),
-  )
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object) => {
-    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)
-  }
-</script>
-
-{#if component && component.properties}
-  <div class="relative flex flex-row items-start justify-center">
-    <!-- Сообщение для отправки в ws по нажатию кнопки -->
-    <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Select
-        label={{ name: $t('service.constructor.props.variable') }}
-        options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
-        onUpdate={(value) => {
-          updateProperty('id.name', (value.name as string).split('|')[1].trim())
-          updateProperty('id.value', value.value as string)
-        }}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2"></div>
-    <div class="flex w-1/3 flex-col px-2"></div>
-  </div>
-{/if}

package/dist/Graph/GraphProps.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { UIComponent, IGraphProps } from '../types';
-type $$ComponentProps = {
-    component: UIComponent & {
-        properties: Partial<IGraphProps>;
-    };
-    onPropertyChange: (value: string | object) => void;
-};
-declare const GraphProps: import("svelte").Component<$$ComponentProps, {}, "">;
-type GraphProps = ReturnType<typeof GraphProps>;
-export default GraphProps;