80 lines
3.2 KiB
Vue
80 lines
3.2 KiB
Vue
<template>
|
|
<div>{{ widgetData.name }}</div>
|
|
<div class="widget-row">
|
|
<template v-for="(component, index) in widgetData.widgets" :key="index">
|
|
<!-- TODO: Use `<component :is="" v-bind="attributesObject"></component>` to avoid all the separate components with `v-if` -->
|
|
<PopoverButton v-if="component.kind === 'PopoverButton'">
|
|
<h3>{{ component.props.title }}</h3>
|
|
<p>{{ component.props.text }}</p>
|
|
</PopoverButton>
|
|
<NumberInput
|
|
v-if="component.kind === 'NumberInput'"
|
|
v-bind="component.props"
|
|
@update:value="(value: number) => updateLayout(component.widget_id, value)"
|
|
:incrementCallbackIncrease="() => updateLayout(component.widget_id, 'Increment')"
|
|
:incrementCallbackDecrease="() => updateLayout(component.widget_id, 'Decrement')"
|
|
/>
|
|
<TextInput v-if="component.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widget_id, value)" />
|
|
<ColorInput v-if="component.kind === 'ColorInput'" v-bind="component.props" @update:value="(value: string) => updateLayout(component.widget_id, value)" />
|
|
<IconButton v-if="component.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widget_id, null)" />
|
|
<OptionalInput v-if="component.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widget_id, value)" />
|
|
<RadioInput v-if="component.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widget_id, value)" />
|
|
<Separator v-if="component.kind === 'Separator'" v-bind="component.props" />
|
|
<TextLabel v-if="component.kind === 'TextLabel'" v-bind="component.props">{{ component.props.value }}</TextLabel>
|
|
<IconLabel v-if="component.kind === 'IconLabel'" v-bind="component.props" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.widget-row {
|
|
height: 32px;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from "vue";
|
|
|
|
import { WidgetRow } from "@/dispatcher/js-messages";
|
|
|
|
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
|
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
|
|
import ColorInput from "@/components/widgets/inputs/ColorInput.vue";
|
|
import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
|
|
import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
|
|
import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
|
|
import TextInput from "@/components/widgets/inputs/TextInput.vue";
|
|
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
|
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
|
import Separator from "@/components/widgets/separators/Separator.vue";
|
|
|
|
export default defineComponent({
|
|
inject: ["editor"],
|
|
props: {
|
|
widgetData: { type: Object as PropType<WidgetRow>, required: true },
|
|
layoutTarget: { required: true },
|
|
},
|
|
methods: {
|
|
updateLayout(widgetId: BigInt, value: unknown) {
|
|
this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
|
|
},
|
|
},
|
|
components: {
|
|
Separator,
|
|
PopoverButton,
|
|
NumberInput,
|
|
TextInput,
|
|
IconButton,
|
|
OptionalInput,
|
|
RadioInput,
|
|
TextLabel,
|
|
IconLabel,
|
|
ColorInput,
|
|
},
|
|
});
|
|
</script>
|
|
|