adminforth 2.4.0-next.170 → 2.4.0-next.172

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 (6) hide show
  1. package/dist/spa/src/components/MenuLink.vue +60 -17
  2. package/dist/spa/src/components/Sidebar.vue +1 -1
  3. package/dist/spa/src/types/adapters/index.ts +1 -0
  4. package/dist/types/adapters/index.d.ts +1 -0
  5. package/dist/types/adapters/index.d.ts.map +1 -1
  6. package/package.json +1 -1
package/dist/spa/src/components/MenuLink.vue CHANGED
@@ -3,29 +3,24 @@
3
3
  :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}"
4
4
  class="af-menu-link flex group relative items-center w-full py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out"
5
5
  :class="{
6
- 'ml-1': isSidebarIconOnly && !isSidebarHovering && isChild,
7
6
  'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
8
- 'px-6': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
9
- 'px-3.5': !isChild || (isSidebarIconOnly && !isSidebarHovering),
10
- 'max-w-12': isSidebarIconOnly && !isSidebarHovering,
7
+ 'pl-6 pr-3.5': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
8
+ 'px-3.5 ': !isChild || (isSidebarIconOnly && !isSidebarHovering),
9
+ 'w-12': isSidebarIconOnly && !isSidebarHovering,
11
10
  'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
12
11
  ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
13
12
  ($route.name === item.path)
14
13
  }"
15
14
  >
16
15
  <component v-if="item.icon" :is="getIcon(item.icon)"
17
- class="text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
18
- :class="{
19
- 'min-w-4 min-h-4': isSidebarIconOnly && !isSidebarHovering && isChild,
20
- 'min-w-5 min-h-5': !(isSidebarIconOnly && !isSidebarHovering && isChild)
21
- }" >
16
+ class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
17
+ >
22
18
  </component>
23
- <span
24
- class="overflow-hidden block ms-3 pr-5 text-left rtl:text-right transition-all duration-200 ease-in-out"
19
+ <div
20
+ class="overflow-hidden block ms-3 pr-4 text-left rtl:text-right transition-all duration-200 ease-in-out"
25
21
  :class="{
26
22
  'opacity-0 ms-0 translate-x-4 flex-none': isSidebarIconOnly && !isSidebarHovering,
27
- 'opacity-100 ms-3 translate-x-0 flex-none': isSidebarIconOnly && isSidebarHovering,
28
- 'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly
23
+ 'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering),
29
24
  }"
30
25
  :style="isSidebarIconOnly ? {
31
26
  minWidth: isChild
@@ -37,8 +32,8 @@
37
32
  } : {}"
38
33
  >
39
34
  {{ item.label }}
40
- </span>
41
- <span class="absolute right-1 top-1/2 -translate-y-1/2" v-if="item.badge && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
35
+ </div>
36
+ <span class="absolute right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">
42
37
  <Tooltip v-if="item.badgeTooltip">
43
38
  <div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
44
39
  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
@@ -51,7 +46,7 @@
51
46
  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
52
47
  </template>
53
48
  </span>
54
- <div v-if="item.badge && isSidebarIconOnly && !isSidebarHovering" class="af-badge absolute right-1 top-1/2 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
49
+ <div v-if="item.badge && isSidebarIconOnly && !isSidebarHovering" class="af-badge absolute right-0.5 bottom-1 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG
55
50
  fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
56
51
  </div>
57
52
  </RouterLink>
@@ -60,7 +55,55 @@
60
55
  <script setup lang="ts">
61
56
  import { getIcon } from '@/utils';
62
57
  import { Tooltip } from '@/afcl';
58
+ import { ref, watch } from 'vue';
59
+
60
+ const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
61
+
62
+ const BADGE_SHOW_DELAY_MS = 200;
63
+ const showExpandedBadge = ref(false);
64
+ let showBadgeTimer: ReturnType<typeof setTimeout> | null = null;
65
+
66
+ function cancelShowBadgeTimer() {
67
+ if (showBadgeTimer) {
68
+ clearTimeout(showBadgeTimer);
69
+ showBadgeTimer = null;
70
+ }
71
+ }
72
+
73
+ function showBadgeImmediately() {
74
+ cancelShowBadgeTimer();
75
+ showExpandedBadge.value = true;
76
+ }
77
+
78
+ function hideBadgeImmediately() {
79
+ cancelShowBadgeTimer();
80
+ showExpandedBadge.value = false;
81
+ }
82
+
83
+ function showBadgeAfterDelay() {
84
+ cancelShowBadgeTimer();
85
+ showBadgeTimer = setTimeout(() => {
86
+ showExpandedBadge.value = true;
87
+ showBadgeTimer = null;
88
+ }, BADGE_SHOW_DELAY_MS);
89
+ }
90
+
91
+ watch(
92
+ [() => props.isSidebarIconOnly, () => props.isSidebarHovering],
93
+ ([isIconOnly, isHovering]) => {
94
+ if (!isIconOnly) {
95
+ showBadgeImmediately();
96
+ return;
97
+ }
98
+
99
+ if (isHovering) {
100
+ showBadgeAfterDelay();
101
+ return;
102
+ }
63
103
 
64
- defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
104
+ hideBadgeImmediately();
105
+ },
106
+ { immediate: true }
107
+ );
65
108
 
66
109
  </script>
package/dist/spa/src/components/Sidebar.vue CHANGED
@@ -130,7 +130,7 @@
130
130
  </svg>
131
131
  </button>
132
132
 
133
- <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
133
+ <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i), 'relative after:absolute after:-left-3 after:inset-y-0 after:w-0.5 after:bg-lightSidebarIcons/50 dark:after:bg-darkSidebarIcons/50 after:rounded-full': isSidebarIconOnly && !isSidebarHovering && opened.includes(i) }">
134
134
  <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
135
135
  <li class="af-sidebar-menu-link">
136
136
  <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')" :isSidebarIconOnly="isSidebarIconOnly" :isSidebarHovering="isSidebarHovering"/>
package/dist/spa/src/types/adapters/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export type { EmailAdapter } from './EmailAdapter.js';
2
2
  export type { CompletionAdapter } from './CompletionAdapter.js';
3
3
  export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
4
+ export type { KeyValueAdapter } from './KeyValueAdapter.js';
4
5
  export type { ImageVisionAdapter } from './ImageVisionAdapter.js';
5
6
  export type { OAuth2Adapter } from './OAuth2Adapter.js';
6
7
  export type { StorageAdapter } from './StorageAdapter.js';
package/dist/types/adapters/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export type { EmailAdapter } from './EmailAdapter.js';
2
2
  export type { CompletionAdapter } from './CompletionAdapter.js';
3
3
  export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
4
+ export type { KeyValueAdapter } from './KeyValueAdapter.js';
4
5
  export type { ImageVisionAdapter } from './ImageVisionAdapter.js';
5
6
  export type { OAuth2Adapter } from './OAuth2Adapter.js';
6
7
  export type { StorageAdapter } from './StorageAdapter.js';
package/dist/types/adapters/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../types/adapters/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../types/adapters/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adminforth",
3
- "version": "2.4.0-next.170",
3
+ "version": "2.4.0-next.172",
4
4
  "description": "OpenSource Vue3 powered forth-generation admin panel",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",