poe-svelte-ui-lib 1.9.0 → 1.9.2

package/dist/Table/Table.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/Table.svelte -->
 <script lang="ts">
   import { get } from "svelte/store"
-  import type { IOption, ITableHeader, ITableImage, ITableProgressBar, ITableProps, ITableText } from "../types"
+  import type { IOption, ITableContent, ITableHeader, ITableImage, ITableProgressBar, ITableProps, ITableText } from "../types"
   import { fade, fly, slide } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
   import { onMount, tick } from "svelte"
@@ -106,7 +106,13 @@
     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.content?.some((c) => c.type == "select") && h.content.some((c) => c.type == "select" && c.data.key === v)))
+        if (
+          header.some(
+            (h) =>
+              (h.content as ITableContent<any>[])?.some((c) => c.type == "select") &&
+              (h.content as ITableContent<any>[]).some((c) => c.type == "select" && c.data.key === v),
+          )
+        )
           value[v.slice(0, -2)] = row[v.slice(0, -2)]
         else value[v] = row[v]
       })
@@ -152,13 +158,13 @@
   /* Для работы этой проверки в описании столбцов таблицы нужно явно указать что строка будет пустая при отсутствии иконки в БД -
      src: (row) => (row.icon ? `data:image/png;base64,${row.icon}` : '') */
   const hasImage = (column: ITableHeader<any>, row: any, index: number): boolean => {
-    let content = column.content?.[index]
+    let content = (column.content as ITableContent<any>[])?.[index]
     const src = content?.type === "image" && typeof content.data.src === "function" ? content.data.src(row) : (content?.data as ITableImage<object>).src
     return !!src
   }
 
-  const progressPercent = (column: ITableHeader<any>, value: number, index: number) => {
-    let progressBar = column.content?.[index].data as ITableProgressBar<object>
+  const progressPercent = (content: ITableContent<any>, value: number) => {
+    let progressBar = content.data as ITableProgressBar<object>
 
     let min = progressBar?.minNum ?? 0
     let max = progressBar?.maxNum ?? 100
@@ -261,13 +267,14 @@
           )}
         >
           <span>{column.label?.name}</span>
-          {#if column.content?.some((c) => c.type === "text" && c.data.sortable)}
+
+          {#if typeof column.content !== "function" && (column.content as ITableContent<any>[])?.some((c) => c.type === "text" && c.data.sortable)}
             <button
               class="inline-block cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
               onclick={() =>
                 sortRows(
                   (
-                    column.content?.find((c) => {
+                    (column.content as ITableContent<any>[])?.find((c) => {
                       c.type === "text" && c.data.sortable
                     })?.data as ITableText<object>
                   ).key as string,
@@ -305,6 +312,8 @@
             >
               {#each header as column, j (column)}
                 {#if column.width !== "0%"}
+                  {@const contentArray = typeof column.content === "function" ? column.content(row) : column.content}
+
                   <div
                     id="rowDiv{i}-{j}"
                     class="relative flex w-full min-w-0 items-center gap-x-2 px-2 py-1 wrap-break-word
@@ -313,7 +322,7 @@
                       ? 'select-none'
                       : 'select-all'}"
                   >
-                    {#each column.content as content, index}
+                    {#each contentArray as content, index}
                       {#if content.type === "button"}
                         {@const button = typeof content.data === "function" ? content.data(row) : content.data}
                         <div class="flex flex-wrap w-full gap-1">
@@ -407,7 +416,7 @@
                           <div class="relative my-auto h-3.5 rounded-full bg-(--back-color)/40">
                             <div
                               class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)"
-                              style="width: {progressPercent(column, row[progressBar.key] as number, index)}%;"
+                              style="width: {progressPercent(content, row[progressBar.key] as number)}%;"
                             ></div>
                           </div>
                         </div>

package/dist/Table/TableProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { t } from "../locales/i18n"
-  import { type UIComponent, type ITableProps, type ITableHeader, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type ITableProps, type ITableHeader, updateProperty, type IUIComponentHandler, type ITableContent } from "../types"
   import * as UI from ".."
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
@@ -194,9 +194,7 @@
             role="button"
             tabindex="0"
             onmouseenter={() => (isDropdownOpen = columnIndex)}
-            onmouseleave={() => {
-              isDropdownOpen = -1
-            }}
+            onmouseleave={() => (isDropdownOpen = -1)}
           >
             <button class="size-8 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full cursor-pointer">
               <ButtonAdd />
@@ -232,348 +230,351 @@
           />
         </div>
         <div class="flex flex-col gap-2" bind:this={settingsContainer[columnIndex]}>
-          {#each column.content as content, index}
-            {#if content.type == "text"}
-              {@const text = content.data}
-              <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
-                <div class="flex gap-2 mx-auto items-end" style="width: {forConstructor ? '65%' : '90%'}; ">
-                  <UI.Input
-                    wrapperClass="w-1/4"
-                    label={{ name: $t("constructor.props.table.text.key") }}
-                    value={text.key}
-                    help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
-                    onUpdate={(value) => {
-                      updateTableHeader(
-                        columnIndex,
-                        "content",
-                        column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
-                      )
-                      // updateTableBody()
-                    }}
-                  />
-                  <UI.Select
-                    label={{ name: $t("constructor.props.tablecolumn.settings") }}
-                    type="buttons"
-                    multiSelect={true}
-                    value={$optionsStore.TABLE_TEXT_SETTING_OPTIONS.slice(0, forConstructor ? 3 : 5).filter((opt) => {
-                      if (column.content[index].data[opt.value]) return opt
-                    })}
-                    options={$optionsStore.TABLE_TEXT_SETTING_OPTIONS.slice(0, forConstructor ? 3 : 5)}
-                    onUpdate={(value) => changeColumnSettings(value, columnIndex, index)}
-                  />
-                </div>
+          {#if typeof column.content !== "function"}
+            {#each column.content as content, index}
+              {#if content.type == "text"}
+                {@const text = content.data}
+                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                  <div class="flex gap-2 mx-auto items-end" style="width: {forConstructor ? '65%' : '90%'}; ">
+                    <UI.Input
+                      wrapperClass="w-1/4"
+                      label={{ name: $t("constructor.props.table.text.key") }}
+                      value={text.key}
+                      help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
+                      onUpdate={(value) => {
+                        updateTableHeader(
+                          columnIndex,
+                          "content",
+                          column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
+                        )
+                        // updateTableBody()
+                      }}
+                    />
+                    <UI.Select
+                      label={{ name: $t("constructor.props.tablecolumn.settings") }}
+                      type="buttons"
+                      multiSelect={true}
+                      value={$optionsStore.TABLE_TEXT_SETTING_OPTIONS.slice(0, forConstructor ? 3 : 5).filter((opt) => {
+                        if (column.content[index].data[opt.value]) return opt
+                      })}
+                      options={$optionsStore.TABLE_TEXT_SETTING_OPTIONS.slice(0, forConstructor ? 3 : 5)}
+                      onUpdate={(value) => changeColumnSettings(value, columnIndex, index)}
+                    />
+                  </div>
 
-                <Dragging
-                  wrapperClass="absolute left-2 bottom-2"
-                  container={settingsContainer[columnIndex]}
-                  array={column.content}
-                  elementIndex={index}
-                  containerIndex={columnIndex}
-                  onUpdate={(updatedArray, index) => {
-                    if (index === columnIndex) {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content = updatedArray
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }
-                  }}
-                />
-
-                <UI.Button
-                  wrapperClass="absolute right-2 bottom-2 w-8"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const headers = [...(component.properties.header || [])]
-                    ;(headers as ITableHeader<object>[])[columnIndex].content?.splice(index, 1)
-                    updateProperty("header", headers, component, onPropertyChange)
-                  }}
-                />
-              </div>
-            {:else if content.type == "select"}
-              {@const select = content.data}
-              <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
-                <div class="flex w-1/3 mx-auto gap-2">
-                  <UI.Input
-                    wrapperClass="w-1/2"
-                    label={{ name: $t("constructor.props.table.select.key") }}
-                    value={select.key}
-                    help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
-                    onUpdate={(value) => {
-                      updateTableHeader(
-                        columnIndex,
-                        "content",
-                        column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
-                      )
-                      // updateTableBody()
+                  <Dragging
+                    wrapperClass="absolute left-2 bottom-2"
+                    container={settingsContainer[columnIndex]}
+                    array={column.content}
+                    elementIndex={index}
+                    containerIndex={columnIndex}
+                    onUpdate={(updatedArray, index) => {
+                      if (index === columnIndex) {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content = updatedArray
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }
                     }}
                   />
-                  <UI.Input
-                    wrapperClass="w-1/2"
-                    label={{ name: $t("constructor.props.table.select.keys") }}
-                    value={select?.keyCol ?? ""}
-                    maxlength={500}
-                    help={{ info: $t("constructor.props.table.select.keys.info"), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
-                    onUpdate={(value) => {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content[index].data = { ...headers[columnIndex].content[index].data, keyCol: value }
+
+                  <UI.Button
+                    wrapperClass="absolute right-2 bottom-2 w-8"
+                    content={{ icon: ButtonDelete }}
+                    onClick={() => {
+                      const headers = [...(component.properties.header || [])]
+                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
                       updateProperty("header", headers, component, onPropertyChange)
                     }}
                   />
                 </div>
+              {:else if content.type == "select"}
+                {@const select = content.data}
+                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                  <div class="flex w-1/3 mx-auto gap-2">
+                    <UI.Input
+                      wrapperClass="w-1/2"
+                      label={{ name: $t("constructor.props.table.select.key") }}
+                      value={select.key}
+                      help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
+                      onUpdate={(value) => {
+                        updateTableHeader(
+                          columnIndex,
+                          "content",
+                          column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
+                        )
+                        // updateTableBody()
+                      }}
+                    />
+                    <UI.Input
+                      wrapperClass="w-1/2"
+                      label={{ name: $t("constructor.props.table.select.keys") }}
+                      value={select?.keyCol ?? ""}
+                      maxlength={500}
+                      help={{ info: $t("constructor.props.table.select.keys.info"), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
+                      onUpdate={(value) => {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content[index].data = { ...headers[columnIndex].content[index].data, keyCol: value }
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }}
+                    />
+                  </div>
 
-                <Dragging
-                  wrapperClass="absolute left-2 bottom-2"
-                  container={settingsContainer[columnIndex]}
-                  array={column.content}
-                  elementIndex={index}
-                  containerIndex={columnIndex}
-                  onUpdate={(updatedArray, index) => {
-                    if (index === columnIndex) {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content = updatedArray
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }
-                  }}
-                />
-
-                <UI.Button
-                  wrapperClass="absolute right-2 bottom-2 w-8"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const headers = [...(component.properties.header || [])]
-                    ;(headers as ITableHeader<object>[])[columnIndex].content?.splice(index, 1)
-                    updateProperty("header", headers, component, onPropertyChange)
-                  }}
-                />
-              </div>
-            {:else if content.type == "button"}
-              {@const button = content.data}
-              <div id={`item-${index}-${columnIndex}`} class="relative w-full bg-(--container-color)/50 rounded-2xl p-2">
-                <div class="flex w-[95%] mx-auto items-end justify-between gap-2">
-                  <UI.Input
-                    label={{ name: $t("constructor.props.name") }}
-                    wrapperClass="w-2/10"
-                    value={button.name}
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "name", value)}
+                  <Dragging
+                    wrapperClass="absolute left-2 bottom-2"
+                    container={settingsContainer[columnIndex]}
+                    array={column.content}
+                    elementIndex={index}
+                    containerIndex={columnIndex}
+                    onUpdate={(updatedArray, index) => {
+                      if (index === columnIndex) {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content = updatedArray
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }
+                    }}
                   />
 
-                  <UI.Select
-                    wrapperClass="w-80 h-14.5"
-                    label={{ name: $t("constructor.props.colors") }}
-                    type="buttons"
-                    options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
-                    value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                      (c.value as string).includes((button.class ?? component.properties.wrapperClass).split(" ").find((cls: string) => cls.startsWith("bg-"))),
-                    )}
-                    onUpdate={(value) => {
-                      updateContentProperty(columnIndex, index, "class", (value as UI.IOption).value)
+                  <UI.Button
+                    wrapperClass="absolute right-2 bottom-2 w-8"
+                    content={{ icon: ButtonDelete }}
+                    onClick={() => {
+                      const headers = [...(component.properties.header || [])]
+                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                      updateProperty("header", headers, component, onPropertyChange)
                     }}
                   />
+                </div>
+              {:else if content.type == "button"}
+                {@const button = content.data}
+                <div id={`item-${index}-${columnIndex}`} class="relative w-full bg-(--container-color)/50 rounded-2xl p-2">
+                  <div class="flex w-[95%] mx-auto items-end justify-between gap-2">
+                    <UI.Input
+                      label={{ name: $t("constructor.props.name") }}
+                      wrapperClass="w-2/10"
+                      value={button.name}
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "name", value)}
+                    />
 
-                  <div class="relative mt-6 flex w-1/4 gap-2">
-                    <CommonSnippets
-                      snippet="IconsLib"
-                      initialValue={{
-                        name: $t("constructor.props.table.type.icon"),
-                        icon: column.content[index].data.icon,
-                        updateProperty: (icon: string) => updateContentProperty(columnIndex, index, "icon", icon),
-                        icons: { array: ICONS },
+                    <UI.Select
+                      wrapperClass="w-80 h-14.5"
+                      label={{ name: $t("constructor.props.colors") }}
+                      type="buttons"
+                      options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
+                      value={$optionsStore.COLOR_OPTIONS.find((c) =>
+                        (c.value as string).includes(
+                          (button.class ?? component.properties.wrapperClass).split(" ").find((cls: string) => cls.startsWith("bg-")),
+                        ),
+                      )}
+                      onUpdate={(value) => {
+                        updateContentProperty(columnIndex, index, "class", (value as UI.IOption).value)
+                      }}
+                    />
+
+                    <div class="relative mt-6 flex w-1/4 gap-2">
+                      <CommonSnippets
+                        snippet="IconsLib"
+                        initialValue={{
+                          name: $t("constructor.props.table.type.icon"),
+                          icon: column.content[index].data.icon,
+                          updateProperty: (icon: string) => updateContentProperty(columnIndex, index, "icon", icon),
+                          icons: { array: ICONS },
+                        }}
+                        {component}
+                        {onPropertyChange}
+                      />
+                    </div>
+
+                    <UI.Select
+                      wrapperClass="w-1/4"
+                      label={{ name: $t("constructor.props.header") }}
+                      type="buttons"
+                      value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
+                      options={$optionsStore.HEADER_OPTIONS}
+                      onUpdate={(option) => {
+                        const handler = button.eventHandler
+                        handler.Header = (option as UI.IOption).value as string
+                        updateContentProperty(columnIndex, index, "eventHandler", handler)
+                      }}
+                    />
+                    <UI.Input
+                      wrapperClass="w-2/10"
+                      label={{ name: $t("constructor.props.argument") }}
+                      value={button.eventHandler?.Argument}
+                      onUpdate={(value) => {
+                        const handler = button.eventHandler
+                        handler.Argument = value as string
+                        updateContentProperty(columnIndex, index, "eventHandler", handler)
+                      }}
+                    />
+                    <UI.Input
+                      wrapperClass="w-2/10"
+                      label={{ name: $t("constructor.props.table.keys") }}
+                      value={button.eventHandler?.Variables.join(" ")}
+                      maxlength={500}
+                      help={{ info: $t("constructor.props.table.keys.info"), regExp: /^[a-zA-Z0-9\-._ ]{0,500}$/ }}
+                      onUpdate={(value) => {
+                        const handler = { ...button.eventHandler }
+                        handler.Variables = (value as string).trim().split(/\s+/)
+                        updateContentProperty(columnIndex, index, "eventHandler", handler)
                       }}
-                      {component}
-                      {onPropertyChange}
                     />
                   </div>
 
-                  <UI.Select
-                    wrapperClass="w-1/4"
-                    label={{ name: $t("constructor.props.header") }}
-                    type="buttons"
-                    value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
-                    options={$optionsStore.HEADER_OPTIONS}
-                    onUpdate={(option) => {
-                      const handler = button.eventHandler
-                      handler.Header = (option as UI.IOption).value as string
-                      updateContentProperty(columnIndex, index, "eventHandler", handler)
-                    }}
-                  />
-                  <UI.Input
-                    wrapperClass="w-2/10"
-                    label={{ name: $t("constructor.props.argument") }}
-                    value={button.eventHandler?.Argument}
-                    onUpdate={(value) => {
-                      const handler = button.eventHandler
-                      handler.Argument = value as string
-                      updateContentProperty(columnIndex, index, "eventHandler", handler)
+                  <UI.Button
+                    wrapperClass="absolute right-2 bottom-2 w-8"
+                    content={{ icon: ButtonDelete }}
+                    onClick={() => {
+                      const headers = [...(component.properties.header || [])]
+                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                      updateProperty("header", headers, component, onPropertyChange)
                     }}
                   />
-                  <UI.Input
-                    wrapperClass="w-2/10"
-                    label={{ name: $t("constructor.props.table.keys") }}
-                    value={button.eventHandler?.Variables.join(" ")}
-                    maxlength={500}
-                    help={{ info: $t("constructor.props.table.keys.info"), regExp: /^[a-zA-Z0-9\-._ ]{0,500}$/ }}
-                    onUpdate={(value) => {
-                      const handler = { ...button.eventHandler }
-                      handler.Variables = (value as string).trim().split(/\s+/)
-                      updateContentProperty(columnIndex, index, "eventHandler", handler)
+                  <Dragging
+                    wrapperClass="absolute left-2 bottom-2"
+                    container={settingsContainer[columnIndex]}
+                    array={column.content}
+                    elementIndex={index}
+                    containerIndex={columnIndex}
+                    onUpdate={(updatedArray, index) => {
+                      if (index === columnIndex) {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content = updatedArray
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }
                     }}
                   />
                 </div>
+              {:else if content.type == "progressBar"}
+                {@const progressBar = content.data}
+                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                  <div class="w-3/5 flex mx-auto items-end gap-2">
+                    <UI.Input
+                      label={{ name: $t("constructor.props.table.progressBar.key") }}
+                      value={progressBar.key}
+                      help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
+                      onUpdate={(value) => {
+                        updateTableHeader(
+                          columnIndex,
+                          "content",
+                          column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
+                        )
+                        // updateTableBody()
+                      }}
+                    />
+                    <UI.Input
+                      wrapperClass="w-1/2"
+                      label={{ name: $t("constructor.props.min") }}
+                      value={(progressBar?.minNum as number) ?? 0}
+                      type="number"
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "minNum", value as string)}
+                    />
+                    <UI.Input
+                      wrapperClass="w-1/2"
+                      label={{ name: $t("constructor.props.max") }}
+                      value={(progressBar?.maxNum as number) ?? 100}
+                      type="number"
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "maxNum", value as string)}
+                    />
+                    <UI.Input
+                      label={{ name: $t("constructor.props.units") }}
+                      value={progressBar?.units}
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "units", value as string)}
+                    />
+                  </div>
 
-                <UI.Button
-                  wrapperClass="absolute right-2 bottom-2 w-8"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const headers = [...(component.properties.header || [])]
-                    ;(headers as ITableHeader<object>[])[columnIndex].content?.splice(index, 1)
-                    updateProperty("header", headers, component, onPropertyChange)
-                  }}
-                />
-                <Dragging
-                  wrapperClass="absolute left-2 bottom-2"
-                  container={settingsContainer[columnIndex]}
-                  array={column.content}
-                  elementIndex={index}
-                  containerIndex={columnIndex}
-                  onUpdate={(updatedArray, index) => {
-                    if (index === columnIndex) {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content = updatedArray
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }
-                  }}
-                />
-              </div>
-            {:else if content.type == "progressBar"}
-              {@const progressBar = content.data}
-              <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
-                <div class="w-3/5 flex mx-auto items-end gap-2">
-                  <UI.Input
-                    label={{ name: $t("constructor.props.table.progressBar.key") }}
-                    value={progressBar.key}
-                    help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
-                    onUpdate={(value) => {
-                      updateTableHeader(
-                        columnIndex,
-                        "content",
-                        column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
-                      )
-                      // updateTableBody()
+                  <Dragging
+                    wrapperClass="absolute left-2 bottom-2"
+                    container={settingsContainer[columnIndex]}
+                    array={column.content}
+                    elementIndex={index}
+                    containerIndex={columnIndex}
+                    onUpdate={(updatedArray, index) => {
+                      if (index === columnIndex) {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content = updatedArray
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }
                     }}
                   />
-                  <UI.Input
-                    wrapperClass="w-1/2"
-                    label={{ name: $t("constructor.props.min") }}
-                    value={(progressBar?.minNum as number) ?? 0}
-                    type="number"
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "minNum", value as string)}
-                  />
-                  <UI.Input
-                    wrapperClass="w-1/2"
-                    label={{ name: $t("constructor.props.max") }}
-                    value={(progressBar?.maxNum as number) ?? 100}
-                    type="number"
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "maxNum", value as string)}
-                  />
-                  <UI.Input
-                    label={{ name: $t("constructor.props.units") }}
-                    value={progressBar?.units}
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "units", value as string)}
-                  />
-                </div>
-
-                <Dragging
-                  wrapperClass="absolute left-2 bottom-2"
-                  container={settingsContainer[columnIndex]}
-                  array={column.content}
-                  elementIndex={index}
-                  containerIndex={columnIndex}
-                  onUpdate={(updatedArray, index) => {
-                    if (index === columnIndex) {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content = updatedArray
+                  <UI.Button
+                    wrapperClass="absolute right-2 bottom-2 w-8"
+                    content={{ icon: ButtonDelete }}
+                    onClick={() => {
+                      const headers = [...(component.properties.header || [])]
+                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
                       updateProperty("header", headers, component, onPropertyChange)
-                    }
-                  }}
-                />
-                <UI.Button
-                  wrapperClass="absolute right-2 bottom-2 w-8"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const headers = [...(component.properties.header || [])]
-                    ;(headers as ITableHeader<object>[])[columnIndex].content?.splice(index, 1)
-                    updateProperty("header", headers, component, onPropertyChange)
-                  }}
-                />
-              </div>
-            {:else if !forConstructor && content.type == "image"}
-              {@const image = content.data}
-              <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
-                <div class="flex items-end gap-2 w-[80%] mx-auto">
-                  <CommonSnippets
-                    snippet="IconsLib"
-                    initialValue={{
-                      name: $t("constructor.props.table.columns.defaultIcon"),
-                      icon: image?.defaultIcon ?? "",
-                      updateProperty: (icon: string) => {
-                        updateContentProperty(columnIndex, index, "defaultIcon", icon)
-                        if (!image?.width || image?.width === "0rem") updateContentProperty(columnIndex, index, "width", "1rem")
-                        if (!image?.width || image?.height === "0rem") updateContentProperty(columnIndex, index, "height", "1rem")
-                      },
-                      icons: { array: ICONS },
                     }}
-                    {component}
-                    {onPropertyChange}
                   />
+                </div>
+              {:else if !forConstructor && content.type == "image"}
+                {@const image = content.data}
+                <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
+                  <div class="flex items-end gap-2 w-[80%] mx-auto">
+                    <CommonSnippets
+                      snippet="IconsLib"
+                      initialValue={{
+                        name: $t("constructor.props.table.columns.defaultIcon"),
+                        icon: image?.defaultIcon ?? "",
+                        updateProperty: (icon: string) => {
+                          updateContentProperty(columnIndex, index, "defaultIcon", icon)
+                          if (!image?.width || image?.width === "0rem") updateContentProperty(columnIndex, index, "width", "1rem")
+                          if (!image?.width || image?.height === "0rem") updateContentProperty(columnIndex, index, "height", "1rem")
+                        },
+                        icons: { array: ICONS },
+                      }}
+                      {component}
+                      {onPropertyChange}
+                    />
 
-                  <UI.Input
-                    label={{ name: $t("constructor.props.table.columns.class") }}
-                    value={image?.class}
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "class", value)}
-                  />
-                  <UI.Input
-                    wrapperClass="w-4/10"
-                    label={{ name: $t("constructor.props.table.columns.image.width"), class: "px-0" }}
-                    type="number"
-                    number={{ minNum: 0, maxNum: 1000, step: 1 }}
-                    value={Number(image?.width?.replace("rem", "") ?? 0)}
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "width", `${value ?? 0}rem`)}
+                    <UI.Input
+                      label={{ name: $t("constructor.props.table.columns.class") }}
+                      value={image?.class}
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "class", value)}
+                    />
+                    <UI.Input
+                      wrapperClass="w-4/10"
+                      label={{ name: $t("constructor.props.table.columns.image.width"), class: "px-0" }}
+                      type="number"
+                      number={{ minNum: 0, maxNum: 1000, step: 1 }}
+                      value={Number(image?.width?.replace("rem", "") ?? 0)}
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "width", `${value ?? 0}rem`)}
+                    />
+                    <UI.Input
+                      wrapperClass="w-4/10"
+                      label={{ name: $t("constructor.props.table.columns.image.height"), class: "px-0" }}
+                      type="number"
+                      number={{ minNum: 0, maxNum: 1000, step: 1 }}
+                      value={Number(image?.height?.replace("rem", "") ?? 0)}
+                      onUpdate={(value) => updateContentProperty(columnIndex, index, "height", `${value ?? 0}rem`)}
+                    />
+                  </div>
+                  <Dragging
+                    wrapperClass="absolute left-2 bottom-2"
+                    container={settingsContainer[columnIndex]}
+                    array={column.content}
+                    elementIndex={index}
+                    containerIndex={columnIndex}
+                    onUpdate={(updatedArray, index) => {
+                      if (index === columnIndex) {
+                        const headers = [...component.properties.header]
+                        headers[columnIndex].content = updatedArray
+                        updateProperty("header", headers, component, onPropertyChange)
+                      }
+                    }}
                   />
-                  <UI.Input
-                    wrapperClass="w-4/10"
-                    label={{ name: $t("constructor.props.table.columns.image.height"), class: "px-0" }}
-                    type="number"
-                    number={{ minNum: 0, maxNum: 1000, step: 1 }}
-                    value={Number(image?.height?.replace("rem", "") ?? 0)}
-                    onUpdate={(value) => updateContentProperty(columnIndex, index, "height", `${value ?? 0}rem`)}
+                  <UI.Button
+                    wrapperClass="absolute right-2 bottom-2 w-8"
+                    content={{ icon: ButtonDelete }}
+                    onClick={() => {
+                      const headers = [...(component.properties.header || [])]
+                      ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                      updateProperty("header", headers, component, onPropertyChange)
+                    }}
                   />
                 </div>
-                <Dragging
-                  wrapperClass="absolute left-2 bottom-2"
-                  container={settingsContainer[columnIndex]}
-                  array={column.content}
-                  elementIndex={index}
-                  containerIndex={columnIndex}
-                  onUpdate={(updatedArray, index) => {
-                    if (index === columnIndex) {
-                      const headers = [...component.properties.header]
-                      headers[columnIndex].content = updatedArray
-                      updateProperty("header", headers, component, onPropertyChange)
-                    }
-                  }}
-                />
-                <UI.Button
-                  wrapperClass="absolute right-2 bottom-2 w-8"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const headers = [...(component.properties.header || [])]
-                    ;(headers as ITableHeader<object>[])[columnIndex].content?.splice(index, 1)
-                    updateProperty("header", headers, component, onPropertyChange)
-                  }}
-                />
-              </div>
-            {/if}
-          {/each}
-
+              {/if}
+            {/each}
+          {/if}
           <div id={`item-${column.content.length}-${columnIndex}`} class="min-h-2"></div>
         </div>
       </div>

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as ButtonProps } from "./Button/ButtonProps.svelte";
 export { default as Carousel } from "./Carousel/Carousel.svelte";
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte";
 export { default as ColorPickerProps } from "./ColorPicker/ColorPickerProps.svelte";
+export { default as Dragging } from "./Dragging.svelte";
 export { default as FileAttach } from "./FileAttach/FileAttach.svelte";
 export { default as FileAttachProps } from "./FileAttach/FileAttachProps.svelte";
 export { default as Graph } from "./Graph/Graph.svelte";

package/dist/index.js

@@ -6,6 +6,7 @@ export { default as ButtonProps } from "./Button/ButtonProps.svelte";
 export { default as Carousel } from "./Carousel/Carousel.svelte";
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte";
 export { default as ColorPickerProps } from "./ColorPicker/ColorPickerProps.svelte";
+export { default as Dragging } from "./Dragging.svelte";
 export { default as FileAttach } from "./FileAttach/FileAttach.svelte";
 export { default as FileAttachProps } from "./FileAttach/FileAttachProps.svelte";
 export { default as Graph } from "./Graph/Graph.svelte";

package/dist/types.d.ts

@@ -308,7 +308,7 @@ export interface ITableSelect<T extends object> {
     keyCol: string;
     onChange?: () => void;
 }
-export interface ITableButtons<T extends object> {
+export interface ITableButton<T extends object> {
     name?: string | ((row: T) => string);
     icon?: ConstructorOfATypedSvelteComponent | string;
     class?: string | ((row: T) => string);
@@ -322,6 +322,7 @@ export interface ITableProgressBar<T extends object> {
     units?: string;
 }
 export interface ITableImage<T extends object> {
+    key: keyof T;
     src?: string | ((row: T) => string);
     alt?: string;
     class?: string;
@@ -329,6 +330,22 @@ export interface ITableImage<T extends object> {
     height?: string;
     defaultIcon?: ConstructorOfATypedSvelteComponent | string;
 }
+export type ITableContent<T extends object> = {
+    type: "text";
+    data: ITableText<T>;
+} | {
+    type: "select";
+    data: ITableSelect<T>;
+} | {
+    type: "button";
+    data: ITableButton<T> | ((row: T) => ITableButton<T>);
+} | {
+    type: "progressBar";
+    data: ITableProgressBar<T>;
+} | {
+    type: "image";
+    data: ITableImage<T>;
+};
 export interface ITableHeader<T extends object> {
     label?: {
         name?: string;
@@ -337,22 +354,7 @@ export interface ITableHeader<T extends object> {
     width?: string;
     align?: "left" | "center" | "right";
     disableSelect?: boolean;
-    content?: ({
-        type: "text";
-        data: ITableText<T>;
-    } | {
-        type: "select";
-        data: ITableSelect<T>;
-    } | {
-        type: "button";
-        data: ITableButtons<T> | ((row: T) => ITableButtons<T>);
-    } | {
-        type: "progressBar";
-        data: ITableProgressBar<T>;
-    } | {
-        type: "image";
-        data: ITableImage<T>;
-    })[];
+    content?: ITableContent<T>[] | ((row: T) => ITableContent<T>[]);
 }
 export interface ITableProps<T extends object> {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "license": "MIT",
   "type": "module",
   "scripts": {