├── .browserslistrc
├── .gitignore
├── README.md
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── DemoWithRouter.ts
    ├── assets
    │   ├── fonts
    │   │   └── Inter.ttf
    │   └── logo.png
    ├── components
    │   ├── Vue3RouterTree
    │   │   ├── CaretRight.vue
    │   │   ├── index.tsx
    │   │   └── style.scss
    │   └── icons
    │   │   └── Icon.vue
    ├── devComponents
    │   ├── Prism.ts
    │   ├── icons
    │   │   ├── Icon.vue
    │   │   └── IconLogoGithub.vue
    │   └── navigation
    │   │   └── TabView.vue
    ├── layouts
    │   └── DefaultLayout
    │   │   └── DefaultLayout.vue
    ├── main.ts
    ├── router
    │   └── index.ts
    ├── shims-vue.d.ts
    ├── styles
    │   ├── index.scss
    │   └── prism-nocture-birds.css
    ├── utils
    │   └── snippets.ts
    └── views
    │   ├── About.vue
    │   ├── Home.vue
    │   └── guide
    │       ├── BasicExample.vue
    │       ├── DefaultOpenExample.vue
    │       ├── Index.vue
    │       ├── OpenAll.vue
    │       ├── WithIcons.vue
    │       └── WithMetaInfo.vue
├── tailwind.config.js
├── tests
    └── unit
    │   └── example.spec.ts
├── tsconfig.json
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | build
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue 3 router tree
  2 | 
  3 | This component is based on **Vue.js 3**, it represents your routes or items as a tree view, by default takes it takes the routes configuration as items, but you could provide your custom items that respects the following format :
  4 | 
  5 | ```js
  6 | [
  7 |   {
  8 |       path:'/somePath',//optional
  9 |       name:'someName',//required
 10 |       component:SomeComponent //optional but if it's provided the tree node will be a link that redirects to this component
 11 |       children:[
 12 | 
 13 | 
 14 |       ]
 15 |   }
 16 | 
 17 | ]
 18 | 
 19 | ```
 20 | 
 21 | You could also add any other field that you need it when you want to customize the items rendering
 22 | 
 23 | ## Demo
 24 | 
 25 | [LIVE DEMO](https://boussadjra.github.io/vue3-router-tree/) or you could check this [boilerplate](https://codesandbox.io/s/vue-3-router-tree-demo-wzxr1?file=/src/App.vue) on codesandbox
 26 | 
 27 | ## Installation
 28 | 
 29 |      npm install vue3-router-tree --save
 30 | 
 31 | ## Usage
 32 | 
 33 | #### With router :
 34 | 
 35 | ```html
 36 | <vue3-router-tree />
 37 | ```
 38 | 
 39 | #### with custom items :
 40 | 
 41 | ```html
 42 | <template>
 43 | 	<div class="demo">
 44 | 		<vue3-router-tree :items="routes"> </vue3-router-tree>
 45 | 	</div>
 46 | </template>
 47 | 
 48 | <script lang="ts">
 49 | 	import { defineComponent } from 'vue';
 50 | 
 51 | 	import Vue3RouterTree from 'vue3-router-tree';
 52 | 	export default defineComponent({
 53 | 		data() {
 54 | 			return {
 55 | 				routes: [
 56 | 					{
 57 | 						path: '/',
 58 | 						name: 'Home',
 59 | 						hasIcon: true,
 60 | 					},
 61 | 					{
 62 | 						path: '/dashboard',
 63 | 						name: 'Dashboard',
 64 | 						hasIcon: true,
 65 | 					},
 66 | 					{
 67 | 						path: '/component',
 68 | 						name: 'Components',
 69 | 						hasIcon: true,
 70 | 						children: [
 71 | 							{
 72 | 								path: '/alerts',
 73 | 								name: 'Alerts',
 74 | 							},
 75 | 							{
 76 | 								path: '/avatars',
 77 | 								name: 'Avatars',
 78 | 							},
 79 | 							{
 80 | 								path: '/buttons',
 81 | 								name: 'Buttons',
 82 | 							},
 83 | 							{
 84 | 								path: '/forms',
 85 | 								name: 'Forms',
 86 | 								children: [
 87 | 									{
 88 | 										path: '/autocompletes',
 89 | 										name: 'Autocompletes',
 90 | 									},
 91 | 									{
 92 | 										path: '/checkboxes',
 93 | 										name: 'Checkboxes',
 94 | 									},
 95 | 								],
 96 | 							},
 97 | 						],
 98 | 					},
 99 | 				],
100 | 			};
101 | 		},
102 | 	});
103 | </script>
104 | ```
105 | 
106 | ### props :
107 | 
108 | | Name          | default   | description                                                                                     |
109 | | ------------- | --------- | ----------------------------------------------------------------------------------------------- |
110 | | items         | []        | the tree items or if not provided the component renders the current available routes            |
111 | | active-color  | "#5d1df1" | the color of the active sub node                                                                |
112 | | default-open  | ''        | specify the default opened path                                                                 |
113 | | exclude-field | ''        | In your route config you could specify a field inside meta option which will be used to exclude |
114 | | open-all      | ''        | Expand all items that have children                                                             |
115 | 
116 | ## slots :
117 | 
118 | | Name | description                         |
119 | | ---- | ----------------------------------- |
120 | | item | override the default item rendering |
121 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
3 |   transform: {
4 |     '^.+\\.vue$': 'vue-jest'
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue3-router-tree",
 3 |     "version": "0.1.6",
 4 |     "author": "BOUSSADJRA BRAHIM",
 5 |     "private": false,
 6 |     "main": "./build/vue3-router-tree.common.js",
 7 |     "scripts": {
 8 |         "serve": "vue-cli-service serve",
 9 |         "build": "vue-cli-service build",
10 |         "bundle": "vue-cli-service build --dest build --target lib --name vue3-router-tree ./src/components/Vue3RouterTree/index.tsx",
11 |         "test:unit": "vue-cli-service test:unit"
12 |     },
13 |     "dependencies": {
14 |         "core-js": "^3.6.5",
15 |         "prismjs": "^1.23.0",
16 |         "vue": "^3.0.0-0",
17 |         "vue-router": "^4.0.2"
18 |     },
19 |     "devDependencies": {
20 |         "@types/jest": "^24.0.19",
21 |         "@types/prismjs": "^1.16.2",
22 |         "@vue/cli-plugin-babel": "~4.5.0",
23 |         "@vue/cli-plugin-router": "~4.5.0",
24 |         "@vue/cli-plugin-typescript": "~4.5.0",
25 |         "@vue/cli-plugin-unit-jest": "~4.5.0",
26 |         "@vue/cli-plugin-vuex": "~4.5.0",
27 |         "@vue/cli-service": "~4.5.0",
28 |         "@vue/compiler-sfc": "^3.0.0-0",
29 |         "@vue/test-utils": "^2.0.0-0",
30 |         "autoprefixer": "^9.8.6",
31 |         "node-sass": "^4.12.0",
32 |         "postcss": "^7.0.35",
33 |         "sass-loader": "^8.0.2",
34 |         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
35 |         "typescript": "~3.9.3",
36 |         "vue-jest": "^5.0.0-0"
37 |     },
38 |     "repository": {
39 |         "type": "git",
40 |         "url": "git+https://github.com/boussadjra/vue3-router-tree.git"
41 |     },
42 |     "license": "MIT",
43 |     "homepage": "https://boussadjra.github.io/vue3-router-tree/",
44 |     "files": [
45 |         "build/*",
46 |         "src/*",
47 |         "*.json"
48 |     ],
49 |     "keywords": [
50 |         "vue.js 3",
51 |         "vuejs 3",
52 |         "tree view",
53 |         "vue tree view",
54 |         "vue component",
55 |         "web component"
56 |     ]
57 | }
58 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     }
6 |   }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boussadjra/vue3-router-tree/53c4b24587b7e8e6e75ce7d2ff65f4f93de28d3b/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title>
10 |         Vue 3 router tree
11 |     </title>
12 | </head>
13 | 
14 | <body>
15 |     <noscript>
16 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17 |     </noscript>
18 |     <div id="app"></div>
19 | 
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <default-layout>
 3 |     <router-view />
 4 | </default-layout>
 5 | </template>
 6 | 
 7 | <script>
 8 | import DefaultLayout from "./layouts/DefaultLayout/DefaultLayout.vue";
 9 | 
10 | export default {
11 |     name: "app",
12 | 
13 |     components: {
14 |         DefaultLayout,
15 |     },
16 | };
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/DemoWithRouter.ts:
--------------------------------------------------------------------------------
 1 | import { defineComponent, h } from 'vue';
 2 | import Vue3RouterTree from './components/Vue3RouterTree';
 3 | 
 4 | import {RouterView} from 'vue-router'
 5 | export default defineComponent({
 6 | 
 7 |     name:"DemoWithRouter",
 8 | 
 9 |     render(){
10 |         return h("div",{}, [h(Vue3RouterTree),h(RouterView)])
11 |     }
12 | })


--------------------------------------------------------------------------------
/src/assets/fonts/Inter.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boussadjra/vue3-router-tree/53c4b24587b7e8e6e75ce7d2ff65f4f93de28d3b/src/assets/fonts/Inter.ttf


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/boussadjra/vue3-router-tree/53c4b24587b7e8e6e75ce7d2ff65f4f93de28d3b/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Vue3RouterTree/CaretRight.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg focusable="false" width="16px" height="16px" viewBox="0 0 32 32">
 3 |     <path d="M12 8l10 8l-10 8z" fill="currentColor" />
 4 | </svg>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import {
 9 |     defineComponent
10 | } from "vue";
11 | 
12 | export default defineComponent({
13 |     name: 'CaretRight'
14 | })
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/components/Vue3RouterTree/index.tsx:
--------------------------------------------------------------------------------
  1 | import { computed, defineComponent, h, onMounted, ref, Transition, VNode, watch, watchEffect } from 'vue';
  2 | import './style.scss'
  3 | 
  4 | import CaretRight from './CaretRight.vue'
  5 | import { RouteRecordRaw, RouterLink, useRouter } from 'vue-router';
  6 | 
  7 | interface TreeNode {
  8 | 	name: string;
  9 | 	path: string;
 10 | 	component: VNode;
 11 | 	children: Array<TreeNode>;
 12 | 	id: number;
 13 | 	info?: string | number | boolean
 14 | }
 15 | 
 16 | 
 17 | export default defineComponent({
 18 | 	props: {
 19 | 
 20 | 		items: {
 21 | 			type: Array as () => Array<TreeNode>
 22 | 		},
 23 | 		activeColor: {
 24 | 			type: String,
 25 | 			default: "#5d1df1"
 26 | 		},
 27 | 		defaultOpen: {
 28 | 			type: String,
 29 | 			default: ''
 30 | 		},
 31 | 		excludeField: {
 32 | 			type: String,
 33 | 			default: ''
 34 | 		},
 35 | 		openAll: {
 36 | 			type: Boolean,
 37 | 			default: false
 38 | 		},
 39 | 		noMaxWidth: {
 40 | 			type: Boolean,
 41 | 			default: false
 42 | 		}
 43 | 	},
 44 | 	components: {
 45 | 		CaretRight
 46 | 	},
 47 | 	setup(props, { slots }) {
 48 | 
 49 | 		const expandedItem = ref<TreeNode | null>(null);
 50 | 		const selectedItem = ref<TreeNode | null>(null);
 51 | 		const id = ref(0);
 52 | 		const navigationPath = ref<Array<number>>([])
 53 | 
 54 | 		const router = useRouter()
 55 | 
 56 | 
 57 | 		const items = computed(() => {
 58 | 
 59 | 			let routes = router.options?.routes || router.getRoutes();
 60 | 
 61 | 			let _items = props.items ? props.items : routes.filter(route => !route.meta || route.meta && !route.meta[props.excludeField]);
 62 | 
 63 | 			return addId(_items)
 64 | 		})
 65 | 
 66 | 		watchEffect(() => {
 67 | 			findOpenItems(items.value)
 68 | 
 69 | 
 70 | 		})
 71 | 
 72 | 
 73 | 		/***
 74 | 		 * functions
 75 | 		 */
 76 | 		function findOpenItems(_items: TreeNode[]) {
 77 | 			_items.forEach((_item: TreeNode) => {
 78 | 				if (_item.children) {
 79 | 					findOpenItems(_item.children);
 80 | 				}
 81 | 
 82 | 				if (props.defaultOpen.includes(_item.name)) {
 83 | 
 84 | 					navigationPath.value.push(_item.id)
 85 | 				}
 86 | 			})
 87 | 
 88 | 
 89 | 		}
 90 | 
 91 | 		function renderTree(_items: Array<TreeNode | RouteRecordRaw>) {
 92 | 			return (_items as any[]).map((item: TreeNode, index) => {
 93 | 				return <div class="  px-4  cursor-pointer">
 94 | 
 95 | 					<div onClick={(event: Event) => {
 96 | 						event.stopPropagation();
 97 | 						if (item.children) {
 98 | 							expandItem(item)
 99 | 						} else {
100 | 							if (expandedItem.value?.children.find((_item) => _item.id === item.id)) {
101 | 
102 | 							} else {
103 | 								navigationPath.value = []
104 | 							}
105 | 
106 | 							selectedItem.value = item;
107 | 						}
108 | 
109 | 					}}
110 | 						style={{ color: selectedItem.value?.id === item.id ? props.activeColor : '' }}
111 | 						class={`flex items-center justify-between p-2 hover:text-xl `}
112 | 
113 | 					>
114 | 					{renderSlot(item)}
115 | 						<span class="pl-4">{item.children && <CaretRight />}</span>
116 | 					</div>
117 | 
118 | 					<div  >
119 | 
120 | 						{((item.children) && (navigationPath.value.includes(item.id) || props.openAll)) && renderTree(item.children)}
121 | 
122 | 
123 | 					</div>
124 | 
125 | 
126 | 
127 | 				</div>
128 | 			})
129 | 		}
130 | 
131 | 		function renderSlot(item: TreeNode) {
132 | 			return slots.item ? slots.item({
133 | 				item: item
134 | 			}) : item.name
135 | 		}
136 | 
137 | 		function addId(items: Array<TreeNode | RouteRecordRaw>): any {
138 | 			return items.map(item => {
139 | 				return item.children ? { ...item, id: id.value++ ,children: addId(item.children) } : { ...item, id: id.value++, };
140 | 			})
141 | 		}
142 | 
143 | 		function expandItem(item: TreeNode) {
144 | 
145 | 			if (navigationPath.value.includes(item.id)) {
146 | 				let index = navigationPath.value.findIndex(p => p === item.id)
147 | 				navigationPath.value.splice(index);
148 | 
149 | 				navigationPath.value = navigationPath.value.filter(el => el !== item.id)
150 | 			} else {
151 | 				let found =items.value.find((_item: TreeNode) => _item.id === item.id)
152 | 
153 | 				
154 | 				if (found && navigationPath.value.length > 0) {
155 | 					navigationPath.value = [];
156 | 					navigationPath.value.push(item.id)
157 | 				} else {
158 | 					navigationPath.value.push(item.id)
159 | 				}
160 | 				
161 | 				expandedItem.value = item;
162 | 			}
163 | 
164 | 
165 | 		}
166 | 		/**
167 | 		 * 
168 | 		 * jsx template
169 | 		 */
170 | 		return () => (
171 | 			<div class="   py-2" style={{ minWidth: 240,maxWidth:props.noMaxWidth?'none':'max-content' }}>
172 | 				{
173 | 					renderTree(items.value)
174 | 				}
175 | 
176 | 			</div>
177 | 		)
178 | 	}
179 | 
180 | });
181 | 


--------------------------------------------------------------------------------
/src/components/Vue3RouterTree/style.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | 
 7 | 
 8 | /*.vrt-tree {
 9 |     // color: #444645;
10 |     list-style: none;
11 |     padding: 12px;
12 |     max-width: 280px;
13 |     // width: 20px;
14 |     a{
15 |         text-decoration: none;
16 |     }
17 |     &__item {
18 |         padding: 10px;
19 |         position: relative;
20 |         cursor: pointer;
21 |         display: grid;
22 |         grid-template-columns: 32px auto minmax(32px, 64px);
23 |         ;
24 |         white-space: nowrap;
25 |         &:hover {
26 |             background-color: #e1e1e1;
27 |             border-radius: 4px;
28 |         }
29 |         &_caret {
30 |             position: absolute;
31 |             right: 0px;
32 |             padding: 4px 0;
33 |             opacity: .6;
34 |             cursor: pointer;
35 |             transform: rotate(90deg);
36 |             transition: transform .3s ease-in;
37 |             &--open {
38 |                 transform: rotate(-90deg);
39 |                 transition: transform .3s ease-in;
40 |             }
41 |         }
42 |         &--has-more {
43 |             padding: 4px 0;
44 |             height: 100%;
45 |             &:hover {
46 |                 background-color: unset;
47 |                 // border-radius: 4px;
48 |             }
49 |         }
50 |     }
51 |     &--has-children {
52 |         padding: 8px 8px;
53 |         position: relative;
54 |     }
55 |     &__wrapper {
56 |         box-shadow: 0 0 10px #ddd;
57 |     }
58 | }
59 | */
60 | .slide-enter-active,
61 | .slide-leave-active {
62 |     -moz-transition-duration: 0.3s;
63 |     -webkit-transition-duration: 0.3s;
64 |     -o-transition-duration: 0.3s;
65 |     transition-duration: 0.3s;
66 |     -moz-transition-timing-function: ease-in;
67 |     -webkit-transition-timing-function: ease-in;
68 |     -o-transition-timing-function: ease-in;
69 |     transition-timing-function: ease-in;
70 | }
71 | 
72 | .slide-enter-to,
73 | .slide-leave-from {
74 |     max-height: 100px;
75 |     overflow: hidden;
76 | }
77 | 
78 | .slide-enter-from,
79 | .slide-leave-to {
80 |     overflow: hidden;
81 |     max-height: 0;
82 | }


--------------------------------------------------------------------------------
/src/components/icons/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg v-if="name==='folder'" aria-hidden="true" focusable="false" role="img" class="fill-current fill-current--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
 3 |     <path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor" />
 4 | </svg>
 5 | 
 6 | <svg v-if="name==='file'" aria-hidden="true" focusable="false" role="img" class="fill-current fill-current--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
 7 |     <path d="M25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z" fill="currentColor" />
 8 |     <path d="M10 22h12v2H10z" fill="currentColor" />
 9 |     <path d="M10 16h12v2H10z" fill="currentColor" />
10 | </svg>
11 | 
12 | <svg v-if="name==='components'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
13 |     <path d="M8 4v4H4V4h4M2 2v8h8V2z" fill="currentColor" />
14 |     <path d="M18 7v4h-4V7h4m-6-2v8h8V5z" fill="currentColor" />
15 |     <path d="M8 16v4H4v-4h4m-6-2v8h8v-8z" fill="currentColor" />
16 |     <path d="M22 10v6h-6v6h-6v8h20V10zm-4 8h4v4h-4zm-2 10h-4v-4h4zm6 0h-4v-4h4zm6 0h-4v-4h4zm0-6h-4v-4h4zm-4-6v-4h4v4z" fill="currentColor" />
17 | </svg>
18 | 
19 | <svg v-if="name==='dashboard'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
20 |     <path d="M24 21h2v5h-2z" fill="currentColor" />
21 |     <path d="M20 16h2v10h-2z" fill="currentColor" />
22 |     <path d="M11 26a5.006 5.006 0 0 1-5-5h2a3 3 0 1 0 3-3v-2a5 5 0 0 1 0 10z" fill="currentColor" />
23 |     <path d="M28 2H4a2.002 2.002 0 0 0-2 2v24a2.002 2.002 0 0 0 2 2h24a2.003 2.003 0 0 0 2-2V4a2.002 2.002 0 0 0-2-2zm0 9H14V4h14zM12 4v7H4V4zM4 28V13h24l.002 15z" fill="currentColor" />
24 | </svg>
25 | 
26 | <svg v-if="name==='home'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
27 |     <path d="M16.61 2.21a1 1 0 0 0-1.24 0L1 13.42L2.24 15L4 13.62V26a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V13.63L29.76 15L31 13.43zM18 26h-4v-8h4zm2 0v-8a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v8H6V12.06l10-7.79l10 7.8V26z" fill="currentColor" />
28 | </svg>
29 | 
30 | <svg v-if="name==='mail'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
31 |     <path d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-2.2 2L16 14.78L6.2 8zM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24z" fill="currentColor" />
32 | </svg>
33 | 
34 | <svg v-if="name==='forms'" aria-hidden="true" focusable="false" role="img" class="fill-current fill-current--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
35 |     <path d="M2 26h28v2H2z" fill="currentColor"></path>
36 |     <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
37 | </svg>
38 | 
39 | <svg v-if="name==='pickers'" aria-hidden="true" focusable="false" role="img" class="fill-current fill-current--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
40 |     <path d="M2 27h3v3H2z" fill="currentColor"></path>
41 |     <path d="M29.71 7.29l-5-5a1 1 0 0 0-1.41 0L20 5.59l-1.29-1.3l-1.42 1.42L18.59 7L8.29 17.29A1 1 0 0 0 8 18v1.59l-2.71 2.7a1 1 0 0 0 0 1.41l3 3a1 1 0 0 0 1.41 0l2.71-2.7H14a1 1 0 0 0 .71-.29L25 13.41l1.29 1.3l1.42-1.42l-1.3-1.29l3.3-3.29a1 1 0 0 0 0-1.41zM13.59 22h-2L9 24.59L7.41 23L10 20.41v-2l10-10L23.59 12zM25 10.59L21.41 7L24 4.41L27.59 8z" fill="currentColor"></path>
42 | </svg>
43 | </template>
44 | 
45 | <script>
46 | export default {
47 |     props: {
48 |         name: String,
49 |     },
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/devComponents/Prism.ts:
--------------------------------------------------------------------------------
 1 | import * as Vue from 'vue';
 2 | import Prism from 'prismjs';
 3 | import { Slots, VNode } from 'vue';
 4 | 
 5 | declare type Data = Record<string, unknown>;
 6 | 
 7 | export default Vue.defineComponent({
 8 |   props: {
 9 |     code: {
10 |       type: String,
11 |       default:''
12 |     },
13 |     inline: {
14 |       type: Boolean,
15 |       default: false,
16 |     },
17 |     language: {
18 |       type: String,
19 |       default: 'markup',
20 |     },
21 |   },
22 |   setup(props, { slots, attrs }: { slots: Slots; attrs: Data }) {
23 |     const { h } = Vue;
24 |     // const slotsData = (slots && slots.default && slots.default()) || [];
25 |     const code = props.code ;
26 |     const { inline, language } = props;
27 |     const prismLanguage = Prism.languages[language];
28 |     const className = `language-${language}`;
29 | 
30 |     if (inline) {
31 |       return (): VNode =>
32 |         h('code', { ...attrs, class: [attrs.class, className], innerHTML: Prism.highlight(code, prismLanguage,props.language) });
33 |     }
34 | 
35 |     const d = Prism.highlight(code, prismLanguage,props.language);
36 |     return (): VNode =>
37 |       h('pre', { ...attrs, class: [attrs.class, className] }, [
38 |         h('code', {
39 |           class: className,
40 |           innerHTML: d,
41 |         }),
42 |       ]);
43 |   },
44 | });


--------------------------------------------------------------------------------
/src/devComponents/icons/Icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg v-if="name==='folder'" aria-hidden="true" focusable="false" role="img" class="iconify iconify--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
 3 |     <path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor" />
 4 | </svg>
 5 | 
 6 | <svg v-if="name==='file'" aria-hidden="true" focusable="false" role="img" class="iconify iconify--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
 7 |     <path d="M25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z" fill="currentColor" />
 8 |     <path d="M10 22h12v2H10z" fill="currentColor" />
 9 |     <path d="M10 16h12v2H10z" fill="currentColor" />
10 | </svg>
11 | 
12 | <svg v-if="name==='components'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
13 |     <path d="M8 4v4H4V4h4M2 2v8h8V2z" fill="currentColor" />
14 |     <path d="M18 7v4h-4V7h4m-6-2v8h8V5z" fill="currentColor" />
15 |     <path d="M8 16v4H4v-4h4m-6-2v8h8v-8z" fill="currentColor" />
16 |     <path d="M22 10v6h-6v6h-6v8h20V10zm-4 8h4v4h-4zm-2 10h-4v-4h4zm6 0h-4v-4h4zm6 0h-4v-4h4zm0-6h-4v-4h4zm-4-6v-4h4v4z" fill="currentColor" />
17 | </svg>
18 | 
19 | <svg v-if="name==='dashboard'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
20 |     <path d="M24 21h2v5h-2z" fill="currentColor" />
21 |     <path d="M20 16h2v10h-2z" fill="currentColor" />
22 |     <path d="M11 26a5.006 5.006 0 0 1-5-5h2a3 3 0 1 0 3-3v-2a5 5 0 0 1 0 10z" fill="currentColor" />
23 |     <path d="M28 2H4a2.002 2.002 0 0 0-2 2v24a2.002 2.002 0 0 0 2 2h24a2.003 2.003 0 0 0 2-2V4a2.002 2.002 0 0 0-2-2zm0 9H14V4h14zM12 4v7H4V4zM4 28V13h24l.002 15z" fill="currentColor" />
24 | </svg>
25 | 
26 | <svg v-if="name==='home'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
27 |     <path d="M16.61 2.21a1 1 0 0 0-1.24 0L1 13.42L2.24 15L4 13.62V26a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V13.63L29.76 15L31 13.43zM18 26h-4v-8h4zm2 0v-8a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v8H6V12.06l10-7.79l10 7.8V26z" fill="currentColor" />
28 | </svg>
29 | 
30 | <svg v-if="name==='mail'" focusable="false" width="20px" height="20px" viewBox="0 0 32 32">
31 |     <path d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-2.2 2L16 14.78L6.2 8zM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24z" fill="currentColor" />
32 | </svg>
33 | 
34 | <svg v-if="name==='forms'" aria-hidden="true" focusable="false" role="img" class="iconify iconify--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
35 |     <path d="M2 26h28v2H2z" fill="currentColor"></path>
36 |     <path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path>
37 | </svg>
38 | 
39 | <svg v-if="name==='pickers'" aria-hidden="true" focusable="false" role="img" class="iconify iconify--carbon" width="20px" height="20px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);">
40 |     <path d="M2 27h3v3H2z" fill="currentColor"></path>
41 |     <path d="M29.71 7.29l-5-5a1 1 0 0 0-1.41 0L20 5.59l-1.29-1.3l-1.42 1.42L18.59 7L8.29 17.29A1 1 0 0 0 8 18v1.59l-2.71 2.7a1 1 0 0 0 0 1.41l3 3a1 1 0 0 0 1.41 0l2.71-2.7H14a1 1 0 0 0 .71-.29L25 13.41l1.29 1.3l1.42-1.42l-1.3-1.29l3.3-3.29a1 1 0 0 0 0-1.41zM13.59 22h-2L9 24.59L7.41 23L10 20.41v-2l10-10L23.59 12zM25 10.59L21.41 7L24 4.41L27.59 8z" fill="currentColor"></path>
42 | </svg>
43 | </template>
44 | 
45 | <script>
46 | export default {
47 |     props: {
48 |         name: String,
49 |     },
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/devComponents/icons/IconLogoGithub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg :height="height" :width="width" viewBox="0 0 32 32" class="fill-current">
 3 |  <path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"/></svg>
 4 | </template>
 5 | <script> 
 6 | export default
 7 | { name:"IconLogoGithub", 
 8 |  props:{ height: { type:  Number, default: 20, }, width: { type:  Number, default: 20, }, } 
 9 | }
10 | </script>


--------------------------------------------------------------------------------
/src/devComponents/navigation/TabView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div :class="`flex ${borderTop ? 'flex-col-reverse' : 'flex-col'}`">
 3 |     <div class="header flex w-full border-gray-400" :class="`${borderTop ? 'border-t' : 'border-b'}`">
 4 |         <div class="relative cursor-pointer py-2 px-6 rounded-tr rounded-tl text-gray-700 hover:text-p-indigo-500" :class="{
 5 |           ' text-p-indigo-500': currentTab === index + 1,
 6 |         }" v-for="(item, index) in items" :key="index" @click="changeTab(index,item)">
 7 |             <div>
 8 |                 <slot name="item" :item="item"></slot>
 9 | 
10 |                 <div v-if="!$slots.item">
11 |                     {{ item.header }}
12 |                 </div>
13 |             </div>
14 | 
15 |             <transition :name="`slide-fade-${currentTab > prevTab ? 'right' : 'left'}`">
16 |                 <div v-if="currentTab === index + 1" :class="`${borderTop ? 'top-0' : 'bottom-0'}`" class="w-full absolute left-0 border-b-2 border-p-indigo-500 text-p-indigo-500"></div>
17 |             </transition>
18 |         </div>
19 |     </div>
20 |     <transition name=" fade">
21 |         <div class="p-4" v-if="items[currentTab - 1].body">
22 |             {{ items[currentTab - 1].body }}
23 |         </div>
24 |     </transition>
25 | </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |     props: {
31 |         items: {
32 |             type: Array,
33 |         },
34 |         borderTop: {
35 |             type: Boolean,
36 |             default: false,
37 |         },
38 |     },
39 |     data() {
40 |         return {
41 |             currentTab: 1,
42 |             prevTab: -1,
43 |         };
44 |     },
45 |     watch: {
46 |         currentTab(newVal, oldVal) {
47 | 
48 |             this.prevTab = oldVal;
49 |         },
50 |     },
51 |     methods: {
52 |         changeTab(index, item) {
53 |             this.$emit('change-tab', item)
54 |             this.currentTab = index + 1
55 |         }
56 |     },
57 | 
58 | };
59 | </script>
60 | 
61 | <style>
62 | .slide-fade-left-enter-active {
63 |     transition: all 0.3s ease-out;
64 | }
65 | 
66 | .slide-fade-left-leave-active {
67 |     transition: all 0.3s ease;
68 | }
69 | 
70 | .slide-fade-left-enter-from {
71 |     transform: translateX(100px);
72 |     opacity: 0;
73 | }
74 | 
75 | .slide-fade-right-enter-active {
76 |     transition: all 0.3s ease-out;
77 | }
78 | 
79 | .slide-fade-right-leave-active {
80 |     transition: all 0.3s ease;
81 | }
82 | 
83 | .slide-fade-right-enter-from {
84 |     transform: translateX(-100px);
85 |     opacity: 0;
86 | }
87 | 
88 | .fade-enter-active,
89 | .fade-leave-active {
90 |     transition: opacity 0.5s ease;
91 | }
92 | 
93 | .fade-enter-from,
94 | .fade-leave-to {
95 |     opacity: 0;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/layouts/DefaultLayout/DefaultLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <nav class="h-48 shadow-md lg:h-16 w-full sticky overflow-hidden top-0 z-20 p-4 bg-p-indigo-500 text-gray-100 flex flex-col lg:flex-row items-center justify-between">
 4 |         <h1 class="logo text-3xl font-bold text-melon-300 uppercase">Vue 3 Router Tree</h1>
 5 | 
 6 |         <ul class="flex flex-row justify-between w-10/12 sm:w-6/12 lg:w-4/12 text-sm uppercase font-semibold cursor-pointer">
 7 |             <li class="min-w-max">
 8 |                 <router-link to="/" exact active-class="text-melon-300">Home</router-link>
 9 |             </li>
10 |             <li class="min-w-max">
11 |                 <router-link to="/guide" active-class="text-melon-300">Guide</router-link>
12 |             </li>
13 | 
14 |             <li class="min-w-max">
15 |                 <router-link to="/about" active-class="text-melon-300">About me</router-link>
16 |             </li>
17 |         </ul>
18 | 
19 |         <div class="uppercase text-gray-200 cursor-pointer">
20 |             <a href="https://github.com/boussadjra/vue3-router-tree" target="_blank" rel="noopener noreferrer">
21 |                 <button>
22 |                     Github
23 |                 </button>
24 | 
25 |             </a>
26 |         </div>
27 |     </nav>
28 | 
29 |     <main class="overflow-y-auto  pb-20">
30 |         <slot></slot>
31 |     </main>
32 | </div>
33 | </template>
34 | 
35 | <script>
36 | import IconLogoGithub from "@/devComponents/icons/IconLogoGithub.vue";
37 | 
38 | export default {
39 |     components: {
40 | 
41 |         IconLogoGithub,
42 |     },
43 | };
44 | </script>
45 | 
46 | <style>
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import router from "./router/index";
 3 | import App from "./App.vue";
 4 | import "./styles/index.scss"
 5 | import 'prismjs'
 6 | import './styles/prism-nocture-birds.css'
 7 | import Prism from '@/devComponents/Prism'
 8 | import TabView from "@/devComponents/navigation/TabView.vue";
 9 | let app = createApp(App);
10 | 
11 | app.component('Prism',Prism)
12 | app.component('TabView',TabView)
13 | app.use(router).mount("#app");
14 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import About from "@/views/About.vue";
 2 | import Home from "@/views/Home.vue";
 3 | import Guide from "@/views/guide/Index.vue";
 4 | import BasicExample from "@/views/guide/BasicExample.vue";
 5 | import WithIcons from "@/views/guide/WithIcons.vue";
 6 | import WithMetaInfo from "@/views/guide/WithMetaInfo.vue";
 7 | import DefaultOpenExample from "@/views/guide/DefaultOpenExample.vue";
 8 | import OpenAll from "@/views/guide/OpenAll.vue";
 9 | 
10 | import { createWebHistory, createRouter } from "vue-router";
11 | 
12 | 
13 | export const routes = [
14 |   {
15 |     path: "/", name: "Home", component: Home,
16 |     meta: {
17 |       exludedOnSidebar: true
18 |     }
19 |   },
20 |   {
21 |     path: "/about", name: "About", component: About, meta: {
22 |       exludedOnSidebar: true
23 |     }
24 |   },
25 |   {
26 |     path: "/guide", name: "Guide", component: Guide, children: [
27 | 
28 |       {
29 |         path: 'basic-example',
30 |         name: 'Basic Example',
31 |         component: BasicExample
32 |       },
33 |       {
34 |         path: 'with-icons',
35 |         name: 'Render items with icons',
36 |         component: WithIcons
37 |       },
38 |       {
39 |         path: 'with-meta-info',
40 |         name: 'Render items with meta info',
41 |         component: WithMetaInfo
42 |       },
43 |       
44 |       {
45 |         path: 'default-open-item',
46 |         name: 'Default Open one item',
47 |         component: DefaultOpenExample
48 |       },
49 |       {
50 |         path: 'expand-all',
51 |         name: 'Expand all items',
52 |         component: OpenAll
53 |       }
54 |     ]
55 |   },
56 | 
57 | 
58 | ];
59 | const router = createRouter({
60 |   history: createWebHistory(),
61 |   routes
62 | });
63 | 
64 | export default router;


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { defineComponent } from 'vue'
3 |   const component: ReturnType<typeof defineComponent>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | @font-face {
 5 |     font-family: 'Inter';
 6 |     src: url('../assets//fonts/Inter.ttf') format("truetype-variations");
 7 |     font-weight: 1 999;
 8 | }
 9 | 
10 | body{
11 |     @apply bg-purple-50 text-gray-500;
12 |     overflow-y: hidden;
13 | font-family: 'Inter',Arial, Helvetica, sans-serif;
14 | }
15 | 
16 | #app{
17 |     overflow-x: hidden;
18 |     @apply text-gray-500;
19 | }
20 | ::-webkit-scrollbar {
21 |     width: 2px;
22 |     border-radius: 5px
23 | }
24 | 
25 | ::-webkit-scrollbar-track {
26 |     background: inherit;
27 |     border-radius: 5px;
28 | }
29 | 
30 | ::-webkit-scrollbar-thumb {
31 |    @apply bg-p-indigo-500;
32 |     border-radius: 5px;
33 | }
34 | .section__title{
35 |     @apply text-xl ml-2 pt-16  text-gray-700
36 | }
37 | 
38 | .grid--auto-cols{
39 |     display: grid;
40 |     grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
41 |     place-items: center;
42 |     &-xs{
43 |         grid-template-columns: repeat(auto-fill,minmax(240px,1fr));    
44 |     }
45 |     
46 | }
47 | 
48 | .home{
49 |     overflow-y: auto;
50 |     max-height: calc(100vh - 64px);
51 | 
52 | }
53 | 
54 | .drop-enter-active,
55 | .drop-leave-active {
56 |     transition: all 0.5s ease-out;
57 |     max-height: 400px;
58 |     //   max-width: 280px;
59 | }
60 | 
61 | .drop-enter,
62 | .drop-leave-to
63 | /* .drop-leave-active below version 2.1.8 */
64 | 
65 | {
66 |     max-height: 0;
67 |     opacity: 0;
68 |     //   max-width: 0;
69 |     transform: translateY(-200px);
70 |     transform: scaleY(0);
71 | }
72 | 


--------------------------------------------------------------------------------
/src/styles/prism-nocture-birds.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * prism.js default theme for JavaScript, CSS and HTML
  3 |  * Based on dabblet (http://dabblet.com)
  4 |  * @author Lea Verou
  5 |  */
  6 | 
  7 |  code[class*="language-"],
  8 |  pre[class*="language-"] {
  9 |      color: #ddeBbB;
 10 |      background: none;
 11 |      /* text-shadow: 0 1px white; */
 12 |      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 13 |      font-size:13pt;
 14 |      text-align: left;
 15 |      white-space: pre;
 16 |      word-spacing: normal;
 17 |      word-break: normal;
 18 |      word-wrap: normal;
 19 |      line-height: 1.5;
 20 |  
 21 |      -moz-tab-size: 4;
 22 |      -o-tab-size: 4;
 23 |      tab-size: 4;
 24 |  
 25 |      -webkit-hyphens: none;
 26 |      -moz-hyphens: none;
 27 |      -ms-hyphens: none;
 28 |      hyphens: none;
 29 |  }
 30 |  
 31 |  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 32 |  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 33 |      text-shadow: none;
 34 |      background: #1c1c31;
 35 |  }
 36 |  
 37 |  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 38 |  code[class*="language-"]::selection, code[class*="language-"] ::selection {
 39 |      text-shadow: none;
 40 |      background: #1c1c31;
 41 |  }
 42 |  
 43 |  @media print {
 44 |      code[class*="language-"],
 45 |      pre[class*="language-"] {
 46 |          text-shadow: none;
 47 |      }
 48 |  }
 49 |  
 50 |  /* Code blocks */
 51 |  pre[class*="language-"] {
 52 |      padding: 1em;
 53 |      margin: .5em 0;
 54 |      overflow: auto;
 55 |  }
 56 |  
 57 |  :not(pre) > code[class*="language-"],
 58 |  pre[class*="language-"] {
 59 |      background: #1c1c35;
 60 |      border-radius:4px;
 61 |      padding:16px;
 62 |  }
 63 |  
 64 |  /* Inline code */
 65 |  :not(pre) > code[class*="language-"] {
 66 |      padding: .1em;
 67 |      border-radius: .3em;
 68 |      white-space: normal;
 69 |  }
 70 |  
 71 |  .token.comment,
 72 |  .token.prolog,
 73 |  .token.doctype,
 74 |  .token.cdata {
 75 |      color: slategray;
 76 |  }
 77 |  
 78 |  .token.punctuation {
 79 |      color: #65737E;
 80 |  }
 81 |  
 82 |  .token.namespace {
 83 |      opacity: .7;
 84 |  }
 85 |  
 86 |  .token.property,
 87 |  .token.tag,
 88 |  .token.boolean,
 89 |  .token.number,
 90 |  .token.constant,
 91 |  .token.symbol,
 92 |  .token.deleted {
 93 |      color: #2eeb9c;
 94 |  }
 95 |  
 96 |  .token.selector,
 97 |  .token.attr-name,
 98 |  .token.string,
 99 |  .token.char,
100 |  .token.builtin,
101 |  .token.inserted {
102 |      color:#f0a7f0;
103 |  }
104 |  
105 |  .token.operator,
106 |  .token.entity,
107 |  .token.url,
108 |  .language-css .token.string,
109 |  .style .token.string {
110 |      color: #ff0;
111 |      /* This background color was intended by the author of this theme. */
112 |      /* background: #4545ff; */
113 |  }
114 |  
115 |  .token.atrule,
116 |  .token.attr-value,
117 |  .token.keyword {
118 |      color: #ebd82e;
119 |  }
120 |  
121 |  .token.function,
122 |  .token.class-name {
123 |      color: #ff3076;
124 |  }
125 |  
126 |  .token.regex,
127 |  .token.important,
128 |  .token.variable {
129 |      color: #e90;
130 |  }
131 |  
132 |  .token.important,
133 |  .token.bold {
134 |      font-weight: bold;
135 |  }
136 |  .token.italic {
137 |      font-style: italic;
138 |  }
139 |  
140 |  .token.entity {
141 |      cursor: help;
142 |  }
143 |  


--------------------------------------------------------------------------------
/src/utils/snippets.ts:
--------------------------------------------------------------------------------
  1 | export default {
  2 | 	BasicExample: `<template>
  3 |   <div>
  4 |        <vue3-router-tree :items="routes"> </vue3-router-tree>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import Vue3RouterTree from "vue3-router-tree";
 10 | 
 11 | export default {
 12 |   name: "BasicExample",
 13 |   data: () => ({
 14 |     routes: [
 15 |       {
 16 |         path: "/",
 17 |         name: "Home",
 18 |         hasIcon: true,
 19 |       },
 20 |       {
 21 |         path: "/dashboard",
 22 |         name: "Dashboard",
 23 |         hasIcon: true,
 24 | 
 25 |         info: "updated",
 26 |       },
 27 |       {
 28 |         path: "/component",
 29 |         name: "Components",
 30 |         info: "+5",
 31 |         hasIcon: true,
 32 |         children: [
 33 |           {
 34 |             path: "/alerts",
 35 |             name: "Alerts",
 36 |           },
 37 |           {
 38 |             path: "/avatars",
 39 |             name: "Avatars",
 40 |           },
 41 |           {
 42 |             path: "/buttons",
 43 |             name: "Buttons",
 44 |           },
 45 |           {
 46 |             path: "/forms",
 47 |             name: "Forms",
 48 |             children: [
 49 |               {
 50 |                 path: "/autocompletes",
 51 |                 name: "Autocompletes",
 52 |               },
 53 |               {
 54 |                 path: "/checkboxes",
 55 |                 name: "Checkboxes",
 56 |               },
 57 |               {
 58 |                 path: "/inputs",
 59 |                 name: "Inputs",
 60 |                 children: [
 61 |                   {
 62 |                     path: "/file-inputs",
 63 |                     name: "File inputs",
 64 |                   },
 65 |                   {
 66 |                     path: "/text-inputs",
 67 |                     name: "Text inputs",
 68 |                   },
 69 |                 ],
 70 |               },
 71 |             ],
 72 |           },
 73 |           {
 74 |             path: "/pickers",
 75 |             name: "Pickers",
 76 |             children: [
 77 |               {
 78 |                 path: "/date-picker",
 79 |                 name: "Date picker",
 80 |               },
 81 |               {
 82 |                 path: "/time-picker",
 83 |                 name: "Time picker",
 84 |               },
 85 |               {
 86 |                 path: "/color-picker",
 87 |                 name: "Color picker",
 88 |               },
 89 |             ],
 90 |           },
 91 |         ],
 92 |       },
 93 |       {
 94 |         path: "/mail",
 95 |         name: "Mail",
 96 |         hasIcon: true,
 97 |         children: [
 98 |           {
 99 |             path: "/sent",
100 |             name: "Sent",
101 |           },
102 |           {
103 |             path: "/avatars",
104 |             name: "Avatars",
105 |           },
106 |           {
107 |             path: "/buttons",
108 |             name: "Buttons",
109 |           },
110 |         ],
111 |       },
112 |     ],
113 |   }),
114 |   computed: {},
115 |   methods: {},
116 |   components: {
117 |     Vue3RouterTree,
118 |   },
119 |   mounted() {},
120 | };
121 | </script>
122 | 
123 |   `,
124 |   WithIcons: `<template>
125 |   <div>
126 |        <vue3-router-tree :items="routes"> 
127 |        <template #item="{ item }">
128 |                 <div class="flex  space-x-2 items-center">
129 |                     <icon :name="item.name.toLowerCase()" />
130 |                     <span> {{ item.name }}</span>
131 |                 </div>
132 | 
133 |          </template>
134 |        </vue3-router-tree>
135 |   </div>
136 | </template>
137 | 
138 | <script>
139 | import Vue3RouterTree from "vue3-router-tree";
140 | 
141 | export default {
142 |   name: "BasicExample",
143 |   data: () => ({
144 |     routes: [
145 |       {
146 |         path: "/",
147 |         name: "Home",
148 |         hasIcon: true,
149 |       },
150 |       {
151 |         path: "/dashboard",
152 |         name: "Dashboard",
153 |         hasIcon: true,
154 | 
155 |         info: "updated",
156 |       },
157 |       {
158 |         path: "/component",
159 |         name: "Components",
160 |         info: "+5",
161 |         hasIcon: true,
162 |         children: [
163 |           {
164 |             path: "/alerts",
165 |             name: "Alerts",
166 |           },
167 |           {
168 |             path: "/avatars",
169 |             name: "Avatars",
170 |           },
171 |           {
172 |             path: "/buttons",
173 |             name: "Buttons",
174 |           },
175 |           {
176 |             path: "/forms",
177 |             name: "Forms",
178 |             children: [
179 |               {
180 |                 path: "/autocompletes",
181 |                 name: "Autocompletes",
182 |               },
183 |               {
184 |                 path: "/checkboxes",
185 |                 name: "Checkboxes",
186 |               },
187 |               {
188 |                 path: "/inputs",
189 |                 name: "Inputs",
190 |                 children: [
191 |                   {
192 |                     path: "/file-inputs",
193 |                     name: "File inputs",
194 |                   },
195 |                   {
196 |                     path: "/text-inputs",
197 |                     name: "Text inputs",
198 |                   },
199 |                 ],
200 |               },
201 |             ],
202 |           },
203 |           {
204 |             path: "/pickers",
205 |             name: "Pickers",
206 |             children: [
207 |               {
208 |                 path: "/date-picker",
209 |                 name: "Date picker",
210 |               },
211 |               {
212 |                 path: "/time-picker",
213 |                 name: "Time picker",
214 |               },
215 |               {
216 |                 path: "/color-picker",
217 |                 name: "Color picker",
218 |               },
219 |             ],
220 |           },
221 |         ],
222 |       },
223 |       {
224 |         path: "/mail",
225 |         name: "Mail",
226 |         hasIcon: true,
227 |         children: [
228 |           {
229 |             path: "/sent",
230 |             name: "Sent",
231 |           },
232 |           {
233 |             path: "/avatars",
234 |             name: "Avatars",
235 |           },
236 |           {
237 |             path: "/buttons",
238 |             name: "Buttons",
239 |           },
240 |         ],
241 |       },
242 |     ],
243 |   }),
244 |   computed: {},
245 |   methods: {},
246 |   components: {
247 |     Vue3RouterTree,
248 |   },
249 |   mounted() {},
250 | };
251 | </script>
252 | 
253 |   `,
254 |   DefaultOpenExample: `<template>
255 |   <div>
256 |        <vue3-router-tree :items="routes" defaultOpen="Components"> 
257 |        <template #item="{ item }">
258 |                 <div class="flex  space-x-2 items-center">
259 |                     <icon :name="item.name.toLowerCase()" />
260 |                     <span> {{ item.name }}</span>
261 |                 </div>
262 | 
263 |          </template>
264 |        </vue3-router-tree>
265 |   </div>
266 | </template>
267 | 
268 | <script>
269 | import Vue3RouterTree from "vue3-router-tree";
270 | 
271 | export default {
272 |   name: "BasicExample",
273 |   data: () => ({
274 |     routes: [
275 |       {
276 |         path: "/",
277 |         name: "Home",
278 |         hasIcon: true,
279 |       },
280 |       {
281 |         path: "/dashboard",
282 |         name: "Dashboard",
283 |         hasIcon: true,
284 | 
285 |         info: "updated",
286 |       },
287 |       {
288 |         path: "/component",
289 |         name: "Components",
290 |         info: "+5",
291 |         hasIcon: true,
292 |         children: [
293 |           {
294 |             path: "/alerts",
295 |             name: "Alerts",
296 |           },
297 |           {
298 |             path: "/avatars",
299 |             name: "Avatars",
300 |           },
301 |           {
302 |             path: "/buttons",
303 |             name: "Buttons",
304 |           },
305 |           {
306 |             path: "/forms",
307 |             name: "Forms",
308 |             children: [
309 |               {
310 |                 path: "/autocompletes",
311 |                 name: "Autocompletes",
312 |               },
313 |               {
314 |                 path: "/checkboxes",
315 |                 name: "Checkboxes",
316 |               },
317 |               {
318 |                 path: "/inputs",
319 |                 name: "Inputs",
320 |                 children: [
321 |                   {
322 |                     path: "/file-inputs",
323 |                     name: "File inputs",
324 |                   },
325 |                   {
326 |                     path: "/text-inputs",
327 |                     name: "Text inputs",
328 |                   },
329 |                 ],
330 |               },
331 |             ],
332 |           },
333 |           {
334 |             path: "/pickers",
335 |             name: "Pickers",
336 |             children: [
337 |               {
338 |                 path: "/date-picker",
339 |                 name: "Date picker",
340 |               },
341 |               {
342 |                 path: "/time-picker",
343 |                 name: "Time picker",
344 |               },
345 |               {
346 |                 path: "/color-picker",
347 |                 name: "Color picker",
348 |               },
349 |             ],
350 |           },
351 |         ],
352 |       },
353 |       {
354 |         path: "/mail",
355 |         name: "Mail",
356 |         hasIcon: true,
357 |         children: [
358 |           {
359 |             path: "/sent",
360 |             name: "Sent",
361 |           },
362 |           {
363 |             path: "/avatars",
364 |             name: "Avatars",
365 |           },
366 |           {
367 |             path: "/buttons",
368 |             name: "Buttons",
369 |           },
370 |         ],
371 |       },
372 |     ],
373 |   }),
374 |   computed: {},
375 |   methods: {},
376 |   components: {
377 |     Vue3RouterTree,
378 |   },
379 |   mounted() {},
380 | };
381 | </script>
382 | 
383 |   `,
384 |  OpenAll: `<template>
385 |   <div>
386 |        <vue3-router-tree :items="routes" open-all> 
387 |        <template #item="{ item }">
388 |                 <div class="flex  space-x-2 items-center">
389 |                     <icon :name="item.name.toLowerCase()" />
390 |                     <span> {{ item.name }}</span>
391 |                 </div>
392 | 
393 |          </template>
394 |        </vue3-router-tree>
395 |   </div>
396 | </template>
397 | 
398 | <script>
399 | import Vue3RouterTree from "vue3-router-tree";
400 | 
401 | export default {
402 |   name: "BasicExample",
403 |   data: () => ({
404 |     routes: [
405 |       {
406 |         path: "/",
407 |         name: "Home",
408 |         hasIcon: true,
409 |       },
410 |       {
411 |         path: "/dashboard",
412 |         name: "Dashboard",
413 |         hasIcon: true,
414 | 
415 |         info: "updated",
416 |       },
417 |       {
418 |         path: "/component",
419 |         name: "Components",
420 |         info: "+5",
421 |         hasIcon: true,
422 |         children: [
423 |           {
424 |             path: "/alerts",
425 |             name: "Alerts",
426 |           },
427 |           {
428 |             path: "/avatars",
429 |             name: "Avatars",
430 |           },
431 |           {
432 |             path: "/buttons",
433 |             name: "Buttons",
434 |           },
435 |           {
436 |             path: "/forms",
437 |             name: "Forms",
438 |             children: [
439 |               {
440 |                 path: "/autocompletes",
441 |                 name: "Autocompletes",
442 |               },
443 |               {
444 |                 path: "/checkboxes",
445 |                 name: "Checkboxes",
446 |               },
447 |               {
448 |                 path: "/inputs",
449 |                 name: "Inputs",
450 |                 children: [
451 |                   {
452 |                     path: "/file-inputs",
453 |                     name: "File inputs",
454 |                   },
455 |                   {
456 |                     path: "/text-inputs",
457 |                     name: "Text inputs",
458 |                   },
459 |                 ],
460 |               },
461 |             ],
462 |           },
463 |           {
464 |             path: "/pickers",
465 |             name: "Pickers",
466 |             children: [
467 |               {
468 |                 path: "/date-picker",
469 |                 name: "Date picker",
470 |               },
471 |               {
472 |                 path: "/time-picker",
473 |                 name: "Time picker",
474 |               },
475 |               {
476 |                 path: "/color-picker",
477 |                 name: "Color picker",
478 |               },
479 |             ],
480 |           },
481 |         ],
482 |       },
483 |       {
484 |         path: "/mail",
485 |         name: "Mail",
486 |         hasIcon: true,
487 |         children: [
488 |           {
489 |             path: "/sent",
490 |             name: "Sent",
491 |           },
492 |           {
493 |             path: "/avatars",
494 |             name: "Avatars",
495 |           },
496 |           {
497 |             path: "/buttons",
498 |             name: "Buttons",
499 |           },
500 |         ],
501 |       },
502 |     ],
503 |   }),
504 |   computed: {},
505 |   methods: {},
506 |   components: {
507 |     Vue3RouterTree,
508 |   },
509 |   mounted() {},
510 | };
511 | </script>
512 | 
513 |   `
514 | };
515 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="p-16">
 3 |     <div class="about p-8 flex items-center shadow-lg border-t border-purple-50 ">
 4 | 
 5 |         <div class="h-48 w-48">
 6 |             <img class="h-48 w-48 rounded-full shadow-md " src="https://avatars2.githubusercontent.com/u/11801238?s=460&u=07a60f4b248400448eef07da47e3ace15331e06f&v=4" alt="">
 7 | 
 8 |         </div>
 9 | 
10 |         <div class="w-92 p-8">
11 |             <p class=" max-w-3xl">
12 |                 I'm a web developer who loves code and UI design, I like to build something that works and looks fine. When i have some problem I try to follow the best practices and the modern tools to solve it. I consecrate my free time to help people especially on Stack Overflow, maintain some open source components on Github or to learn new skills
13 |             </p>
14 |             <button class=" mt-8 px-8 py-2 bg-gray-800 text-purple-100 shadow-md rounded-full self-end focus:outline-none hover:bg-purple-900">
15 | 
16 |                 <a href="https://github.com/boussadjra" target="_blank" rel="noopener noreferrer">Github</a>
17 |             </button>
18 |             <button class="ml-2 mt-8 px-8 py-2 bg-melon-600 text-purple-100 shadow-md rounded-full self-end focus:outline-none hover:bg-purple-900">
19 |                 <a href="https://stackoverflow.com/users/8172857/boussadjra-brahim" target="_blank" rel="noopener noreferrer">StackOverflow</a>
20 |             </button>
21 |         </div>
22 |     </div>
23 | </div>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <section class="flex flex-col p-4 text-gray-700 pb-40" style="overflow-y: auto; max-height: calc(100vh - 64px)">
  3 |     <div class="w-full flex flex-col space-y-4 py-10 justify-center items-center">
  4 |         <h1 class="text-4xl font-bold">Vue 3 Router Tree</h1>
  5 |         <article class="px-8 w-11/12 sm:w-10/12 lg:w-9/12">
  6 |             This component is based on <b class="font-bold">Vue.js 3</b>, it
  7 |             represents your routes or items as a tree view, by default takes it
  8 |             takes the routes configuration as items, but you could provide your
  9 |             custom items that respects the following format :
 10 | 
 11 |             <div class="py-4">
 12 |                 <prism language="javascript" :code="code"></prism>
 13 |             </div>
 14 |             <h2 class="self-start text-xl font-bold">Props</h2>
 15 | 
 16 |             <table class="w-full overflow-x-scroll divide-y divide-gray-200 mt-4">
 17 |                 <thead class="bg-gray-50">
 18 |                     <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
 19 |                         Name
 20 |                     </th>
 21 |                     <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
 22 |                         Description
 23 |                     </th>
 24 |                     <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
 25 |                         default
 26 |                     </th>
 27 |                 </thead>
 28 | 
 29 |                 <tbody class="bg-white divide-y divide-gray-200 text-sm">
 30 |                     <tr v-for="prop in propDetails" :key="prop.name" class="transition-all hover:bg-gray-50 hover:shadow-sm">
 31 |                         <td class="px-6 pt-4 whitespace-nowrap flex flk">
 32 |                             {{ prop.name }}
 33 |                         </td>
 34 |                         <td class="px-6 py-4">
 35 |                             {{ prop.desc }}
 36 |                         </td>
 37 |                         <td class="px-6 py-4 whitespace-nowrap" :style="{ color: prop.default }">
 38 |                             {{ prop.default }}
 39 |                         </td>
 40 |                     </tr>
 41 |                 </tbody>
 42 |             </table>
 43 |             <h2 class="self-start text-xl font-bold mb-4 mt-8">Slots</h2>
 44 | 
 45 |             <table class="w-full overflow-x-scroll divide-y divide-gray-200 mt-4">
 46 |                 <thead class="bg-gray-50">
 47 |                     <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
 48 |                         Name
 49 |                     </th>
 50 |                     <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
 51 |                         Description
 52 |                     </th>
 53 |                 </thead>
 54 | 
 55 |                 <tbody class="bg-white divide-y divide-gray-200 text-sm">
 56 |                     <tr class="transition-all hover:bg-gray-50 hover:shadow-sm">
 57 |                         <td class="px-6 pt-4 whitespace-nowrap flex flk">item</td>
 58 |                         <td class="px-6 py-4">override the default item rendering</td>
 59 |                     </tr>
 60 |                 </tbody>
 61 |             </table>
 62 |             <h2 class="self-start text-xl font-bold mb-4 mt-8">Demo</h2>
 63 | 
 64 |             <div class="p-4">
 65 |                 <vue3-router-tree :items="files" no-max-width class="w-80 bg-p-indigo-800 rounded text-white">
 66 |                     <template #item="{ item }">
 67 |                         <div class="flex justify-between items-center w-full hover:font-bold">
 68 |                             <div class="flex items-center">
 69 |                                 <icon :name="`${item.type || 'file'}`" />
 70 |                                 <span class="ml-2 text-sm"> {{ item.name }}</span>
 71 |                             </div>
 72 |                             <span class="px-1 text-xs" :class="colors[item.info]">{{
 73 |                   item.info
 74 |                 }}</span>
 75 |                         </div>
 76 |                     </template>
 77 |                 </vue3-router-tree>
 78 |             </div>
 79 |         </article>
 80 |     </div>
 81 | </section>
 82 | </template>
 83 | 
 84 | <script>
 85 | import TabView from "@/devComponents/navigation/TabView.vue";
 86 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 87 | import Icon from "@/components/icons/Icon.vue";
 88 | export default {
 89 |     name: "App",
 90 |     data: () => ({
 91 |         code: `[
 92 |   {
 93 |       path:'/somePath',//optional
 94 |       name:'someName',//required
 95 |       component:SomeComponent //optional but if it's provided the tree node will be a link that redirects to this component
 96 |       meta:{ //optional
 97 |           // you could add a property that specify the excluded items/routes
 98 |       },
 99 |       children:[
100 | 
101 |       ]
102 |   }
103 | 
104 | ]`,
105 | 
106 |         propDetails: [{
107 |                 name: "items",
108 |                 desc: "the tree items or if not provided the component renders the current available routes",
109 |                 default: "current routes",
110 |             },
111 |             {
112 |                 name: "active-color",
113 |                 desc: "specify the selected item color",
114 |                 default: "#5d1df1",
115 |             },
116 |             {
117 |                 name: "default-open",
118 |                 desc: "specify the default opened path",
119 |                 default: "''",
120 |             },
121 |             {
122 |                 name: "exclude-field",
123 |                 desc: "In your route config you could specify a field inside meta option which will be used to exclude ",
124 |                 default: "''",
125 |             },
126 |             {
127 |                 name: "open-all",
128 |                 desc: "Expand all items that have children",
129 |                 default: "false",
130 |             },
131 |         ],
132 |         files: [{
133 |                 name: ".git",
134 |                 type: "folder",
135 |             },
136 |             {
137 |                 name: "node_modules",
138 |                 type: "folder",
139 |             },
140 |             {
141 |                 name: "public",
142 |                 type: "folder",
143 |                 children: [{
144 |                         name: "static",
145 |                         type: "folder",
146 |                         children: [{
147 |                             name: "logo.png",
148 |                             file: "png",
149 |                             info: "U",
150 |                         }, ],
151 |                     },
152 |                     {
153 |                         name: "favicon.ico",
154 |                         file: "png",
155 |                     },
156 |                     {
157 |                         name: "index.html",
158 |                         file: "html",
159 |                     },
160 |                 ],
161 |             },
162 |             {
163 |                 name: ".gitignore",
164 |                 file: "txt",
165 |             },
166 |             {
167 |                 name: "babel.config.js",
168 |                 file: "js",
169 |                 info: "M",
170 |             },
171 |             {
172 |                 name: "package.json",
173 |                 file: "json",
174 |                 info: "M",
175 |             },
176 |             {
177 |                 name: "README.md",
178 |                 file: "md",
179 |                 info: "U",
180 |             },
181 |             {
182 |                 name: "vue.config.js",
183 |                 file: "js",
184 |                 info: "C",
185 |             },
186 |             {
187 |                 name: "yarn.lock",
188 |                 file: "txt",
189 |                 info: "+1",
190 |             },
191 |         ],
192 | 
193 |         colors: {
194 |             M: "text-yellow-300",
195 |             U: "text-green-400",
196 |             C: "text-purple-700",
197 |             "+1": "text-red-500",
198 |         },
199 |     }),
200 |     components: {
201 |         Vue3RouterTree,
202 |         Icon,
203 |     },
204 | };
205 | </script>
206 | 


--------------------------------------------------------------------------------
/src/views/guide/BasicExample.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="section__title">Basic example</div>
  4 |     <p class="py-4 px-2">
  5 |         The following example shows a basic usage of the tree menu, for example
  6 |         for rendering a table of content
  7 |     </p>
  8 |     <tab-view :items="items" @change-tab="changeTab"></tab-view>
  9 |     <div class="p-4 bg-green-50">
 10 |         <div v-if="showCode">
 11 |             <prism language="html" :code="code"></prism>
 12 |         </div>
 13 |         <vue3-router-tree v-else :items="routes" class="bg-purple-100 "> </vue3-router-tree>
 14 |     </div>
 15 | 
 16 | </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 21 | import snippets from "@/utils/snippets";
 22 | export default {
 23 |     name: "BasicExample",
 24 |     data: () => ({
 25 |         code: snippets.BasicExample,
 26 |         showCode: false,
 27 |         items: [{
 28 |                 header: "Preview",
 29 |             },
 30 |             {
 31 |                 header: "Code",
 32 |             },
 33 |         ],
 34 |         routes: [{
 35 |                 path: "/",
 36 |                 name: "Home",
 37 |                 hasIcon: true,
 38 |             },
 39 |             {
 40 |                 path: "/dashboard",
 41 |                 name: "Dashboard",
 42 |                 hasIcon: true,
 43 | 
 44 |                 info: "updated",
 45 |             },
 46 |             {
 47 |                 path: "/component",
 48 |                 name: "Components",
 49 |                 info: "+5",
 50 |                 hasIcon: true,
 51 |                 children: [{
 52 |                         path: "/alerts",
 53 |                         name: "Alerts",
 54 |                     },
 55 |                     {
 56 |                         path: "/avatars",
 57 |                         name: "Avatars",
 58 |                     },
 59 |                     {
 60 |                         path: "/buttons",
 61 |                         name: "Buttons",
 62 |                     },
 63 |                     {
 64 |                         path: "/forms",
 65 |                         name: "Forms",
 66 |                         children: [{
 67 |                                 path: "/autocompletes",
 68 |                                 name: "Autocompletes",
 69 |                             },
 70 |                             {
 71 |                                 path: "/checkboxes",
 72 |                                 name: "Checkboxes",
 73 |                             },
 74 |                             {
 75 |                                 path: "/inputs",
 76 |                                 name: "Inputs",
 77 |                                 children: [{
 78 |                                         path: "/file-inputs",
 79 |                                         name: "File inputs",
 80 |                                     },
 81 |                                     {
 82 |                                         path: "/text-inputs",
 83 |                                         name: "Text inputs",
 84 |                                     },
 85 |                                 ],
 86 |                             },
 87 |                         ],
 88 |                     },
 89 |                     {
 90 |                         path: "/pickers",
 91 |                         name: "Pickers",
 92 |                         children: [{
 93 |                                 path: "/date-picker",
 94 |                                 name: "Date picker",
 95 |                             },
 96 |                             {
 97 |                                 path: "/time-picker",
 98 |                                 name: "Time picker",
 99 |                             },
100 |                             {
101 |                                 path: "/color-picker",
102 |                                 name: "Color picker",
103 |                             },
104 |                         ],
105 |                     },
106 |                 ],
107 |             },
108 |             {
109 |                 path: "/mail",
110 |                 name: "Mail",
111 |                 hasIcon: true,
112 |                 children: [{
113 |                         path: "/sent",
114 |                         name: "Sent",
115 |                     },
116 |                     {
117 |                         path: "/avatars",
118 |                         name: "Avatars",
119 |                     },
120 |                     {
121 |                         path: "/buttons",
122 |                         name: "Buttons",
123 |                     },
124 |                 ],
125 |             },
126 |         ],
127 |     }),
128 |     computed: {},
129 |     methods: {
130 | 
131 |         changeTab(item) {
132 |             this.showCode = item.header === "Code";
133 |         },
134 |     },
135 |     components: {
136 |         Vue3RouterTree,
137 |     },
138 |     mounted() {},
139 | };
140 | </script>
141 | 


--------------------------------------------------------------------------------
/src/views/guide/DefaultOpenExample.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="section__title">Render items with meta info</div>
  4 |     <p class="py-4 px-2">
  5 |         You could render your tree by setting a default open path
  6 | 
  7 |     </p>
  8 |     <tab-view :items="items" @change-tab="changeTab"></tab-view>
  9 |     <div class="p-4 bg-green-50">
 10 |         <div v-if="showCode">
 11 |             <prism language="html" :code="code"></prism>
 12 |         </div>
 13 |         <vue3-router-tree v-else :items="routes" class="bg-purple-100 " :defaultOpen="'Components/Forms'">
 14 |             <template #item="{ item }">
 15 |                 <div class="flex  space-x-2 items-center">
 16 |                     <icon :name="`${item.name.toLowerCase()}`" />
 17 |                     <span> {{ item.name }}</span>
 18 |                     <span v-if="item.info" class="chip px-1  bg-purple-300 rounded text-gray-700 text-xs">{{ item.info }}</span>
 19 |                 </div>
 20 | 
 21 |             </template>
 22 |         </vue3-router-tree>
 23 |     </div>
 24 | 
 25 | </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 30 | import snippets from "@/utils/snippets";
 31 | import Icon from '@/components/icons/Icon.vue';
 32 | export default {
 33 |     name: "DefaultOpenExample",
 34 |     data: () => ({
 35 |         code: snippets.DefaultOpenExample,
 36 |         showCode: false,
 37 |         items: [{
 38 |                 header: "Preview",
 39 |             },
 40 |             {
 41 |                 header: "Code",
 42 |             },
 43 |         ],
 44 |         routes: [{
 45 |                 path: "/",
 46 |                 name: "Home",
 47 |                 hasIcon: true,
 48 |             },
 49 |             {
 50 |                 path: "/dashboard",
 51 |                 name: "Dashboard",
 52 |                 hasIcon: true,
 53 | 
 54 |                 info: "updated",
 55 |             },
 56 |             {
 57 |                 path: "/component",
 58 |                 name: "Components",
 59 |                 info: "+5",
 60 |                 hasIcon: true,
 61 |                 children: [{
 62 |                         path: "/alerts",
 63 |                         name: "Alerts",
 64 |                     },
 65 |                     {
 66 |                         path: "/avatars",
 67 |                         name: "Avatars",
 68 |                     },
 69 |                     {
 70 |                         path: "/buttons",
 71 |                         name: "Buttons",
 72 |                     },
 73 |                     {
 74 |                         path: "/forms",
 75 |                         name: "Forms",
 76 |                         children: [{
 77 |                                 path: "/autocompletes",
 78 |                                 name: "Autocompletes",
 79 |                             },
 80 |                             {
 81 |                                 path: "/checkboxes",
 82 |                                 name: "Checkboxes",
 83 |                             },
 84 |                             {
 85 |                                 path: "/inputs",
 86 |                                 name: "Inputs",
 87 |                                 children: [{
 88 |                                         path: "/file-inputs",
 89 |                                         name: "File inputs",
 90 |                                     },
 91 |                                     {
 92 |                                         path: "/text-inputs",
 93 |                                         name: "Text inputs",
 94 |                                     },
 95 |                                 ],
 96 |                             },
 97 |                         ],
 98 |                     },
 99 |                     {
100 |                         path: "/pickers",
101 |                         name: "Pickers",
102 |                         children: [{
103 |                                 path: "/date-picker",
104 |                                 name: "Date picker",
105 |                             },
106 |                             {
107 |                                 path: "/time-picker",
108 |                                 name: "Time picker",
109 |                             },
110 |                             {
111 |                                 path: "/color-picker",
112 |                                 name: "Color picker",
113 |                             },
114 |                         ],
115 |                     },
116 |                 ],
117 |             },
118 |             {
119 |                 path: "/mail",
120 |                 name: "Mail",
121 |                 hasIcon: true,
122 |                 children: [{
123 |                         path: "/sent",
124 |                         name: "Sent",
125 |                     },
126 |                     {
127 |                         path: "/avatars",
128 |                         name: "Avatars",
129 |                     },
130 |                     {
131 |                         path: "/buttons",
132 |                         name: "Buttons",
133 |                     },
134 |                 ],
135 |             },
136 |         ],
137 |     }),
138 |     computed: {},
139 |     methods: {
140 | 
141 |         changeTab(item) {
142 |             this.showCode = item.header === "Code";
143 |         },
144 |     },
145 |     components: {
146 |         Vue3RouterTree,
147 |         Icon,
148 |     },
149 |     mounted() {},
150 | };
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/views/guide/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="flex flex-row">
 3 |     <aside class="md:flex flex-col bg-p-indigo-50 py-6 w-64 sticky min-h-screen shadow-lg">
 4 | 
 5 |         <div class="flex w-full py-4 overflow-x-hidden">
 6 |             <!--  <ul class="flex flex-col w-full  overflow-auto">
 7 |                 <li class="relative w-full " v-for="(component, index) in components" :key="index">
 8 |                     <router-link active-class="text-p-indigo-500 bg-p-indigo-200" class="relative flex  text-gray-600 w-full pl-4 p-2 items-center" :to="'/guide/'+component.path">
 9 | 
10 |                         <span class="text-sm py-1 whitespace-nowrap">{{ component.name }}</span>
11 |                     </router-link>
12 |                 </li>
13 |             </ul> -->
14 | 
15 |             <vue3-router-tree class="bg-p-indigo-50 w-64 max-w-min" exclude-field="exludedOnSidebar" :defaultOpen="'Guide'">
16 |                 <template #item="{ item }">
17 |                     <div class="flex space-x-2 items-center">
18 |                         <router-link class="relative flex text-gray-600 w-full items-center" :to="'/guide/' + item.path">
19 |                             <span class="text-sm py-1 whitespace-nowrap">{{
20 |                   item.name
21 |                 }}</span>
22 |                         </router-link>
23 |                     </div>
24 |                 </template>
25 |             </vue3-router-tree>
26 |         </div>
27 |     </aside>
28 | 
29 |     <section class="w-full transition-all overflow-x-hidden" style="overflow-y: auto; max-height: calc(100vh - 64px)">
30 |         <div class="w-full items-center sticky top-0 z-20 flex bg-gray-100"></div>
31 |         <main class="pl-8 pr-16 pt-4 pb-32 w-full">
32 |             <router-view></router-view>
33 |         </main>
34 |     </section>
35 | </div>
36 | </template>
37 | 
38 | <script>
39 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
40 | import {
41 |     routes
42 | } from "@/router";
43 | export default {
44 |     name: "guide",
45 |     computed: {
46 |         components() {
47 |             return routes.find((route) => route.path.includes("/guide")).children;
48 |         },
49 |     },
50 |     components: {
51 |         Vue3RouterTree,
52 |     },
53 | 
54 |     mounted() {
55 |         console.log("---------route-----------");
56 |         console.log(this.$route);
57 |         console.log("--------------------");
58 |     },
59 | };
60 | </script>
61 | 
62 | <style>
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/views/guide/OpenAll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="section__title">Expand all items</div>
  4 |     <p class="py-4 px-2">
  5 |         This is useful when working with table of content
  6 |     </p>
  7 |     <tab-view :items="items" @change-tab="changeTab"></tab-view>
  8 |     <div class="p-4 bg-green-50">
  9 |         <div v-if="showCode">
 10 |             <prism language="html" :code="code"></prism>
 11 |         </div>
 12 |         <vue3-router-tree v-else :items="docSidebar" open-all class="bg-purple-100 ">
 13 |             <template #item="{ item }">
 14 |                 <div class="flex  space-x-2 items-center">
 15 |                     <icon class="text-purple-800" :name="`${item.name.toLowerCase()}`" />
 16 |                     <span> {{ item.name }}</span>
 17 |                     <span v-if="item.info" class="chip px-1  bg-purple-300 rounded text-gray-700 text-xs">{{ item.info }}</span>
 18 |                 </div>
 19 | 
 20 |             </template>
 21 |         </vue3-router-tree>
 22 |     </div>
 23 | 
 24 | </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 29 | import snippets from "@/utils/snippets";
 30 | import Icon from '@/components/icons/Icon.vue';
 31 | export default {
 32 |     name: "OpenAll",
 33 |     data: () => ({
 34 |         code: snippets.OpenAll,
 35 |         showCode: false,
 36 |         items: [{
 37 |                 header: "Preview",
 38 |             },
 39 |             {
 40 |                 header: "Code",
 41 |             },
 42 |         ],
 43 |         docSidebar: [{
 44 |                 name: "Installation",
 45 |                 children: [{
 46 |                         name: "Releases Notes",
 47 |                     },
 48 |                     {
 49 |                         name: "Vue Devtools",
 50 |                     },
 51 |                     {
 52 |                         name: "CDN",
 53 |                     },
 54 |                     {
 55 |                         name: "NPM",
 56 |                     },
 57 |                     {
 58 |                         name: "CLI",
 59 |                     },
 60 |                     {
 61 |                         name: "Vite",
 62 |                     },
 63 |                 ],
 64 |             },
 65 |             {
 66 |                 name: "Introduction",
 67 |                 children: [{
 68 |                         name: "What is Vue.js?",
 69 |                     },
 70 |                     {
 71 |                         name: "Getting Started",
 72 |                     },
 73 |                     {
 74 |                         name: "Declarative Rendering",
 75 |                     },
 76 |                     {
 77 |                         name: "Handling User Input",
 78 |                     },
 79 |                     {
 80 |                         name: "Conditionals and Loops",
 81 |                     },
 82 |                     {
 83 |                         name: "Composing with Components",
 84 |                         children: [{
 85 |                             name: "Relation to Custom Elements",
 86 |                         }, ],
 87 |                     },
 88 |                 ],
 89 |             },
 90 |             {
 91 |                 name: "Application & Component Instances",
 92 |                 children: [{
 93 |                         name: "Creating an Application Instance",
 94 |                     },
 95 |                     {
 96 |                         name: "The Root Component",
 97 |                     },
 98 |                     {
 99 |                         name: "Component Instance Properties",
100 |                     },
101 |                     {
102 |                         name: "Lifecycle Hooks",
103 |                     },
104 |                     {
105 |                         name: "Lifecycle Diagram",
106 |                     },
107 |                 ],
108 |             },
109 |             {
110 |                 name: "Template Syntax",
111 |                 children: [{
112 |                         name: "Interpolations",
113 |                         children: [{
114 |                                 name: "Text",
115 |                             },
116 |                             {
117 |                                 name: "Raw HTML",
118 |                             },
119 |                             {
120 |                                 name: "Attributes",
121 |                             },
122 |                             {
123 |                                 name: "Using JavaScript Expressions",
124 |                             },
125 |                         ],
126 |                     },
127 |                     {
128 |                         name: "Directives",
129 |                         children: [{
130 |                                 name: "Arguments",
131 |                             },
132 |                             {
133 |                                 name: "Dynamic Arguments",
134 |                             },
135 |                             {
136 |                                 name: "Modifiers",
137 |                             },
138 |                         ],
139 |                     },
140 |                 ],
141 |             },
142 |             {
143 |                 name: "Data Properties and Methods",
144 |             },
145 |             {
146 |                 name: "Computed Properties and Watchers",
147 |             },
148 |             {
149 |                 name: "Class and Style Bindings",
150 |             },
151 |             {
152 |                 name: "Binding Inline Styles",
153 |             },
154 |         ],
155 |     }),
156 |     computed: {},
157 |     methods: {
158 | 
159 |         changeTab(item) {
160 |             this.showCode = item.header === "Code";
161 |         },
162 |     },
163 |     components: {
164 |         Vue3RouterTree,
165 |         Icon,
166 |     },
167 |     mounted() {},
168 | };
169 | </script>
170 | 


--------------------------------------------------------------------------------
/src/views/guide/WithIcons.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="section__title">Render items with Icons</div>
  4 |     <p class="py-4 px-2">
  5 |         We could use `item` slot to change the default display by adding icons to our items
  6 |     </p>
  7 |     <tab-view :items="items" @change-tab="changeTab"></tab-view>
  8 |     <div class="p-4 bg-green-50">
  9 |         <div v-if="showCode">
 10 |             <prism language="html" :code="code"></prism>
 11 |         </div>
 12 |         <vue3-router-tree v-else :items="routes" class="bg-purple-100 ">
 13 |             <template #item="{ item }">
 14 |                 <div class="flex  space-x-2 items-center">
 15 |                     <icon :name="`${item.name.toLowerCase()}`" />
 16 |                     <span> {{ item.name }}</span>
 17 |                 </div>
 18 | 
 19 |             </template>
 20 |         </vue3-router-tree>
 21 |     </div>
 22 | 
 23 | </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 28 | import snippets from "@/utils/snippets";
 29 | import Icon from '@/components/icons/Icon.vue';
 30 | export default {
 31 |     name: "WithIcons",
 32 |     data: () => ({
 33 |         code: snippets.WithIcons,
 34 |         showCode: false,
 35 |         items: [{
 36 |                 header: "Preview",
 37 |             },
 38 |             {
 39 |                 header: "Code",
 40 |             },
 41 |         ],
 42 |         routes: [{
 43 |                 path: "/",
 44 |                 name: "Home",
 45 |                 hasIcon: true,
 46 |             },
 47 |             {
 48 |                 path: "/dashboard",
 49 |                 name: "Dashboard",
 50 |                 hasIcon: true,
 51 | 
 52 |                 info: "updated",
 53 |             },
 54 |             {
 55 |                 path: "/component",
 56 |                 name: "Components",
 57 |                 info: "+5",
 58 |                 hasIcon: true,
 59 |                 children: [{
 60 |                         path: "/alerts",
 61 |                         name: "Alerts",
 62 |                     },
 63 |                     {
 64 |                         path: "/avatars",
 65 |                         name: "Avatars",
 66 |                     },
 67 |                     {
 68 |                         path: "/buttons",
 69 |                         name: "Buttons",
 70 |                     },
 71 |                     {
 72 |                         path: "/forms",
 73 |                         name: "Forms",
 74 |                         children: [{
 75 |                                 path: "/autocompletes",
 76 |                                 name: "Autocompletes",
 77 |                             },
 78 |                             {
 79 |                                 path: "/checkboxes",
 80 |                                 name: "Checkboxes",
 81 |                             },
 82 |                             {
 83 |                                 path: "/inputs",
 84 |                                 name: "Inputs",
 85 |                                 children: [{
 86 |                                         path: "/file-inputs",
 87 |                                         name: "File inputs",
 88 |                                     },
 89 |                                     {
 90 |                                         path: "/text-inputs",
 91 |                                         name: "Text inputs",
 92 |                                     },
 93 |                                 ],
 94 |                             },
 95 |                         ],
 96 |                     },
 97 |                     {
 98 |                         path: "/pickers",
 99 |                         name: "Pickers",
100 |                         children: [{
101 |                                 path: "/date-picker",
102 |                                 name: "Date picker",
103 |                             },
104 |                             {
105 |                                 path: "/time-picker",
106 |                                 name: "Time picker",
107 |                             },
108 |                             {
109 |                                 path: "/color-picker",
110 |                                 name: "Color picker",
111 |                             },
112 |                         ],
113 |                     },
114 |                 ],
115 |             },
116 |             {
117 |                 path: "/mail",
118 |                 name: "Mail",
119 |                 hasIcon: true,
120 |                 children: [{
121 |                         path: "/sent",
122 |                         name: "Sent",
123 |                     },
124 |                     {
125 |                         path: "/avatars",
126 |                         name: "Avatars",
127 |                     },
128 |                     {
129 |                         path: "/buttons",
130 |                         name: "Buttons",
131 |                     },
132 |                 ],
133 |             },
134 |         ],
135 |     }),
136 |     computed: {},
137 |     methods: {
138 | 
139 |         changeTab(item) {
140 |             this.showCode = item.header === "Code";
141 |         },
142 |     },
143 |     components: {
144 |         Vue3RouterTree,
145 |         Icon,
146 |     },
147 |     mounted() {},
148 | };
149 | </script>
150 | 


--------------------------------------------------------------------------------
/src/views/guide/WithMetaInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="section__title">Open a default path</div>
  4 |     <p class="py-4 px-2">
  5 |         We could use `item` slot to change the default display by adding icons and meta info to our items
  6 |     </p>
  7 |     <tab-view :items="items" @change-tab="changeTab"></tab-view>
  8 |     <div class="p-4 bg-green-50">
  9 |         <div v-if="showCode">
 10 |             <prism language="html" :code="code"></prism>
 11 |         </div>
 12 |         <vue3-router-tree v-else :items="routes" class="bg-purple-100 ">
 13 |             <template #item="{ item }">
 14 |                 <div class="flex  space-x-2 items-center">
 15 |                     <icon :name="`${item.name.toLowerCase()}`" />
 16 |                     <span> {{ item.name }}</span>
 17 |                     <span v-if="item.info" class="chip px-1  bg-purple-300 rounded text-gray-700 text-xs">{{ item.info }}</span>
 18 |                 </div>
 19 | 
 20 |             </template>
 21 |         </vue3-router-tree>
 22 |     </div>
 23 | 
 24 | </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import Vue3RouterTree from "@/components/Vue3RouterTree/index";
 29 | import snippets from "@/utils/snippets";
 30 | import Icon from '@/components/icons/Icon.vue';
 31 | export default {
 32 |     name: "WithMetaInfo",
 33 |     data: () => ({
 34 |         code: snippets.WithMetaInfo,
 35 |         showCode: false,
 36 |         items: [{
 37 |                 header: "Preview",
 38 |             },
 39 |             {
 40 |                 header: "Code",
 41 |             },
 42 |         ],
 43 |         routes: [{
 44 |                 path: "/",
 45 |                 name: "Home",
 46 |                 hasIcon: true,
 47 |             },
 48 |             {
 49 |                 path: "/dashboard",
 50 |                 name: "Dashboard",
 51 |                 hasIcon: true,
 52 | 
 53 |                 info: "updated",
 54 |             },
 55 |             {
 56 |                 path: "/component",
 57 |                 name: "Components",
 58 |                 info: "+5",
 59 |                 hasIcon: true,
 60 |                 children: [{
 61 |                         path: "/alerts",
 62 |                         name: "Alerts",
 63 |                     },
 64 |                     {
 65 |                         path: "/avatars",
 66 |                         name: "Avatars",
 67 |                     },
 68 |                     {
 69 |                         path: "/buttons",
 70 |                         name: "Buttons",
 71 |                     },
 72 |                     {
 73 |                         path: "/forms",
 74 |                         name: "Forms",
 75 |                         children: [{
 76 |                                 path: "/autocompletes",
 77 |                                 name: "Autocompletes",
 78 |                             },
 79 |                             {
 80 |                                 path: "/checkboxes",
 81 |                                 name: "Checkboxes",
 82 |                             },
 83 |                             {
 84 |                                 path: "/inputs",
 85 |                                 name: "Inputs",
 86 |                                 children: [{
 87 |                                         path: "/file-inputs",
 88 |                                         name: "File inputs",
 89 |                                     },
 90 |                                     {
 91 |                                         path: "/text-inputs",
 92 |                                         name: "Text inputs",
 93 |                                     },
 94 |                                 ],
 95 |                             },
 96 |                         ],
 97 |                     },
 98 |                     {
 99 |                         path: "/pickers",
100 |                         name: "Pickers",
101 |                         children: [{
102 |                                 path: "/date-picker",
103 |                                 name: "Date picker",
104 |                             },
105 |                             {
106 |                                 path: "/time-picker",
107 |                                 name: "Time picker",
108 |                             },
109 |                             {
110 |                                 path: "/color-picker",
111 |                                 name: "Color picker",
112 |                             },
113 |                         ],
114 |                     },
115 |                 ],
116 |             },
117 |             {
118 |                 path: "/mail",
119 |                 name: "Mail",
120 |                 hasIcon: true,
121 |                 children: [{
122 |                         path: "/sent",
123 |                         name: "Sent",
124 |                     },
125 |                     {
126 |                         path: "/avatars",
127 |                         name: "Avatars",
128 |                     },
129 |                     {
130 |                         path: "/buttons",
131 |                         name: "Buttons",
132 |                     },
133 |                 ],
134 |             },
135 |         ],
136 |     }),
137 |     computed: {},
138 |     methods: {
139 | 
140 |         changeTab(item) {
141 |             this.showCode = item.header === "Code";
142 |         },
143 |     },
144 |     components: {
145 |         Vue3RouterTree,
146 |         Icon,
147 |     },
148 |     mounted() {},
149 | };
150 | </script>
151 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.ts','./src/**/*.tsx','./src/**/*.js'],
 3 | 	darkMode: false, // or 'media' or 'class'
 4 | 	theme: {
 5 | 		extend: {
 6 | 			colors: {
 7 | 				'p-indigo': {
 8 | 					100: '#d6cfe2',
 9 | 					200: '#ad9ec5',
10 | 					300: '#846ea7',
11 | 					400: '#5b3d8a',
12 | 					500: '#320d6d',
13 | 					600: '#280a57',
14 | 					700: '#1e0841',
15 | 					800: '#14052c',
16 | 					900: '#0a0316',
17 | 				},
18 | 				melon: {
19 | 					100: '#fff2f1',
20 | 					200: '#ffe5e2',
21 | 					300: '#ffd9d4',
22 | 					400: '#ffccc5',
23 | 					500: '#ffbfb7',
24 | 					600: '#cc9992',
25 | 					700: '#99736e',
26 | 					800: '#664c49',
27 | 					900: '#332625',
28 | 				},
29 | 			},
30 | 			transitionProperty: {
31 | 				height: 'height',
32 | 			},
33 | 		},
34 | 	},
35 | 	variants: {},
36 | 	plugins: [],
37 | };
38 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import HelloWorld from '@/components/HelloWorld.vue'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('renders props.msg when passed', () => {
 6 |     const msg = 'new message'
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       props: { msg }
 9 |     })
10 |     expect(wrapper.text()).toMatch(msg)
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env",
16 |       "jest"
17 |     ],
18 |     "paths": {
19 |       "@/*": [
20 |         "src/*"
21 |       ]
22 |     },
23 |     "lib": [
24 |       "esnext",
25 |       "dom",
26 |       "dom.iterable",
27 |       "scripthost"
28 |     ]
29 |   },
30 |   "include": [
31 |     "src/**/*.ts",
32 |     "src/**/*.tsx",
33 |     "src/**/*.vue",
34 |     "tests/**/*.ts",
35 |     "tests/**/*.tsx"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	publicPath: process.env.NODE_ENV === 'production' ? '/vue3-router-tree/' : '/',
 3 | 	configureWebpack: {
 4 | 		output: {
 5 | 			libraryExport: 'default',
 6 | 		},
 7 | 	},
 8 | 	css: {
 9 | 		extract: false,
10 | 	},
11 | };
12 | 


--------------------------------------------------------------------------------