poe-svelte-ui-lib 1.1.22 → 1.2.1

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

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { join } from 'path';
 const scanAllIcons = async () => {
-    const dirPath = 'src/lib/IconsLib';
+    const dirPath = 'src/lib/IconsCatalog';
     const files = fs.readdirSync(dirPath);
     const categories = {};
     files

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/Tabs/Tabs.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { ITabsProps } from '../types'
+  import { onMount } from 'svelte'
+  import { twMerge } from 'tailwind-merge'
+
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = '',
+    size = { width: 12, height: 6 },
+    activeTab = 0,
+    items = [
+      {
+        name: 'tab 1',
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"\r\n  ><path\r\n    fill="none"\r\n    stroke="currentColor"\r\n    stroke-linecap="round"\r\n    stroke-linejoin="round"\r\n    stroke-width="1.5"\r\n    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"\r\n  /></svg\r\n>\r\n',
+        class: '',
+      },
+      { name: 'tab 2', icon: '', class: 'bg-red' },
+    ],
+    apiArray = [],
+    Components,
+  }: ITabsProps = $props()
+
+  const isCol = $derived(items.find((item) => item.class?.startsWith('flex-col')))
+
+  let currentTabIndex: number = $state(activeTab)
+</script>
+
+<div {id} class="w-full rounded-2xl bg-(--back-color)">
+  <!-- Вкладки -->
+  <div
+    class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1 pt-1', wrapperClass)} 
+     bg-(--bg-color)"
+  >
+    {#each items as item, index}
+      <button
+        class={twMerge(
+          `tab mt-1 flex min-w-fit cursor-pointer items-center justify-center gap-0 self-end rounded-t-2xl px-5 py-2.5 ${!isCol && 'gap-2'}`,
+          item.class,
+          index === currentTabIndex ? twMerge('bg-(--back-color) text-blue-500', item.class) : 'bg-(--bg-color) text-gray-500',
+        )}
+        onclick={() => (currentTabIndex = index)}
+      >
+        {#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}
+          </span>
+        {/if}
+        {#if item?.name}
+          <span class="text-lg font-semibold">{item.name}</span>
+        {/if}
+      </button>
+      <span
+        class="h-[{isCol && items.find((item) => item.icon) ? 35 : 16}px] w-0 border border-l {index !== items.length - 1 &&
+        index !== currentTabIndex &&
+        index !== currentTabIndex - 1
+          ? 'border-gray-500'
+          : 'border-(--bg-color)'}"
+      ></span>
+    {/each}
+  </div>
+
+  <!-- Контент вкладки -->
+  <div
+    class="grid w-full gap-2 rounded-2xl bg-(--back-color) p-4"
+    style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr)); grid-template-rows: repeat({size.height || 1}, auto);"
+  >
+    {#if Components}
+      {#each (apiArray ?? []).filter((c) => c.id.endsWith(`${currentTabIndex}`)) as comp}
+        {@render Components(comp, false)}
+      {/each}
+    {:else}
+      {@render items[currentTabIndex]?.children?.()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  ::-webkit-scrollbar-track {
+    background: var(--back-color);
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--bg-color), var(--back-color) 20%);
+    border-radius: 8px;
+    cursor: pointer;
+  }
+</style>

package/dist/Tabs/Tabs.svelte.d.ts

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

package/dist/Tabs/TabsProps.svelte

@@ -0,0 +1,420 @@
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { updateProperty, type ISelectOption, type ITabsProps, type UIComponent } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+  import { ICONS } from '../icons'
+  import Modal from '../Modal.svelte'
+  import Button from '../Button/Button.svelte'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import { twMerge } from 'tailwind-merge'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<ITabsProps> }
+    onPropertyChange: (value: string | object, name?: string) => void
+    forConstructor?: boolean
+  }>()
+
+  let showIconLib = $state(false)
+  let tabIcon = $state({ index: 0, isModalOpen: false })
+
+  const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
+
+  const initialAlign = $derived(
+    $optionsStore.JUSTIFY_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('justify-'))),
+    ),
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  const initialPosition = $derived(
+    $optionsStore.ICON_TEXT_POSITION_OPTIONS.find((c) =>
+      (c.value as string).includes(
+        component.properties.items
+          .find((item: ISelectOption) => item.class?.includes('flex-'))
+          .class.split(' ')
+          .find((cls: string) => cls.startsWith('flex-')),
+      ),
+    ),
+  )
+
+  const initialWidth = $derived(() => {
+    let width = component.properties.items.find((item: ISelectOption) => item.class?.split(' ').find((cls: string) => cls.startsWith('w-')))
+    if (!width) {
+      return 1
+    } else if (width.class.includes('w-auto')) return 1
+    else return 2
+  })
+
+  const handleImageUpload = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    if (!input.files || input.files.length === 0) return
+
+    const file = input.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const base64String = e.target?.result as string
+      updateProperty('image', base64String, component, onPropertyChange)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  let currentImage = $derived(component.properties.image ?? '')
+</script>
+
+{#if forConstructor}
+  <div class="flex items-center justify-center gap-8">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
+
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS.slice(1)}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, `text-${option.value?.slice(3)}-500`)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.icon.text.position') }}
+        type="buttons"
+        options={$optionsStore.ICON_TEXT_POSITION_OPTIONS}
+        value={initialPosition}
+        onUpdate={(option) => {
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, option.value)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+      <UI.Switch
+        label={{
+          name: $t('constructor.props.widthMode'),
+          captionLeft: $t('constructor.props.height.small'),
+          captionRight: $t('constructor.props.equal'),
+        }}
+        value={initialWidth()}
+        onChange={(value) => {
+          if (value === 2) {
+            component.properties.items.forEach((_item: any, index: number) => {
+              let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, `w-[${tabWidth}px]`)
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          } else {
+            component.properties.items.forEach((_item: any, index: number) => {
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, 'w-auto')
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          }
+          console.log(component.properties?.items)
+        }}
+      />
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+          const newItem: { name: string; icon: string; class: string } = {
+            name: `Tab ${component.properties?.items.length + 1}`,
+            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            icon: '',
+          }
+          const items = [...(component.properties?.items || []), newItem]
+          updateProperty('items', items, component, onPropertyChange)
+        }}
+      />
+    </div>
+
+    {#each component.properties.items || [] as tab, index}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="w-5/10"
+          value={tab.name}
+          onUpdate={(value) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['name'] = value
+            updateProperty('items', items, component, onPropertyChange)
+          }}
+        />
+        <div class="relative mt-5 flex w-3/10 gap-2">
+          <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (tabIcon = { index: index, isModalOpen: true })} />
+
+          {#if tab.icon}
+            <Button
+              wrapperClass="w-8.5 "
+              componentClass="p-0.5 bg-red"
+              content={{ icon: CrossIcon }}
+              onClick={() => {
+                const items = [...(component.properties?.items || [])]
+                items[index]['icon'] = ''
+                updateProperty('items', items, component, onPropertyChange)
+              }}
+            />
+          {/if}
+        </div>
+
+        {#if component.properties.items.length > 1}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const items = [...(component.properties?.items || [])]
+              items.splice(index, 1)
+              updateProperty('items', items, component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    {/each}
+    {#if tabIcon.isModalOpen}
+      <Modal bind:isOpen={tabIcon.isModalOpen} 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={() => {
+                        const items = [...(component.properties?.items || [])]
+                        items[tabIcon.index]['icon'] = icon as string
+                        updateProperty('items', items, component, onPropertyChange)
+                      }}
+                    >
+                      {@html icon}
+                    </button>{/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/snippet}
+      </Modal>
+    {/if}
+  </div>
+{:else}
+  <div class="flex items-center 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.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <div class="flex w-full gap-4">
+        <UI.Input
+          label={{ name: $t('constructor.props.size.height') }}
+          value={component.properties.size.height}
+          onUpdate={(value) => updateProperty('size.height', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.size.width') }}
+          value={component.properties.size.width}
+          onUpdate={(value) => updateProperty('size.width', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+      </div>
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
+
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS.slice(1)}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, `text-${option.value?.slice(3)}-500`)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.icon.text.position') }}
+        type="buttons"
+        options={$optionsStore.ICON_TEXT_POSITION_OPTIONS}
+        value={initialPosition}
+        onUpdate={(option) => {
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, option.value)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+      <UI.Switch
+        label={{
+          name: $t('constructor.props.widthMode'),
+          captionLeft: $t('constructor.props.height.small'),
+          captionRight: $t('constructor.props.equal'),
+        }}
+        value={initialWidth()}
+        onChange={(value) => {
+          if (value === 2) {
+            component.properties.items.forEach((_item: any, index: number) => {
+              let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, `w-[${tabWidth}px]`)
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          } else {
+            component.properties.items.forEach((_item: any, index: number) => {
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, 'w-auto')
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          }
+          console.log(component.properties?.items)
+        }}
+      />
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+          const newItem: { name: string; icon: string; class: string } = {
+            name: `Tab ${component.properties?.items.length + 1}`,
+            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            icon: '',
+          }
+          const items = [...(component.properties?.items || []), newItem]
+          updateProperty('items', items, component, onPropertyChange)
+        }}
+      />
+    </div>
+
+    {#each component.properties.items || [] as tab, index}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="w-5/10"
+          value={tab.name}
+          onUpdate={(value) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['name'] = value
+            updateProperty('items', items, component, onPropertyChange)
+          }}
+        />
+        <div class="relative mt-5 flex w-3/10 gap-2">
+          <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (tabIcon = { index: index, isModalOpen: true })} />
+
+          {#if tab.icon}
+            <Button
+              wrapperClass="w-8.5 "
+              componentClass="p-0.5 bg-red"
+              content={{ icon: CrossIcon }}
+              onClick={() => {
+                const items = [...(component.properties?.items || [])]
+                items[index]['icon'] = ''
+                updateProperty('items', items, component, onPropertyChange)
+              }}
+            />
+          {/if}
+        </div>
+
+        {#if component.properties.items.length > 1}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const items = [...(component.properties?.items || [])]
+              items.splice(index, 1)
+              updateProperty('items', items, component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    {/each}
+    {#if tabIcon.isModalOpen}
+      <Modal bind:isOpen={tabIcon.isModalOpen} 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={() => {
+                        const items = [...(component.properties?.items || [])]
+                        items[tabIcon.index]['icon'] = icon as string
+                        updateProperty('items', items, component, onPropertyChange)
+                      }}
+                    >
+                      {@html icon}
+                    </button>{/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/snippet}
+      </Modal>
+    {/if}
+  </div>
+{/if}

package/dist/Tabs/TabsProps.svelte.d.ts

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

package/dist/index.d.ts

@@ -20,8 +20,10 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabsProps } from './Tabs/TabsProps.svelte';
 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, } 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 IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, } from './types';

package/dist/index.js

@@ -10,6 +10,8 @@ export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';
 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 ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
@@ -21,6 +23,8 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabsProps } from './Tabs/TabsProps.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';

package/dist/locales/translations.js

@@ -111,6 +111,8 @@ const translations = {
         'constructor.props.copy': 'Копирование',
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
+        'constructor.props.icon.text.position': 'Положение иконки',
+        'constructor.props.equal': 'Равные',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/options.d.ts

@@ -65,6 +65,16 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    JUSTIFY_ALIGN_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
+    ICON_TEXT_POSITION_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     HEIGHT_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -76,6 +76,17 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'center', name: $t('constructor.props.align.center') },
             { id: id(), value: 'right', name: $t('constructor.props.align.right') },
         ],
+        JUSTIFY_ALIGN_OPTIONS: [
+            { id: id(), value: 'justify-start', name: $t('constructor.props.align.left') },
+            { id: id(), value: 'justify-center', name: $t('constructor.props.align.center') },
+            { id: id(), value: 'justify-end', name: $t('constructor.props.align.right') },
+        ],
+        ICON_TEXT_POSITION_OPTIONS: [
+            { id: id(), value: 'flex-row', name: '←' },
+            { id: id(), value: 'flex-col', name: '↑' },
+            { id: id(), value: 'flex-row-reverse', name: '→' },
+            { id: id(), value: 'flex-col-reverse', name: '↓' },
+        ],
         HEIGHT_OPTIONS: [
             { id: id(), value: 'py-1', name: $t('constructor.props.height.small') },
             { id: id(), value: 'py-2', name: $t('constructor.props.height.medium') },

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, Snippet } from 'svelte';
+import type { 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 & {
@@ -7,9 +7,8 @@ export declare const updateProperty: (path: string, value: string | number | boo
 export interface UIComponent {
     id: string;
     name?: string;
-    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;
+    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;
     position: Position;
     parentId: string;
 }
@@ -256,3 +255,20 @@ export interface ITableProps<T extends object> {
     };
     onClick?: (eventHandler: IUIComponentHandler) => void;
 }
+export interface ITabsProps {
+    id?: string;
+    wrapperClass?: string;
+    size?: {
+        height?: number;
+        width?: number;
+    };
+    activeTab?: number;
+    items: {
+        name?: string;
+        icon?: string;
+        class?: string;
+        children?: Snippet;
+    }[];
+    apiArray?: UIComponent[];
+    Components?: Snippet<[component: UIComponent, fixedHeight: boolean]>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.22",
+  "version": "1.2.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "prepack": "svelte-kit sync && svelte-package && publint",
     "CheckUpdate": "npx npm-check-updates -u && npm install",
-    "UpdateIconsLib": "tsx src/lib/IconsLib/iconsLib.ts"
+    "UpdateIconsLib": "tsx src/lib/IconsCatalog/iconsLib.ts"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -33,12 +33,12 @@
   },
   "dependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"
   },
@@ -48,9 +48,9 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.0",
     "publint": "^0.3.15",
-    "svelte": "^5.43.3",
+    "svelte": "^5.43.5",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.1.12",
+    "vite": "^7.2.2",
     "vite-plugin-compression": "^0.5.1"
   }
 }