adminforth 1.5.1 → 1.5.2
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.
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="md:flex">
|
|
3
|
+
<ul class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
|
|
4
|
+
<li v-for="tab in tabs" :key="`${tab}-tab-controll`">
|
|
5
|
+
<a
|
|
6
|
+
href="#"
|
|
7
|
+
@click="activeTab = tab"
|
|
8
|
+
class="inline-flex items-center px-4 py-3 rounded-lg w-full"
|
|
9
|
+
:class="tab === activeTab ? 'text-lightPrimaryContrast bg-lightPrimary active dark:bg-darkPrimary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'"
|
|
10
|
+
aria-current="page"
|
|
11
|
+
>
|
|
12
|
+
<slot :name="`tab:${tab}`"></slot>
|
|
13
|
+
</a>
|
|
14
|
+
</li>
|
|
15
|
+
</ul>
|
|
16
|
+
<div class="p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
|
|
17
|
+
<slot :name="activeTab"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import { onMounted, useSlots, ref, type Ref } from 'vue';
|
|
24
|
+
const tabs : Ref<string[]> = ref([]);
|
|
25
|
+
const activeTab = ref('');
|
|
26
|
+
const props = defineProps({
|
|
27
|
+
activeTab: {
|
|
28
|
+
type: String
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const emites = defineEmits([
|
|
32
|
+
'update:activeTab',
|
|
33
|
+
]);
|
|
34
|
+
onMounted(() => {
|
|
35
|
+
const slots = useSlots();
|
|
36
|
+
tabs.value = Object.keys(slots).reduce((tbs, tb) => {
|
|
37
|
+
if (tb.startsWith('tab:')) {
|
|
38
|
+
tbs.push(tb.replace('tab:', ''));
|
|
39
|
+
}
|
|
40
|
+
return tbs;
|
|
41
|
+
}, []);
|
|
42
|
+
if (tabs.value.length > 0) {
|
|
43
|
+
activeTab.value = tabs.value[0];
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
</script>
|
|
@@ -5,4 +5,5 @@ export { default as Link } from './Link.vue';
|
|
|
5
5
|
export { default as Button } from './Button.vue';
|
|
6
6
|
export { default as Input } from './Input.vue';
|
|
7
7
|
export { default as Tooltip } from './Tooltip.vue';
|
|
8
|
-
export { default as LinkButton } from './LinkButton.vue';
|
|
8
|
+
export { default as LinkButton } from './LinkButton.vue';
|
|
9
|
+
export { default as VerticalTabs } from './VerticalTabs.vue';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "adminforth",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.2",
|
|
4
4
|
"description": "OpenSource Vue3 powered forth-generation admin panel",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
"@faker-js/faker": "^9.0.3",
|
|
40
40
|
"@types/express": "^5.0.0",
|
|
41
41
|
"better-sqlite3": "^11.5.0",
|
|
42
|
-
"bintrees": "^1.0.2",
|
|
43
42
|
"dayjs": "^1.11.11",
|
|
44
43
|
"dotenv": "^16.4.5",
|
|
45
44
|
"express": "^4.21.0",
|
|
@@ -50,11 +49,10 @@
|
|
|
50
49
|
"mongodb": "6.6",
|
|
51
50
|
"node-fetch": "^3.3.2",
|
|
52
51
|
"pg": "^8.11.5",
|
|
53
|
-
"
|
|
52
|
+
"ws": "^8.18.0"
|
|
54
53
|
},
|
|
55
54
|
"devDependencies": {
|
|
56
55
|
"@types/node": "^20.14.2",
|
|
57
|
-
"typescript": "^5.4.5"
|
|
58
|
-
"ws": "^8.18.0"
|
|
56
|
+
"typescript": "^5.4.5"
|
|
59
57
|
}
|
|
60
58
|
}
|