frappe-ui 0.1.227 → 0.1.228

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Tabs/Tabs.vue +8 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frappe-ui",
3
- "version": "0.1.227",
3
+ "version": "0.1.228",
4
4
  "description": "A set of components and utilities for rapid UI development",
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/src/components/Tabs/Tabs.vue CHANGED
@@ -12,7 +12,7 @@ import { h } from 'vue'
12
12
 
13
13
  const props = defineProps<TabProps>()
14
14
 
15
- const indicatorXCss = `left-0 bottom-0 h-[1px] w-[--reka-tabs-indicator-size] transition-[width,transform]
15
+ const indicatorXCss = `left-0 bottom-0 h-[2px] w-[--reka-tabs-indicator-size] transition-[width,transform]
16
16
  translate-x-[--reka-tabs-indicator-position] translate-y-[1px]`
17
17
 
18
18
  const indicatorYCss = `right-0 w-[1px] h-[--reka-tabs-indicator-size] transition-[height,transform]
@@ -26,12 +26,13 @@ const Btn = h('button')
26
26
  <template>
27
27
  <TabsRoot
28
28
  :as="props.as"
29
- class="data-[orientation=vertical]:flex"
29
+ class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row [&_[role='tabpanel']:not([hidden])]:flex [&_[role='tabpanel']:not([hidden])]:grow"
30
30
  :orientation="props.vertical ? 'vertical' : 'horizontal'"
31
31
  :default-value="props.tabs[0].label"
32
32
  >
33
33
  <TabsList
34
- class="relative flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r"
34
+ class="relative flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r"
35
+ :class="{ 'overflow-auto': !props.vertical }"
35
36
  >
36
37
  <TabsIndicator
37
38
  class="absolute rounded-full duration-300"
@@ -46,7 +47,7 @@ const Btn = h('button')
46
47
  :is="tab.route ? 'router-link' : Btn"
47
48
  :to="tab.route"
48
49
  class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 p-2.5 data-[state=active]:text-ink-gray-9"
49
- :class="{ 'py-2.5': props.vertical, }"
50
+ :class="{ 'py-2.5': props.vertical }"
50
51
  >
51
52
  <component v-if="tab.icon" :is="tab.icon" class="size-4">
52
53
  </component>
@@ -58,7 +59,9 @@ const Btn = h('button')
58
59
  </TabsList>
59
60
 
60
61
  <TabsContent v-for="(tab, i) in props.tabs" :value="i">
61
- <slot name="tab-panel" v-bind="{ tab }"> </slot>
62
+ <div class="flex flex-col flex-1 grow">
63
+ <slot name="tab-panel" v-bind="{ tab }" />
64
+ </div>
62
65
  </TabsContent>
63
66
  </TabsRoot>
64
67
  </template>