@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

package/src/components/modelHelper.js

@@ -1,5 +1,6 @@
 import { computed, ref, toRaw, watch } from 'vue';
 import deepEqual from 'fast-deep-equal';
+import { getLogger } from '@vcsuite/logger';
 
 /**
  * Can only be used in setup of Vue components!
@@ -59,7 +60,14 @@ export function useProxiedComplexModel(props, prop, emit) {
       if (deepEqual(internal.value, newValue)) {
         return;
       }
-      internal.value = structuredClone(newValue);
+      try {
+        internal.value = structuredClone(newValue);
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to update internal value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
     },
     {
       deep: true,
@@ -77,7 +85,14 @@ export function useProxiedComplexModel(props, prop, emit) {
       if (deepEqual(value, newValue)) {
         return;
       }
-      emit(`update:${prop}`, structuredClone(newValue));
+      try {
+        emit(`update:${prop}`, structuredClone(newValue));
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to emit value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
     },
     {
       deep: true,
@@ -86,3 +101,28 @@ export function useProxiedComplexModel(props, prop, emit) {
 
   return internal;
 }
+
+/**
+ * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
+ * Getter returns true, if property is available, otherwise false.
+ * Setter applies provided defaultValue on the model object, if checked (true) and undefined, if unchecked (false)
+ * @param {import("vue").Ref<Object>} localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
+ * @param {string} key The key of the localValue that should be return on get and updated on set.
+ * @param {D} defaultValue  The default value that is set on checked (true)
+ * @returns {import('vue').WritableComputedRef<boolean>}
+ * @template D
+ */
+export function useModelHasProperty(localValue, key, defaultValue) {
+  const model = () => localValue.value;
+  return computed({
+    get() {
+      return model()[key] !== undefined;
+    },
+    set(value) {
+      const v = value ? defaultValue : undefined;
+      if (localValue.value[key] !== v) {
+        localValue.value[key] = v;
+      }
+    },
+  });
+}

package/src/components/section/VcsExpansionPanel.vue

@@ -0,0 +1,101 @@
+<script setup>
+  import {
+    VExpansionPanel,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
+    VIcon,
+    VTooltip,
+    VListItemTitle,
+  } from 'vuetify/components';
+  import { computed, ref, useSlots } from 'vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    heading: {
+      type: String,
+      default: undefined,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headerActions: {
+      type: Array,
+      default: () => [],
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  });
+
+  const slots = useSlots();
+
+  const panelHeader = ref(null);
+  const panelHeaderTooltip = createEllipseTooltip(
+    computed(() => panelHeader.value?.$el),
+    computed(() => undefined),
+    computed(() => props.heading),
+  );
+</script>
+<template>
+  <v-expansion-panel :disabled="disabled" v-bind="$attrs">
+    <v-expansion-panel-title static class="px-2">
+      <template #default="{ expanded }">
+        <v-list-item-title ref="panelHeader">
+          <v-icon v-if="!expanded" class="pr-1"> mdi-chevron-down </v-icon>
+          <v-icon v-if="expanded" class="pr-1"> mdi-chevron-right </v-icon>
+          <span
+            :class="{
+              'vcs-panel-title__append':
+                !!slots['header-append'] && !!panelHeaderTooltip,
+            }"
+          >
+            {{ $st(heading) }}
+          </span>
+          <v-tooltip
+            v-if="panelHeaderTooltip"
+            activator=".v-expansion-panel-title"
+          >
+            {{ $st(panelHeaderTooltip) }}
+          </v-tooltip>
+          <slot name="header-append" />
+        </v-list-item-title>
+      </template>
+      <template #actions>
+        <VcsActionButtonList
+          v-if="headerActions?.length > 0"
+          :actions="headerActions"
+          :overflow-count="actionButtonListOverflowCount"
+        />
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <slot name="default" />
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<style scoped lang="scss">
+  :deep(.v-expansion-panel-title) {
+    font-size: var(--v-vcs-font-size);
+    min-height: unset;
+    height: var(--v-vcs-item-height);
+    line-height: 1.2;
+    padding: 0 8px;
+  }
+
+  .vcs-panel-title__append {
+    width: 90%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+  }
+
+  :deep(.v-expansion-panel-text__wrapper) {
+    padding: 0 0;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    headerActions: unknown[];
+    disabled: boolean;
+    heading?: string | undefined;
+    actionButtonListOverflowCount?: number | undefined;
+    $props: {
+        readonly headerActions?: unknown[] | undefined;
+        readonly disabled?: boolean | undefined;
+        readonly heading?: string | undefined;
+        readonly actionButtonListOverflowCount?: number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    "header-append"?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/style/MenuWrapper.vue

@@ -3,7 +3,7 @@
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"
-        @change="handleCheckbox"
+        @update:modelValue="handleCheckbox"
         :disabled="disabled"
       />
       <v-menu
@@ -11,24 +11,19 @@
         persistent
         v-model="isMenuOpen"
         :absolute="true"
-        :disabled="!value || disabled"
-        min-width="300"
-        max-width="300"
+        :disabled="!modelValue || disabled"
+        width="300"
       >
         <template #activator="{ props }">
-          <VcsTooltip :tooltip="name">
-            <template #activator>
-              <v-card
-                rounded
-                height="24px"
-                width="32px"
-                v-bind="props"
-                class="tiled-background"
-              >
-                <slot name="preview" />
-              </v-card>
-            </template>
-          </VcsTooltip>
+          <v-card
+            rounded
+            height="24px"
+            width="32px"
+            v-bind="props"
+            class="tiled-background"
+          >
+            <slot name="preview" />
+          </v-card>
         </template>
         <VcsFormSection
           :heading="name"
@@ -60,21 +55,22 @@
 </template>
 
 <script>
-  import { ref } from 'vue';
+  import { ref, toRaw } from 'vue';
   import { VSheet, VMenu, VCard } from 'vuetify/components';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
 
   /**
    * @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 vauleDefault is undefined or null, the valueFallback will be emitted.
+   * - 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} [value] - Style options that are modelled by the checkbox.
+   * @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
    */
   export default {
     name: 'MenuWrapper',
@@ -83,13 +79,11 @@
       VMenu,
       VCard,
       VcsFormSection,
-      VcsTooltip,
       VcsCheckbox,
     },
     props: {
       modelValue: {
         default: undefined,
-        required: false,
         type: Object,
       },
       valueDefault: {
@@ -109,13 +103,14 @@
         type: Boolean,
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
       const isMenuOpen = ref(false);
 
       return {
         isMenuOpen,
         reset() {
-          emit('update:modelValue', props.valueDefault);
+          emit('update:modelValue', structuredClone(toRaw(props.valueDefault)));
         },
         close() {
           isMenuOpen.value = false;
@@ -123,7 +118,10 @@
         handleCheckbox(value) {
           emit(
             'update:modelValue',
-            value ? props.valueDefault || props.valueFallback : null,
+            value
+              ? structuredClone(toRaw(props.valueDefault)) ||
+                  structuredClone(toRaw(props.valueFallback))
+              : null,
           );
         },
       };

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

@@ -1,7 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
-        required: false;
         type: ObjectConstructor;
     };
     valueDefault: {
@@ -25,10 +24,9 @@ declare const _default: import("vue").DefineComponent<{
     reset(): void;
     close(): void;
     handleCheckbox(value: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
-        required: false;
         type: ObjectConstructor;
     };
     valueDefault: {
@@ -47,7 +45,9 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
     modelValue: Record<string, any>;
     valueDefault: Record<string, any>;

package/src/components/style/VcsFillMenu.vue

@@ -1,14 +1,14 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, modelValue, valueDefault, disabled }"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <v-sheet :color="rgbaString" width="100%" height="100%" />
     </template>
     <template #content>
-      <VcsFillSelector :model-value="modelValue" v-bind="$attrs" />
+      <VcsFillSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
   </MenuWrapper>
 </template>
@@ -16,16 +16,16 @@
 <script>
   import { computed } from 'vue';
   import { VSheet } from 'vuetify/components';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsFillSelector from './VcsFillSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.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} [value] - The Fill Options
-   * @vue-prop {import("ol/style/Fill").Options} [valueDefault] - The default Fill Options
-   * @vue-prop {boolean} [disabled=false] - Disable the input
+   * 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
    */
   export default {
     name: 'VcsFillMenu',
@@ -39,17 +39,10 @@
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props) {
-      const rgbaObject = useColorObject(() => props.modelValue?.color);
+    setup(props, { emit }) {
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+      const rgbaObject = useColorObject(() => localValue.value?.color);
       return {
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };

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

@@ -3,14 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     rgbaString: import("vue").ComputedRef<string>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -18,17 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
-    disabled: boolean;
     modelValue: Record<string, any>;
-    valueDefault: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/style/VcsFillSelector.vue

@@ -1,26 +1,25 @@
 <template>
-  <v-sheet>
-    <v-color-picker
-      :model-value="rgbaObject"
-      @update:model-value="updateColor"
-      mode="rgba"
-      :disabled="!value"
-    />
-  </v-sheet>
+  <v-color-picker
+    :model-value="rgbaObject"
+    @update:model-value="updateColor"
+    mode="rgba"
+    :disabled="!modelValue"
+    width="100%"
+  />
 </template>
 
 <script>
-  import { VSheet, VColorPicker } from 'vuetify/components';
+  import { VColorPicker } from 'vuetify/components';
   import { useColorObject } from './composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * @description Allows to model a JSON representation of ol/Fill vector style with a vuetify VColorPicker.
-   * @vue-prop {import("ol/style/Fill").Options} value - The Fill Options
+   * @vue-prop {import("ol/style/Fill").Options} [modelValue] - The Fill Options
    */
   export default {
     name: 'VcsFillSelector',
     components: {
-      VSheet,
       VColorPicker,
     },
     props: {
@@ -30,13 +29,11 @@
       },
     },
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       return {
-        rgbaObject: useColorObject(() => props.modelValue?.color),
+        rgbaObject: useColorObject(() => localValue.value?.color),
         updateColor(rgba) {
-          const fill = {
-            color: [rgba.r, rgba.g, rgba.b, rgba.a],
-          };
-          emit('update:modelValue', fill);
+          localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
       };
     },

package/src/components/style/VcsImageMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, modelValue, valueDefault }"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },
       stroke: { color: [0, 0, 0, 1], width: 2 },
     }"
     name="components.style.image"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <canvas ref="canvas" width="32" height="24" />
@@ -15,10 +15,7 @@
       <VcsImageSelector
         v-bind="{
           ...$attrs,
-          modelValue,
-          valueDefault,
-          iconOptions,
-          extendedShapeSettings,
+          ...$props,
         }"
         class="pb-2"
       />
@@ -28,15 +25,13 @@
 
 <script>
   import { onMounted, ref, watch } from 'vue';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import MenuWrapper from './MenuWrapper.vue';
   import VcsImageSelector, { drawImageStyle } from './VcsImageSelector.vue';
 
   /**
    * @description A wrapper for the VcsImageSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the image selector.
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} modelValue - The Image options
-   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} valueDefault - The default image options
-   * @vue-prop {import("ol/style/Icon").Options} iconOptions - The icon options too choose from. Scale and opacity are ignored.
-   * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} [modelValue] - The Image options
    */
   export default {
     name: 'VcsImageMenu',
@@ -49,29 +44,17 @@
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
-      iconOptions: {
-        type: Array,
-        default: undefined,
-      },
-      extendedShapeSettings: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props) {
+    setup(props, { emits }) {
       const canvas = ref(null);
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emits);
 
       onMounted(() => {
-        drawImageStyle(canvas.value, props.modelValue, true);
+        drawImageStyle(canvas.value, localValue.value, true);
         watch(
           () => props.modelValue,
           () => {
-            // XXX Maybe add some sort of timeout funciton, so it draws only once when user stops using the slider
-            drawImageStyle(canvas.value, props.modelValue, true);
+            drawImageStyle(canvas.value, localValue.value, true);
           },
           { deep: true },
         );

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

@@ -3,18 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    iconOptions: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    extendedShapeSettings: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     canvas: import("vue").Ref<null>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -22,22 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    iconOptions: {
-        type: ArrayConstructor;
-        default: undefined;
-    };
-    extendedShapeSettings: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
     modelValue: Record<string, any>;
-    valueDefault: Record<string, any>;
-    extendedShapeSettings: boolean;
-    iconOptions: unknown[];
 }, {}>;
 export default _default;