ketekny-ui-kit 1.0.108 → 1.0.110

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ketekny-ui-kit",
3
3
  "type": "module",
4
- "version": "1.0.108",
4
+ "version": "1.0.110",
5
5
  "description": "A Vue 3 UI component library with Tailwind CSS styling",
6
6
  "main": "index.js",
7
7
  "files": [
@@ -1,9 +1,9 @@
1
1
  <template>
2
- <main class="flex min-h-screen w-full max-w-none flex-col bg-slate-100">
2
+ <main class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-y-auto bg-slate-100">
3
3
  <div
4
4
  v-if="showHeaderExtraBeforeTitle"
5
5
  class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
6
- :style="{ top: headerExtraTop }"
6
+ :style="{ top: resolvedHeaderExtraTop }"
7
7
  >
8
8
  <div class="mx-auto flex w-full max-w-none items-center">
9
9
  <slot name="header-extra" />
@@ -47,7 +47,7 @@
47
47
  <div
48
48
  v-if="showHeaderExtraAfterTitle"
49
49
  class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
50
- :style="{ top: headerExtraTop }"
50
+ :style="{ top: resolvedHeaderExtraTop }"
51
51
  >
52
52
  <div class="mx-auto flex w-full max-w-none items-center">
53
53
  <slot name="header-extra" />
@@ -110,6 +110,9 @@ export default {
110
110
  showHeaderExtraAfterTitle() {
111
111
  return !this.headerExtraBeforeTitle && Boolean(this.$slots['header-extra'])
112
112
  },
113
+ resolvedHeaderExtraTop() {
114
+ return this.hasTopSection ? this.headerExtraTop : '0px'
115
+ },
113
116
  externalUrlLabel() {
114
117
  const target = String(this.externalUrl || '').trim()
115
118
  if (!target) return ''
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <main class="flex h-screen w-full max-w-none flex-col overflow-hidden bg-slate-100">
2
+ <main class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-hidden bg-slate-100">
3
3
  <section
4
4
  v-if="hasTopSection"
5
5
  class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8"
@@ -43,8 +43,8 @@
43
43
  </div>
44
44
  </div>
45
45
 
46
- <div class="min-h-0 flex-1 overflow-hidden bg-slate-100 py-4">
47
- <div class="mx-auto flex h-full min-h-0 w-full max-w-none gap-2">
46
+ <div class="flex min-h-0 flex-1 flex-col overflow-hidden bg-slate-100 py-4">
47
+ <div class="mx-auto flex min-h-0 w-full max-w-none flex-1 gap-2">
48
48
  <aside class="ml-8 min-h-0 shrink-0 overflow-y-auto pr-4" :style="sidebarStyle">
49
49
  <slot name="sidebar" />
50
50
  </aside>
@@ -26,14 +26,16 @@
26
26
  </template>
27
27
  </MultilevelSidebar>
28
28
 
29
- <main class="flex min-h-0 flex-1 flex-col overflow-y-auto">
29
+ <main class="flex min-h-0 flex-1 flex-col overflow-hidden">
30
30
  <div
31
31
  v-if="$slots.header"
32
32
  class="sticky top-0 z-20 shrink-0"
33
33
  >
34
34
  <slot name="header" />
35
35
  </div>
36
- <slot />
36
+ <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
37
+ <slot />
38
+ </div>
37
39
  </main>
38
40
 
39
41
  <button