67 lines
2.9 KiB
Vue
67 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Icon -->
|
|
<h4 :class="headingClass">Icon</h4>
|
|
<div :class="rowClass">
|
|
<label :class="labelClass">Icon</label>
|
|
<button :class="iconSelectClass" @click="$emit('open-icon-picker')">
|
|
<span v-if="widget.iconCodepoint" class="material-symbols-outlined text-[20px]">{{ String.fromCodePoint(widget.iconCodepoint) }}</span>
|
|
<span v-else>Auswaehlen</span>
|
|
</button>
|
|
</div>
|
|
<div :class="rowClass">
|
|
<label :class="labelClass">Groesse</label>
|
|
<select :class="inputClass" v-model.number="widget.iconSize">
|
|
<option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }}</option>
|
|
</select>
|
|
</div>
|
|
<div :class="rowClass"><label :class="labelClass">Modus</label>
|
|
<select :class="inputClass" v-model.number="widget.textSrc">
|
|
<optgroup v-for="group in groupedSources(sourceOptions.icon)" :key="group.label" :label="group.label">
|
|
<option v-for="opt in group.values" :key="opt" :value="opt">{{ textSources[opt] }}</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div v-if="widget.textSrc === 2" :class="rowClass">
|
|
<label :class="labelClass">KNX Objekt</label>
|
|
<select :class="inputClass" v-model.number="widget.knxAddr">
|
|
<option :value="0">-- Waehlen --</option>
|
|
<option v-for="addr in store.knxAddresses" :key="`${addr.addr}-${addr.index}`" :value="addr.addr">
|
|
GA {{ addr.addrStr }} (GO{{ addr.index }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Style -->
|
|
<h4 :class="headingClass">Stil</h4>
|
|
<div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.textColor"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Hintergrund</label><input :class="colorInputClass" type="color" v-model="widget.bgColor"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.bgOpacity"></div>
|
|
<div :class="rowClass"><label :class="labelClass">Radius</label><input :class="inputClass" type="number" v-model.number="widget.radius"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useEditorStore } from '../../../stores/editor';
|
|
import { sourceOptions, textSources, textSourceGroups, fontSizes } from '../../../constants';
|
|
import { rowClass, labelClass, inputClass, headingClass, iconSelectClass, colorInputClass } from '../shared/styles';
|
|
|
|
defineProps({
|
|
widget: { type: Object, required: true }
|
|
});
|
|
|
|
defineEmits(['open-icon-picker']);
|
|
|
|
const store = useEditorStore();
|
|
|
|
function groupedSources(options) {
|
|
const allowed = new Set(options || []);
|
|
return textSourceGroups
|
|
.map((group) => ({
|
|
label: group.label,
|
|
values: group.values.filter((value) => allowed.has(value))
|
|
}))
|
|
.filter((group) => group.values.length > 0);
|
|
}
|
|
</script>
|