poe-svelte-ui-lib 1.1.21 → 1.2.0

package/dist/Accordion/AccordionProps.svelte

@@ -4,7 +4,7 @@
   import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
-  import { ICONS } from './icons'
+  import { ICONS } from '../icons'
   import Modal from '../Modal.svelte'
   import Button from '../Button/Button.svelte'
   import CrossIcon from '../libIcons/CrossIcon.svelte'
@@ -63,7 +63,7 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <div class="relative mt-6 flex w-full gap-2">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}
@@ -174,7 +174,7 @@
         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)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}

package/dist/FileAttach/FileAttach.svelte

@@ -41,7 +41,6 @@
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
-    // console.log('!!! curr:', currentImage, 'prev:', previewUrl)
   }
 
   const triggerFileInput = () => {

package/dist/Graph/GraphProps.svelte

@@ -14,8 +14,6 @@
     forConstructor?: boolean
   }>()
 
-  console.log(component.properties.streamingData)
-
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 </script>

package/dist/{Accordion/IconsLib → IconsCatalog}/common.edit.svg

@@ -1,10 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<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.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"
-  /></svg
->
+  />
+</svg>

package/dist/{Accordion/IconsLib → IconsCatalog}/iconsLib.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { join } from 'path';
 const scanAllIcons = async () => {
-    const dirPath = 'src/lib/Accordion/IconsLib';
+    const dirPath = 'src/lib/IconsCatalog';
     const files = fs.readdirSync(dirPath);
     const categories = {};
     files
@@ -31,7 +31,7 @@ ${Object.entries(categories)
 ]
 
 `;
-    fs.writeFileSync('src/lib/Accordion/icons.ts', content);
+    fs.writeFileSync('src/lib/icons.ts', content);
     console.log('icons.ts создан:', Object.keys(categories));
 };
 scanAllIcons();

package/dist/{Accordion/IconsLib → IconsCatalog}/settings.debug.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"
 >
   <path
     fill="currentColor"

package/dist/{Accordion/IconsLib → IconsCatalog}/settings.save.svg

@@ -1,6 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+>
+  <path
     fill="currentColor"
     d="M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z"
-  /></svg
->
+  />
+</svg>

package/dist/Input/Input.svelte

@@ -223,7 +223,7 @@
       {#if showInfo}
         <div
           transition:fly={{ x: -15, duration: 250 }}
-          class="absolute top-1/2 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
+          class="absolute top-5 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
         >
           {help?.info}
         </div>

package/dist/Joystick/Joystick.svelte

@@ -0,0 +1,97 @@
+<!-- $lib/ElementsUI/ProgressBar.svelte -->
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge'
+  import type { IProgressBarProps } from '../types'
+
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    value = $bindable(0),
+    number = {
+      minNum: 0,
+      maxNum: 100,
+      units: '%',
+    },
+  }: IProgressBarProps = $props()
+
+  const directions = [
+    { id: 'right', angle: 30.5, content: true },
+    { id: 'bottom-right', angle: 58, content: false },
+    { id: 'bottom', angle: 122, content: true },
+    { id: 'bottom-left', angle: 149.5, content: false },
+    { id: 'left', angle: 212, content: true },
+    { id: 'top-left', angle: 239, content: false },
+    { id: 'top', angle: 301, content: true },
+    {
+      id: 'top-right',
+      angle: 328,
+      content: false,
+    },
+  ]
+
+  let sectorHeight = 2 * 5 * Math.sin(Math.PI / directions.length)
+  let clipPos = Math.cos(Math.PI / directions.length) * 100
+  let angle = 360 / directions.length
+</script>
+
+<div {id} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
+  {#if label.name}
+    <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
+  {/if}
+
+  <div class="relative flex size-40 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_20px_rgb(0_0_0_/0.25)]">
+    <div class="absolute h-full w-full overflow-hidden rounded-full">
+      {#each directions as direction, index}
+        <button class="pointer-events-none absolute top-1/2 left-1/2 block w-1/2 -translate-y-1/2 cursor-pointer" title="">
+          <span
+            class="relative flex w-full origin-left items-center justify-center pl-[60%] h-[{direction.content
+              ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
+              : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem] pointer-events-auto
+            {direction.content ? 'bg-(--bg-color)' : ''}
+            "
+            style="transform: rotate({angle * index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)"
+            role="application"
+            onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)')}
+            onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'var(--bg-color)')}
+          >
+            {#if direction.content}
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+                ><path
+                  fill="currentColor"
+                  d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"
+                /></svg
+              >
+            {/if}
+          </span>
+        </button>
+      {/each}
+    </div>
+    <div class=" pointer-events-none absolute h-full w-full overflow-hidden rounded-full">
+      {#each directions as direction, index}
+        <span
+          class=" absolute top-1/2 left-1/2 h-0 w-[52%] origin-left border-b border-(--bg-color) {index % 2 == 0
+            ? 'shadow-[0_3px_5px_rgb(0_0_0_/0.5)] '
+            : 'shadow-[0_-3px_5px_rgb(0_0_0_/0.5)]'}"
+          style="transform: rotate({direction.angle}deg);"
+        >
+        </span>
+      {/each}
+    </div>
+    <div class="z-10 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)]">
+      <button class="flex size-18 cursor-pointer items-center justify-center rounded-full bg-(--bg-color)" title=""
+        ><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
+        ></button
+      >
+    </div>
+  </div>
+
+  <!-- {direction.content ? 2 * 6.25 * Math.sin((Math.PI * 65) / 360) : 2 * 6.25 * Math.sin((Math.PI * 25) / 360)} -->
+  <!-- angle / 2 + angle * index -->
+  <!--             ? 'shadow-[0_-2px_5px_rgb(254_202_202)] '
+            : 'shadow-[0_2px_5px_rgb(254_202_202)]'}" -->
+</div>

package/dist/Joystick/Joystick.svelte.d.ts

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

package/dist/Joystick/JoystickProps.svelte.d.ts

@@ -0,0 +1,26 @@
+export default JoystickProps;
+type JoystickProps = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const JoystickProps: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ProgressBar/ProgressBar.svelte

@@ -24,7 +24,6 @@
         return Math.max(min, Math.min(max, value))
       } else if (typeof value === 'string') {
         const parsedValue = parseFloat(value)
-        console.log(value)
         if (!isNaN(parsedValue)) {
           return Math.max(min, Math.min(max, parsedValue))
         }
@@ -46,11 +45,10 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex w-full flex-col items-center">
-    <div class="relative h-7 w-full rounded-full bg-gray-400">
-      <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--bg-color)" style="width: {progressPercent()}%;">
-        <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
-      </div>
+  <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+    <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{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>
 </div>

package/dist/Table/Table.svelte

@@ -98,7 +98,6 @@
       rawData: text,
       formattedData: formatting ? formatting(text) : (text ?? ''),
     }
-    // console.log(modalData)
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
@@ -186,7 +185,7 @@
                     </button>
                   {/each}
                 </div>
-              {:else if column.image}
+              {:else if column.image?.src || column.image?.defaultIcon}
                 <div
                   class="flex items-center justify-center"
                   style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}
@@ -199,14 +198,16 @@
                       loading="lazy"
                     />
                   {:else if column.image.defaultIcon}
-                    <column.image.defaultIcon />
+                    {#if typeof column.image.defaultIcon === 'string'}
+                      {@html column.image.defaultIcon}
+                    {:else}
+                      <column.image.defaultIcon />
+                    {/if}
                   {/if}
                 </div>
               {:else}
                 <div
-                  class="w-full max-w-full wrap-break-word {column.overflow?.truncated
-                    ? 'overflow-hidden text-ellipsis whitespace-nowrap'
-                    : 'whitespace-normal '}"
+                  class=" w-full max-w-full wrap-break-word {column.overflow?.truncated ? 'truncate' : ' whitespace-normal'}"
                   onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
                   onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
                   onmousemove={column.overflow?.truncated
@@ -232,6 +233,9 @@
                     {@html row[column.key]}
                   {/if}
                 </div>
+                <!-- {#if column.overflow?.truncated}
+                  <div class="whitespace-nowrap">{row[column.key].slice(-5)}</div>
+                {/if} -->
 
                 {#if column.overflow?.copy}
                   <button