@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/projection/VcsProjection.ts.vue.d.ts

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { ProjectionOptions } from '@vcmap/core';
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ProjectionOptions>;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequestButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAlias: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<ProjectionOptions>;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequestButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAlias: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ProjectionOptions;
+    required: boolean;
+    hideRequestButton: boolean;
+    hideAlias: boolean;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/src/components/section/{VcsExpansionPanel.vue → VcsExpansionPanel.ts.vue}

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
   import {
     VExpansionPanel,
     VExpansionPanelText,
@@ -7,10 +7,12 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
+  import type { PropType } from 'vue';
   import { computed, ref, useSlots } from 'vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
   import { createEllipseTooltip } from '../composables.js';
   import { useIconSize } from '../../vuePlugins/vuetify.js';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
   const props = defineProps({
     heading: {
@@ -22,7 +24,7 @@
       default: false,
     },
     headerActions: {
-      type: Array,
+      type: Array as PropType<VcsAction[]>,
       default: () => [],
     },
     actionButtonListOverflowCount: {
@@ -33,8 +35,7 @@
   });
 
   const slots = useSlots();
-
-  const panelHeader = ref(null);
+  const panelHeader = ref<InstanceType<typeof VListItemTitle> | null>(null);
   const panelHeaderTooltip = createEllipseTooltip(
     computed(() => panelHeader.value?.$el),
     computed(() => undefined),
@@ -42,6 +43,7 @@
   );
   const iconSize = useIconSize();
 </script>
+
 <template>
   <v-expansion-panel
     :disabled="disabled"

package/src/components/section/VcsExpansionPanel.ts.vue.d.ts

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+declare var __VLS_41: {}, __VLS_55: {};
+type __VLS_Slots = {} & {
+    'header-append'?: (props: typeof __VLS_41) => any;
+} & {
+    default?: (props: typeof __VLS_55) => any;
+};
+declare const __VLS_base: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}>>, {
+    disabled: boolean;
+    actionButtonListOverflowCount: number;
+    heading: string;
+    headerActions: VcsAction[];
+}, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/src/components/section/{VcsFormSection.vue → VcsFormSection.ts.vue}

@@ -44,12 +44,14 @@
   </section>
 </template>
 
-<script>
-  import { computed, reactive, ref } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, reactive, ref } from 'vue';
   import { VBtn, VIcon } from 'vuetify/components';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsHelp from '../notification/VcsHelp.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import VcsHelp from '../notification/VcsHelp.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
   /**
    * @description
@@ -67,7 +69,7 @@
    * @vue-prop {boolean} [startHelpOpen=false] - If help text starts open.
    * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsFormSection',
     components: {
       VBtn,
@@ -93,12 +95,11 @@
         default: false,
       },
       headerActions: {
-        type: Array,
+        type: Array as PropType<Array<VcsAction>>,
         default: () => [],
       },
       actionButtonListOverflowCount: {
         type: Number,
-        required: false,
         default: undefined,
       },
       helpText: {
@@ -118,7 +119,7 @@
         }
         return true;
       });
-      const helpAction = reactive({
+      const helpAction = reactive<VcsAction>({
         name: 'help',
         title: 'components.vcsFormSection.help',
         active: props.startHelpOpen,
@@ -128,10 +129,7 @@
         },
       });
       const showHelp = computed(() => helpAction.active);
-      /**
-       * @type {import("vue").ComputedRef<VcsAction>}
-       */
-      const actions = computed(() => {
+      const actions = computed<Array<VcsAction>>(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
           return [...props.headerActions, helpAction];
         }
@@ -148,7 +146,7 @@
         fontSize,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

package/src/components/section/VcsFormSection.ts.vue.d.ts

@@ -0,0 +1,102 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+/**
+ * @description
+ * Stylized form section with action buttons
+ * @vue-data {slot} [#header] - slot to override form section header
+ * @vue-data {slot} [#default] - slot with the section content
+ * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
+ * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+ * @vue-prop {boolean} [expandable=false] - If true, section can be toggled.
+ * @vue-prop {boolean} [startOpen=false] - If section starts open.
+ * @vue-prop {boolean} [disabled=false] - If expansion is disabled. Title is rendered in disabled style.
+ * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
+ * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
+ * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
+ * @vue-prop {boolean} [startHelpOpen=false] - If help text starts open.
+ * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<Array<VcsAction>>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    startHelpOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    open: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    showContent: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    showHelp: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean | undefined>;
+    actions: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<VcsAction[]>;
+    fontSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<Array<VcsAction>>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    startHelpOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    disabled: boolean;
+    actionButtonListOverflowCount: number;
+    heading: string;
+    headerActions: VcsAction[];
+    helpText: string;
+    expandable: boolean;
+    startOpen: boolean;
+    startHelpOpen: boolean;
+}, {}>;

package/src/components/style/{StyleMenuWrapper.vue → StyleMenuWrapper.ts.vue}

@@ -55,11 +55,11 @@
   </v-sheet>
 </template>
 
-<script>
-  import { ref, toRaw } from 'vue';
+<script lang="ts">
+  import { defineComponent, ref, toRaw } from 'vue';
   import { VSheet, VMenu, VCard } from 'vuetify/components';
-  import VcsFormSection from '../section/VcsFormSection.vue';
-  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import VcsFormSection from '../section/VcsFormSection.ts.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.ts.vue';
 
   /**
    * @description A wrapper for style components, that provides:
@@ -73,7 +73,7 @@
    * @vue-prop {Object} valueFallback - The fallback Options, in case the valueDefault is null or undefined. These are applied when the checkbox is checked again and the default value is null. The fallback value must not be null or undefined.
    * @vue-prop {boolean} [disabled=false] - Disable the input
    */
-  export default {
+  export default defineComponent({
     name: 'StyleMenuWrapper',
     components: {
       VSheet,
@@ -84,24 +84,24 @@
     },
     props: {
       modelValue: {
-        default: undefined,
         type: Object,
+        default: undefined,
       },
       valueDefault: {
-        default: undefined,
         type: Object,
+        default: undefined,
       },
       valueFallback: {
-        required: true,
         type: Object,
+        required: true,
       },
       name: {
-        required: true,
         type: String,
+        required: true,
       },
       disabled: {
-        default: false,
         type: Boolean,
+        default: false,
       },
     },
     emits: ['update:modelValue'],
@@ -110,13 +110,13 @@
 
       return {
         isMenuOpen,
-        reset() {
+        reset(): void {
           emit('update:modelValue', structuredClone(toRaw(props.valueDefault)));
         },
-        close() {
+        close(): void {
           isMenuOpen.value = false;
         },
-        handleCheckbox(value) {
+        handleCheckbox(value: boolean): void {
           emit(
             'update:modelValue',
             value
@@ -127,7 +127,7 @@
         },
       };
     },
-  };
+  });
 </script>
 
 <style scoped>

package/src/components/style/StyleMenuWrapper.ts.vue.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @description A wrapper for style components, that provides:
+ * - a 32 x 24 px preview
+ * - a checkbox that emits null when unchecked and the value of the valueDefault prop when checked again.
+ *   If the valueDefault is undefined or null, the valueFallback will be emitted.
+ * - a menu that pops up when clicking the preview. It has also a reset button that emits the value of the valueDefault prop when clicked
+ * @vue-prop {Object} [modelValue] - Style options that are modelled by the checkbox.
+ * @vue-prop {string} name - The name that is displayed in the header of the menu and in the tooltip of the preview.
+ * @vue-prop {Object} [valueDefault] - The default Options, that are applied when clicking reset or setting the checkbox from null to true.
+ * @vue-prop {Object} valueFallback - The fallback Options, in case the valueDefault is null or undefined. These are applied when the checkbox is checked again and the default value is null. The fallback value must not be null or undefined.
+ * @vue-prop {boolean} [disabled=false] - Disable the input
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueFallback: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    isMenuOpen: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    reset(): void;
+    close(): void;
+    handleCheckbox(value: boolean): void;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueFallback: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: Record<string, any>;
+    valueDefault: Record<string, any>;
+}, {}>;

package/src/components/style/VcsFeatureStyleComponent.vue

@@ -30,7 +30,7 @@
   import { inject, onUnmounted, ref, watch } from 'vue';
   import VcsVectorStyleComponent, {
     VectorStyleMenus,
-  } from './VcsVectorStyleComponent.vue';
+  } from './VcsVectorStyleComponent.ts.vue';
 
   /**
    * @typedef {Object} StyleOptions
@@ -66,6 +66,9 @@
     feature.setStyle(style);
     feature[originalStyle] = style;
     const styleOptions = getStyleOptions(style);
+    if (styleOptions.text?.text) {
+      styleOptions.label = styleOptions.text.text;
+    }
     feature[vectorStyleSymbol] = new VectorStyleItem(styleOptions);
   }
 

package/src/components/style/VcsFeatureStyleComponent.vue.d.ts

@@ -1,11 +1,19 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+export type StyleOptions = {
+    fill?: any | null | undefined;
+    stroke?: any | null | undefined;
+    image?: any | null | undefined;
+    text?: any | null | undefined;
+};
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
     featureProperties: {
         type: ObjectConstructor;
         required: true;
     };
 }, {
-    styleComponents: import("vue").Ref<never[]>;
-    styleOptions: import("vue").Ref<{
+    styleComponents: import("vue", { with: { "resolution-mode": "import" } }).Ref<never[]>;
+    styleOptions: import("vue", { with: { "resolution-mode": "import" } }).Ref<{
         fill: undefined;
         stroke: undefined;
         image: undefined;
@@ -16,16 +24,9 @@ declare const _default: import("vue").DefineComponent<{
     updateStroke(update: any): void;
     updateText(update: any): void;
     updateImage(update: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
     featureProperties: {
         type: ObjectConstructor;
         required: true;
     };
 }>>, {}, {}>;
-export default _default;
-export type StyleOptions = {
-    fill?: import("ol/style/Fill").Options | null | undefined;
-    stroke?: import("ol/style/Stroke").Options | null | undefined;
-    image?: import("ol/style/Image").Options | null | undefined;
-    text?: import("ol/style/Text").Options | null | undefined;
-};

package/src/components/style/{VcsFillMenu.vue → VcsFillMenu.ts.vue}

@@ -14,12 +14,14 @@
   </StyleMenuWrapper>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { VSheet } from 'vuetify/components';
+  import type { Options as FillOptions } from 'ol/style/Fill.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import VcsFillSelector from './VcsFillSelector.vue';
-  import StyleMenuWrapper from './StyleMenuWrapper.vue';
+  import VcsFillSelector from './VcsFillSelector.ts.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.ts.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -28,7 +30,7 @@
    * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [255, 255, 255, 1] } is emitted.
    * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsFillMenu',
     components: {
       VSheet,
@@ -37,7 +39,7 @@
     },
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<FillOptions>,
         default: undefined,
       },
     },
@@ -48,7 +50,7 @@
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/style/VcsFillMenu.ts.vue.d.ts

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue';
+import type { Options as FillOptions } from 'ol/style/Fill.js';
+/**
+ * @description A wrapper for the VcsFillSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the fill selector.
+ * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted.
+ * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [255, 255, 255, 1] } is emitted.
+ * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<FillOptions>;
+        default: undefined;
+    };
+}, {
+    rgbaString: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<FillOptions>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: FillOptions;
+}, {}>;

package/src/components/style/{VcsFillSelector.vue → VcsFillSelector.ts.vue}

@@ -9,8 +9,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
   import { VColorPicker } from 'vuetify/components';
+  import type { Options as FillOptions } from 'ol/style/Fill.js';
   import { useColorObject } from './composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -18,26 +21,31 @@
    * @description Allows to model a JSON representation of ol/Fill vector style with a vuetify VColorPicker.
    * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsFillSelector',
     components: {
       VColorPicker,
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<FillOptions>,
+        default: () => ({}),
       },
     },
     setup(props, { emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       return {
         rgbaObject: useColorObject(() => localValue.value?.color),
-        updateColor(rgba) {
+        updateColor(rgba: {
+          r: number;
+          g: number;
+          b: number;
+          a: number;
+        }): void {
           // Ensures alpha is not null, e.g. when the color is set by the user by pastying a color code.
           localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a ?? 1];
         },
       };
     },
-  };
+  });
 </script>