poe-svelte-ui-lib 1.9.3 → 1.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/Button/ButtonProps.svelte +4 -4
  2. package/dist/ColorPicker/ColorPickerProps.svelte +3 -3
  3. package/dist/CommonSnippets.svelte +35 -1
  4. package/dist/CommonSnippets.svelte.d.ts +1 -1
  5. package/dist/IconsCatalog/battery/battery1.svg +1 -0
  6. package/dist/IconsCatalog/battery/battery2.svg +1 -0
  7. package/dist/IconsCatalog/battery/battery3.svg +1 -0
  8. package/dist/IconsCatalog/battery/battery4.svg +1 -0
  9. package/dist/IconsCatalog/battery/battery5.svg +1 -0
  10. package/dist/IconsCatalog/bulb/bulb1.svg +1 -1
  11. package/dist/IconsCatalog/common.binocular.svg +1 -0
  12. package/dist/IconsCatalog/info.sinewave.svg +1 -0
  13. package/dist/IconsCatalog/media.display.svg +1 -0
  14. package/dist/IconsCatalog/media.soundwaves.svg +1 -0
  15. package/dist/IconsCatalog/periphery.magneticfield.svg +1 -0
  16. package/dist/IconsCatalog/power.flash.svg +1 -0
  17. package/dist/IconsCatalog/power.onoff.svg +1 -0
  18. package/dist/IconsCatalog/scenarios.airplane.svg +1 -0
  19. package/dist/IconsCatalog/scenarios.circlecompass.svg +1 -0
  20. package/dist/IconsCatalog/scenarios.compass.svg +1 -0
  21. package/dist/IconsCatalog/scenarios.engine.svg +1 -0
  22. package/dist/Joystick/Joystick.svelte +4 -7
  23. package/dist/ProgressBar/ProgressBarProps.svelte +47 -37
  24. package/dist/Select/Select.svelte +51 -85
  25. package/dist/Select/SelectProps.svelte +17 -5
  26. package/dist/Slider/SliderProps.svelte +24 -28
  27. package/dist/Table/Table.svelte +49 -47
  28. package/dist/Table/TableProps.svelte +1 -1
  29. package/dist/Tabs/TabsProps.svelte +17 -5
  30. package/dist/Widget/Widget.svelte +12 -16
  31. package/dist/Widget/WidgetProps.svelte +26 -38
  32. package/dist/icons.js +21 -3
  33. package/dist/locales/translations.js +1 -0
  34. package/package.json +1 -1
  35. /package/dist/IconsCatalog/{common.battery.svg → power.battery.svg} +0 -0
package/dist/Button/ButtonProps.svelte CHANGED
@@ -64,6 +64,9 @@
64
64
  help={{ info: $t("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
65
65
  onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
66
66
  />
67
+ {/snippet}
68
+
69
+ {#snippet ButtonVariables()}
67
70
  {#if (component.eventHandler.Argument !== "Save" && component.eventHandler.Argument !== "NoSave") || Header.value === "SET"}
68
71
  <UI.Input
69
72
  label={{ name: $t("constructor.props.value") }}
@@ -73,9 +76,6 @@
73
76
  onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
74
77
  />
75
78
  {/if}
76
- {/snippet}
77
-
78
- {#snippet ButtonVariables()}
79
79
  <UI.Input
80
80
  label={{ name: $t("constructor.props.variables") }}
81
81
  disabled={hasValue}
@@ -147,11 +147,11 @@
147
147
  <div class="relative flex flex-row items-start justify-center">
148
148
  <!-- Сообщение для отправки в ws по нажатию кнопки -->
149
149
  <div class="flex w-1/3 flex-col px-2">
150
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
150
151
  {@render ButtonHeaderArgument()}
151
152
  </div>
152
153
  <div class="flex w-1/3 flex-col px-2">
153
154
  {@render ButtonVariables()}
154
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
155
155
  <CommonSnippets
156
156
  snippet="IconsLib"
157
157
  initialValue={{
package/dist/ColorPicker/ColorPickerProps.svelte CHANGED
@@ -60,11 +60,11 @@
60
60
  {#if forConstructor}
61
61
  <div class="relative flex flex-row items-start justify-center">
62
62
  <div class="flex w-1/3 flex-col px-2">
63
- <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
64
- <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
63
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
65
64
  </div>
66
65
  <div class="flex w-1/3 flex-col px-2">
67
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
66
+ <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
67
+ <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
68
68
  </div>
69
69
  <div class="flex w-1/3 flex-col px-2">
70
70
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
package/dist/CommonSnippets.svelte CHANGED
@@ -1,7 +1,6 @@
1
1
  <script lang="ts">
2
2
  import * as UI from "./"
3
3
  import { t } from "./locales/i18n"
4
- import { ICONS } from "./icons"
5
4
  import CrossIcon from "./libIcons/CrossIcon.svelte"
6
5
  import { optionsStore } from "./options"
7
6
  import { updateProperty } from "./types"
@@ -34,6 +33,7 @@
34
33
  | "EventHandlerArgument"
35
34
  | "IconsLib"
36
35
  | "Readonly"
36
+ | "MinMaxStep"
37
37
  | ""
38
38
 
39
39
  let showIconLib: boolean = $state(false)
@@ -204,6 +204,38 @@
204
204
  />
205
205
  {/snippet}
206
206
 
207
+ {#snippet MinMaxStep(initialValue: {
208
+ number: { minNum: number; maxNum: number; step: number }
209
+ bitMode: boolean
210
+ updateProperty: (value: number, property: string) => {}
211
+ })}
212
+ <div class="flex">
213
+ <UI.Input
214
+ label={{ name: $t("constructor.props.min") }}
215
+ value={initialValue.number.minNum}
216
+ type="number"
217
+ readonly={initialValue.bitMode}
218
+ onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
219
+ />
220
+ <UI.Input
221
+ label={{ name: $t("constructor.props.max") }}
222
+ value={initialValue.number.maxNum}
223
+ type="number"
224
+ readonly={initialValue.bitMode}
225
+ onUpdate={(value) => initialValue.updateProperty(value as number, "number.maxNum")}
226
+ />
227
+ {#if component.type !== "ProgressBar"}
228
+ <UI.Input
229
+ label={{ name: $t("constructor.props.step") }}
230
+ value={initialValue.number.step}
231
+ type="number"
232
+ readonly={initialValue.bitMode}
233
+ onUpdate={(value) => initialValue.updateProperty(value as number, "number.step")}
234
+ />
235
+ {/if}
236
+ </div>
237
+ {/snippet}
238
+
207
239
  {#snippet IconsLib(initialValue: {
208
240
  name: string
209
241
  icons: { array: [string, string[]][]; selectArray?: false }
@@ -271,4 +303,6 @@
271
303
  {@render Readonly()}
272
304
  {:else if snippet === "IconsLib"}
273
305
  {@render IconsLib(initialValue)}
306
+ {:else if snippet === "MinMaxStep"}
307
+ {@render MinMaxStep(initialValue)}
274
308
  {/if}
package/dist/CommonSnippets.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as UI from "./";
2
- type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "";
2
+ type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "MinMaxStep" | "";
3
3
  type $$ComponentProps = {
4
4
  snippet: snippetNames;
5
5
  component: UI.UIComponent;
package/dist/IconsCatalog/battery/battery1.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM3 16V8z"/></svg>
package/dist/IconsCatalog/battery/battery2.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM5 15q-.425 0-.712-.288T4 14v-4q0-.425.288-.712T5 9t.713.288T6 10v4q0 .425-.288.713T5 15"/></svg>
package/dist/IconsCatalog/battery/battery3.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h4q.425 0 .713.288T10 10v4q0 .425-.288.713T9 15H5q-.425 0-.712-.288T4 14"/></svg>
package/dist/IconsCatalog/battery/battery4.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h8q.425 0 .713.288T14 10v4q0 .425-.288.713T13 15H5q-.425 0-.712-.288T4 14"/></svg>
package/dist/IconsCatalog/battery/battery5.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h11.5q.425 0 .713.288T17.5 10v4q0 .425-.288.713T16.5 15H5q-.425 0-.712-.288T4 14"/></svg>
package/dist/IconsCatalog/bulb/bulb1.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M1 11h3v2H1zm18.1-7.5L17 5.6L18.4 7l2.1-2.1zM11 1h2v3h-2zM4.9 3.5L3.5 4.9L5.6 7L7 5.6zM10 22c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm2-16c-3.3 0-6 2.7-6 6c0 2.2 1.2 4.2 3 5.2V19c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8c1.8-1 3-3 3-5.2c0-3.3-2.7-6-6-6m1 9.9V17h-2v-1.1c-1.7-.4-3-2-3-3.9c0-2.2 1.8-4 4-4s4 1.8 4 4c0 1.9-1.3 3.4-3 3.9m7-4.9h3v2h-3z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z"/></svg>
package/dist/IconsCatalog/common.binocular.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M.75 18a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0"/><path d="M9.75 18V4.125a2.625 2.625 0 0 0-5.156-.7L.911 16.805M14.25 18a4.501 4.501 0 0 0 8.658 1.722a4.501 4.501 0 0 0-8.316-3.444A4.5 4.5 0 0 0 14.25 18"/><path d="M14.25 18V4.125a2.625 2.625 0 0 1 5.156-.7l3.683 13.377"/><path d="M9.75 9h4.5v3h-4.5z"/></g></svg>
package/dist/IconsCatalog/info.sinewave.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12c0-3.857 1.286-9 3.857-9c3.857 0 6.429 18 10.286 18C19.714 21 21 15.857 21 12M3 12h2m14 0h2m-5.5 0h1m-9 0h1"/></svg>
package/dist/IconsCatalog/media.display.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302a1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145"/></svg>
package/dist/IconsCatalog/media.soundwaves.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 9.938v4.124m3.7-7.217v10.31m3.7-13.918v17.526m3.7-13.631v9.736m3.7-7.302v4.868m3.7-3.465v2.062"/></svg>
package/dist/IconsCatalog/periphery.magneticfield.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 3v18m6-14c-.633-1.255-1.538-2-2.5-2c-1.933 0-3.5 3.134-3.5 7s1.567 7 3.5 7s3.5-3.134 3.5-7v-1M6 7c.633-1.255 1.538-2 2.5-2c1.933 0 3.5 3.134 3.5 7s-1.567 7-3.5 7S5 15.866 5 12v-1"/><path d="m3 13l2-2l2 2m10 0l2-2l2 2"/></g></svg>
package/dist/IconsCatalog/power.flash.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 .5v5h3.5l-5.5 8v-5H2.5L8 .5z"/></svg>
package/dist/IconsCatalog/power.onoff.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1m5.14 2.86a.99.99 0 0 0-.01 1.39c1.13 1.2 1.83 2.8 1.87 4.57c.09 3.83-3.08 7.13-6.91 7.17A6.98 6.98 0 0 1 5 12c0-1.84.71-3.51 1.87-4.76c.37-.39.37-1-.01-1.38a.993.993 0 0 0-1.43.02A8.92 8.92 0 0 0 3 11.74c-.14 4.88 3.83 9.1 8.71 9.25c5.1.16 9.29-3.93 9.29-9c0-2.37-.92-4.51-2.42-6.11c-.38-.41-1.04-.42-1.44-.02"/></svg>
package/dist/IconsCatalog/scenarios.airplane.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272l.313.937a.5.5 0 0 0 .948 0l.405-1.214l2.21-.369l.375 2.253l-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318l.375-2.253l2.21.369l.405 1.214a.5.5 0 0 0 .948 0l.313-.937l1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0M7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1s.458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7z"/></svg>
package/dist/IconsCatalog/scenarios.circlecompass.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 10L5 22m9-12l5 12M12 4V2"/><circle cx="12" cy="7" r="3"/><path stroke-linecap="round" d="M3 13c1.99 3.024 5.28 5 9 5s7.01-1.976 9-5"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 17v2"/></g></svg>
package/dist/IconsCatalog/scenarios.compass.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="m350.67 150.93l-117.2 46.88a64 64 0 0 0-35.66 35.66l-46.88 117.2a8 8 0 0 0 10.4 10.4l117.2-46.88a64 64 0 0 0 35.66-35.66l46.88-117.2a8 8 0 0 0-10.4-10.4M256 280a24 24 0 1 1 24-24a24 24 0 0 1-24 24"/></svg>
package/dist/IconsCatalog/scenarios.engine.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M240 104h-12.69L192 68.69A15.86 15.86 0 0 0 180.69 64H140V40h24a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16h24v24H64a16 16 0 0 0-16 16v52H24v-24a8 8 0 0 0-16 0v64a8 8 0 0 0 16 0v-24h24v20.69A15.86 15.86 0 0 0 52.69 180L92 219.31a15.86 15.86 0 0 0 11.31 4.69h77.38a15.86 15.86 0 0 0 11.31-4.69L227.31 184H240a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-16a8 8 0 0 0-5.66 2.34L180.69 208h-77.38L64 168.69V80h116.69l37.65 37.66A8 8 0 0 0 224 120h16Z"/></svg>
package/dist/Joystick/Joystick.svelte CHANGED
@@ -140,13 +140,10 @@
140
140
  title=""
141
141
  >
142
142
  <span
143
- class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto {direction.mainButton ? 'bg-(--bg-color)' : ''}
144
- "
145
- style=" height: {direction.mainButton
146
- ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
147
- : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; transform: rotate({angle *
148
- index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)
149
- "
143
+ class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto
144
+ {direction.mainButton ? 'bg-(--bg-color)' : ''}"
145
+ style=" height: {direction.mainButton ? 2 * 5 * Math.sin((Math.PI * 65) / 360) : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem;
146
+ transform: rotate({angle * index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)"
150
147
  role="application"
151
148
  onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)")}
152
149
  onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-color)")}
package/dist/ProgressBar/ProgressBarProps.svelte CHANGED
@@ -20,6 +20,7 @@
20
20
 
21
21
  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
22
22
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
23
+ let itemsContainer: HTMLDivElement | null = $state(null)
23
24
  </script>
24
25
 
25
26
  {#snippet ProgressBarType()}
@@ -34,37 +35,6 @@
34
35
  />
35
36
  {/snippet}
36
37
 
37
- {#snippet ProgressBarMinMax()}
38
- <div class="flex">
39
- <UI.Input
40
- label={{ name: $t("constructor.props.min") }}
41
- value={component.properties.number.minNum as number}
42
- type="number"
43
- readonly={component.properties.bitMode}
44
- onUpdate={(value) => {
45
- updateProperty("number.minNum", Number(value), component, onPropertyChange)
46
- let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
47
- return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
48
- })
49
- updateProperty("value", newValue, component, onPropertyChange)
50
- }}
51
- />
52
- <UI.Input
53
- label={{ name: $t("constructor.props.max") }}
54
- value={component.properties.number.maxNum as number}
55
- type="number"
56
- readonly={component.properties.bitMode}
57
- onUpdate={(value) => {
58
- updateProperty("number.maxNum", Number(value), component, onPropertyChange)
59
- let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
60
- return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
61
- })
62
- updateProperty("value", newValue, component, onPropertyChange)
63
- }}
64
- />
65
- </div>
66
- {/snippet}
67
-
68
38
  {#snippet ProgressBarUnits()}
69
39
  <UI.Input
70
40
  label={{ name: $t("constructor.props.units") }}
@@ -74,7 +44,7 @@
74
44
  {/snippet}
75
45
 
76
46
  {#snippet ProgressBarOptions()}
77
- <div class="space-y-4">
47
+ <div class="space-y-4" bind:this={itemsContainer}>
78
48
  <div class="m-0 flex items-center justify-center gap-2">
79
49
  <h4>{$t("constructor.props.progressbar.title")}</h4>
80
50
  <UI.Button
@@ -100,10 +70,19 @@
100
70
  </div>
101
71
 
102
72
  {#each component.properties.items || [] as progress, index}
103
- <div class="m-0 flex items-end w-full gap-1">
73
+ <div id="item-{index}" class="m-0 flex items-end w-full gap-1">
74
+ <UI.Dragging
75
+ wrapperClass="w-9"
76
+ container={itemsContainer}
77
+ array={component.properties.items}
78
+ elementIndex={index}
79
+ onUpdate={(updatedArray) => {
80
+ updateProperty("items", updatedArray, component, onPropertyChange)
81
+ }}
82
+ />
104
83
  <UI.Input
105
84
  label={{ name: $t("constructor.props.optionname") }}
106
- wrapperClass="w-2/5"
85
+ wrapperClass="w-1/4"
107
86
  value={progress.name}
108
87
  onUpdate={(value) => {
109
88
  const progresses = [...(component.properties?.items || [])]
@@ -148,7 +127,7 @@
148
127
  />
149
128
  <UI.Input
150
129
  label={{ name: $t("constructor.props.optionclass") }}
151
- wrapperClass="w-1/2"
130
+ wrapperClass="w-1/3"
152
131
  value={progress.class}
153
132
  onUpdate={(value) => {
154
133
  const progresses = [...(component.properties?.items || [])]
@@ -169,6 +148,7 @@
169
148
  />
170
149
  </div>
171
150
  {/each}
151
+ <div id="item-{component.properties.items.length}" class="min-h-4"></div>
172
152
  </div>
173
153
  {/snippet}
174
154
 
@@ -179,7 +159,22 @@
179
159
  {@render ProgressBarType()}
180
160
  </div>
181
161
  <div class="flex w-1/3 flex-col px-2">
182
- {@render ProgressBarMinMax()}
162
+ <CommonSnippets
163
+ snippet="MinMaxStep"
164
+ initialValue={{
165
+ number: component.properties.number,
166
+ bitMode: component.properties.bitMode,
167
+ updateProperty: (value: number, property: string) => {
168
+ updateProperty(property, Number(value), component, onPropertyChange)
169
+ let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
170
+ return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
171
+ })
172
+ updateProperty("value", newValue, component, onPropertyChange)
173
+ },
174
+ }}
175
+ {component}
176
+ {onPropertyChange}
177
+ />
183
178
  {@render ProgressBarUnits()}
184
179
  </div>
185
180
  <div class="flex w-1/3 flex-col px-2">
@@ -194,7 +189,22 @@
194
189
  </div>
195
190
  <div class="flex w-1/3 flex-col px-2">
196
191
  <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
197
- {@render ProgressBarMinMax()}
192
+ <CommonSnippets
193
+ snippet="MinMaxStep"
194
+ initialValue={{
195
+ number: component.properties.number,
196
+ bitMode: component.properties.bitMode,
197
+ updateProperty: (value: number, property: string) => {
198
+ updateProperty(property, Number(value), component, onPropertyChange)
199
+ let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
200
+ return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
201
+ })
202
+ updateProperty("value", newValue, component, onPropertyChange)
203
+ },
204
+ }}
205
+ {component}
206
+ {onPropertyChange}
207
+ />
198
208
  {@render ProgressBarUnits()}
199
209
  </div>
200
210
  <div class="flex w-1/3 flex-col px-2">
package/dist/Select/Select.svelte CHANGED
@@ -21,8 +21,27 @@
21
21
  onUpdate,
22
22
  }: ISelectProps<T> = $props()
23
23
 
24
- let searchValue: any = $state("")
25
- let filteredOptions = $state<IOption<T>[]>([])
24
+ let searchValue: any = $derived(
25
+ (() => {
26
+ if (type === "input" && !Array.isArray(value)) return value?.name ?? ""
27
+ })(),
28
+ )
29
+
30
+ let filteredOptions = $derived<IOption<T>[]>(
31
+ (() => {
32
+ const firstOptions = options.filter((option) => {
33
+ const optionName = option.name?.toString() || ""
34
+ return optionName.toLowerCase().includes(searchValue.toLowerCase())
35
+ })
36
+
37
+ return [
38
+ ...firstOptions,
39
+ ...options.filter((option) => {
40
+ return !firstOptions.some((filtered) => filtered.id === option.id)
41
+ }),
42
+ ]
43
+ })(),
44
+ )
26
45
 
27
46
  /* Закрытие при клике вне компонента */
28
47
  const handleClickOutside = (event: MouseEvent) => {
@@ -31,27 +50,8 @@
31
50
  }
32
51
  }
33
52
 
34
- $effect(() => {
35
- if (!Array.isArray(value))
36
- if (value?.name) {
37
- searchValue = value?.name
38
- } else if (value == undefined) {
39
- const newOption: IOption<T> = {
40
- id: `input-${searchValue}`,
41
- name: searchValue,
42
- value: searchValue as T,
43
- }
44
- searchValue = newOption.value
45
- }
46
- })
47
-
48
53
  onMount(() => {
49
54
  if (type === "select" || type === "input") document.addEventListener("click", handleClickOutside)
50
- if (type === "input" && !Array.isArray(value)) {
51
- searchValue = value?.name ?? ""
52
- handleSearch(searchValue)
53
- isDropdownOpen = false
54
- }
55
55
  return () => {
56
56
  if (type === "select" || type === "input") document.removeEventListener("click", handleClickOutside)
57
57
  }
@@ -63,71 +63,39 @@
63
63
  }
64
64
 
65
65
  const isSelected = (option: IOption<any>) => {
66
- if (type === "buttons" && multiSelect && Array.isArray(value)) {
67
- return value.includes(option)
68
- }
69
- return option.value === (value as IOption)?.value
66
+ if (type === "buttons" && multiSelect && Array.isArray(value)) return value.find((v) => v.value === option.value)
67
+ else return option.value === (value as IOption)?.value
70
68
  }
71
69
 
72
70
  const selectOption = (option: IOption<T>, event: MouseEvent) => {
73
71
  event.stopPropagation()
74
- if (!disabled) {
75
- if (type === "buttons" && multiSelect && value && !Array.isArray(value)) {
76
- value = [value]
77
- if (value.includes(option)) {
78
- value = value.filter((op) => op !== option)
79
- } else {
80
- value.push(option)
81
- }
82
- } else if (type === "buttons" && multiSelect && value && Array.isArray(value)) {
83
- if (value.includes(option)) {
84
- value = value.filter((op) => op !== option)
85
- } else {
86
- value.push(option)
87
- }
88
- } else value = option
72
+
73
+ if (type === "buttons" && multiSelect && value) {
74
+ if (!Array.isArray(value)) value = [value]
75
+
76
+ if (value.find((v) => v.value === option.value)) value = value.filter((op) => op.value !== option.value)
77
+ else value.push(option)
78
+ } else {
79
+ value = option
80
+ }
81
+
82
+ if (type === "input") {
83
+ handleSearch()
89
84
  searchValue = option.name?.toString() ?? ""
90
- if (type === "input") handleSearch(searchValue)
91
- isDropdownOpen = false
92
- onUpdate?.(value)
93
85
  }
86
+ isDropdownOpen = false
87
+ onUpdate?.(value)
94
88
  }
95
89
 
96
- const handleSearch = (inputValue: string) => {
97
- searchValue = inputValue
98
-
99
- filteredOptions = options.filter((option) => {
100
- const optionName = option.name?.toString() || ""
101
- return optionName.toLowerCase().includes(inputValue.toLowerCase())
102
- })
103
-
104
- filteredOptions = [
105
- ...filteredOptions,
106
- ...options.filter((option) => {
107
- return !filteredOptions.some((filtered) => filtered.id === option.id)
108
- }),
109
- ]
110
- isDropdownOpen = filteredOptions.length > 0
111
-
112
- const selectedFromList = options.find((option) => option.name?.toString() === searchValue)
113
-
114
- if (!selectedFromList) {
115
- const newOption: IOption<T> = {
116
- id: `input-${searchValue}`,
117
- name: searchValue,
118
- value:
119
- typeof options[0].value == "number"
120
- ? (Number(searchValue) as T) == undefined
121
- ? (Number(searchValue) as T)
122
- : (searchValue as T)
123
- : (searchValue as T),
124
- }
125
- value = newOption
126
- onUpdate?.(newOption)
127
- } else {
128
- value = selectedFromList
129
- onUpdate?.(selectedFromList)
90
+ const handleSearch = () => {
91
+ const selectedOption = options.find((option) => option.name?.toString() === searchValue) || {
92
+ id: `input-${Date.now()}`,
93
+ name: searchValue,
94
+ value:
95
+ typeof options[0]?.value == "number" ? ((Number(searchValue) as T) == undefined ? (Number(searchValue) as T) : (searchValue as T)) : (searchValue as T),
130
96
  }
97
+ value = selectedOption
98
+ onUpdate?.(selectedOption)
131
99
  }
132
100
  </script>
133
101
 
@@ -165,13 +133,12 @@
165
133
  value={option?.value ? String(option.value) : ""}
166
134
  class={twMerge(
167
135
  `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
168
- ${index === options.length - 1 ? "rounded-b-xl" : ""} `,
136
+ ${index === options.length - 1 ? "rounded-b-xl" : ""}`,
169
137
  option.class,
170
138
  )}
171
139
  onclick={(e) => selectOption(option, e)}
172
140
  {disabled}
173
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);
174
- "
141
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
175
142
  >
176
143
  {option.name}
177
144
  </button>
@@ -213,9 +180,9 @@
213
180
  style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
214
181
  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
215
182
  {disabled}
216
- oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
183
+ oninput={handleSearch}
217
184
  onclick={(e) => {
218
- if (searchValue == "") filteredOptions = options
185
+ // if (searchValue == "") filteredOptions = options
219
186
  toggleDropdown(e)
220
187
  }}
221
188
  />
@@ -232,13 +199,12 @@
232
199
  value={option?.value ? String(option.value) : ""}
233
200
  class={twMerge(
234
201
  `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
235
- ${index === filteredOptions.length - 1 ? "rounded-b-xl" : ""} `,
202
+ ${index === filteredOptions.length - 1 ? "rounded-b-xl" : ""}`,
236
203
  option.class,
237
204
  )}
238
205
  onclick={(e) => selectOption(option, e)}
239
206
  {disabled}
240
- style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);
241
- "
207
+ style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
242
208
  >
243
209
  {option.name}
244
210
  </button>
package/dist/Select/SelectProps.svelte CHANGED
@@ -22,6 +22,8 @@
22
22
  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
23
23
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
24
24
 
25
+ let itemsContainer: HTMLDivElement | null = $state(null)
26
+
25
27
  type ValueTypeOption = {
26
28
  id: string
27
29
  value: "text" | "number"
@@ -154,7 +156,7 @@
154
156
  {#snippet SelectOptions()}
155
157
  <hr class="border-gray-400" />
156
158
 
157
- <div class="space-y-4">
159
+ <div class="space-y-4" bind:this={itemsContainer}>
158
160
  <div class="m-0 flex items-center justify-center gap-2">
159
161
  <h4>{$t("constructor.props.options.title")}</h4>
160
162
  <UI.Button
@@ -174,10 +176,19 @@
174
176
  </div>
175
177
 
176
178
  {#each component.properties.options || [] as option, index (option.id)}
177
- <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
179
+ <div id="item-{index}" class="m-0 flex items-end justify-around gap-2 border-gray-400">
180
+ <UI.Dragging
181
+ wrapperClass="w-9"
182
+ container={itemsContainer}
183
+ array={component.properties.options}
184
+ elementIndex={index}
185
+ onUpdate={(updatedArray) => {
186
+ updateProperty("options", updatedArray, component, onPropertyChange)
187
+ }}
188
+ />
178
189
  <UI.Input
179
190
  label={{ name: $t("constructor.props.optionname") }}
180
- wrapperClass="!w-3/10"
191
+ wrapperClass="w-3/10"
181
192
  value={option.name}
182
193
  onUpdate={(value) => {
183
194
  const options = [...(component.properties?.options || [])]
@@ -187,7 +198,7 @@
187
198
  />
188
199
  <UI.Input
189
200
  label={{ name: $t("constructor.props.optionvalue") }}
190
- wrapperClass="!w-3/10"
201
+ wrapperClass="w-3/10"
191
202
  value={option.value}
192
203
  type={currentValueType.value}
193
204
  number={{ minNum: 0, maxNum: Math.pow(2, component.properties.range.end - component.properties.range.start + 1), step: 1 }}
@@ -213,7 +224,7 @@
213
224
  {:else}
214
225
  <UI.Input
215
226
  label={{ name: $t("constructor.props.optionclass") }}
216
- wrapperClass="!w-3/10"
227
+ wrapperClass="w-3/10"
217
228
  value={option.class}
218
229
  onUpdate={(value) => {
219
230
  const options = [...(component.properties?.options || [])]
@@ -234,6 +245,7 @@
234
245
  />
235
246
  </div>
236
247
  {/each}
248
+ <div id="item-{component.properties.options.length}" class="min-h-4"></div>
237
249
  </div>
238
250
  {/snippet}
239
251
 
package/dist/Slider/SliderProps.svelte CHANGED
@@ -45,32 +45,6 @@
45
45
  />
46
46
  {/snippet}
47
47
 
48
- {#snippet SliderMinMax()}
49
- <div class="flex">
50
- <UI.Input
51
- label={{ name: $t("constructor.props.min") }}
52
- value={component.properties.number.maxNum as number}
53
- type="number"
54
- readonly={component.properties.bitMode}
55
- onUpdate={(value) => updateProperty("number.maxNum", Number(value), component, onPropertyChange)}
56
- />
57
- <UI.Input
58
- label={{ name: $t("constructor.props.max") }}
59
- value={component.properties.number.minNum as number}
60
- type="number"
61
- readonly={component.properties.bitMode}
62
- onUpdate={(value) => updateProperty("number.minNum", Number(value), component, onPropertyChange)}
63
- />
64
- <UI.Input
65
- label={{ name: $t("constructor.props.step") }}
66
- value={component.properties.number.step as number}
67
- type="number"
68
- readonly={component.properties.bitMode}
69
- onUpdate={(value) => updateProperty("number.step", Number(value), component, onPropertyChange)}
70
- />
71
- </div>
72
- {/snippet}
73
-
74
48
  {#snippet SliderValue()}
75
49
  <UI.Input
76
50
  label={{ name: $t("constructor.props.value") }}
@@ -88,7 +62,18 @@
88
62
  </div>
89
63
  <div class="flex w-1/3 flex-col px-2">
90
64
  {@render SliderType()}
91
- {@render SliderMinMax()}
65
+ <CommonSnippets
66
+ snippet="MinMaxStep"
67
+ initialValue="{{
68
+ number: component.properties.number,
69
+ bitMode: component.properties.bitMode,
70
+ updateProperty: (value: number, property: string) => {
71
+ updateProperty(property, Number(value), component, onPropertyChange)
72
+ },
73
+ }}}"
74
+ {component}
75
+ {onPropertyChange}
76
+ />
92
77
  </div>
93
78
  <div class="flex w-1/3 flex-col px-2">
94
79
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
@@ -112,7 +97,18 @@
112
97
  </div>
113
98
  <div class="flex w-1/3 flex-col px-2">
114
99
  {@render SliderType()}
115
- {@render SliderMinMax()}
100
+ <CommonSnippets
101
+ snippet="MinMaxStep"
102
+ initialValue={{
103
+ number: component.properties.number,
104
+ bitMode: component.properties.bitMode,
105
+ updateProperty: (value: number, property: string) => {
106
+ updateProperty(property, Number(value), component, onPropertyChange)
107
+ },
108
+ }}
109
+ {component}
110
+ {onPropertyChange}
111
+ />
116
112
  </div>
117
113
  </div>
118
114
  {/if}
package/dist/Table/Table.svelte CHANGED
@@ -256,34 +256,35 @@
256
256
  <!-- Table Header -->
257
257
  <div
258
258
  class="grid font-semibold bg-(--bg-color) {isScrollable ? 'border-r-8 border-(--bg-color)' : ''}"
259
- style={`grid-template-columns: ${header.map((c) => c.width || "minmax(0, 1fr)").join(" ")};`}
259
+ style={`grid-template-columns: ${(header || [])
260
+ .filter((c) => c.width !== "0%")
261
+ .map((c) => c.width || "minmax(0, 1fr)")
262
+ .join(" ")};`}
260
263
  >
261
264
  {#each header as column, index (column)}
262
- <div
263
- class={twMerge(
264
- `items-center justify-center flex border-l ${outline && index !== 0 ? " border-(--border-color)" : "border-transparent"}
265
+ {#if column.width !== "0%"}
266
+ <div
267
+ class={twMerge(
268
+ `items-center justify-center flex border-l ${outline && index !== 0 ? " border-(--border-color)" : "border-transparent"}
265
269
  ${column.align === "center" ? "justify-center text-center" : column.align === "right" ? "justify-end text-right" : "justify-start text-left"} gap-1 p-2 text-left`,
266
- column.label?.class,
267
- )}
268
- >
269
- <span>{column.label?.name}</span>
270
-
271
- {#if typeof column.content !== "function" && (column.content as ITableContent<any>[])?.some((c) => c.type === "text" && c.data.sortable)}
272
- <button
273
- class="inline-block cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
274
- onclick={() =>
275
- sortRows(
276
- (
277
- (column.content as ITableContent<any>[])?.find((c) => {
278
- c.type === "text" && c.data.sortable
279
- })?.data as ITableText<object>
280
- ).key as string,
281
- )}
282
- >
283
- ↑↓
284
- </button>
285
- {/if}
286
- </div>
270
+ column.label?.class,
271
+ )}
272
+ >
273
+ <span>{column.label?.name}</span>
274
+
275
+ {#if typeof column.content !== "function" && (column.content as ITableContent<any>[])?.some((c) => c.type === "text" && c.data.sortable)}
276
+ <button
277
+ class="inline-block cursor-pointer font-bold transition-transform duration-75 hover:scale-110 active:scale-95"
278
+ onclick={() =>
279
+ sortRows(
280
+ ((column.content as ITableContent<any>[])?.find((c) => c.type === "text" && c.data.sortable)?.data as ITableText<object>).key as string,
281
+ )}
282
+ >
283
+ ↑↓
284
+ </button>
285
+ {/if}
286
+ </div>
287
+ {/if}
287
288
  {/each}
288
289
  </div>
289
290
  {#if dataBuffer.clearButton}
@@ -308,7 +309,10 @@
308
309
  class="grid {!outline && i % 2
309
310
  ? 'bg-[#f2f2f2] dark:bg-[#2a3545]'
310
311
  : 'bg-[#fbfbfb] dark:bg-[#1d2635]'} hover:bg-(--bg-color)/20 transition-colors duration-250"
311
- style="grid-template-columns: {header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};"
312
+ style={`grid-template-columns: ${(header || [])
313
+ .filter((c) => c.width !== "0%")
314
+ .map((c) => c.width || "minmax(0, 1fr)")
315
+ .join(" ")};`}
312
316
  >
313
317
  {#each header as column, j (column)}
314
318
  {#if column.width !== "0%"}
@@ -322,28 +326,26 @@
322
326
  {#each contentArray as content, index}
323
327
  {#if content.type === "button"}
324
328
  {@const button = typeof content.data === "function" ? content.data(row) : content.data}
325
- <div class="flex flex-wrap w-full gap-1">
326
- <button
327
- class="{twMerge(`flex items-center justify-center gap-2 cursor-pointer rounded-full
329
+ <button
330
+ class="{twMerge(`flex items-center justify-center gap-2 cursor-pointer rounded-full
328
331
  px-4 py-1 font-semibold shadow-sm transition-shadow duration-200 outline-none select-none hover:shadow-md
329
332
  ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
330
- onclick={() => buttonClick(row, button)}
331
- >
332
- {#if button?.icon}
333
- <span
334
- class={`flex items-center justify-center overflow-visible h-7 w-7 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
335
- >
336
- {#if typeof button?.icon === "string"}
337
- {@html button.icon}
338
- {:else}
339
- {@const IconComponent = button?.icon}
340
- <IconComponent />
341
- {/if}
342
- </span>
343
- {/if}
344
- {typeof button.name === "function" ? button.name(row) : button.name}
345
- </button>
346
- </div>
333
+ onclick={() => buttonClick(row, button)}
334
+ >
335
+ {#if button?.icon}
336
+ <span
337
+ class={`flex items-center justify-center overflow-visible h-7 w-7 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
338
+ >
339
+ {#if typeof button?.icon === "string"}
340
+ {@html button.icon}
341
+ {:else}
342
+ {@const IconComponent = button?.icon}
343
+ <IconComponent />
344
+ {/if}
345
+ </span>
346
+ {/if}
347
+ {typeof button.name === "function" ? button.name(row) : button.name}
348
+ </button>
347
349
  {:else if content.type === "select"}
348
350
  {@const select = content.data}
349
351
  {@const options = Array.isArray(row[select.key]) ? row[select.key] : []}
@@ -440,7 +442,7 @@
440
442
  >
441
443
  {#if text?.modal}
442
444
  <button
443
- class="w-full cursor-pointer text-left"
445
+ class="w-fit cursor-pointer text-left"
444
446
  onclick={(e) => {
445
447
  e.stopPropagation()
446
448
  showModal(data, text?.formatting)
package/dist/Table/TableProps.svelte CHANGED
@@ -74,7 +74,7 @@
74
74
  option.value === "button"
75
75
  ? {
76
76
  name: `button`,
77
- class: "bg-blue grow",
77
+ class: "bg-blue",
78
78
  eventHandler: { Header: "SET", Argument: "Save", Variables: [] },
79
79
  onClick: () => {},
80
80
  }
package/dist/Tabs/TabsProps.svelte CHANGED
@@ -19,6 +19,8 @@
19
19
  forConstructor?: boolean
20
20
  }>()
21
21
 
22
+ let itemsContainer: HTMLDivElement | null = $state(null)
23
+
22
24
  const initialColor = $derived(
23
25
  $optionsStore.COLOR_OPTIONS.find((c) =>
24
26
  (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
@@ -82,7 +84,7 @@
82
84
  {/snippet}
83
85
 
84
86
  {#snippet TabsSettings()}
85
- <div class="space-y-4">
87
+ <div class="space-y-4" bind:this={itemsContainer}>
86
88
  <div class="m-0 flex items-center justify-center gap-2">
87
89
  <h4>{$t("constructor.props.tabs.title")}</h4>
88
90
  {#if component.properties?.items.length < 10}
@@ -106,10 +108,19 @@
106
108
  </div>
107
109
 
108
110
  {#each component.properties.items || [] as tab, index}
109
- <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
111
+ <div id="item-{index}" class="m-0 flex items-end justify-around gap-2 border-gray-400">
112
+ <UI.Dragging
113
+ wrapperClass="w-10"
114
+ container={itemsContainer}
115
+ array={component.properties.items}
116
+ elementIndex={index}
117
+ onUpdate={(updatedArray) => {
118
+ updateProperty("items", updatedArray, component, onPropertyChange)
119
+ }}
120
+ />
110
121
  <UI.Input
111
122
  label={{ name: $t("constructor.props.optionname") }}
112
- wrapperClass="w-5/10"
123
+ wrapperClass="w-1/3"
113
124
  value={tab.name}
114
125
  onUpdate={(value) => {
115
126
  const items = [...(component.properties?.items || [])]
@@ -117,7 +128,7 @@
117
128
  updateProperty("items", items, component, onPropertyChange)
118
129
  }}
119
130
  />
120
- <div class="relative flex w-50 gap-2">
131
+ <div class="relative flex w-40 gap-2">
121
132
  <CommonSnippets
122
133
  snippet="IconsLib"
123
134
  initialValue={{
@@ -136,7 +147,7 @@
136
147
  </div>
137
148
 
138
149
  <UI.Switch
139
- wrapperClass="bg-blue w-40"
150
+ wrapperClass="w-30"
140
151
  label={{ name: $t("constructor.props.disabled") }}
141
152
  value={tab?.disabled ? 1 : 0}
142
153
  options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
@@ -164,6 +175,7 @@
164
175
  {/if}
165
176
  </div>
166
177
  {/each}
178
+ <div id="item-{component.properties.items.length}" class="min-h-4"></div>
167
179
  </div>
168
180
  {/snippet}
169
181
 
package/dist/Widget/Widget.svelte CHANGED
@@ -17,6 +17,9 @@
17
17
 
18
18
  let currentValue = $derived(value)
19
19
 
20
+ const minNumber = $derived(settings.number?.minNum ?? 0 + 1)
21
+ const maxNumber = $derived(settings.number?.maxNum ?? 0)
22
+
20
23
  $effect(() => {
21
24
  if (value === undefined || value === null) value = settings.number?.minNum ?? 0
22
25
  })
@@ -28,7 +31,7 @@
28
31
  intervalId = null
29
32
  }
30
33
 
31
- const mappedValue = mapToStep(currentValue)
34
+ const mappedValue = mapToStep(settings.type == "switch" && currentValue ? (maxNumber - minNumber) / 2 : currentValue)
32
35
  const periodInMs = mappedValue === 0 ? 0 : 700 / mappedValue
33
36
 
34
37
  if (icons && periodInMs > 0) {
@@ -46,36 +49,29 @@
46
49
  })
47
50
 
48
51
  $effect(() => {
49
- if (icons.array && !icons?.cycling && settings.type !== "switch") {
50
- currentIndex = mapToStep(currentValue)
51
- console.log(currentIndex)
52
- }
52
+ if (icons.array && !icons?.cycling && settings.type !== "switch") currentIndex = mapToStep(currentValue)
53
53
  })
54
54
 
55
55
  $effect(() => {
56
- if (icons.array && !icons?.cycling && settings.type == "switch") {
57
- currentIndex = currentValue == 0 ? 0 : icons.array.length - 1
58
- }
56
+ if (icons.array && !icons?.cycling && settings.type == "switch") currentIndex = currentValue == 0 ? 0 : icons.array.length - 1
59
57
  })
60
58
 
61
59
  const mapToStep = (inputValue: number): number => {
62
- const minNumber = settings.number?.minNum ?? 0
63
- const maxNumber = settings.number?.maxNum ?? 10
64
60
  if (currentValue > maxNumber) inputValue = maxNumber
65
61
  if (currentValue < minNumber) inputValue = minNumber
66
62
  const clampedValue = Math.min(Math.max(inputValue, minNumber), maxNumber)
67
63
 
68
64
  const inputRange = maxNumber - minNumber
69
65
 
70
- if (inputRange === 0) {
71
- return 0
72
- }
66
+ if (inputRange === 0) return 0
67
+ if (inputValue === maxNumber) return icons.array.length - 1
73
68
 
74
- let stepIndex = icons?.cycling ? Math.ceil((clampedValue - minNumber) / (inputRange / 10)) : Math.ceil((clampedValue - minNumber) / (inputRange / 4))
69
+ let stepIndex = icons?.cycling
70
+ ? Math.ceil((clampedValue - minNumber) / (inputRange / 10))
71
+ : Math.ceil((clampedValue - minNumber) / (inputRange / (icons.array.length - 2)))
75
72
  stepIndex = Math.min(Math.max(stepIndex, 0), 10)
76
73
 
77
- const result = 0 + stepIndex
78
- return result
74
+ return stepIndex
79
75
  }
80
76
 
81
77
  const currentImage = $derived(icons ? icons.array[currentIndex] : "")
package/dist/Widget/WidgetProps.svelte CHANGED
@@ -77,32 +77,6 @@
77
77
  />
78
78
  {/snippet}
79
79
 
80
- {#snippet WidgetMinMax()}
81
- <div class="flex">
82
- <UI.Input
83
- label={{ name: $t("constructor.props.min") }}
84
- value={component.properties.settings.number.minNum as number}
85
- type="number"
86
- readonly={component.properties.bitMode}
87
- onUpdate={(value) => updateProperty("settings.number.minNum", Number(value), component, onPropertyChange)}
88
- />
89
- <UI.Input
90
- label={{ name: $t("constructor.props.max") }}
91
- value={component.properties.settings.number.maxNum as number}
92
- type="number"
93
- readonly={component.properties.bitMode}
94
- onUpdate={(value) => updateProperty("settings.number.maxNum", Number(value), component, onPropertyChange)}
95
- />
96
- <UI.Input
97
- label={{ name: $t("constructor.props.step") }}
98
- value={component.properties.settings.number.step as number}
99
- type="number"
100
- readonly={component.properties.bitMode}
101
- onUpdate={(value) => updateProperty("settings.number.step", Number(value), component, onPropertyChange)}
102
- />
103
- </div>
104
- {/snippet}
105
-
106
80
  {#snippet WidgetSwitchCaptions()}
107
81
  <UI.Input
108
82
  label={{ name: $t("constructor.props.caption.left") }}
@@ -125,15 +99,6 @@
125
99
  {/snippet}
126
100
 
127
101
  {#snippet WidgetSwitchingMode()}
128
- <!-- <UI.Select
129
- label={{ name: $t("constructor.props.widget.mode") }}
130
- type="buttons"
131
- options={$optionsStore.WIDGET_MODE_OPTIONS}
132
- value={$optionsStore.WIDGET_MODE_OPTIONS.find((o) => o.value == component.properties.icons.mode)}
133
- onUpdate={(option) => {
134
- updateProperty("icons.mode", (option as UI.IOption).value as string, component, onPropertyChange)
135
- }}
136
- /> -->
137
102
  <UI.Switch
138
103
  label={{ name: $t("constructor.props.widget.mode") }}
139
104
  value={component.properties.icons.cycling}
@@ -197,11 +162,12 @@
197
162
  <div class="flex mb-4 items-start justify-center gap-8">
198
163
  <div class="flex w-1/3 flex-col px-2">
199
164
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
165
+ <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
200
166
  <CommonSnippets snippet="Access" {component} {onPropertyChange} />
201
- {@render WidgetUnits()}
202
167
  </div>
203
168
  <div class="flex w-1/3 flex-col px-2">
204
169
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
170
+ {@render WidgetUnits()}
205
171
  {@render WidgetIcons()}
206
172
  {@render WidgetIconColor()}
207
173
  {@render WidgetSwitchingMode()}
@@ -211,7 +177,18 @@
211
177
  {@render WidgetSettingsColor()}
212
178
  {@render WidgetType()}
213
179
  {#if component.properties.settings.type == "input" || component.properties.settings.type == "slider"}
214
- {@render WidgetMinMax()}
180
+ <CommonSnippets
181
+ snippet="MinMaxStep"
182
+ initialValue={{
183
+ number: component.properties.settings.number,
184
+ bitMode: component.properties.bitMode,
185
+ updateProperty: (value: number, property: string) => {
186
+ updateProperty(`settings.${property}`, Number(value), component, onPropertyChange)
187
+ },
188
+ }}
189
+ {component}
190
+ {onPropertyChange}
191
+ />
215
192
  {:else if component.properties.settings.type == "switch"}
216
193
  {@render WidgetSwitchCaptions()}
217
194
  {/if}
@@ -236,7 +213,18 @@
236
213
  {@render WidgetSettingsColor()}
237
214
  {@render WidgetType()}
238
215
  {#if component.properties.settings.type == "input" || component.properties.settings.type == "slider"}
239
- {@render WidgetMinMax()}
216
+ <CommonSnippets
217
+ snippet="MinMaxStep"
218
+ initialValue={{
219
+ number: component.properties.settings.number,
220
+ bitMode: component.properties.bitMode,
221
+ updateProperty: (value: number, property: string) => {
222
+ updateProperty(`settings.${property}`, Number(value), component, onPropertyChange)
223
+ },
224
+ }}
225
+ {component}
226
+ {onPropertyChange}
227
+ />
240
228
  {:else if component.properties.settings.type == "switch"}
241
229
  {@render WidgetSwitchCaptions()}
242
230
  {/if}
package/dist/icons.js CHANGED
@@ -5,7 +5,7 @@ export const ICONS = [
5
5
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 8a.997.997 0 0 1 1-1h10a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H3a.997.997 0 0 1-1-1zm3-4c0-.796.316-1.56.879-2.12s1.33-.879 2.12-.879A3 3 0 0 1 10.998 4v2h-6V4zm7 0v2h1a2 2 0 0 1 1.996 1.996v6c0 .53-.211 1.04-.586 1.41s-.884.586-1.41.586H3a2 2 0 0 1-1.996-1.996v-6A2 2 0 0 1 3 6h1V4c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0C11.58 1.92 12 2.94 12 4\" clip-rule=\"evenodd\"/></svg>"
6
6
  ]],
7
7
  ["common", [
8
- "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z\" clip-rule=\"evenodd\"/></svg>",
8
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M.75 18a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0\"/><path d=\"M9.75 18V4.125a2.625 2.625 0 0 0-5.156-.7L.911 16.805M14.25 18a4.501 4.501 0 0 0 8.658 1.722a4.501 4.501 0 0 0-8.316-3.444A4.5 4.5 0 0 0 14.25 18\"/><path d=\"M14.25 18V4.125a2.625 2.625 0 0 1 5.156-.7l3.683 13.377\"/><path d=\"M9.75 9h4.5v3h-4.5z\"/></g></svg>",
9
9
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3.2c0-1.12 0-1.68.218-2.11c.192-.376.498-.682.874-.874c.428-.218.988-.218 2.11-.218h.6c1.12 0 1.68 0 2.11.218c.376.192.682.498.874.874c.218.428.218.988.218 2.11v.6c0 1.12 0 1.68-.218 2.11a2 2 0 0 1-.874.874c-.428.218-.988.218-2.11.218h-.6c-1.12 0-1.68 0-2.11-.218a2 2 0 0 1-.874-.874C9 5.482 9 4.922 9 3.8zM12.2 1h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-.6c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422a17 17 0 0 1-.024-1.23v-.6c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085C11.253 1 11.626 1 12.2 1M.218 4.09C0 4.518 0 5.078 0 6.2v6.6c0 1.12 0 1.68.218 2.11c.192.376.498.682.874.874c.428.218.988.218 2.11.218h6.6c1.12 0 1.68 0 2.11-.218c.376-.192.682-.498.874-.874c.218-.428.218-.988.218-2.11v-.6c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-2.8v-2.8c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-.6c-1.12 0-1.68 0-2.11.218a2 2 0 0 0-.874.874zm5.78 2.11V9h-5V6.2c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085c.283-.023.656-.024 1.23-.024h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23zm-5 3.8h5v5h-2.8c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422C1 13.749 1 13.376 1 12.802v-2.8zm6 0h2.8c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-2.8v-5z\" clip-rule=\"evenodd\"/></svg>",
10
10
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" 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 />\r\n</svg>",
11
11
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 2c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C1.302.001 1.534.001 2 .001s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 2.697 0 2.465 0 2m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 2.389 1 2.24 1 2s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354c-.004.001.021-.007.128-.012C1.611 1 1.759 1 2 1s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354c-.001-.004.007.021.012.128C3 1.611 3 1.759 3 2s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354c.004-.001-.021.007-.128.012C2.389 3 2.241 3 2 3M0 8c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06c.191-.051.423-.051.888-.051s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 8.697 0 8.465 0 8m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 8.389 1 8.241 1 8s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354s.028-.007.128-.012C1.611 7 1.759 7 2 7s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354s.007.028.012.128C3 7.611 3 7.759 3 8s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354s-.028.007-.128.012C2.389 9 2.241 9 2 9M.051 13.1C0 13.291 0 13.523 0 13.988s0 .698.051.888a1.5 1.5 0 0 0 1.06 1.06c.191.051.423.051.888.051s.697 0 .888-.051a1.5 1.5 0 0 0 1.06-1.06c.051-.191.051-.423.051-.888s0-.698-.05-.888a1.5 1.5 0 0 0-1.06-1.06c-.192-.051-.424-.051-.889-.051s-.697 0-.888.051a1.5 1.5 0 0 0-1.06 1.06m1.45 1.88c.112.005.26.005.501.005s.39 0 .501-.005a.6.6 0 0 0 .128-.012a.5.5 0 0 0 .353-.354c0-.003.007-.034.012-.128c.005-.112.005-.26.005-.5s0-.39-.005-.502c-.005-.1-.012-.128-.012-.128a.5.5 0 0 0-.353-.353s-.028-.007-.128-.011c-.112-.005-.26-.006-.501-.006s-.389 0-.501.006a1 1 0 0 0-.128.011a.5.5 0 0 0-.353.354s-.007.028-.012.128c-.005.112-.005.26-.005.501s0 .39.005.501c.005.107.013.132.012.128a.5.5 0 0 0 .354.354a1 1 0 0 0 .128.012z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M6.5 2a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM6 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m.5 5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z\"/></svg>",
@@ -17,12 +17,15 @@ export const ICONS = [
17
17
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"m14.9 11.1l-.062-.07a4 4 0 0 1-.201-.255l-.16-.233a7 7 0 0 1-.48-.865c-.47-1-.952-2.55-.952-4.72a4.97 4.97 0 0 0-1.43-3.49a5 5 0 0 0-3.46-1.5a4.97 4.97 0 0 0-3.52 1.35a5 5 0 0 0-1.58 3.43l-.005.217c0 2.17-.482 3.73-.952 4.72c-.236.5-.47.864-.64 1.1l-.06.082l-.171.208l-.032.035a.5.5 0 0 0 .354.852h13a.498.498 0 0 0 .354-.852zM4 5.36l.005-.404c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0c.75.75 1.17 1.77 1.17 2.83c0 2.33.518 4.02 1.05 5.15c.157.334.314.617.46.85h-11a9 9 0 0 0 .46-.85c.498-1.06.987-2.62 1.04-4.75zm6.4 9.4a.497.497 0 0 0-.1-.7a.5.5 0 0 0-.7.1a1.995 1.995 0 0 1-2.495.589a2 2 0 0 1-.705-.59a.501.501 0 0 0-.895.23a.5.5 0 0 0 .095.37a3 3 0 0 0 2.4 1.2a3 3 0 0 0 2.4-1.2z\"/></svg>",
18
18
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .276.447l3 1.5a.5.5 0 0 0 .447-.895l-2.72-1.36v-4.19z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8M1 8c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7s-7-3.13-7-7\" clip-rule=\"evenodd\"/></svg>",
19
19
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M.75.75v22.5h22.5\"/><path d=\"M14.15 17.358a5.5 5.5 0 0 0 1.487 1.623l.713.519m-12.6 0l.713-.519A5.39 5.39 0 0 0 6.7 14.939l.4-6.979a2.92 2.92 0 0 1 2.95-2.71h.137\"/><path d=\"m9.15 19.5l.713-.519a5.39 5.39 0 0 0 2.237-4.042l.4-6.979a2.92 2.92 0 0 1 2.95-2.71a2.92 2.92 0 0 1 2.955 2.71l.4 6.979a5.39 5.39 0 0 0 2.232 4.042l.713.519\"/></g></svg>",
20
- "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 16c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8m0-1c3.87 0 7-3.13 7-7s-3.13-7-7-7s-7 3.13-7 7s3.13 7 7 7\" clip-rule=\"evenodd\"/></svg>"
20
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 16c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8m0-1c3.87 0 7-3.13 7-7s-3.13-7-7-7s-7 3.13-7 7s3.13 7 7 7\" clip-rule=\"evenodd\"/></svg>",
21
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 12c0-3.857 1.286-9 3.857-9c3.857 0 6.429 18 10.286 18C19.714 21 21 15.857 21 12M3 12h2m14 0h2m-5.5 0h1m-9 0h1\"/></svg>"
21
22
  ]],
22
23
  ["media", [
23
24
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z\" clip-rule=\"evenodd\"/></svg>",
25
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302a1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145\"/></svg>",
24
26
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z\" clip-rule=\"evenodd\"/></svg>",
25
27
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z\"/><path fill=\"currentColor\" d=\"M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z\"/></svg>",
28
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M2.75 9.938v4.124m3.7-7.217v10.31m3.7-13.918v17.526m3.7-13.631v9.736m3.7-7.302v4.868m3.7-3.465v2.062\"/></svg>",
26
29
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z\" clip-rule=\"evenodd\"/></svg>"
27
30
  ]],
28
31
  ["network", [
@@ -37,15 +40,23 @@ export const ICONS = [
37
40
  ["periphery", [
38
41
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z\" clip-rule=\"evenodd\"/></svg>",
39
42
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z\"/></svg>",
43
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 3v18m6-14c-.633-1.255-1.538-2-2.5-2c-1.933 0-3.5 3.134-3.5 7s1.567 7 3.5 7s3.5-3.134 3.5-7v-1M6 7c.633-1.255 1.538-2 2.5-2c1.933 0 3.5 3.134 3.5 7s-1.567 7-3.5 7S5 15.866 5 12v-1\"/><path d=\"m3 13l2-2l2 2m10 0l2-2l2 2\"/></g></svg>",
40
44
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z\" clip-rule=\"evenodd\"/></svg>",
41
45
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z\" clip-rule=\"evenodd\"/></svg>",
42
46
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z\" clip-rule=\"evenodd\"/></svg>"
43
47
  ]],
44
48
  ["power", [
49
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z\" clip-rule=\"evenodd\"/></svg>",
50
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 14 14\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 .5v5h3.5l-5.5 8v-5H2.5L8 .5z\"/></svg>",
45
51
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M15.8.195a.664.664 0 0 0-.94 0l-.293.293a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l.293-.293c.26-.26.26-.68 0-.94zM13.3 1.78a.25.25 0 0 1 .354 0l.587.587a.25.25 0 0 1 0 .354l-.587.587a.25.25 0 0 1-.354 0l-.586-.587a.25.25 0 0 1 0-.354zm-1.5 1.88a.25.25 0 0 0-.354 0l-1.53 1.53a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l1.53-1.53a.25.25 0 0 0 0-.354zM8.52 6.07a.994.994 0 0 0-1.41 0L3.59 9.59a1.994 1.994 0 1 0 2.82 2.82l3.52-3.52a.994.994 0 0 0 0-1.41zM2.78 13.9a.5.5 0 1 0-.554-.832c-1.31.874-.692 2.92.883 2.92h8.39a.5.5 0 0 0 0-1h-8.39c-.585 0-.815-.759-.328-1.08z\"/></svg>",
52
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1m5.14 2.86a.99.99 0 0 0-.01 1.39c1.13 1.2 1.83 2.8 1.87 4.57c.09 3.83-3.08 7.13-6.91 7.17A6.98 6.98 0 0 1 5 12c0-1.84.71-3.51 1.87-4.76c.37-.39.37-1-.01-1.38a.993.993 0 0 0-1.43.02A8.92 8.92 0 0 0 3 11.74c-.14 4.88 3.83 9.1 8.71 9.25c5.1.16 9.29-3.93 9.29-9c0-2.37-.92-4.51-2.42-6.11c-.38-.41-1.04-.42-1.44-.02\"/></svg>",
46
53
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 17.25a6 6 0 0 1-6-6v-4.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 1.5 1.5v4.5a6 6 0 0 1-6 6\"/><path d=\"M9 16.447v2.3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-2.3M9 5.25V.75m6 4.5V.75m-3 19.5v3\"/></g></svg>"
47
54
  ]],
48
55
  ["scenarios", [
56
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272l.313.937a.5.5 0 0 0 .948 0l.405-1.214l2.21-.369l.375 2.253l-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318l.375-2.253l2.21.369l.405 1.214a.5.5 0 0 0 .948 0l.313-.937l1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0M7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1s.458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7z\"/></svg>",
57
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 10L5 22m9-12l5 12M12 4V2\"/><circle cx=\"12\" cy=\"7\" r=\"3\"/><path stroke-linecap=\"round\" d=\"M3 13c1.99 3.024 5.28 5 9 5s7.01-1.976 9-5\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 17v2\"/></g></svg>",
58
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><path fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"32\" d=\"M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z\"/><path fill=\"currentColor\" d=\"m350.67 150.93l-117.2 46.88a64 64 0 0 0-35.66 35.66l-46.88 117.2a8 8 0 0 0 10.4 10.4l117.2-46.88a64 64 0 0 0 35.66-35.66l46.88-117.2a8 8 0 0 0-10.4-10.4M256 280a24 24 0 1 1 24-24a24 24 0 0 1-24 24\"/></svg>",
59
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M240 104h-12.69L192 68.69A15.86 15.86 0 0 0 180.69 64H140V40h24a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16h24v24H64a16 16 0 0 0-16 16v52H24v-24a8 8 0 0 0-16 0v64a8 8 0 0 0 16 0v-24h24v20.69A15.86 15.86 0 0 0 52.69 180L92 219.31a15.86 15.86 0 0 0 11.31 4.69h77.38a15.86 15.86 0 0 0 11.31-4.69L227.31 184H240a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-16a8 8 0 0 0-5.66 2.34L180.69 208h-77.38L64 168.69V80h116.69l37.65 37.66A8 8 0 0 0 224 120h16Z\"/></svg>",
49
60
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z\" clip-rule=\"evenodd\"/></svg>",
50
61
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z\"/><path fill=\"currentColor\" d=\"M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z\"/></svg>"
51
62
  ]],
@@ -60,8 +71,15 @@ export const ICONS = [
60
71
  ]]
61
72
  ];
62
73
  export const ICONS_ARRAY = [
74
+ ["battery", [
75
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM3 16V8z\"/></svg>",
76
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM5 15q-.425 0-.712-.288T4 14v-4q0-.425.288-.712T5 9t.713.288T6 10v4q0 .425-.288.713T5 15\"/></svg>",
77
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h4q.425 0 .713.288T10 10v4q0 .425-.288.713T9 15H5q-.425 0-.712-.288T4 14\"/></svg>",
78
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h8q.425 0 .713.288T14 10v4q0 .425-.288.713T13 15H5q-.425 0-.712-.288T4 14\"/></svg>",
79
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h11.5q.425 0 .713.288T17.5 10v4q0 .425-.288.713T16.5 15H5q-.425 0-.712-.288T4 14\"/></svg>"
80
+ ]],
63
81
  ["bulb", [
64
- "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M1 11h3v2H1zm18.1-7.5L17 5.6L18.4 7l2.1-2.1zM11 1h2v3h-2zM4.9 3.5L3.5 4.9L5.6 7L7 5.6zM10 22c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm2-16c-3.3 0-6 2.7-6 6c0 2.2 1.2 4.2 3 5.2V19c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8c1.8-1 3-3 3-5.2c0-3.3-2.7-6-6-6m1 9.9V17h-2v-1.1c-1.7-.4-3-2-3-3.9c0-2.2 1.8-4 4-4s4 1.8 4 4c0 1.9-1.3 3.4-3 3.9m7-4.9h3v2h-3z\"/></svg>",
82
+ "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z\"/></svg>",
65
83
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 5.6L5.6 7L3.5 4.9l1.4-1.4zM1 13h3v-2H1zM13 1h-2v3h2zm5 11c0 2.2-1.2 4.2-3 5.2V19c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1v-1.8c-1.8-1-3-3-3-5.2c0-3.3 2.7-6 6-6s6 2.7 6 6m-2 0c0-2.21-1.79-4-4-4s-4 1.79-4 4c0 1.2.54 2.27 1.38 3h5.24c.84-.73 1.38-1.8 1.38-3m-6 10c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm10-11v2h3v-2zm-.9-7.5L17 5.6L18.4 7l2.1-2.1z\"/></svg>",
66
84
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M10 21h4v1c0 .6-.4 1-1 1h-2c-.6 0-1-.4-1-1zm-9-8h3v-2H1zm3.9-9.5L3.5 4.9L5.6 7L7 5.6zM13 1h-2v3h2zm7 10v2h3v-2zm-2 1c0 2.2-1.2 4.2-3 5.2V19c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1v-1.8c-1.8-1-3-3-3-5.2c0-3.3 2.7-6 6-6s6 2.7 6 6M8 12h8c0-2.21-1.79-4-4-4s-4 1.79-4 4m11.1-8.5L17 5.6L18.4 7l2.1-2.1z\"/></svg>",
67
85
  "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M7 5.6L5.6 7L3.5 4.9l1.4-1.4zM1 13h3v-2H1zM13 1h-2v3h2zm-3 21c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm10-11v2h3v-2zm-.9-7.5L17 5.6L18.4 7l2.1-2.1zM18 12c0 2.2-1.2 4.2-3 5.2V19c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1v-1.8c-1.8-1-3-3-3-5.2c0-3.3 2.7-6 6-6s6 2.7 6 6m-9.44-2h6.88C14.75 8.81 13.5 8 12 8s-2.75.81-3.44 2\"/></svg>",
package/dist/locales/translations.js CHANGED
@@ -199,6 +199,7 @@ const translations = {
199
199
  "constructor.props.icon.settings": "Настройки",
200
200
  "constructor.props.icon.bulb": "Лампочка",
201
201
  "constructor.props.icon.propeller": "Пропеллер",
202
+ "constructor.props.icon.battery": "Аккумулятор",
202
203
  "constructor.props.autocomplete.on": "Включено",
203
204
  "constructor.props.autocomplete.off": "Выключено",
204
205
  "constructor.props.autocomplete.name": "Полное имя",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.9.3",
3
+ "version": "1.9.4",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {