poe-svelte-ui-lib 1.23.2 → 1.24.0

package/dist/Accordion/AccordionProps.svelte

@@ -93,7 +93,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </PropsGroup>
@@ -117,7 +117,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/Button/ButtonProps.svelte

@@ -166,7 +166,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render ButtonHeaderArgument()}
@@ -192,7 +192,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -59,7 +59,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </PropsGroup>
@@ -73,7 +73,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/Divider/DividerProps.svelte

@@ -65,7 +65,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render DividerType()}
@@ -79,7 +79,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/FileAttach/FileAttachProps.svelte

@@ -82,7 +82,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </PropsGroup>
@@ -95,7 +95,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/Graph/GraphProps.svelte

@@ -49,7 +49,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
@@ -64,7 +64,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/Input/InputProps.svelte

@@ -377,7 +377,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       {@render InputAccess()}
       {@render InputVariable()}
@@ -398,7 +398,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       {@render InputIdentificator()}
       {@render InputWrapperClass()}

package/dist/Joystick/JoystickProps.svelte

@@ -82,7 +82,7 @@
 
 {#if forConstructor}
   <div>
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+    <div class="flex flex-col gap-2">
       <PropsGroup label={$T("constructor.props.group.general")}>
         <CommonSnippets snippet="Access" {component} {onPropertyChange} />
         <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
@@ -111,7 +111,7 @@
   </div>
 {:else}
   <div>
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+    <div class="flex flex-col gap-2">
       <PropsGroup label={$T("constructor.props.group.general")}>
         <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
         <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/Map/MapProps.svelte

@@ -31,7 +31,7 @@
 </script>
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
@@ -70,7 +70,7 @@
     </PropsGroup>
   </div>
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -147,7 +147,7 @@
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
@@ -159,7 +159,7 @@
   </div>
   {@render PeriodChartLevels()}
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -6,6 +6,7 @@
   import { optionsStore } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import PropsListModal from "../PropsListModal.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
 
@@ -45,117 +46,121 @@
 {/snippet}
 
 {#snippet ProgressBarOptions()}
-  <PropsGroup label={$T("constructor.props.progressbar.title")} wrapperClass="mt-3">
-    {#snippet headerActions()}
-      <UI.Button
-        wrapperClass="w-8"
-        content={{ icon: ButtonAdd }}
-        onClick={() => {
-          const newProgress = {
-            name: `Label ${component.properties?.items.length + 1}`,
-            class: "bg-blue",
-          }
-          const progresses = [...(component.properties?.items || []), newProgress]
-          updateProperty("items", progresses, component, onPropertyChange)
-          updateProperty(
-            "value",
-            Array.from(component.properties?.items, (x: { name?: string; class?: string }) => {
-              return { Name: x.name, Value: (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
-            }),
-            component,
-            onPropertyChange,
-          )
-        }}
-      />
-    {/snippet}
-
-    <div bind:this={itemsContainer} class="flex flex-col gap-2">
-      {#each component.properties.items || [] as progress, index}
-        <div id="item-{index}" class="flex items-end gap-1 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-          <UI.Dragging
-            wrapperClass="w-9"
-            container={itemsContainer}
-            array={component.properties.items}
-            elementIndex={index}
-            onUpdate={(updatedArray) => {
-              updateProperty("items", updatedArray, component, onPropertyChange)
-            }}
-          />
-          <UI.Input
-            label={{ name: $T("constructor.props.optionname") }}
-            wrapperClass="w-1/4"
-            value={progress.name}
-            onUpdate={(value) => {
-              const progresses = [...(component.properties?.items || [])]
-              progresses[index]["name"] = value
-              updateProperty("items", progresses, component, onPropertyChange)
-            }}
-          />
-          {#if forConstructor}
-            <UI.Select
-              label={{ name: $T("constructor.props.colors") }}
-              wrapperClass="w-1/2 h-14.5"
-              type="buttons"
-              options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
-              value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                (c.value as string).includes(progress.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-              )}
-              onUpdate={(value) => {
-                const progresses = [...(component.properties?.items || [])]
-                progresses[index]["class"] = (value as UI.IOption).value
-                updateProperty("items", progresses, component, onPropertyChange)
-              }}
-            />
-          {:else}
-            <UI.Input
-              label={{ name: $T("constructor.props.optionvalue") }}
-              wrapperClass="w-1/4"
-              value={(component.properties.value || [])[index]?.Value}
-              type="number"
-              onUpdate={(value) => {
-                const progresses = [
-                  ...(component.properties?.value ||
-                    component.properties?.items.map((item: { name?: string; class?: string }, i: number) => {
-                      return {
-                        Name: item.name,
-                        Value: i == index ? value : 0,
-                      }
-                    })),
-                ]
-                progresses[index].Value = value
-                updateProperty("value", progresses, component, onPropertyChange)
-              }}
-            />
-            <UI.Input
-              label={{ name: $T("constructor.props.optionclass") }}
-              wrapperClass="w-1/3"
-              value={progress.class}
-              onUpdate={(value) => {
-                const progresses = [...(component.properties?.items || [])]
-                progresses[index]["class"] = value
-                updateProperty("items", progresses, component, onPropertyChange)
-              }}
-            />
-          {/if}
-
+  <PropsListModal label={$T("constructor.props.progressbar.title")} count={component.properties.items?.length ?? 0} wrapperClass="w-200 h-[70%]">
+    {#snippet main()}
+      <PropsGroup>
+        {#snippet headerActions()}
           <UI.Button
             wrapperClass="w-8"
-            content={{ icon: ButtonDelete }}
+            content={{ icon: ButtonAdd }}
             onClick={() => {
-              const progresses = [...(component.properties?.items || [])]
-              progresses.splice(index, 1)
+              const newProgress = {
+                name: `Label ${component.properties?.items.length + 1}`,
+                class: "bg-blue",
+              }
+              const progresses = [...(component.properties?.items || []), newProgress]
               updateProperty("items", progresses, component, onPropertyChange)
+              updateProperty(
+                "value",
+                Array.from(component.properties?.items, (x: { name?: string; class?: string }) => {
+                  return { Name: x.name, Value: (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
+                }),
+                component,
+                onPropertyChange,
+              )
             }}
           />
+        {/snippet}
+
+        <div bind:this={itemsContainer} class="flex flex-col gap-2">
+          {#each component.properties.items || [] as progress, index}
+            <div id="item-{index}" class="flex items-end gap-1 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
+              <UI.Dragging
+                wrapperClass="w-9"
+                container={itemsContainer}
+                array={component.properties.items}
+                elementIndex={index}
+                onUpdate={(updatedArray) => {
+                  updateProperty("items", updatedArray, component, onPropertyChange)
+                }}
+              />
+              <UI.Input
+                label={{ name: $T("constructor.props.optionname") }}
+                wrapperClass="w-1/4"
+                value={progress.name}
+                onUpdate={(value) => {
+                  const progresses = [...(component.properties?.items || [])]
+                  progresses[index]["name"] = value
+                  updateProperty("items", progresses, component, onPropertyChange)
+                }}
+              />
+              {#if forConstructor}
+                <UI.Select
+                  label={{ name: $T("constructor.props.colors") }}
+                  wrapperClass="w-1/2 h-14.5"
+                  type="buttons"
+                  options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
+                  value={$optionsStore.COLOR_OPTIONS.find((c) =>
+                    (c.value as string).includes(progress.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
+                  )}
+                  onUpdate={(value) => {
+                    const progresses = [...(component.properties?.items || [])]
+                    progresses[index]["class"] = (value as UI.IOption).value
+                    updateProperty("items", progresses, component, onPropertyChange)
+                  }}
+                />
+              {:else}
+                <UI.Input
+                  label={{ name: $T("constructor.props.optionvalue") }}
+                  wrapperClass="w-1/4"
+                  value={(component.properties.value || [])[index]?.Value}
+                  type="number"
+                  onUpdate={(value) => {
+                    const progresses = [
+                      ...(component.properties?.value ||
+                        component.properties?.items.map((item: { name?: string; class?: string }, i: number) => {
+                          return {
+                            Name: item.name,
+                            Value: i == index ? value : 0,
+                          }
+                        })),
+                    ]
+                    progresses[index].Value = value
+                    updateProperty("value", progresses, component, onPropertyChange)
+                  }}
+                />
+                <UI.Input
+                  label={{ name: $T("constructor.props.optionclass") }}
+                  wrapperClass="w-1/3"
+                  value={progress.class}
+                  onUpdate={(value) => {
+                    const progresses = [...(component.properties?.items || [])]
+                    progresses[index]["class"] = value
+                    updateProperty("items", progresses, component, onPropertyChange)
+                  }}
+                />
+              {/if}
+
+              <UI.Button
+                wrapperClass="w-8"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  const progresses = [...(component.properties?.items || [])]
+                  progresses.splice(index, 1)
+                  updateProperty("items", progresses, component, onPropertyChange)
+                }}
+              />
+            </div>
+          {/each}
+          <div id="item-{component.properties.items.length}" class="min-h-4"></div>
         </div>
-      {/each}
-      <div id="item-{component.properties.items.length}" class="min-h-4"></div>
-    </div>
-  </PropsGroup>
+      </PropsGroup>
+    {/snippet}
+  </PropsListModal>
 {/snippet}
 
 {#if forConstructor}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
@@ -183,7 +188,7 @@
   </div>
   {@render ProgressBarOptions()}
 {:else}
-  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div class="flex flex-col gap-2">
     <PropsGroup label={$T("constructor.props.group.general")}>
       <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />

package/dist/PropsListModal.svelte

@@ -0,0 +1,34 @@
+<!-- $lib/PropsListModal.svelte — вынос "тяжёлых" списковых секций панелей свойств (столбцы
+     Table, опции ProgressBar/Select/Switch/Tabs) в модалку вместо попытки втиснуть их в узкий
+     сайдбар конструктора (ConstructorUI.svelte). Кнопка-триггер показывает счётчик элементов. -->
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import * as UI from "./"
+
+  let {
+    label,
+    count,
+    wrapperClass = "w-300 h-[85%]",
+    main,
+  }: {
+    label: string
+    count: number
+    wrapperClass?: string
+    main: Snippet
+  } = $props()
+
+  let isOpen = $state(false)
+</script>
+
+<button
+  type="button"
+  class="flex w-full cursor-pointer items-center justify-between rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-2 text-left hover:bg-(--container-color)"
+  onclick={() => (isOpen = true)}
+>
+  <span class="text-[11px] font-semibold text-(--muted-color)">{label} ({count})</span>
+  <span class="text-[12px] text-(--accent-color)">Настроить →</span>
+</button>
+
+{#if isOpen}
+  <UI.Modal title={label} bind:isOpen {wrapperClass} {main} />
+{/if}

package/dist/PropsListModal.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label: string;
+    count: number;
+    wrapperClass?: string;
+    main: Snippet;
+};
+declare const PropsListModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropsListModal = ReturnType<typeof PropsListModal>;
+export default PropsListModal;