poe-svelte-ui-lib 1.5.6 → 1.5.9

package/dist/ProgressBar/ProgressBar.svelte

@@ -81,8 +81,8 @@
     <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 shadow-sm">
-          <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">
+          <span class="m-auto w-20 font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
+          <div class="relative my-auto h-3.5 flex-1 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>

package/dist/Select/Select.svelte

@@ -20,7 +20,7 @@
     onUpdate,
   }: ISelectProps<T> = $props()
 
-  let searchValue = $state('')
+  let searchValue: any = $state('')
   let filteredOptions = $state<ISelectOption<T>[]>([])
 
   /* Закрытие при клике вне компонента */
@@ -31,7 +31,16 @@
   }
 
   $effect(() => {
-    searchValue = value?.name ?? ''
+    if (value?.name) {
+      searchValue = value?.name
+    } else if (value == undefined) {
+      const newOption: ISelectOption<T> = {
+        id: `input-${searchValue}`,
+        name: searchValue,
+        value: searchValue as T,
+      }
+      searchValue = newOption.value
+    }
   })
 
   onMount(() => {

package/dist/Switch/Switch.svelte

@@ -2,11 +2,13 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge'
   import type { ISwitchProps } from '../types'
+  import { fly } from 'svelte/transition'
 
   let {
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '', captionLeft: '', captionRight: '' },
+    hiddenInfo = '',
     height = '2rem',
     type = 'horizontal',
     options = [],
@@ -15,6 +17,8 @@
     onChange = () => {},
   }: ISwitchProps = $props()
 
+  let showInfo = $state(false)
+
   let localOptions = $derived(bitMode ? options : options.slice(0, 1))
 
   let checkedOptions: boolean[] = $derived(
@@ -118,12 +122,12 @@
     </div>
   </div>
 {:else}
-  <div class={twMerge('bg-blue m-1 flex items-center justify-center gap-2', wrapperClass)}>
+  <div class={twMerge(' relative bg-blue m-1 flex items-center justify-center gap-2', wrapperClass)}>
     <input
       id={ID}
       type="checkbox"
       checked={checkedOptions[0]}
-      disabled={localOptions[0].disabled}
+      disabled={localOptions[0].disabled ?? false}
       class="
       relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
       bg-white shadow-sm transition duration-200 after:origin-bottom-left after:opacity-0
@@ -137,9 +141,27 @@
       disabled:cursor-not-allowed disabled:opacity-70
     "
       onchange={() => handleToggle(0)}
+      onmouseenter={() => {
+        if (hiddenInfo) showInfo = true
+      }}
+      onmouseleave={() => {
+        if (hiddenInfo) showInfo = false
+      }}
     />
-    <label for={ID} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
-      {label.name}
-    </label>
+    {#if showInfo && hiddenInfo}
+      <div
+        transition:fly={{ y: -15, duration: 300 }}
+        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        style="transform: translateX(-50%);"
+      >
+        {hiddenInfo}
+        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
+      </div>
+    {/if}
+    {#if label.name}
+      <label for={ID} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
+        {label.name}
+      </label>
+    {/if}
   </div>
 {/if}

package/dist/Table/Table.svelte

@@ -311,12 +311,14 @@
     </div>
 
     {#if body || dataBuffer}
+      {@const isSliced = dataBuffer.length - rowsAmmount > 0 ? dataBuffer.length - (rowsAmmount % 2) !== 0 : false}
       {@const rows =
         type == 'logger'
           ? dataBuffer.filter((str) => logType.includes(str.type)).slice(-rowsAmmount)
           : stashData
             ? dataBuffer.slice(-rowsAmmount)
             : body}
+
       <!-- Table Body с прокруткой -->
       <div class="flex-1 overflow-y-auto bg-(--container-color)/50" bind:this={container} onscroll={handleScroll}>
         <div class="grid min-w-0" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>

package/dist/types.d.ts

@@ -149,6 +149,7 @@ export interface ISwitchProps {
         captionLeft?: string;
         captionRight?: string;
     };
+    hiddenInfo?: string;
     options?: ISelectOption<number>[];
     bitMode?: boolean;
     type?: 'horizontal' | 'vertical' | 'checkbox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.5.6",
+  "version": "1.5.9",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -48,7 +48,7 @@
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.2",
-    "publint": "^0.3.15",
+    "publint": "^0.3.16",
     "svelte": "^5.45.8",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.7",