poe-svelte-ui-lib 1.2.0 → 1.2.1

package/dist/Tabs/TabsProps.svelte

@@ -239,12 +239,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 +260,161 @@
           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)
+            })
+          }
+          console.log(component.properties?.items)
+        }}
       />
-      <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.1",
   "license": "MIT",
   "type": "module",
   "scripts": {