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

package/src/components/modelHelper.d.ts

@@ -4,22 +4,35 @@
  * 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export function useProxiedAtomicModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
 /**
  * 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export function useProxiedComplexModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+/**
+ * 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<D>(localValue: import("vue").Ref<Object>, key: string, defaultValue: D): import('vue').WritableComputedRef<boolean>;

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!
@@ -7,11 +8,12 @@ import deepEqual from 'fast-deep-equal';
  * 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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]);
@@ -42,11 +44,12 @@ export function useProxiedAtomicModel(props, prop, emit) {
  * 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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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])));
@@ -59,7 +62,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 +87,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 +103,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/notification/VcsBadge.vue

@@ -1,9 +1,9 @@
 <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>
-  .badge {
+  .vcs-badge {
     border: 1px solid rgb(var(--v-theme-surface)) !important;
   }
   .h-3 {

package/src/components/notification/VcsHelp.vue

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="show" class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4">
-    <v-container class="pa-1 vcs-help">
+  <div
+    v-if="$slots.default || text"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4 vcs-help"
+  >
+    <v-container class="py-1 px-2 vcs-help">
       <slot>
         <span>{{ $st(text) }}</span>
       </slot>
@@ -10,6 +13,7 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
+    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */
@@ -22,7 +26,6 @@
   /**
    * @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 {
@@ -35,10 +38,6 @@
         type: String,
         default: undefined,
       },
-      show: {
-        type: Boolean,
-        required: true,
-      },
     },
   };
 </script>

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

@@ -3,19 +3,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        required: true;
-    };
 }, 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;
 }, {}>;

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,5 +1,5 @@
 <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 gc-2 px-2 pt-2 pb-1">
@@ -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;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, 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;
+});

package/src/components/{form-inputs-controls → section}/VcsFormSection.vue

@@ -10,16 +10,16 @@
             <v-btn
               :ripple="false"
               dense
-              variant="plain"
+              variant="text"
               icon
-              :size="useItemHeight().value - 4"
+              :size="fontSize * 2"
               :disabled="disabled"
               elevation="0"
               @click="open = !open"
               v-if="expandable"
               :aria-expanded="open"
             >
-              <v-icon :size="useItemHeight().value - 8">{{
+              <v-icon>{{
                 open ? 'mdi-chevron-down' : 'mdi-chevron-right'
               }}</v-icon>
             </v-btn>
@@ -36,7 +36,7 @@
         </div>
       </div>
     </slot>
-    <VcsHelp :text="helpText" :show="showHelp">
+    <VcsHelp :text="helpText" v-if="showHelp && ($slots.help || helpText)">
       <slot name="help" />
     </VcsHelp>
     <article class="section-content" v-if="showContent">
@@ -48,7 +48,7 @@
 <script>
   import { computed, reactive, ref } from 'vue';
   import { VBtn, VIcon } from 'vuetify/components';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -134,12 +134,14 @@
         return props.headerActions;
       });
 
+      const fontSize = useFontSize();
+
       return {
         open,
         showContent,
         showHelp,
         actions,
-        useItemHeight,
+        fontSize,
       };
     },
   };
@@ -147,9 +149,13 @@
 
 <style lang="scss" scoped>
   .vcs-form-section-header {
-    height: calc(var(--v-vcs-item-height) + 8px);
+    height: calc(var(--v-vcs-font-size) * 2 + 14px);
   }
   .v-alert--text:before {
     background-color: transparent;
   }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
 </style>

package/src/components/{form-inputs-controls → section}/VcsFormSection.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     showContent: import("vue").ComputedRef<boolean>;
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
-    useItemHeight: typeof useItemHeight;
+    fontSize: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
@@ -69,9 +69,8 @@ declare const _default: import("vue").DefineComponent<{
     headerActions: unknown[];
     heading: string;
     actionButtonListOverflowCount: number;
+    helpText: string;
     expandable: boolean;
     startOpen: boolean;
-    helpText: string;
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';