poe-svelte-ui-lib 1.3.3 → 1.4.0

package/dist/Accordion/Accordion.svelte

@@ -6,7 +6,6 @@
   let {
     id = crypto.randomUUID(),
     isOpen = false,
-    outline = false,
     wrapperClass = '',
     size = { width: 1, height: 1 },
     label = { name: '', class: 'text-left', icon: null },
@@ -20,17 +19,13 @@
 <div
   id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
   class={twMerge(
-    `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
-    border border-(--border-color) bg-(--container-color) p-0 transition-shadow duration-250`,
+    `w-full rounded-xl bg-(--container-color) p-0
+     shadow-sm transition-shadow duration-250 hover:shadow-md`,
     wrapperClass,
   )}
   transition:slide={{ duration: 250 }}
 >
-  <button
-    class="flex w-full cursor-pointer items-center justify-between p-4 transition-shadow duration-250
-    {outline ? 'border-b border-(--border-color)' : ''}"
-    onclick={toggle}
-  >
+  <button class="flex w-full cursor-pointer items-center justify-between p-4 py-3.5 transition-shadow duration-250" onclick={toggle}>
     <div class="flex w-full items-center">
       <span
         class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
@@ -45,9 +40,21 @@
         {/if}
       </span>
 
-      <span class="{twMerge('m-0 w-full cursor-pointer px-3 text-left font-semibold', label.class)} text-lg">
-        {label?.name}
-      </span>
+      <div
+        class="{twMerge(
+          'flex w-full justify-start ',
+          label.class?.split(' ').find((cls: string) => cls.startsWith('justify-')),
+        )} "
+      >
+        <span
+          class="{twMerge(
+            `m-0 origin-top-left cursor-pointer justify-end px-3 font-semibold transition duration-200 ${isOpen ? 'scale-110' : ''}`,
+            label.class,
+          )} text-lg"
+        >
+          {label?.name}
+        </span>
+      </div>
     </div>
 
     <div class="w-10 pl-4">
@@ -72,7 +79,7 @@
 
   {#if isOpen}
     <div
-      class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} {outline ? '' : 'border-t border-(--border-color)'}"
+      class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)]"
       transition:slide={{ duration: 250 }}
       style="grid-template-columns: repeat({size.width || 10}, minmax(0, 1fr)); 
           grid-template-rows: repeat({size.height || 2}, {image ? 'minmax(6.5rem, auto)' : 'auto'});

package/dist/Accordion/AccordionProps.svelte

@@ -24,8 +24,8 @@
   const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
 
   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-'))),
+    $optionsStore.JUSTIFY_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('justify-'))),
     ),
   )
 
@@ -64,7 +64,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.TEXT_ALIGN_OPTIONS}
+        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
       />
     </div>

package/dist/Button/Button.svelte

@@ -69,10 +69,10 @@
   <button
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
     class="{twMerge(
-      `relative m-0 inline-block w-full items-center rounded-2xl 
-        px-2 py-1 font-semibold  transition duration-200 select-none
+      `relative m-0 inline-block w-full items-center rounded-2xl px-2
+        py-1 font-semibold shadow-sm transition duration-200 select-none 
         ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
-        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  active:scale-97'} `,
+        ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  hover:shadow-md active:scale-97'} `,
       componentClass,
     )} bg-(--bg-color)"
     onclick={handleClick}

package/dist/ColorPicker/ColorPicker.svelte

@@ -140,7 +140,7 @@
     <div class="flex w-full flex-col gap-2">
       <!-- Выбор цвета -->
       <div
-        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full shadow-md"
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full shadow-sm transition duration-200 hover:shadow-md"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -163,7 +163,9 @@
 
       <!-- Яркость цвета -->
       <div
-        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full {mode === 'hsv' ? 'shadow-md' : ''}"
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full {mode === 'hsv'
+          ? 'shadow-sm transition duration-200 hover:shadow-md'
+          : ''}"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -184,7 +186,7 @@
 
       <!-- Яркость белого цвета -->
       <div
-        class="white-slider relative mt-4 h-4 w-full cursor-pointer overflow-hidden rounded-full shadow-sm"
+        class="white-slider relative mt-4 h-4 w-full cursor-pointer overflow-hidden rounded-full shadow-sm transition duration-200 hover:shadow-md"
         role="slider"
         aria-valuenow={null}
         tabindex={null}
@@ -204,7 +206,7 @@
 
     <div class="flex w-25 flex-col items-center">
       <div
-        class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-md select-none ${textColor()}`}
+        class={`flex size-15 flex-col justify-center gap-1 rounded-full px-2 font-mono text-sm shadow-sm transition duration-200 select-none ${textColor()}`}
         style={`background: rgb(${previewBaseColor().join(',')})`}
       ></div>
       <div class="w-full text-center font-semibold">{hex()}</div>

package/dist/FileAttach/FileAttach.svelte

@@ -51,8 +51,8 @@
     <div class="relative">
       <button
         class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
-        bg-(--back-color) shadow-sm transition duration-250 hover:shadow-md
-        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
+        bg-(--back-color) shadow-sm transition duration-250
+        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:shadow-md'}"
         style={`height: ${imageSize.height}; width: ${imageSize.width}`}
         onclick={triggerFileInput}
         {disabled}
@@ -83,14 +83,14 @@
         onchange={handleFileChange}
       />
       <div
-        class="flex h-8.5 w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 hover:shadow-md
+        class="flex w-full overflow-hidden rounded-2xl font-semibold shadow-sm transition duration-250 {disabled ? '' : 'hover:shadow-md'}
              "
       >
-        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) {disabled ? 'opacity-50' : ''}">
+        <div class="flex w-1/3 items-center justify-center bg-(--blue-color) p-2 py-1 {disabled ? 'opacity-50' : ''}">
           {$t('constructor.props.file.select')}
         </div>
-        <div class="flex w-2/3 items-center justify-start bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
-          {fileName || $t('constructor.props.file.notselected')}
+        <div class="flex flex-1 items-center justify-start truncate bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
+          <p class="truncate">{fileName || $t('constructor.props.file.notselected')}</p>
         </div>
       </div>
     </label>

package/dist/Graph/Graph.svelte

@@ -225,7 +225,7 @@
 
   <div class="flex w-full flex-row gap-4">
     <!-- График -->
-    <div bind:this={container} class="h-64 grow overflow-hidden rounded-md border border-gray-200">
+    <div bind:this={container} class="h-64 grow overflow-hidden rounded-2xl border border-gray-200 shadow-sm">
       <canvas class="h-full w-full bg-(--back-color)" bind:this={canvas}></canvas>
     </div>
 

package/dist/Input/Input.svelte

@@ -64,8 +64,8 @@
       <input
         bind:value
         class={twMerge(
-          `w-full rounded-2xl border px-4 py-1 text-center transition-all duration-300 outline-none focus:border-blue-400
-              [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
+          `w-full rounded-2xl border px-4 py-1 text-center shadow-sm transition duration-200
+              outline-none focus:border-blue-400 [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
               ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
               ${disabled ? 'opacity-50' : 'hover:shadow-md'} 
               ${readonly ? '' : 'hover:shadow-md'}
@@ -90,7 +90,8 @@
       <textarea
         bind:value
         class={twMerge(
-          `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono outline-none focus:border-blue-400
+          `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono shadow-sm transition
+          duration-200 outline-none focus:border-blue-400
             ${isValid ? 'border-(--border-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)]'}
             ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:shadow-md'} 
             ${readonly ? '' : 'hover:shadow-md'}

package/dist/Joystick/Joystick.svelte

@@ -208,7 +208,7 @@
         style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
       >
         <button
-          class="h-full rotate-270 cursor-pointer rounded-l-full px-3.5"
+          class="h-full cursor-pointer rounded-l-full px-3.5"
           title=""
           onclick={() => {
             if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
@@ -221,17 +221,20 @@
           }}
           onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
           onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-              ><path
-                stroke-miterlimit="10"
-                d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
-              /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
-            ></svg
-          ></button
+        >
+          <div class="rotate-270">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
+                /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
+              ></svg
+            >
+          </div></button
         >
         <button
-          class="h-full rotate-90 cursor-pointer rounded-r-full px-3.5"
+          class="h-full cursor-pointer rounded-r-full px-3.5"
           title=""
           onclick={() => {
             if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
@@ -244,14 +247,17 @@
           }}
           onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
           onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-              ><path
-                stroke-miterlimit="10"
-                d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
-              /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
-            ></svg
-          ></button
+        >
+          <div class="rotate-90">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
+                /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
+              ></svg
+            >
+          </div></button
         >
       </div>
     {/if}

package/dist/Map/Map.svelte

@@ -101,7 +101,7 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
   <MapLibre
-    class="h-[calc(100%-2rem)] min-h-[200px]"
+    class="h-[calc(100%-2rem)] min-h-[200px] overflow-hidden rounded-2xl shadow-sm transition duration-200 hover:shadow-md"
     style={isDarkMode
       ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
       : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'}

package/dist/ProgressBar/ProgressBar.svelte

@@ -69,7 +69,7 @@
   {#if type == 'vertical'}
     <div class="flex h-full flex-wrap gap-3">
       {#each innerValue as val}
-        <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2">
+        <div class="flex h-full w-fit min-w-16 flex-col items-center gap-2 rounded-full bg-(--bg-color) p-2 shadow-sm">
           <div class="relative my-auto h-[80%] w-[70%] rounded-full bg-(--back-color)/40">
             <div class="absolute bottom-0 left-0 flex w-full rounded-full bg-(--field-color)" style="height: {progressPercent(val)}%;"></div>
           </div>
@@ -80,7 +80,7 @@
   {:else}
     <div class="flex w-full flex-col gap-2">
       {#each innerValue as val}
-        <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+        <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2 shadow-sm">
           <span class="m-auto font-semibold">{roundToClean(Number(numericValue(val)))}{number.units}</span>
           <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
             <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent(val)}%;"></div>

package/dist/Select/Select.svelte

@@ -99,8 +99,8 @@
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
-        `w-full rounded-2xl border border-(--border-color) p-1 text-center duration-250
-        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-lg'}`,
+        `w-full rounded-2xl border border-(--border-color) p-1 text-center shadow-sm transition-shadow duration-200
+        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-md'}`,
         value?.class,
       )}
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
@@ -164,10 +164,10 @@
   {:else if type === 'input'}
     <input
       bind:value={searchValue}
-      class="w-full appearance-none rounded-2xl border px-4 py-1 text-center transition-shadow
-          outline-none hover:shadow-md focus:border-blue-400
+      class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-sm
+          transition-shadow duration-200 outline-none focus:border-blue-400
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color)"
+          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color) hover:shadow-md"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       {disabled}

package/dist/Slider/Slider.svelte

@@ -110,6 +110,7 @@
               [&::-webkit-slider-runnable-track]:rounded-l-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
               [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
@@ -156,6 +157,7 @@
               [&::-webkit-slider-runnable-track]:rounded-r-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
               [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
@@ -197,6 +199,7 @@
             `h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
               [&::-webkit-slider-runnable-track]:rounded-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-runnable-track]:shadow-sm
               [&::-webkit-slider-thumb]:relative 
 
               [&::-webkit-slider-thumb]:ml-[-0.4rem] 

package/dist/Switch/Switch.svelte

@@ -74,9 +74,9 @@
             {/if}
 
             <label
-              class="relative flex items-center justify-between rounded-full shadow-md
+              class="relative flex items-center justify-between rounded-full shadow-sm transition duration-200
       {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--bg-color)'}
-      {option.disabled ? 'opacity-60' : ''}"
+      {option.disabled ? 'opacity-60' : 'hover:shadow-md'}"
             >
               <input
                 id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
@@ -126,7 +126,7 @@
       disabled={localOptions[0].disabled}
       class="
       relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
-      bg-white transition duration-300 after:origin-bottom-left after:opacity-0
+      bg-white shadow-sm transition duration-200 after:origin-bottom-left after:opacity-0
       checked:border-(--bg-color)
       checked:bg-(--bg-color) checked:after:absolute checked:after:-top-px checked:after:left-[5px]
       checked:after:h-[13.5px] checked:after:w-[7.5px] checked:after:rotate-43

package/dist/Table/Table.svelte

@@ -160,7 +160,11 @@
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex h-full flex-col overflow-hidden rounded-xl border {outline ? ' border-(--border-color)' : 'border-transparent'} ">
+  <div
+    class="flex h-full flex-col overflow-hidden rounded-xl border shadow-sm transition duration-200 hover:shadow-md {outline
+      ? ' border-(--border-color)'
+      : 'border-transparent'} "
+  >
     <!-- Table Header -->
     <div class="grid font-semibold" style={`grid-template-columns: ${header.map((c) => c.width || 'minmax(0, 1fr)').join(' ')};`}>
       {#each header as column, index (column)}
@@ -211,7 +215,7 @@
                   {#each column.buttons as button (button)}
                     <button
                       class="{twMerge(`cursor-pointer rounded-full 
-                           px-4 py-1 font-medium transition-shadow outline-none select-none hover:shadow-md
+                           px-4 py-1 font-medium shadow-sm transition-shadow duration-200 outline-none select-none hover:shadow-md
                           ${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
                       onclick={() => buttonClick(row, button)}
                     >

package/dist/types.d.ts

@@ -70,7 +70,6 @@ export interface IButtonProps {
 export interface IAccordionProps {
     id?: string;
     isOpen?: boolean;
-    outline?: boolean;
     wrapperClass?: string;
     size?: {
         height?: number;

package/package.json

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