poe-svelte-ui-lib 1.2.25 → 1.2.27

package/dist/Slider/SliderProps.svelte

@@ -40,8 +40,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -53,6 +54,13 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -144,6 +152,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/Switch/SwitchProps.svelte

@@ -36,8 +36,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -49,6 +50,16 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.type') }}
@@ -58,9 +69,7 @@
         value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
         onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
       />
-    </div>
-    {#if !component.properties.bitMode}
-      <div class="flex w-1/3 flex-col px-2">
+      {#if !component.properties.bitMode}
         <UI.Input
           label={{ name: $t('constructor.props.caption.left') }}
           value={component.properties.label.captionLeft}
@@ -83,8 +92,9 @@
             updateProperty('options', options, component, onPropertyChange)
           }}
         />
-      </div>
-    {/if}
+      {/if}
+    </div>
+
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
@@ -215,6 +225,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Table/Table.svelte

@@ -166,13 +166,13 @@
       {#each header as column, index (column)}
         <div
           class={twMerge(
-            `justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
+            `items-center justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
               column.align?.header === 'center'
                 ? 'flex justify-center text-center'
                 : column.align?.header === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'
-            } bg-(--bg-color) p-2 text-left`,
+            } gap-1 bg-(--bg-color) p-2 text-left`,
             column.label?.class,
           )}
         >

package/dist/Table/TableProps.svelte

@@ -81,10 +81,18 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -145,6 +153,7 @@
       <div class="mr-2 flex items-end justify-around gap-6">
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.key') }}
+          wrapperClass="w-170"
           value={column.key}
           help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
           onUpdate={(value) => {
@@ -161,21 +170,30 @@
         />
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.width') }}
-          wrapperClass="w-120"
+          wrapperClass="w-150"
           type="number"
           value={Number(column.width.replace('%', ''))}
           onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
         />
+        <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')}
+          options={$optionsStore.ALIGN_OPTIONS}
+          onUpdate={(option) => {
+            updateTableHeader(columnIndex, 'align', { header: option.value, content: option.value })
+          }}
+        />
         <UI.Switch
-          wrapperClass="w-2/10"
-          label={{ name: $t('constructor.props.table.columns.sortable') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
           options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
           value={column.sortable}
           onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
         />
         <UI.Switch
-          wrapperClass="w-2/10"
-          label={{ name: $t('constructor.props.copy') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
           options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
           value={column.overflow?.copy}
           onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
@@ -263,6 +281,7 @@
         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}
@@ -285,6 +304,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/TextField/TextFieldProps.svelte

@@ -30,8 +30,8 @@
       (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
-  const initialBold = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('font-bold')))
-  const initialItalic = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('italic')))
+  const initialBold = $derived(component.properties.content?.class?.split(' ').some((cls: string) => cls.includes('font-bold')))
+  const initialItalic = $derived(component.properties.content?.class?.split(' ').some((cls: string) => cls.startsWith('italic')))
 </script>
 
 {#if forConstructor}
@@ -42,8 +42,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Input
@@ -77,6 +78,7 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <!-- <p>{component.properties.content?.class?.split(' ').includes((cls: string) => cls.startsWith('font-bold'))}</p> -->
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
         value={initialBold}
@@ -84,7 +86,7 @@
         onChange={(value) =>
           updateProperty(
             'content.class',
-            `${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`,
+            twMerge(`${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`),
             component,
             onPropertyChange,
           )}
@@ -94,7 +96,12 @@
         value={initialItalic}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
-          updateProperty('content.class', `${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`, component, onPropertyChange)}
+          updateProperty(
+            'content.class',
+            twMerge(`${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`),
+            component,
+            onPropertyChange,
+          )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as InputProps } from './Input/InputProps.svelte';
 export { default as Joystick } from './Joystick/Joystick.svelte';
 export { default as JoystickProps } from './Joystick/JoystickProps.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Map } from './Map/Map.svelte';
+export { default as MapProps } from './Map/MapProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';
@@ -28,4 +30,4 @@ export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';
 export * from './locales/translations';
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, } from './types';
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, } from './types';

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as InputProps } from './Input/InputProps.svelte';
 export { default as Joystick } from './Joystick/Joystick.svelte';
 export { default as JoystickProps } from './Joystick/JoystickProps.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Map } from './Map/Map.svelte';
+export { default as MapProps } from './Map/MapProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';

package/dist/locales/translations.js

@@ -41,7 +41,7 @@ const translations = {
         'constructor.props.type.vertical': 'Вертикально',
         'constructor.props.type.checkbox': 'Галочка',
         'constructor.props.type.full': 'Полный',
-        'constructor.props.type.viewOnly': 'Только просмотр',
+        'constructor.props.type.viewOnly': 'Просмотр',
         'constructor.props.type.hidden': 'Скрыто',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
@@ -67,11 +67,12 @@ const translations = {
         'constructor.props.variables.info': 'Поле для ввода имён переменных, разделенных пробелами',
         'constructor.props.value': 'Значение',
         'constructor.props.value.info': 'Поле для ввода Value пакета в формате JSON',
-        'constructor.props.align': 'Выравнивание',
+        'constructor.props.align': 'Выравнивание надписи',
         'constructor.props.align.header': 'Выравнивание заголовка',
         'constructor.props.align.content': 'Выравнивание контента',
         'constructor.props.image': 'Фоновое изображение',
         'constructor.props.labelicon': 'Иконка заголовка',
+        'constructor.props.markerIcon': 'Иконка маркера',
         'constructor.props.removeimage': 'Удалить изображение',
         'constructor.props.name': 'Текст',
         'constructor.props.height': 'Высота',
@@ -120,13 +121,12 @@ const translations = {
         'constructor.props.copy': 'Копирование',
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
-        'constructor.props.range.start': 'Начальный бит ',
-        'constructor.props.range.end': 'Последний бит',
-        'constructor.props.range.start.help': 'Позиция начального бита диапазона ',
-        'constructor.props.range.end.help': 'Позиция последнего бита диапазона',
+        'constructor.props.range': 'Диапазон позиции битов ',
         'constructor.props.icon.text.position': 'Положение иконки',
         'constructor.props.equal': 'Равные',
         'constructor.props.bitmode': 'Битовый режим',
+        'constructor.props.access': 'Доступ (не для владельца)',
+        'constructor.props.map.timeout': 'Таймаут маркеров:',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/types.d.ts

@@ -8,8 +8,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: 'full' | 'viewOnly' | 'hidden';
-    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'Joystick' | 'ProgressBar' | 'Graph' | 'Table' | 'Tabs' | 'FileAttach';
-    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps;
+    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'Joystick' | 'ProgressBar' | 'Graph' | 'Table' | 'Tabs' | 'FileAttach' | 'Map';
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps | IMapProps;
     position: Position;
     parentId: string;
 }
@@ -298,3 +298,21 @@ export interface IJoystickProps {
     }[];
     onUpdate?: (value: number[]) => void;
 }
+export interface IDeviceGNSS {
+    NavLat: number;
+    NavLon: number;
+    NavAlt: number;
+    DevName: string;
+    DevSN: string;
+    NavHeading: number;
+    NavSatUse: number;
+}
+export interface IMapProps {
+    id?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    data: IDeviceGNSS | null;
+    markerIcon?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.25",
+  "version": "1.2.27",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -36,6 +36,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
+    "svelte-maplibre-gl": "^1.0.2",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "tsx": "^4.20.6",
@@ -43,14 +44,14 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.6",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.10",
+    "svelte": "^5.43.14",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"
   }
 }