Creating New Customization Inputs

Overview

Customization input components are designed to handle a specific visualization customization property and save these inputs in the VizWizStore.

Create New Input

1. Set a default value for the input in a local ref
2. Create a watch for changes to the input value to update the VizWizStore
3. Setup onMounted to load a saved value (if applicable in "edit visualization") from the VizWizStore
4. Create the actual input component in the component template

Input Validation

Input validation may not be required for the component if a value is always selected (i.e. it cannot be set to empty). However, if validation is required it should be handled by the useComponentValidation hook with defined VisualizationComponentEmits emits.

const emit = defineEmits<VisualizationComponentEmits>()
useComponentValidation(valid, emit) // Assume valid = computed boolean of validation state

Example Customization Input Component

Below is the BackgroundColorControl.vue to configure background color:

<script setup lang="ts">
import { watch, ref, onMounted } from 'vue';
import { useVizWizStore } from '@/stores/vizwizstore';

const vwStore = useVizWizStore();
const backgroundColor = ref<string>('#ff0000ff');

watch(backgroundColor, (val) => {
  vwStore.updateVisualizationCustomizationOptions({ backgroundColor: val });
});

onMounted(() => {
  if (!vwStore.visualizationCustomizationOptions.backgroundColor) {
    vwStore.updateVisualizationCustomizationOptions({
      backgroundColor: backgroundColor.value,
    });
  } else {
    backgroundColor.value = vwStore.visualizationCustomizationOptions.backgroundColor
  }
});

</script>
<template>
  <h3>Background Color</h3>
  <v-color-picker style="margin: auto" v-model="backgroundColor" mode="rgba"> </v-color-picker>
</template>