Merge branch 'feat-color-palette' into chore-rename-main-navigation

db-ui · Apr 10, 2024 · 12c2002 · 12c2002
2 parents 9dff33b + fe72600
commit 12c2002
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/components/src/components/navigation-item/docs/Vue.md b/packages/components/src/components/navigation-item/docs/Vue.md
@@ -20,7 +20,7 @@ import { DBNavigationItem } from "@db-ui/v-components";
 
 	<!-- With Sub-Navigation -->
 	<DBNavigationItem>
-		<template #sub-navigation>
+		<template #subnavigation>
 			<DBNavigationItem>
 				<router-link to="mypath">Sub-Navi-Item 1</router-link>
 			</DBNavigationItem>

diff --git a/packages/components/src/components/navigation/docs/Vue.md b/packages/components/src/components/navigation/docs/Vue.md
@@ -14,11 +14,11 @@ import { DBNavigation, DBNavigationItem } from "@db-ui/v-components";
 	<DBNavigation>
 		<DBNavigationItem :active="true">
 			Navi-Item 1
-			<template v-slot:sub-navigation>
+			<template v-slot:subnavigation>
 				<DBNavigationItem :active="true">
 					Sub-Navi-Item 1
 
-					<template v-slot:sub-navigation>
+					<template v-slot:subnavigation>
 						<DBNavigationItem :active="true">
 							<a href="#">Sub-Sub-Navi-Item 1</a>
 						</DBNavigationItem>
@@ -69,7 +69,7 @@ import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
 		</DBNavigationItem>
 		<DBNavigationItem>
 			<template> Demo Pages </template>
-			<template #sub-navigation>
+			<template #subnavigation>
 				<DBNavigationItem>
 					<RouterLink to="/demo/1" ariaCurrentValue="page">
 						Demo Page 1

diff --git a/showcases/shared/navigation.json b/showcases/shared/navigation.json
@@ -10,7 +10,7 @@
 					"html": "<nav class=\"db-main-navigation\">\n\t\t<menu>\n\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t>\n\t\t\t\t\tNavi-Item 1\n\t\t\t\t</button>\n\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</menu>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</li>\n\t\t\t\t</menu>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" data-icon=\"account\">\n\t\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" aria-disabled=\"true\">\n\t\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t\t</li>\n\t\t</menu>\n\t</nav>",
 					"angular": "<db-main-navigation>\n\t<db-navigation-item [active]=\"true\">\n\t\t<ng-container sub-navigation>\n\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container sub-navigation>\n\t\t\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t\t<db-navigation-item>\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t\t<db-navigation-item>\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t</ng-container>\n\t\t<ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item icon=\"account\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item [disabled]=\"true\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n</db-main-navigation>",
 					"react": "<DBMainNavigation>\n\t\t<DBNavigationItem\n\t\t\tactive\n\t\t\tslotSubNavigation={\n\t\t\t\t<>\n\t\t\t\t\t<DBNavigationItem\n\t\t\t\t\t\tactive\n\t\t\t\t\t\tslotSubNavigation={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<DBNavigationItem active>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t</>\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem disabled>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>",
-					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
+					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:subnavigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:subnavigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
 				}
 			},
 			{
@@ -21,7 +21,7 @@
 					"html": "<nav class=\"db-main-navigation\">\n\t\t<menu>\n\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t>\n\t\t\t\t\tNavi-Item 1\n\t\t\t\t</button>\n\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</menu>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</li>\n\t\t\t\t</menu>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" data-icon=\"account\">\n\t\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" aria-disabled=\"true\">\n\t\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t\t</li>\n\t\t</menu>\n\t</nav>",
 					"angular": "<db-main-navigation>\n\t<db-navigation-item [active]=\"true\">\n\t\t<ng-container sub-navigation>\n\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container sub-navigation>\n\t\t\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t\t<db-navigation-item>\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t\t<db-navigation-item>\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t</ng-container>\n\t\t<ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item icon=\"account\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item [disabled]=\"true\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n</db-main-navigation>",
 					"react": "<DBMainNavigation>\n\t\t<DBNavigationItem\n\t\t\tactive\n\t\t\tslotSubNavigation={\n\t\t\t\t<>\n\t\t\t\t\t<DBNavigationItem\n\t\t\t\t\t\tactive\n\t\t\t\t\t\tslotSubNavigation={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<DBNavigationItem active>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t</>\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem disabled>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>",
-					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
+					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:subnavigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:subnavigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
 				}
 			},
 			{
@@ -32,7 +32,7 @@
 					"html": "<nav class=\"db-main-navigation\">\n\t\t<menu>\n\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t>\n\t\t\t\t\tNavi-Item 1\n\t\t\t\t</button>\n\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"db-navigation-item-expand-button\"\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<menu class=\"db-sub-navigation\">\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\" aria-current=\"page\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</menu>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<li class=\"db-navigation-item\">\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</li>\n\t\t\t\t</menu>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" data-icon=\"account\">\n\t\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t\t</li>\n\n\t\t\t<li class=\"db-navigation-item\" aria-disabled=\"true\">\n\t\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t\t</li>\n\t\t</menu>\n\t</nav>",
 					"angular": "<db-main-navigation>\n\t<db-navigation-item [active]=\"true\">\n\t\t<ng-container sub-navigation>\n\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container sub-navigation>\n\t\t\t\t\t<db-navigation-item [active]=\"true\">\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t\t<db-navigation-item>\n\t\t\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</db-navigation-item>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t\t<db-navigation-item>\n\t\t\t\t<ng-container *dbNavigationContent>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</ng-container>\n\t\t\t</db-navigation-item>\n\t\t</ng-container>\n\t\t<ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item icon=\"account\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n\t<db-navigation-item [disabled]=\"true\">\n\t\t<ng-container *dbNavigationContent>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</ng-container>\n\t</db-navigation-item>\n</db-main-navigation>",
 					"react": "<DBMainNavigation>\n\t\t<DBNavigationItem\n\t\t\tactive\n\t\t\tslotSubNavigation={\n\t\t\t\t<>\n\t\t\t\t\t<DBNavigationItem\n\t\t\t\t\t\tactive\n\t\t\t\t\t\tslotSubNavigation={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<DBNavigationItem active>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\tSub-Navi-Item 1\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t</>\n\t\t\t}\n\t\t>\n\t\t\tNavi-Item 1\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem disabled>\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>",
-					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:sub-navigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
+					"vue": "<DBMainNavigation>\n\t\t<DBNavigationItem :active=\"true\">\n\t\t\tNavi-Item 1\n\t\t\t<template v-slot:subnavigation>\n\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\tSub-Navi-Item 1\n\n\t\t\t\t\t<template v-slot:subnavigation>\n\t\t\t\t\t\t<DBNavigationItem :active=\"true\">\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 1</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t\t\t<a href=\"#\">Sub-Sub-Navi-Item 2</a>\n\t\t\t\t\t\t</DBNavigationItem>\n\t\t\t\t\t</template>\n\t\t\t\t</DBNavigationItem>\n\t\t\t\t<DBNavigationItem>\n\t\t\t\t\t<a href=\"#\">Sub-Navi-Item 2</a>\n\t\t\t\t</DBNavigationItem>\n\t\t\t</template>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem icon=\"account\">\n\t\t\t<a href=\"#\">Navi-Item 2</a>\n\t\t</DBNavigationItem>\n\t\t<DBNavigationItem :disabled=\"true\">\n\t\t\t<a href=\"#\">Navi-Item 3</a>\n\t\t</DBNavigationItem>\n\t</DBMainNavigation>"
 				}
 			}
 		]