{
component.properties.items.forEach((_item: any, index: number) => {
const items = [...(component.properties?.items || [])]
items[index]["class"] = twMerge(items[index].class, value ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
updateProperty("items", items, component, onPropertyChange)
})
}}
/>
{/snippet}
{#snippet TabsSettings()}
{$T("constructor.props.tabs.title")}
{#if component.properties?.items.length < 10}
{
const newItem: { name: string; icon: string; class: string } = {
name: `Tab ${component.properties?.items.length + 1}`,
class: `text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
icon: "",
}
const items = [...(component.properties?.items || []), newItem]
items.forEach((_item: any, index: number) => {
items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
updateProperty("items", items, component, onPropertyChange)
})
}}
/>
{/if}
{#each component.properties.items || [] as tab, index}
{
updateProperty("items", updatedArray, component, onPropertyChange)
}}
/>
{
const items = [...(component.properties?.items || [])]
items[index]["name"] = value
updateProperty("items", items, component, onPropertyChange)
}}
/>
{
const items = [...(component.properties?.items || [])]
items[index]["icon"] = icon as string
updateProperty("items", items, component, onPropertyChange)
},
icons: { array: ICONS },
}}
{component}
{onPropertyChange}
/>
{
const items = [...(component.properties?.items || [])]
items[index]["disabled"] = value
updateProperty("items", items, component, onPropertyChange)
}}
/>
{#if component.properties.items.length > 1}
{
const items = [...(component.properties?.items || [])]
items.splice(index, 1)
items.forEach((_item: any, index: number) => {
items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
updateProperty("items", items, component, onPropertyChange)
})
updateProperty("items", items, component, onPropertyChange)
}}
/>
{/if}
{/each}
{/snippet}
{#snippet TabsSize()}
updateProperty("size.height", value as number, component, onPropertyChange)}
number={{ minNum: 1, maxNum: 1000, step: 1 }}
type="number"
/>
updateProperty("size.width", value as number, component, onPropertyChange)}
number={{ minNum: 1, maxNum: 1000, step: 1 }}
type="number"
/>
{/snippet}
{#if forConstructor}
{@render TabsIconPosition()}
{@render TabsWidthMode()}
{@render TabsSettings()}
{:else}
{@render TabsSize()}
{@render TabsIconPosition()}
{@render TabsWidthMode()}
{@render TabsSettings()}
{/if}