poe-svelte-ui-lib 1.20.4 → 1.20.5

package/dist/Select/SelectProps.svelte

@@ -7,6 +7,7 @@
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import { optionsStore } from "../options.js"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import { twMerge } from "tailwind-merge"
 
   const {
     component,
@@ -53,6 +54,11 @@
       (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
     ),
   )
+  const initialContentAlign = $derived(
+    $optionsStore.TEXT_ALIGN_OPTIONS.slice(0, -1).find((a) =>
+      (a.value as string).includes(component.properties.componentClass?.split(" ").find((cls: string) => cls.startsWith("text-")) ?? "text-left"),
+    ),
+  )
 
   /* Argument пуст — поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
   $effect(() => {
@@ -70,6 +76,22 @@
   />
 {/snippet}
 
+{#snippet SelectContentAlign()}
+  <UI.Select
+    label={{ name: $T("constructor.props.align.content") }}
+    type="buttons"
+    value={initialContentAlign}
+    options={$optionsStore.TEXT_ALIGN_OPTIONS.slice(0, -1)}
+    onUpdate={(option) =>
+      updateProperty(
+        "componentClass",
+        twMerge(component.properties.componentClass, (option as UI.IOption<string>).value),
+        component,
+        onPropertyChange,
+      )}
+  />
+{/snippet}
+
 {#snippet SelectType()}
   <UI.Select
     label={{ name: $T("constructor.props.type") }}
@@ -262,6 +284,7 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
+      {@render SelectContentAlign()}
       {@render SelectSettings()}
     </div>
   </div>
@@ -276,6 +299,7 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
+      {@render SelectContentAlign()}
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
       <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>

package/dist/Switch/Switch.svelte

@@ -91,10 +91,13 @@
                 disabled={option.disabled}
                 onchange={() => handleToggle(index)}
               />
-              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном -->
+              <!-- Дорожка: акцент во включённом состоянии, нейтральная серая в выключенном.
+                   Фолбэк var(--accent-color) — большинство вызовов Switch не передают
+                   wrapperClass с ролью цвета (bg-blue и т.п.), без фолбэка --bg-color
+                   остаётся не задан и дорожка становится невидимой при включении. -->
               <span
                 class="relative flex items-center rounded-full transition-colors duration-200
-                  {checkedOptions[index] ? 'bg-(--bg-color)' : 'bg-(--border-color)'}
+                  {checkedOptions[index] ? 'bg-(--bg-color,var(--accent-color))' : 'bg-(--border-color)'}
                   {option.disabled ? 'cursor-not-allowed opacity-45' : 'cursor-pointer'}"
                 style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 1.7)`}; {type === 'horizontal'
                   ? 'height'
@@ -144,7 +147,7 @@
       class="
         relative size-5 shrink-0 cursor-pointer appearance-none rounded-[6px] border border-(--border-color)
         bg-(--field-color) transition-colors duration-150 after:origin-center after:opacity-0
-        checked:border-(--bg-color) checked:bg-(--bg-color)
+        checked:border-(--bg-color,var(--accent-color)) checked:bg-(--bg-color,var(--accent-color))
         checked:after:absolute checked:after:top-[1px] checked:after:left-[6px]
         checked:after:h-[10px] checked:after:w-[5px] checked:after:rotate-45
         checked:after:border-2 checked:after:border-t-0 checked:after:border-l-0

package/dist/Switch/SwitchProps.svelte

@@ -22,6 +22,11 @@
   let initialColor = $optionsStore.COLOR_OPTIONS.find((c) =>
     (c.value as string).includes(component.properties.options[0].class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
   )
+  const initialAlign = $derived(
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
+    ),
+  )
 </script>
 
 {#snippet SwitchType()}
@@ -201,6 +206,7 @@
 
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       {#if !component.properties.bitMode}
         <CommonSnippets
           snippet="Colors"
@@ -251,6 +257,7 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+      <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       {@render SwitchType()}
       {#if !component.properties.bitMode}
         {@render SwitchCaptions()}

package/package.json

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