poe-svelte-ui-lib 1.6.6 → 1.6.8

package/dist/Carousel/Carousel.svelte

@@ -47,7 +47,7 @@
     {#if !isAtStart}
       <button
         transition:slide={{ axis: "x" }}
-        class="absolute z-10 size-10 translate-y-1/2 cursor-pointer left-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)] rotate-180"
+        class="absolute z-10 size-10 -translate-y-1/2 cursor-pointer top-1/2 left-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)] rotate-180"
         onclick={() => scrollCarousel(-scrollValue)}>
         <ArrowIcon />
       </button>
@@ -55,13 +55,13 @@
     {#if !isAtEnd}
       <button
         transition:slide={{ axis: "x" }}
-        class="absolute z-10 size-10 translate-y-1/2 cursor-pointer right-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)]"
+        class="absolute z-10 size-10 -translate-y-1/2 cursor-pointer top-1/2 right-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)]"
         onclick={() => scrollCarousel(scrollValue)}>
         <ArrowIcon />
       </button>
     {/if}
 
-    <div {id} bind:this={carouselRef} class="flex overflow-y-hidden gap-2 p-2 h-24">
+    <div {id} bind:this={carouselRef} class="flex overflow-hidden gap-2 p-2">
       {@render children?.()}
     </div>
   </div>

package/dist/Table/Table.svelte

@@ -27,21 +27,12 @@
   }: ITableProps<any> = $props()
 
   let buffer: any[] = $state([])
-
   export const clearBuffer = () => {
     buffer = []
   }
   /* Сортировка */
-  let sortState: {
-    key: string | null
-    direction: "asc" | "desc" | null
-  } = {
-    key: null,
-    direction: null,
-  }
-
+  let sortState: { key: string | null; direction: "asc" | "desc" | null } = { key: null, direction: null }
   let isAutoscroll = $state(false)
-
   const logTypeOptions = [
     { id: crypto.randomUUID(), name: "Error", value: "error", color: "bg-(--red-color)" },
     { id: crypto.randomUUID(), name: "Warning", value: "warning", color: "bg-(--yellow-color)" },
@@ -73,9 +64,7 @@
       const numB = strB.match(/\d+/g)?.[0] || ""
       if (numA && numB) {
         const numCompare = parseInt(numA, 10) - parseInt(numB, 10)
-        if (numCompare !== 0) {
-          return sortState.direction === "asc" ? numCompare : -numCompare
-        }
+        if (numCompare !== 0) return sortState.direction === "asc" ? numCompare : -numCompare
       }
       const stringCompare = strA.localeCompare(strB)
       return sortState.direction === "asc" ? stringCompare : -stringCompare
@@ -95,19 +84,14 @@
   /* Обработчик автоскролла */
   const handleAutoScroll = () => {
     if (!container) return
-
     isAutoscroll = !(container.scrollHeight - container.scrollTop <= container.clientHeight + 50)
   }
   const scrollToBottom = () => {
-    if (!isAutoscroll && container) {
-      container.scrollTop = container.scrollHeight
-    }
+    if (!isAutoscroll && container) container.scrollTop = container.scrollHeight
   }
 
   $effect(() => {
-    if (autoscroll && buffer && buffer.length > 0) {
-      scrollToBottom()
-    }
+    if (autoscroll && buffer && buffer.length > 0) scrollToBottom()
   })
 
   function buttonClick(row: any, button: any) {
@@ -115,41 +99,30 @@
     else if (button.eventHandler && onClick) {
       let value: Record<string, boolean | string | number | number[] | object | null> = {}
       button.eventHandler.Variables.forEach((v: string) => {
-        if (header.some(h => h.key === v && h.action?.type === "select")) {
-          value[v] = row[v][0]
-        } else {
-          value[v] = row[v]
-        }
-        button.eventHandler.Value = JSON.stringify(value)
-        onClick(button.eventHandler)
+        if (header.some(h => h.key === v && h.action?.type === "select")) value[v] = row[v][0]
+        else value[v] = row[v]
       })
+      button.eventHandler.Value = JSON.stringify(value)
+      onClick(button.eventHandler)
     }
   }
 
   let isDropdownOpen: number | null = $state(null)
-  let changedOptions: { index: number; options: ISelectOption<string | number>[] | null }[] = $state([])
 
-  const selectOption = (index: number, options: ISelectOption<string | number>[], option: ISelectOption<string | number>, event: MouseEvent) => {
+  const selectOption = (index: number, key: any, option: ISelectOption<string | number>, event: MouseEvent) => {
     event.stopPropagation()
 
-    const existingItem = changedOptions.find(item => item.index === index)
-
-    if (existingItem) {
-      existingItem.options = [option, ...options.filter(opt => opt.id !== option.id)]
-    } else {
-      changedOptions = [...changedOptions, { index, options: [option, ...options.filter(opt => opt.id !== option.id)] }]
-    }
-
+    let existingItem = body[index][key]
     isDropdownOpen = null
+
+    if (existingItem)
+      body = [...body].map((row, i) =>
+        i === index ? (row = { ...row, [key]: [option.value, ...existingItem.filter((opt: string | number) => opt !== option.value)] }) : row,
+      )
   }
 
   let copiedCell = $state({ x: "", y: -1 })
-  let tooltip = $state({
-    show: false,
-    text: "",
-    x: 0,
-    y: 0,
-  })
+  let tooltip = $state({ show: false, text: "", x: 0, y: 0 })
 
   const showModal = async (text: string, formatting?: (text: string) => string) => {
     modalData = {
@@ -183,21 +156,11 @@
     const currentType = type
     if (currentType === "logger") {
       header = [
-        {
-          key: "color",
-          label: { name: "Type" },
-          width: "3rem",
-        } as ITableHeader<any>,
-        {
-          key: "data",
-          label: { name: "Data" },
-          width: "calc(100% - 3rem)",
-        } as ITableHeader<any>,
+        { key: "color", label: { name: "Type" }, width: "3rem" } as ITableHeader<any>,
+        { key: "data", label: { name: "Data" }, width: "calc(100% - 3rem)" } as ITableHeader<any>,
       ]
     }
-    return () => {
-      buffer = []
-    }
+    return () => (buffer = [])
   })
 
   $effect(() => {
@@ -255,23 +218,13 @@
 
     if (type === "logger") {
       header = [
-        {
-          key: "color",
-          label: { name: "Type" },
-          width: "3rem",
-        } as ITableHeader<any>,
-        {
-          key: "data",
-          label: { name: "Data" },
-          width: "calc(100% - 3rem)",
-        } as ITableHeader<any>,
+        { key: "color", label: { name: "Type" }, width: "3rem" } as ITableHeader<any>,
+        { key: "data", label: { name: "Data" }, width: "calc(100% - 3rem)" } as ITableHeader<any>,
       ]
     }
 
     return () => {
-      if (autoscroll) {
-        container?.removeEventListener("scroll", handleAutoScroll)
-      }
+      if (autoscroll) container?.removeEventListener("scroll", handleAutoScroll)
     }
   })
 </script>
@@ -356,7 +309,7 @@
     {/if}
 
     {#if body || buffer}
-      {@const isSliced = buffer.length - (dataBuffer.rowsAmmount ?? 10) > 0 ? buffer.length - ((dataBuffer.rowsAmmount ?? 10) % 2) !== 0 : false}
+      <!-- {@const isSliced = buffer.length - (dataBuffer.rowsAmmount ?? 10) > 0 ? buffer.length - ((dataBuffer.rowsAmmount ?? 10) % 2) !== 0 : false} -->
       {@const rows =
         type == "logger"
           ? buffer.filter(str => logType.includes(str.type)).slice(-(dataBuffer.rowsAmmount ?? 10))
@@ -392,8 +345,7 @@
                     {/each}
                   </div>
                 {:else if column.action?.type == "select" && column.action?.select}
-                  {@const currentOptions = changedOptions.find(item => item.index === index)?.options}
-                  {@const defaultOptions = Array.isArray(row[column.key])
+                  {@const options = Array.isArray(row[column.key])
                     ? row[column.key].map((option: string | number) => ({
                         id: crypto.randomUUID(),
                         value: option,
@@ -402,7 +354,7 @@
                         disabled: false,
                       }))
                     : []}
-                  {@const options = currentOptions || defaultOptions}
+
                   <div class="relative w-full">
                     <button
                       class={`w-full rounded-2xl border border-(--blue-color) bg-(--back-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
@@ -425,7 +377,7 @@
               ${option_index === options.length - 1 ? "rounded-b-2xl" : ""} `,
                               option.class,
                             )}
-                            onclick={e => selectOption(index, options, option, e)}>
+                            onclick={e => selectOption(index, column.key, option, e)}>
                             {option.name}
                           </button>
                         {/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -46,12 +46,12 @@
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.3",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.3",
     "@types/node": "^25.0.3",
     "publint": "^0.3.16",
     "svelte": "^5.46.1",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-compression": "^0.5.1"
   }
 }