@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,20 +1,16 @@
 <template>
   <div
-    class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
   >
     <slot name="prepend">
       <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
     </slot>
 
-    <slot v-bind="{ ...$props, on: $listeners }">
-      <v-text-field
-        solo
-        dense
-        hide-details
-        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
-        :placeholder="$t(placeholder)"
-        :value="value"
-        v-on="$listeners"
+    <slot v-bind="{ ...$props, attrs: $attrs }">
+      <VcsTextField
+        class="searchbar outlined rounded-xl align-center justify-center base-lighten-4 pa-1 pl-6"
+        :placeholder="$st(placeholder)"
+        v-bind="$attrs"
         clearable
       />
     </slot>
@@ -26,10 +22,6 @@
 </template>
 
 <style lang="scss" scoped>
-  .input-container {
-    position: relative;
-  }
-
   .search-icon {
     position: absolute;
     top: 50%;
@@ -37,83 +29,55 @@
     left: 12px;
   }
 
-  input {
-    border-radius: 9999rem;
+  // set rounded outline
+  :deep(.v-input.outlined) {
     outline-style: none;
     font-size: 12px;
-    box-shadow: 0 0 0 1px var(--v-base-lighten2);
+    box-shadow: 0 0 0 1px rgb(var(--v-theme-base-lighten-2));
 
-    &:focus {
-      box-shadow: 0 0 0 1px var(--v-primary-base);
+    &:has(.v-field--focused) {
+      box-shadow: 0 0 0 1px rgb(var(--v-theme-primary)) !important;
     }
   }
 
-  ::v-deep {
-    .v-input__slot {
-      background-color: transparent !important;
-    }
-
-    .v-input__append-inner {
-      height: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .v-icon {
-        width: 20px;
-        height: 20px;
-        font-size: 16px;
-      }
-    }
-
-    .v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
-      min-height: unset;
-    }
-
-    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
-      > .v-input__control
-      > .v-input__slot,
-    .v-text-field.v-text-field--enclosed .v-text-field__details {
-      padding: 0 8px;
-    }
-
-    .v-input.outlined {
-      outline-style: none;
-      font-size: 12px;
-      box-shadow: 0 0 0 1px var(--v-base-lighten2);
+  // override item height
+  :deep(
+      .v-input--density-compact
+        > .v-input__control
+        > .v-field
+        > .v-field__field
+        > .v-field__input
+    ) {
+    --v-input-control-height: calc(var(--v-vcs-item-height) - 20px) !important;
+    min-height: var(--v-input-control-height);
+  }
 
-      &:focus,
-      &.v-input--is-focused {
-        box-shadow: 0 0 0 1px var(--v-primary-base);
-      }
-    }
+  // override background color of VcsTextField
+  :deep(.v-input) {
+    background: rgb(var(--v-theme-base-lighten-4));
+  }
 
-    .v-text-field.v-input--dense:not(
-        .v-text-field--outlined
-      ).v-text-field__prefix,
-    .v-text-field.v-input--dense:not(
-        .v-text-field--outlined
-      ).v-text-field__suffix,
-    .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
-      padding: 0;
-    }
+  // remove outline of VcsTextField
+  :deep(.v-field *) {
+    border-width: 0;
+    border-bottom: 0;
+  }
 
-    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
-      > .v-input__control
-      > .v-input__slot {
-      box-shadow: none;
-      border-radius: 0;
-    }
+  // override primary--placeholder of VcsTextField
+  :deep(input::placeholder) {
+    color: rgb(var(--v-theme-base-lighten-1)) !important;
+    font-style: initial !important;
+    opacity: 0.75 !important;
   }
 </style>
 
 <script>
-  import { VIcon, VTextField } from 'vuetify/lib';
+  import { VIcon } from 'vuetify/components';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
 
   /**
    * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
    * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
-   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
    * @vue-prop {string} [value] - The search value
    * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
    * @vue-data {slot} [prepend] - prepend slot overwriting search icon
@@ -124,21 +88,13 @@
     name: 'VcsTreeviewSearchbar',
     components: {
       VIcon,
-      VTextField,
+      VcsTextField,
     },
     props: {
       placeholder: {
         type: String,
         default: 'search.title',
       },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
-      value: {
-        type: String,
-        default: '',
-      },
       hasFilter: {
         type: Boolean,
         default: false,

package/src/components/lists/VcsTreeviewSearchbar.vue.d.ts

@@ -3,39 +3,21 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    value: {
-        type: StringConstructor;
-        default: string;
-    };
     hasFilter: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, 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<{
     placeholder: {
         type: StringConstructor;
         default: string;
     };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    value: {
-        type: StringConstructor;
-        default: string;
-    };
     hasFilter: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
-    value: string;
-    customClasses: unknown[];
     placeholder: string;
     hasFilter: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/components/modelHelper.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedAtomicModel<T>(props: Object, prop: string, emit: (event: string, 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
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedComplexModel<T>(props: Object, prop: string, emit: (event: string, 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

@@ -0,0 +1,128 @@
+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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+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

@@ -3,12 +3,14 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-  .v-application .theme--light .badge {
-    border: 1px solid map-get($shades, 'white') !important;
+  .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,21 +1,26 @@
 <template>
-  <v-alert
-    :value="show"
-    dense
-    text
-    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
-  >
-    <slot>
-      <span>{{ $t(text) }}</span>
-    </slot>
-  </v-alert>
+  <div v-if="show" class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4">
+    <v-container class="pa-1 vcs-help">
+      <slot>
+        <span>{{ $st(text) }}</span>
+      </slot>
+    </v-container>
+  </div>
 </template>
-
+<style lang="scss">
+  .vcs-help {
+    box-sizing: border-box;
+    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.
@@ -23,7 +28,7 @@
   export default {
     name: 'VcsHelp',
     components: {
-      VAlert,
+      VContainer,
     },
     props: {
       text: {

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -18,5 +18,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     text: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/notification/VcsTooltip.vue

@@ -2,17 +2,13 @@
   <v-tooltip
     :disabled="!tooltip"
     :content-class="`tooltip ${arrowClass}`"
-    :bottom="tooltipPosition === 'bottom'"
-    :top="tooltipPosition === 'top'"
-    :left="tooltipPosition === 'left'"
-    :right="tooltipPosition === 'right'"
     transition="expand-x-transition"
     v-bind="{ ...$props, ...$attrs }"
   >
-    <template #activator="{ on, attrs }">
-      <slot name="activator" :on="on" :attrs="attrs" />
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="props" />
     </template>
-    <span>{{ $t(tooltip) }}</span>
+    <span v-if="tooltip">{{ $st(tooltip) }}</span>
   </v-tooltip>
 </template>
 <style lang="scss" scoped>
@@ -109,7 +105,7 @@
   //}
 </style>
 <script>
-  import { VTooltip } from 'vuetify/lib';
+  import { VTooltip } from 'vuetify/components';
 
   /**
    * @enum {string} TooltipPositions

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

@@ -8,9 +8,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator(value: unknown): boolean;
     };
-}, {}, {}, {
+}, any, any, {
     arrowClass(): any;
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tooltip: {
         type: StringConstructor;
         default: undefined;
@@ -23,5 +23,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     tooltip: string;
     tooltipPosition: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/plugins/AbstractConfigEditor.vue

@@ -2,13 +2,13 @@
   <v-container class="pa-0">
     <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';

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

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showReset: {
         type: BooleanConstructor;
         default: boolean;
@@ -78,5 +78,5 @@ declare const _default: import("vue").DefineComponent<{
     setConfigOnCancel: boolean;
     autoClose: boolean;
     onCancel: Function;
-}>;
+}, {}>;
 export default _default;

package/src/components/style/MenuWrapper.vue

@@ -2,28 +2,27 @@
   <v-sheet>
     <div class="d-flex align-center py-1">
       <VcsCheckbox
-        :value="!!value"
+        :model-value="!!modelValue"
         @change="handleCheckbox"
         :disabled="disabled"
       />
       <v-menu
         :close-on-content-click="false"
-        :close-on-click="false"
+        persistent
         v-model="isMenuOpen"
         :absolute="true"
         :disabled="!value || disabled"
         min-width="300"
         max-width="300"
       >
-        <template #activator="{ on, attrs }">
+        <template #activator="{ props }">
           <VcsTooltip :tooltip="name">
-            <template #activator="{ on: tooltipOn, attrs: tooltipAttrs }">
+            <template #activator>
               <v-card
                 rounded
                 height="24px"
                 width="32px"
-                v-bind="{ ...attrs, ...tooltipAttrs }"
-                v-on="{ ...on, ...tooltipOn }"
+                v-bind="props"
                 class="tiled-background"
               >
                 <slot name="preview" />
@@ -55,14 +54,14 @@
           <slot name="content" />
         </VcsFormSection>
       </v-menu>
-      <span class="ml-2">{{ $t(name) }}</span>
+      <span class="ml-2">{{ $st(name) }}</span>
     </div>
   </v-sheet>
 </template>
 
 <script>
   import { ref } from 'vue';
-  import { VSheet, VMenu, VCard } from 'vuetify/lib';
+  import { VSheet, VMenu, VCard } from 'vuetify/components';
   import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
@@ -88,7 +87,7 @@
       VcsCheckbox,
     },
     props: {
-      value: {
+      modelValue: {
         default: undefined,
         required: false,
         type: Object,
@@ -116,14 +115,14 @@
       return {
         isMenuOpen,
         reset() {
-          emit('input', props.valueDefault);
+          emit('update:modelValue', props.valueDefault);
         },
         close() {
           isMenuOpen.value = false;
         },
         handleCheckbox(value) {
           emit(
-            'input',
+            'update:modelValue',
             value ? props.valueDefault || props.valueFallback : null,
           );
         },