63 lines
2.4 KiB
Vue
63 lines
2.4 KiB
Vue
<template>
|
|
<component
|
|
:is="widgetComponent"
|
|
:widget="widget"
|
|
:scale="scale"
|
|
:selected="selected"
|
|
@select="$emit('select')"
|
|
@drag-start="$emit('drag-start', $event)"
|
|
@resize-start="$emit('resize-start', $event)"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, markRaw } from 'vue';
|
|
import { WIDGET_TYPES } from '../constants';
|
|
|
|
// Import all widget element components
|
|
import LabelElement from './widgets/elements/LabelElement.vue';
|
|
import ButtonElement from './widgets/elements/ButtonElement.vue';
|
|
import LedElement from './widgets/elements/LedElement.vue';
|
|
import IconElement from './widgets/elements/IconElement.vue';
|
|
import TabViewElement from './widgets/elements/TabViewElement.vue';
|
|
import TabPageElement from './widgets/elements/TabPageElement.vue';
|
|
import PowerFlowElement from './widgets/elements/PowerFlowElement.vue';
|
|
import PowerNodeElement from './widgets/elements/PowerNodeElement.vue';
|
|
import ChartElement from './widgets/elements/ChartElement.vue';
|
|
import ClockElement from './widgets/elements/ClockElement.vue';
|
|
import RoomCardElement from './widgets/elements/RoomCardElement.vue';
|
|
import RectangleElement from './widgets/elements/RectangleElement.vue';
|
|
import ArcElement from './widgets/elements/ArcElement.vue';
|
|
import ButtonMatrixElement from './widgets/elements/ButtonMatrixElement.vue';
|
|
|
|
const props = defineProps({
|
|
widget: { type: Object, required: true },
|
|
scale: { type: Number, default: 1 },
|
|
selected: { type: Boolean, default: false }
|
|
});
|
|
|
|
defineEmits(['select', 'drag-start', 'resize-start']);
|
|
|
|
// Map widget types to components
|
|
const componentMap = {
|
|
[WIDGET_TYPES.LABEL]: markRaw(LabelElement),
|
|
[WIDGET_TYPES.BUTTON]: markRaw(ButtonElement),
|
|
[WIDGET_TYPES.LED]: markRaw(LedElement),
|
|
[WIDGET_TYPES.ICON]: markRaw(IconElement),
|
|
[WIDGET_TYPES.TABVIEW]: markRaw(TabViewElement),
|
|
[WIDGET_TYPES.TABPAGE]: markRaw(TabPageElement),
|
|
[WIDGET_TYPES.POWERFLOW]: markRaw(PowerFlowElement),
|
|
[WIDGET_TYPES.POWERNODE]: markRaw(PowerNodeElement),
|
|
[WIDGET_TYPES.CHART]: markRaw(ChartElement),
|
|
[WIDGET_TYPES.CLOCK]: markRaw(ClockElement),
|
|
[WIDGET_TYPES.ROOMCARD]: markRaw(RoomCardElement),
|
|
[WIDGET_TYPES.RECTANGLE]: markRaw(RectangleElement),
|
|
[WIDGET_TYPES.ARC]: markRaw(ArcElement),
|
|
[WIDGET_TYPES.BUTTONMATRIX]: markRaw(ButtonMatrixElement)
|
|
};
|
|
|
|
const widgetComponent = computed(() => {
|
|
return componentMap[props.widget.type] || LabelElement;
|
|
});
|
|
</script>
|