poe-svelte-ui-lib 1.0.6 → 1.0.8

package/dist/Accordion/Accordion.svelte

@@ -1,68 +1,79 @@
 <script lang="ts">
   import { slide } from 'svelte/transition'
   import type { IAccordionProps } from '../types'
+  import { twMerge } from 'tailwind-merge'
 
-  const props: IAccordionProps = $props()
-  let isOpen = $state(props.isOpen)
+  let {
+    id = crypto.randomUUID(),
+    isOpen = false,
+    outline = false,
+    wrapperClass = '',
+    size = { width: 1, height: 1 },
+    label = { name: '', class: 'text-left', icon: null },
+    children,
+    image,
+  }: IAccordionProps = $props()
 
   const toggle = () => (isOpen = !isOpen)
 </script>
 
 <div
-  id={props.id?.value}
-  class="border-[var(--border-color)] p-0 transition-shadow duration-250 {props.type === 'sub'
-    ? 'border-none'
-    : 'rounded-xl border bg-[var(--conteiner-color)] hover:shadow-md'}
-    {props.componentClass}"
+  {id}
+  class={twMerge(
+    `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
+    border border-[var(--border-color)] bg-[var(--container-color)] p-0 transition-shadow duration-250`,
+    wrapperClass,
+  )}
   transition:slide={{ duration: 250 }}
 >
   <button
-    class="flex p-4 w-full cursor-pointer items-center justify-between transition-shadow duration-250
-    {props.type === 'sub' ? 'border-b border-[var(--border-color)]' : ''}"
+    class="flex w-full cursor-pointer items-center justify-between p-4 transition-shadow duration-250
+    {outline ? 'border-b border-[var(--border-color)]' : ''}"
     onclick={toggle}
   >
-    <div class="flex items-center w-full">
-      <span class={`flex items-center justify-center w-8 h-8 shrink-0 overflow-visible [&_svg]:w-full [&_svg]:h-full [&_svg]:max-w-full [&_svg]:max-h-full`}>
-        {#if props.icon?.svg}
-          {@html props.icon.svg}
-        {:else if props.icon?.component}
-          {@const IconComponent = props.icon?.component}
+    <div class="flex w-full items-center">
+      <span
+        class={`flex h-8 w-8 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
+      >
+        {#if label?.icon}
+          {@const IconComponent = label?.icon}
           <IconComponent />
         {/if}
       </span>
-      <h4
-        class="{props.label?.class}
-        {props.label?.align === 'center' ? 'text-center flex-1' : props.label?.align === 'right' ? 'text-right flex-1 mr-2' : 'text-left flex-1 ml-2'}"
-      >
-        {props.label?.name}
-      </h4>
+      <span class="{twMerge('m-0 w-full cursor-pointer text-left font-semibold', label.class)} text-lg">
+        {label?.name}
+      </span>
     </div>
 
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-[1.1rem] w-[1.1rem] transition-transform duration-250"
-      style="transform: rotate({isOpen ? 180 : 0}deg)"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
-        color="currentColor"
-      />
-    </svg>
+    <div class="w-10 pl-4">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-[1.1rem] w-[1.1rem] transition-transform duration-250"
+        style="transform: rotate({isOpen ? 180 : 0}deg)"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
+          color="currentColor"
+        />
+      </svg>
+    </div>
   </button>
 
   {#if isOpen}
     <div
-      class="flex w-full flex-wrap items-start justify-around p-2 {props.type === 'sub' ? '' : 'border-t border-[var(--border-color)]'}"
+      class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} {outline ? '' : 'border-t border-[var(--border-color)]'}"
       transition:slide={{ duration: 250 }}
-      style={props.image ? `background-image: url('${props.image}'); background-size: cover;` : ''}
+      style="grid-template-columns: repeat({size.width || 10}, minmax(0, 1fr)); 
+          grid-template-rows: repeat({size.height || 2}, {image ? 'minmax(6rem, auto)' : 'auto'});
+          {image ? `background-image: url(${image}); background-size: cover; background-position: center;` : ''}"
     >
-      {@render props.children?.()}
+      {@render children?.()}
     </div>
   {/if}
 </div>

package/dist/Accordion/AccordionProps.svelte

@@ -0,0 +1,76 @@
+<!-- $lib/ElementsUI/AccordionProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IAccordionProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
+
+  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 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, component, onPropertyChange)
+    }
+    reader.readAsDataURL(file)
+  }
+</script>
+
+{#if component && component.properties}
+  <div class="flex items-center justify-center gap-8">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+        type="text"
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={initialType}
+        options={$optionsStore.ACCORDION_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
+      <UI.FileAttach
+        type="image"
+        label={{ name: $t('constructor.props.image') }}
+        accept="image/png, image/jpeg, image/webp"
+        bind:currentImage={component.properties.image}
+        onChange={handleImageUpload}
+      />
+      <UI.Button
+        content={{ name: $t('constructor.props.removeimage') }}
+        wrapperClass="!w-auto"
+        onClick={() => updateProperty('image', '', component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type IAccordionProps, type 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/Button.svelte

@@ -3,16 +3,18 @@
   import { onMount } from 'svelte'
   import type { IButtonProps } from '../types'
   import { fly } from 'svelte/transition'
+  import { twMerge } from 'tailwind-merge'
 
   let {
-    id = { value: crypto.randomUUID(), name: '' },
-    wrapperClass = 'bg-blue',
-    label = { name: '', class: '' },
-    name = '',
+    id = crypto.randomUUID(),
+    wrapperClass = '',
     componentClass = '',
-    icon = { component: null, properties: {} },
-    info = '',
     disabled = false,
+    content = {
+      name: '',
+      info: '',
+      icon: null,
+    },
     keyBind,
     onClick,
   }: IButtonProps = $props()
@@ -43,49 +45,41 @@
 
   /* Подписка на события клавиатуры */
   onMount(() => {
-    if (keyBind) {
-      window.addEventListener('keydown', handleKeyDown)
-    }
+    if (keyBind) window.addEventListener('keydown', handleKeyDown)
     return () => {
-      if (keyBind) {
-        window.removeEventListener('keydown', handleKeyDown)
-      }
+      if (keyBind) window.removeEventListener('keydown', handleKeyDown)
     }
   })
 </script>
 
-<div class={`relative flex w-full flex-col items-center ${wrapperClass}`}>
-  {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
-  {/if}
-
+<div class={twMerge(`bg-blue relative flex w-full flex-col items-center`, wrapperClass)}>
   <div class="relative flex w-full grow items-center">
     <button
-      id={id.value}
-      class={`
-        relative m-0 inline-block w-full items-center rounded-2xl border border-[var(--bg-color)] bg-[var(--bg-color)]
+      {id}
+      class="{twMerge(
+        `relative m-0 inline-block w-full items-center rounded-2xl border border-[var(--bg-color)] 
         px-2 py-1 font-semibold shadow-sm transition duration-200 select-none
-        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'}
-        ${componentClass}
-      `}
+        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md active:scale-97'} `,
+        componentClass,
+      )} bg-[var(--bg-color)]"
       onclick={handleClick}
       {disabled}
-      aria-label={name || label.name}
+      aria-label={content.name}
       onmouseenter={() => {
-        if (info) showInfo = true
+        if (content.info) showInfo = true
       }}
       onmouseleave={() => {
-        if (info) showInfo = false
+        if (content.info) showInfo = false
       }}
     >
       <span class="flex flex-row items-center justify-center gap-2">
-        {#if icon?.component}
-          {@const IconComponent = icon?.component}
-          <IconComponent {...icon?.properties} />
+        {#if content.icon}
+          {@const IconComponent = content.icon}
+          <IconComponent />
         {/if}
-        {#if name}
+        {#if content.name}
           <div class="flex-1">
-            {name}
+            {content.name}
             {#if keyBind}
               <div class="text-xs opacity-70">
                 ({keyBind.ctrlKey ? 'Ctrl+' : ''}{keyBind.shiftKey ? 'Shift+' : ''}{keyBind.altKey ? 'Alt+' : ''}{keyBind.key})
@@ -99,12 +93,12 @@
     {#if showInfo}
       <div
         transition:fly={{ y: -15, duration: 300 }}
-        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-[var(--conteiner-color)] px-3 py-1 text-sm shadow-lg"
+        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-[var(--container-color)] px-3 py-1 text-sm shadow-lg"
         style="transform: translateX(-50%);"
       >
-        {info}
+        {content.info}
         <!-- Треугольная стрелка -->
-        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-[var(--conteiner-color)]"></div>
+        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-[var(--container-color)]"></div>
       </div>
     {/if}
   </div>

package/dist/Button/ButtonProps.svelte

@@ -0,0 +1,113 @@
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IButtonProps, type ISelectOption, updateProperty } from '../types'
+  import * as UI from '..'
+  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 initialHeight = $derived(
+    $optionsStore.HEIGHT_OPTIONS.find((h) =>
+      (h.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('py-'))),
+    ),
+  )
+</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('constructor.props.header') }}
+        type="buttons"
+        value={Header}
+        options={$optionsStore.HEADER_OPTIONS}
+        onUpdate={(option) => {
+          Header = option
+          updateProperty('eventHandler.Header', Header.value as string, component, onPropertyChange)
+        }}
+      />
+      {#if Header.value === 'SET'}
+        <UI.Select
+          wrapperClass="w-full"
+          label={{ name: $t('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, component, onPropertyChange)
+          }}
+        />
+      {/if}
+      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
+        <UI.Input
+          wrapperClass={Header.value === 'SET' ? 'mt-1' : ''}
+          label={{ name: Header.value === 'SET' ? '' : $t('constructor.props.argument') }}
+          value={component.properties.eventHandler.Argument}
+          help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
+          maxlength={32}
+          onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.value') }}
+          value={component.properties.eventHandler.Value}
+          type="text"
+          maxlength={500}
+          onUpdate={(value) => updateProperty('eventHandler.Value', value as string, component, onPropertyChange)}
+        />
+      {/if}
+      <UI.Input
+        label={{ name: $t('constructor.props.variables') }}
+        value={component.properties.eventHandler.Variables.join(' ')}
+        help={{ info: $t('constructor.props.variables.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_ ":{}]{0,500}$/ }}
+        maxlength={500}
+        onUpdate={(value) => {
+          const parts = (value as string).trim().split(/\s+/)
+          updateProperty('eventHandler.Variables', parts, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.name') }}
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.height') }}
+        type="buttons"
+        options={$optionsStore.HEIGHT_OPTIONS}
+        value={initialHeight}
+        onUpdate={(option) => updateProperty('componentClass', `${component.properties.componentClass} ${option.value}`, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('componentClass', `${component.properties.componentClass} ${option.value}`, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type UIComponent, type 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/ColorPicker.svelte

@@ -1,9 +1,10 @@
 <!-- $lib/ElementsUI/ColorPicker.svelte -->
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge'
   import type { IColorPickerProps } from '../types'
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
+    id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
     value = [0, 0, 0],
@@ -108,14 +109,18 @@
     window.addEventListener('mouseup', onUp)
   }
 
-  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
+  const rgb = $derived(() =>
+    mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v),
+  )
   const hex = $derived(() =>
     rgb()
       .map((v) => v.toString(16).padStart(2, '0'))
       .join(' ')
       .toUpperCase(),
   )
-  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
+  const previewBaseColor = $derived(() =>
+    mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100),
+  )
 
   const textColor = $derived(() => {
     const [r, g, b] = rgb()
@@ -124,9 +129,9 @@
   })
 </script>
 
-<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
+<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <h5 class={twMerge(`mb-2 w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="flex w-full flex-row items-center gap-2">
@@ -134,7 +139,7 @@
     <div class="flex w-full flex-col gap-2">
       <!-- Выбор цвета -->
       <div
-        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full shadow-md"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -157,14 +162,17 @@
 
       <!-- Яркость цвета -->
       <div
-        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full {mode === 'hsv' ? 'shadow-md' : ''}"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
         onmousedown={(e) => handleDrag(e, 'brightness')}
       >
         {#if mode === 'hsv'}
-          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
+          <div
+            class="absolute inset-0"
+            style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}
+          ></div>
 
           <div
             class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
@@ -175,7 +183,7 @@
 
       <!-- Яркость белого цвета -->
       <div
-        class="white-slider mt-4 relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        class="white-slider relative mt-4 h-4 w-full cursor-pointer overflow-hidden rounded-full shadow-sm"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -192,14 +200,19 @@
     </div>
 
     <!-- Превью цвета -->
-    <div
-      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
-      style={`background: rgb(${previewBaseColor().join(',')})`}
-    >
+
+    <div class="flex w-24 flex-col items-center">
+      <div
+        class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-md select-none ${textColor()}`}
+        style={`background: rgb(${previewBaseColor().join(',')})`}
+      ></div>
+      <div class="w-full text-center font-semibold">{hex()}</div>
+    </div>
+    <!-- <div>
       <div class="flex flex-col items-center">
         <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
         <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </div>

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -0,0 +1,71 @@
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IColorPickerProps, updateProperty } from '../types'
+  import * as UI from '..'
+  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 && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          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-'))),
+    ),
+  )
+</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('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+        }}
+      />
+      <UI.Select
+        label={{ name: $t('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, component, onPropertyChange)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        type="text"
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type UIComponent, type 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/{FileAttach/FileAttach.svelte → FileAttach.svelte}

@@ -20,18 +20,12 @@
     accept = '*/*',
     imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
     disabled = false,
-    currentImage = null,
+    currentImage = $bindable(null),
     onChange = () => {},
   }: FileInputProps = $props()
 
   let selectedFile = $state<File | null>(null)
-  let previewUrl = $state<string | null>(null)
-
-  $effect(() => {
-    if (currentImage && !selectedFile) {
-      previewUrl = currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`
-    }
-  })
+  let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
 
   const handleFileChange = (event: Event) => {
     const input = event.target as HTMLInputElement
@@ -43,9 +37,7 @@
     const file = input.files[0]
     selectedFile = file
 
-    if (file.type.startsWith('image/')) {
-      previewUrl = URL.createObjectURL(file)
-    }
+    if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
   }