poe-svelte-ui-lib 1.2.0 → 1.2.2

package/dist/Tabs/Tabs.svelte

@@ -20,7 +20,7 @@
     Components,
   }: ITabsProps = $props()
 
-  const isCol = $derived(items.find((item) => item.class?.startsWith('flex-col')))
+  const isCol = $derived(!!items.find((item) => item.class?.startsWith('flex-col')))
 
   let currentTabIndex: number = $state(activeTab)
 </script>
@@ -28,13 +28,13 @@
 <div {id} class="w-full rounded-2xl bg-(--back-color)">
   <!-- Вкладки -->
   <div
-    class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1 pt-1', wrapperClass)} 
+    class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1', wrapperClass)} 
      bg-(--bg-color)"
   >
     {#each items as item, index}
       <button
         class={twMerge(
-          `tab mt-1 flex min-w-fit cursor-pointer items-center justify-center gap-0 self-end rounded-t-2xl px-5 py-2.5 ${!isCol && 'gap-2'}`,
+          `tab mt-1 flex min-w-fit cursor-pointer items-center justify-center gap-0 self-end rounded-t-2xl px-5 py-2.5 ${isCol && items.find((item) => item.icon) ? 'h-20' : 'gap-2'}`,
           item.class,
           index === currentTabIndex ? twMerge('bg-(--back-color) text-blue-500', item.class) : 'bg-(--bg-color) text-gray-500',
         )}
@@ -50,7 +50,7 @@
         {/if}
       </button>
       <span
-        class="h-[{isCol && items.find((item) => item.icon) ? 35 : 16}px] w-0 border border-l {index !== items.length - 1 &&
+        class="{isCol && items.find((item) => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l {index !== items.length - 1 &&
         index !== currentTabIndex &&
         index !== currentTabIndex - 1
           ? 'border-gray-500'

package/dist/Tabs/TabsProps.svelte

@@ -137,7 +137,6 @@
               updateProperty('items', items, component, onPropertyChange)
             })
           }
-          console.log(component.properties?.items)
         }}
       />
     </div>
@@ -239,12 +238,10 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
-      <UI.Select
-        label={{ name: $t('constructor.props.type') }}
-        type="buttons"
-        value={initialType}
-        options={$optionsStore.ACCORDION_TYPE_OPTIONS}
-        onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
       <div class="flex w-full gap-4">
         <UI.Input
@@ -262,88 +259,160 @@
           type="number"
         />
       </div>
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
 
-      <UI.Switch
-        label={{ name: $t('constructor.props.open') }}
-        value={component.properties.isOpen ? 2 : 1}
-        onChange={(value) => updateProperty('isOpen', value === 2, component, onPropertyChange)}
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS.slice(1)}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, `text-${option.value?.slice(3)}-500`)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.icon.text.position') }}
+        type="buttons"
+        options={$optionsStore.ICON_TEXT_POSITION_OPTIONS}
+        value={initialPosition}
+        onUpdate={(option) => {
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, option.value)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
       />
-      <div class="relative mt-5 flex w-full gap-2">
-        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
-        {#if showIconLib}
-          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
-            {#snippet main()}
-              <div class="grid grid-cols-3">
-                {#each ICONS as category}
-                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
-                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
-                    <div class="grid grid-cols-3 place-items-center gap-2">
-                      {#each category[1] as icon}
-                        <button
-                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
-                          onclick={() => {
-                            updateProperty('label.icon', icon as string, component, onPropertyChange)
-                          }}
-                        >
-                          {@html icon}
-                        </button>{/each}
-                    </div>
-                  </div>
-                {/each}
-              </div>
-            {/snippet}
-          </Modal>
-        {/if}
-        {#if component.properties.label.icon}
-          <Button
-            wrapperClass="w-8.5 "
-            componentClass="p-0.5 bg-red"
-            content={{ icon: CrossIcon }}
-            onClick={() => {
-              updateProperty('label.icon', '', component, onPropertyChange)
-            }}
-          />
-        {/if}
-      </div>
-
-      <UI.Input
-        label={{ name: $t('constructor.props.label') }}
-        value={component.properties.label.name}
-        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      <UI.Switch
+        label={{
+          name: $t('constructor.props.widthMode'),
+          captionLeft: $t('constructor.props.height.small'),
+          captionRight: $t('constructor.props.equal'),
+        }}
+        value={initialWidth()}
+        onChange={(value) => {
+          if (value === 2) {
+            component.properties.items.forEach((_item: any, index: number) => {
+              let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, `w-[${tabWidth}px]`)
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          } else {
+            component.properties.items.forEach((_item: any, index: number) => {
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, 'w-auto')
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          }
+        }}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.label.class') }}
-        value={component.properties.label.class}
-        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+          const newItem: { name: string; icon: string; class: string } = {
+            name: `Tab ${component.properties?.items.length + 1}`,
+            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            icon: '',
+          }
+          const items = [...(component.properties?.items || []), newItem]
+          updateProperty('items', items, component, onPropertyChange)
+        }}
       />
     </div>
-    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
-      <div class="flex">
-        <UI.FileAttach
-          type="image"
-          label={{ name: $t('constructor.props.image') }}
-          accept="image/png, image/jpeg, image/webp"
-          bind:currentImage
-          onChange={handleImageUpload}
+
+    {#each component.properties.items || [] as tab, index}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="w-5/10"
+          value={tab.name}
+          onUpdate={(value) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['name'] = value
+            updateProperty('items', items, component, onPropertyChange)
+          }}
         />
-        {#if currentImage}
-          <Button
-            wrapperClass="w-8.5 mt-6"
-            componentClass="p-0.5 bg-red"
-            content={{ icon: CrossIcon }}
+        <div class="relative mt-5 flex w-3/10 gap-2">
+          <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (tabIcon = { index: index, isModalOpen: true })} />
+
+          {#if tab.icon}
+            <Button
+              wrapperClass="w-8.5 "
+              componentClass="p-0.5 bg-red"
+              content={{ icon: CrossIcon }}
+              onClick={() => {
+                const items = [...(component.properties?.items || [])]
+                items[index]['icon'] = ''
+                updateProperty('items', items, component, onPropertyChange)
+              }}
+            />
+          {/if}
+        </div>
+
+        {#if component.properties.items.length > 1}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
             onClick={() => {
-              updateProperty('image', '', component, onPropertyChange)
+              const items = [...(component.properties?.items || [])]
+              items.splice(index, 1)
+              updateProperty('items', items, component, onPropertyChange)
             }}
           />
         {/if}
       </div>
-    </div>
+    {/each}
+    {#if tabIcon.isModalOpen}
+      <Modal bind:isOpen={tabIcon.isModalOpen} wrapperClass="w-130">
+        {#snippet main()}
+          <div class="grid grid-cols-3">
+            {#each ICONS as category}
+              <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                <div class="grid grid-cols-3 place-items-center gap-2">
+                  {#each category[1] as icon}
+                    <button
+                      class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                      onclick={() => {
+                        const items = [...(component.properties?.items || [])]
+                        items[tabIcon.index]['icon'] = icon as string
+                        updateProperty('items', items, component, onPropertyChange)
+                      }}
+                    >
+                      {@html icon}
+                    </button>{/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/snippet}
+      </Modal>
+    {/if}
   </div>
 {/if}

package/dist/index.d.ts

@@ -26,4 +26,4 @@ export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';
 export * from './locales/translations';
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITabsProps, } from './types';
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, } from './types';

package/package.json

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