frappe-ui 0.1.231 → 0.1.233

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 +17 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frappe-ui",
3
- "version": "0.1.231",
3
+ "version": "0.1.233",
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,11 +12,11 @@ import { h } from 'vue'
12
12
 
13
13
  const props = defineProps<TabProps>()
14
14
 
15
- const indicatorXCss = `left-0 bottom-0 h-[2px] 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
- const indicatorYCss = `right-0 w-[1px] h-[--reka-tabs-indicator-size] transition-[height,transform]
19
- translate-y-[--reka-tabs-indicator-position] translate-x-[1px]`
18
+ const indicatorYCss = `right-0 top-0 w-[2px] h-[--reka-tabs-indicator-size]
19
+ translate-y-[--reka-tabs-indicator-position] transition-[height,transform]`
20
20
 
21
21
  // Using a plain <button> element via `h('button')` to avoid picking up
22
22
  // the globally registered Button component and its styles.
@@ -26,13 +26,16 @@ const Btn = h('button')
26
26
  <template>
27
27
  <TabsRoot
28
28
  :as="props.as"
29
- class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row [&_[role='tabpanel']:not([hidden])]:flex [&_[role='tabpanel']:not([hidden])]:grow"
29
+ class="flex flex-1 overflow-hidden flex-col data-[orientation=vertical]:flex-row"
30
30
  :orientation="props.vertical ? 'vertical' : 'horizontal'"
31
31
  :default-value="props.tabs[0].label"
32
32
  >
33
33
  <TabsList
34
- class="relative min-h-fit flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r"
35
- :class="{ 'overflow-auto': !props.vertical }"
34
+ class="relative min-h-fit flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r gap-5"
35
+ :class="{
36
+ 'overflow-x-auto overflow-y-hidden px-5': !props.vertical,
37
+ 'py-3': props.vertical,
38
+ }"
36
39
  >
37
40
  <TabsIndicator
38
41
  class="absolute rounded-full duration-300"
@@ -46,8 +49,8 @@ const Btn = h('button')
46
49
  <component
47
50
  :is="tab.route ? 'router-link' : Btn"
48
51
  :to="tab.route"
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"
50
- :class="{ 'py-2.5': props.vertical }"
52
+ class="flex items-center gap-1.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9 data-[state=active]:text-ink-gray-9"
53
+ :class="{ 'px-2.5': props.vertical, 'py-2.5': !props.vertical }"
51
54
  >
52
55
  <component v-if="tab.icon" :is="tab.icon" class="size-4">
53
56
  </component>
@@ -58,10 +61,12 @@ const Btn = h('button')
58
61
  </TabsTrigger>
59
62
  </TabsList>
60
63
 
61
- <TabsContent v-for="(tab, i) in props.tabs" :value="i">
62
- <div class="flex flex-col flex-1 grow">
63
- <slot name="tab-panel" v-bind="{ tab }" />
64
- </div>
64
+ <TabsContent
65
+ v-for="(tab, i) in props.tabs"
66
+ :value="i"
67
+ class="flex flex-col overflow-auto"
68
+ >
69
+ <slot name="tab-panel" v-bind="{ tab }" />
65
70
  </TabsContent>
66
71
  </TabsRoot>
67
72
  </template>