poe-svelte-ui-lib 1.1.13 → 1.1.14

package/dist/Accordion/AccordionProps.svelte

@@ -116,14 +116,16 @@
           bind:currentImage
           onChange={handleImageUpload}
         />
-        <Button
-          wrapperClass="w-8.5 mt-6"
-          componentClass="p-0.5 bg-red"
-          content={{ icon: CrossIcon }}
-          onClick={() => {
-            updateProperty('image', '', component, onPropertyChange)
-          }}
-        />
+        {#if currentImage}
+          <Button
+            wrapperClass="w-8.5 mt-6"
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('image', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
       </div>
     </div>
   </div>
@@ -166,6 +168,11 @@
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
       <div class="relative mt-5 flex w-full gap-2">
         <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
@@ -203,11 +210,7 @@
           />
         {/if}
       </div>
-      <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
-      />
+
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}
@@ -228,14 +231,16 @@
           bind:currentImage
           onChange={handleImageUpload}
         />
-        <Button
-          wrapperClass="w-8.5 mt-6"
-          componentClass="p-0.5 bg-red"
-          content={{ icon: CrossIcon }}
-          onClick={() => {
-            updateProperty('image', '', component, onPropertyChange)
-          }}
-        />
+        {#if currentImage}
+          <Button
+            wrapperClass="w-8.5 mt-6"
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('image', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
       </div>
     </div>
   </div>

package/dist/Button/ButtonProps.svelte

@@ -65,16 +65,18 @@
             updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
           }}
         />
-
-        <UI.Input
-          wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
-          value={component.properties.eventHandler.Argument}
-          maxlength={32}
-          disabled={component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave'}
-          help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
-          onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
-        />
       {/if}
+      <UI.Input
+        label={{ name: Header.value !== 'SET' ? $t('constructor.props.argument') : '' }}
+        wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
+        value={component.properties.eventHandler.Argument}
+        maxlength={32}
+        disabled={Header.value === 'SET' &&
+          (component.properties.eventHandler.Argument == 'Save' || component.properties.eventHandler.Argument == 'NoSave')}
+        help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
+        onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
+      />
+
       {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -93,16 +93,32 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
-      <UI.Input
-        label={{ name: $t('constructor.props.label') }}
-        value={component.properties.label.name}
-        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
-      />
-      <UI.Input
-        label={{ name: $t('constructor.props.label.class') }}
-        value={component.properties.label.class}
-        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
-      />
+      <div class="flex items-center gap-3">
+        <UI.TextField wrapperClass="w-4" content={{ name: 'R', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[0]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [value as number, component.properties.value[1], component.properties.value[2]], component, onPropertyChange)}
+        />
+        <UI.TextField wrapperClass="w-4" content={{ name: 'G', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[1]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [component.properties.value[0], value as number, component.properties.value[2]], component, onPropertyChange)}
+        />
+        <UI.TextField wrapperClass="w-4" content={{ name: 'B', class: 'font-bold' }} />
+        <UI.Input
+          value={component.properties.value[2]}
+          type="number"
+          number={{ minNum: 0, maxNum: 255, step: 1 }}
+          onUpdate={(value) =>
+            updateProperty('value', [component.properties.value[0], component.properties.value[1], value as number], component, onPropertyChange)}
+        />
+      </div>
     </div>
   </div>
 {/if}

package/dist/ComponentExample.svelte

@@ -2,6 +2,7 @@
   import * as UI from './'
   import type { Snippet } from 'svelte'
   import CopyButton from './libIcons/CopyButton.svelte'
+  import { fade, fly, slide } from 'svelte/transition'
 
   let { component, componentProps, codeText }: { component: Snippet; componentProps: Snippet; codeText: string } = $props()
 
@@ -13,7 +14,7 @@
     {@render component()}
   </div>
   <div class=" border-t border-gray-500"></div>
-  <div class="h-fit">
+  <div class="h-fit" transition:fade={{ duration: 200 }}>
     {@render componentProps()}
     <div class="relative mt-3">
       <UI.Button

package/dist/{FileAttach.svelte → FileAttach/FileAttach.svelte}

@@ -21,7 +21,7 @@
     accept = '*/*',
     imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
     disabled = false,
-    currentImage = $bindable(null),
+    currentImage = $bindable(''),
     onChange = () => {},
   }: IFileInputProps = $props()
 
@@ -41,6 +41,7 @@
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
+    // console.log('!!! curr:', currentImage, 'prev:', previewUrl)
   }
 
   const triggerFileInput = () => {

package/dist/FileAttach/FileAttachProps.svelte

@@ -0,0 +1,98 @@
+<!-- $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'
+  import type { IFileInputProps } from './FileAttach.svelte'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IFileInputProps> }
+    onPropertyChange: (value: string | object, name?: string) => void
+    forConstructor?: boolean
+  }>()
+</script>
+
+{#if !forConstructor}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={$optionsStore.FILE_ATTACH_TYPE_OPTIONS.find((c) => (c.value as string).includes(component.properties.type))}
+        options={$optionsStore.FILE_ATTACH_TYPE_OPTIONS}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.file.accept') }}
+        value={component.properties.accept}
+        onUpdate={(value) => updateProperty('accept', value as string, component, onPropertyChange)}
+      />
+      {#if component.properties.type === 'image'}
+        <div class="flex gap-4">
+          <UI.Input
+            label={{ name: $t('constructor.props.imageSize.height') }}
+            value={component.properties.imageSize.height}
+            onUpdate={(value) => updateProperty('imageSize.height', value as string, component, onPropertyChange)}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.imageSize.width') }}
+            value={component.properties.imageSize.width}
+            onUpdate={(value) => updateProperty('imageSize.width', value as string, component, onPropertyChange)}
+          />
+        </div>
+        <div class="flex gap-4">
+          <UI.Select
+            label={{ name: $t('constructor.props.fitmode') }}
+            type="buttons"
+            value={$optionsStore.FITMODE_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.fitMode))}
+            options={$optionsStore.FITMODE_OPTIONS}
+            onUpdate={(option) => updateProperty('imageSize.fitMode', option.value as string, component, onPropertyChange)}
+          />
+          <UI.Select
+            label={{ name: $t('constructor.props.form') }}
+            type="buttons"
+            value={$optionsStore.FORM_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.form))}
+            options={$optionsStore.FORM_OPTIONS}
+            onUpdate={(option) => updateProperty('imageSize.form', option.value as string, component, onPropertyChange)}
+          />
+        </div>
+      {/if}
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.currentImage') }}
+        value={component.properties.currentImage}
+        onUpdate={(value) => updateProperty('currentImage', value as string, component, onPropertyChange)}
+      />
+    </div>
+  </div>
+{/if}

package/dist/FileAttach/FileAttachProps.svelte.d.ts

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

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { default as Button } from './Button/Button.svelte';
 export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
-export { default as FileAttach } from './FileAttach.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/index.js

@@ -5,7 +5,7 @@ export { default as Button } from './Button/Button.svelte';
 export { default as ButtonProps } from './Button/ButtonProps.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ColorPickerProps } from './ColorPicker/ColorPickerProps.svelte';
-export { default as FileAttach } from './FileAttach.svelte';
+export { default as FileAttach } from './FileAttach/FileAttach.svelte';
 export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/locales/translations.js

@@ -31,6 +31,12 @@ const translations = {
         'constructor.props.type.selectput': 'Список+ввод',
         'constructor.props.valuetype.text': 'Строка',
         'constructor.props.valuetype.number': 'Число',
+        'constructor.props.type.file': 'Файл',
+        'constructor.props.type.image': 'Изображение',
+        'constructor.props.type.cover': 'Урезанный',
+        'constructor.props.type.contain': 'Полный',
+        'constructor.props.type.square': 'Квадрат',
+        'constructor.props.type.circle': 'Круг',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
@@ -40,6 +46,11 @@ const translations = {
         'constructor.props.svgicon': 'SVG-иконка (строка)',
         'constructor.props.open': 'Разворачивание',
         'constructor.props.defaultcolor': 'Первоначальный цвет',
+        'constructor.props.file.accept': 'Допустимые файлы',
+        'constructor.props.imageSize.height': 'Высота',
+        'constructor.props.imageSize.width': 'Ширина',
+        'constructor.props.fitmode': 'Вид',
+        'constructor.props.form': 'Форма',
         'constructor.props.type': 'Тип',
         'constructor.props.size': 'Размер',
         'constructor.props.header': 'Заголовок пакета',

package/dist/options.d.ts

@@ -70,4 +70,19 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: boolean;
         name: string;
     }[];
+    FILE_ATTACH_TYPE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    FITMODE_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    FORM_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
 }>;

package/dist/options.js

@@ -80,5 +80,17 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: false, name: $t('constructor.props.type.main') },
             { id: id(), value: true, name: $t('constructor.props.type.sub') },
         ],
+        FILE_ATTACH_TYPE_OPTIONS: [
+            { id: id(), value: 'file', name: $t('constructor.props.type.file') },
+            { id: id(), value: 'image', name: $t('constructor.props.type.image') },
+        ],
+        FITMODE_OPTIONS: [
+            { id: id(), value: 'cover', name: $t('constructor.props.type.cover') },
+            { id: id(), value: 'contain', name: $t('constructor.props.type.contain') },
+        ],
+        FORM_OPTIONS: [
+            { id: id(), value: 'square', name: $t('constructor.props.type.square') },
+            { id: id(), value: 'circle', name: $t('constructor.props.type.circle') },
+        ],
     };
 });

package/dist/types.d.ts

@@ -1,14 +1,15 @@
 import type { Component, Snippet } from 'svelte';
 import type { Writable } from 'svelte/store';
+import type { IFileInputProps } from './FileAttach/FileAttach.svelte';
 export declare const updateProperty: (path: string, value: string | number | boolean | object | string[], component: UIComponent & {
     properties: Partial<UIComponent["properties"]>;
 }, onPropertyChange: (value: string | object, name?: string) => void, name?: string) => void;
 export interface UIComponent {
     id: string;
     name?: 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>;
+    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'ProgressBar' | 'Graph' | 'Table' | 'FileAttach';
+    component: Component<IButtonProps> | Component<IInputProps> | Component<ISelectProps> | Component<ISwitchProps> | Component<IColorPickerProps> | Component<ISliderProps> | Component<ITextFieldProps> | Component<IProgressBarProps> | Component<IGraphProps> | Component<ITableProps<object>> | Component<IFileInputProps> | null;
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | IFileInputProps;
     position: Position;
     parentId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -36,21 +36,21 @@
     "@tailwindcss/vite": "^4.1.14",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.0",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.47.0",
+    "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.8.1",
     "publint": "^0.3.14",
-    "svelte": "^5.40.2",
+    "svelte": "^5.41.0",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.10",
+    "vite": "^7.1.11",
     "vite-plugin-compression": "^0.5.1"
   }
 }