poe-svelte-ui-lib 1.4.7 → 1.4.8

package/dist/FileAttach/FileAttach.svelte

@@ -15,7 +15,7 @@
     onChange = () => {},
   }: IFileAttachProps = $props()
 
-  let ID = `${id}-${crypto.randomUUID().slice(0, 6)}`
+  let ID = $derived(`${id}-${crypto.randomUUID().slice(0, 6)}`)
   let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
   let fileName = $state('')

package/dist/FileAttach/FileAttachProps.svelte

@@ -31,15 +31,6 @@
   <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)}
-        onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange)
-          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
-        }}
-      />
       <UI.Select
         label={{ name: $t('constructor.props.access') }}
         type="buttons"

package/dist/Input/Input.svelte

@@ -66,7 +66,7 @@
         class={twMerge(
           `w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
               outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-              ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
+              ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
               ${disabled ? 'opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
               ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
               ${help?.info ? 'pl-8' : ''} 
@@ -92,7 +92,7 @@
         class={twMerge(
           `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition
           duration-200 outline-none focus:border-blue-400
-            ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)]'}
+            ${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
             ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'} 
             ${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
             ${help?.info ? 'pl-8' : ''}

package/dist/Input/InputProps.svelte

@@ -112,7 +112,11 @@
         options={$optionsStore.INPUT_TYPE_OPTIONS}
         type="buttons"
         value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'text'))}
-        onUpdate={(selectedOption) => updateProperty('type', selectedOption.value as string)}
+        onUpdate={(selectedOption) => {
+          updateProperty('type', selectedOption.value as string)
+          if (selectedOption.value === 'text-area') updateProperty('componentClass', twMerge(component.properties.componentClass, 'font-mono'))
+          else updateProperty('componentClass', twMerge(component.properties.componentClass, 'font-[Montserrat]'))
+        }}
       />
       {#if component.properties.type === 'text' || component.properties.type === 'password' || component.properties.type === 'text-area'}
         <UI.Input
@@ -235,7 +239,7 @@
       <UI.Input
         label={{ name: $t('constructor.props.componentclass') }}
         value={component.properties.componentClass}
-        onUpdate={(value) => updateProperty('componentClass', value as string)}
+        onUpdate={(value) => updateProperty('componentClass', twMerge(component.properties.componentClass, value as string))}
       />
       <UI.Select
         wrapperClass="h-14"

package/dist/Select/Select.svelte

@@ -99,7 +99,7 @@
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
-        `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-200
+        `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
         ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}`,
         value?.class,
       )}
@@ -143,7 +143,7 @@
         <button
           id={option.id}
           class="{twMerge(
-            `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-all duration-300 select-none border border-(--bg-color)
+            `m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-300 select-none border border-(--bg-color)
             ${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
             ${option.value === value?.value && value !== null ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}  
             ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
@@ -166,7 +166,7 @@
     <input
       bind:value={searchValue}
       class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
-          transition-shadow duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
+          transition duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
           {disabled
         ? 'cursor-not-allowed opacity-50'

package/dist/Slider/Slider.svelte

@@ -17,8 +17,8 @@
 
   const isRange = $derived(type === 'range' || (Array.isArray(value) && value.length === 2))
 
-  const maxDigits = String(number.maxNum ?? 100).length
-  const valueWidth = `${maxDigits + 1}ch` /* +1 на запас */
+  const maxDigits = $derived(String(number.maxNum ?? 100).length)
+  const valueWidth = $derived(`${maxDigits + 1}ch`) /* +1 на запас */
 
   /* Инициализация значений с проверкой типа */
   let singleValue = $derived(!isRange && typeof value === 'number' ? value : number.minNum)

package/dist/Table/Table.svelte

@@ -171,9 +171,9 @@
         <div
           class={twMerge(
             `items-center justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
-              column.align?.header === 'center'
+              column.align === 'center'
                 ? 'flex justify-center text-center'
-                : column.align?.header === 'right'
+                : column.align === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'
             } gap-1 bg-(--bg-color) p-2 text-left`,
@@ -201,9 +201,9 @@
             <div
               class="relative flex w-full min-w-0 items-center px-2 py-1 wrap-break-word
               {index % 2 ? 'bg-(--back-color)/40' : 'bg-[#edeef3] dark:bg-[#1f2a3a]'}
-              {column.align?.content === 'center'
+              {column.align === 'center'
                 ? 'flex justify-center text-center'
-                : column.align?.content === 'right'
+                : column.align === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'}
               border-t

package/dist/Table/TableProps.svelte

@@ -24,7 +24,7 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  let defaultIcon = $state({ isModalOpen: false, columnIndex: 0, column: component.properties.header[0] })
+  let defaultIcon = $derived({ isModalOpen: false, columnIndex: 0, column: component.properties.header[0] })
 
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
@@ -77,7 +77,7 @@
 </script>
 
 {#if forConstructor}
-  <div class="relative flex flex-row items-start justify-center">
+  <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         label={{ name: $t('constructor.props.variable') }}
@@ -183,11 +183,9 @@
         <UI.Select
           label={{ name: $t('constructor.props.align.content') }}
           type="buttons"
-          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
           options={$optionsStore.ALIGN_OPTIONS}
-          onUpdate={(option) => {
-            updateTableHeader(columnIndex, 'align', { header: option.value, content: option.value })
-          }}
+          onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
         />
         <UI.Switch
           wrapperClass="w-30"
@@ -288,7 +286,7 @@
     {/each}
   </div>
 {:else}
-  <div class="relative flex flex-row items-start justify-center">
+  <div class="relative flex flex-row items-start justify-center pb-4">
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.id') }}
@@ -407,13 +405,6 @@
                 value={Number(column.width.replace('%', ''))}
                 onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
               />
-              <UI.Select
-                label={{ name: $t('constructor.props.align.header') }}
-                type="buttons"
-                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.header) || 'left')}
-                options={$optionsStore.ALIGN_OPTIONS}
-                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: option.value, content: column.align?.content })}
-              />
               <UI.Switch
                 label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
                 wrapperClass="w-30"
@@ -459,9 +450,9 @@
               <UI.Select
                 label={{ name: $t('constructor.props.align.content') }}
                 type="buttons"
-                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align))}
                 options={$optionsStore.ALIGN_OPTIONS}
-                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: column.align?.header, content: option.value })}
+                onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
               />
               <UI.Switch
                 wrapperClass="w-2/10"

package/dist/Tabs/Tabs.svelte

@@ -23,7 +23,7 @@
 
   const isCol = $derived(!!items.find((item) => item.class?.startsWith('flex-col')))
 
-  let currentTabIndex: number = $state(activeTab)
+  let currentTabIndex: number = $derived(activeTab)
 </script>
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full rounded-2xl bg-(--back-color)">

package/dist/types.d.ts

@@ -34,10 +34,10 @@ export interface UIComponent {
     eventHandler?: IUIComponentHandler;
 }
 export interface Position {
-    row: number;
-    col: number;
-    width: number;
-    height: number;
+    row?: number;
+    col?: number;
+    width?: number;
+    height?: number;
 }
 export interface IUIComponentHandler {
     Header?: string;
@@ -233,10 +233,7 @@ export interface ITableHeader<T extends object> {
     key: keyof T;
     sortable?: boolean;
     width?: string;
-    align?: {
-        header?: 'left' | 'center' | 'right';
-        content?: 'left' | 'center' | 'right';
-    };
+    align?: 'left' | 'center' | 'right';
     overflow?: {
         truncated?: boolean;
         formatting?: (text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -44,12 +44,12 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.45.3",
+    "svelte": "^5.45.4",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.6",
     "vite-plugin-compression": "^0.5.1"