@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/modelHelper.js

@@ -0,0 +1,130 @@
+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!
+ * Provides a computed model for atomic properties.
+ * getter returns the internal value
+ * setter updates internal value and emits the update event
+ * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ * @template  {string} [P=string]
+ */
+export function useProxiedAtomicModel(props, prop, emit) {
+  const internal = ref(props[prop]);
+
+  // Watch for changes in prop (reassignment) and update internal
+  watch(
+    () => props[prop],
+    (newValue) => {
+      internal.value = newValue;
+    },
+  );
+
+  return computed({
+    get() {
+      return internal.value;
+    },
+    set(newValue) {
+      if (internal.value !== newValue) {
+        internal.value = newValue;
+        emit(`update:${prop}`, newValue);
+      }
+    },
+  });
+}
+
+/**
+ * Can only be used in setup of Vue components!
+ * Provides a ref model for complex properties.
+ * Watches changes on the provided prop and updates the internal ref
+ * Watches changes on the internal ref and emits the change, if prop has not already been updated
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ * @template {string} [P=string]
+ */
+export function useProxiedComplexModel(props, prop, emit) {
+  const internal = ref(structuredClone(toRaw(props[prop])));
+
+  // Watch for changes in prop (reassignment) and update internal
+  watch(
+    () => props[prop],
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      if (deepEqual(internal.value, newValue)) {
+        return;
+      }
+      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,
+      immediate: true,
+    },
+  );
+
+  // Watch for changes in internal (key updates and reassign) and emit to update prop
+  // if prop is already equal internal, do not emit
+  watch(
+    internal,
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      const value = toRaw(props[prop]);
+      if (deepEqual(value, newValue)) {
+        return;
+      }
+      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,
+    },
+  );
+
+  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/notification/VcsBadge.vue

@@ -1,14 +1,16 @@
 <template>
-  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+  <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-  .v-application .theme--light .badge {
-    border: 1px solid map-get($shades, 'white') !important;
+  .vcs-badge {
+    border: 1px solid rgb(var(--v-theme-surface)) !important;
   }
-  .v-application .theme--dark .badge {
-    border: 1px solid map-get($shades, 'black') !important;
+  .h-3 {
+    height: 12px;
+  }
+  .w-3 {
+    width: 12px;
   }
 </style>
 
@@ -22,7 +24,7 @@
     props: {
       color: {
         type: String,
-        default: 'warning',
+        default: 'bg-warning',
       },
     },
   };

package/src/components/notification/VcsBadge.vue.d.ts

@@ -3,12 +3,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     color: {
         type: StringConstructor;
         default: string;
     };
 }>>, {
     color: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/notification/VcsHelp.vue

@@ -1,39 +1,43 @@
 <template>
-  <v-alert
-    :value="show"
-    dense
-    text
-    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
+  <div
+    v-if="$slots.default || text"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4 vcs-help"
   >
-    <slot>
-      <span>{{ $t(text) }}</span>
-    </slot>
-  </v-alert>
+    <v-container class="py-1 px-2 vcs-help">
+      <slot>
+        <span>{{ $st(text) }}</span>
+      </slot>
+    </v-container>
+  </div>
 </template>
-
+<style lang="scss">
+  .vcs-help {
+    box-sizing: border-box;
+    padding-left: 16px;
+    ol,
+    ul {
+      padding-left: 16px; /* Indentation for list items */
+    }
+  }
+</style>
 <script>
-  import { VAlert } from 'vuetify/lib';
+  import { VContainer } from 'vuetify/components';
 
   /**
-   * @description Wraps Vuetify VAlert for displaying help.
+   * @description A component for displaying help.
    * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
-   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
    * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
    */
   export default {
     name: 'VcsHelp',
     components: {
-      VAlert,
+      VContainer,
     },
     props: {
       text: {
         type: String,
         default: undefined,
       },
-      show: {
-        type: Boolean,
-        required: true,
-      },
     },
   };
 </script>

package/src/components/notification/VcsHelp.vue.d.ts

@@ -3,20 +3,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        required: true;
-    };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        required: true;
-    };
 }>>, {
     text: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/notification/VcsHelpTooltip.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-tooltip class="vcs-help-tooltip">
+    <template #activator="{ props }">
+      <v-icon :size="fontSize" v-bind="props" :icon="icon" />
+    </template>
+    <v-container class="py-1 px-2 vcs-help-tooltip-container">
+      <slot>
+        <span class="vcs-help-tooltip-text">{{ $st(text) }}</span>
+      </slot>
+    </v-container>
+  </v-tooltip>
+</template>
+<style lang="scss" scoped></style>
+<script>
+  import { VTooltip, VIcon, VContainer } from 'vuetify/components';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
+
+  /**
+   * @description A component for displaying help as tooltip via an icon.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelpTooltip',
+    components: {
+      VTooltip,
+      VIcon,
+      VContainer,
+    },
+    props: {
+      icon: {
+        type: String,
+        default: '$vcsHelp',
+      },
+      text: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup() {
+      const fontSize = useFontSize();
+
+      return {
+        fontSize,
+      };
+    },
+  };
+</script>

package/src/components/notification/VcsHelpTooltip.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    fontSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    text: string;
+    icon: string;
+}, {}>;
+export default _default;

package/src/components/plugins/AbstractConfigEditor.vue

@@ -1,14 +1,14 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 abstract-config-editor">
     <v-form v-model="isValid" @submit.prevent="submit">
       <slot />
-      <div class="d-flex gap-2 px-2 pt-2 pb-1">
-        <div class="d-flex gap-2 w-full justify-start">
+      <div class="d-flex gc-2 px-2 pt-2 pb-1">
+        <div class="d-flex gc-2 w-100 justify-start">
           <VcsFormButton v-if="showReset" icon="$vcsReturn" @click="reset" />
         </div>
-        <div class="d-flex gap-2 w-full justify-end">
+        <div class="d-flex gc-2 w-100 justify-end">
           <VcsFormButton type="submit" variant="filled" :disabled="!isValid">
-            {{ $t(submitButtonTitle) }}
+            {{ $st(submitButtonTitle) }}
           </VcsFormButton>
           <VcsFormButton @click.stop="cancel">
             {{ $t('components.cancel') }}
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-  import { VContainer, VForm } from 'vuetify/lib';
+  import { VContainer, VForm } from 'vuetify/components';
   import { ref, inject } from 'vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
@@ -32,11 +32,7 @@
    * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
    * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
    * @vue-prop {string} [submitButtonTitle='components.apply'] - Option to change the submit button title, e.g. to 'components.add'.
-   * @vue-prop {boolean} [setConfigOnCancel=true] - Whether setConfig shall be called on cancel. Ensures compatability with v5.0.x
    * @vue-prop {boolean} [autoClose=true] - Whether window component shall be close on submit or cancel.
-   * @vue-prop {function():void} [onSubmit] - Callback function called on submit.
-   * @vue-prop {function():void} [onReset] - Callback function called on reset.
-   * @vue-prop {function():void} [onCancel] - Callback function called on cancel.
    * @vue-event {Event} submit - Event fired on clicking the submit button.
    * @vue-event {Event} cancel - Event fired on clicking the cancel button.
    * @vue-event {Event} reset - Event fired on clicking the reset button.
@@ -70,19 +66,8 @@
         type: Boolean,
         default: true,
       },
-      onSubmit: {
-        type: Function,
-        default: () => {},
-      },
-      onReset: {
-        type: Function,
-        default: () => {},
-      },
-      onCancel: {
-        type: Function,
-        default: () => {},
-      },
     },
+    emits: ['submit', 'cancel', 'reset'],
     setup(props, { attrs, emit }) {
       const app = inject('vcsApp');
 
@@ -95,24 +80,18 @@
       return {
         isValid: ref(true),
         submit(e) {
-          props.onSubmit();
           emit('submit', e);
           if (props.autoClose) {
             close();
           }
         },
         cancel(e) {
-          props.onCancel();
-          if (props.setConfigOnCancel) {
-            attrs.setConfig?.();
-          }
           emit('cancel', e);
           if (props.autoClose) {
             close();
           }
         },
         reset(e) {
-          props.onReset();
           emit('reset', e);
         },
       };

package/src/components/plugins/AbstractConfigEditor.vue.d.ts

@@ -19,24 +19,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
 }, {
     isValid: import("vue").Ref<boolean>;
     submit(e: any): void;
     cancel(e: any): void;
     reset(e: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "reset" | "submit")[], "cancel" | "reset" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showReset: {
         type: BooleanConstructor;
         default: boolean;
@@ -57,26 +45,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-}>>, {
-    onReset: Function;
-    onSubmit: Function;
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
     actions: unknown[];
     showReset: boolean;
     submitButtonTitle: string;
     setConfigOnCancel: boolean;
     autoClose: boolean;
-    onCancel: Function;
-}>;
+}, {}>;
 export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -0,0 +1,111 @@
+<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';
+  import { useIconSize } from '../../vuePlugins/vuetify.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),
+  );
+  const iconSize = useIconSize();
+</script>
+<template>
+  <v-expansion-panel
+    :disabled="disabled"
+    v-bind="$attrs"
+    class="vcs-expansion-panel"
+  >
+    <v-expansion-panel-title static class="px-2">
+      <template #default="{ expanded }">
+        <v-list-item-title ref="panelHeader">
+          <v-icon :size="iconSize" v-if="!expanded" class="pr-1">
+            mdi-chevron-right
+          </v-icon>
+          <v-icon :size="iconSize" v-if="expanded" class="pr-1">
+            mdi-chevron-down
+          </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: calc(var(--v-vcs-font-size) * 2 + 6px);
+    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<{}, {
+    disabled: boolean;
+    headerActions: unknown[];
+    heading?: string | undefined;
+    actionButtonListOverflowCount?: number | undefined;
+    $props: {
+        readonly disabled?: boolean | undefined;
+        readonly headerActions?: unknown[] | 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;
+});