Git Product home page Git Product logo

v3-gl-ext's Introduction

v3-gl-ext

Vue3 golden layout and extensions - successor of vue-golden-layout

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Usage

<template>
	<golden-layout :router="true" :config="layoutConfig">
		<template #myTemplate>
			...
		</template>
	</golden-layout>
</template>
<script lang="ts">
	import { GoldenLayout } from "v3-gl-ext";
	const layoutconfig = {
		root: {
			type: "component",
			title: "One tab",
			header: { show: "top" },
			isClosable: false,
			componentType: "myTemplate"
		}
	};
</script>

Properties

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.

TODOs

  • Config watching through property
  • Route sub-components
  • Route whole config (adds in the column/row instead of the stack)

v3-gl-ext's People

Contributors

eddow avatar

Stargazers

Sam Wray avatar avatar avatar Tianrun Qiu / Roderick avatar avatar zane.deng avatar avatar Igor Cotruta avatar hoangitk avatar Oleksii Halahan avatar 百年老妖 avatar

Watchers

avatar

Forkers

juniar-rakhman extremlapin

v3-gl-ext's Issues

src/components/main.ts is missing

Hello,

src/components/main.ts is missing from the repository.

installed it using npm install emedware/v3-gl-ext

PS D:\golden layout\node_modules\v3-gl-ext> npm run build

> [email protected] build
> run-p type-check build-only


> [email protected] type-check
> vue-tsc --noEmit -p tsconfig.app.json --composite false


> [email protected] build-only
> vite build

vite v4.5.1 building for production...
✓ 0 modules transformed.
✓ built in 118ms
Could not resolve entry module "src/components/main.ts".
error during build:
RollupError: Could not resolve entry module "src/components/main.ts".
    at error (file:///D:/golden%20layout/node_modules/v3-gl-ext/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at ModuleLoader.loadEntryModule (file:///D:/golden%20layout/node_modules/v3-gl-ext/node_modules/rollup/dist/es/shared/node-entry.js:24881:20)
    at async Promise.all (index 0)
ERROR: "build-only" exited with 1.

VueJS update (which one???) breaks default param for addGlComponent and abc example

If your code, you create a new component with the code

const onClickAddGlComponent1 = () => {
	if (!GLayoutRoot.value) return;
	GLayoutRoot.value.addGlComponent("Content1", "Title 1st");
};

Please not it has no abc arg like GLayoutRoot.value.addGlComponent("Content1", "Title 1st", { abc: "Yhea" });

In your code, you handle it this way, if there is no abc arg, fallback to 111

			<template #Content1="{ abc }">
				<div style="color: white">{{abc || 111}}</div>
			</template>

However it fails with an error, it fails at creating the tab :

Uncaught (in promise) TypeError: (destructured parameter) is undefined
    Content1 App.vue:38
    renderFnWithContext runtime-core.esm-bundler.js:766
    addComponent GoldenLayout.vue:120
    renderComponentRoot runtime-core.esm-bundler.js:843
    componentUpdateFn runtime-core.esm-bundler.js:5701
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    setupRenderEffect runtime-core.esm-bundler.js:5822
    mountComponent runtime-core.esm-bundler.js:5612
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    mountChildren runtime-core.esm-bundler.js:5284
    processFragment runtime-core.esm-bundler.js:5499
    patch runtime-core.esm-bundler.js:5014
    mountChildren runtime-core.esm-bundler.js:5284
    mountElement runtime-core.esm-bundler.js:5191
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    componentUpdateFn runtime-core.esm-bundler.js:5708
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    setupRenderEffect runtime-core.esm-bundler.js:5822
    mountComponent runtime-core.esm-bundler.js:5612
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    patchKeyedChildren runtime-core.esm-bundler.js:6007
    patchChildren runtime-core.esm-bundler.js:5842
    processFragment runtime-core.esm-bundler.js:5539
    patch runtime-core.esm-bundler.js:5014
    patchBlockChildren runtime-core.esm-bundler.js:5427
    patchElement runtime-core.esm-bundler.js:5319
    processElement runtime-core.esm-bundler.js:5167
    patch runtime-core.esm-bundler.js:5028
    componentUpdateFn runtime-core.esm-bundler.js:5773
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:357
[App.vue:38:50](http://localhost:5173/src/App.vue)
Uncaught (in promise) TypeError: component is undefined
    bindComponentEventListener GoldenLayout.vue:269
    bindComponent virtual-layout.ts:216
    ComponentContainer component-container.ts:96
    ComponentItem component-item.ts:64
    createContentItemFromConfig layout-manager.ts:1065
    createContentItem layout-manager.ts:745
    createAndInitContentItem layout-manager.ts:694
    addItem stack.ts:285
    addItemAtLocation layout-manager.ts:586
    addComponentAtLocation layout-manager.ts:485
    addComponent layout-manager.ts:458
    addGlComponent GoldenLayout.vue:136
    onClickAddGlComponent1 App.vue:67
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    invoker runtime-dom.esm-bundler.js:278
    addEventListener runtime-dom.esm-bundler.js:233
    patchEvent runtime-dom.esm-bundler.js:247
    patchProp runtime-dom.esm-bundler.js:310
    mountElement runtime-core.esm-bundler.js:5209
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    mountChildren runtime-core.esm-bundler.js:5284
    mountElement runtime-core.esm-bundler.js:5191
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    mountChildren runtime-core.esm-bundler.js:5284
    mountElement runtime-core.esm-bundler.js:5191
    processElement runtime-core.esm-bundler.js:5156
    patch runtime-core.esm-bundler.js:5028
    mountChildren runtime-core.esm-bundler.js:5284
    processFragment runtime-core.esm-bundler.js:5499
    patch runtime-core.esm-bundler.js:5014
    componentUpdateFn runtime-core.esm-bundler.js:5708
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    setupRenderEffect runtime-core.esm-bundler.js:5822
    mountComponent runtime-core.esm-bundler.js:5612
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    render2 runtime-core.esm-bundler.js:6332
    reload runtime-core.esm-bundler.js:3818
    reload runtime-core.esm-bundler.js:466
    tryWrap runtime-core.esm-bundler.js:494
    <anonymous> App.vue:179
    accept client.ts:542
    fetchUpdate client.ts:459
    queueUpdate client.ts:306
    queueUpdate client.ts:306
    handleMessage client.ts:159
    handleMessage client.ts:157
    setupWebSocket client.ts:90
    setupWebSocket client.ts:89
    <anonymous> client.ts:67

Adding the abc param to the functions fixes it, but it sound like a dirty patch, do you know a way to fix it ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.