@saasmakers/ui 1.4.24 → 1.4.25

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/app/components/bases/BaseDivider.vue +53 -36
  2. package/package.json +1 -1
package/app/components/bases/BaseDivider.vue CHANGED
@@ -5,9 +5,9 @@ const props = withDefaults(defineProps<BaseDivider>(), {
5
5
  borderStyle: 'solid',
6
6
  hideNext: false,
7
7
  hidePrevious: false,
8
+ loading: false,
8
9
  margin: 6,
9
10
  navigable: false,
10
- loading: false,
11
11
  size: 'base',
12
12
  title: '',
13
13
  })
@@ -45,44 +45,61 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
45
45
  }"
46
46
  >
47
47
  <div
48
- class="border-t border-gray-300 dark:border-gray-700"
49
- :class="{
50
- 'border-dashed': borderStyle === 'dashed',
51
- 'border-dotted': borderStyle === 'dotted',
52
- 'border-solid': borderStyle === 'solid',
53
- }"
54
- style="height: 1px"
55
- />
48
+ class="flex items-center"
49
+ :class="{ 'gap-2': navigable }"
50
+ >
51
+ <BaseIcon
52
+ v-if="navigable && !loading && !hidePrevious"
53
+ class="shrink-0 hover:!no-underline"
54
+ clickable
55
+ :icon="getIcon('chevronLeft')"
56
+ size="sm"
57
+ :text="t('previous')"
58
+ :uppercase="false"
59
+ @click="onNavigate($event, 'previous')"
60
+ />
61
+
62
+ <div class="min-w-0 flex flex-1 items-center">
63
+ <div
64
+ class="flex-1 border-t border-gray-300 dark:border-gray-700"
65
+ :class="{
66
+ 'border-dashed': borderStyle === 'dashed',
67
+ 'border-dotted': borderStyle === 'dotted',
68
+ 'border-solid': borderStyle === 'solid',
69
+ }"
70
+ style="height: 1px"
71
+ />
56
72
 
57
- <BaseText
58
- v-if="loading || title"
59
- class="absolute left-1/2 inline-block -mt-3 -translate-x-1/2 transform whitespace-nowrap bg-gray-100 px-4 text-center dark:bg-gray-900"
60
- size="sm"
61
- :text="loading ? t('loading') : title"
62
- />
73
+ <BaseText
74
+ v-if="loading || title"
75
+ class="shrink-0 px-4 text-center"
76
+ size="sm"
77
+ :text="loading ? t('loading') : title"
78
+ />
63
79
 
64
- <BaseIcon
65
- v-if="navigable && !loading && !hidePrevious"
66
- class="absolute left-0 -mt-3"
67
- clickable
68
- :icon="getIcon('chevronLeft')"
69
- size="2xs"
70
- :text="t('previous')"
71
- :uppercase="false"
72
- @click="onNavigate($event, 'previous')"
73
- />
80
+ <div
81
+ class="flex-1 border-t border-gray-300 dark:border-gray-700"
82
+ :class="{
83
+ 'border-dashed': borderStyle === 'dashed',
84
+ 'border-dotted': borderStyle === 'dotted',
85
+ 'border-solid': borderStyle === 'solid',
86
+ }"
87
+ style="height: 1px"
88
+ />
89
+ </div>
74
90
 
75
- <BaseIcon
76
- v-if="navigable && !loading && !hideNext"
77
- class="absolute right-0 -mt-3"
78
- clickable
79
- reverse
80
- :icon="getIcon('chevronRight')"
81
- size="2xs"
82
- :text="t('next')"
83
- :uppercase="false"
84
- @click="onNavigate($event, 'next')"
85
- />
91
+ <BaseIcon
92
+ v-if="navigable && !loading && !hideNext"
93
+ class="shrink-0 hover:!no-underline"
94
+ clickable
95
+ reverse
96
+ :icon="getIcon('chevronRight')"
97
+ size="sm"
98
+ :text="t('next')"
99
+ :uppercase="false"
100
+ @click="onNavigate($event, 'next')"
101
+ />
102
+ </div>
86
103
  </div>
87
104
  </template>
88
105
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saasmakers/ui",
3
- "version": "1.4.24",
3
+ "version": "1.4.25",
4
4
  "private": false,
5
5
  "description": "Reusable Nuxt UI components for SaaS Makers projects",
6
6
  "license": "MIT",