poe-svelte-ui-lib 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Tabs/Tabs.svelte
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
Components,
|
|
21
21
|
}: ITabsProps = $props()
|
|
22
22
|
|
|
23
|
-
const isCol = $derived(items.find((item) => item.class?.startsWith('flex-col')))
|
|
23
|
+
const isCol = $derived(!!items.find((item) => item.class?.startsWith('flex-col')))
|
|
24
24
|
|
|
25
25
|
let currentTabIndex: number = $state(activeTab)
|
|
26
26
|
</script>
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
<div {id} class="w-full rounded-2xl bg-(--back-color)">
|
|
29
29
|
<!-- Вкладки -->
|
|
30
30
|
<div
|
|
31
|
-
class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1
|
|
31
|
+
class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1', wrapperClass)}
|
|
32
32
|
bg-(--bg-color)"
|
|
33
33
|
>
|
|
34
34
|
{#each items as item, index}
|
|
35
35
|
<button
|
|
36
36
|
class={twMerge(
|
|
37
|
-
`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 ${
|
|
37
|
+
`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'}`,
|
|
38
38
|
item.class,
|
|
39
39
|
index === currentTabIndex ? twMerge('bg-(--back-color) text-blue-500', item.class) : 'bg-(--bg-color) text-gray-500',
|
|
40
40
|
)}
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
{/if}
|
|
51
51
|
</button>
|
|
52
52
|
<span
|
|
53
|
-
class="
|
|
53
|
+
class="{isCol && items.find((item) => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l {index !== items.length - 1 &&
|
|
54
54
|
index !== currentTabIndex &&
|
|
55
55
|
index !== currentTabIndex - 1
|
|
56
56
|
? 'border-gray-500'
|
|
@@ -125,9 +125,14 @@
|
|
|
125
125
|
onChange={(value) => {
|
|
126
126
|
if (value === 2) {
|
|
127
127
|
component.properties.items.forEach((_item: any, index: number) => {
|
|
128
|
-
let tabWidth = Math.
|
|
128
|
+
let tabWidth = Math.ceil(
|
|
129
|
+
(Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth)) /
|
|
130
|
+
parseFloat(getComputedStyle(document.documentElement).fontSize)) *
|
|
131
|
+
4,
|
|
132
|
+
)
|
|
133
|
+
|
|
129
134
|
const items = [...(component.properties?.items || [])]
|
|
130
|
-
items[index]['class'] = twMerge(items[index].class, `w
|
|
135
|
+
items[index]['class'] = twMerge(items[index].class, `w-${tabWidth}`)
|
|
131
136
|
updateProperty('items', items, component, onPropertyChange)
|
|
132
137
|
})
|
|
133
138
|
} else {
|
|
@@ -137,7 +142,6 @@
|
|
|
137
142
|
updateProperty('items', items, component, onPropertyChange)
|
|
138
143
|
})
|
|
139
144
|
}
|
|
140
|
-
console.log(component.properties?.items)
|
|
141
145
|
}}
|
|
142
146
|
/>
|
|
143
147
|
</div>
|
|
@@ -323,7 +327,6 @@
|
|
|
323
327
|
updateProperty('items', items, component, onPropertyChange)
|
|
324
328
|
})
|
|
325
329
|
}
|
|
326
|
-
console.log(component.properties?.items)
|
|
327
330
|
}}
|
|
328
331
|
/>
|
|
329
332
|
</div>
|