poe-svelte-ui-lib 1.2.25 → 1.2.27

package/dist/Accordion/AccordionProps.svelte

@@ -46,10 +46,10 @@
 </script>
 
 {#if forConstructor}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
@@ -137,13 +137,20 @@
     </div>
   </div>
 {:else}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <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.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.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -175,7 +182,7 @@
         onChange={(value) => updateProperty('isOpen', value, component, onPropertyChange)}
       />
     </div>
-    <div class="flex w-1/3 flex-col items-center px-2">
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Button/ButtonProps.svelte

@@ -76,7 +76,8 @@
         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)}
       />
-
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
@@ -97,15 +98,15 @@
           updateProperty('eventHandler.Variables', parts, component, onPropertyChange)
         }}
       />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        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 items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.name') }}
         value={component.properties.content.name}
@@ -139,6 +140,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}
@@ -171,13 +179,6 @@
         value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content.info.side)}
         onUpdate={(option) => updateProperty('content.info.side', option.value as string, component, onPropertyChange)}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.svgicon') }}
-        type="text-area"
-        maxlength={100000}
-        value={component.properties.content.icon}
-        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
-      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -185,14 +186,6 @@
         value={component.properties.componentClass}
         onUpdate={(value) => updateProperty('componentClass', 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', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
-      />
       <UI.Select
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.colors') }}
@@ -202,6 +195,14 @@
         onUpdate={(option) =>
           updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
       />
+
+      <UI.Input
+        label={{ name: $t('constructor.props.svgicon') }}
+        type="text-area"
+        maxlength={100000}
+        value={component.properties.content.icon}
+        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
+      />
     </div>
   </div>
 {/if}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -35,8 +35,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
@@ -51,11 +52,11 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        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">
@@ -82,10 +83,12 @@
         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.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">
@@ -101,6 +104,11 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
       <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
       <div class="flex items-center gap-3">
         <UI.TextField wrapperClass="w-4" content={{ name: 'R', class: 'font-bold' }} />

package/dist/FileAttach/FileAttach.svelte

@@ -25,6 +25,7 @@
     onChange = () => {},
   }: IFileInputProps = $props()
 
+  let ID = `${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)
 
@@ -44,7 +45,7 @@
   }
 
   const triggerFileInput = () => {
-    const input = document.getElementById(id)
+    const input = document.getElementById(ID)
     input?.click()
   }
 </script>
@@ -77,19 +78,12 @@
           <span class="text-sm text-gray-500">Image</span>
         {/if}
       </button>
-      <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-        type="file"
-        class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0"
-        {accept}
-        {disabled}
-        onchange={handleFileChange}
-      />
+      <input id={ID} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
     </div>
   {:else}
     <label class="relative inline-block w-full">
       <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        id={ID}
         type="file"
         class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
           ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 

package/dist/FileAttach/FileAttachProps.svelte

@@ -31,6 +31,8 @@
         value={component.properties.wrapperClass}
         onUpdate={(value) => updateProperty('wrapperClass', 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}

package/dist/Graph/GraphProps.svelte

@@ -27,8 +27,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)
         }}
       />
     </div>

package/dist/Input/InputProps.svelte

@@ -101,11 +101,11 @@
         }}
       />
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
@@ -128,7 +128,10 @@
           maxlength={150}
           help={{ info: $t('constructor.props.regexp.info') }}
           componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
-          onUpdate={(value) => updateProperty('help.regExp', value)}
+          onUpdate={(value) => {
+            console.log(value)
+            updateProperty('help.regExp', value as string)
+          }}
         />
       {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
         <UI.Input
@@ -170,7 +173,10 @@
         label={{ name: $t('constructor.props.readonly') }}
         value={component.properties.readonly}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => updateProperty('readonly', value)}
+        onChange={(value) => {
+          updateProperty('readonly', value)
+          console.log(component.properties)
+        }}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
@@ -247,6 +253,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.value') }}
         value={component.properties.value}

package/dist/Joystick/Joystick.svelte

@@ -4,7 +4,6 @@
 
   let {
     id = crypto.randomUUID(),
-
     wrapperClass = '',
     label = { name: '', class: '' },
     value = $bindable([0, 0, 0]),
@@ -305,7 +304,7 @@
     </div>
   </div>
 
-  <div class="absolute right-10 flex items-center">
+  <div class="right-10 flex items-center md:absolute">
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
       {#each sensitivityOptions as option, index}
         <button

package/dist/Map/Map.svelte

@@ -0,0 +1,205 @@
+<!-- $lib/ElementsUI/Map.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { IDeviceGNSS, IMapProps } from '../types'
+  import { onDestroy, onMount } from 'svelte'
+  import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, CustomControl } from 'svelte-maplibre-gl'
+  import { fade } from 'svelte/transition'
+  import { twMerge } from 'tailwind-merge'
+
+  let { id = crypto.randomUUID(), label = { name: '', class: '' }, data = $bindable(), markerIcon }: IMapProps = $props()
+
+  interface MapDevice extends IDeviceGNSS {
+    isFresh: boolean
+    timeoutId: number | null
+  }
+
+  let devices: MapDevice[] = $state([])
+  let isCopied = $state(false)
+  let isDarkMode = $state(false)
+  let markerTimeout = $state(30_000)
+
+  const restartFreshTimer = (index: number) => {
+    const device = devices[index]
+    // Очистить старый таймер, если есть
+    if (device.timeoutId !== null) {
+      clearTimeout(device.timeoutId)
+    }
+    // Запустить новый
+    const id = setTimeout(() => {
+      if (index < devices.length && devices[index].DevSN === device.DevSN) {
+        devices[index].isFresh = false
+        devices[index].timeoutId = null
+      }
+    }, markerTimeout) as unknown as number
+    devices[index].timeoutId = id
+    devices[index].isFresh = true
+  }
+
+  // Обработка входящих данных
+  $effect(() => {
+    if (data) {
+      const idx = devices.findIndex((d) => d.DevSN === data?.DevSN)
+      if (idx !== -1) {
+        // Обновление существующего
+        devices[idx] = { ...devices[idx], ...data }
+        restartFreshTimer(idx)
+      } else {
+        // Новое устройство
+        const newDevice: MapDevice = {
+          ...data,
+          isFresh: true,
+          timeoutId: null,
+        }
+        devices.push(newDevice)
+        restartFreshTimer(devices.length - 1)
+      }
+      data = null
+    }
+  })
+
+  const handleThemeChange = (event: CustomEvent) => {
+    isDarkMode = !event.detail.currentTheme
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      isDarkMode = localStorage.getItem('AppTheme') !== 'light'
+      window.addEventListener('ThemeChange', handleThemeChange as EventListener)
+    }
+  })
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') window.addEventListener('ThemeChange', handleThemeChange as EventListener)
+
+    for (const device of devices) {
+      if (device.timeoutId !== null) {
+        clearTimeout(device.timeoutId)
+      }
+    }
+  })
+
+  const timeoutOptions: { label: string; value: number }[] = [
+    { label: '30 sec', value: 30_000 },
+    { label: '1 min', value: 60_000 },
+    { label: '3 min', value: 180_000 },
+    { label: '5 min', value: 300_000 },
+    { label: '10 min', value: 600_000 },
+    { label: '30 min', value: 1_800_000 },
+    { label: '1 h', value: 3_600_000 },
+  ]
+
+  const changeTimeout = (val: number) => {
+    markerTimeout = val
+    // перезапускаем таймеры для всех устройств
+    devices.forEach((_, idx) => restartFreshTimer(idx))
+  }
+</script>
+
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="h-full min-h-[200px]">
+  {#if label.name}
+    <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
+  {/if}
+  <MapLibre
+    class="h-[calc(100%-2rem)] min-h-[200px]"
+    style={isDarkMode
+      ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
+      : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'}
+    zoom={1.5}
+    center={{ lat: 30, lng: 0 }}
+  >
+    <NavigationControl />
+    <ScaleControl />
+    <GeolocateControl />
+    <FullScreenControl />
+
+    <CustomControl position="top-left">
+      <div class="flex items-center gap-2 px-2 py-1 text-black">
+        <label for="timeout" class="text-sm font-medium">{$t('constructor.props.map.timeout')}</label>
+        <select
+          id="timeout"
+          class="rounded px-2 py-1 text-sm"
+          bind:value={markerTimeout}
+          onchange={(e) => changeTimeout(parseInt((e.target as HTMLSelectElement).value))}
+        >
+          {#each timeoutOptions as opt}
+            <option value={opt.value}>{opt.label}</option>
+          {/each}
+        </select>
+      </div>
+    </CustomControl>
+
+    {#each devices as device}
+      <Marker lnglat={{ lng: device.NavLon, lat: device.NavLat }}>
+        {#snippet content()}
+          <div class="flex flex-col items-center justify-center leading-none">
+            <div
+              class="flex size-8 shrink-0 items-center justify-center [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full
+            {device.isFresh ? 'text-green-500' : 'text-red-500'}"
+              style="rotate: {device.NavHeading - 90}deg;"
+            >
+              {@html markerIcon ||
+                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"/></svg>'}
+            </div>
+            <p class="font-bold">{device.DevName}</p>
+          </div>
+        {/snippet}
+        <Popup closeButton={false} class="rounded-2xl text-left">
+          <p>DevSN: {device.DevSN}</p>
+          <p>Lat: {`${device.NavLat.toFixed(3)} | Lon: ${device.NavLon.toFixed(3)} | Alt: ${device.NavAlt}`}</p>
+          <p>Heading: {device.NavHeading} | Sat Use: {device.NavSatUse}</p>
+
+          <div class="relative flex justify-between">
+            <button
+              class="absolute right-0 flex cursor-pointer border-none bg-transparent"
+              onclick={(e) => {
+                e.preventDefault()
+                navigator.clipboard.writeText(
+                  `DevName: ${device.DevName}\nDevSN: ${device.DevSN}\nLat: ${device.NavLat.toFixed(3)} | Lon: ${device.NavLon.toFixed(3)} | Alt: ${device.NavAlt}\nHeading: ${device.NavHeading} | Sat Use: ${device.NavSatUse}`,
+                )
+                isCopied = true
+                setTimeout(() => (isCopied = false), 1000)
+              }}
+              aria-label="Копировать текст"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+                <g fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path
+                    d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                  />
+                  <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                </g>
+              </svg>
+            </button>
+            {#if isCopied}
+              <div
+                class="absolute top-1/2 right-0 -translate-y-1/2 transform rounded-md bg-(--green-color) px-2 py-1 text-sm shadow-lg"
+                transition:fade={{ duration: 200 }}
+              >
+                ✓
+              </div>
+            {/if}
+
+            <button
+              class="size-6 cursor-pointer"
+              aria-label="Удалить"
+              onclick={() => (devices = devices.filter((dev) => dev.DevSN !== device.DevSN))}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
+                ><path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.5"
+                  d="m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6"
+                  color="currentColor"
+                /></svg
+              >
+            </button>
+          </div>
+        </Popup>
+      </Marker>
+    {/each}
+  </MapLibre>
+</div>

package/dist/Map/Map.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IMapProps } from '../types';
+declare const Map: import("svelte").Component<IMapProps, {}, "data">;
+type Map = ReturnType<typeof Map>;
+export default Map;