├── env.d.ts
├── src
    ├── components
    │   ├── consts.ts
    │   ├── index.ts
    │   ├── utils
    │   │   ├── SlotExtr.vue
    │   │   └── FixedRoute.vue
    │   ├── Content3.vue
    │   ├── GlTemplate.vue
    │   └── GoldenLayout.vue
    ├── sfc.d.ts
    ├── main.ts
    ├── views
    │   ├── AboutView.vue
    │   └── HomeView.vue
    ├── assets
    │   ├── logo.svg
    │   ├── main.css
    │   └── base.css
    ├── router
    │   └── index.ts
    ├── ts
    │   └── predefined-layouts.ts
    └── App.vue
├── public
    └── favicon.ico
├── .vscode
    └── extensions.json
├── .prettierrc.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── index.html
├── .eslintrc.cjs
├── .gitignore
├── vite.config.ts
├── LICENSE
├── package.json
└── README.md


/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/components/consts.ts:
--------------------------------------------------------------------------------
1 | export const layoutKey = Symbol("layout");


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eddow/v3-gl-ext/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import GoldenLayout from "./GoldenLayout.vue";
2 | 
3 | export { GoldenLayout };


--------------------------------------------------------------------------------
/src/sfc.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |     import Vue from 'vue'
3 |     export default Vue
4 | }


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "tabWidth": 4,
5 |   "singleQuote": true,
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import './assets/main.css'
 2 | 
 3 | import { createApp } from 'vue'
 4 | import App from './App.vue'
 5 | import router from './router'
 6 | 
 7 | const app = createApp(App)
 8 | 
 9 | app.use(router)
10 | 
11 | app.mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="about">
 3 | 		<h1>This is an about page</h1>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style>
 8 | @media (min-width: 1024px) {
 9 | 	.about {
10 | 		display: flex;
11 | 		align-items: center;
12 | 	}
13 | }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/utils/SlotExtr.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<i style="display: none;">Slots extraction</i>
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | 	import { getCurrentInstance, type Slots } from "vue";
 7 | 	defineExpose({
 8 | 		slots: <Slots>getCurrentInstance()?.slots
 9 | 	});
10 | </script>
11 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "composite": true,
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node18/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*"
 9 |   ],
10 |   "compilerOptions": {
11 |     "composite": true,
12 |     "module": "ESNext",
13 |     "types": ["node"]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-typescript',
10 |     '@vue/eslint-config-prettier/skip-formatting'
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: 'latest'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/src/components/utils/FixedRoute.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<RouterView :route="givenRoute" />
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | import { type PropType, watchEffect } from "vue";
 7 | import { RouterView, useRouter, type RouteLocation } from "vue-router";
 8 | 
 9 | const
10 | 	props = defineProps({
11 | 		route: {
12 | 			type: String,
13 | 			required: true
14 | 		}
15 | 	}),
16 | 	router = useRouter();
17 | 	let givenRoute: RouteLocation = router.resolve(props.route);
18 | 	watchEffect(()=> givenRoute = router.resolve(props.route));
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 | 
 8 |   font-weight: normal;
 9 | }
10 | 
11 | a,
12 | .green {
13 |   text-decoration: none;
14 |   color: hsla(160, 100%, 37%, 1);
15 |   transition: 0.4s;
16 | }
17 | 
18 | @media (hover: hover) {
19 |   a:hover {
20 |     background-color: hsla(160, 100%, 37%, 0.2);
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   body {
26 |     display: flex;
27 |     place-items: center;
28 |   }
29 | 
30 |   #app {
31 |     grid-template-columns: 1fr 1fr;
32 |     padding: 0 2rem;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	Welcome aboard!
 3 | </template>
 4 | 
 5 | <style>
 6 | html {
 7 | 	height: 100%;
 8 | }
 9 | body {
10 | 	height: 100%;
11 | 	margin: 0;
12 | 	overflow: hidden;
13 | }
14 | .full-height, #app {
15 | 	height: 100%;
16 | }
17 | #app {
18 | 	font-family: Avenir, Helvetica, Arial, sans-serif;
19 | 	-webkit-font-smoothing: antialiased;
20 | 	-moz-osx-font-smoothing: grayscale;
21 | }
22 | #nav {
23 | 	text-align: center;
24 | }
25 | </style>
26 | 
27 | <style src="golden-layout/dist/css/goldenlayout-base.css"></style>
28 | <style src="golden-layout/dist/css/themes/goldenlayout-dark-theme.css"></style>
29 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const router = createRouter({
 5 | 	history: createWebHistory(import.meta.env.BASE_URL),
 6 | 	routes: [
 7 | 		{
 8 | 			path: '/',
 9 | 			name: 'other',
10 | 			component: HomeView
11 | 		},
12 | 		{
13 | 			path: '/home',
14 | 			name: 'home',
15 | 			component: HomeView,
16 | 			meta: {
17 | 				title: 'Home'
18 | 			}
19 | 		},
20 | 		{
21 | 			path: '/about',
22 | 			name: 'about',
23 | 			// route level code-splitting
24 | 			// this generates a separate chunk (About.[hash].js) for this route
25 | 			// which is lazy-loaded when the route is visited.
26 | 			component: () => import('../views/AboutView.vue')
27 | 		}
28 | 	]
29 | })
30 | 
31 | export default router
32 | 


--------------------------------------------------------------------------------
/src/components/Content3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div style="color: white; height: 100%; overflow: auto">
 3 | 		1<br />
 4 | 		2<br />
 5 | 		3<br />
 6 | 		4<br />
 7 | 		5<br />
 8 | 		6<br />
 9 | 		7<br />
10 | 		8<br />
11 | 		9<br />
12 | 		0<br />
13 | 		1<br />
14 | 		2<br />
15 | 		3<br />
16 | 		4<br />
17 | 		5<br />
18 | 		6<br />
19 | 		7<br />
20 | 		8<br />
21 | 		9<br />
22 | 		0<br />
23 | 		1<br />
24 | 		2<br />
25 | 		3<br />
26 | 		4<br />
27 | 		5<br />
28 | 		6<br />
29 | 		7<br />
30 | 		8<br />
31 | 		9<br />
32 | 		0<br />
33 | 		1<br />
34 | 		2<br />
35 | 		3<br />
36 | 		4<br />
37 | 		5<br />
38 | 		6<br />
39 | 		7<br />
40 | 		8<br />
41 | 		9<br />
42 | 		0<br />
43 | 		1<br />
44 | 		2<br />
45 | 		3<br />
46 | 		4<br />
47 | 		5<br />
48 | 		6<br />
49 | 		7<br />
50 | 		8<br />
51 | 		9<br />
52 | 		0<br />
53 | 	</div>
54 | </template>
55 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | import { resolve } from 'path';
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 | 	plugins: [
 9 | 		vue(),
10 | 	],
11 | 	build: {
12 | 		cssCodeSplit: true,
13 | 		lib: {
14 | 			// Could also be a dictionary or array of multiple entry points
15 | 			entry: "src/components/main.ts",
16 | 			name: 'myLibraryVueTs',
17 | 			formats: ["es", "cjs", "umd"],
18 | 			fileName: format => `my-library-vue-ts.${format}.js`
19 | 		},
20 | 		rollupOptions: {
21 | 			// make sure to externalize deps that should not be bundled
22 | 			// into your library
23 | 			input: {
24 | 				main: resolve(__dirname, "src/components/main.ts")
25 | 			},
26 | 			external: ['vue', 'golden-layout']
27 | 		},
28 | 	},
29 | 	resolve: {
30 | 		alias: {
31 | 			'@': fileURLToPath(new URL('./src', import.meta.url))
32 | 		}
33 | 	}
34 | })
35 | 


--------------------------------------------------------------------------------
/src/ts/predefined-layouts.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	ComponentItemConfig,
 3 | 	ItemType,
 4 | 	LayoutConfig,
 5 | } from "golden-layout";
 6 | 
 7 | const miniRowConfig: LayoutConfig = {
 8 | 	root: {
 9 | 		type: ItemType.column,
10 | 		content: [{
11 | 			type: "component",
12 | 			title: "Init",
13 | 			header: { show: "top" },
14 | 			componentType: "Content1",
15 | 			width: 10,
16 | 			componentState: { abc: 'Yhea' },
17 | 		} as ComponentItemConfig, {
18 | 			type: ItemType.row,
19 | 			content: [{
20 | 				type: "component",
21 | 				title: "Title 1st",
22 | 				header: { show: "top" },
23 | 				isClosable: false,
24 | 				componentType: "Content1",
25 | 				width: 10,
26 | 				componentState: { abc: 123 },
27 | 			} as ComponentItemConfig, {
28 | 				type: "component",
29 | 				title: "I'm wide",
30 | 				header: { show: "top", popout: false },
31 | 				componentType: "Content2"
32 | 			} as ComponentItemConfig
33 | 		]}]
34 | 	}
35 | };
36 | 
37 | export const prefinedLayouts = {
38 | 	miniRow: miniRowConfig,
39 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 emedware
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v3-gl-ext",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "run-p type-check build-only",
 8 |     "preview": "vite preview",
 9 |     "build-only": "vite build",
10 |     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
11 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
12 |     "format": "prettier --write src/"
13 |   },
14 |   "dependencies": {
15 |     "golden-layout": "^2.6.0",
16 |     "vue": "^3.3.4",
17 |     "vue-router": "^4.2.2"
18 |   },
19 |   "devDependencies": {
20 |     "@rushstack/eslint-patch": "^1.2.0",
21 |     "@tsconfig/node18": "^2.0.1",
22 |     "@types/node": "^18.16.17",
23 |     "@vitejs/plugin-vue": "^4.2.3",
24 |     "@vue/eslint-config-prettier": "^7.1.0",
25 |     "@vue/eslint-config-typescript": "^11.0.3",
26 |     "@vue/tsconfig": "^0.4.0",
27 |     "eslint": "^8.39.0",
28 |     "eslint-plugin-vue": "^9.11.0",
29 |     "npm-run-all": "^4.1.5",
30 |     "prettier": "^2.8.8",
31 |     "typescript": "~5.0.4",
32 |     "vite": "^4.3.9",
33 |     "vue-tsc": "^1.6.5"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # v3-gl-ext
 2 | 
 3 | Vue3 golden layout and extensions - successor of [vue-golden-layout](https://github.com/emedware/vue-golden-layout)
 4 | 
 5 | ## Project Setup
 6 | 
 7 | ```sh
 8 | npm install
 9 | ```
10 | 
11 | ### Compile and Hot-Reload for Development
12 | 
13 | ```sh
14 | npm run dev
15 | ```
16 | 
17 | ### Type-Check, Compile and Minify for Production
18 | 
19 | ```sh
20 | npm run build
21 | ```
22 | 
23 | ## Usage
24 | 
25 | ```html
26 | <template>
27 | 	<golden-layout :router="true" :config="layoutConfig">
28 | 		<template #myTemplate>
29 | 			...
30 | 		</template>
31 | 	</golden-layout>
32 | </template>
33 | <script lang="ts">
34 | 	import { GoldenLayout } from "v3-gl-ext";
35 | 	const layoutconfig = {
36 | 		root: {
37 | 			type: "component",
38 | 			title: "One tab",
39 | 			header: { show: "top" },
40 | 			isClosable: false,
41 | 			componentType: "myTemplate"
42 | 		}
43 | 	};
44 | </script>
45 | ```
46 | 
47 | ### Properties
48 | 
49 | If `router` is true, every route change will either open a new tab or select the good one if already opened. Also, the url changes with tab change.
50 | 
51 | ## TODOs
52 | 
53 | - [ ] Config watching through property
54 | - [ ] Route sub-components
55 | - [ ] Route whole config (adds in the column/row instead of the stack)


--------------------------------------------------------------------------------
/src/components/GlTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div ref="GlTemplate" style="position: absolute; overflow: hidden">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import { ref } from "vue";
 9 | 
10 | const GlTemplate = ref<null | HTMLElement>(null);
11 | 
12 | const numberToPixels = (value: number): string => {
13 | 	return value.toString(10) + "px";
14 | };
15 | 
16 | const setPosAndSize = (
17 | 	left: number,
18 | 	top: number,
19 | 	width: number,
20 | 	height: number
21 | ): void => {
22 | 	if (GlTemplate.value) {
23 | 		const el = GlTemplate.value as HTMLElement;
24 | 		el.style.left = numberToPixels(left);
25 | 		el.style.top = numberToPixels(top);
26 | 		el.style.width = numberToPixels(width);
27 | 		el.style.height = numberToPixels(height);
28 | 	}
29 | };
30 | 
31 | const setVisibility = (visible: boolean): void => {
32 | 	if (GlTemplate.value) {
33 | 		const el = GlTemplate.value as HTMLElement;
34 | 		if (visible) {
35 | 			el.style.display = "";
36 | 		} else {
37 | 			el.style.display = "none";
38 | 		}
39 | 	}
40 | };
41 | 
42 | const setZIndex = (value: string): void => {
43 | 	if (GlTemplate.value) {
44 | 		const el = GlTemplate.value as HTMLElement;
45 | 		el.style.zIndex = value;
46 | 	}
47 | };
48 | 
49 | defineExpose({
50 | 	setPosAndSize,
51 | 	setVisibility,
52 | 	setZIndex,
53 | });
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition: color 0.5s, background-color 0.5s;
66 |   line-height: 1.6;
67 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 |   font-size: 15px;
70 |   text-rendering: optimizeLegibility;
71 |   -webkit-font-smoothing: antialiased;
72 |   -moz-osx-font-smoothing: grayscale;
73 | }
74 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<header>
  3 | 		<div class="wrapper">
  4 | 			<nav>
  5 | 				<RouterLink to="/home">Home</RouterLink>
  6 | 				<RouterLink to="/about">About</RouterLink>
  7 | 			</nav>
  8 | 		</div>
  9 | 	</header>
 10 | 
 11 | 	<div class="full-height">
 12 | 		
 13 | 		<div id="nav" style="height: 90px">
 14 | 			<h1 style="margin: 0">Golden Layout Demo</h1>
 15 | 			<button @click="onClickInitLayoutMinRow">Init Layout MinRow</button>
 16 | 			<div style="width: 20px; display: inline-block"></div>
 17 | 			<button @click="onClickAddGlComponent1">
 18 | 				Add Simple Component
 19 | 			</button>
 20 | 			<button @click="onClickAddGlComponent2">
 21 | 				Add Widest Component
 22 | 			</button>
 23 | 			<button @click="onClickAddGlComponent3">
 24 | 				Add Highest Component
 25 | 			</button>
 26 | 			<div style="width: 20px; display: inline-block"></div>
 27 | 			<button @click="onClickSaveLayout">Save Layout</button>
 28 | 			<div style="width: 20px; display: inline-block"></div>
 29 | 			<button @click="onClickLoadLayout">Load Layout</button>
 30 | 		</div>
 31 | 		<golden-layout
 32 | 		:router="true"
 33 | 			ref="GLayoutRoot"
 34 | 			:config="prefinedLayouts.miniRow"
 35 | 			style="width: 100%; height: calc(100% - 162px)"
 36 | 		>
 37 | 			<template #Content1="{ abc }">
 38 | 				<div style="color: white">{{abc || 111}}</div>
 39 | 			</template>
 40 | 			<template #Content2>
 41 | 				<div style="width: 100%; color: white; overflow: auto">
 42 | 					111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000111222333444555666777888999000
 43 | 				</div>
 44 | 			</template>
 45 | 			<template #Content3>
 46 | 				<c3 />
 47 | 			</template>
 48 | 		</golden-layout>
 49 | 	</div>
 50 | </template>
 51 | 
 52 | <script setup lang="ts">
 53 | import { RouterLink, RouterView } from 'vue-router'
 54 | import { ref } from "vue";
 55 | import { prefinedLayouts } from "@/ts/predefined-layouts";
 56 | import C3 from "@/components/Content3.vue";
 57 | import { GoldenLayout } from './components/index';
 58 | 
 59 | const GLayoutRoot = ref<null | typeof GoldenLayout>(null);
 60 | const onClickInitLayoutMinRow = () => {
 61 | 	if (!GLayoutRoot.value) return;
 62 | 	GLayoutRoot.value.loadGLLayout(prefinedLayouts.miniRow);
 63 | };
 64 | 
 65 | const onClickAddGlComponent1 = () => {
 66 | 	if (!GLayoutRoot.value) return;
 67 | 	GLayoutRoot.value.addGlComponent("Content1", "Title 1st");
 68 | };
 69 | 
 70 | const onClickAddGlComponent2 = () => {
 71 | 	if (!GLayoutRoot.value) return;
 72 | 	GLayoutRoot.value.addGlComponent("Content2", "I'm wide");
 73 | };
 74 | 
 75 | const onClickAddGlComponent3 = () => {
 76 | 	if (!GLayoutRoot.value) return;
 77 | 	GLayoutRoot.value.addGlComponent("Content3", "I'm high");
 78 | };
 79 | 
 80 | const onClickSaveLayout = () => {
 81 | 	if (!GLayoutRoot.value) return;
 82 | 	const config = GLayoutRoot.value.getLayoutConfig();
 83 | 	localStorage.setItem("gl_config", JSON.stringify(config));
 84 | };
 85 | 
 86 | const onClickLoadLayout = () => {
 87 | 	const str = localStorage.getItem("gl_config");
 88 | 	if (!str) return;
 89 | 	if (!GLayoutRoot.value) return;
 90 | 	const config = JSON.parse(str as string);
 91 | 	GLayoutRoot.value.loadGLLayout(config);
 92 | };
 93 | </script>
 94 | 
 95 | <style scoped>
 96 | header {
 97 | 	line-height: 1.5;
 98 | 	max-height: 100vh;
 99 | }
100 | 
101 | .logo {
102 | 	display: block;
103 | 	margin: 0 auto 2rem;
104 | }
105 | 
106 | nav {
107 | 	width: 100%;
108 | 	font-size: 12px;
109 | 	text-align: center;
110 | 	margin-top: 2rem;
111 | }
112 | 
113 | nav a.router-link-exact-active {
114 | 	color: var(--color-text);
115 | }
116 | 
117 | nav a.router-link-exact-active:hover {
118 | 	background-color: transparent;
119 | }
120 | 
121 | nav a {
122 | 	display: inline-block;
123 | 	padding: 0 1rem;
124 | 	border-left: 1px solid var(--color-border);
125 | }
126 | 
127 | nav a:first-of-type {
128 | 	border: 0;
129 | }
130 | 
131 | @media (min-width: 1024px) {
132 | 	header {
133 | 		place-items: center;
134 | 		padding-right: calc(var(--section-gap) / 2);
135 | 	}
136 | 
137 | 	.logo {
138 | 		margin: 0 2rem 0 0;
139 | 	}
140 | 
141 | 	header .wrapper {
142 | 		display: flex;
143 | 		place-items: flex-start;
144 | 		flex-wrap: wrap;
145 | 	}
146 | 
147 | 	nav {
148 | 		text-align: left;
149 | 		margin-left: -1rem;
150 | 		font-size: 1rem;
151 | 
152 | 		padding: 1rem 0;
153 | 		margin-top: 1rem;
154 | 	}
155 | }
156 | </style>
157 | ./components


--------------------------------------------------------------------------------
/src/components/GoldenLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div style="position: relative">
  3 | 		<SlotExtr ref="predef">
  4 | 			<template v-if="props.router" #route="{ url }">
  5 | 				<FixedRoute :route="url" />
  6 | 			</template>
  7 | 		</SlotExtr>
  8 | 		<div ref="GLRoot" style="position: absolute; width: 100%; height: 100%">
  9 | 			<!-- Root dom for Golden-Layout manager -->
 10 | 		</div>
 11 | 		<div style="position: absolute; width: 100%; height: 100%">
 12 | 			<gl-template
 13 | 				v-for="pair in AllComponents"
 14 | 				:key="pair[0]"
 15 | 				:ref="GlcKeyPrefix + pair[0]"
 16 | 			>
 17 | 				<component :is="pair[1]"></component>
 18 | 			</gl-template>
 19 | 		</div>
 20 | 	</div>
 21 | </template>
 22 | 
 23 | <script setup lang="ts">
 24 | import {
 25 | 	onMounted,
 26 | 	ref,
 27 | 	readonly,
 28 | 	nextTick,
 29 | 	getCurrentInstance,
 30 | 	provide,
 31 | 	type PropType,
 32 | 	type Slots
 33 | } from "vue";
 34 | import {
 35 | 	ComponentContainer,
 36 | 	type Json,
 37 | 	LayoutConfig,
 38 | 	RowOrColumnItemConfig,
 39 | 	type StackItemConfig,
 40 | 	ComponentItemConfig,
 41 | 	ResolvedComponentItemConfig,
 42 | 	LogicalZIndex,
 43 | 	VirtualLayout,
 44 | 	ResolvedLayoutConfig,
 45 | 	JsonValue,
 46 | ComponentItem,
 47 | } from "golden-layout";
 48 | import GlTemplate from "@/components/GlTemplate.vue";
 49 | import { layoutKey } from "./consts";
 50 | import { useRouter, type RouteLocation, useRoute } from 'vue-router';
 51 | import SlotExtr from "./utils/SlotExtr.vue";
 52 | import FixedRoute from './utils/FixedRoute.vue';
 53 | 
 54 | type AnyItemConfigs = 
 55 | 		RowOrColumnItemConfig[] |
 56 | 		StackItemConfig[] |
 57 | 		ComponentItemConfig[];
 58 | 
 59 | /*******************
 60 |  * Prop
 61 |  *******************/
 62 | const
 63 | 	props = defineProps({
 64 | 		config: {
 65 | 			type: Object as PropType<LayoutConfig | ResolvedLayoutConfig>,
 66 | 			default: ()=> ({}),
 67 | 		},
 68 | 		router: {
 69 | 			type: Boolean,
 70 | 			default: false
 71 | 		}
 72 | 	}),
 73 | /*******************
 74 |  * Data
 75 |  *******************/
 76 | 	GLRoot = ref<null | HTMLElement>(null),
 77 | 	GlcKeyPrefix = readonly(ref("glc_")),
 78 | 	MapComponents = new Map<
 79 | 		ComponentContainer,
 80 | 		{ refId: number; glc: typeof GlTemplate }
 81 | 	>(),
 82 | 	AllComponents = ref(new Map<number, any>()),
 83 | 	UnusedIndexes: number[] = [],
 84 | 	instance = getCurrentInstance(),
 85 | 	slots = instance!.slots,
 86 | 	predef = ref<typeof SlotExtr>(),
 87 | 	routeChildren = <Record<string,number>>{},
 88 | 	router = useRouter();
 89 | let GLayout: VirtualLayout;
 90 | 
 91 | if(props.router)
 92 | 	router.afterEach((route: RouteLocation)=> {
 93 | 		const url = route.fullPath;
 94 | 		if(url && url !== '/') {
 95 | 			if(routeChildren[url]) {
 96 | 				const cntnr = Array.from(MapComponents.entries()).find(([key, value])=> value.refId === routeChildren[route.fullPath])?.[0];
 97 | 				if(cntnr) cntnr.focus(true);
 98 | 			} else
 99 | 				addGlComponent(
100 | 					'route',
101 | 					<string>(route.meta.title || route.name) || route.path.split('/').pop() || '[Route]',
102 | 					{url}
103 | 				);
104 | 		}
105 | 	});
106 | 
107 | let CurIndex = 0;
108 | let GlBoundingClientRect: DOMRect;
109 | provide(layoutKey, instance?.exposed);
110 | /*******************
111 |  * Method
112 |  *******************/
113 | /** @internal */
114 | const addComponent = async (componentType: string, componentState: JsonValue|undefined) => {
115 | 	const glc = slots[componentType] || (<Slots>predef.value?.slots)[componentType];
116 | 	if(!glc) throw new Error(`addComponent: Component '${componentType}' not found in slots`)
117 | 	let index = CurIndex;
118 | 	if (UnusedIndexes.length > 0) index = UnusedIndexes.pop() as number;
119 | 	else CurIndex++;
120 | 	AllComponents.value.set(index, ()=> glc(componentState));
121 | 
122 | 	if(props.router && componentType === 'route') {
123 | 		routeChildren[(<{url: string}>componentState).url] = index;
124 | 	}
125 | 	return index;
126 | };
127 | 
128 | const addGlComponent = async (componentType: string, title: string, componentState: JsonValue|undefined = undefined) => {
129 | 	if (componentType.length == 0)
130 | 		throw new Error("addGlComponent: Component's type is empty");
131 | 
132 | 	const index = await addComponent(componentType, componentState);
133 | 
134 | 	await nextTick(); // wait 1 tick for vue to add the dom
135 | 
136 | 	GLayout.addComponent(componentType, { refId: index, ...((componentState as object)||{}) }, title);
137 | };
138 | 
139 | const loadGLLayout = async (
140 | 	layoutConfig: LayoutConfig | ResolvedLayoutConfig
141 | ) => {
142 | 	GLayout.clear();
143 | 	AllComponents.value.clear();
144 | 	
145 | 	const config = (
146 | 		(layoutConfig as ResolvedLayoutConfig).resolved
147 | 			? LayoutConfig.fromResolved(layoutConfig as ResolvedLayoutConfig)
148 | 			: layoutConfig
149 | 	) as LayoutConfig;
150 | 
151 | 	let contents: AnyItemConfigs[] = [config.root!.content as AnyItemConfigs];
152 | 
153 | 	let index = 0;
154 | 	while (contents.length > 0) {
155 | 		const content = contents.shift() as AnyItemConfigs;
156 | 		for (let itemConfig of content) {
157 | 			if (itemConfig.type == "component") {
158 | 				index = await addComponent(
159 | 					itemConfig.componentType as string,
160 | 					itemConfig.componentState
161 | 				);
162 | 				if (typeof itemConfig.componentState == "object")
163 | 					(itemConfig.componentState as Json)!.refId = index;
164 | 				else itemConfig.componentState = { refId: index };
165 | 			} else if (itemConfig.content.length > 0) {
166 | 				contents.push(
167 | 					itemConfig.content as AnyItemConfigs
168 | 				);
169 | 			}
170 | 		}
171 | 	}
172 | 
173 | 	await nextTick(); // wait 1 tick for vue to add the dom
174 | 
175 | 	GLayout.loadLayout(config);
176 | };
177 | 
178 | const getLayoutConfig = () => {
179 | 	return GLayout.saveLayout();
180 | };
181 | 
182 | /*******************
183 |  * Mount
184 |  *******************/
185 | onMounted(() => {
186 | 	if (GLRoot.value == null)
187 | 		throw new Error("Golden Layout can't find the root DOM!");
188 | 
189 | 	const onResize = () => {
190 | 		const dom = GLRoot.value;
191 | 		let width = dom ? dom.offsetWidth : 0;
192 | 		let height = dom ? dom.offsetHeight : 0;
193 | 		GLayout.setSize(width, height);
194 | 	};
195 | 
196 | 	window.addEventListener("resize", onResize, { passive: true });
197 | 
198 | 	const handleBeforeVirtualRectingEvent = (count: number) => {
199 | 		GlBoundingClientRect = (
200 | 			GLRoot.value as HTMLElement
201 | 		).getBoundingClientRect();
202 | 	};
203 | 
204 | 	const handleContainerVirtualRectingRequiredEvent = (
205 | 		container: ComponentContainer,
206 | 		width: number,
207 | 		height: number
208 | 	): void => {
209 | 		const component = MapComponents.get(container);
210 | 		if (!component || !component?.glc) {
211 | 			throw new Error(
212 | 				"handleContainerVirtualRectingRequiredEvent: Component not found"
213 | 			);
214 | 		}
215 | 
216 | 		const containerBoundingClientRect =
217 | 			container.element.getBoundingClientRect();
218 | 		const left =
219 | 			containerBoundingClientRect.left - GlBoundingClientRect.left;
220 | 		const top = containerBoundingClientRect.top - GlBoundingClientRect.top;
221 | 		component.glc.setPosAndSize(left, top, width, height);
222 | 	};
223 | 
224 | 	const handleContainerVirtualVisibilityChangeRequiredEvent = (
225 | 		container: ComponentContainer,
226 | 		visible: boolean
227 | 	): void => {
228 | 		const component = MapComponents.get(container);
229 | 		if (!component || !component?.glc) {
230 | 			throw new Error(
231 | 				"handleContainerVirtualVisibilityChangeRequiredEvent: Component not found"
232 | 			);
233 | 		}
234 | 
235 | 		component.glc.setVisibility(visible);
236 | 	};
237 | 
238 | 	const handleContainerVirtualZIndexChangeRequiredEvent = (
239 | 		container: ComponentContainer,
240 | 		logicalZIndex: LogicalZIndex,
241 | 		defaultZIndex: string
242 | 	): void => {
243 | 		const component = MapComponents.get(container);
244 | 		if (!component || !component?.glc) {
245 | 			throw new Error(
246 | 				"handleContainerVirtualZIndexChangeRequiredEvent: Component not found"
247 | 			);
248 | 		}
249 | 
250 | 		component.glc.setZIndex(defaultZIndex);
251 | 	};
252 | 
253 | 	const bindComponentEventListener = (
254 | 		container: ComponentContainer,
255 | 		itemConfig: ResolvedComponentItemConfig
256 | 	): ComponentContainer.BindableComponent => {
257 | 		let refId = -1;
258 | 		if (itemConfig && itemConfig.componentState) {
259 | 			refId = (itemConfig.componentState as Json).refId as number;
260 | 		} else {
261 | 			throw new Error(
262 | 				"bindComponentEventListener: component's ref id is required"
263 | 			);
264 | 		}
265 | 
266 | 		const ref = GlcKeyPrefix.value + refId;
267 | 		const component = instance?.refs[ref] as typeof GlTemplate;
268 | 
269 | 		MapComponents.set(container, { refId, glc: component[0] });
270 | 
271 | 		container.virtualRectingRequiredEvent = (container, width, height) =>
272 | 			handleContainerVirtualRectingRequiredEvent(
273 | 				container,
274 | 				width,
275 | 				height
276 | 			);
277 | 
278 | 		container.virtualVisibilityChangeRequiredEvent = (container, visible) =>
279 | 			handleContainerVirtualVisibilityChangeRequiredEvent(
280 | 				container,
281 | 				visible
282 | 			);
283 | 
284 | 		container.virtualZIndexChangeRequiredEvent = (
285 | 			container,
286 | 			logicalZIndex,
287 | 			defaultZIndex
288 | 		) =>
289 | 			handleContainerVirtualZIndexChangeRequiredEvent(
290 | 				container,
291 | 				logicalZIndex,
292 | 				defaultZIndex
293 | 			);
294 | 		return {
295 | 			component,
296 | 			virtual: true,
297 | 		};
298 | 	};
299 | 
300 | 	const unbindComponentEventListener = (
301 | 		container: ComponentContainer
302 | 	): void => {
303 | 		const component = MapComponents.get(container);
304 | 		if (!component || !component?.glc) {
305 | 			throw new Error("handleUnbindComponentEvent: Component not found");
306 | 		}
307 | 
308 | 		MapComponents.delete(container);
309 | 		AllComponents.value.delete(component.refId);
310 | 		UnusedIndexes.push(component.refId);
311 | 		Object.entries(routeChildren).find(([key, value])=> {
312 | 			if(value === component.refId) {
313 | 				delete routeChildren[key];
314 | 				return true;
315 | 			}
316 | 			return false;
317 | 		});
318 | 	};
319 | 
320 | 	GLayout = new VirtualLayout(
321 | 		GLRoot.value as HTMLElement,
322 | 		bindComponentEventListener,
323 | 		unbindComponentEventListener
324 | 	);
325 | 	if(props.router) GLayout.on('activeContentItemChanged', (ci: ComponentItem)=> {
326 | 		let url = ci.componentType === 'route' ? (<{url: string}>ci.container.state)?.url : '/';
327 | 		if(router.currentRoute.value.fullPath !== url)
328 | 			router.replace(url);
329 | 	});
330 | 	GLayout.beforeVirtualRectingEvent = handleBeforeVirtualRectingEvent;
331 | 	if(props.config) loadGLLayout(props.config);
332 | });
333 | 
334 | const components = ref<Record<string, any>>({});
335 | 
336 | /*******************
337 |  * Expose
338 |  *******************/
339 | defineExpose({
340 | 	addGlComponent,
341 | 	loadGLLayout,
342 | 	getLayoutConfig
343 | });
344 | </script>
345 | 


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