Awesome
vue3 lumino widget
![downloads](https://img.shields.io/npm/dm/vue3-lumino-widget.svg)
A Vue.js wrapper for jupyter lumino package
Getting Started
Install vue3-lumino-widget
with npm:
npm install vue3-lumino-widget
with yarn:
yarn add vue3-lumino-widget
Usage
Import the component or register it globally in your Vue instance:
import { LuminoBoxPanel, LuminoWidget } from "vue3-lumino-widget"
Use the component in your template:
<template>
<div class="container">
<h4>Vue3 Lumino Widget</h4>
<h6>BoxPanel with dock layout Drag and drop the tab item</h6>
<h6>Current active: {{ active?.item.name || 'none' }}</h6>
<LuminoBoxPanel>
<LuminoWidget v-for="item in items"
:key="item.id"
@close="onWidgetInBoxPanelClose"
@active="onWidgetInBoxPanelActive"
@show="onWidgetInBoxPanelShow"
:title-active-class="activeClass"
:closable="item.closable"
:item="item">
<p class="item-component">{{ item.name }}</p>
</LuminoWidget>
</LuminoBoxPanel>
<h6>TabPanel</h6>
<LuminoTabPanel>
<LuminoWidget v-for="item in tabItems"
:key="item.id"
@close="onWidgetInTabPanelClose"
@active="onWidgetInTabPanelActive"
@show="onWidgetInTabPanelShow"
:title-active-class="activeClass"
:closable="item.closable"
:item="item">
<p class="item-component">{{ item.name }}</p>
</LuminoWidget>
</LuminoTabPanel>
</div>
</template>
<script setup lang="ts">
import LuminoBoxPanel from "./components/LuminoBoxPanel.vue"
import LuminoTabPanel from "./components/LuminoTabPanel.vue"
import LuminoWidget from "./components/LuminoWidget.vue"
import { ref } from 'vue'
import { ItemWidget, WidgetEvent } from "./components/ItemWidget"
const items = ref([
{ id: 'id1', name: 'item1', closable: false },
{ id: 'id2', name: 'item2' }
])
const tabItems = ref([
{ id: 'tid1', name: 'item1', closable: false },
{ id: 'tid2', name: 'item2' }
])
const active = ref<ItemWidget>()
const onWidgetInBoxPanelClose = ({ msg, widget, item }: WidgetEvent) => {
// do some thing, then doClose item.
widget.doClose(msg)
}
const onWidgetInBoxPanelActive = ({ msg, widget, item }: WidgetEvent) => {
active.value = widget
}
const onWidgetInBoxPanelShow = ({ msg, widget, item }: WidgetEvent) => {
active.value = widget
}
const activeClass = ref('item-active-0')
let onOff = false
setInterval(() => {
onOff = !onOff
activeClass.value = onOff ? 'item-active-0' : 'item-active-1'
}, 1000)
const activeTab = ref<ItemWidget>()
const onWidgetInTabPanelClose = ({ msg, widget, item }: WidgetEvent) => {
// do some thing, then doClose item.
widget.doClose(msg)
}
const onWidgetInTabPanelActive = ({ msg, widget, item }: WidgetEvent) => {
activeTab.value = widget
}
const onWidgetInTabPanelShow = ({ msg, widget, item }: WidgetEvent) => {
activeTab.value = widget
}
</script>
<style scoped lang="scss">
.container {
height: 100%;
display: flex;
flex-direction: column;
h4,
h6 {
margin-top: 10px;
margin-bottom: 10px;
}
:deep(.item-active-0) {
border-top: orange 2px solid;
}
:deep(.item-active-1) {
border-top: palevioletred 2px solid;
}
.item-component {
margin: 10px;
}
}
</style>