poe-svelte-ui-lib 1.3.1 → 1.3.3

package/dist/Accordion/Accordion.svelte

@@ -36,7 +36,12 @@
         class={`flex h-7 w-7 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}
-          {@html label.icon}
+          {#if typeof label?.icon === 'string'}
+            {@html label.icon}
+          {:else}
+            {@const IconComponent = label?.icon}
+            <IconComponent />
+          {/if}
         {/if}
       </span>
 

package/dist/Button/Button.svelte

@@ -88,7 +88,7 @@
     <div class=" flex flex-row items-center justify-center gap-2">
       {#if content?.icon}
         <span
-          class={` ${content.name ? 'absolute left-3' : ''}  flex items-center justify-center overflow-visible 
+          class={` ${content.name ? 'absolute left-3' : ''} ${typeof content?.icon == 'string' ? 'p-0.5' : ''}  flex items-center justify-center overflow-visible 
             ${content.name ? 'h-8 w-8' : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
         >
           {#if typeof content?.icon === 'string'}

package/dist/Button/ButtonProps.svelte

@@ -5,6 +5,10 @@
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import Modal from '../Modal.svelte'
+  import { ICONS } from '../icons'
+  import Button from './Button.svelte'
 
   const {
     component,
@@ -16,6 +20,8 @@
     forConstructor?: boolean
   }>()
 
+  let showIconLib = $state(false)
+
   let hasValue: boolean = $derived(component.eventHandler.Value)
 
   let Header: ISelectOption = $derived(
@@ -104,6 +110,43 @@
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
         onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
+      <div class="relative mt-6 flex w-full gap-2">
+        <UI.Button content={{ name: $t('constructor.props.buttonIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('content.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.content.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('content.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
@@ -194,14 +237,43 @@
         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 class="relative mt-6 flex w-full gap-2">
+        <UI.Button content={{ name: $t('constructor.props.buttonIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('content.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.content.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('content.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
     </div>
   </div>
 {/if}

package/dist/ComponentExample.svelte

@@ -17,15 +17,36 @@
   <div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
     {@render componentProps()}
     <div class="relative mt-3">
-      <UI.Button
-        wrapperClass="absolute top-3 right-5 w-6"
-        content={{ icon: isCopied ? '<div class="rounded-md bg-(--green-color) shadow-lg px-1">✓</div>' : CopyButton }}
-        onClick={() => {
+      <button
+        class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
+        onclick={(e) => {
+          e.preventDefault()
+          navigator.clipboard.writeText(codeText)
           isCopied = true
           setTimeout(() => (isCopied = false), 1000)
-          navigator.clipboard.writeText(codeText)
         }}
-      />
+        aria-label="Копировать текст"
+      >
+        <div class=" size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
+          {#if isCopied}
+            <div
+              class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
+              transition:fade={{ duration: 200 }}
+            >
+              ✓
+            </div>
+          {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
+          {/if}
+        </div>
+      </button>
       <pre class="overflow-x-auto">{codeText}
   </pre>
     </div>

package/dist/Joystick/Joystick.svelte

@@ -177,15 +177,27 @@
         class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103"
       >
         <button
-          class="flex size-18 cursor-pointer items-center justify-center rounded-full"
+          class="flex size-18 cursor-pointer items-center justify-center rounded-full p-3.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
           style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
           onclick={() => {
             value[3] = value[3] == 0 ? 1 : 0
           }}
         >
-          {@html buttonIcon
-            ? buttonIcon
-            : '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor"d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"/></svg>'}
+          {#if buttonIcon}
+            {#if typeof buttonIcon === 'string'}
+              {@html buttonIcon}
+            {:else}
+              {@const IconComponent = buttonIcon}
+              <IconComponent />
+            {/if}
+          {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+              ><path
+                fill="currentColor"
+                d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
+              /></svg
+            >
+          {/if}
         </button>
       </div>
     </div>

package/dist/Map/Map.svelte

@@ -136,10 +136,29 @@
             <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;"
+              style="rotate: {device.NavHeading}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>'}
+              {#if markerIcon}
+                {#if typeof markerIcon === 'string'}
+                  {@html markerIcon}
+                {:else}
+                  {@const IconComponent = markerIcon}
+                  <IconComponent />
+                {/if}
+              {:else}
+                <div class="rotate-270">
+                  <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>
+              {/if}
             </div>
             <p class="font-bold">{device.DevName}</p>
           </div>

package/dist/ProgressBar/ProgressBar.svelte

@@ -7,7 +7,7 @@
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
-    value = $bindable(0),
+    value = $bindable([0]),
     type = 'horizontal',
     number = {
       minNum: 0,
@@ -16,29 +16,35 @@
     },
   }: IProgressBarProps = $props()
 
+  let innerValue: number[] | null = $derived(
+    (() => {
+      if (typeof value == 'number') {
+        return [value]
+      } else return value
+    })(),
+  )
+
   const min = $derived(number.minNum ?? 0)
   const max = $derived(number.maxNum ?? 100)
 
-  let numericValue = $derived(
-    (() => {
-      if (typeof value === 'number' && !isNaN(value)) {
-        return Math.max(min, Math.min(max, value))
-      } else if (typeof value === 'string') {
-        const parsedValue = parseFloat(value)
-        if (!isNaN(parsedValue)) {
-          return Math.max(min, Math.min(max, parsedValue))
-        }
-      } else {
-        return min
+  const numericValue = (value: number) => {
+    if (typeof value === 'number' && !isNaN(value)) {
+      return Math.max(min, Math.min(max, value))
+    } else if (typeof value === 'string') {
+      const parsedValue = parseFloat(value)
+      if (!isNaN(parsedValue)) {
+        return Math.max(min, Math.min(max, parsedValue))
       }
-    })(),
-  )
+    } else {
+      return min
+    }
+  }
 
-  const progressPercent = $derived(() => {
+  const progressPercent = (value: number) => {
     if (value) {
       return (((Math.min(Math.max(value, min), max) - min) / (max - min)) * 100) as number
     }
-  })
+  }
 
   const roundToClean = (num: number): number => {
     if (Number.isInteger(num)) return num
@@ -60,20 +66,27 @@
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
-
   {#if type == 'vertical'}
-    <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2">
-      <div class="relative my-auto h-[80%] w-[70%] rounded-full bg-(--back-color)/40">
-        <div class="absolute bottom-0 left-0 flex w-full rounded-full bg-(--field-color)" style="height: {progressPercent()}%;"></div>
-      </div>
-      <span class="m-auto font-semibold">{roundToClean(Number(numericValue))}{number.units}</span>
+    <div class="flex h-full flex-wrap gap-3">
+      {#each innerValue as val}
+        <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2">
+          <div class="relative my-auto h-[80%] w-[70%] rounded-full bg-(--back-color)/40">
+            <div class="absolute bottom-0 left-0 flex w-full rounded-full bg-(--field-color)" style="height: {progressPercent(val)}%;"></div>
+          </div>
+          <span class="m-auto font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
+        </div>
+      {/each}
     </div>
   {:else}
-    <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
-      <span class="m-auto font-semibold">{roundToClean(Number(numericValue))}{number.units}</span>
-      <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
-        <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent()}%;"></div>
-      </div>
+    <div class="flex w-full flex-col gap-2">
+      {#each innerValue as val}
+        <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+          <span class="m-auto font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
+          <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
+            <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent(val)}%;"></div>
+          </div>
+        </div>
+      {/each}
     </div>
   {/if}
 </div>

package/dist/Select/Select.svelte

@@ -9,9 +9,6 @@
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
 
-  let searchValue = $state('')
-  let filteredOptions = $state<ISelectOption<T>[]>([])
-
   let {
     id = crypto.randomUUID(),
     wrapperClass = '',
@@ -23,6 +20,9 @@
     onUpdate,
   }: ISelectProps<T> = $props()
 
+  let searchValue = $state('')
+  let filteredOptions = $state<ISelectOption<T>[]>([])
+
   /* Закрытие при клике вне компонента */
   const handleClickOutside = (event: MouseEvent) => {
     if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
@@ -30,6 +30,10 @@
     }
   }
 
+  $effect(() => {
+    searchValue = value?.name ?? ''
+  })
+
   onMount(() => {
     if (type === 'select' || type === 'input') document.addEventListener('click', handleClickOutside)
     if (type === 'input') searchValue = value?.name ?? ''

package/dist/Tabs/Tabs.svelte

@@ -48,7 +48,12 @@
       >
         {#if item?.icon}
           <span class="flex h-7 w-7 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-            {@html item.icon}
+            {#if typeof item.icon === 'string'}
+              {@html item.icon}
+            {:else}
+              {@const IconComponent = item.icon}
+              <IconComponent />
+            {/if}
           </span>
         {/if}
         {#if item?.name}

package/dist/types.d.ts

@@ -69,7 +69,7 @@ export interface IButtonProps {
 }
 export interface IAccordionProps {
     id?: string;
-    isOpen: boolean;
+    isOpen?: boolean;
     outline?: boolean;
     wrapperClass?: string;
     size?: {
@@ -79,7 +79,7 @@ export interface IAccordionProps {
     label?: {
         name?: string;
         class?: string;
-        icon?: string | null;
+        icon?: ConstructorOfATypedSvelteComponent | string | null;
     };
     children?: Snippet;
     image?: string;
@@ -199,7 +199,7 @@ export interface IProgressBarProps {
         name?: string;
         class?: string;
     };
-    value?: number | null;
+    value?: number | number[] | null;
     number?: {
         minNum?: number;
         maxNum?: number;
@@ -291,7 +291,7 @@ export interface ITabsProps {
     activeTab?: number;
     items: {
         name?: string;
-        icon?: string;
+        icon?: ConstructorOfATypedSvelteComponent | string;
         class?: string;
         children?: Snippet;
     }[];
@@ -312,7 +312,7 @@ export interface IJoystickProps {
         minNum?: number;
         maxNum?: number;
     }[];
-    buttonIcon?: string;
+    buttonIcon?: ConstructorOfATypedSvelteComponent | string;
     onUpdate?: (value: number[]) => void;
 }
 export interface IDeviceGNSS {
@@ -331,7 +331,7 @@ export interface IMapProps {
         class?: string;
     };
     data: IDeviceGNSS | null;
-    markerIcon?: string;
+    markerIcon?: ConstructorOfATypedSvelteComponent | string;
 }
 export interface IFileAttachProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -45,11 +45,11 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.0",
-    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.44.1",
+    "svelte": "^5.45.2",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"